[WebUI] Fix rest of CSS style nits in misc. dirs so I can turn on CSS checker.

chrome/browser/resources/bookmark_manager/css/bmm.css

 /* Copyright (c) 2012 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.
  */
-html, body {
+
+html,
+body {
+  cursor: default;
+  height: 100%;
   margin: 0;
+  overflow: hidden;
   width: 100%;
-  height: 100%;
-  cursor: default;
-  overflow: hidden;
 }
 
 list {
   display: block;
   overflow-x: hidden;
   overflow-y: visible; /* let the container do the scrolling */
 }
 
 list > * {
+  -webkit-padding-end: 20px;
+  -webkit-padding-start: 3px;
   color: hsl(0, 0%, 70%);
-  padding: 0 3px;
-  -webkit-padding-end: 20px;
+  display: -webkit-box;
+  padding-bottom: 0;
+  padding-top: 0;
   text-decoration: none;
   white-space: nowrap;
-  display: -webkit-box;
 }
 
 list > * > * {
-  box-sizing: border-box;
   -webkit-padding-start: 20px;
   background: 0 50% no-repeat;
+  box-sizing: border-box;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: pre; /* Don't collapse whitespace */
 }
 
 list > * > .label {
-  -webkit-transition: all .15s;
+  -webkit-transition: all 150ms;
   color: black;
   display: inline-block; /* We need to use inline-block here due to RTL. */
 }
 
 list > * > .url {
-  display: none;
   -webkit-box-flex: 1;
   direction: ltr; /* URLs always read LTR */
+  display: none;
 }
 
 list > :hover > .url,
 list > [selected] > .url {
   display: block;
 }
 
 /* Handle proper padding for URL field in an RTL context, where field order is
  * |div.url||div.label| - so we need padding at the right of URL, not at the
  * left. And since url is always LTR, that is padding at the end, not the start.
  */
 html[dir=rtl] .url {
   -webkit-padding-end: 20px;
   -webkit-padding-start: 0;
 }
 
 html[dir=rtl] list .label {
   background-position: 100% 50%;
 }
 
 list > .folder > .label {
-  background-image: url("../../../../../ui/resources/folder_closed.png");
+  background-image: url('../../../../../ui/resources/folder_closed.png');
 }
 
 /* We need to ensure that even empty labels take up space */
 list > * > .label:empty:after,
 list > * > .url:empty:after {
-  content: " ";
+  content: ' ';

[Evan Stade, 2012/04/03 02:59:48]

why is this ' ' while the other one is ''

   white-space: pre;

[Dan Beam, 2012/04/03 03:15:10]

estade and I think ^ this will likely make a difference in this regard

 }
 
 list > .folder > .url:empty:after {
-  content: "";
+  content: '';
 }
 
 list > * > button {
-  -webkit-transition: opacity .15s;
+  -webkit-transition: opacity 150ms;
   background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center;
   border: 1px solid hsl(214, 91%, 85%);
   border-radius: 3px;
   bottom: 1px;
   display: none;
   overflow: hidden;
   padding: 0;
   position: absolute;
   right: 3px;
   top: 1px;
   width: 15px;
 }
 
 list > [selected]:hover > button,
 list > * > button[menu-shown] {
   border-color: hsl(214, 91%, 65%);
 }
 
 list > :hover > button {
   display: block;
 }
 
 list > * > button:hover,
 list > * > button[menu-shown] {
   display: block;
 }
 
 html[dir=rtl] list > * > button {
+  left: 3px;
   right: auto;
-  left: 3px;
 }
 
 /* Edit mode */
 
 list [editing] .label input,
 list [editing] .url input {
+  -webkit-margin-end: 4px;
+  -webkit-margin-start: -4px;
+  -webkit-padding-end: 3px;
+  -webkit-padding-start: 1px;
   /* Do not inherit the line-height */
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-  margin: 0;
-  -webkit-margin-start: -4px;
-  -webkit-margin-end: 4px;
+  margin-bottom: 0;
+  margin-top: 0;
   max-width: 40%;
-  padding: 0;
-  -webkit-padding-start: 1px;
-  -webkit-padding-end: 3px;
+  padding-bottom: 0;
+  padding-top: 0;
   text-decoration: none;
 }
 
 .tree-item [editing] input {
-  -webkit-margin-start: -3px;
-  -webkit-padding-end: 7px;
   margin: 0;
   padding: 0;
 <if expr="is_macosx">
   padding-top: 1px;
 </if>
 }
 
 <if expr="is_macosx">
 list .label input,
 list .url input {
   outline: none;
 }
 </if>
 
 list > [editing] {
   overflow: visible;
 }
 
 list [editing] .label,
 list [editing] .url,
 list [editing] > * {
+  display: inline;
   overflow: visible;
-  display: inline;
 }
 
 list [editing] .url {
   -webkit-padding-start: 10px;
 }
 
 /* end editing */
 
 html[dir=rtl] list > .folder > .label {
-  background-image: url("../../../../../ui/resources/folder_closed_rtl.png");
+  background-image: url('../../../../../ui/resources/folder_closed_rtl.png');
 }
 
 <if expr="is_macosx">
 list > .folder > .label,
 .tree-label,
 .tree-row[may-have-children] > .tree-label,
 .tree-item[expanded] > .tree-row > .tree-label {
-  background-image: url("../../../../app/theme/bookmark_bar_folder_mac.png");
+  background-image: url('../../../../app/theme/bookmark_bar_folder_mac.png');
 }
 </if>
 
 .main {
+  bottom: 0;
+  display: -webkit-box;
+  left: 0;
   position: absolute;
-  display: -webkit-box;
+  right: 0;
   top: 79px;
-  left: 0;
-  right: 0;
-  bottom: 0;
 }
 
 .main > * {
   height: 100%;
 }
 
 #tree-container {
+  -webkit-padding-end: 5px;
+  -webkit-padding-start: 10px;
+  /* min-width and max-width are used by the split pane. */

[Evan Stade, 2012/04/03 02:59:48]

comment is in the wrong place now

[Dan Beam, 2012/04/03 04:15:06]

Done.

+  box-sizing: border-box;
+  max-width: 50%;
+  min-width: 50px;
+  overflow: auto;
+  padding-bottom: 5px;
+  padding-top: 5px;
   width: 200px;
-  /* min-width and max-width are used by the split pane. */
-  min-width: 50px;
-  max-width: 50%;
-  overflow: auto;
-  box-sizing: border-box;
-  padding: 5px;
-  -webkit-padding-start: 10px;
 }
 
 #tree {
