Network error interstitial update - add suggestions list

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
deleted file mode 100644
index b4e8186b9e983cc9417cd01b065cc9be63ec5b95..0000000000000000000000000000000000000000
--- a/chrome/renderer/resources/neterror.css
+++ /dev/null
@@ -1,469 +0,0 @@
-/* Copyright 2013 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file. */
-
-/* Don't use the main frame div when the error is in a subframe. */
-html[subframe] #main-frame-error {
-  display: none;
-}
-
-/* Don't use the subframe error div when the error is in a main frame. */
-html:not([subframe]) #sub-frame-error {
-  display: none;
-}
-
-#diagnose-button {
-  -webkit-margin-start: 0;
-  float: none;
-  margin-bottom: 10px;
-  margin-top: 20px;
-}
-
-h1 {
-  margin-top: 0;
-  word-wrap: break-word;
-}
-
-h1 span {
-  font-weight: 500;
-}
-
-h2 {
-  color: #666;
-  font-size: 1.2em;
-  font-weight: normal;
-  margin: 10px 0;
-}
-
-a {
-  color: rgb(17, 85, 204);
-  text-decoration: none;
-}
-
-.icon {
-  -webkit-user-select: none;
-  display: inline-block;
-}
-
-.icon-generic {
-  /**
-   * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
-   * renderer process, so embed the resource manually.
-   */
-  content: -webkit-image-set(
-      url(default_100_percent/common/error_network_generic.png) 1x,
-      url(default_200_percent/common/error_network_generic.png) 2x);
-}
-
-.icon-offline {
-  content: -webkit-image-set(
-      url(default_100_percent/offline/100-error-offline.png) 1x,
-      url(default_200_percent/offline/200-error-offline.png) 2x);
-  position: relative;
-}
-
-.icon-disabled {
-  content: -webkit-image-set(
-      url(default_100_percent/offline/100-disabled.png) 1x,
-      url(default_200_percent/offline/200-disabled.png) 2x);
-  width: 112px;
-}
-
-.error-code {
-  display: block;
-  font-size: .8em;
-}
-
-#content-top {
-  margin: 20px;
-}
-
-#help-box-inner {
-  background-color: #f9f9f9;
-  border-top: 1px solid #EEE;
-  color: #444;
-  padding: 20px;
-  text-align: start;
-}
-
-.hidden {
-  display: none;
-}
-
-#suggestion {
-  margin-top: 15px;
-}
-
-#short-suggestion {
-  margin-top: 5px;
-}
-
-#sub-frame-error-details {
-  color: #8F8F8F;
-<if expr="not is_android and not is_ios">
-  /* Not done on mobile for performance reasons. */
-  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
-</if>
-}
-
-[jscontent=failedUrl] {
-  overflow-wrap: break-word;
-}
-
-#search-container {
-  /* Prevents a space between controls. */
-  display: flex;
-  margin-top: 20px;
-}
-
-#search-box {
-  border: 1px solid #cdcdcd;
-  flex-grow: 1;
-  font-size: 1em;
-  height: 26px;
-  margin-right: 0;
-  padding: 1px 9px;
-}
-
-#search-box:focus {
-  border: 1px solid rgb(93, 154, 255);
-  outline: none;
-}
-
-#search-button {
-  border: none;
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  box-shadow: none;
-  display: flex;
-  height: 30px;
-  margin: 0;
-  padding: 0;
-  width: 60px;
-}
-
-#search-image {
-  content:
-      -webkit-image-set(
-          url(../../app/theme/default_100_percent/common/omnibox_search_button_loupe.png) 1x,
-          url(../../app/theme/default_200_percent/common/omnibox_search_button_loupe.png) 2x);
-  margin: auto;
-}
-
-.secondary-button {
-  -webkit-margin-end: 16px;
-  background: #d9d9d9;
-  color: #696969;
-}
-
-.snackbar {
-  background: #323232;
-  border-radius: 2px;
-  bottom: 24px;
-  box-sizing: border-box;
-  color: #fff;
-  font-size: .87em;
-  left: 24px;
-  max-width: 568px;
-  min-width: 288px;
-  opacity: 0;
-  padding: 16px 24px 12px;
-  position: fixed;
-  transform: translateY(90px);
-  will-change: opacity, transform;
-  z-index: 999;
-}
-
-.snackbar-show {
-  -webkit-animation:
-    show-snackbar .25s cubic-bezier(0.0, 0.0, 0.2, 1) forwards,
-    hide-snackbar .25s cubic-bezier(0.4, 0.0, 1, 1) forwards 5s;
-}
-
-@-webkit-keyframes show-snackbar {
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@-webkit-keyframes hide-snackbar {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(90px);
-  }
-}
-
-.suggestions {
-  margin-top: 18px;
-}
-
-.suggestion-header {
-  font-weight: bold;
-  margin-bottom: 4px;
-}
-
-.suggestion-body {
-  color: #777;
-}
-
-/* Increase line height at higher resolutions. */
-@media (min-width: 641px) and (min-height: 641px) {
-  #help-box-inner {
-    line-height: 18px;
-  }
-}
-
-/* Decrease padding at low sizes. */
-@media (max-width: 640px), (max-height: 640px) {
-  h1 {
-    margin: 0 0 15px;
-  }
-  #content-top {
-    margin: 15px;
-  }
-  #help-box-inner {
-    padding: 20px;
-  }
-  .suggestions {
-    margin-top: 10px;
-  }
-  .suggestion-header {
-    margin-bottom: 0;
-  }
-}
-
-/* Don't allow overflow when in a subframe. */
-html[subframe] body {
-  overflow: hidden;
-}
-
-#sub-frame-error {
-  -webkit-align-items: center;
-  background-color: #DDD;
-  display: -webkit-flex;
-  -webkit-flex-flow: column;
-  height: 100%;
-  -webkit-justify-content: center;
-  left: 0;
-  position: absolute;
-  top: 0;
-  transition: background-color .2s ease-in-out;
-  width: 100%;
-}
-
-#sub-frame-error:hover {
-  background-color: #EEE;
-}
-
-#sub-frame-error .icon-generic {
-  margin: 0 0 16px;
-}
-
-#sub-frame-error-details {
-  margin: 0 10px;
-  text-align: center;
-  visibility: hidden;
-}
-
-/* Show details only when hovering. */
-#sub-frame-error:hover #sub-frame-error-details {
-  visibility: visible;
-}
-
-/* If the iframe is too small, always hide the error code. */
-/* TODO(mmenke): See if overflow: no-display works better, once supported. */
-@media (max-width: 200px), (max-height: 95px) {
-  #sub-frame-error-details {
-    display: none;
-  }
-}
-
-/* Adjust icon for small embedded frames in apps. */
-@media (max-height: 100px) {
-  #sub-frame-error .icon-generic {
-    height: auto;
-    margin: 0;
-    padding-top: 0;
-    width: 25px;
-  }
-}
-
-/* details-button is special; it's a <button> element that looks like a link. */
-#details-button {
-  box-shadow: none;
-  min-width: 0;
-}
-
-/* Styles for platform dependent separation of controls and details button. */
-.suggested-left > #control-buttons,
-.suggested-left #stale-load-button,
-.suggested-right > #details-button {
-  float: left;
-}
-
-.suggested-right > #control-buttons,
-.suggested-right #stale-load-button,
-.suggested-left > #details-button {
-  float: right;
-}
-
-.suggested-left .secondary-button {
-  -webkit-margin-end: 0px;
-  -webkit-margin-start: 16px;
-}
-
-#details-button.singular {
-  float: none;
-}
-
-#buttons::after {
-  clear: both;
-  content: '';
-  display: block;
-  width: 100%;
-}
-
-/* Offline page */
-.offline {
-  transition: -webkit-filter 1.5s cubic-bezier(0.65, 0.05, 0.36, 1),
-              background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
-  will-change: -webkit-filter, background-color;
-}
-
-.offline.inverted {
-  -webkit-filter: invert(100%);
-  background-color: #000;
-}
-
-.offline .interstitial-wrapper {
-  color: #2b2b2b;
-  font-size: 1em;
-  line-height: 1.55;
-  margin: 0 auto;
-  max-width: 600px;
-  padding-top: 100px;
-  width: 100%;
-}
-
-.offline .runner-container {
-  height: 150px;
-  max-width: 600px;
-  overflow: hidden;
-  position: absolute;
-  top: 35px;
-  width: 44px;
-}
-
-.offline .runner-canvas {
-  height: 150px;
-  max-width: 600px;
-  opacity: 1;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  z-index: 2;
-}
-
-.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;
-}
-
-@media (max-width: 420px) {
-  .suggested-left > #control-buttons,
-  .suggested-right > #control-buttons {
-    float: none;
-  }
-
-  .snackbar {
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    border-radius: 0;
-  }
-}
-
-@media (max-height: 350px) {
-  h1 {
-    margin: 0 0 15px;
-  }
-
-  .icon-offline {
-    margin: 0 0 10px;
-  }
-
-  .interstitial-wrapper {
-    margin-top: 5%;
-  }
-
-  .nav-wrapper {
-    margin-top: 30px;
-  }
-}
-
-@media (min-width: 600px) and (max-width: 736px) and (orientation: landscape) {
-  .offline .interstitial-wrapper {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-@media (min-width: 420px) and (max-width: 736px) and
-       (min-height: 240px) and (max-height: 420px) and
-       (orientation:landscape) {
-  .interstitial-wrapper {
-    margin-bottom: 100px;
-  }
-}
-
-@media (min-height: 240px) and (orientation: landscape) {
-  .offline .interstitial-wrapper {
-    margin-bottom: 90px;
-  }
-
-  .icon-offline {
-    margin-bottom: 20px;
-  }
-}
-
-@media (max-height: 320px) and (orientation: landscape) {
-  .icon-offline {
-    margin-bottom: 0;
-  }
-
-  .offline .runner-container {
-    top: 10px;
-  }
-}
-
-@media (max-width: 240px) {
-  button {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-
-  .interstitial-wrapper {
-    overflow: inherit;
-    padding: 0 8px;
-  }
-}
-
-@media (max-width: 120px) {
-  button {
-    width: auto;
-  }
-}