Merge lp:~alexander-wilms/midori/midori into lp:midori

[982c80311320c1b]

Error page redesign

Improved the error page: http://i.imgur.com/2OeaAIQ.png

[lp:~alexander-wilms/midori/midori]

6235. By 982c80311320c1b on 2013-06-24

tweaking

6236. By 982c80311320c1b on 2013-06-24

tweaking

6237. By 982c80311320c1b on 2013-06-24

tweaking

[982c80311320c1b (alexander-wilms)]

Now it looks like this: http://i.imgur.com/SV8WBxF.png

[lp:~alexander-wilms/midori/midori]

6238. By 982c80311320c1b on 2013-06-24

tweaking

[Cris Dywan (kalikiana)]

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?

review: Needs Fixing

[Danielle Foré (danrabbit)]

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.

review: Needs Fixing

[Danielle Foré (danrabbit)]

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 :)

[lp:~alexander-wilms/midori/midori]

6239. By 982c80311320c1b on 2013-06-26

Made msot changes suggested by kalikiana and DanRabbit

[982c80311320c1b (alexander-wilms)]

I can get Midori_URI_parse_hostname to work, since it's a C function. Maybe CHristian could fix this bit

[982c80311320c1b (alexander-wilms)]

*can't

[Danielle Foré (danrabbit)]

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 :)

[lp:~alexander-wilms/midori/midori]

6240. By 982c80311320c1b on 2013-06-27

Tweaking

6241. By 982c80311320c1b on 2013-06-27

g_free (title)

6242. By 982c80311320c1b on 2013-06-27

Use parse_hostname

6243. By 982c80311320c1b on 2013-06-27

fix icon position

6244. By 982c80311320c1b on 2013-06-27

Merge Pawels branch

[982c80311320c1b (alexander-wilms)]

review: Needs Resubmitting

[982c80311320c1b (alexander-wilms)]

^ That was supposed to mean that I resubmitted the branch for a review

[Cris Dywan (kalikiana)]

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.

[982c80311320c1b (alexander-wilms)]

Ah, ok. Well, I addressed your and Daniel's comments

[Cris Dywan (kalikiana)]

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.

review: Needs Fixing

[982c80311320c1b (alexander-wilms)]

These don't seem to be part of the stock icons. How can I use them?

[lp:~alexander-wilms/midori/midori]

6245. By 982c80311320c1b on 2013-06-29

Use better icons

6246. By 982c80311320c1b on 2013-06-29

Added colon

[Paweł Forysiuk (tuxator)]

- 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_view_display_error (view,
278 + uri,
279 + "stock://network-error",
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

[lp:~alexander-wilms/midori/midori]

6247. By 982c80311320c1b on 2013-06-29

Fixes

[982c80311320c1b (alexander-wilms)]

- 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://i.imgur.com/t5QmvfU.png
- Condensed them a bit

[Paweł Forysiuk (tuxator)]

You added ellipsis so it no longer spills
for logo in private html dir="ltr" should to the trick
otherwise looks fine

[lp:~alexander-wilms/midori/midori]

6248. By 982c80311320c1b on 2013-06-30

Added ltr

[982c80311320c1b (alexander-wilms)]

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?

[Danielle Foré (danrabbit)]

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.

[982c80311320c1b (alexander-wilms)]

Interesting. I copied your icons inro .../elementary/status/48 and I still saw the 16 variants.

But I think now it's ready to be merged

[Paweł Forysiuk (tuxator)]

review: Approve

=== modified file 'data/about.css'
--- data/about.css	2013-03-21 17:09:08 +0000
+++ data/about.css	2013-06-30 07:38:25 +0000
@@ -3,48 +3,53 @@
  This file is licensed under the terms of the expat license, see the file EXPAT.
  */
 body {
-   background-color: #eee;
-   margin: 0;
-   padding: 0;
-}
-
-#container {
-   background: #f6fff3;
-   min-width: 70%;
-   max-width: 70%;
-   margin: 2em auto 1em;
-   padding: 1em;
-   border: 0.2em solid #9acb7f;
-   -webkit-border-radius: 1em;
-}
-
-#icon {
-   float: left;
-   padding-left: 1%;
-   padding-top: 1%;
+   background-color: #dedede;
+    color: #222222;
+    font-family: 'Open Sans', 'Droid Sans', Arial, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    margin-top: 100px;
 }
 
 html[dir="rtl"] #icon {
-   float: right;
-   padding-right: 1%;
+    float: right;
+    padding-right: 1%;
+}
+
+.indent {
+    margin-left: 60px;
 }
 
 #main {
