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

chrome/renderer/resources/neterror.js

 // 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 = 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>';
 }
 
 // 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) {
   i18nTemplate.process(document, strings);
   var context = new JsEvalContext(strings);
   jstProcess(context, document.getElementById('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']
+    oldClass = classList['last_icon_class'];
     if (oldClass == newClass)
       return;
   }
 
   classList.add(newClass);
   if (oldClass !== undefined)
     classList.remove(oldClass);
 
   classList['last_icon_class'] = newClass;
 }
@@ skipping 32 matching lines @@
     location = url;
   }
 }
 
 function loadStaleButtonClick() {
   if (window.errorPageController) {
     errorPageController.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)
+
+  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);
-</if>
+document.addEventListener('DOMContentLoaded', swapButtonOrder);