Bug 1036284 - Update styling of newtab tiles to enhanced tiles spec [r=adw]

Set appropriate sizes, coloring, opacity, etc.

browser/base/content/newtab/newTab.css

@@ -83,7 +83,7 @@ input[type=button] {
 }
 
 .newtab-side-margin {
-  min-width: 16px;
+  min-width: 10px;
   -moz-box-flex: 1;
 }
 
@@ -108,9 +108,9 @@ input[type=button] {
 /* CELLS */
 .newtab-cell {
   display: -moz-box;
-  height: 150px;
-  margin: 16px;
-  width: 243px;
+  height: 180px;
+  margin: 16px 10px;
+  width: 290px;
 }
 
 /* SITES */
@@ -141,28 +141,18 @@ input[type=button] {
   bottom: 0;
 }
 
-.newtab-thumbnail {
-  opacity: .8;
-  transition: opacity 100ms ease-out;
-}
-
-.newtab-thumbnail[dragged],
-.newtab-link:-moz-focusring > .newtab-thumbnail,
-.newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-link > .newtab-thumbnail {
-  opacity: 1;
-}
-
 /* TITLES */
 .newtab-title {
   bottom: -21px;
-  position: absolute;
+  font-size: 13px;
   left: 0;
-  line-height: 21px;
-  right: 0;
-  text-align: start;
-  white-space: nowrap;
   overflow: hidden;
+  padding-top: 14px;
+  position: absolute;
+  right: 0;
+  text-align: center;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* CONTROLS */
@@ -286,7 +276,7 @@ input[type=button] {
 }
 
 #newtab-search-text {
-  height: 32px;
+  height: 38px;
   -moz-box-flex: 1;
 
   padding: 0 8px;
@@ -310,7 +300,8 @@ input[type=button] {
 }
 
 #newtab-search-submit {
-  height: 32px;
+  height: 38px;
+  font-size: 13px !important;
 
   -moz-margin-start: -1px;
   background: linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box;

browser/base/content/newtab/sites.js

@@ -108,10 +108,10 @@ Site.prototype = {
     let control = this._querySelector(".newtab-control-pin");
 
     if (aPinned) {
-      control.setAttribute("pinned", true);
+      this.node.setAttribute("pinned", true);
       control.setAttribute("title", newTabString("unpin"));
     } else {
-      control.removeAttribute("pinned");
+      this.node.removeAttribute("pinned");
       control.setAttribute("title", newTabString("pin"));
     }
   },

browser/base/content/test/newtab/head.js

@@ -32,7 +32,7 @@ let gDirectorySource = 'data:application/json,{"test":1}';
 let requiredInnerHeight =
   40 + 32 + // undo container + bottom margin
   44 + 32 + // search bar + bottom margin
-  (3 * (150 + 32)) + // 3 rows * (tile height + title and bottom margin)
+  (3 * (180 + 32)) + // 3 rows * (tile height + title and bottom margin)
   100; // breathing room
 
 let oldInnerHeight = null;
@@ -349,8 +349,7 @@ function checkGrid(aSitesPattern, aSites) {
       return "";
 
     let pinned = aSite.isPinned();
-    let pinButton = aSite.node.querySelector(".newtab-control-pin");
-    let hasPinnedAttr = pinButton.hasAttribute("pinned");
+    let hasPinnedAttr = aSite.node.hasAttribute("pinned");
 
     if (pinned != hasPinnedAttr)
       ok(false, "invalid state (site.isPinned() != site[pinned])");

browser/themes/linux/jar.mn

@@ -114,6 +114,7 @@ browser.jar:
 * skin/classic/browser/newtab/newTab.css              (newtab/newTab.css)
   skin/classic/browser/newtab/controls.png            (../shared/newtab/controls.png)
   skin/classic/browser/newtab/controls@2x.png         (../shared/newtab/controls@2x.png)
+  skin/classic/browser/newtab/texture.png             (../shared/newtab/texture.png)
   skin/classic/browser/places/bookmarksMenu.png       (places/bookmarksMenu.png)
   skin/classic/browser/places/bookmarksToolbar.png    (places/bookmarksToolbar.png)
   skin/classic/browser/places/bookmarksToolbar-menuPanel.png (places/bookmarksToolbar-menuPanel.png)

browser/themes/osx/jar.mn

@@ -182,6 +182,7 @@ browser.jar:
 * skin/classic/browser/newtab/newTab.css                    (newtab/newTab.css)
   skin/classic/browser/newtab/controls.png                  (../shared/newtab/controls.png)
   skin/classic/browser/newtab/controls@2x.png               (../shared/newtab/controls@2x.png)
+  skin/classic/browser/newtab/texture.png                   (../shared/newtab/texture.png)
   skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/monitor.png
   skin/classic/browser/monitor_16-10.png

browser/themes/shared/newtab/newTab.inc.css

@@ -12,7 +12,7 @@
 #newtab-scrollbox:not([page-disabled]),
 #newtab-scrollbox:not([page-disabled]) #newtab-margin-bottom {
   color: rgb(0,0,0);
-  background-color: hsl(0,0%,95%);
+  background-image: url(chrome://browser/skin/newtab/texture.png);
 }
 
 /* UNDO */
@@ -81,28 +81,27 @@
 /* CELLS */
 .newtab-cell {
   background-color: rgba(255,255,255,.2);
-  border: 1px solid #dee0e1;
-  transition: border-color 100ms ease-out;
+  border-radius: 12px;
 }
 
 .newtab-cell:empty {
-  border: 1px dashed;
-  border-color: rgba(8,22,37,.15) rgba(8,22,37,.17) rgba(8,22,37,.19);
-}
-
-.newtab-cell:hover:not(:empty):not([dragged]):not([ignorehover]) {
-  border-color: rgba(8,22,37,.25) rgba(8,22,37,.27) rgba(8,22,37,.3);
+  outline: 2px dashed #c1c1c1;
+  -moz-outline-radius: 12px;
 }
 
 /* SITES */
 .newtab-site {
+  border-radius: inherit;
+  box-shadow: 0 1px 3px #c1c1c1;
   text-decoration: none;
   transition-property: top, left, opacity, box-shadow, background-color;
 }
 
 .newtab-cell:not([ignorehover]) > .newtab-site:hover,
 .newtab-site[dragged] {
-  box-shadow: 0 0 10px rgba(8,22,37,.3);
+  border: 2px solid #4a90e2;
+  box-shadow: 0 0 10px 3px #4cb1ff;
+  margin: -2px;
 }
 
 .newtab-site[dragged] {
@@ -110,12 +109,19 @@
   background-color: rgb(242,242,242);
 }
 
+/* LINKS */
+.newtab-link {
+  border-radius: 10px;
+}
+
 /* THUMBNAILS */
 .newtab-thumbnail {
   background-origin: padding-box;
   background-clip: padding-box;
   background-repeat: no-repeat;
   background-size: cover;
+  border-radius: inherit;
+  transition: opacity 100ms ease-out;
 }
 
 .newtab-site[type=affiliate] .newtab-thumbnail,
@@ -125,10 +131,32 @@
   background-size: auto;
 }
 
+/* Use a pseudo-element to overlay a gradient on the thumbnail */
+.newtab-site[type=history]:not(:hover) .newtab-thumbnail:first-child::after {
+  background-image: linear-gradient(0deg, rgba(251, 251, 251, 0.8), rgba(251, 251, 251, 0) 50%);
+  border-radius: inherit;
+  bottom: 0;
+  content: "";
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
 /* TITLES */
 .newtab-title {
-  color: #525c66;
-  font-size: 13px;
+  color: #9b9b9b;
+}
+
+.newtab-site:hover .newtab-title {
+  color: #4a4a4a;
+}
+
+.newtab-site[pinned] .newtab-title {
+  color: #d0021b;
+  font-style: italic;
+  font-weight: bold;
 }
 
 .newtab-site[type=sponsored] .newtab-title {
@@ -159,15 +187,15 @@
   background-position: -48px 0;
 }
 
-.newtab-control-pin[pinned] {
+.newtab-site[pinned] .newtab-control-pin {
   background-position: -72px 0;
 }
 
-.newtab-control-pin[pinned]:hover {
+.newtab-site[pinned] .newtab-control-pin:hover {
   background-position: -96px 0;
 }
 
-.newtab-control-pin[pinned]:active {
+.newtab-site[pinned] .newtab-control-pin:active {
   background-position: -120px 0;
 }
 

browser/themes/windows/jar.mn

@@ -136,6 +136,7 @@ browser.jar:
 *       skin/classic/browser/newtab/newTab.css                       (newtab/newTab.css)
         skin/classic/browser/newtab/controls.png                     (../shared/newtab/controls.png)
         skin/classic/browser/newtab/controls@2x.png                  (../shared/newtab/controls@2x.png)
+        skin/classic/browser/newtab/texture.png                      (../shared/newtab/texture.png)
         skin/classic/browser/places/places.css                       (places/places.css)
 *       skin/classic/browser/places/organizer.css                    (places/organizer.css)
         skin/classic/browser/places/bookmark.png                     (places/bookmark.png)
@@ -550,6 +551,7 @@ browser.jar:
 *       skin/classic/aero/browser/newtab/newTab.css                  (newtab/newTab.css)
         skin/classic/aero/browser/newtab/controls.png                (../shared/newtab/controls.png)
         skin/classic/aero/browser/newtab/controls@2x.png             (../shared/newtab/controls@2x.png)
+        skin/classic/aero/browser/newtab/texture.png                 (../shared/newtab/texture.png)
 *       skin/classic/aero/browser/places/places.css                  (places/places-aero.css)
 *       skin/classic/aero/browser/places/organizer.css               (places/organizer-aero.css)
         skin/classic/aero/browser/places/bookmark.png                (places/bookmark-aero.png)