Bug 904417 - Adjust spacing and font sizes on start screen and autocomplete popup to more closely match comps. r=sfoster

--HG--
extra : rebase_source : 5b3be3c4940bbc6e86cb5130963e6229870435e5

browser/metro/base/content/bindings/grid.xml

@@ -364,11 +364,6 @@
         <getter><![CDATA[
             // return the rect that represents our bounding box
             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 ? {

browser/metro/base/content/bindings/urlbar.xml

@@ -489,17 +489,17 @@
   </binding>
 
   <binding id="urlbar-autocomplete">
-    <content>
-      <xul:vbox id="results-vbox" anonid="results-container" flex="1">
+    <content class="meta-section-container">
+      <xul:vbox class="meta-section" anonid="results-container" flex="1">
         <xul:label class="meta-section-title"
                    value="&autocompleteResultsHeader.label;"/>
-        <richgrid id="results-richgrid" anonid="results" rows="3" flex="1"
+        <richgrid anonid="results" rows="3" flex="1"
                   seltype="single" deferlayout="true"/>
       </xul:vbox>
 
-      <xul:vbox id="searches-vbox" flex="1">
+      <xul:vbox class="meta-section" flex="1">
         <xul:label anonid="searches-header" class="meta-section-title"/>
-        <richgrid id="searches-richgrid" anonid="searches" rows="3" flex="1"
+        <richgrid anonid="searches" rows="3" flex="1"
                   seltype="single" deferlayout="true"/>
       </xul:vbox>
     </content>

browser/metro/base/content/browser.xul

@@ -205,7 +205,7 @@
               observes="cmd_back"></html:div>
 
     <!-- Navigation bar -->
-    <appbar id="navbar" mousethrough="never" observes="bcast_windowState">
+    <appbar id="navbar" mousethrough="never">
       <hbox id="progress-container" layer="true">
         <hbox id="progress-control" />
       </hbox>

browser/metro/base/content/startui/Start.xul

@@ -28,7 +28,9 @@
 <html:html id="startui-page"
            xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
            xmlns:html="http://www.w3.org/1999/xhtml">
-  <html:body id="startui-body" onload="StartUI.init();" onunload="StartUI.uninit();">
+
+  <html:body id="startui-body" class="meta"
+             onload="StartUI.init();" onunload="StartUI.uninit();">
 
   <script type="application/javascript" src="chrome://browser/content/startui-scripts.js"/>
 
@@ -38,7 +40,8 @@
     <broadcaster id="bcast_windowState" viewstate=""/>
   </broadcasterset>
 
-  <hbox id="start-container" observes="bcast_windowState">
+  <hbox id="start-container" class="meta-section-container"
+        observes="bcast_windowState">
   <!-- the start-container element has a max-height set in StartUI.js -->
       <vbox id="start-topsites" class="meta-section" expanded="true">
         <label class="meta-section-title wide-title" value="&topSitesHeader.label;"/>

browser/metro/theme/browser.css

@@ -187,6 +187,10 @@ documenttab[selected] .documenttab-selection {
 
 /* Start UI ----------------------------------------------------------------- */
 
+#content-viewport[startpage] browser {
+  padding-bottom: @toolbar_height@;
+}
+
 #startui-page {
   overflow-x: scroll;
   overflow-y: hidden;
@@ -199,61 +203,25 @@ documenttab[selected] .documenttab-selection {
 }
 
 #start-container {
-  display: -moz-box;
-  min-width: @grid_double_column_width@;
   height: 100%;
-  width: 100%;
-}
-
-#start-topsites {
-  /* allot space for 3 tile columns for the topsites grid */
-  min-width: calc(3 * @grid_double_column_width@);
-}
-
-#content-viewport[startpage] browser {
-  padding-bottom: @toolbar_height@;
 }
 
 #urlbar-autocomplete[viewstate="snapped"],
-#urlbar-autocomplete[viewstate="portrait"],
-#start-container[viewstate="snapped"],
-#start-container[viewstate="portrait"] {
+#urlbar-autocomplete[viewstate="portrait"]{
   -moz-box-orient: vertical;
 }
 
-#start-container {
-  padding-left: 0;
-  padding-right: 0;
+#start-container[viewstate="snapped"],
+#start-container[viewstate="portrait"] {
+  width: 100%;
+  max-width: 100%; /* ensure page doesn't expand, messing up @media rules */
+  height: auto;
 }
 
-#start-container[viewstate="snapped"] > .meta-section {
-  margin: 0 @metro_spacing_xnormal@;
-  min-width: @grid_double_column_width@;
-}
-
-#start-container[viewstate="snapped"] richgrid {
+#start-container[viewstate="snapped"] .meta-section:not([expanded]) > richgrid {
   visibility: collapse;
 }
 
-#start-container[viewstate="snapped"] .meta-section[expanded] > richgrid {
-  visibility: visible;
-}
-
-#start-container[viewstate="snapped"] {
-  padding-top: 0;
-}
-
-#start-container[viewstate="snapped"] .meta-section-title,
-#start-container[viewstate="snapped"] richgrid {
-  margin-top: @metro_spacing_xnormal@;
-  padding: 0;
-}
-
-#start-container:not([viewstate="snapped"]) .meta-section-title.narrow-title,
-#start-container[viewstate="snapped"] .meta-section-title.wide-title {
-  display: none;
-}
-
 /* Browser Content Areas ==================================================== */
 
 /* a 'margin-top' is applied dynamically in ContentAreaObserver */
