Bug 904417 - Adjust spacing and font sizes on start screen and autocomplete popup to more closely match comps. r=sfoster
authorJonathan Wilde <jwilde@jwilde.me>
Fri, 30 Aug 2013 13:07:19 -0700
changeset 160603 32f916dd9329222fb1b34137d5cd08edfc072166
parent 160525 a98569f21abe10fc486631e4ad40e20999ea5d25
child 160604 d45a33d0fc2e5e61d24a7a105213dedcdb4b11fc
push id407
push userlsblakk@mozilla.com
push dateTue, 03 Dec 2013 03:32:50 +0000
treeherdermozilla-release@babf8c9ebc52 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerssfoster
bugs904417
milestone26.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 904417 - Adjust spacing and font sizes on start screen and autocomplete popup to more closely match comps. r=sfoster
browser/metro/base/content/bindings/grid.xml
browser/metro/base/content/bindings/urlbar.xml
browser/metro/base/content/browser.xul
browser/metro/base/content/startui/Start.xul
browser/metro/theme/browser.css
browser/metro/theme/defines.inc
browser/metro/theme/platform.css
--- a/browser/metro/base/content/bindings/grid.xml
+++ b/browser/metro/base/content/bindings/grid.xml
@@ -359,21 +359,16 @@
       <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.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 ? {
               width: rect.width,
               height: rect.height
             } : null;
         ]]></getter>
       </property>
--- a/browser/metro/base/content/bindings/urlbar.xml
+++ b/browser/metro/base/content/bindings/urlbar.xml
@@ -484,27 +484,27 @@
           if (this.submitURL(event))
             return;
         ]]>
       </handler>
     </handlers>
   </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>
 
     <implementation implements="nsIAutoCompletePopup, nsIObserver">
       <constructor>
         <![CDATA[
           this.hidden = true;
--- a/browser/metro/base/content/browser.xul
+++ b/browser/metro/base/content/browser.xul
@@ -200,17 +200,17 @@
     </vbox>
 
     <html:div id="overlay-back" class="overlay-button"
               observes="cmd_back"></html:div>
     <html:div id="overlay-plus" class="overlay-button"
               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>
 
       <vbox id="toolbar-overlay" flex="1">
         <!-- Autocomplete -->
         <scrollbox flex="1">
           <hbox id="urlbar-autocomplete" observes="bcast_windowState"/>
--- a/browser/metro/base/content/startui/Start.xul
+++ b/browser/metro/base/content/startui/Start.xul
@@ -23,27 +23,30 @@
 %syncDTD;
 #endif
 ]>
 
 <!-- we're using html here so we get anonymous scrollbars on the browser element -->
 <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"/>
 
   <!-- mimic broadcasts in browser.xul. note browser.xul broadcasters do not propagate down here! -->
   <broadcasterset id="broadcasterset">
     <broadcaster id="bcast_preciseInput" input="precise"/>
     <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;"/>
         <html:div class="meta-section-title narrow-title" onclick="StartUI.onNarrowTitleClick('start-topsites')">
           &narrowTopSitesHeader.label;
         </html:div>
         <richgrid id="start-topsites-grid" observes="bcast_windowState" set-name="topSites" rows="3" columns="3" tiletype="thumbnail" seltype="multiple" flex="1"/>
       </vbox>
--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -182,81 +182,49 @@ documenttab[selected] .documenttab-selec
   list-style-image: url(chrome://browser/skin/images/newtab-default.png);
 
   /* Add some extra padding for a larger target */
   padding: 18px 25px 30px;
 }
 
 /* Start UI ----------------------------------------------------------------- */
 
+#content-viewport[startpage] browser {
+  padding-bottom: @toolbar_height@;
+}
+
 #startui-page {
   overflow-x: scroll;
   overflow-y: hidden;
   height: 100%;
 }
 
 #startui-body {
   height: 100%;
   margin: 0;
 }
 
 #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"] > .meta-section {
-  margin: 0 @metro_spacing_xnormal@;
-  min-width: @grid_double_column_width@;
-}
-
-#start-container[viewstate="snapped"] richgrid {
-  visibility: collapse;
+#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[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;
+#start-container[viewstate="snapped"] .meta-section:not([expanded]) > richgrid {
+  visibility: collapse;
 }
 
 /* Browser Content Areas ==================================================== */
 
 /* a 'margin-top' is applied dynamically in ContentAreaObserver */
 #browsers {
   background: white;
   transition-property: margin-top;
