diff -r 000000000000 -r 6474c204b198 browser/metro/theme/tiles.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/browser/metro/theme/tiles.css	Wed Dec 31 06:09:35 2014 +0100
@@ -0,0 +1,431 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Tile grid  ------------------------------------------------------------- */
+
+%filter substitution
+%include defines.inc
+
+/*
+ *****************************************************
+  The following rules define the key tile dimensions
+  They are (also) snarfed via the CSSOM as the dimensions used in the #richgrid binding
+ *****************************************************
+ */
+richgriditem {
+  width: @grid_double_column_width@;
+  height: @grid_row_height@;
+}
+richgriditem[tiletype="thumbnail"] {
+  width: @grid_double_column_width@;
+  height: @grid_double_row_height@;
+}
+richgriditem[search] {
+  width: @grid_search_width@;
+  height: @grid_row_height@;
+}
+richgriditem[compact] {
+  width: auto;
+  height: @compactgrid_row_height@;
+}
+/*
+ *****************************************************
+ */
+richgrid {
+  display: -moz-box;
+  overflow: hidden;
+}
+
+richgrid > .richgrid-grid {
+  -moz-column-width: @grid_double_column_width@; /* tile width (2x unit + gutter) */
+  min-width: @grid_double_column_width@; /* min 1 column */
+  min-height: @grid_double_row_height@; /* 2 rows (or 1 double rows) minimum; multiple of tile_height */
+  -moz-column-fill: auto; /* do not attempt to balance content between columns */
+  -moz-column-gap: 0;
+  -moz-column-count: auto;
+  display: block;
+  box-sizing: content-box;
+  overflow-x: hidden; /* clipping will only kick in if an explicit width is set */
+  transition: 100ms transform ease-out;
+}
+
+richgrid[search] > .richgrid-grid {
+  -moz-column-width: auto;
+  min-width: 0;
+}
+
+richgriditem {
+  display: block;
+  position: relative;
+  width: @grid_double_column_width@;
+  height: @grid_row_height@;
+  box-sizing: border-box;
+  -moz-column-gap: 0;
+  overflow:hidden;
+  cursor: default;
+}
+
+.tile-content {
+  display: block;
+  position: absolute;
+  /* background-color colors the tile-edge,
+     and will normally be overridden with a favicon-based color */
+  background-color: #ccc;
+  background-origin: padding-box;
+  /* content positioning within the grid "cell"
+     gives us the gutters/spacing between tiles */
+  top: 2px; right: @tile_side_margin@; bottom: 10px; left: @tile_side_margin@;
+  border: @metro_border_thin@ solid @tile_border_color@;
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
+  transition: 150ms transform ease-out,
+              @metro_animation_duration@ background-color @metro_animation_easing@;
+}
+
+.tile-start-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 10px;
+  padding: 8px;
+  background-color: #fff;
+}
+richgriditem:-moz-locale-dir(rtl) .tile-start-container {
+  right: 10px;
+  left: 0;
+}
+
+richgriditem[search] .tile-start-container {
+  background-color: transparent;
+}
+
+richgriditem:not([tiletype="thumbnail"]) .tile-start-container {
+  background-image: none!important;
+}
+
+.tile-icon-box {
+  position: absolute;
+  top: 50%;
+  margin-top: -17px;
+  padding: 8px;
+  /* default color, may be overriden by a favicon-based color */
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 1px;
+  opacity: 1.0;
+}
+
+.tile-icon-box > image {
+  display: block;
+  width: 16px;
+  height: 16px;
+  list-style-image: url("chrome://browser/skin/images/identity-icons-generic.png");
+}
+
+/* for larger favicons (which includes the fallback icon) */
+richgriditem:not([iconURI]) .tile-icon-box,
+richgriditem[iconURI=""] .tile-icon-box,
+richgriditem[iconsize="large"] .tile-icon-box {
+  border-color: transparent!important;
+  padding: 4px;
+}
+
+richgriditem[iconsize="large"] .tile-icon-box > image,
+.tile-icon-box > image[src=""] {
+  width: 24px;
+  height: 24px;
+}
+
+richgriditem[search] .tile-icon-box {
+  padding: 0;
+  border: 0;
+  left: 50%;
+  -moz-margin-start: -13px;
+  margin-top: -8px;
+}
+
+richgriditem[search]:-moz-locale-dir(rtl) .tile-icon-box {
+  right: 50%;
+  left: auto;
+}
+
+
+richgriditem[search][iconsize="large"] .tile-icon-box {
+  left: 0;
+  top: 0;
+  margin: 0;
+}
+richgriditem[search][iconsize="large"]:-moz-locale-dir(rtl) .tile-icon-box {
+  right: 0;
+  left: auto;
+}
+
+richgriditem[search][iconsize="large"] .tile-start-container {
+  left: 0;
+  padding: 0;
+}
+richgriditem[search][iconsize="large"]:-moz-locale-dir(rtl) .tile-start-container {
+  left: auto;
+  right: 0;
+}
+
+richgriditem[search][iconsize="large"] .tile-icon-box > image {
+  width: 74px;
+  height: 74px;
+}
+
+richgriditem[search] .tile-desc {
+  display: none;
+}
+
+richgriditem[search] .tile-content {
+  border: 0;
+}
+
+.tile-desc {
+  display: block;
+  position: absolute;
+  top: 6px;
+  left: 52px; /* label goes to the end (right) of the favicon */
+  right: 0;
+  padding-top: 1em;
+  -moz-padding-end: 6px;
+  padding-bottom: 6px;
+  -moz-padding-start: 12px;
+  background: white;
+  color: #333;
+  margin: 0;
+  -moz-margin-start: 0;
+  display: block;
+  font-size: 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: @metro_animation_duration@ background-color @metro_animation_easing@;
+}
+richgriditem:-moz-locale-dir(rtl) .tile-desc {
+  right: 52px; /* label goes to the end (left) of the favicon */
+  left: 0;
+}
+
+richgriditem:not([tiletype="thumbnail"]) .tile-desc {
+  background-color: transparent!important;
+}
+
+
+richgriditem.collapsed {
+  height: 0!important;
+  overflow: hidden;
+  opacity: 0;
+}
+
+richgriditem.collapsed > .tile-content {
+  transform: scaleY(0);
+  transition: 150ms transform ease-out 150ms;
+}
+
+richgriditem:active {
+  z-index: 2;
+}
+
+/* thumbnail variation */
+
+richgriditem[tiletype="thumbnail"] {
+  width: @grid_double_column_width@;
+  height: @grid_double_row_height@;
+  -moz-box-pack: end;
+  padding: 0px;
+  color: #1a1a1a;
+}
+
+richgriditem[tiletype="thumbnail"] .tile-desc {
+  margin: 0;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding-top: 4px;
+  -moz-padding-end: 8px;
+  padding-bottom: 4px;
+  -moz-padding-start: 56px;
+}
+
+richgriditem[tiletype="thumbnail"] > .tile-content > .tile-desc {
+  /* ensure thumbnail labels get their color from the parent richgriditem element */
+  color: inherit;
+}
+
+/* thumbnail tiles use a screenshot thumbnail as the background */
+
+richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container,
+richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container::after {
+  background-size: cover;
+  background-position: top left;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container::after {
+  pointer-events:none;
+  content: "";
+  display: block;
+  opacity: 0;
+  background-color: #fff;
+  background-image: url("chrome://browser/skin/images/firefox-watermark.png")!important;
+  transition: @metro_animation_duration@ opacity ease-in;
+}
+
+richgriditem[tiletype="thumbnail"]:not([customImage]) > .tile-content > .tile-start-container::after {
+  opacity: 1;
+}
+
+richgriditem[tiletype="thumbnail"] .tile-icon-box {
+  top: auto;
+  left: 10px;
+  bottom: 6px;
+  margin-top: 0;
+  z-index: 1;
+  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.05), 0px 2px 0px rgba(0, 0, 0, 0.1);
+}
+richgriditem[tiletype="thumbnail"]:-moz-locale-dir(rtl) .tile-icon-box {
+  left: auto;
+  right: 10px;
+}
+
+/* selected tile indicator */
+richgriditem[selected] > .tile-content::after {
+  content: "";
+  pointer-events: none;
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  background-image: url(chrome://browser/skin/images/tile-selected-check-hdpi.png);
+  background-origin: border-box;
+  background-repeat: no-repeat;
+  background-position: right 0 top 0;
+  /* scale the image whatever the dppx */
+  background-size: 35px 35px;
+  border: @metro_border_xthick@ solid @selected_color@;
+}
+richgriditem[selected]:-moz-locale-dir(rtl) > .tile-content::after {
+  background-position: left 0 top 0;
+  background-image: url(chrome://browser/skin/images/tile-selected-check-rtl-hdpi.png);
+}
+
+richgriditem[crosssliding] {
+  z-index: 10;
+}
+
+/* ease the return to original position when cross-sliding */
+richgriditem:not([crosssliding]) {
+  transition: transform ease-out 0.2s;
+}
+
+
+/* tile pinned-state indication */
+richgriditem[pinned] > .tile-content::before {
+  pointer-events:none;
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: auto;
+  z-index: 1;
+  width: 35px;
+  height: 35px;
+  background-image: url(chrome://browser/skin/images/pinned-hdpi.png);
+  background-position: center;
+  background-repeat: no-repeat;
+  /* scale the image whatever the dppx */
+  background-size: 70px 70px;
+}
+richgriditem[pinned]:-moz-locale-dir(rtl) > .tile-content::before {
+  left: 0;
+  right: auto;
+  -moz-transform: scaleX(-1);
+}
+
+
+/* Selected _and_ pinned tiles*/
+richgriditem[selected][pinned] > .tile-content::before {
+  background-position: right -@metro_border_xthick@ top -@metro_border_xthick@;
+  width: 70px;
+  height: 70px;
+}
+richgriditem[selected][pinned]:-moz-locale-dir(rtl) > .tile-content::before {
+  background-position: left -@metro_border_xthick@ top -@metro_border_xthick@;
+}
+
+richgriditem[customColor] {
+  color: #f1f1f1;
+}
+
+richgriditem[bending] > .tile-content {
+  transform-origin: center center;
+}
+
+richgriditem[tiletype="thumbnail"]:not([value]) {
+  visibility: visible;
+}
+richgriditem:not([value]) > .tile-content {
+  padding: 10px 14px;
+}
+/* Empty/unused tiles */
+richgriditem:not([value]) > .tile-content {
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
+  background-image: url("chrome://browser/skin/images/firefox-watermark.png");
+  background-origin: content-box;
+  background-repeat: no-repeat;
+  background-color: rgba(255,255,255, 0.2);
+  background-position: center center;
+  background-size: @compactgrid_row_height@;
+}
+richgriditem[tiletype="thumbnail"]:not([value]) > .tile-content {
+  background-size: @grid_row_height@;
+}
+
+/* Snapped-view variation
+   We use the compact, single-column grid treatment for <=320px */
+
+@media (max-width: 330px) {
+
+  richgrid:not([search]) > .richgrid-grid {
+    -moz-column-width: auto!important; /* let it flow */
+    -moz-column-count: auto!important; /* let it flow */
+    height: auto; /* let it flow */
+    min-width: 280px;
+    transition: 100ms transform ease-out;
+  }
+
+  richgriditem {
+    width: @grid_double_column_width@;
+    overflow: hidden;
+    height: @compactgrid_row_height@;
+  }
+
+  .tile-desc {
+    padding-top: 0.5em;
+    -moz-padding-end: 4px;
+    padding-bottom: 4px;
+    -moz-padding-start: 4px;
+  }
+
+  richgriditem:not([search]) > .tile-content {
+    left: 0;
+    right: 0;
+  }
+
+  richgriditem {
+    width: auto;
+  }
+}