Shift the error page "More" button over to text and float to side.

Note that this also involved copying neterror.css/js over to 
chrome/browser/resources/ssl so as to break the dependency between 
blocking.html in that directory and the css/js files in 
chrome/renderer/resources.  That copy means that, while I'm going 
through presubmit errors before uploading, I"m not fixing them all--
there are pre-existing errors in neterror.css that I don't have the 
expertise to fix.

BUG=None

Review URL: https://codereview.chromium.org/422933002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@287538 0039d316-1c4b-4281-b951-d872f2087c98

9 files changed, 136 insertions, 70 deletions

diff --git a/build/ios/grit_whitelist.txt b/build/ios/grit_whitelist.txt
index c55ad9af..32c8ca7 100644
--- a/build/ios/grit_whitelist.txt
+++ b/build/ios/grit_whitelist.txt
@@ -327,6 +327,8 @@ IDS_ERRORPAGES_HEADING_SSL_PROTOCOL_ERROR
 IDS_ERRORPAGES_HEADING_TOO_MANY_REDIRECTS
 IDS_ERRORPAGES_HEADING_WEAK_SERVER_EPHEMERAL_DH_KEY
 IDS_ERRORPAGES_HTTP_POST_WARNING
+IDS_ERRORPAGES_NET_BUTTON_DETAILS
+IDS_ERRORPAGES_NET_BUTTON_HIDE_DETAILS
 IDS_ERRORPAGES_SUGGESTION_CHECK_CONNECTION_BODY
 IDS_ERRORPAGES_SUGGESTION_CHECK_CONNECTION_HEADER
 IDS_ERRORPAGES_SUGGESTION_CONTACT_ADMINISTRATOR
diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index e203d04..3b0f328 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -8537,6 +8537,12 @@ Keep your key file in a safe place. You will need it to create new versions of y
       </if>
 
       <!-- error page messages -->
+      <message name="IDS_ERRORPAGE_NET_BUTTON_DETAILS" desc="Label for the button that expands the details on a net error page">
+        Details
+      </message>
+      <message name="IDS_ERRORPAGE_NET_BUTTON_HIDE_DETAILS" desc="Label for the button that hides the details on a net error page">
+        Hide details
+      </message>
       <message name="IDS_ERRORPAGES_BUTTON_MORE" desc="Label for the button that expands the details on an error page">
         More
       </message>
diff --git a/chrome/browser/errorpage_browsertest.cc b/chrome/browser/errorpage_browsertest.cc
index 1d676a9..820f51c 100644
--- a/chrome/browser/errorpage_browsertest.cc
+++ b/chrome/browser/errorpage_browsertest.cc
@@ -80,7 +80,7 @@ bool WARN_UNUSED_RESULT IsDisplayingText(Browser* browser,
 void ToggleHelpBox(Browser* browser) {
   EXPECT_TRUE(content::ExecuteScript(
       browser->tab_strip_model()->GetActiveWebContents(),
-      "document.getElementById('more-less-button').click();"));
+      "document.getElementById('details-button').click();"));
 }
 
 // Returns true if |browser| is displaying the text representation of
