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

chrome/renderer/resources/neterror.css

 /* 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. */
 
 /*******************************************************************************
  *
  * Note:  This is also used by a file in chrome/browser/resources/ssl.  When
  *        updating this file, make sure nothing in that directory regresses.
  *
  ******************************************************************************/
@@ skipping 27 matching lines @@
   border-bottom: 1px solid #888;
   border-radius: 3px;
   color: black;
 <if expr="not is_android and not is_ios">
   /* Not done on mobile for performance reasons. */
   box-shadow: 0px 2px 2px #AAA;
 </if>
 }
 
 #diagnose-button {
+  -webkit-margin-start: 0;
+  margin-bottom: 10px;
   margin-top: 20px;
-  margin-bottom: 10px;
-  -webkit-margin-start: 0px;
 }
 
 #content-top #buttons,
 #content-top h1 {
   color: #666;
-  margin: 10px 0px 30px 0px;
+  font-size: 1.5em;
   font-weight: normal;
-  font-size: 1.5em;
   text-align: center;
+  margin: 10px 0 30px 0;
 }
 
 h2 {
   color: #666;
   font-size: 1.2em;
   font-weight: normal;
   margin: 10px 0;
 }
 
 a {
-  color: #15c;
+  color: rgb(17, 85, 204);
   text-decoration: none;
 }
 
 .icon {
   -webkit-user-select: none;
 }
 
 .icon-generic {
   /**
    * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
    * renderer process, so embed the resource manually.
    */
   content: -webkit-image-set(
       url('../../app/theme/default_100_percent/common/error_network_generic.png') 1x,
       url('../../app/theme/default_200_percent/common/error_network_generic.png') 2x);
 }
 
 .icon-offline {
   content: -webkit-image-set(
       url('../../app/theme/default_100_percent/common/error_network_offline.png') 1x,
       url('../../app/theme/default_200_percent/common/error_network_offline.png') 2x);
 }
 
 #content-top {
   margin: 20px;
 }
 
 #help-box-outer {
+  -webkit-transition: height ease-in 218ms;
   overflow: hidden;
-  -webkit-transition: height ease-in 218ms;
 }
 
 #help-box-inner {
   background-color: #f9f9f9;
   border-top: 1px solid #EEE;
   color: #444;
   padding: 20px;
   text-align: start;
 }
 
@@ skipping 11 matching lines @@
   /* Not done on mobile for performance reasons. */
   text-shadow: 0 1px 0 rgba(255,255,255,0.3);
 </if>
 }
 
 [jscontent=failedUrl] {
   overflow-wrap: break-word;
 }
 
 button {
+  -webkit-user-select: none;
   border: 1px solid rgba(0, 0, 0, 0.25);
   border-radius: 2px;
   color: #444;
-  -webkit-user-select: none;
 <if expr="not is_android">
   /* iOS does not support linear-gradient without a prefix. */
   background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
   text-shadow: 0 1px 0 rgb(240, 240, 240);
 </if>
 <if expr="is_android">
   /* Android uses flat background colors. */
   background-color: #ededed;
   font-weight: bold;
 </if>
 <if expr="not is_android and not is_ios">
   /* Not done on mobile for performance reasons. */
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
+              inset 0 1px 2px rgba(255, 255, 255, 0.75);
 </if>
 }
 
 button:hover {
   border: 1px solid rgba(0, 0, 0, 0.3);
   color: #000;
 <if expr="not is_android">
   background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
 </if>
 <if expr="is_android">
   background-color: #f0f0f0;
 </if>
 <if expr="not is_android and not is_ios">
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
+              inset 0 1px 2px rgba(255, 255, 255, 0.95);
 </if>
 }
 
 button:active {
   border: 1px solid rgba(0, 0, 0, 0.3);
   color: #444;
 <if expr="not is_android">
   background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
 </if>
 <if expr="is_android">
   background-color: #e7e7e7;
 </if>
 <if expr="not is_android and not is_ios">
   box-shadow: none;
 </if>
 }
 
 .text-button {
-  margin: 0px 5px;
+  margin: 0 5px;
   min-height: 29px;
   min-width: 65px;
   padding: 7px 13px;
 }
 
