Shift the error page "More" button over to text.

chrome/renderer/resources/neterror.js

Index: chrome/renderer/resources/neterror.js
diff --git a/chrome/renderer/resources/neterror.js b/chrome/renderer/resources/neterror.js
index b518a87c935abf9c682d56bd2900270d8a06d9b3..aaae2dc5977b242ad29ec5f8d25e75eb6e2fc534 100644
--- a/chrome/renderer/resources/neterror.js
+++ b/chrome/renderer/resources/neterror.js
@@ -5,19 +5,19 @@
 function toggleHelpBox() {
   var helpBoxOuter = document.getElementById('help-box-outer');
   helpBoxOuter.classList.toggle('hidden');
-  var moreLessButton = document.getElementById('more-less-button');
+  var detailsButton = document.getElementById('details-button');
   if (helpBoxOuter.classList.contains('hidden')) {
-    moreLessButton.innerText = moreLessButton.moreText;
+    detailsButton.innerText = detailsButton.detailsText;
   } else {
-    moreLessButton.innerText = moreLessButton.lessText;
+    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 +41,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 +94,38 @@ function loadStaleButtonClick() {
   }
 }
 
-function moreButtonClick() {
+function detailsButtonClick() {
   if (window.errorPageController) {
-    errorPageController.moreButtonClick();
+    errorPageController.detailsButtonClick();
   }
 }
 
-<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() {
+// 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)
-}
-document.addEventListener("DOMContentLoaded", swapButtonOrder);
+
+  var primaryButton = reloadButton;
+  var secondaryButton = staleLoadButton;
+  var primaryControlOnLeft = true;
+<if expr="is_macosx or is_ios or is_linux or is_android">
+  primaryControlOnLeft = false;

[Bernhard Bauer, 2014/08/04 11:49:18]

Could you do this check purely in JS? Having grit expressions in the middle of
Javascript makes me queasy.

[Randy Smith (Not in Mondays), 2014/08/04 12:21:27]

Would it be better if I hoisted it up outside the function and put it around the
declaration of a file level variable?  (Sorta parallel to what used to be here.)
 There might be a way to do this in JS, but if I shift over to using JS to
detect the platform, that sorta requires me to test it on every single platform
to make sure that the probe behaves properly, whereas if I keep the old
mechanism I can presume the old behavior hasn't changed.

[Bernhard Bauer, 2014/08/04 13:00:12]

Hm, fair point. Yeah, I think hoisting it outside of the function would make
things a bit easier to parse.

Then longer-term, I feel we should move these sort of platform-dependent UI
decisions to some shared file, but that's not necessarily something that needs
to be done by you, or in this CL.

[Randy Smith (Not in Mondays), 2014/08/04 13:14:24]

Done.  I thought about just wrapping a declaration in grit, but I didn't want to
be checking for existence of a particular key on the document hash, so I just
hoisted what's currently there.

 </if>
+
+  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');

[Bernhard Bauer, 2014/08/04 11:49:18]

This needs to be indented two spaces less.

[Randy Smith (Not in Mondays), 2014/08/04 12:21:27]

Whoops, sorry.  Done.

+  }
+}
+document.addEventListener('DOMContentLoaded', setButtonLayout);