diff --git a/chrome/common/localized_error.cc b/chrome/common/localized_error.cc
index ecff88f..63bf219 100644
--- a/chrome/common/localized_error.cc
+++ b/chrome/common/localized_error.cc
@@ -565,9 +565,10 @@ void LocalizedError::GetStrings(int error_code,
                      l10n_util::GetStringUTF16(IDS_PRODUCT_NAME));
 
   error_strings->SetString(
-      "more", l10n_util::GetStringUTF16(IDS_ERRORPAGES_BUTTON_MORE));
+      "details", l10n_util::GetStringUTF16(IDS_ERRORPAGE_NET_BUTTON_DETAILS));
   error_strings->SetString(
-      "less", l10n_util::GetStringUTF16(IDS_ERRORPAGES_BUTTON_LESS));
+      "hideDetails", l10n_util::GetStringUTF16(
+          IDS_ERRORPAGE_NET_BUTTON_HIDE_DETAILS));
   error_strings->Set("summary", summary);
 
   if (options.details_resource_id != kErrorPagesNoDetails) {
diff --git a/chrome/renderer/net/net_error_page_controller.cc b/chrome/renderer/net/net_error_page_controller.cc
index 42a2c20..fcdbfab 100644
--- a/chrome/renderer/net/net_error_page_controller.cc
+++ b/chrome/renderer/net/net_error_page_controller.cc
@@ -60,7 +60,7 @@ bool NetErrorPageController::ReloadButtonClick() {
   return true;
 }
 
-bool NetErrorPageController::MoreButtonClick() {
+bool NetErrorPageController::DetailsButtonClick() {
   if (!render_frame())
     return false;
 
@@ -99,7 +99,8 @@ gin::ObjectTemplateBuilder NetErrorPageController::GetObjectTemplateBuilder(
                  &NetErrorPageController::LoadStaleButtonClick)
       .SetMethod("reloadButtonClick",
                  &NetErrorPageController::ReloadButtonClick)
-      .SetMethod("moreButtonClick", &NetErrorPageController::MoreButtonClick)
+      .SetMethod("detailsButtonClick",
+                 &NetErrorPageController::DetailsButtonClick)
       .SetMethod("trackClick",
                  &NetErrorPageController::TrackClick);
 }
diff --git a/chrome/renderer/net/net_error_page_controller.h b/chrome/renderer/net/net_error_page_controller.h
index 9c5314a..9be5bf4 100644
--- a/chrome/renderer/net/net_error_page_controller.h
+++ b/chrome/renderer/net/net_error_page_controller.h
@@ -36,8 +36,8 @@ class NetErrorPageController
   // Execute a "Reload" button click.
   bool ReloadButtonClick();
 
-  // Execute a "More" button click.
-  bool MoreButtonClick();
+  // Execute a "Details" button click.
+  bool DetailsButtonClick();
 
   // Track a click when the page has suggestions from the navigation correction
   // service.
diff --git a/chrome/renderer/resources/neterror.css b/chrome/renderer/resources/neterror.css
index fc2e153..da9ffcc 100644
--- a/chrome/renderer/resources/neterror.css
+++ b/chrome/renderer/resources/neterror.css
@@ -2,13 +2,6 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-/*******************************************************************************
- *
- * Note:  This is also used by a file in chrome/browser/resources/ssl.  When
- *        updating this file, make sure nothing in that directory regresses.
- *
- ******************************************************************************/
-
 body {
   background-color: #E6E6E6;
   font-family: Helvetica, Arial, sans-serif;
@@ -45,18 +38,18 @@ html:not([subframe]) #sub-frame-error {
 }
 
 #diagnose-button {
-  margin-top: 20px;
+  -webkit-margin-start: 0;
   margin-bottom: 10px;
-  -webkit-margin-start: 0px;
+  margin-top: 20px;
 }
 
 #content-top #buttons,
 #content-top h1 {
   color: #666;
-  margin: 10px 0px 30px 0px;
-  font-weight: normal;
   font-size: 1.5em;
+  font-weight: normal;
   text-align: center;
+  margin: 10px 0 30px;
 }
 
 h2 {
@@ -67,7 +60,7 @@ h2 {
 }
 
 a {
-  color: #15c;
+  color: rgb(17, 85, 204);
   text-decoration: none;
 }
 
@@ -96,8 +89,8 @@ a {
 }
 
 #help-box-outer {
-  overflow: hidden;
   -webkit-transition: height ease-in 218ms;
+  overflow: hidden;
 }
 
 #help-box-inner {
@@ -129,10 +122,10 @@ a {
 }
 
 button {
+  -webkit-user-select: none;
   border: 1px solid rgba(0, 0, 0, 0.25);
   border-radius: 2px;
   color: #444;
-  -webkit-user-select: none;
 <if expr="not is_android">
   /* iOS does not support linear-gradient without a prefix. */
   background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
@@ -145,7 +138,8 @@ button {
 </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);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
+              inset 0 1px 2px rgba(255, 255, 255, 0.75);
 </if>
 }
 
@@ -159,7 +153,8 @@ button:hover {
   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);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
+              inset 0 1px 2px rgba(255, 255, 255, 0.95);
 </if>
 }
 