+.active-text {
+  margin: 0px 5px;
+  min-height: 29px;
+  min-width: 65px;
+  padding: 7px 13px;
+  color: #777777;
+  text-decoration: underline;
+  /* Match button font.  */
+  font: -webkit-small-control;

[mmenke, 2014/08/01 15:50:42]

I don't like using css properties with webkit prefixes - unclear how long
they'll be alive, and even when we get rid of them, there's still the issue of
Safari (Most of the other webkit properties are now supported unprefixed on
Chrome, but weren't yet on iOS, last check).

Maybe just set the size explicitly?  Using font-size: 13px results in nearly the
same size font on windows, at least.

[Randy Smith (Not in Mondays), 2014/08/01 18:14:15]

So this makes me nervous specifically because I don't grok the
webkit-small-control property, and I'm trying to match it with a specific font
size.  Two forms of nervousness: a) I feel like if I do this I'd sorta have to
check every single platform we have to make sure it matches (in case
webkit-small-control is setup differently on different platforms), and b) if at
some point in the future the definition of webkit-small-control changes, we'll
silently break here.  I hear you about IOS, though.

How would you feel about my overriding the font for both Details and Reload to
force them to be the same (and neither be webkit-small-control)?

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

Isn't that just what I suggested?  Either way, sounds good to me.

+}
+
 .blue-button {
   color: #fff;
 <if expr="not is_android">
   background-image: -webkit-linear-gradient(#5d9aff, #5d9aff 38%, #5891f0);
   border: 1px solid rgba(45, 102, 195, 1);
   text-shadow: 0 1px 0 rgba(0,0,0,0.5);
 </if>
 <if expr="is_android">
   background-color: rgb(39, 180, 231);
   border: 1px solid rgb(0, 152, 206);
 </if>
 <if expr="not is_android and not is_ios">
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.2);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
+              inset 0 1px 2px rgba(255, 255, 255, 0.2);
 </if>
 }
 
 .blue-button:hover {
   color: #fff;
 <if expr="not is_android">
   background-image: -webkit-linear-gradient(#659efd, #659efd 38%, #6097f1);
   border: 1px solid rgba(45, 102, 195, 1);
 </if>
 <if expr="not is_android and not is_ios">
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.2);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25),
+              inset 0 1px 2px rgba(255, 255, 255, 0.2);
 </if>
 }
 
 .blue-button:active {
 <if expr="not is_android">
   background-image: -webkit-linear-gradient(#6095ed, #6095ed 38%, #6095ed);
   border: 1px solid rgb(38, 84, 160);
 </if>
 <if expr="is_android">
   background-color: rgb(0, 152, 206);
@@ skipping 12 matching lines @@
 #search-box {
   border: 1px solid #cdcdcd;
   flex-grow: 1;
   font-size: 16px;
   height: 26px;
   margin-right: 0;
   padding: 1px 9px;
 }
 
 #search-box:focus {
-  border: 1px solid #5d9aff;
+  border: 1px solid rgb(93, 154, 255);
   outline: none;
 }
 
 #search-button {
   border: none;
+  border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
   box-shadow: none;
   display: flex;
   height: 30px;
   margin: 0;
+  padding: 0;
   width: 60px;
-  padding: 0;
 }
 
 #search-image {
   content:
       -webkit-image-set(
           url('../../app/theme/default_100_percent/common/omnibox_search_button_loupe.png') 1x,
           url('../../app/theme/default_200_percent/common/omnibox_search_button_loupe.png') 2x);
   margin: auto;
 }
 
@@ skipping 25 matching lines @@
     line-height: 18px;
   }
 }
 
 /* Decrease padding at low sizes. */
 @media (max-width: 640px), (max-height: 640px) {
   body {
     margin: 15px;
   }
   h1 {
-    margin: 10px 0px 15px 0px;
+    margin: 10px 0 15px 0;
   }
   #content-top {
     margin: 15px;
   }
   #help-box-inner {
     padding: 20px;
   }
   .suggestions {
     margin-top: 10px;
   }
   .suggestion-header {
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
   .error-code {
     margin-top: 10px;
   }
 }
 
 /* Don't allow overflow when in a subframe. */
 html[subframe] body {
   overflow: hidden;
 }
 
 #sub-frame-error {
   -webkit-align-items: center;
