Bug 892046 - part 2
authorRodrigo Silveira <rsilveira@mozilla.com>
Fri, 19 Jul 2013 20:07:14 -0700
changeset 139530 4b2da1603c0464ca26a4cd69d91dbe1de5b510c6
parent 139529 d444d04fa6c3fe0d8df5e7653e055bd335122b45
child 139531 a1e66f46133179f4b7c7763158951dc13c961925
push id24996
push useremorley@mozilla.com
push dateTue, 23 Jul 2013 12:59:05 +0000
treeherdermozilla-central@b717a7945dfb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs892046
milestone25.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 892046 - part 2
browser/metro/base/content/browser-ui.js
browser/metro/base/content/browser.xul
browser/metro/theme/browser.css
browser/metro/theme/platform.css
--- a/browser/metro/base/content/browser-ui.js
+++ b/browser/metro/base/content/browser-ui.js
@@ -1177,16 +1177,28 @@ var StartUI = {
       // of the keyboard transition.
       ContentAreaObserver.navBarWillBlur();
     }
 
     if (aEvent.button == 0)
       ContextUI.dismissTabs();
   },
 
+  onNarrowTitleClick: function onNarrowTitleClick(gridId) {
+    let grid = document.getElementById(gridId);
+
+    if (grid.hasAttribute("expanded"))
+      return;
+
+    for (let expandedGrid of Elements.startUI.querySelectorAll("[expanded]"))
+      expandedGrid.removeAttribute("expanded")
+
+    grid.setAttribute("expanded", "true");
+  },
+
   handleEvent: function handleEvent(aEvent) {
     switch (aEvent.type) {
       case "contextmenu":
         let event = document.createEvent("Events");
         event.initEvent("MozEdgeUICompleted", true, false);
         window.dispatchEvent(event);
         break;
       case "click":
--- a/browser/metro/base/content/browser.xul
+++ b/browser/metro/base/content/browser.xul
@@ -188,43 +188,49 @@
           <vbox id="tabs-controls">
             <toolbarbutton id="newtab-button" command="cmd_newTab" label="&newtab.label;"/>
           </vbox>
         </hbox>
 
         <!-- Start UI -->
         <hbox id="start-container" flex="1" observes="bcast_windowState" class="meta content-height content-width">
           <!-- portrait/landscape/filled view -->
-          <hbox id="start" class="start-page" flex="1" observes="bcast_windowState">
-            <scrollbox id="start-scrollbox" observes="bcast_preciseInput" flex="1">
-              <vbox id="start-topsites" class="meta-section">
-                <label class="meta-section-title wide-title" value="&startTopSitesHeader.label;"/>
-                <label class="meta-section-title narrow-title" value="&snappedTopSitesHeader.label;"/>
-                <richgrid id="start-topsites-grid" noun="topsite" rows="3" columns="3" tiletype="thumbnail" seltype="multiple" flex="1"/>
-              </vbox>
 
-              <vbox id="start-bookmarks" class="meta-section">
-                <label class="meta-section-title wide-title" value="&startBookmarksHeader.label;"/>
-                <label class="meta-section-title narrow-title" value="&snappedBookmarksHeader.label;"/>
-                <richgrid id="start-bookmarks-grid" noun="bookmark" seltype="multiple" flex="1"/>
-              </vbox>
+          <scrollbox id="start-scrollbox" observes="bcast_preciseInput" flex="1">
+            <vbox id="start-topsites" class="meta-section">
+              <label class="meta-section-title wide-title" value="&startTopSitesHeader.label;"/>
+              <label class="meta-section-title narrow-title" value="&snappedTopSitesHeader.label;"
+                onclick="StartUI.onNarrowTitleClick('start-topsites-grid')"/>
+              <richgrid id="start-topsites-grid" noun="topsite" rows="3" columns="3" tiletype="thumbnail" seltype="multiple" flex="1" expanded="true"/>
+            </vbox>
+
+            <vbox id="start-bookmarks" class="meta-section">
+              <label class="meta-section-title wide-title" value="&startBookmarksHeader.label;"/>
+              <label class="meta-section-title narrow-title" value="&snappedBookmarksHeader.label;"
+                onclick="StartUI.onNarrowTitleClick('start-bookmarks-grid')"/>
+              <richgrid id="start-bookmarks-grid" noun="bookmark" seltype="multiple" flex="1"/>
+            </vbox>
 
-              <vbox id="start-history" class="meta-section">
-                <label class="meta-section-title wide-title" value="&startHistoryHeader.label;"/>
-                <label class="meta-section-title narrow-title" value="&snappedHistoryHeader.label;"/>
-                <richgrid id="start-history-grid" noun="history" seltype="multiple" flex="1"/>
-              </vbox>
+            <vbox id="start-history" class="meta-section">
+              <label class="meta-section-title wide-title" value="&startHistoryHeader.label;"/>
+              <label class="meta-section-title narrow-title" value="&snappedHistoryHeader.label;"
+                onclick="StartUI.onNarrowTitleClick('start-history-grid')"/>
+              <richgrid id="start-history-grid" noun="history" seltype="multiple" flex="1"/>
+            </vbox>
 
-              <vbox id="start-remotetabs" class="meta-section">
-                <label class="meta-section-title wide-title" value="&startRemoteTabsHeader.label;"/>
-                <label id="snappedRemoteTabsLabel" class="meta-section-title narrow-title" value="&snappedRemoteTabsHeader.label;"/>
-                <richgrid id="start-remotetabs-grid" noun="tab" seltype="multiple" flex="1"/>
-              </vbox>
-            </scrollbox>
-          </hbox>
+            <vbox id="start-remotetabs" class="meta-section">
+              <label class="meta-section-title wide-title" value="&startRemoteTabsHeader.label;"/>
+              <label id="snappedRemoteTabsLabel" class="meta-section-title narrow-title" value="&snappedRemoteTabsHeader.label;"
+                onclick="StartUI.onNarrowTitleClick('start-remotetabs-grid')"/>
+              <richgrid id="start-remotetabs-grid" noun="tab" seltype="multiple" flex="1"/>
+            </vbox>
+
+            <!-- Spacer to take extra space in snapped mode. -->
+            <spacer flex="999"/>
+          </scrollbox>
 
         </hbox>
       </vbox> <!-- end tray -->
 
       <!-- Content viewport -->
       <stack id="content-viewport">
         <deck id="browsers" flex="1" observes="bcast_preciseInput"/>
         <box id="vertical-scroller" class="scroller" orient="vertical" end="0" top="0"/>
--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -717,18 +717,16 @@ setting[type="radio"] > vbox {
 
 #start-container[startpage],
 #start-container[filtering] {
   display: -moz-box;
 }
 
 #start-scrollbox[input="precise"] {
   overflow-x: scroll;
-  /* Move scrollbar above toolbar, discount padding added by .meta in #start-container */
-  margin-bottom: calc(@toolbar_height@ - @metro_spacing_normal@);
 }
 
 /* if autocomplete is set, hide both start pages,
  *  else hide the autocomplete screen */
 #start-container[filtering] > .start-page,
 #start-container:not([filtering]) > #start-autocomplete {
   visibility: collapse;
 }