@@ -178,7 +173,7 @@ button:active {
 }
 
 .text-button {
-  margin: 0px 5px;
+  margin: 0 5px;
   min-height: 29px;
   min-width: 65px;
   padding: 7px 13px;
@@ -196,7 +191,8 @@ button:active {
   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);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
+              inset 0 1px 2px rgba(255, 255, 255, 0.2);
 </if>
 }
 
@@ -207,7 +203,8 @@ button:active {
   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);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25),
+              inset 0 1px 2px rgba(255, 255, 255, 0.2);
 </if>
 }
 
@@ -240,20 +237,20 @@ button:active {
 }
 
 #search-box:focus {
-  border: 1px solid #5d9aff;
+  border: 1px solid rgb(93, 154, 255);
   outline: none;
 }
 
 #search-button {
   border: none;
-  border-top-left-radius: 0;
   border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
   box-shadow: none;
   display: flex;
   height: 30px;
   margin: 0;
-  width: 60px;
   padding: 0;
+  width: 60px;
 }
 
 #search-image {
@@ -299,7 +296,7 @@ button:active {
     margin: 15px;
   }
   h1 {
-    margin: 10px 0px 15px 0px;
+    margin: 10px 0 15px;
   }
   #content-top {
     margin: 15px;
@@ -311,7 +308,7 @@ button:active {
     margin-top: 10px;
   }
   .suggestion-header {
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
   .error-code {
     margin-top: 10px;
@@ -330,9 +327,9 @@ html[subframe] body {
   -webkit-flex-flow: column;
   height: 100%;
   -webkit-justify-content: center;
-  left: 0px;
+  left: 0;
   position: absolute;
-  top: 0px;
+  top: 0;
   width: 100%;
 }
 
@@ -357,3 +354,41 @@ html[subframe] body {
     display: none;
   }
 }
+
+/* details-button is special; it's a <button> element that looks like a link. */
+#details-button {
+  background-color: inherit;
+  background-image: none;
+  border: none;
+  box-shadow: none;
+  min-width: 0;
+  padding: 0;
+  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  {
+  float: left;
+}
+
+.suggested-right > #control-buttons,
+.suggested-left > #details-button  {
+  float: right;
+}
+
+#details-button.singular {
+  float: none;
+}
+
+#buttons::after {
+  clear: both;
+  content: '';
+  display: block;
+  width: 100%;
+}
diff --git a/chrome/renderer/resources/neterror.html b/chrome/renderer/resources/neterror.html
index a6ba1db..ecfe903 100644
--- a/chrome/renderer/resources/neterror.html
+++ b/chrome/renderer/resources/neterror.html
@@ -20,20 +20,25 @@
           <span i18n-content="heading"></span>
         </h1>
         <div id="buttons">
-          <button id="reload-button" class="blue-button text-button"
-              onclick="trackClick(this.trackingId);
-                       reloadButtonClick(this.url);"
-              jsselect="reloadButton"
-              jsvalues=".url:reloadUrl; .trackingId:reloadTrackingId"
-              jscontent="msg"></button>
-          <button id="stale-load-button" class="blue-button text-button"
-              onclick="loadStaleButtonClick()"
-              jsselect="staleLoadButton"
-              jscontent="msg" jsvalues="title:title"></button>
-          <button id="more-less-button" class="text-button"
-              onclick="moreButtonClick(); toggleHelpBox()"
-              jsdisplay="more" jsvalues=".moreText:more; .lessText:less;"
-              jscontent="more"></button>
+          <div id="control-buttons">
+            <button id="reload-button"
+                class="blue-button text-button"
+                onclick="trackClick(this.trackingId);
+                         reloadButtonClick(this.url);" 
+                jsselect="reloadButton"
+                jsvalues=".url:reloadUrl; .trackingId:reloadTrackingId"
+                jscontent="msg"></button>
+            <button id="stale-load-button"
+                class="blue-button text-button"
+                onclick="loadStaleButtonClick()" 
+                jsselect="staleLoadButton"
+                jscontent="msg" jsvalues="title:title"></button>
+          </div>
+          <button id="details-button" class="text-button"
+             onclick="detailsButtonClick(); toggleHelpBox()"
+             jsdisplay="details" jscontent="details"
+             jsvalues=".detailsText:details; .hideDetailsText:hideDetails;">
+          </a>
         </div>
       </div>
        <!-- Outer and inner divs are needed both for margins and sizing. -->
