Remove neterror styles that were part of outdated design and experiments

+ remove selectors not present in template and in js code
+ remove search_glass.png as it isn't referenced anymore
+ remove .error_code overrides in favor of defined in interstitial_common.css
+ remove unused search function leftover in js

Bug: 1221315
Change-Id: Id3c7316625fb48c9237de0bb77419e75bcccc62c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2977691
Reviewed-by: Matt Menke <mmenke@chromium.org>
Reviewed-by: Edward Jung (EMEA) <edwardjung@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Matt Menke <mmenke@chromium.org>
Cr-Commit-Position: refs/heads/master@{#896057}

AUTHORS

@@ -43,6 +43,7 @@ Akos Kiss <akiss@inf.u-szeged.hu>
 Aku Kotkavuo <a.kotkavuo@partner.samsung.com>
 Aldo Culquicondor <alculquicondor@gmail.com>
 Aleksandar Stojiljkovic <aleksandar.stojiljkovic@intel.com>
+Aleksei Gurianov <gurianov@gmail.com>
 Alex Chronopoulos <achronop@gmail.com>
 Alex Gabriel <minilogo@gmail.com>
 Alex Gartrell <agartrell@cmu.edu>

chrome/browser/resources/chromeos/neterror.css

@@ -1,211 +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 {
-  margin-bottom: 10px;
-  margin-inline-start: 0;
-  margin-top: 20px;
-}
-
-h1 {
-  color: #666;
-  font-size: 1.5em;
-  font-weight: normal;
-  margin: 10px 0 25px 0;
-}
-
-a {
-  color: rgb(17, 85, 204);
-  text-decoration: none;
-}
-
-.icon {
-  user-select: none;
-}
-
-.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(../../../../components/resources/default_100_percent/neterror/error_network_generic.png) 1x,
-      url(../../../../components/resources/default_200_percent/neterror/error_network_generic.png) 2x);
-}
-
-.icon-offline {
-  content: -webkit-image-set(
-      url(../../../../components/neterror/resources/images/default_100_percent/offline/100-error-offline.png) 1x,
-      url(../../../../components/neterror/resources/images/default_200_percent/offline/200-error-offline.png) 2x);
-}
-
-#help-box-outer {
-  overflow: hidden;
-  transition: height ease-in 218ms;
-}
-
-#help-box-inner {
-  background-color: #f9f9f9;
-  border-top: 1px solid #EEE;
-  color: #444;
-  padding: 25px 20px;
-  text-align: start;
-}
-
-#suggestions {
-  margin-top: 15px;
-}
-
-#sub-frame-error-details {
-  color: #8F8F8F;
-  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
-}
-
-[jscontent=failedUrl] {
-  overflow-wrap: break-word;
-}
-
-.hidden {
-  display: none;
-}
-
-.suggestions {
-  margin-top: 18px;
-}
-
-.suggestion-header {
-  font-weight: bold;
-  margin-bottom: 4px;
-}
-
-.suggestion-body {
-  color: #777;
-}
-
-.error-code {
-  color: #A0A0A0;
-  margin-top: 15px;
-}
-
-/* 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) {
-  body {
-    margin: 15px;
-  }
-  h1 {
-    margin: 10px 0 15px 0;
-  }
-  #help-box-inner {
-    padding: 20px;
-  }
-  .suggestions {
-    margin-top: 10px;
-  }
-  .suggestion-header {
-    margin-bottom: 0;
-  }
-  .error-code {
-    margin-top: 10px;
-  }
-}
-
-/* Don't allow overflow when in a subframe. */
-html[subframe] body {
-  overflow: hidden;
-}
-
-#sub-frame-error {
-  -webkit-align-items: center;
-  -webkit-flex-flow: column;
-  -webkit-justify-content: center;
-  background-color: #DDD;
-  display: -webkit-flex;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-#sub-frame-error:hover {
-  background-color: #EEE;
-}
-
-#sub-frame-error-details {
-  margin: 0 10px;
-  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;
-  }
-}
-
-/* Offline page */
-.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;
-}

chrome/browser/resources/chromeos/neterror.js

