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();
   }
 }
 
+// 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 detailsButton = document.getElementById('details-button');
+  var staleLoadButton = document.getElementById('stale-load-button');
+
+  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">
-// Re-orders buttons. Used on Mac, Linux, and Android, where reload should go
-// on the right.
-function swapButtonOrder() {
-  var reloadButton = document.getElementById('reload-button');
-  var moreLessButton = document.getElementById('more-less-button');
-  var staleLoadButton = document.getElementById('stale-load-button');
-  reloadButton.parentNode.insertBefore(moreLessButton, reloadButton);
-  reloadButton.parentNode.insertBefore(staleLoadButton, reloadButton)
+  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", swapButtonOrder);
-</if>
+document.addEventListener('DOMContentLoaded', setButtonLayout);