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 .scrollable-shadow-top {
+  -webkit-mask-box-image: -webkit-gradient(linear, left top, right top,
+      color-stop(0, rgba(0,0,0,0.1)), color-stop(0.5, rgba(0,0,0,.8)),

[Dan Beam, 2012/11/29 04:59:55]

nit: add spaces between numbers (i.e. rgb(0, 0, 0, 0.1))

[pedro (no code reviews), 2012/11/29 08:02:37]

Done.

+      color-stop(1.0, rgba(0,0,0,0.1)));

[Dan Beam, 2012/11/29 04:59:55]

nit: -webkit-linear-gradient(left, 0% rgba(0, 0, 0, .1),
                                   50% rgba(0, 0, 0, .8),
                                   100% rgba(0, 0, 0, .1));

(or at least I think the syntax can be much less verbose)

[pedro (no code reviews), 2012/11/29 08:02:37]

One thing that makes it verbose is color-stop(...), but AFAIK Chrome requires
this syntax. Am I missing something?

+  background: -webkit-gradient(linear, left top, left bottom,
+      from(rgba(0,0,0,.2)), to(rgba(0,0,0,0)));

[Dan Beam, 2012/11/29 04:59:55]

nit: -webkit-linear-gradient(left, rgba(0, 0, 0, .2), black);

[pedro (no code reviews), 2012/11/29 08:02:37]

I guess you meant: -webkit-linear-gradient(top, rgba(0, 0, 0, .2), black);

But it turns out we need the black color to be specified as rgba because it will
be blended with the mask above. If we use black (rgb), the desired effect won't
be achieved.

[Dan Beam, 2012/11/30 23:41:45]

black == rgba(0,0,0,0) - http://www.w3.org/TR/css3-color/#transparent-def

[pedro (no code reviews), 2012/12/01 00:02:29]

The spec says the color "transparent", AKA "transparent black", is defined by
rgba(0, 0, 0, 0).

But it does not say about the color "black", which I'm pretty sure it should be
100% opaque and not 100% transparent (otherwise nobody would be able to see it).

Anyway, when using black the desired effect doesn't work here. We need both
background and mask-box-image colors to have an alpha transparency channel.

[Dan Beam, 2012/12/01 00:20:04]

sorry, meant "transparent"

+  height: 6px;
+  left: 0;

[Evan Stade, 2012/11/29 02:35:47]

does this work in rtl

[pedro (no code reviews), 2012/11/29 08:02:37]

Yes it does once the shadow is symmetrical.

+  margin-right: 0;

[Dan Beam, 2012/11/29 04:59:55]

nit: RTL on this as well?

[pedro (no code reviews), 2012/11/29 08:02:37]

It does too.

+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+
+.scrollable .scrollable-shadow-top:after {

[Dan Beam, 2012/11/29 04:59:55]

nit: ::after (:: is for pseudo-elements, : is for pseudo-selectors, anything
that needs content or can be styled as a separate element should be using ::)

[pedro (no code reviews), 2012/11/29 08:02:37]

Thanks for the explanation.

+  border-top: 1px solid rgba(0, 0, 0, 0.3);
+  content: '';
+  display: block;
+  height: 0;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.scrollable .scrollable-shadow-bottom {

[Dan Beam, 2012/11/29 04:59:55]

nit: why do you need the .scrollable- prefix on these classes?

[pedro (no code reviews), 2012/11/29 08:02:37]

The prefix is not actually necessary, so I removed it.

+  -webkit-mask-box-image: -webkit-gradient(linear, left top, right top,
+      color-stop(0, rgba(0,0,0,0.1)), color-stop(0.5, rgba(0,0,0,.8)),

[Evan Stade, 2012/11/29 02:35:47]

spaces after commas, everywhere in this file

[pedro (no code reviews), 2012/11/29 08:02:37]

Done.

+      color-stop(1.0, rgba(0,0,0,0.1)));
+  background: -webkit-gradient(linear, left bottom, left top,
+      from(rgba(0,0,0,.2)), to(rgba(0,0,0,0)));
+  bottom: 0;
+  height: 4px;
+  left: 0;
+  margin-right: 0;
+  opacity: 1;
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+}
+
+.scrollable .scrollable-shadow-bottom:after {
+  border-bottom: 1px solid rgba(0, 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 {
+  background-clip: padding-box;
+  background-color: white;
+  border-left: 5px solid transparent;

[Dan Beam, 2012/11/29 04:59:55]

nit: I think scrollbars flip to the left in RTL these days... so this may not
work in RTL directionality -- have you tried launching chrome in real RTL?

[pedro (no code reviews), 2012/11/29 08:02:37]

Good catch. I've tried and the scrollbar was misaligned. I'm using
-webkit-border-start and end now.

+  border-right: 0 solid transparent;
+}
+
+::-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,0.10),
+      inset 0 -1px 0  rgba(0,0,0,0.07);

[Dan Beam, 2012/11/29 04:59:55]

nit: I'd line these up

  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10),
                      inset 0 -1px 0 rgba(0, 0, 0, 0.07);

and ditch the extra space on the second line in front of rgba()

[pedro (no code reviews), 2012/11/29 08:02:37]

Done.

+  background-clip: padding-box;
+  background-color: rgba(0,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,0.25);
+  background-color: rgba(0,0,0,0.4);
+}
+
+::-webkit-scrollbar-thumb:active {
+  -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
+  background-color: rgba(0,0,0,0.5);
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  border-bottom: 0 solid transparent;
+  border-left: 5px solid transparent;
+  border-right: 0 solid transparent;
+  border-top: 0 solid transparent;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  border-bottom: 0 solid transparent;
+  border-left: 0 solid transparent;
+  border-right: 0 solid transparent;
+  border-top: 5px solid transparent;

[Evan Stade, 2012/11/29 02:35:47]

can't this be condensed a bit? something like

border: 0 solid transparent;
border-top-width: 5px;

[Dan Beam, 2012/11/29 04:59:55]

+1

[pedro (no code reviews), 2012/11/29 08:02:37]

Done.

[pedro (no code reviews), 2012/11/29 08:02:37]

Done.

+}
+
+::-webkit-scrollbar-track:hover {
+  -webkit-box-shadow: inset 1px 0 0  rgba(0,0,0,0.10);
+  background-color: rgba(0,0,0,0.05);
+}
+
+::-webkit-scrollbar-track:active {
+  -webkit-box-shadow: inset 1px 0 0  rgba(0,0,0,0.14),
+      inset -1px -1px 0  rgba(0,0,0,0.07);
+  background-color: rgba(0,0,0,0.05);
+}