Merge lp:~alexander-wilms/midori/midori into lp:midori
- midori
- Merge into trunk
Status: | Merged | ||||
---|---|---|---|---|---|
Approved by: | Cody Garver | ||||
Approved revision: | 6248 | ||||
Merge reported by: | Cody Garver | ||||
Merged at revision: | not available | ||||
Proposed branch: | lp:~alexander-wilms/midori/midori | ||||
Merge into: | lp:midori | ||||
Diff against target: |
331 lines (+121/-71) 4 files modified
data/about.css (+69/-40) data/error.html (+13/-13) midori/midori-app.c (+3/-0) midori/midori-view.c (+36/-18) |
||||
To merge this branch: | bzr merge lp:~alexander-wilms/midori/midori | ||||
Related bugs: |
|
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Paweł Forysiuk | Approve | ||
Cris Dywan | Needs Fixing | ||
982c80311320c1b (community) | Needs Resubmitting | ||
Danielle Foré (community) | Needs Fixing | ||
Review via email:
|
Commit message
Error page redesign
Description of the change
Improved the error page: http://
- 6235. By 982c80311320c1b
-
tweaking
- 6236. By 982c80311320c1b
-
tweaking
- 6237. By 982c80311320c1b
-
tweaking
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
982c80311320c1b (alexander-wilms) wrote : | # |
- 6238. By 982c80311320c1b
-
tweaking
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Cris Dywan (kalikiana) wrote : | # |
The title should mention the domain at minimum, I don't want to read all text to remember which page this actually is about.
The logo is gone. I'm open to tweaks and different layout, but I definitely expect it in some form.
It feels much cleaner, which is nice, but a bit too "borderless". How about a subtle gradient?
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Danielle Foré (danrabbit) wrote : | # |
I agree the title needs to state the entire problem concisely. I think something like "Foobar can't be found" would work well.
While I don't really think the logo is required, if Christian wants it in it needs to stay.
I do think that having the white "dialog" on a grey page looks a little nicer here (even though it's not 100% consistent with how granite does embedded error pages, it is more consistent with how other people do embedded error pages). I would suggest a small border radius (like 4px) and a very small, light shadow.
I'm not sure the line "You might want to try one of these suggestions:" is entirely necessary. I think you could jump straight from the description to the bulleted list.
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Danielle Foré (danrabbit) wrote : | # |
Ah something else I forgot to mention: The button label should be Title Case "Try Again" and it'd be nice if it were a little bigger :)
- 6239. By 982c80311320c1b
-
Made msot changes suggested by kalikiana and DanRabbit
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
982c80311320c1b (alexander-wilms) wrote : | # |
I can get Midori_
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
982c80311320c1b (alexander-wilms) wrote : | # |
*can't
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Danielle Foré (danrabbit) wrote : | # |
For the "dialog" try:
border: 1px solid rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
and the body color of "#DEDEDE" to make it blend into elementary's tabs ;D
Starting to look really slick :)
- 6240. By 982c80311320c1b
-
Tweaking
- 6241. By 982c80311320c1b
-
g_free (title)
- 6242. By 982c80311320c1b
-
Use parse_hostname
- 6243. By 982c80311320c1b
-
fix icon position
- 6244. By 982c80311320c1b
-
Merge Pawels branch
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
982c80311320c1b (alexander-wilms) : | # |
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
982c80311320c1b (alexander-wilms) wrote : | # |
^ That was supposed to mean that I resubmitted the branch for a review
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Cris Dywan (kalikiana) wrote : | # |
No need to resubmit, just make sure Status says Needs Review. If you want to ensure people know you addressed their comment, just mention it briefly in a comment and it will send an email to all reviewers.
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
982c80311320c1b (alexander-wilms) wrote : | # |
Ah, ok. Well, I addressed your and Daniel's comments
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Cris Dywan (kalikiana) wrote : | # |
I didn't realize at first that you changed the icon which was among my suggestions, since it doesn't actually look less like an error than before - different icon, but same association.
How about network-error (error) and network-idle (delayed)? These look suitable to me.
Apart from that I love it.
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
982c80311320c1b (alexander-wilms) wrote : | # |
These don't seem to be part of the stock icons. How can I use them?
- 6245. By 982c80311320c1b
-
Use better icons
- 6246. By 982c80311320c1b
-
Added colon
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Paweł Forysiuk (tuxator) wrote : | # |
- There is no logo on the private page
- suggestion could be shown only on network error maybe with checking webkit error beforehand,
- in case of long-ish title of the page it spills over if you have a small monitor size
77 + result = midori_
278 + uri,
279 + "stock:
280 + title,
281 + message,
282 + error->message,
283 + g_string_free (suggestions, FALSE),
284 + _("Try Again"),
285 + web_frame);
could be squeezed to 2-3 lines
- 6247. By 982c80311320c1b
-
Fixes
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
982c80311320c1b (alexander-wilms) wrote : | # |
- I added the logo, but somehow the CSS to position it doesn't work
- I don't understand what you mean. Maybe kalikiana knows what should be done
- Can't reproduce that: http://
- Condensed them a bit
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Paweł Forysiuk (tuxator) wrote : | # |
You added ellipsis so it no longer spills
for logo in private html dir="ltr" should to the trick
otherwise looks fine
- 6248. By 982c80311320c1b
-
Added ltr
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
982c80311320c1b (alexander-wilms) wrote : | # |
The icons shown should be 48px, but they're 16px.
The dialog-warning was 48px, so what needs to be done to get the icons in the same size?
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Danielle Foré (danrabbit) wrote : | # |
Alex, I think this is something weird with GNOME icons and not with your branch. I pushed 48px network icons to lp:elementaryicons and they seem to work fine with your branch.
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
982c80311320c1b (alexander-wilms) wrote : | # |
Interesting. I copied your icons inro .../elementary/
But I think now it's ready to be merged
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Paweł Forysiuk (tuxator) : | # |
Preview Diff
1 | === modified file 'data/about.css' |
2 | --- data/about.css 2013-03-21 17:09:08 +0000 |
3 | +++ data/about.css 2013-06-30 07:38:25 +0000 |
4 | @@ -3,48 +3,53 @@ |
5 | This file is licensed under the terms of the expat license, see the file EXPAT. |
6 | */ |
7 | body { |
8 | - background-color: #eee; |
9 | - margin: 0; |
10 | - padding: 0; |
11 | -} |
12 | - |
13 | -#container { |
14 | - background: #f6fff3; |
15 | - min-width: 70%; |
16 | - max-width: 70%; |
17 | - margin: 2em auto 1em; |
18 | - padding: 1em; |
19 | - border: 0.2em solid #9acb7f; |
20 | - -webkit-border-radius: 1em; |
21 | -} |
22 | - |
23 | -#icon { |
24 | - float: left; |
25 | - padding-left: 1%; |
26 | - padding-top: 1%; |
27 | + background-color: #dedede; |
28 | + color: #222222; |
29 | + font-family: 'Open Sans', 'Droid Sans', Arial, sans-serif; |
30 | + font-size: 14px; |
31 | + font-style: normal; |
32 | + font-variant: normal; |
33 | + font-weight: normal; |
34 | + margin-top: 100px; |
35 | } |
36 | |
37 | html[dir="rtl"] #icon { |
38 | - float: right; |
39 | - padding-right: 1%; |
40 | + float: right; |
41 | + padding-right: 1%; |
42 | +} |
43 | + |
44 | +.indent { |
45 | + margin-left: 60px; |
46 | } |
47 | |
48 | #main { |
49 | - float: right; |
50 | - width: 75%; |
51 | + max-width: 50%; |
52 | + margin-left: auto; |
53 | + margin-right: auto; |
54 | + min-width: 480px; |
55 | + background-repeat: no-repeat; |
56 | + background-color: #ffffff; |
57 | + border: 1px solid rgba(0, 0, 0, .3); |
58 | + padding: 25px; |
59 | + -webkit-border-radius: 4px; |
60 | + -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1); |
61 | + background-position-x: 22px; |
62 | + background-position-y: 54px; |
63 | +} |
64 | + |
65 | +#text { |
66 | + margin-left: 80px; |
67 | } |
68 | |
69 | h1 { |
70 | - font-size: 1.4em; |
71 | - font-weight: bold; |
72 | - white-space: nowrap; |
73 | - overflow: hidden; |
74 | - text-overflow: ellipsis; |
75 | -} |
76 | - |
77 | -#logo { |
78 | - position: absolute; bottom: 15px; |
79 | - z-index: -1; |
80 | + font-family: 'Open Sans', 'Droid Sans', arial, sans-serif; |
81 | + font-size: 32px; |
82 | + font-style: normal; |
83 | + font-variant: normal; |
84 | + font-weight: 300; |
85 | + width: 100%; |
86 | + overflow: hidden; |
87 | + text-overflow: ellipsis; |
88 | } |
89 | |
90 | html[dir="ltr"] #logo { |
91 | @@ -61,11 +66,35 @@ |
92 | padding: 2px 1px; |
93 | } |
94 | |
95 | -#message { |
96 | - font-size: 1.1em; |
97 | - word-wrap: break-word; |
98 | -} |
99 | - |
100 | -#description { |
101 | - font-size: 1em; |
102 | +button { |
103 | + font-size: 14px; |
104 | +} |
105 | + |
106 | +.message { |
107 | + overflow: hidden; |
108 | + text-overflow: ellipsis; |
109 | +} |
110 | + |
111 | +.description { |
112 | + font-size: 1em; |
113 | + overflow: hidden; |
114 | + text-overflow: ellipsis; |
115 | +} |
116 | + |
117 | +#suggestions { |
118 | + overflow: hidden; |
119 | + text-overflow: ellipsis; |
120 | +} |
121 | + |
122 | +#button { |
123 | + text-align: right; |
124 | +} |
125 | + |
126 | +#logo { |
127 | + position: absolute; bottom: 15px; |
128 | + z-index: -1; |
129 | +} |
130 | + |
131 | +form { |
132 | + margin-bottom: 0px; |
133 | } |
134 | |
135 | === modified file 'data/error.html' |
136 | --- data/error.html 2013-02-25 23:51:48 +0000 |
137 | +++ data/error.html 2013-06-30 07:38:25 +0000 |
138 | @@ -9,21 +9,21 @@ |
139 | <link rel="stylesheet" type="text/css" href="res://about.css" /> |
140 | </head> |
141 | <body> |
142 | - <div id="container"> |
143 | - <img id="logo" src="res://logo-shade.png" /> |
144 | - <img id="icon" src="stock://gtk-dialog-error" /> |
145 | - <div id="main"> |
146 | - <h1>{title}</h1> |
147 | - <p id="message">{message}</p> |
148 | - <p id="description">{description}</p> |
149 | - <form method="GET" action="{uri}"> |
150 | - <button type="submit" onclick="location.reload(); return false;"> |
151 | - <img style="{hide-button-images}" src="stock://gtk-refresh"/> |
152 | +<img id="logo" src="res://logo-shade.png" /> |
153 | +<div id="main" style="background-image: url({error_icon});"> |
154 | + <div id="text"> |
155 | + <h1>{title}</h1> |
156 | + <p class="message">{message}<br><i>{description}</i></p> |
157 | + {suggestions} |
158 | + </div> |
159 | + <form method="GET" action="{uri}" id="button"> |
160 | + <button type="submit" onclick="location.reload(); return false;" autofocus="true" > |
161 | <span>{tryagain}</span> |
162 | </button> |
163 | </form> |
164 | </div> |
165 | - <br style="clear: both;"/> |
166 | - </div> |
167 | - </body> |
168 | + |
169 | +<br style="clear: both;"/> |
170 | +</div> |
171 | +</body> |
172 | </html> |
173 | |
174 | === modified file 'midori/midori-app.c' |
175 | --- midori/midori-app.c 2013-06-26 21:54:50 +0000 |
176 | +++ midori/midori-app.c 2013-06-30 07:38:25 +0000 |
177 | @@ -1320,6 +1320,7 @@ |
178 | gchar** *argument_vector, |
179 | const GOptionEntry *entries) |
180 | { |
181 | + |
182 | GtkIconSource* icon_source; |
183 | GtkIconSet* icon_set; |
184 | GtkIconFactory* factory; |
185 | @@ -1329,6 +1330,8 @@ |
186 | |
187 | static GtkStockItem items[] = |
188 | { |
189 | + { "network-error" }, |
190 | + { "network-idle" }, |
191 | { STOCK_IMAGE }, |
192 | { MIDORI_STOCK_WEB_BROWSER }, |
193 | { STOCK_NEWS_FEED }, |
194 | |
195 | === modified file 'midori/midori-view.c' |
196 | --- midori/midori-view.c 2013-06-25 22:32:12 +0000 |
197 | +++ midori/midori-view.c 2013-06-30 07:38:25 +0000 |
198 | @@ -79,9 +79,11 @@ |
199 | static gboolean |
200 | midori_view_display_error (MidoriView* view, |
201 | const gchar* uri, |
202 | + const gchar* error_icon, |
203 | const gchar* title, |
204 | const gchar* message, |
205 | const gchar* description, |
206 | + const gchar* suggestions, |
207 | const gchar* try_again, |
208 | #ifndef HAVE_WEBKIT2 |
209 | WebKitWebFrame* web_frame); |
210 | @@ -667,7 +669,7 @@ |
211 | gchar* slots = g_strjoinv (" , ", (gchar**)gcr_pkcs11_get_trust_lookup_uris ()); |
212 | gchar* title = g_strdup_printf ("Error granting trust: %s", error->message); |
213 | midori_tab_stop_loading (MIDORI_TAB (view)); |
214 | - midori_view_display_error (view, NULL, NULL, title, slots, |
215 | + midori_view_display_error (view, NULL, NULL, NULL, title, slots, NULL, |
216 | _("Trust this website"), NULL); |
217 | g_free (title); |
218 | g_free (slots); |
219 | @@ -789,8 +791,8 @@ |
220 | { |
221 | midori_tab_set_security (MIDORI_TAB (view), MIDORI_SECURITY_UNKNOWN); |
222 | midori_tab_stop_loading (MIDORI_TAB (view)); |
223 | - midori_view_display_error (view, NULL, NULL, _("Security unknown"), |
224 | - midori_location_action_tls_flags_to_string (tls_flags), |
225 | + midori_view_display_error (view, NULL, NULL, NULL, _("Security unknown"), |
226 | + midori_location_action_tls_flags_to_string (tls_flags), NULL, |
227 | _("Trust this website"), |
228 | NULL); |
229 | } |
230 | @@ -1171,9 +1173,11 @@ |
231 | static gboolean |
232 | midori_view_display_error (MidoriView* view, |
233 | const gchar* uri, |
234 | + const gchar* error_icon, |
235 | const gchar* title, |
236 | const gchar* message, |
237 | const gchar* description, |
238 | + const gchar* suggestions, |
239 | const gchar* try_again, |
240 | #ifndef HAVE_WEBKIT2 |
241 | WebKitWebFrame* web_frame) |
242 | @@ -1210,8 +1214,10 @@ |
243 | "rtl" : "ltr", |
244 | "{title}", title_escaped, |
245 | "{favicon}", katze_str_non_null (favicon), |
246 | + "{error_icon}", katze_str_non_null (error_icon), |
247 | "{message}", message, |
248 | "{description}", description, |
249 | + "{suggestions}", katze_str_non_null (suggestions), |
250 | "{tryagain}", try_again, |
251 | "{uri}", uri, |
252 | "{hide-button-images}", show_button_images ? "" : "display:none", |
253 | @@ -1248,6 +1254,7 @@ |
254 | #endif |
255 | gchar* title; |
256 | gchar* message; |
257 | + GString* suggestions; |
258 | gboolean result; |
259 | |
260 | /* The unholy trinity; also ignored in Webkit's default error handler */ |
261 | @@ -1262,10 +1269,18 @@ |
262 | return FALSE; |
263 | } |
264 | |
265 | - title = g_strdup_printf (_("Error - %s"), uri); |
266 | - message = g_strdup_printf (_("The page '%s' couldn't be loaded."), uri); |
267 | - result = midori_view_display_error (view, uri, title, |
268 | - message, error->message, _("Try again"), web_frame); |
269 | + title = g_strdup_printf (_("'%s' can't be found"), midori_uri_parse_hostname(uri, NULL)); |
270 | + message = g_strdup_printf (_("The page '%s' couldn't be loaded:"), midori_uri_parse_hostname(uri, NULL)); |
271 | + |
272 | + suggestions = g_string_new ("<ul id=\"suggestions\"><li>"); |
273 | + g_string_append_printf (suggestions, "%s</li><li>%s</li><li>%s</li></ul>", |
274 | + _("Check the address for typos"), |
275 | + _("Make sure that an ethernet cable is plugged in or the wireless card is activated"), |
276 | + _("Verify that your network settings are correct")); |
277 | + |
278 | + result = midori_view_display_error (view, uri, "stock://network-error", title, |
279 | + message, error->message, g_string_free (suggestions, FALSE), |
280 | + _("Try Again"), web_frame); |
281 | g_free (message); |
282 | g_free (title); |
283 | return result; |
284 | @@ -1397,8 +1412,8 @@ |
285 | const gchar* uri = webkit_web_view_get_uri (web_view); |
286 | gchar* title = g_strdup_printf (_("Oops - %s"), uri); |
287 | gchar* message = g_strdup_printf (_("Something went wrong with '%s'."), uri); |
288 | - midori_view_display_error (view, uri, title, |
289 | - message, "", _("Try again"), NULL); |
290 | + midori_view_display_error (view, uri, NULL, title, |
291 | + message, "", NULL, _("Try again"), NULL); |
292 | g_free (message); |
293 | g_free (title); |
294 | } |
295 | @@ -4093,15 +4108,16 @@ |
296 | else if (!strcmp (uri, "about:private")) |
297 | { |
298 | data = g_strdup_printf ( |
299 | - "<html><head><title>%s</title>" |
300 | + "<html dir=\"ltr\"><head><title>%s</title>" |
301 | "<link rel=\"stylesheet\" type=\"text/css\" href=\"res://about.css\">" |
302 | - "</head><body><div id=\"container\">" |
303 | - "<img id=\"logo\" src=\"res://logo-shade.png\" " |
304 | - "style=\"position: absolute; right: 15px; bottom: 15px; z-index: -9;\">" |
305 | - "<img id=\"icon\" src=\"stock://gtk-dialog-info\">" |
306 | - "<div id=\"main\"><h1>%s</h1>" |
307 | - "<p>%s</p><ul><li>%s</li><li>%s</li><li>%s</li></ul>" |
308 | - "<p>%s</p><ul><li>%s</li><li>%s</li><li>%s</li><li>%s</li></ul>" |
309 | + "</head>" |
310 | + "<body>" |
311 | + "<img id=\"logo\" src=\"res://logo-shade.png\" />" |
312 | + "<div id=\"main\" style=\"background-image: url(stock://gtk-dialog-info);\">" |
313 | + "<div id=\"text\">" |
314 | + "<h1>%s</h1>" |
315 | + "<p class=\"message\">%s</p><ul class=\" suggestions\"><li>%s</li><li>%s</li><li>%s</li></ul>" |
316 | + "<p class=\"message\">%s</p><ul class=\" suggestions\"><li>%s</li><li>%s</li><li>%s</li><li>%s</li></ul>" |
317 | "</div><br style=\"clear: both\"></div></body></html>", |
318 | _("Private Browsing"), _("Private Browsing"), |
319 | _("Midori doesn't store any personal data:"), |
320 | @@ -4204,8 +4220,10 @@ |
321 | midori_tab_set_uri (MIDORI_TAB (view), uri); |
322 | midori_tab_set_special (MIDORI_TAB (view), TRUE); |
323 | katze_item_set_meta_integer (view->item, "delay", MIDORI_DELAY_PENDING_UNDELAY); |
324 | - midori_view_display_error (view, NULL, NULL, _("Page loading delayed"), |
325 | + midori_view_display_error (view, NULL, "stock://network-idle", NULL, |
326 | + _("Page loading delayed:"), |
327 | _("Loading delayed either due to a recent crash or startup preferences."), |
328 | + NULL, |
329 | _("Load Page"), |
330 | NULL); |
331 | } |
Now it looks like this: http:// i.imgur. com/SV8WBxF. png