-   float: right;
-   width: 75%;
+    max-width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 480px;
+    background-repeat: no-repeat;
+    background-color: #ffffff;
+    border: 1px solid rgba(0, 0, 0, .3);
+    padding: 25px;
+    -webkit-border-radius: 4px;
+    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
+    background-position-x: 22px;
+    background-position-y: 54px;
+}
+
+#text {
+    margin-left: 80px;
 }
 
 h1 {
-   font-size: 1.4em;
-   font-weight: bold;
-   white-space: nowrap;
-   overflow: hidden;
-   text-overflow: ellipsis;
-}
-
-#logo {
-   position: absolute; bottom: 15px;
-   z-index: -1;
+    font-family: 'Open Sans', 'Droid Sans', arial, sans-serif;
+    font-size: 32px;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: 300;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 html[dir="ltr"] #logo {
@@ -61,11 +66,35 @@
     padding: 2px 1px;
 }
 
-#message {
-   font-size: 1.1em;
-   word-wrap: break-word;
-}
-
-#description {
-   font-size: 1em;
+button {
+	font-size: 14px;
+}
+
+.message {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.description {
+    font-size: 1em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#suggestions {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#button {
+    text-align: right;
+}
+
+#logo {
+   position: absolute; bottom: 15px;
+   z-index: -1;
+}
+
+form {
+	margin-bottom: 0px;
 }
 
=== modified file 'data/error.html'
--- data/error.html	2013-02-25 23:51:48 +0000
+++ data/error.html	2013-06-30 07:38:25 +0000
@@ -9,21 +9,21 @@
 <link rel="stylesheet" type="text/css" href="res://about.css" />
 </head>
 <body>
-    <div id="container">
-        <img id="logo" src="res://logo-shade.png" />
-        <img id="icon" src="stock://gtk-dialog-error" />
-        <div id="main">
-            <h1>{title}</h1>
-            <p id="message">{message}</p>
-            <p id="description">{description}</p>
-            <form method="GET" action="{uri}">
-                <button type="submit" onclick="location.reload(); return false;">
-                    <img style="{hide-button-images}" src="stock://gtk-refresh"/>
+<img id="logo" src="res://logo-shade.png" />
+<div id="main" style="background-image: url({error_icon});">
+            <div id="text">
+                <h1>{title}</h1>
+                <p class="message">{message}<br><i>{description}</i></p>
+                {suggestions}
+            </div>
+            <form method="GET" action="{uri}" id="button">
+                <button type="submit" onclick="location.reload(); return false;" autofocus="true" >
                     <span>{tryagain}</span>
                 </button>
             </form>
         </div>
-        <br style="clear: both;"/>
-    </div>
-  </body>
+    
+<br style="clear: both;"/>
+</div>
+</body>
 </html>
 
