NTP5: Fine tuning of Apps implementation.

chrome/browser/resources/ntp_search/tile_page.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. */
 
 /* -----------------------------------------------------------------------------
   Tile Page
 ----------------------------------------------------------------------------- */
 
 .tile-page {
   overflow: hidden;
   position: relative;
 }
 
-.tile-page-content {
+.tile-page-frame {
   margin: 0 auto;
   overflow: hidden;
+  position: relative;
   width: 748px;
 }
 
+.tile-page-content {
+  overflow: hidden;
+}
+
 .tile-grid {
   display: block;
   margin: 0 auto;
   width: 732px;
 }
 
 .tile-grid-content {
   -webkit-transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform 200ms;
 }
@@ skipping 47 matching lines @@
 .hide-col-6 .tile-cell:nth-child(7),
 .hide-col-7 .tile-cell:nth-child(8),
 .hide-col-8 .tile-cell:nth-child(9),
 .hide-col-9 .tile-cell:nth-child(10) {
   -webkit-margin-end: -10px;
   opacity: 0;
   width: 10px !important;
 }
 
 /* -----------------------------------------------------------------------------
-   Tile Row Animation
------------------------------------------------------------------------------ */
-
-.hide-row {
-  opacity: 0;
-}
-
-.tile-grid .hide-row .tile-cell {
-  opacity: 1;
-}
-
-/* -----------------------------------------------------------------------------
    Tile Position Animation
 ----------------------------------------------------------------------------- */
 
 .animate-tile-repositioning .tile {
   -webkit-transition-duration: 200ms;
   -webkit-transition-property: -webkit-transform, left, opacity, top;
   position: absolute;
 }
 
 .animate-tile-repositioning .tile:not(.target-tile) {
   -webkit-transition-duration: 400ms;
 }
 
 .animate-tile-repositioning.undo-removal .target-tile {
   -webkit-transition-delay: 200ms;
 }
 
 .animate-tile-repositioning .animate-hide-tile {
   opacity: 0;
 }
 
 .animate-tile-repositioning .animate-hide-tile.target-tile {
   -webkit-transform: scale(0.5);
 }
+
+/* -----------------------------------------------------------------------------
+  Scroll Bars
+----------------------------------------------------------------------------- */
+
+.tile-page-content {
+  /* TODO(pedrosimonetti): Remove this when fixing the Apps page height. */
+  height: 92px;
+}
+
+.scrollable {
+  overflow-y: auto;
+}
+
+.scrollable .shadow-top {
+  -webkit-mask-box-image: -webkit-linear-gradient(left,
+                                                  rgba(0, 0, 0, .1),

[Evan Stade, 2012/11/30 20:52:46]

prefer 0.X for decimals

[Dan Beam, 2012/11/30 21:58:03]

(sorry if my example previously said otherwise)

[pedro (no code reviews), 2012/11/30 22:01:18]

Done.

[pedro (no code reviews), 2012/11/30 22:59:51]

No problem.

+                                                  rgba(0, 0, 0, .8),
+                                                  rgba(0, 0, 0, .1));
+  background: -webkit-linear-gradient(top,
+                                      rgba(0, 0, 0, .2),
+                                      rgba(0, 0, 0, 0));
+  height: 6px;
+  left: 0;
+  margin-right: 0;

[Dan Beam, 2012/11/30 21:58:03]

-webkit-margin-end: 0; assuming you want this to flip in RTL

[pedro (no code reviews), 2012/11/30 22:59:51]

Done.

+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+
+.scrollable .shadow-top::after {
+  border-top: 1px solid rgba(0, 0, 0, .3);
+  content: '';
+  display: block;
+  height: 0;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.scrollable .shadow-bottom {
+  -webkit-mask-box-image: -webkit-linear-gradient(left,
+                                                  rgba(0, 0, 0, .1),
+                                                  rgba(0, 0, 0, .8),
+                                                  rgba(0, 0, 0, .1));
+  background: -webkit-linear-gradient(bottom,
+                                      rgba(0, 0, 0, .2),
+                                      rgba(0, 0, 0, 0));
+  bottom: 0;
+  height: 4px;
+  left: 0;
+  margin-right: 0;

[Dan Beam, 2012/11/30 21:58:03]

-webkit-margin-end: 0; assuming you want this to flip in RTL

[pedro (no code reviews), 2012/11/30 22:59:51]

Done.

+  opacity: 1;
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+}
+
+.scrollable .shadow-bottom::after {
+  border-bottom: 1px solid rgba(0, 0, 0, .3);
+  bottom: 0;
+  content: '';
+  display: block;
+  height: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+
+::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
+}
+
+::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+
+::-webkit-scrollbar-button:start:decrement,
+::-webkit-scrollbar-button:end:increment {
+  display: block;
+}
+
+::-webkit-scrollbar-button:vertical:start:increment,
+::-webkit-scrollbar-button:vertical:end:decrement {
+  display: none;
+}
+
+::-webkit-scrollbar-track:vertical {
+  -webkit-border-end: 0 solid transparent;
+  -webkit-border-start: 5px solid transparent;
+  background-clip: padding-box;
+  background-color: white;
+}
+
+::-webkit-scrollbar-track:horizontal {
+  background-clip: padding-box;
+  background-color: white;
+  border-bottom: 0 solid transparent;
+  border-top: 5px solid transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .10),
+                      inset 0 -1px 0 rgba(0, 0, 0, .07);
+  background-clip: padding-box;
+  background-color: rgba(0, 0, 0, .2);
+  min-height: 28px;
+  padding-top: 100px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
+  background-color: rgba(0, 0, 0, .4);
+}
+
+::-webkit-scrollbar-thumb:active {
+  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
+  background-color: rgba(0, 0, 0, .5);
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  -webkit-border-end: 0 solid transparent;

[Dan Beam, 2012/11/30 21:58:03]

nit: I'd change these all to border widths, i.e.

  -webkit-border-end-width: 0;

or setting the whole border to none, i.e.:

  -webkit-border-end: none;

[pedro (no code reviews), 2012/11/30 22:59:51]

Done.

+  -webkit-border-start: 5px solid transparent;
+  border-bottom: 0 solid transparent;
+  border-top: 0 solid transparent;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  border: 0 solid transparent;
+  border-top-width: 5px;
+}
+
+::-webkit-scrollbar-track:hover {
+  -webkit-box-shadow: inset 1px 0 0  rgba(0, 0, 0, .10);

[Dan Beam, 2012/11/30 21:58:03]

nit: \s\s -> \s

[pedro (no code reviews), 2012/11/30 22:59:51]

Done.

+  background-color: rgba(0, 0, 0, .05);
+}
+
+::-webkit-scrollbar-track:active {
+  -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14),
+                      inset -1px -1px 0 rgba(0, 0, 0, .07);
+  background-color: rgba(0, 0, 0, .05);
+}