From 449afb468b9645d1eee8679744905680fc84c8fb Mon Sep 17 00:00:00 2001
From: Sam Foster <sfoster@mozilla.com>
Date: Thu, 25 Jul 2013 18:25:25 -0700
Subject: [PATCH] Bug 892425 - Stabilize grid sizing in start sections with &
 without scrollbars. r=mbrubeck

---
 browser/metro/base/content/bindings/grid.xml |  6 +-----
 browser/metro/theme/browser.css              | 15 +++++++--------
 browser/metro/theme/platform.css             |  9 ++-------
 browser/metro/theme/tiles.css                |  4 +---
 4 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/browser/metro/base/content/bindings/grid.xml b/browser/metro/base/content/bindings/grid.xml
index 963cbc56027..29eddb940c9 100644
--- a/browser/metro/base/content/bindings/grid.xml
+++ b/browser/metro/base/content/bindings/grid.xml
@@ -358,21 +358,17 @@
 
       <field name="_rowCount">0</field>
       <property name="rowCount" readonly="true" onget="return this._rowCount;"/>
-
       <field name="_columnCount">0</field>
       <property name="columnCount" readonly="true" onget="return this._columnCount;"/>
-
       <property name="_containerSize">
         <getter><![CDATA[
             // return the rect that represents our bounding box
-            let containerNode = this.parentNode;
-
+            let containerNode = this.hasAttribute("flex") ? this : this.parentNode;
             // Autocomplete is a binding within a binding, so we have to step
             // up an additional parentNode.
             if (containerNode.id == "results-vbox" ||
                 containerNode.id == "searches-vbox")
                 containerNode = containerNode.parentNode;
-
             let rect = containerNode.getBoundingClientRect();
             // return falsy if the container has no height
             return rect.height ? {
diff --git a/browser/metro/theme/browser.css b/browser/metro/theme/browser.css
index 824c3a16655..1a98e4b536c 100644
--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -205,18 +205,20 @@ documenttab[selected] .documenttab-selection {
 #start-container:not([filtering]) > #start-autocomplete {
   visibility: collapse;
 }
-
 /* startUI sections, grids */
-#start-container .meta-section {
+#start-scrollbox > .meta-section {
   /* allot space for at least a single column */
   min-width: @grid_double_column_width@;
+  /* leave margin for horizontal scollbar */
+  margin-bottom: 30px;
+}
+#start-scrollbox[input="precise"] > .meta-section {
+  margin-bottom: 5px;
 }
-
 #start-topsites {
   /* allot space for 3 tile columns for the topsites grid */
   min-width: calc(3 * @grid_double_column_width@);
 }
-
 #start-scrollbox {
   -moz-box-orient: horizontal;
   /* Move scrollbar above toolbar,
@@ -232,20 +234,17 @@ documenttab[selected] .documenttab-selection {
 #start-autocomplete[viewstate="snapped"] .richgrid-item-content {
   -moz-box-orient: horizontal;
 }
-
 #start-container,
 #start-autocomplete {
   padding-left: 0;
   padding-right: 0;
 }
-
-#start-container[viewstate="snapped"] .meta-section {
+#start-container[viewstate="snapped"] #start-scrollbox > .meta-section {
   margin: 0;
   min-width: @grid_double_column_width@;
   -moz-box-flex: 1;
   -moz-box-align: center;
 }
-
 #start-container[viewstate="snapped"] richgrid {
   visibility: collapse;
 }
diff --git a/browser/metro/theme/platform.css b/browser/metro/theme/platform.css
index ab3ac49743b..87616a9f7b0 100644
--- a/browser/metro/theme/platform.css
+++ b/browser/metro/theme/platform.css
@@ -653,24 +653,19 @@ arrowbox {
   max-width: 100%;
   width: 100%;
 }
-
 .meta-section {
   margin: 0 @metro_spacing_large@;
 }
-
 .meta-section-title {
   font-size: @metro_font_large@;
   font-weight: 100;
-  visibility: collapse;
+  display: none;
 }
-
 #start-container[viewstate="snapped"] .meta-section-title.narrow-title,
 #start-container:not([viewstate="snapped"]) .meta-section-title.wide-title {
-  visibility: visible;
+  display: block;
 }
-
 /* App bars ----------------------------------------------------------------- */
-
 appbar {
   display: block;
   position: fixed;
diff --git a/browser/metro/theme/tiles.css b/browser/metro/theme/tiles.css
index 2d6146cf0df..6480b074de8 100644
--- a/browser/metro/theme/tiles.css
+++ b/browser/metro/theme/tiles.css
@@ -25,15 +25,13 @@ 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 */