diff --git a/chrome/renderer/resources/neterror.js b/chrome/renderer/resources/neterror.js
index b518a87..14117c4 100644
--- a/chrome/renderer/resources/neterror.js
+++ b/chrome/renderer/resources/neterror.js
@@ -5,19 +5,18 @@
 function toggleHelpBox() {
   var helpBoxOuter = document.getElementById('help-box-outer');
   helpBoxOuter.classList.toggle('hidden');
-  var moreLessButton = document.getElementById('more-less-button');
-  if (helpBoxOuter.classList.contains('hidden')) {
-    moreLessButton.innerText = moreLessButton.moreText;
-  } else {
-    moreLessButton.innerText = moreLessButton.lessText;
-  }
+  var detailsButton = document.getElementById('details-button');
+  if (helpBoxOuter.classList.contains('hidden'))
+    detailsButton.innerText = detailsButton.detailsText;
+  else
+    detailsButton.innerText = detailsButton.hideDetailsText;
 }
 
 function diagnoseErrors() {
-  var extension_id = "idddmepepmjcgiedknnmlbadcokidhoa";
-  var diagnose_frame = document.getElementById('diagnose-frame');
-  diagnose_frame.innerHTML =
-      '<iframe src="chrome-extension://' + extension_id +
+  var extensionId = 'idddmepepmjcgiedknnmlbadcokidhoa';
+  var diagnoseFrame = document.getElementById('diagnose-frame');
+  diagnoseFrame.innerHTML =
+      '<iframe src="chrome-extension://' + extensionId +
       '/index.html"></iframe>';
 }
 
@@ -41,7 +40,7 @@ function updateIconClass(classList, newClass) {
   var oldClass;
 
   if (classList.hasOwnProperty('last_icon_class')) {
-    oldClass = classList['last_icon_class']
+    oldClass = classList['last_icon_class'];
     if (oldClass == newClass)
       return;
   }
@@ -94,21 +93,38 @@ function loadStaleButtonClick() {
   }
 }
 
-function moreButtonClick() {
-  if (window.errorPageController) {
-    errorPageController.moreButtonClick();
-  }
+function detailsButtonClick() {
+  if (window.errorPageController)
+    errorPageController.detailsButtonClick();
 }
 
+var primaryControlOnLeft = true;
 <if expr="is_macosx or is_ios or is_linux or is_android">
-// Re-orders buttons. Used on Mac, Linux, and Android, where reload should go
-// on the right.
-function swapButtonOrder() {
+primaryControlOnLeft = false;
+</if>
+
+// Sets up the proper button layout for the current platform.
+function setButtonLayout() {
+  var buttonsDiv = document.getElementById('buttons');
+  var controlButtonDiv = document.getElementById('control-buttons');
   var reloadButton = document.getElementById('reload-button');
-  var moreLessButton = document.getElementById('more-less-button');
+  var detailsButton = document.getElementById('details-button');
   var staleLoadButton = document.getElementById('stale-load-button');
-  reloadButton.parentNode.insertBefore(moreLessButton, reloadButton);
-  reloadButton.parentNode.insertBefore(staleLoadButton, reloadButton)
+
+  var primaryButton = reloadButton;
+  var secondaryButton = staleLoadButton;
+
+  if (primaryControlOnLeft) {
+    buttons.classList.add('suggested-left');
+    controlButtonDiv.insertBefore(primaryButton, secondaryButton);
+  } else {
+    buttons.classList.add('suggested-right');
+    controlButtonDiv.insertBefore(secondaryButton, primaryButton);
+  }
+
+  if (reloadButton.style.display == 'none' &&
+      staleLoadButton.style.display == 'none') {
+    detailsButton.classList.add('singular');
+  }
 }
-document.addEventListener("DOMContentLoaded", swapButtonOrder);
-</if>
+document.addEventListener('DOMContentLoaded', setButtonLayout);