NTP5: Fine tuning of Apps implementation.

chrome/browser/resources/ntp_search/tile_page.css

Index: chrome/browser/resources/ntp_search/tile_page.css
diff --git a/chrome/browser/resources/ntp_search/tile_page.css b/chrome/browser/resources/ntp_search/tile_page.css
index 0492528ce383662d14b1bb74c7bec4b938c9c043..8f79546fde4e1b6c3789114ce75afa6078febc34 100644
--- a/chrome/browser/resources/ntp_search/tile_page.css
+++ b/chrome/browser/resources/ntp_search/tile_page.css
@@ -11,12 +11,17 @@
   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;
@@ -84,18 +89,6 @@
 }
 
 /* -----------------------------------------------------------------------------
-   Tile Row Animation
------------------------------------------------------------------------------ */
-
-.hide-row {
-  opacity: 0;
-}
-
-.tile-grid .hide-row .tile-cell {
-  opacity: 1;
-}
-
-/* -----------------------------------------------------------------------------
    Tile Position Animation
 ----------------------------------------------------------------------------- */
 
@@ -120,3 +113,148 @@
 .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);
+}