@@ -520,16 +488,32 @@ documenttab[selected] .documenttab-selec
 }
 
 /* Toolbar ----------------------------------------------------------------- */
 
 #toolbar-overlay {
   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 {
   list-style-image: url(chrome://browser/skin/images/navbar-back.png);
   position: relative;
   z-index: 1;
   transition: opacity @forward_transition_length@ ease-out;
 }
@@ -542,17 +526,17 @@ documenttab[selected] .documenttab-selec
 #forward-button {
   list-style-image: url(chrome://browser/skin/images/navbar-forward.png);
   transition: margin @forward_transition_length@ ease-out,
               visibility @forward_transition_length@ ease-out,
               opacity @forward_transition_length@ ease-out;
 }
 
 #forward-button[disabled] {
-  -moz-margin-start: -@forward_spacing@;
+  -moz-margin-start: -@forward_spacing@ !important;
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
 }
 
 @media (min-resolution: @min_res_140pc@) {
   #back-button {
     list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
@@ -715,20 +699,16 @@ documenttab[selected] .documenttab-selec
 }
 
 #urlbar[editing] > #go-button,
 #urlbar:not([editing])[loading] > #stop-button,
 #urlbar:not([editing]):not([loading]) > #reload-button {
   visibility: visible;
 }
 
-#toolbar[viewstate="snapped"] > #urlbar ~ toolbarbutton {
-  visibility: collapse;
-}
-
 /* Contextual toolbar controls */
 
 #toolbar-context-autocomplete,
 #toolbar-context-page {
   transition-property: opacity, visibility;
   transition-duration: @forward_transition_length@;
   transition-timing-function: @metro_animation_easing@;
 }
@@ -831,30 +811,16 @@ documenttab[selected] .documenttab-selec
 }
 
 @media (min-resolution: @min_res_180pc@) {
   #panel-close-button {
     list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
   }
 }
 
-#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;
 }
 
 #panel-container[viewstate="snapped"] #panel-items {
   padding-left: 0px;
 }
--- a/browser/metro/theme/defines.inc
+++ b/browser/metro/theme/defines.inc
@@ -12,17 +12,19 @@
 
 %define border_color #BFC6CE
 %define selected_color #FF8000
 
 %define urlbar_border_color #BFC6CC
 %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
 % one pixel higher to reduce button clipping until bug 905453 is resolved
 %define toolbar_height 69px
 %define labelled_toolbar_height 90px
 %define tabs_height 178px
 %define findbar_height 54px
@@ -60,17 +62,18 @@
 
 %define metro_border_thin 1px
 %define metro_border_thick 2px
 %define metro_border_xthick 4px
 
 %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
 %define font_small 12px
 %define font_xsmall 11px
 
 %define touch_row 47px
 %define touch_button_small 37px
--- a/browser/metro/theme/platform.css
+++ b/browser/metro/theme/platform.css
@@ -627,41 +627,73 @@ arrowbox {
   list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png");
   margin-left: -@margin_normal@;
 }
 
 /*.meta -------------------------------------------------------------------- */
 
 .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@;
   font-weight: 100;
   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: ">";
 }
 
 .meta-section:not([expanded]) > .meta-section-title.narrow-title:-moz-locale-dir(rtl):before {
   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 {
   display: block;
   position: fixed;
   bottom: 0;
   width: 100%;
   transform: translateY(100%);
@@ -699,20 +731,16 @@ appbar toolbar {
 appbar toolbar toolbarbutton {
   border: 0;
   margin: 0 @toolbar_horizontal_spacing@;
   padding: 0;
   /* Don't inherit background-color from toolbarbutton[checked="true"] */
   background-color: transparent;
 }
 
-appbar[viewstate="snapped"] toolbar toolbarbutton {
-  margin: 0 @toolbar_snapped_horizontal_spacing@;
-}
-
 appbar toolbar toolbarbutton[disabled] {
   visibility: collapse;
 }
 
 appbar toolbar[labelled] {
   min-height: @labelled_toolbar_height@;
 }