+  -webkit-flex-flow: column;
+  -webkit-justify-content: center;
   background-color: #DDD;
   display: -webkit-flex;
-  -webkit-flex-flow: column;
   height: 100%;
-  -webkit-justify-content: center;
-  left: 0px;
+  left: 0;
   position: absolute;
-  top: 0px;
+  top: 0;
   width: 100%;
 }
 
 #sub-frame-error:hover {
   background-color: #EEE;
 }
 
 #sub-frame-error-details {
   margin: 0 10px;
   visibility: hidden;
 }
 
 /* Show details only when hovering. */
 #sub-frame-error:hover #sub-frame-error-details {
   visibility: visible;
 }
 
 /* If the iframe is too small, always hide the error code. */
 /* TODO(mmenke): See if overflow: no-display works better, once supported. */
 @media (max-width: 200px), (max-height: 95px) {
   #sub-frame-error-details {
     display: none;
   }
 }
+
+/* Handle floating inside of #buttons.  */
+.salient-right.salient-button {

[mmenke, 2014/08/01 15:50:42]

Neither salient-right nor salient-left seems to be used in the HTML.  I'm seeing
two centered side-by-side buttons.  Is this what I should be seeing?

[mmenke, 2014/08/01 15:50:42]

I've never seen salient used in this context.  Default?  Suggested?

[mmenke, 2014/08/01 15:52:51]

Oops...That should be neither "salient-right not salient-button".  See why
salient-right is not (See comment in other file), but what's salient-button for?

[Randy Smith (Not in Mondays), 2014/08/01 18:14:14]

So you should *not* be seeing two centered side-by-side buttons.  I'm looking
for two buttons floated to the opposite ends of the box.  That's very
interesting.  I suspect it's because you're on windows and I'm not; I'll see if
I can force testing of that one before uploading the next PS.

The styles in question should be set in the JS.  Having said that, I don't seem
to be setting salient button; I'll look into that.

[Randy Smith (Not in Mondays), 2014/08/01 18:14:15]

So I played around with this and gave up on being clever; I'm now just setting
styles directly on the elements from JS.  I wanted to do something with
inheritance & classes, but a) classes themselves don't appear to be inherited in
the DOM, only the styles they pull in for the node they apply to, and b) if I
set any kind of "float" style on the #buttons div, it pops the buttons out of
the div.  

I'm happy to solve this general problem (remapping float: left/right back and
forth between the two sets of buttons) any way you'd like, as long as it works
:-}.  Specifically, I'm happy to set classes directly rather than styles, but
given the level of detail I was already on, I didn't see much point in the
indirection.  But let me know what you'd like.

[Randy Smith (Not in Mondays), 2014/08/01 18:14:15]

Moot given rewrite.

+  float:right;

[mmenke, 2014/08/01 15:50:42]

nit:  These should all have spaces after the colon.

[Randy Smith (Not in Mondays), 2014/08/01 18:14:15]

Done.

+}
+
+.salient-left.salient-button {
+  float:left;
+}
+
+#more-less-button.salient-right {
+  float:left;
+}
+
+#more-less-button.salient-left {
+  float:right;
+}
+
+#more-less-button.single-button {
+  float:center;
+}
+
+#buttons::after {
+  clear: both;
+  content: '';

[mmenke, 2014/08/01 15:50:42]

What does this do?

[Randy Smith (Not in Mondays), 2014/08/01 18:14:15]

No clue; copied from https://developer.mozilla.org/en-US/docs/Web/CSS/clear.  My
guess would be that it sets the content of the newly created pseudo-node to
nothing.  It's necessary, though; without it the buttons float outside the box.

+  display: table;

[mmenke, 2014/08/01 15:50:42]

I don't think you need to use both float and a table layout.

[Randy Smith (Not in Mondays), 2014/08/01 18:14:15]

You're right--done.

+  width: 100%;
+}