+  display: inline-block;
   min-width: 100%;
   overflow: visible; /* let the container do the scrolling */
-  display: inline-block;
 }
 
 #list {
   -webkit-box-flex: 1;
   box-sizing: border-box;
   padding: 5px;
 }
 
 .splitter {
+  background-color: rgb(235, 239, 249);
+  cursor: e-resize;
   width: 5px;
-  background-color: #ebeff9;
-  cursor: e-resize;
 <if expr="is_macosx">
   cursor: col-resize;
 </if>
 }
 
 .logo {
   -webkit-appearance: none;
+  background: url('../images/bookmarks_section_32.png') no-repeat 50% 50%;
   border: 0;
-  background: url("../images/bookmarks_section_32.png") no-repeat 50% 50%;
+  cursor: pointer;
+  float: left;
+  height: 32px;
+  margin: 10px;
   width: 32px;
-  height: 32px;
-  cursor: pointer;
-  margin: 10px;
-  float: left;
 }
 
 .header form {
   float: left;
-  margin: 14px 2px;
-  margin-bottom: 0;
+  margin: 14px 2px 0 2px;
   width: 171px;
 }
 
 .header {
   min-width: 400px;
 }
 
 html[dir=rtl] .logo,
 html[dir=rtl] .header > div,
 html[dir=rtl] .header form {
   float: right;
 }
 
 input[type='search'] {
   -webkit-margin-end: 2px;
   -webkit-margin-start: 2px;
   width: 100%;
 }
 
 #drop-overlay {
-  position: absolute;
-  display: none;
-  pointer-events: none;
-  border: 1px solid hsl(214, 91%, 85%);;
+  background-color: hsla(214, 91%, 85%, .5);

[Evan Stade, 2012/04/03 02:59:48]

I don't recall any style dictate that provides for the use of hsl/hsla

[Dan Beam, 2012/04/03 04:15:06]

The style guide says:

  Prefer rgb() or rgba() with decimal values instead of hex notation (#rrggbb).

It doesn't say "Don't use hsl/hsla()"

[Evan Stade, 2012/04/03 23:57:27]

right, because I don't think we considered the use of hsl/hsla. I think the
reasoning that lead us to conclude rgb over hex (viz., standardizing on a single
system to make manual value comparisons easier) would also logically imply hsl
should be avoided.

[Dan Beam, 2012/04/04 00:54:49]

we considered the use of hsl/hsla() when ignoring 0%'s elsewhere in the style
guide (http://dev.chromium.org/developers/web-development-style-guide#TOC-CSS),
but if you want there to be One True Way™ we need to work to standardize.

+  border: 1px solid hsl(214, 91%, 85%);
   border-radius: 3px;
   box-sizing: border-box;
-  background-color: hsla(214, 91%, 85%, .5);
+  display: none;
   overflow: hidden;
+  pointer-events: none;
+  position: absolute;
   z-index: -1;
 }
 
 #drop-overlay.line {
+  background-clip: padding-box;
+  background-color: black;
   border: 3px solid black;
+  border-bottom-color: transparent;
+  border-radius: 0;
   border-top-color: transparent;
-  border-bottom-color: transparent;
-  background-color: black;
-  background-clip: padding-box;
   height: 8px;
-  border-radius: 0;
   z-index: 10;
 }
 
 .summary {
-  background-color: #ebeff9;
-  border-top: 1px solid #9cc2ef;
+  background-color: rgb(235, 239, 249);
+  border-top: 1px solid rgb(156, 194, 239);
+  clear: both;
   padding: 5px 10px;
-  clear: both;
   white-space: nowrap;
 }
 
 .summary > * {
+  display: inline-block;
   font-size: 100%;
-  display: inline-block;
   margin: 0;
 }
 
 .summary button {
   -webkit-appearance: none;
+  -webkit-margin-start: 10px;
+  -webkit-padding-end: 11px;
+  -webkit-padding-start: 0;
+  background: -webkit-canvas(drop-down-arrow) 100% 50% no-repeat;

[Evan Stade, 2012/04/03 03:08:02]

left middle

[Dan Beam, 2012/04/03 04:15:06]

Done.

   background: transparent;
   border: 0;
   font: inherit;
-  padding: 0;
-  background: -webkit-canvas(drop-down-arrow) 100% 50% no-repeat;
-  -webkit-padding-end: 11px;
-  -webkit-margin-start: 10px;
+  padding-bottom: 0;
+  padding-top: 0;
 }
 
 html[dir=rtl] .summary button {
   background-position: 0 50%;
 }