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..2392b3b360740bec0ca5963d411925da4401fa60 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,44 @@ 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.

[mmenke, 2014/08/01 18:29:33]

This comment is no longer accurate.  It's used everywhere.  Also doesn't just
reorder the buttons anymore.

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

Done.

 function swapButtonOrder() {
+  var buttonDiv = document.getElementById('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;
+  var primary_leftmost = true;

[mmenke, 2014/08/01 18:29:33]

nit:  primaryLeftmost...  Or maybe primaryControlOnLeft?

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

Done.

+<if expr="is_macosx or is_ios or is_linux or is_android">
+  primary_leftmost = false;
 </if>
+
+  if (primary_leftmost) {
+    buttonDiv.insertBefore(primary, detailsButton);
+    buttonDiv.insertBefore(secondary, detailsButton);

[mmenke, 2014/08/01 18:29:33]

Suggestion:  Put the buttons in their own div, and just set the float style of
that instead of the two buttons independently.

Also, then you just need to flip the order of the buttons, you don't need to
move them relative to the details link, I believe, as the float left/right
should take care of that.

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

Thank you for nudging me again on this suggestions; it simplifies the code.

+    primary.style['float'] = "left";

[mmenke, 2014/08/01 18:29:33]

Use single quotes for JS strings.

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

Done.

+    secondary.style['float'] = "left";
+    detailsButton.style['float'] = "right";
+  } else {
+    buttonDiv.insertBefore(detailsButton, primary);
+    buttonDiv.insertBefore(secondary, primary);
+    primary.style['float'] = "right";
+    secondary.style['float'] = "right";
+    detailsButton.style['float'] = "left";

[mmenke, 2014/08/01 18:29:33]

I could be wrong, but I suspect you're going to get some pushback from setting
styles directly, rather than using CSS.

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

I switched over to CSS, and combined with your suggestion above, it may be a
*little* cleaner :-}.  But that's just one person's opinion, and I'm happy to do
the change just based on likely pushback (which I have no problem believing in).

+  }
+
+  if (reloadButton.style.display == "none" &&
+      staleLoadButton.style.display == "none") {
+    detailsButton.style['float'] = "center";

[mmenke, 2014/08/01 18:29:33]

I don't believe there is a such thing as float: center.

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

Done.

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