@@ -741,19 +739,21 @@ setting[type="radio"] > vbox {
 
 #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, discount padding added by .meta in #start-container */
+  margin-bottom: calc(@toolbar_height@ - @metro_spacing_normal@);
 }
 
-#start[viewstate="snapped"] #start-scrollbox {
+#start-container[viewstate="snapped"] #start-scrollbox {
   -moz-box-orient: vertical;
 }
 
 /*Formatting for the limited horizontal space of snapped*/
 #start-autocomplete[viewstate="snapped"] .richgrid-item-content {
   -moz-box-orient: horizontal;
 }
 
@@ -761,16 +761,26 @@ setting[type="radio"] > vbox {
 #start-autocomplete {
   padding-left: 0;
   padding-right: 0;
 }
 
 #start-container[viewstate="snapped"] .meta-section {
   margin: 0px;
   min-width: @grid_double_column_width@;
+  -moz-box-flex: 1;
+  -moz-box-align: center;
+}
+
+#start-container[viewstate="snapped"] richgrid {
+  visibility: collapse;
+}
+
+#start-container[viewstate="snapped"] richgrid[expanded] {
+  visibility: visible;
 }
 
 /* Browser Content Areas ----------------------------------------------------- */
 
 /* Hide the browser while the start UI is visible */
 #content-viewport[startpage],
 #content-viewport[filtering] {
   visibility: collapse;
--- a/browser/metro/theme/platform.css
+++ b/browser/metro/theme/platform.css
@@ -659,18 +659,18 @@ arrowbox {
 }
 
 .meta-section-title {
   font-size: @metro_font_large@;
   font-weight: 100;
   visibility: collapse;
 }
 
-#start[viewstate="snapped"] .meta-section-title.narrow-title,
-#start:not([viewstate="snapped"]) .meta-section-title.wide-title {
+#start-container[viewstate="snapped"] .meta-section-title.narrow-title,
+#start-container:not([viewstate="snapped"]) .meta-section-title.wide-title {
   visibility: visible;
 }
 
 /* App bars ----------------------------------------------------------------- */
 
 appbar {
   display: block;
   position: fixed;