GNOME.org
 

[epiphany] Add responsive layout for error pages

commit 20a95426bc1ee7e9acf33074278365ca5aa059b7
Author: Jan-Michael Brummer <jan brummer tabos org>
Date:   Wed Nov 13 12:36:00 2019 +0100

    Add responsive layout for error pages

 embed/ephy-web-view.c                       |  12 ++--
 src/resources/channel-insecure-symbolic.png | Bin 3283 -> 0 bytes
 src/resources/channel-insecure-symbolic.svg |   6 ++
 src/resources/computer-fail-symbolic.png    | Bin 756 -> 0 bytes
 src/resources/computer-fail-symbolic.svg    |   5 ++
 src/resources/epiphany.gresource.xml        |   8 +--
 src/resources/error.css                     | 105 ++++++++++++++++------------
 src/resources/error.html                    |  51 +++++++-------
 src/resources/network-error-symbolic.png    | Bin 1030 -> 0 bytes
 src/resources/network-error-symbolic.svg    |   4 ++
 src/resources/security-high-symbolic.png    | Bin 703 -> 0 bytes
 src/resources/security-high-symbolic.svg    |   6 ++
 12 files changed, 115 insertions(+), 82 deletions(-)
---
diff --git a/embed/ephy-web-view.c b/embed/ephy-web-view.c
index 716c7a687..1c5676183 100644
--- a/embed/ephy-web-view.c
+++ b/embed/ephy-web-view.c
@@ -2266,7 +2266,7 @@ format_network_error_page (const char  *uri,
   /* Mnemonic for the Reload button on browser error pages. */
   *button_accesskey = C_("reload-access-key", "R");
 
-  *icon_name = "network-error-symbolic.png";
+  *icon_name = "network-error-symbolic.svg";
   *style = "default";
 
   g_free (formatted_origin);
@@ -2319,7 +2319,7 @@ format_crash_error_page (const char  *uri,
   /* Mnemonic for the Reload button on browser error pages. */
   *button_accesskey = C_("reload-access-key", "R");
 
-  *icon_name = "computer-fail-symbolic.png";
+  *icon_name = "computer-fail-symbolic.svg";
   *style = "default";
 
   g_free (formatted_uri);
@@ -2362,7 +2362,7 @@ format_process_crash_error_page (const char  *uri,
   /* Mnemonic for the Reload button on browser error pages. */
   *button_accesskey = C_("reload-access-key", "R");
 
-  *icon_name = "computer-fail-symbolic.png";
+  *icon_name = "computer-fail-symbolic.svg";
   *style = "default";
 }
 
@@ -2415,7 +2415,7 @@ format_tls_error_page (EphyWebView  *view,
   /* Mnemonic for the Accept Risk and Proceed button on the invalid TLS certificate error page. */
   *hidden_button_accesskey = C_("proceed-anyway-access-key", "P");
 
-  *icon_name = "channel-insecure-symbolic.png";
+  *icon_name = "channel-insecure-symbolic.svg";
   *style = "danger";
 
   g_free (formatted_origin);
@@ -2504,7 +2504,7 @@ format_unsafe_browsing_error_page (EphyWebView  *view,
   /* Mnemonic for the Accept Risk and Proceed button on the unsafe browsing error page. */
   *hidden_button_accesskey = C_("proceed-anyway-access-key", "P");
 
-  *icon_name = "security-high-symbolic.png";
+  *icon_name = "security-high-symbolic.svg";
   *style = "danger";
 
   g_free (formatted_origin);
@@ -2548,7 +2548,7 @@ format_no_such_file_error_page (EphyWebView  *view,
   /* Mnemonic for the Go Back button on the no such file error page. */
   *button_accesskey = C_("back-access-key", "B");
 
-  *icon_name = "computer-fail-symbolic.png";
+  *icon_name = "computer-fail-symbolic.svg";
   *style = "default";
 }
 
diff --git a/src/resources/channel-insecure-symbolic.svg b/src/resources/channel-insecure-symbolic.svg
new file mode 100644
index 000000000..13f827bd5
--- /dev/null
+++ b/src/resources/channel-insecure-symbolic.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"; width="16" height="16">
+    <g color="#bebebe">
+        <path d="M5 0C3.355 0 2 1.355 2 3v3h2V3c0-.571.429-1 1-1h2c.571 0 1 .429 1 
1v.25c.267-.15.557-.25.875-.25H10c0-1.645-1.355-3-3-3zM2 9s-1 0-1 1v5h10v-2H8.875C7.865 13 7 12.135 7 
11.125V9z" style="marker:none" overflow="visible" fill="#cc0000"/>
+        <path class="warning" d="M8.875 4A.863.863 0 0 0 8 4.875v6.25c0 .492.383.875.875.875h6.25a.863.863 0 
0 0 .875-.875v-6.25A.863.863 0 0 0 15.125 4zM11 5h2v2.5s0 .5-.5.5h-1c-.5 0-.5-.5-.5-.5zm.5 4h1c.277 0 
.5.223.5.5v1c0 .277-.223.5-.5.5h-1a.499.499 0 0 1-.5-.5v-1c0-.277.223-.5.5-.5z" style="marker:none" 
overflow="visible" fill="#cc0000"/>
+    </g>
+</svg>
diff --git a/src/resources/computer-fail-symbolic.svg b/src/resources/computer-fail-symbolic.svg
new file mode 100644
index 000000000..67f242727
--- /dev/null
+++ b/src/resources/computer-fail-symbolic.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"; width="16" height="16">
+    <g fill="#474747">
+        <path d="M4 1C2.338 1 1 2.338 1 4v6c0 1.662 1.338 3 3 3h8c1.662 0 3-1.338 
3-3V4c0-1.662-1.338-3-3-3zm2 3c.558 0 1.031.473 1.031 1.031V6c0 .558-.473 1-1.031 1-.558 0-1-.442-1-1v-.969C5 
4.473 5.442 4 6 4zm4 0c.558 0 1 .473 1 1.031V6c0 .558-.442 1-1 1s-1-.442-1-1v-.969C9 4.473 9.442 4 10 4zM8 
8.031c3.256 0 5 .874 5 1.406v.5c-.997-.636-4.016-.906-5-.906s-3.805-.062-5 .906v-.5c0-.68 1.744-1.406 
5-1.406zM8 14c-5 0-5 1-5 1 0 1 1 1 1 1h8c1 0 1-1 1-1s0-1-5-1z"/>
+    </g>
+</svg>
diff --git a/src/resources/epiphany.gresource.xml b/src/resources/epiphany.gresource.xml
index 3a90c661a..5aa50460b 100644
--- a/src/resources/epiphany.gresource.xml
+++ b/src/resources/epiphany.gresource.xml
@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/org/gnome/epiphany">
-    <file>channel-insecure-symbolic.png</file>
-    <file>computer-fail-symbolic.png</file>
+    <file preprocess="xml-stripblanks" compressed="true">channel-insecure-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" compressed="true">computer-fail-symbolic.svg</file>
     <file preprocess="xml-stripblanks" compressed="true">private-mode.svg</file>
     <file preprocess="xml-stripblanks" compressed="true">web-watermark.svg</file>
     <file preprocess="xml-stripblanks" compressed="true">overview-remove-item.svg</file>
-    <file>network-error-symbolic.png</file>
-    <file>security-high-symbolic.png</file>
+    <file preprocess="xml-stripblanks" compressed="true">network-error-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" compressed="true">security-high-symbolic.svg</file>
     <file compressed="true">about.ini</file>
     <file alias="page-templates/about.css" compressed="true">about.css</file>
     <file alias="page-templates/error.css" compressed="true">error.css</file>
diff --git a/src/resources/error.css b/src/resources/error.css
index ee0647b7a..e64cd859b 100644
--- a/src/resources/error.css
+++ b/src/resources/error.css
@@ -1,55 +1,75 @@
 /* Global CSS for error pages */
 
 html {
-    font-family: -webkit-system-font, Cantarell, sans-serif;
-    font-size: 12pt;
-    padding: 40px 20px 0 20px;
-}
-
-#container {
-    padding: 2em;
-    margin: 2em auto;
-    background-color: #fff;
-    max-width: 500px;
+    /* Adwaita colors */
+    --bg-color: #f6f5f4;
+    --fg-color: #2e3436;
+    --base-color: #fff;
+    --text-color: #000;
+    --borders: #d3d7cf;
+
+    /* Misc colors */
+    --header-color: #999;
+    --header-text-color: white;
+    --row-hover-color: rgba(0, 0, 0, .1);
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        /* Adwaita colors */
+        --bg-color: #353535;
+        --fg-color: #eeeeec;
+        --base-color: #2d2d2d;
+        --text-color: #fff;
+        --borders: #1b1b1b;
+
+        /* Misc colors */
+        --header-color: #666;
+        --row-hover-color: rgba(255, 255, 255, .1);
+    }
 }
 
-#leftpanel {
-    vertical-align: top;
-    display: inline-block;
-    margin-right: 5px;
-    width: 10%;
+html {
+    font-family: -webkit-system-font, Cantarell, sans-serif;
+    color: var(--fg-color);
+    background-color: var(--bg-color);
+    height: 100%;
 }
 
-#rightpanel {
-    vertical-align: top;
-    display: inline-block;
-    margin-left: 5px;
-    width: 80%;
+.error-body {
+    box-sizing:border-box;
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    max-width:40em;
+    margin: auto;
+    padding-left: 12px;
+    padding-right: 12px;
+    line-height: 1.5;
+    height: 100%;
 }
 
-#rightpanel .hidden {
+.error-body .hidden {
     display: none;
 }
 
-#rightpanel .visible {
+.error-body .visible {
     display: block;
 }
 
-#rightpanel .clickable {
+.error-body .clickable {
     cursor: pointer;
     color: #888a85;
 }
 
-#rightpanel .clickable:hover,
-#rightpanel .clickable:focus {
+.error-body .clickable:hover,
+.error-body .clickable:focus {
     color: #a6ad9c;
 }
 
 #msg-title {
-    font-size: 16pt;
-    font-weight: bold;
-    margin-top: 0;
-    margin-bottom: 10px;
+    opacity: 0.55; /* Adwaita's dim-label */
+    text-align:center;
 }
 
 #msg-title.default {
@@ -60,11 +80,6 @@ html {
     color: #cc0000;
 }
 
-#msg-body {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
 #msg-details {
     margin-top: 10px;
     margin-bottom: 10px;
@@ -84,7 +99,7 @@ html {
 .btn {
     min-width: 200px;
     height: 32px;
-    margin-top: 10px;
+    margin-top: 15px;
     margin-bottom: 0;
     line-height: 1.42857143;
     text-align: center;
@@ -110,31 +125,31 @@ html {
 }
 
 .suggested-action {
-    color: #fff;
-    border-color: #1c5187;
-    background-image: linear-gradient(to bottom, #86add6, #538ac5 60%, #2a76c6);
+    color: white;
+    border-color: #1b6acb;
+    background-image: linear-gradient(to top, #2379e2 2px, #3584e4);
 }
 
 .suggested-action:hover,
 .suggested-action:focus,
 .suggested-action:active,
 .suggested-action.active {
-    color: #fff;
-    background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5);
+    color: white;
+    background-image: linear-gradient(to top, #3584e4, #3987e5 1px);
 }
 
 .destructive-action {
-    color: #fff;
-    border-color: #8e0b0b;
-    background-image: linear-gradient(to bottom, #ef2929, #ee1616 60%, #d51010);
+    color: white;
+    border-color: #b2161d;
+    background-image: linear-gradient(to top, #ce1921 2px, #e01b24);
 }
 
 .destructive-action:hover,
 .destructive-action:focus,
 .destructive-action:active,
 .destructive-action.active {
-    color: #fff;
-    background-image: linear-gradient(to bottom, #f14545, #ef2929 60%, #ee1616);
+    color: white;
+    background-image: linear-gradient(to top, #e01b24, #e41c26 1px);
 }
 
 details > summary::-webkit-details-marker {
diff --git a/src/resources/error.html b/src/resources/error.html
index e98a626a9..58e6c06aa 100644
--- a/src/resources/error.html
+++ b/src/resources/error.html
@@ -37,33 +37,30 @@
     }
   </script>
 </head>
-<body>
-  <div id="container">
-    <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">
-        <details>
-          <summary class="clickable">%s</summary>
-          %s
-          <button class="btn destructive-action %s" accesskey="%s" onclick="javascript:hiddenButtonAction()">
-            <strong>%s</strong>
-          </button>
-        </details>
-      </div>
-      <div id="footer">
-        <button class="btn suggested-action visible" accesskey="%s" onclick="javascript:buttonAction()">
-          <strong>%s</strong>
-        </button>
-      </div>
-    </div>
+<body class="error-body">
+  <span style="margin-left: auto;
+               margin-right: auto;
+               display: block;
+               width: 128px;
+               height: 128px;
+               background: url(ephy-resource:///org/gnome/epiphany/%s) center no-repeat;
+               background-size: cover;"></span>
+  <br>
+  <h1 id="msg-title" class="%s">%s</h1>
+  %s
+  <div id="msg-details" class="%s">
+    <details>
+      <summary class="clickable">%s</summary>
+      %s
+      <button class="btn destructive-action %s" accesskey="%s" onclick="javascript:hiddenButtonAction()">
+        <strong>%s</strong>
+      </button>
+    </details>
+  </div>
+  <div>
+    <button class="btn suggested-action visible" accesskey="%s" onclick="javascript:buttonAction()">
+      <strong>%s</strong>
+    </button>
   </div>
 </body>
 </html>
diff --git a/src/resources/network-error-symbolic.svg b/src/resources/network-error-symbolic.svg
new file mode 100644
index 000000000..9becfb4d3
--- /dev/null
+++ b/src/resources/network-error-symbolic.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"; width="16" height="16">
+    <path d="M10 1v1c0 .257.13.529.313.719L11.593 4H7c-.528-.007-1 .472-1 1s.472 1.007 1 1h4.625l-1.219 
1.281c-.182.19-.406.462-.406.719v.426c.62-.377 1.909-.507 2.48-.395L15.406 5 11.75 1.281C11.552 1.091 11.31 1 
11 1zM5 7c-.31 0-.615.09-.812.281L.594 11l3.656 
3.719c.198.19.44.281.75.281h1v-1c0-.257-.13-.529-.312-.719L4.406 12h3.625c.022-.277.113-1 
.723-2H4.375l1.219-1.281C5.776 8.529 6 8.257 6 8V7z" 
style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none"
 color="#000" font-weight="400" font-family="Sans" overflow="visible" opacity=".35" fill="#474747"/>
+    <path class="error" d="M12.5 9a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM10 11.969h5V13h-5z" 
style="marker:none" color="#bebebe" overflow="visible" fill="#ef2929"/>
+</svg>
diff --git a/src/resources/security-high-symbolic.svg b/src/resources/security-high-symbolic.svg
new file mode 100644
index 000000000..889d48d96
--- /dev/null
+++ b/src/resources/security-high-symbolic.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"; width="16" height="16">
+    <g color="#bebebe" fill="#cc0000">
+        <path d="M2 1v7c0 2.072 1.498 3.695 2.832 4.889a18.66 18.66 0 0 0 2.66 
1.972l.516.305.512-.31s1.32-.8 2.65-2.002C12.5 11.65 14 10.044 14 8V1zm2 2h8v5c0 .92-1 2.313-2.17 
3.37-.913.825-1.477 1.154-1.836 1.386-.358-.226-.918-.543-1.828-1.358C5 10.355 4 8.98 4 8z" 
style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none"
 font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible"/>
+        <path d="M5 4v4c0 .357.755 1.641 1.844 2.625.575.52.736.58 1.156.875.42-.294.581-.355 
1.156-.875C10.246 9.641 11 8.357 11 8V4z" style="marker:none" overflow="visible"/>
+    </g>
+</svg>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]