[epiphany] New design for error pages
- From: Michael Catanzaro <mcatanzaro src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [epiphany] New design for error pages
- Date: Tue, 29 Mar 2016 18:23:32 +0000 (UTC)
commit 23cbcbb55aa99be27f0c68c7d27bac3b1661649c
Author: Gabriel Ivascu <ivascu gabriel59 gmail com>
Date: Tue Mar 15 22:39:30 2016 +0200
New design for error pages
Implement a new design for error pages following the web interstitial mockup.
https://bugzilla.gnome.org/show_bug.cgi?id=744063
data/pages/error.css | 147 ++++++++++++++----
embed/ephy-web-view.c | 219 ++++++++++++++-------------
src/Makefile.am | 2 +
src/epiphany.gresource.xml | 2 +
src/resources/channel-insecure-symbolic.png | Bin 0 -> 3283 bytes
src/resources/computer-fail-symbolic.png | Bin 0 -> 756 bytes
src/resources/error.html | 57 ++++++--
7 files changed, 278 insertions(+), 149 deletions(-)
---
diff --git a/data/pages/error.css b/data/pages/error.css
index f6b2959..4353f35 100644
--- a/data/pages/error.css
+++ b/data/pages/error.css
@@ -1,49 +1,138 @@
/* Global CSS for error pages */
-h1 {
- color: #babdb6;
- text-shadow: 0 1px 0 white;
- margin-bottom: 0;
-}
-
html {
- font-family: Cantarell, sans-serif;
- font: 11pt cantarell;
- color: #2e3436;
- padding: 20px 20px 0 20px;
- background-color: #f6f6f4;
- background-image: -webkit-gradient(
- linear,
- left top,
- left bottom,
- color-stop(0, #eeeeec),
- color-stop(1, #f6f6f4)
- );
- background-size: 100% 5em;
- background-repeat: no-repeat;
+ font-family: Cantarell, sans-serif;
+ font: 12pt cantarell;
+ padding: 40px 20px 0 20px;
}
#container {
padding: 2em;
margin: 2em auto;
background-color: #fff;
- border-radius: 1em;
- border: 2px solid #d3d7cf;
- max-width: 650px;
+ max-width: 500px;
+}
+
+#leftpanel {
+ vertical-align: top;
+ display: inline-block;
+ margin-right: 5px;
+ width: 10%;
}
-#content {
+#rightpanel {
vertical-align: top;
+ display: inline-block;
+ margin-left: 5px;
+ width: 80%;
+}
+
+#rightpanel .hidden {
+ display: none;
+}
+
+#rightpanel .visible {
+ display: block;
}
-#content h1 {
+#rightpanel .clickable {
+ cursor: pointer;
+ color: #888a85;
+}
+
+#rightpanel .clickable:hover,
+#rightpanel .clickable:focus {
+ color: #a6ad9c;
+}
+
+#msg-title {
+ font-size: 16pt;
+ font-weight: bold;
margin-top: 0;
+ margin-bottom: 10px;
+}
+
+#msg-title.default {
+ color: #2e3436;
+}
+
+#msg-title.danger {
+ color: #cc0000;
+}
+
+#msg-body {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+#msg-details {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+#msg-details div {
+ font-size: 11pt;
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+#footer {
+ margin-top: 35px;
+ margin-bottom: 0;
+}
+
+.btn {
+ width: 200px;
+ height: 32px;
+ margin-top: 10px;
+ margin-bottom: 0;
+ line-height: 1.42857143;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ cursor: pointer;
+ border: 1px solid transparent;
+ border-radius: 4px;
+}
+
+.btn:focus,
+.btn:active:focus,
+.btn.active:focus {
+ outline: thin dotted;
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
+}
+
+.btn:hover,
+.btn:focus {
+ color: #333;
+ text-decoration: none;
+}
+
+.suggested-action {
+ color: #fff;
+ border-color: #1c5187;
+ background-image: linear-gradient(to bottom, #86add6, #538ac5 60%, #2a76c6);
+}
+
+.suggested-action:hover,
+.suggested-action:focus,
+.suggested-action:active,
+.suggested-action.active {
+ color: #fff;
+ background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5);
}
-#content .buttonbox {
- text-align: right;
+.destructive-action {
+ color: #fff;
+ border-color: #8e0b0b;
+ background-image: linear-gradient(to bottom, #ef2929, #ee1616 60%, #d51010);
}
-html[dir="rtl"] #content .buttonbox {
- text-align: left;
+.destructive-action:hover,
+.destructive-action:focus,
+.destructive-action:active,
+.destructive-action.active {
+ color: #fff;
+ background-image: linear-gradient(to bottom, #f14545, #ef2929 60%, #ee1616);
}
diff --git a/embed/ephy-web-view.c b/embed/ephy-web-view.c
index 4f3e386..71a68ae 100644
--- a/embed/ephy-web-view.c
+++ b/embed/ephy-web-view.c
@@ -1654,41 +1654,6 @@ detailed_message_from_tls_errors (GTlsCertificateFlags tls_errors)
return retval;
}
-static char *
-get_tls_error_page_message (EphyWebView *view, const char *hostname)
-{
- char *msg;
- char *bold_hostname;
- char *details;
- char *warning;
-
- bold_hostname = g_strconcat ("<strong>", hostname, "</strong>", NULL);
- details = detailed_message_from_tls_errors (view->tls_errors);
- /* Message when a site's TLS certificate is invalid. %s is the site's hostname. */
- warning = g_strdup_printf (_("This might not be the real %s."), bold_hostname);
-
- msg = g_strdup_printf ("<p>%s</p><p>%s</p><p>%s</p><p>%s <strong>%s</strong></p>",
- warning,
- /* Message when a site's TLS certificate is invalid. */
- _("When you try to connect securely, websites present "
- "identification to prove that your connection has not been "
- "maliciously intercepted. There is something wrong with "
- "this website’s identification:"),
- details,
- /* Message when a site's TLS certificate is invalid. */
- _("A third party may have hijacked your connection. You should "
- "continue only if you know there is a good reason why this "
- "website does not use trusted identification."),
- /* Good advice from Firefox; displays when a site's TLS certificate is invalid. */
- _("Legitimate banks, stores, and other public sites will "
- "not ask you to do this."));
- g_free (bold_hostname);
- g_free (details);
- g_free (warning);
-
- return msg;
-}
-
/**
* ephy_web_view_get_error_page:
* @view: an #EphyWebView
@@ -1721,19 +1686,22 @@ ephy_web_view_load_error_page (EphyWebView *view,
EphyWebViewErrorPage page,
GError *error)
{
- GString *html = g_string_new ("");
- const char *reason;
- char *hostname;
- char *lang;
- char *page_title;
- char *msg_title;
- char *msg;
- char *button_label;
- char *stylesheet;
- char *load_anyway_js = NULL;
- const char *custom_class;
- const char *accesskey;
GBytes *html_file;
+ GString *html = g_string_new ("");
+ char *hostname = NULL;
+ char *lang = NULL;
+ char *page_title = NULL;
+ char *msg_title = NULL;
+ char *msg_body = NULL;
+ char *msg_details = NULL;
+ char *button_label = NULL;
+ char *hidden_button_label = NULL;
+ char *button_action = NULL;
+ char *hidden_button_action = NULL;
+ const char *button_accesskey = NULL;
+ const char *hidden_button_accesskey = NULL;
+ const char *icon_name = NULL;
+ const char *reason = NULL;
g_return_if_fail (page != EPHY_WEB_VIEW_ERROR_PAGE_NONE);
@@ -1745,10 +1713,7 @@ ephy_web_view_load_error_page (EphyWebView *view,
else
ephy_web_view_set_security_level (view, EPHY_SECURITY_LEVEL_LOCAL_PAGE);
- if (error)
- reason = error->message;
- else
- reason = _("None specified");
+ reason = error ? error->message : _("None specified");
hostname = ephy_string_get_host_name (uri);
if (hostname == NULL)
@@ -1761,72 +1726,104 @@ ephy_web_view_load_error_page (EphyWebView *view,
switch (page) {
case EPHY_WEB_VIEW_ERROR_PAGE_NETWORK_ERROR:
- page_title = g_strdup_printf (_("Problem loading “%s”"), hostname);
-
- msg_title = g_strdup (_("Oops! Unable to display this website."));
- msg = g_strdup_printf (_("<p>The site at “%s” seems "
- "to be unavailable. The precise error was:</p>"
- "<p><code>%s</code></p>"
- "<p>It may be "
- "temporarily unavailable or moved to a new "
- "address. You may wish to verify that your "
- "internet connection is working correctly.</p>"),
- uri, reason);
+ /* Page title when a site cannot be loaded due to a network error. */
+ page_title = g_strdup_printf (_("Problem Loading Page"));
+
+ /* Message title when a site cannot be loaded due to a network error. */
+ msg_title = g_strdup (_("Oops! Unable to display this website"));
+
+ /* Message body when a site cannot be loaded due to a network error. */
+ msg_body = g_strdup_printf (_("<p>The site at <strong>%s</strong> seems "
+ "to be unavailable.</p>"
+ "<p>It may be temporarily inaccessible or "
+ "moved to a new address. You may wish to "
+ "verify that your internet connection is "
+ "working correctly.</p>"),
+ uri);
+
+ /* Message details when a site cannot be loaded due to a network error. */
+ msg_details = g_strdup_printf (_("<p>The precise error was: <i>%s</i></p>"),
+ reason);
+
+ /* The button on the network error page. */
button_label = g_strdup (_("Reload"));
- custom_class = "network-error";
- /* Access key for the "Reload" button on the network error page. */
- accesskey = C_("reload-access-key", "R");
+ button_action = g_strdup_printf ("window.location = '%s';", uri);
+ button_accesskey = C_("reload-access-key", "R");
break;
case EPHY_WEB_VIEW_ERROR_PAGE_CRASH:
- page_title = g_strdup_printf (_("Problem loading “%s”"), hostname);
-
- msg_title = g_strdup (_("Oops! There may be a problem."));
- msg = g_strdup_printf (_("<p>This site may have caused Web to close unexpectedly.</p>"
- "<p>If this happens again, "
- "please report the problem to the "
- "<strong>%s</strong> developers.</p>"),
- LSB_DISTRIBUTOR);
+ /* Page title when a site cannot be loaded due to a page crash error. */
+ page_title = g_strdup_printf (_("Problem Loading Page"));
+
+ /* Message title when a site cannot be loaded due to a page crash error. */
+ msg_title = g_strdup (_("Oops! There may be a problem"));
+
+ /* Message body when a site cannot be loaded due to a page crash error. */
+ msg_body = g_strdup_printf (_("<p>The site at <strong>%s</strong> may "
+ "have caused Web to close unexpectedly.</p>"
+ "<p>If this happens again, please report "
+ "the problem to the <strong>%s</strong> "
+ " developers.</p>"),
+ uri,
+ LSB_DISTRIBUTOR);
+
+ /* The button on the page crash error page. */
button_label = g_strdup (_("Reload"));
- custom_class = "page-crash";
- /* Access key for the "Reload" button on the crash error page. */
- accesskey = C_("reload-access-key", "R");
+ button_action = g_strdup_printf ("window.location = '%s';", uri);
+ button_accesskey = C_("reload-access-key", "R");
break;
case EPHY_WEB_VIEW_ERROR_PROCESS_CRASH:
- page_title = g_strdup_printf (_("Problem displaying “%s”"), hostname);
+ /* Page title when a site cannot be loaded due to a process crash error. */
+ page_title = g_strdup_printf (_("Problem Displaying Page"));
+
+ /* Message title when a site cannot be loaded due to a process crash error. */
msg_title = g_strdup (_("Oops!"));
- msg = g_strdup (_("Something went wrong while displaying this page. Please reload or visit a different
page to continue."));
+
+ /* Message body when a site cannot be loaded due to a process crash error. */
+ msg_body = g_strdup (_("<p>Something went wrong while displaying this page.</p>"
+ "<p>Please reload or visit a different page to continue.</p>"));
+
+ /* The button on the process crash error page. */
button_label = g_strdup (_("Reload"));
- custom_class = "process-crash";
- /* Access key for the "Reload" button on the crash error page. */
- accesskey = C_("reload-access-key", "R");
+ button_action = g_strdup_printf ("window.location = '%s';", uri);
+ button_accesskey = C_("reload-access-key", "R");
break;
case EPHY_WEB_VIEW_ERROR_INVALID_TLS_CERTIFICATE:
- /* Page title when a site cannot be loaded. %s is the site's hostname. */
- page_title = g_strdup_printf (_("Problem loading “%s”"), hostname);
- /* Title of error page when a website's TLS certificate is invalid. */
- msg_title = g_strdup (_("Look out!"));
- msg = get_tls_error_page_message (view, hostname);
- /* Button on error page when a website's TLS certificate is invalid. */
- button_label = g_strdup (_("Accept Risk"));
- custom_class = "tls-error";
- /* Access key for the "Accept Risk" button on the TLS error page. */
- accesskey = C_("accept-risk-access-key", "R");
- load_anyway_js = g_strdup_printf
("window.webkit.messageHandlers.tlsErrorPage.postMessage(%"G_GUINT64_FORMAT ");",
- webkit_web_view_get_page_id (WEBKIT_WEB_VIEW (view)));
+ /* Page title when a site is not loaded due to an invalid TLS certificate. */
+ page_title = g_strdup_printf (_("Security Violation"));
+
+ /* Message title when a site is not loaded due to an invalid TLS certificate. */
+ msg_title = g_strdup (_("This Connection is Not Secure"));
+
+ /* Message body when a site is not loaded due to an invalid TLS certificate. */
+ msg_body = g_strdup_printf (_("<p>This does not look like the real <strong>"
+ "%s</strong>. Attackers might be trying to "
+ "steal or alter information going to or from "
+ "this site (for example, private messages, "
+ "credit card information, or passwords)."),
+ hostname);
+ /* Message details when a site is not loaded due to an invalid TLS certificate. */
+ msg_details = detailed_message_from_tls_errors (view->tls_errors);
+
+ /* The button on the invalid TLS certificate error page. */
+ button_label = g_strdup (_("Go Back"));
+ button_action = g_strdup ("window.history.back();");
+ button_accesskey = C_("back-access-key", "B");
+
+ /* The hidden button on the invalid TLS certificate error page. */
+ hidden_button_label = g_strdup (_("Accept Risk and Proceed"));
+ hidden_button_action = g_strdup_printf
("window.webkit.messageHandlers.tlsErrorPage.postMessage(%"G_GUINT64_FORMAT ");",
+ webkit_web_view_get_page_id (WEBKIT_WEB_VIEW (view)));
+ hidden_button_accesskey = C_("proceed-anyway-access-key", "P");
+
+ icon_name = "channel-insecure-symbolic.png";
break;
case EPHY_WEB_VIEW_ERROR_PAGE_NONE:
default:
g_assert_not_reached ();
}
- g_free (hostname);
_ephy_web_view_update_icon (view);
- stylesheet = get_style_sheet ();
-
- if (load_anyway_js == NULL)
- load_anyway_js = g_strdup_printf ("window.location = '%s';", uri);
-
#pragma GCC diagnostic push
#pragma GCC diagnostic ignored "-Wformat-nonliteral"
/* The HTML file is trusted input. */
@@ -1835,21 +1832,29 @@ ephy_web_view_load_error_page (EphyWebView *view,
lang, lang,
((gtk_widget_get_default_direction () == GTK_TEXT_DIR_RTL) ? "rtl" : "ltr"),
page_title,
- stylesheet,
- load_anyway_js,
- custom_class,
- msg_title, msg,
- accesskey, button_label);
+ get_style_sheet (),
+ button_action, hidden_button_action,
+ icon_name ? icon_name : "computer-fail-symbolic.png",
+ page == EPHY_WEB_VIEW_ERROR_INVALID_TLS_CERTIFICATE ? "danger" : "default",
+ msg_title, msg_body,
+ msg_details ? "visible" : "hidden",
+ msg_details,
+ hidden_button_label ? "visible" : "hidden",
+ hidden_button_accesskey, hidden_button_label,
+ button_accesskey, button_label);
#pragma GCC diagnostic pop
g_bytes_unref (html_file);
- g_free (stylesheet);
+ g_free (hostname);
g_free (lang);
g_free (page_title);
- g_free (load_anyway_js);
g_free (msg_title);
- g_free (msg);
+ g_free (msg_body);
+ g_free (msg_details);
g_free (button_label);
+ g_free (button_action);
+ g_free (hidden_button_label);
+ g_free (hidden_button_action);
/* Make our history backend ignore the next page load, since it will be an error page. */
ephy_web_view_freeze_history (view);
diff --git a/src/Makefile.am b/src/Makefile.am
index 21f6749..8136f13 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -119,6 +119,8 @@ RESOURCE_FILES = \
resources/history-dialog.ui \
resources/incognito.png \
resources/missing-thumbnail.png \
+ resources/channel-insecure-symbolic.png \
+ resources/computer-fail-symbolic.png \
resources/passwords-dialog.ui \
resources/prefs-dialog.ui \
resources/prefs-lang-dialog.ui \
diff --git a/src/epiphany.gresource.xml b/src/epiphany.gresource.xml
index 32e7d8f..ca2086e 100644
--- a/src/epiphany.gresource.xml
+++ b/src/epiphany.gresource.xml
@@ -17,6 +17,8 @@
<file>epiphany.css</file>
<file alias="page-templates/error.html" compressed="true">error.html</file>
<file>missing-thumbnail.png</file>
+ <file>channel-insecure-symbolic.png</file>
+ <file>computer-fail-symbolic.png</file>
<file alias="page-templates/about.css" compressed="true">about.css</file>
</gresource>
</gresources>
diff --git a/src/resources/channel-insecure-symbolic.png b/src/resources/channel-insecure-symbolic.png
new file mode 100644
index 0000000..1e62de5
Binary files /dev/null and b/src/resources/channel-insecure-symbolic.png differ
diff --git a/src/resources/computer-fail-symbolic.png b/src/resources/computer-fail-symbolic.png
new file mode 100644
index 0000000..7e62be6
Binary files /dev/null and b/src/resources/computer-fail-symbolic.png differ
diff --git a/src/resources/error.html b/src/resources/error.html
index 1663323..3554bb7 100644
--- a/src/resources/error.html
+++ b/src/resources/error.html
@@ -1,6 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<!--
Copyright © 2010, 2011 Vinicius Depizzol
+ Copyright © 2016 Gabriel Ivascu
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
@@ -20,26 +21,56 @@
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>%s</title>
<style type="text/css">%s</style>
- </style>
<script type="text/javascript">
- function load_anyway()
- {
+ function buttonAction() {
%s
}
+ function hiddenButtonAction() {
+ %s
+ }
+ function toggleDetailsBox() {
+ let div = document.getElementById('reveal');
+ if (div.className == "hidden") {
+ div.className = "visible";
+ document.getElementById('pointer').innerHTML = "▼";
+ }
+ else if (div.className == "visible") {
+ div.className = "hidden";
+ document.getElementById('pointer').innerHTML = "►";
+ }
+ }
</script>
</head>
-<body class="%s">
+<body>
<div id="container">
- <div id="content">
- <h1>%s</h1>
- <div class="explanation">
- %s
- </div>
-
- <div class="buttonbox">
- <button accesskey="%s" onclick="javascript:load_anyway()">%s</button>
- </div>
+ <div id="leftpanel">
+ <img src="ephy-resource:///org/gnome/epiphany/%s"/>
+ </div>
+ <div id="rightpanel">
+ <div id="msg-title" class="%s">
+ %s
+ </div>
+ <div id="msg-body">
+ %s
+ </div>
+ <div id="msg-details" class="%s">
+ <span class="clickable" onclick="javascript:toggleDetailsBox()">
+ <span id="pointer" style="color: black;">►</span>
+ Technical information
+ </span>
+ <div id="reveal" class="hidden">
+ %s
+ <button class="btn destructive-action %s" accesskey="%s" onclick="javascript:hiddenButtonAction()">
+ <strong>%s</strong>
+ </button>
+ </div>
+ </div>
+ <div id="footer">
+ <button class="btn suggested-action visible" accesskey="%s" onclick="javascript:buttonAction()">
+ <strong>%s</strong>
+ </button>
</div>
+ </div>
</div>
</body>
</html>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
