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..47785442a1516e12a6400356da77248d3b4591c6 100644
--- a/chrome/renderer/resources/neterror.css
+++ b/chrome/renderer/resources/neterror.css
@@ -45,18 +45,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;
 }
 
 h2 {
@@ -67,7 +67,7 @@ h2 {
 }
 
 a {
-  color: #15c;
+  color: rgb(17, 85, 204);
   text-decoration: none;
 }
 
@@ -96,8 +96,8 @@ a {
 }
 
 #help-box-outer {
-  overflow: hidden;
   -webkit-transition: height ease-in 218ms;
+  overflow: hidden;
 }
 
 #help-box-inner {
@@ -129,10 +129,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 +145,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 +160,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 +180,21 @@ button:active {
 }
 
 .text-button {
+  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 {
@@ -196,7 +209,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 +221,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 +255,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;
+  border-top-left-radius: 0;
   box-shadow: none;
   display: flex;
   height: 30px;
   margin: 0;
-  width: 60px;
   padding: 0;
+  width: 60px;
 }
 
 #search-image {
@@ -299,7 +314,7 @@ button:active {
     margin: 15px;
   }
   h1 {
-    margin: 10px 0px 15px 0px;
+    margin: 10px 0 15px 0;
   }
   #content-top {
     margin: 15px;
@@ -311,7 +326,7 @@ button:active {
     margin-top: 10px;
   }
   .suggestion-header {
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
   .error-code {
     margin-top: 10px;
@@ -325,14 +340,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 +372,31 @@ html[subframe] body {
     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%;
+}