Update network error template to new design

chrome/renderer/resources/neterror.css

Index: chrome/renderer/resources/neterror.css
diff --git a/chrome/renderer/resources/neterror.css b/chrome/renderer/resources/neterror.css
index da9ffcc8c2b7fb5de017742c87680ab5c412aadb..afe70632cf59786d4e47a3082cbe8f8667fde5d8 100644
--- a/chrome/renderer/resources/neterror.css
+++ b/chrome/renderer/resources/neterror.css
@@ -2,19 +2,6 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-body {
-  background-color: #E6E6E6;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10pt;
-  margin: 50px 40px 20px 40px;
-}
-
-#main-frame-error {
-  margin: auto;
-  max-width: 540px;
-  min-width: 200px;
-}
-
 /* Don't use the main frame div when the error is in a subframe. */
 html[subframe] #main-frame-error {
   display: none;
@@ -25,31 +12,15 @@ html:not([subframe]) #sub-frame-error {
   display: none;
 }
 
-#box {
-  background-color: #fbfbfb;
-  border: 1px solid #AAA;
-  border-bottom: 1px solid #888;
-  border-radius: 3px;
-  color: black;
-<if expr="not is_android and not is_ios">
-  /* Not done on mobile for performance reasons. */
-  box-shadow: 0px 2px 2px #AAA;
-</if>
-}
-
 #diagnose-button {
   -webkit-margin-start: 0;
+  float: none;
   margin-bottom: 10px;
   margin-top: 20px;
 }
 
-#content-top #buttons,
-#content-top h1 {
-  color: #666;
-  font-size: 1.5em;
-  font-weight: normal;
-  text-align: center;
-  margin: 10px 0 30px;
+h1 {
+  -webkit-margin-before: 0;
 }
 
 h2 {
@@ -74,14 +45,17 @@ a {
    * renderer process, so embed the resource manually.
    */
   content: -webkit-image-set(
-      url('../../app/theme/default_100_percent/common/error_network_generic.png') 1x,
-      url('../../app/theme/default_200_percent/common/error_network_generic.png') 2x);
+      url('default_100_percent/common/error_network_generic.png') 1x,
+      url('default_200_percent/common/error_network_generic.png') 2x);
+  height: 50px;
+  padding-top: 20px;
+  width: 41px;
 }
 
 .icon-offline {
   content: -webkit-image-set(
-      url('../../app/theme/default_100_percent/common/error_network_offline.png') 1x,
-      url('../../app/theme/default_200_percent/common/error_network_offline.png') 2x);
+      url('default_100_percent/offline/100-error-offline.png') 1x,
+      url('default_200_percent/offline/200-error-offline.png') 2x);
 }
 
 #content-top {
@@ -121,106 +95,6 @@ a {
   overflow-wrap: break-word;
 }
 
-button {
-  -webkit-user-select: none;
-  border: 1px solid rgba(0, 0, 0, 0.25);
-  border-radius: 2px;
-  color: #444;
-<if expr="not is_android">
-  /* iOS does not support linear-gradient without a prefix. */
-  background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
-  text-shadow: 0 1px 0 rgb(240, 240, 240);
-</if>
-<if expr="is_android">
-  /* Android uses flat background colors. */
-  background-color: #ededed;
-  font-weight: bold;
-</if>
-<if expr="not is_android and not is_ios">
-  /* Not done on mobile for performance reasons. */
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
-              inset 0 1px 2px rgba(255, 255, 255, 0.75);
-</if>
-}
-
-button:hover {
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  color: #000;
-<if expr="not is_android">
-  background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
-</if>
-<if expr="is_android">
-  background-color: #f0f0f0;
-</if>
-<if expr="not is_android and not is_ios">
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
-              inset 0 1px 2px rgba(255, 255, 255, 0.95);
-</if>
-}
-
-button:active {
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  color: #444;
-<if expr="not is_android">
-  background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
-</if>
-<if expr="is_android">
-  background-color: #e7e7e7;
-</if>
-<if expr="not is_android and not is_ios">
-  box-shadow: none;
-</if>
-}
-
-.text-button {
-  margin: 0 5px;
-  min-height: 29px;
-  min-width: 65px;
-  padding: 7px 13px;
-}
-
-.blue-button {
-  color: #fff;
-<if expr="not is_android">
-  background-image: -webkit-linear-gradient(#5d9aff, #5d9aff 38%, #5891f0);
-  border: 1px solid rgba(45, 102, 195, 1);
-  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
-</if>
-<if expr="is_android">
-  background-color: rgb(39, 180, 231);
-  border: 1px solid rgb(0, 152, 206);
-</if>
-<if expr="not is_android and not is_ios">
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
-              inset 0 1px 2px rgba(255, 255, 255, 0.2);
-</if>
-}
-
-.blue-button:hover {
-  color: #fff;
-<if expr="not is_android">
-  background-image: -webkit-linear-gradient(#659efd, #659efd 38%, #6097f1);
-  border: 1px solid rgba(45, 102, 195, 1);
-</if>
-<if expr="not is_android and not is_ios">
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25),
-              inset 0 1px 2px rgba(255, 255, 255, 0.2);
-</if>
-}
-
-.blue-button:active {
-<if expr="not is_android">
-  background-image: -webkit-linear-gradient(#6095ed, #6095ed 38%, #6095ed);
-  border: 1px solid rgb(38, 84, 160);
-</if>
-<if expr="is_android">
-  background-color: rgb(0, 152, 206);
-</if>
-<if expr="not is_android and not is_ios">
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-</if>
-}
-
 #search-container {
   /* Prevents a space between controls. */
   display: flex;
@@ -366,11 +240,6 @@ html[subframe] body {
   text-decoration: underline;
 }
 
-#buttons {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
 /* Styles for platform dependent separation of controls and details button. */
 .suggested-left > #control-buttons,
 .suggested-right > #details-button  {
@@ -392,3 +261,54 @@ html[subframe] body {
   display: block;
   width: 100%;
 }
+
+/* Offline page */
+.offline .icon {
+  height: 47px;
+  margin: 0 0 40px;
+  position: relative;
+  width: 44px;
+}
+
+.offline .interstitial-wrapper {
+  color: #2b2b2b;
+  font-size: 1em;
+  line-height: 1.55;
+  margin: 100px auto 0;
+  max-width: 600px;
+  width: 100%;
+}
+
+.offline .runner-container {
+  height: 150px;
+  max-width: 600px;
+  overflow: hidden;
+  position: absolute;
+  top: 10px;
+  width: 44px;
+  z-index: 2;
+}
+
+.offline .runner-canvas {
+  height: 150px;
+  max-width: 600px;
+  opacity: 1;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+}
+
+.offline .controller {
+  background: rgba(247,247,247, .1);
+  height: 100vh;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100vw;
+  z-index: 1;
+}
+
+#offline-resources {
+  display: none;
+}
+