[Clean up] Fix style guide nits in chrome/browser/resources/ntp4.

R=estade@chromium.org
TEST=No regressions, CSS follows style guide / passes presubmit.
BUG=None


Review URL: http://codereview.chromium.org/9325059

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@120713 0039d316-1c4b-4281-b951-d872f2087c98

7 files changed, 66 insertions, 69 deletions

diff --git a/chrome/browser/resources/ntp4/apps_page.css b/chrome/browser/resources/ntp4/apps_page.css
index 7d7239d..c2f51c6 100644
--- a/chrome/browser/resources/ntp4/apps_page.css
+++ b/chrome/browser/resources/ntp4/apps_page.css
@@ -35,10 +35,10 @@
 }
 
 .app-img-container {
+  /* -webkit-mask-image set by JavaScript to the image source. */
+  -webkit-mask-size: 100% 100%;
   margin-left: auto;
   margin-right: auto;
-  /* -webkit-mask-image set by JavaScript to the image source */
-  -webkit-mask-size: 100% 100%;
 }
 
 .app-img-container > * {
@@ -47,6 +47,8 @@
 }
 
 .app-icon-div {
+  -webkit-box-align: center;
+  -webkit-box-pack: center;
   background-color: white;
   border: 1px solid #d5d5d5;
   border-radius: 5px;
@@ -56,8 +58,6 @@
   position: relative;
   vertical-align: middle;
   z-index: 0;
-  -webkit-box-align: center;
-  -webkit-box-pack: center;
 }
 
 .app-icon-div .app-img-container {
@@ -92,11 +92,11 @@
 /* Notifications */
 
 .app-notification {
+  -webkit-transition: color 150ms linear;
   color: #999;
   display: block;
   font-size: 11px;
   white-space: nowrap;
-  -webkit-transition: color 150ms linear;
 }
 
 .app-notification:hover {
@@ -148,12 +148,13 @@ html[dir='rtl'] .apps-promo-extras {
 }
 
 .apps-promo-heading {
+  -webkit-margin-start: 3px;
   font-weight: bold;
   margin-bottom: 5px;
-  -webkit-margin-start: 3px;
 }
 
 .g-button-basic {
+  -webkit-border-image: url('images/app_promo_button.png') 6 10 12 6;
   border-width: 6px 10px 12px 6px;
   color: #fff !important;
   display: inline-block;
@@ -163,7 +164,6 @@ html[dir='rtl'] .apps-promo-extras {
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
-  -webkit-border-image: url('images/app_promo_button.png') 6 10 12 6;
 }
 
 .app .invisible {
diff --git a/chrome/browser/resources/ntp4/most_visited_page.css b/chrome/browser/resources/ntp4/most_visited_page.css
index 271aa95..a8c39f9 100644
--- a/chrome/browser/resources/ntp4/most_visited_page.css
+++ b/chrome/browser/resources/ntp4/most_visited_page.css
@@ -1,7 +1,6 @@
 /* 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.
- */
+ * found in the LICENSE file. */
 
 .most-visited {
   position: absolute;
@@ -9,10 +8,10 @@
 }
 
 .most-visited {
+  -webkit-box-orient: vertical;
   display: -webkit-box;
   position: absolute;
   text-decoration: none;
-  -webkit-box-orient: vertical;
 }
 
 .most-visited:focus {
@@ -39,12 +38,12 @@
 }
 
 .most-visited .close-button {
+  -webkit-transition: opacity 150ms;
   opacity: 0;
   position: absolute;
   right: 0;
   top: 0;
   z-index: 5;
-  -webkit-transition: opacity 150ms;
 }
 
 html[dir=rtl] .most-visited .close-button {
@@ -53,8 +52,8 @@ html[dir=rtl] .most-visited .close-button {
 }
 
 .most-visited:hover .close-button {
-  opacity: 1;
   -webkit-transition-delay: 500ms;
+  opacity: 1;
 }
 
 .most-visited .close-button:hover {
@@ -100,6 +99,7 @@ html[dir='rtl'] .most-visited .favicon {
 }
 
 .thumbnail {
+  -webkit-transition: opacity 150ms;
   background: no-repeat;
   /* This shows for missing thumbnails. */
   background-color: #eee;
@@ -110,7 +110,6 @@ html[dir='rtl'] .most-visited .favicon {
    * to scale a thumbnail larger than this size. */
   max-height: 132px;
   max-width: 212px;
-  -webkit-transition: opacity 150ms;
 }
 
 .filler .thumbnail {
@@ -121,10 +120,10 @@ html[dir='rtl'] .most-visited .favicon {
 }
 
 .thumbnail-shield {
-  border-radius: 3px;
   background: -webkit-linear-gradient(rgba(255, 255, 255, 0),
                                       rgba(255, 255, 255, 0) 50%,
                                       rgba(255, 255, 255, 0.9));
+  border-radius: 3px;
 }
 
 /* TODO(dbeam): Remove this when printing of -webkit-linear-gradient() works. */
@@ -160,13 +159,13 @@ html[dir='rtl'] .most-visited .favicon {
 }
 
 .thumbnail-wrapper {
+  -webkit-box-flex: 1;
+  -webkit-transition: background-color 150ms;
   border: 1px solid transparent;
   border-radius: 3px;
   display: block;
   position: relative;
   z-index: 5;
-  -webkit-box-flex: 1;
-  -webkit-transition: background-color 150ms;
 }
 
 .filler .thumbnail-wrapper {
diff --git a/chrome/browser/resources/ntp4/nav_dot.css b/chrome/browser/resources/ntp4/nav_dot.css
index 0db53c4..81eb344 100644
--- a/chrome/browser/resources/ntp4/nav_dot.css
+++ b/chrome/browser/resources/ntp4/nav_dot.css
@@ -1,21 +1,20 @@
 /* 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.
- */
+ * found in the LICENSE file. */
 
 /* TODO(estade): handle overflow better? I tried overflow-x: hidden and
    overflow-y: visible (for the new dot animation), but this makes a scroll
    bar appear */
 #dot-list {
+  /* Expand to take up all available horizontal space.  */
+  -webkit-box-flex: 1;
+  /* Center child dots. */
+  -webkit-box-pack: center;
   display: -webkit-box;
   height: 100%;
   list-style-type: none;
   margin: 0;
   padding: 0;
-  /* Expand to take up all available horizontal space.  */
-  -webkit-box-flex: 1;
-  /* Center child dots. */
-  -webkit-box-pack: center;
 }
 
 html.starting-up #dot-list {
@@ -23,15 +22,15 @@ html.starting-up #dot-list {
 }
 
 .dot {
+  -webkit-box-flex: 1;
+  -webkit-margin-end: 10px;
+  -webkit-padding-start: 2px;
+  -webkit-transition: max-width 250ms, -webkit-margin-end 250ms;
   box-sizing: border-box;
   cursor: pointer;
   /* max-width: Set in new_tab.js. See measureNavDots() */
   outline: none;
   text-align: left;
-  -webkit-box-flex: 1;
-  -webkit-margin-end: 10px;
-  -webkit-padding-start: 2px;
-  -webkit-transition: max-width 250ms, -webkit-margin-end 250ms;
 }
 
 .dot:last-child {
@@ -39,18 +38,20 @@ html.starting-up #dot-list {
 }
 
 .dot.small {
-  max-width: 0;
   -webkit-margin-end: 0;
+  max-width: 0;
 }
 
 .dot .selection-bar {
+  -webkit-transition: border-color 200ms;
   border-bottom: 5px solid;
   border-color: rgba(0, 0, 0, 0.1);
   height: 10px;
-  -webkit-transition: border-color 200ms;
 }
 
 .dot input {
+  -webkit-appearance: caret;
+  -webkit-transition: color 200ms;
   background-color: transparent;
   cursor: inherit;
   /* TODO(estade): the font needs tweaking. */
@@ -58,8 +59,6 @@ html.starting-up #dot-list {
   font-weight: bold;
   padding-top: 0;
   width: 90%;
-  -webkit-appearance: caret;
-  -webkit-transition: color 200ms;
 }
 
 .dot input:focus {
diff --git a/chrome/browser/resources/ntp4/new_tab.css b/chrome/browser/resources/ntp4/new_tab.css
index c1f53e6..f8f4b56 100644
--- a/chrome/browser/resources/ntp4/new_tab.css
+++ b/chrome/browser/resources/ntp4/new_tab.css
@@ -1,7 +1,6 @@
 /* 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.
- */
+ * found in the LICENSE file. */
 
 html {
   font-family: segoe ui, arial, helvetica, sans-serif;
@@ -105,8 +104,8 @@ body {
 
 #page-list {
   /* fill the apps-frame */
-  height: 100%;
   display: -webkit-box;
+  height: 100%;
 }
 
 #attribution {
@@ -247,8 +246,8 @@ html[dir='rtl'] .login-status-icon {
   -webkit-transition-delay: 0, 200ms;
   color: #222;
   height: 100%;
-  position: absolute;
   opacity: 0;
+  position: absolute;
   right: 0;
   top: 50px;
   width: auto;
@@ -313,12 +312,12 @@ html[dir='rtl'] #footer.showing-trash-mode #trash.drag-target .lid {
   border: none;
   bottom: 0;
   font-size: 40px;
-  padding: 0;
-  position: absolute;
   margin: 0;
   max-width: 150px;
   min-width: 90px;
   outline: none;
+  padding: 0;
+  position: absolute;
   top: 0;
   z-index: 5;
 }
@@ -339,8 +338,8 @@ html[dir='rtl'] #footer.showing-trash-mode #trash.drag-target .lid {
   -webkit-padding-start: 16px;
   background: url('chrome://theme/IDR_WEBSTORE_ICON_24') right 50% no-repeat;
   display: inline-block;
-  font-weight: bold;
   font-size: 9pt;
+  font-weight: bold;
   line-height: 49px;
 }
 
diff --git a/chrome/browser/resources/ntp4/new_tab_theme.css b/chrome/browser/resources/ntp4/new_tab_theme.css
index d03fb64..cb0ab0f 100644
--- a/chrome/browser/resources/ntp4/new_tab_theme.css
+++ b/chrome/browser/resources/ntp4/new_tab_theme.css
@@ -1,7 +1,6 @@
 /* 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.
- */
+ * found in the LICENSE file. */
 
 html,
 #most-visited-settings {
diff --git a/chrome/browser/resources/ntp4/recently_closed.css b/chrome/browser/resources/ntp4/recently_closed.css
index ae9fe98..522ea46 100644
--- a/chrome/browser/resources/ntp4/recently_closed.css
+++ b/chrome/browser/resources/ntp4/recently_closed.css
@@ -13,19 +13,19 @@
   color: #7F7F7F;
   cursor: pointer;
   display: block;
-  margin: 0;
   font-size: 9pt;
   font-weight: bold;
   height: 100%;
+  margin: 0;
   /* The padding increases the clickable area. */
   padding-bottom: 0;
   padding-top: 0;
 }
 
 .enable-cws-experiment #recently-closed-menu-button {
-  position: relative;
   -webkit-margin-end: 0;
   -webkit-padding-end: 16px;
+  position: relative;
 }
 
 #recently-closed-menu-button:hover:not([menu-shown]) {
@@ -51,8 +51,8 @@
 }
 
 #footer.showing-trash-mode #recently-closed-menu-button {
-  opacity: 0;
   -webkit-transition-delay: 0;
+  opacity: 0;
 }
 
 #recently-closed-menu-button > * {
@@ -66,6 +66,10 @@
 }
 
 .recent-menu-item {
+  -webkit-margin-end: 8px;
+  -webkit-margin-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-start: 22px;
   background: no-repeat 0 50%;
   background-color: transparent !important;
   background-size: 16px 16px;
@@ -73,14 +77,12 @@
   display: block;
   font-size: 100%;
   line-height: 20px;
-  margin: 8px;
+  margin-bottom: 8px;
+  margin-top: 8px;
   max-width: 450px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  -webkit-margin-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-start: 22px;
 }
 
 .recent-menu-item:not(:hover) {
@@ -111,12 +113,12 @@ html[dir='rtl'] .recent-menu-item {
 }
 
 .disclosure-triangle {
+  -webkit-margin-start: 2px;
+  -webkit-mask-image: url('images/disclosure_triangle_mask.png');
   background-color: #7F7F7F;
   display: inline-block;
   height: 9px;
   width: 9px;
-  -webkit-margin-start: 2px;
-  -webkit-mask-image: url('images/disclosure_triangle_mask.png');
 }
 
 #vertical-separator {
diff --git a/chrome/browser/resources/ntp4/tile_page.css b/chrome/browser/resources/ntp4/tile_page.css
index b08f21b..bddfc21 100644
--- a/chrome/browser/resources/ntp4/tile_page.css
+++ b/chrome/browser/resources/ntp4/tile_page.css
@@ -1,33 +1,29 @@
-/* Copyright (c) 2011 The Chromium Authors. All rights reserved.
+/* 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.
- */
+ * found in the LICENSE file. */
 
 .tile-page {
+  -webkit-box-orient: vertical;
   display: -webkit-box;
   height: 100%;
   position: relative;
   width: 100%;
-  -webkit-box-orient: vertical;
 }
 
 .tile-page-scrollbar {
+  -webkit-box-sizing: border-box;
   margin: 0 4px;
   pointer-events: none;
   position: absolute;
   right: 0;
   width: 5px;
   z-index: 5;
-  -webkit-box-sizing: border-box;
 }
 
 .tile-page-content {
-  overflow-y: scroll;
-  /* This value is mirrored in TilePage.updateTopMargin_ */
-  padding-top: 60px;
-  position: relative;
-  text-align: center;
-  width: 100%;
+  -webkit-box-flex: 1;
+  /* Don't apply clip mask to padding. */
+  -webkit-mask-clip: content-box;
   /* TODO(estade): this mask is disabled for technical reasons. It negatively
    * impacts performance of page switching, also it causes problems with Mac
    * text: http://crbug.com/86955
@@ -36,12 +32,15 @@
   /* The following four properties are necessary so that the mask won't clip
    * the scrollbar. */
   box-sizing: border-box;
+  overflow-y: scroll;
   /* Scrollbar width(13px) + balance right padding.  */
   padding-left: 93px;
   padding-right: 80px;
-  -webkit-box-flex: 1;
-  /* Don't apply clip mask to padding. */
-  -webkit-mask-clip: content-box;
+  /* This value is mirrored in TilePage.updateTopMargin_ */
+  padding-top: 60px;
+  position: relative;
+  text-align: center;
+  width: 100%;
 }
 
 .tile-grid {
@@ -50,12 +49,12 @@
 }
 
 .tile {
-  display: inline-block;
-  position: absolute;
   -webkit-print-color-adjust: exact;
   /* Don't offer the context menu on long-press. */
   -webkit-touch-callout: none;
   -webkit-user-drag: element;
+  display: inline-block;
+  position: absolute;
 }
 
 /* I don't know why this is necessary. -webkit-user-drag: element on .tile
@@ -76,10 +75,10 @@
 }
 
 .tile.drag-representation {
+  -webkit-transition: opacity 200ms;
   pointer-events: none;
   position: fixed;
   z-index: 3;
-  -webkit-transition: opacity 200ms;
 }
 
 .tile.drag-representation.placing > * {
@@ -134,27 +133,27 @@
   }
 
   60% {
-    opacity: 1;
     -webkit-animation-timing-function: ease-in;
     -webkit-transform: scale(1.3, 0.02);
+    opacity: 1;
   }
 
   90% {
-    opacity: 0.7;
     -webkit-animation-timing-function: default;
     -webkit-transform: scale(0.3, 0.02);
+    opacity: 0.7;
   }
 
   100% {
-    opacity: 0;
     -webkit-animation-timing-function: linear;
     -webkit-transform: scale(0.3, 0.02);
+    opacity: 0;
   }
 }
 
 .tile > .removing-tile-contents {
-  pointer-events: none;
   -webkit-animation: blipout 300ms;
+  pointer-events: none;
 }
 
 .tile-page:not(.selected-card) * {