@@ -1,54 +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.
-
-function toggleHelpBox() {
-  var helpBoxOuter = $('details');
-  helpBoxOuter.classList.toggle('hidden');
-  var detailsButton = $('details-button');
-  if (helpBoxOuter.classList.contains('hidden')) {
-    detailsButton.innerText = detailsButton.detailsText;
-  } else {
-    detailsButton.innerText = detailsButton.hideDetailsText;
-  }
-}
-
-function diagnoseErrors() {
-  window.domAutomationController.send('open_connectivity_diagnostics');
-}
-
-// Subframes use a different layout but the same html file.  This is to make it
-// easier to support platforms that load the error page via different
-// mechanisms (Currently just iOS).
-if (window.top.location != window.location)
-  document.documentElement.setAttribute('subframe', '');
-
-// Re-renders the error page using |strings| as the dictionary of values.
-// Used by NetErrorTabHelper to update DNS error pages with probe results.
-function updateForDnsProbe(strings) {
-  var context = new JsEvalContext(strings);
-  jstProcess(context, $('t'));
-}
-
-// Given the classList property of an element, adds an icon class to the list
-// and removes the previously-
-function updateIconClass(classList, newClass) {
-  var oldClass;
-
-  if (classList.hasOwnProperty('last_icon_class')) {
-    oldClass = classList['last_icon_class'];
-    if (oldClass == newClass)
-      return;
-  }
-
-  classList.add(newClass);
-  if (oldClass !== undefined)
-    classList.remove(oldClass);
-
-  classList['last_icon_class'] = newClass;
-
-  if (newClass == 'icon-offline') {
-    document.body.classList.add('offline');
-    new Runner('.interstitial-wrapper');
-  }
-}

components/neterror/resources/neterror.css

@@ -12,13 +12,6 @@ html:not([subframe]) #sub-frame-error {
   display: none;
 }
 
-#diagnose-button {
-  float: none;
-  margin-bottom: 10px;
-  margin-inline-start: 0;
-  margin-top: 20px;
-}
-
 h1 {
   margin-top: 0;
   word-wrap: break-word;
@@ -28,13 +21,6 @@ h1 span {
   font-weight: 500;
 }
 
-h2 {
-  color: var(--heading-color);
-  font-size: 1.2em;
-  font-weight: normal;
-  margin: 10px 0;
-}
-
 a {
   text-decoration: none;
 }
@@ -45,10 +31,8 @@ a {
 }
 
 .icon-generic {
-  /**
-   * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
-   * renderer process, so embed the resource manually.
-   */
+  /* Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
+   * renderer process, so embed the resource manually. */
   content: -webkit-image-set(
       url(../../resources/default_100_percent/neterror/error_network_generic.png) 1x,
       url(../../resources/default_200_percent/neterror/error_network_generic.png) 2x);
@@ -68,31 +52,10 @@ a {
   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;
-}
-
 #suggestions-list a {
   color: var(--google-blue-600);
 }
@@ -110,10 +73,6 @@ a {
   padding-inline-start: 0;
 }
 
-#short-suggestion {
-  margin-top: 5px;
-}
-
 #error-information-button {
   content: url(images/help_outline.svg);
   height: 24px;
@@ -198,46 +157,6 @@ a {
   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-inline-end: 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(../../resources/default_100_percent/neterror/search_glass.png) 1x,
-          url(../../resources/default_200_percent/neterror/search_glass.png) 2x);
-  margin: auto;
-}
-
 .secondary-button {
   background: #d9d9d9;
   color: #696969;
@@ -299,24 +218,11 @@ a {
   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;
   }
@@ -767,22 +673,6 @@ html[subframe] body {
   color: rgb(255, 255, 255);
 }
 
-/*
-TODO(https://crbug.com/852872): UI for offline suggested content is incomplete.
-*/
-.suggested-thumbnail {
-  height: 25vw;
-  width: 25vw;
-}
-
-/* Alternate dino page button styles */
-#control-buttons .reload-button-alternate:disabled {
-  background: #ccc;
-  color: #fff;
-  font-size: 14px;
-  height: 48px;
-}
-
 #buttons::after {
   clear: both;
   content: '';

components/neterror/resources/neterror.js

@@ -78,7 +78,9 @@ function updateForDnsProbe(strings) {
 }
 
 // Given the classList property of an element, adds an icon class to the list
-// and removes the previously-
+// and removes the icon class previously set with this method. Previous value
+// stored in 'last_icon_class' property of passed classList for future reference.
+// Initializes Dino Runner instance in case 'icon-offline' class was set.
 function updateIconClass(classList, newClass) {
   let oldClass;
 
@@ -104,13 +106,6 @@ function updateIconClass(classList, newClass) {
   }
 }
 
-// Does a search using |baseSearchUrl| and the text in the search box.
-function search(baseSearchUrl) {
-  const searchTextNode = document.getElementById('search-box');
-  document.location = baseSearchUrl + searchTextNode.value;
-  return false;
-}
-
 // Implements button clicks.  This function is needed during the transition
 // between implementing these in trunk chromium and implementing them in
 // iOS.

components/security_interstitials/core/common/resources/interstitial_common.css

@@ -82,7 +82,7 @@ button:active {
 
 .error-code {
   color: var(--error-code-color);
-  font-size: .86667em;
+  font-size: .8em;
   text-transform: uppercase;
   margin-top: 12px;
 }