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

chrome/renderer/resources/neterror.css

Index: chrome/renderer/resources/neterror.css
diff --git a/chrome/renderer/resources/neterror.css b/chrome/renderer/resources/neterror.css
index fc2e1535a8c6eb37d6dc1c0a26445c7d42c2b1c3..48b34788893a45a29828eaccf11132129d033f72 100644
--- a/chrome/renderer/resources/neterror.css
+++ b/chrome/renderer/resources/neterror.css
@@ -2,13 +2,6 @@
  * 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;
@@ -45,18 +38,18 @@ html:not([subframe]) #sub-frame-error {
 }
 
 #diagnose-button {
-  margin-top: 20px;
+  -webkit-margin-start: 0;
   margin-bottom: 10px;
-  -webkit-margin-start: 0px;
+  margin-top: 20px;
 }
 
 #content-top #buttons,
 #content-top h1 {
   color: #666;
-  margin: 10px 0px 30px 0px;
-  font-weight: normal;
   font-size: 1.5em;
+  font-weight: normal;
   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 {
@@ -67,7 +60,7 @@ h2 {
 }
 
 a {
-  color: #15c;
+  color: rgb(17, 85, 204);
   text-decoration: none;
 }
 
@@ -96,8 +89,8 @@ a {
 }
 
 #help-box-outer {
-  overflow: hidden;
   -webkit-transition: height ease-in 218ms;
+  overflow: hidden;
 }
 
 #help-box-inner {
@@ -129,10 +122,10 @@ a {
 }
 
 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);
@@ -145,7 +138,8 @@ button {
 </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>
 }
 
@@ -159,7 +153,8 @@ button:hover {
   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>
 }
 
@@ -178,10 +173,23 @@ button:active {
 }
 
 .text-button {
+  /* 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 {
@@ -196,7 +204,8 @@ button:active {
   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>
 }
 
@@ -207,7 +216,8 @@ button:active {
   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>
 }
 
@@ -240,20 +250,20 @@ button:active {
 }
 
 #search-box:focus {
-  border: 1px solid #5d9aff;
+  border: 1px solid rgb(93, 154, 255);
   outline: none;
 }
 
 #search-button {
   border: none;
-  border-top-left-radius: 0;
   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;
   box-shadow: none;
   display: flex;
   height: 30px;
   margin: 0;
-  width: 60px;
   padding: 0;
+  width: 60px;
 }
 
 #search-image {
@@ -299,7 +309,7 @@ button:active {
     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;
@@ -311,7 +321,7 @@ button:active {
     margin-top: 10px;
   }
   .suggestion-header {
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
   .error-code {
     margin-top: 10px;
@@ -325,14 +335,14 @@ html[subframe] body {
 
 #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%;
 }
 
@@ -357,3 +367,28 @@ html[subframe] body {
     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?