=== modified file 'midori/midori-app.c'
--- midori/midori-app.c	2013-06-26 21:54:50 +0000
+++ midori/midori-app.c	2013-06-30 07:38:25 +0000
@@ -1320,6 +1320,7 @@
                   gchar**            *argument_vector,
                   const GOptionEntry *entries)
 {
+
     GtkIconSource* icon_source;
     GtkIconSet* icon_set;
     GtkIconFactory* factory;
@@ -1329,6 +1330,8 @@
 
     static GtkStockItem items[] =
     {
+        { "network-error" },
+        { "network-idle" },
         { STOCK_IMAGE },
         { MIDORI_STOCK_WEB_BROWSER },
         { STOCK_NEWS_FEED },
 
=== modified file 'midori/midori-view.c'
--- midori/midori-view.c	2013-06-25 22:32:12 +0000
+++ midori/midori-view.c	2013-06-30 07:38:25 +0000
@@ -79,9 +79,11 @@
 static gboolean
 midori_view_display_error (MidoriView*     view,
                            const gchar*    uri,
+                           const gchar*    error_icon,
                            const gchar*    title,
                            const gchar*    message,
                            const gchar*    description,
+                           const gchar*    suggestions,
                            const gchar*    try_again,
 #ifndef HAVE_WEBKIT2
                            WebKitWebFrame* web_frame);
@@ -667,7 +669,7 @@
                         gchar* slots = g_strjoinv (" , ", (gchar**)gcr_pkcs11_get_trust_lookup_uris ());
                         gchar* title = g_strdup_printf ("Error granting trust: %s", error->message);
                         midori_tab_stop_loading (MIDORI_TAB (view));
-                        midori_view_display_error (view, NULL, NULL, title, slots,
+                        midori_view_display_error (view, NULL, NULL, NULL, title, slots, NULL,
                             _("Trust this website"), NULL);
                         g_free (title);
                         g_free (slots);
@@ -789,8 +791,8 @@
             {
                 midori_tab_set_security (MIDORI_TAB (view), MIDORI_SECURITY_UNKNOWN);
                 midori_tab_stop_loading (MIDORI_TAB (view));
-                midori_view_display_error (view, NULL, NULL, _("Security unknown"),
-                    midori_location_action_tls_flags_to_string (tls_flags),
+                midori_view_display_error (view, NULL, NULL, NULL, _("Security unknown"),
+                    midori_location_action_tls_flags_to_string (tls_flags), NULL,
                     _("Trust this website"),
                     NULL);
             }
@@ -1171,9 +1173,11 @@
 static gboolean
 midori_view_display_error (MidoriView*     view,
                            const gchar*    uri,
+                           const gchar*    error_icon,
                            const gchar*    title,
                            const gchar*    message,
                            const gchar*    description,
+                           const gchar*    suggestions,
                            const gchar*    try_again,
 #ifndef HAVE_WEBKIT2
                            WebKitWebFrame* web_frame)
@@ -1210,8 +1214,10 @@
                 "rtl" : "ltr",
             "{title}", title_escaped,
             "{favicon}", katze_str_non_null (favicon),
+            "{error_icon}", katze_str_non_null (error_icon),
             "{message}", message,
             "{description}", description,
+            "{suggestions}", katze_str_non_null (suggestions),
             "{tryagain}", try_again,
             "{uri}", uri,
             "{hide-button-images}", show_button_images ? "" : "display:none",
@@ -1248,6 +1254,7 @@
     #endif
     gchar* title;
     gchar* message;
+    GString* suggestions;
     gboolean result;
 
     /* The unholy trinity; also ignored in Webkit's default error handler */
@@ -1262,10 +1269,18 @@
         return FALSE;
     }
 
-    title = g_strdup_printf (_("Error - %s"), uri);
-    message = g_strdup_printf (_("The page '%s' couldn't be loaded."), uri);
-    result = midori_view_display_error (view, uri, title,
-        message, error->message, _("Try again"), web_frame);
+    title = g_strdup_printf (_("'%s' can't be found"), midori_uri_parse_hostname(uri, NULL));
+    message = g_strdup_printf (_("The page '%s' couldn't be loaded:"), midori_uri_parse_hostname(uri, NULL));
+
+    suggestions = g_string_new ("<ul id=\"suggestions\"><li>");
+    g_string_append_printf (suggestions, "%s</li><li>%s</li><li>%s</li></ul>",
+        _("Check the address for typos"),
+        _("Make sure that an ethernet cable is plugged in or the wireless card is activated"),
+        _("Verify that your network settings are correct"));
+
+    result = midori_view_display_error (view, uri, "stock://network-error", title,
+                                        message, error->message, g_string_free (suggestions, FALSE),
+                                        _("Try Again"), web_frame);
     g_free (message);
     g_free (title);
     return result;
@@ -1397,8 +1412,8 @@
     const gchar* uri = webkit_web_view_get_uri (web_view);
     gchar* title = g_strdup_printf (_("Oops - %s"), uri);
     gchar* message = g_strdup_printf (_("Something went wrong with '%s'."), uri);
-    midori_view_display_error (view, uri, title,
-        message, "", _("Try again"), NULL);
+    midori_view_display_error (view, uri, NULL, title,
+        message, "", NULL, _("Try again"), NULL);
     g_free (message);
     g_free (title);
 }
@@ -4093,15 +4108,16 @@
             else if (!strcmp (uri, "about:private"))
             {
                 data = g_strdup_printf (
-                    "<html><head><title>%s</title>"
+                    "<html dir=\"ltr\"><head><title>%s</title>"
                     "<link rel=\"stylesheet\" type=\"text/css\" href=\"res://about.css\">"
-                    "</head><body><div id=\"container\">"
-                    "<img id=\"logo\" src=\"res://logo-shade.png\" "
-                    "style=\"position: absolute; right: 15px; bottom: 15px; z-index: -9;\">"
-                    "<img id=\"icon\" src=\"stock://gtk-dialog-info\">"
-                    "<div id=\"main\"><h1>%s</h1>"
-                    "<p>%s</p><ul><li>%s</li><li>%s</li><li>%s</li></ul>"
-                    "<p>%s</p><ul><li>%s</li><li>%s</li><li>%s</li><li>%s</li></ul>"
+                    "</head>"
+                    "<body>"
+                    "<img id=\"logo\" src=\"res://logo-shade.png\" />"
+                        "<div id=\"main\" style=\"background-image: url(stock://gtk-dialog-info);\">"
+                            "<div id=\"text\">"
+                                "<h1>%s</h1>"
+                                "<p class=\"message\">%s</p><ul class=\" suggestions\"><li>%s</li><li>%s</li><li>%s</li></ul>"
+                                "<p class=\"message\">%s</p><ul class=\" suggestions\"><li>%s</li><li>%s</li><li>%s</li><li>%s</li></ul>"
                     "</div><br style=\"clear: both\"></div></body></html>",
                     _("Private Browsing"), _("Private Browsing"),
                     _("Midori doesn't store any personal data:"),
@@ -4204,8 +4220,10 @@
             midori_tab_set_uri (MIDORI_TAB (view), uri);
             midori_tab_set_special (MIDORI_TAB (view), TRUE);
             katze_item_set_meta_integer (view->item, "delay", MIDORI_DELAY_PENDING_UNDELAY);
-            midori_view_display_error (view, NULL, NULL, _("Page loading delayed"),
+            midori_view_display_error (view, NULL, "stock://network-idle", NULL,
+                _("Page loading delayed:"),
                 _("Loading delayed either due to a recent crash or startup preferences."),
+                NULL,
                 _("Load Page"),
                 NULL);
         }