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.
- *
- ******************************************************************************/
-
 body {
   background-color: #E6E6E6;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 10pt;
   margin: 50px 40px 20px 40px;
 }
 
 #main-frame-error {
   margin: auto;
   max-width: 540px;
@@ skipping 16 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;

[Dan Beam, 2014/08/04 17:19:02]

10px 0 30px;

[Randy Smith (Not in Mondays), 2014/08/04 18:05:26]

Done.

 }
 
 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;
+  /* Override the user agent specification of webkit-small-control. */
+  font: inherit;
+  font-size: 10pt;
+  margin: 0 5px;
   min-height: 29px;
   min-width: 65px;
   padding: 7px 13px;
 }
 
+.active-text {
+  font-size: 10pt;
+  margin: 0px 5px;
+  min-height: 29px;
+  min-width: 65px;
+  padding: 7px 13px;
+  color: #777777;
+  text-decoration: underline;
+}
+
 .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;

[Dan Beam, 2014/08/04 17:19:02]

this is probably wrong in RTL

[Randy Smith (Not in Mondays), 2014/08/04 18:05:26]

Meaning my re-ordering of the CSS properties as per the presubmit check is
wrong, or that border-bottom-left-radius: 0; is wrong?  If the latter, I'd like
to claim that since I didn't change it, it doesn't need to be fixed in this CL.

   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;

[Dan Beam, 2014/08/04 17:19:02]

margin: 10px 0 15px;

[Randy Smith (Not in Mondays), 2014/08/04 18:05:26]

Done.

   }
   #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;
   }
 }
+
+/* The JavaScript will set the suggested-* class on the #buttons
+   <div>, and that will indicate to the different control surfaces
+   if they should float left or right.  If there's only a details

[Dan Beam, 2014/08/04 17:19:02]

opt nit: 1\s between comments

[Randy Smith (Not in Mondays), 2014/08/04 18:05:26]

Sorry, I'm not understanding.  One space between the two sentences in the
comment?  Or don't indent by three spaces at the beginning of the line to align
with the line above?

If your comment refers to the rewritten version of this comment on the next
patchset about the two spaces between the period and the */, done.

+   button, it should be centered. */

[mmenke, 2014/08/04 15:57:39]

I don't think I've seen this style used in Chrome.  It's generally:

/**
 * Really, REALLY important stuff
 * that takes up more than one line.
 */

(Sometimes with an extra asterisk before the end comment tag, sometimes without
the extra asterisk on the first line, sometimes without the top line).

[Randy Smith (Not in Mondays), 2014/08/04 16:14:41]

Ok.  I don't consider that comment really really important (anymore), so I've
shortened it to a single line. 

[mmenke, 2014/08/04 16:18:03]

That wasn't meant to be a dig at the importance of the comment, for the record. 
I was trying to be silly.

[Bernhard Bauer, 2014/08/04 16:32:17]

I don't have a strong opinion on which exact style you should use, but I would
rather not use the double-asterisk one, as that is generally used for semantic
comments (Javadoc, JSDoc). I don't think there is an equivalent for CSS, but I
wouldn't want to create the impression that it is supposed to be processed.

[Dan Beam, 2014/08/04 17:19:02]

cssdoc and closure stylesheets do parse

  /**
   * A doc comment.
   * @require {some.namespace}
   */

comments.  if you don't want this to be picked up by a doc tool, change to

  /* Some long comment
   * that spans lines. */

like our copyright headers.  the \s\* at the beginning of each line is solely
conventional, but one that's pretty consistent throughout webui.

[Randy Smith (Not in Mondays), 2014/08/04 18:05:26]

Moot given rewrite; I'll take this into account if I rewrite the comment again.

+.suggested-left > #control-buttons,
+.suggested-right > #details-button  {
+  float: left;
+}
+
+.suggested-right > #control-buttons,
+.suggested-left > #details-button  {
+  float: right;
+}
+
+#details-button.singular {
+  float: none;
+}
+
+#buttons::after {
+  clear: both;
+  content: '';
+  display: block;
+  width: 100%;
+}

[Dan Beam, 2014/08/04 17:19:02]

why are you using float and a clearfix instead of flexbox + flexbox ordering (if
necessary)?

[Randy Smith (Not in Mondays), 2014/08/04 18:05:26]

Because I don't really know CSS (which you probably figured out by now :-}) and
didn't realize that there were preferred and non-preferred ways to do this. 
This parallels chrome/browser/resources/ssl/interstitial_v2.css, several things
I found on the net, and works.  Is it important enough to use flexbox & flexbox
ordering that I should climb the learning curve and switch to it?