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..b9a4d31d173495b6d8745c5fab9c605d44f45d3c 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,39 @@ 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 on all platforms.

[mmenke, 2014/08/01 20:56:51]

nit:  Maybe "Sets up the proper button layout for the current platform."

[Randy Smith (Not in Mondays), 2014/08/01 21:48:20]

Done.

+function setButtonLayout() {
+  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 primary = reloadButton;
+  var secondary = staleLoadButton;

[mmenke, 2014/08/01 20:56:51]

optional:  Suggest primaryButton / secondaryButton.

[Randy Smith (Not in Mondays), 2014/08/01 21:48:19]

Done.

+  var primaryControlOnLeft = true;
+<if expr="is_macosx or is_ios or is_linux or is_android">
+  primaryControlOnLeft = false;
 </if>
+
+  var additionalClass;
+  if (primaryControlOnLeft) {
+    controlButtonDiv.insertBefore(primary, secondary);
+    additionalClass = ' suggested-left';
+  } else {
+    controlButtonDiv.insertBefore(secondary, primary);
+    additionalClass = ' suggested-right';
+  }
+
+  controlButtonDiv.className += additionalClass;

[mmenke, 2014/08/01 20:56:51]

Can this be moved into the body of the if as well?

Hrm...If so, could actually just set the property of the parent, and switch your
selectors to .suggested-left>#control-buttons and the like...that's probably
just making things too fancy and complicated, though.

[Randy Smith (Not in Mondays), 2014/08/01 21:48:19]

(Other than the paragraph below) Why?  I still have to set additionalClass for
use in the if conditional below, and I'd rather not pull that in because
duplicating it across the else would be pretty verbose.
Actually, that might have been the syntax I was looking for; I'd rather do that,
if it works.  <later> Hmm.  The CSS is just as wordy, but we save a bit of JS,
so done.

+  if (reloadButton.style.display != 'none' ||
+      staleLoadButton.style.display != 'none') {
+    detailsButton.className += additionalClass;

[mmenke, 2014/08/01 20:56:51]

Use "detailsButton.classList.add(additionalClass);"

Can then get rid of the leading spaces on your class names, too.

[Randy Smith (Not in Mondays), 2014/08/01 21:48:20]

Thanks; I didn't know about that syntax.  Done.

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