@@ -525,6 +493,22 @@ documenttab[selected] .documenttab-selection {
   background-color: @panel_light_color@;
 }
 
+#urlbar-autocomplete {
+  padding-top: 0;
+}
+
+#toolbar {
+  padding: 0 @toolbar_horizontal_padding@;
+}
+
+#toolbar[viewstate="snapped"] {
+  padding: 0 @toolbar_snapped_horizontal_padding@;
+}
+
+#toolbar[viewstate="snapped"] > toolbarbutton {
+  margin: 0 @toolbar_snapped_horizontal_spacing@;
+}
+
 /* Combined back/forward buttons */
 
 #back-button {
@@ -547,7 +531,7 @@ documenttab[selected] .documenttab-selection {
 }
 
 #forward-button[disabled] {
-  -moz-margin-start: -@forward_spacing@;
+  -moz-margin-start: -@forward_spacing@ !important;
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
@@ -720,10 +704,6 @@ documenttab[selected] .documenttab-selection {
   visibility: visible;
 }
 
-#toolbar[viewstate="snapped"] > #urlbar ~ toolbarbutton {
-  visibility: collapse;
-}
-
 /* Contextual toolbar controls */
 
 #toolbar-context-autocomplete,
@@ -836,20 +816,6 @@ documenttab[selected] .documenttab-selection {
   }
 }
 
-#panel-view-switcher {
-  border: 0 none !important;
-  color: #000 !important;
-  background: transparent;
-  padding: 0;
-  font-size: @metro_font_xlarge@;
-  font-weight: 100;
-  margin: 0;
-}
-
-#panel-container[viewstate="snapped"] #panel-view-switcher {
-  font-size: @metro_font_large@;
-}
-
 #panel-items {
   padding-top: 20px;
   -moz-padding-start: 88px;

browser/metro/theme/defines.inc

@@ -17,7 +17,9 @@
 %define urlbar_edit_height 36px
 
 %define toolbar_vertical_spacing 5px
-%define toolbar_horizontal_spacing 20px
+%define toolbar_horizontal_spacing 17px
+%define toolbar_horizontal_padding 21px
+%define toolbar_snapped_horizontal_padding 10px
 %define toolbar_snapped_horizontal_spacing 10px
 
 % XXX Per UX mockups, this should be 68px, but we need to make this
@@ -65,7 +67,8 @@
 %define metro_font_snormal 14px
 %define metro_font_normal 15px
 %define metro_font_large 25px
-%define metro_font_xlarge 45px
+%define metro_font_xlarge 35px
+%define metro_font_xxlarge 45px
 
 %define font_normal 16px
 %define font_snormal 15px

browser/metro/theme/platform.css

@@ -632,16 +632,32 @@ arrowbox {
 
 .meta {
   background-color: @panel_light_color@;
-  padding: @metro_spacing_normal@ @metro_spacing_xxnormal@;
-  overflow: auto;
-  max-width: 100%;
-  width: 100%;
+}
+
+/* needs to observe the viewstate */
+.meta-section-container {
+  padding: 45px 75px 0;
+  -moz-box-orient: horizontal;
+}
+
+.meta-section-container[viewstate="snapped"],
+.meta-section-container[viewstate="portrait"] {
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+}
+
+.meta-section-container[viewstate="snapped"] {
+  padding: 0;
 }
 
 .meta-section {
   margin: 0 @metro_spacing_large@;
 }
 
+.meta-section-container[viewstate="snapped"] > .meta-section {
+  margin: 0 @metro_spacing_xnormal@;
+}
+
 .meta-section-title {
   margin: @metro_spacing_normal@ @tile_side_margin@;
   font-size: @metro_font_large@;
@@ -649,6 +665,11 @@ arrowbox {
   cursor: default;
 }
 
+.meta-section-title.wide-title {
+  font-size: @metro_font_xlarge@;
+  margin-bottom: calc(40px - @tile_side_margin@);
+}
+
 .meta-section:not([expanded]) > .meta-section-title.narrow-title:-moz-locale-dir(ltr):after {
   content: ">";
 }
@@ -657,6 +678,17 @@ arrowbox {
   content: "<";
 }
 
+.meta-section-container:not([viewstate="snapped"]) .meta-section-title.narrow-title,
+.meta-section-container[viewstate="snapped"] .meta-section-title.wide-title {
+  display: none;
+}
+
+.meta-section-container[viewstate="snapped"] .meta-section-title,
+.meta-section-container[viewstate="snapped"] richgrid {
+  margin-top: @metro_spacing_xnormal@;
+  padding: 0;
+}
+
 /* App bars ----------------------------------------------------------------- */
 
 appbar {
@@ -704,10 +736,6 @@ appbar toolbar toolbarbutton {
   background-color: transparent;
 }
 
-appbar[viewstate="snapped"] toolbar toolbarbutton {
-  margin: 0 @toolbar_snapped_horizontal_spacing@;
-}
-
 appbar toolbar toolbarbutton[disabled] {
   visibility: collapse;
 }