Bug 892046 - Reuse the start UI views for snapped view
authorRodrigo Silveira <rsilveira@mozilla.com>
Fri, 19 Jul 2013 16:59:53 -0700
changeset 139503 d444d04fa6c3fe0d8df5e7653e055bd335122b45
parent 139502 ac9174e8ed0639cc5fb573efebee6aa0106178b7
child 139504 4b2da1603c0464ca26a4cd69d91dbe1de5b510c6
push id31394
push userrsilveira@mozilla.com
push dateTue, 23 Jul 2013 00:06:16 +0000
treeherdermozilla-inbound@4b2da1603c04 [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 - Reuse the start UI views for snapped view
browser/metro/base/content/TopSites.js
browser/metro/base/content/browser-scripts.js
browser/metro/base/content/browser-ui.js
browser/metro/base/content/browser.xul
browser/metro/locales/en-US/chrome/browser.dtd
browser/metro/theme/browser.css
browser/metro/theme/platform.css
--- a/browser/metro/base/content/TopSites.js
+++ b/browser/metro/base/content/TopSites.js
@@ -157,32 +157,31 @@ let TopSites = {
   },
   _linkFromNode: function _linkFromNode(aNode) {
     return {
       url: aNode.getAttribute("value"),
       title: aNode.getAttribute("label")
     };
   }
 };
-// The value of useThumbs should not be changed over the lifetime of
-//   the object.
-function TopSitesView(aGrid, aMaxSites, aUseThumbnails) {
+
+function TopSitesView(aGrid, aMaxSites) {
   this._set = aGrid;
   this._set.controller = this;
   this._topSitesMax = aMaxSites;
-  this._useThumbs = aUseThumbnails;
+
   // clean up state when the appbar closes
   window.addEventListener('MozAppbarDismissing', this, false);
   let history = Cc["@mozilla.org/browser/nav-history-service;1"].
                 getService(Ci.nsINavHistoryService);
   history.addObserver(this, false);
-  if (this._useThumbs) {
-    PageThumbs.addExpirationFilter(this);
-    Services.obs.addObserver(this, "Metro:RefreshTopsiteThumbnail", false);
-  }
+
+  PageThumbs.addExpirationFilter(this);
+  Services.obs.addObserver(this, "Metro:RefreshTopsiteThumbnail", false);
+  Services.obs.addObserver(this, "metro_viewstate_changed", false);
 
   NewTabUtils.allPages.register(this);
   TopSites.prepareCache().then(function(){
     this.populateGrid();
   }.bind(this));
 }
 
 TopSitesView.prototype = Util.extend(Object.create(View.prototype), {
@@ -304,29 +303,26 @@ TopSitesView.prototype = Util.extend(Obj
       grid.clearAll(true);
       this.populateGrid();
     }
   },
 
   updateTile: function(aTileNode, aSite, aArrangeGrid) {
     this._updateFavicon(aTileNode, Util.makeURI(aSite.url));
 
-    if (this._useThumbs) {
-      Task.spawn(function() {
-        let filepath = PageThumbsStorage.getFilePathForURL(aSite.url);
-        if (yield OS.File.exists(filepath)) {
-          aSite.backgroundImage = 'url("'+PageThumbs.getThumbnailURL(aSite.url)+'")';
-          if ("isBound" in aTileNode && aTileNode.isBound) {
-            aTileNode.backgroundImage = aSite.backgroundImage;
-          }
+    Task.spawn(function() {
+      let filepath = PageThumbsStorage.getFilePathForURL(aSite.url);
+      if (yield OS.File.exists(filepath)) {
+        aSite.backgroundImage = 'url("'+PageThumbs.getThumbnailURL(aSite.url)+'")';
+        if ("isBound" in aTileNode && aTileNode.isBound) {
+          aTileNode.backgroundImage = aSite.backgroundImage;
         }
-      });
-    } else {
-      delete aSite.backgroundImage;
-    }
+      }
+    });
+
     aSite.applyToTileNode(aTileNode);
     if (aArrangeGrid) {
       this._set.arrangeItems();
     }
   },
 
   populateGrid: function populateGrid() {
     this.isUpdating = true;
@@ -356,38 +352,47 @@ TopSitesView.prototype = Util.extend(Obj
   },
 
   forceReloadOfThumbnail: function forceReloadOfThumbnail(url) {
       let nodes = this._set.querySelectorAll('richgriditem[value="'+url+'"]');
       for (let item of nodes) {
         item.refreshBackgroundImage();
       }
   },
+
   filterForThumbnailExpiration: function filterForThumbnailExpiration(aCallback) {
     aCallback([item.getAttribute("value") for (item of this._set.children)]);
   },
 
   isFirstRun: function isFirstRun() {
     return prefs.getBoolPref("browser.firstrun.show.localepicker");
   },
 
   destruct: function destruct() {
-    if (this._useThumbs) {
-      Services.obs.removeObserver(this, "Metro:RefreshTopsiteThumbnail");
-      PageThumbs.removeExpirationFilter(this);
-    }
+    Services.obs.removeObserver(this, "Metro:RefreshTopsiteThumbnail");
+    PageThumbs.removeExpirationFilter(this);
+    Services.obs.removeObserver(this, "metro_viewstate_changed");
     window.removeEventListener('MozAppbarDismissing', this, false);
   },
 
   // nsIObservers
   observe: function (aSubject, aTopic, aState) {
     switch(aTopic) {
       case "Metro:RefreshTopsiteThumbnail":
         this.forceReloadOfThumbnail(aState);
         break;
+      case "metro_viewstate_changed":
+        for (let item of this._set.children) {
+          if (aState == "snapped") {
+            item.removeAttribute("tiletype");
+          } else {
+            item.setAttribute("tiletype", "thumbnail");
+          }
+        }
+        break;
     }
   },
   // nsINavHistoryObserver
 
   onBeginUpdateBatch: function() {
   },
 
   onEndUpdateBatch: function() {
@@ -423,52 +428,23 @@ TopSitesView.prototype = Util.extend(Obj
 
 });
 
 let TopSitesStartView = {
   _view: null,
   get _grid() { return document.getElementById("start-topsites-grid"); },
 
   init: function init() {
-    this._view = new TopSitesView(this._grid, 8, true);
+    this._view = new TopSitesView(this._grid, 8);
     if (this._view.isFirstRun()) {
       let topsitesVbox = document.getElementById("start-topsites");
       topsitesVbox.setAttribute("hidden", "true");
     }
   },
+
   uninit: function uninit() {
     this._view.destruct();
   },
 
   show: function show() {
     this._grid.arrangeItems();
-  },
+  }
 };
-
-let TopSitesSnappedView = {
-  get _grid() { return document.getElementById("snapped-topsites-grid"); },
-
-  show: function show() {
-    this._grid.arrangeItems();
-  },
-
-  init: function() {
-    this._view = new TopSitesView(this._grid, 8);
-    if (this._view.isFirstRun()) {
-      let topsitesVbox = document.getElementById("snapped-topsites");
-      topsitesVbox.setAttribute("hidden", "true");
-    }
-    Services.obs.addObserver(this, "metro_viewstate_dom_snapped", false);
-  },
-
-  uninit: function uninit() {
-    this._view.destruct();
-    Services.obs.removeObserver(this, "metro_viewstate_dom_snapped");
-  },
-
-  observe: function(aSubject, aTopic, aData) {
-    switch (aTopic) {
-      case "metro_viewstate_dom_snapped":
-          this._grid.arrangeItems();
-        break;
-    }
-  },
-};
--- a/browser/metro/base/content/browser-scripts.js
+++ b/browser/metro/base/content/browser-scripts.js
@@ -127,17 +127,16 @@ let ScriptContexts = {};
   ["ConsolePanelView", "chrome://browser/content/console.js"],
   ["BookmarksStartView", "chrome://browser/content/bookmarks.js"],
   ["HistoryView", "chrome://browser/content/history.js"],
   ["HistoryStartView", "chrome://browser/content/history.js"],
   ["HistoryPanelView", "chrome://browser/content/history.js"],
   ["Site", "chrome://browser/content/Site.js"],
   ["TopSites", "chrome://browser/content/TopSites.js"],
   ["TopSitesView", "chrome://browser/content/TopSites.js"],
-  ["TopSitesSnappedView", "chrome://browser/content/TopSites.js"],
   ["TopSitesStartView", "chrome://browser/content/TopSites.js"],
   ["Sanitizer", "chrome://browser/content/sanitize.js"],
   ["SanitizeUI", "chrome://browser/content/sanitizeUI.js"],
   ["SSLExceptions", "chrome://browser/content/exceptions.js"],
   ["ItemPinHelper", "chrome://browser/content/helperui/ItemPinHelper.js"],
   ["NavButtonSlider", "chrome://browser/content/NavButtonSlider.js"],
   ["ContextUI", "chrome://browser/content/ContextUI.js"],
   ["FlyoutPanelsUI", "chrome://browser/content/flyouts/flyoutUI.js"],
--- a/browser/metro/base/content/browser-ui.js
+++ b/browser/metro/base/content/browser-ui.js
@@ -545,24 +545,22 @@ var BrowserUI = {
             break;
         }
         break;
       case "metro_viewstate_changed":
         this._adjustDOMforViewState();
         let autocomplete = document.getElementById("urlbar-autocomplete");
         if (aData == "snapped") {
           FlyoutPanelsUI.hide();
-          // Order matters (need grids to get dimensions, etc), now
-          // let snapped grid know to refresh/redraw
-          Services.obs.notifyObservers(null, "metro_viewstate_dom_snapped", null);
           autocomplete.setAttribute("orient", "vertical");
         }
         else {
           autocomplete.setAttribute("orient", "horizontal");
         }
+
         break;
     }
   },
 
   /*********************************
    * Internal utils
    */
 
@@ -1095,17 +1093,16 @@ var StartUI = {
   get isStartPageVisible() { return Elements.windowState.hasAttribute("startpage"); },
 
   get maxResultsPerSection() {
     return Services.prefs.getIntPref("browser.display.startUI.maxresults");
   },
 
   sections: [
     "TopSitesStartView",
-    "TopSitesSnappedView",
     "BookmarksStartView",
     "HistoryStartView",
     "RemoteTabsStartView"
   ],
 
   init: function init() {
     Elements.startUI.addEventListener("contextmenu", this, false);
     Elements.startUI.addEventListener("click", this, false);
--- a/browser/metro/base/content/browser.xul
+++ b/browser/metro/base/content/browser.xul
@@ -189,51 +189,43 @@
             <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" orient="horizontal" observes="bcast_preciseInput" flex="1">
+            <scrollbox id="start-scrollbox" observes="bcast_preciseInput" flex="1">
               <vbox id="start-topsites" class="meta-section">
-                <label class="meta-section-title" value="&startTopSitesHeader.label;"/>
+                <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" value="&startBookmarksHeader.label;"/>
+                <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>
+
               <vbox id="start-history" class="meta-section">
-                <label class="meta-section-title" value="&startHistoryHeader.label;"/>
+                <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-remotetabs" class="meta-section">
-                <label class="meta-section-title" value="&startRemoteTabsHeader.label;"/>
+                <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>
 
-          <!-- snapped view -->
-          <hbox id="snapped-start" class="start-page" flex="1" observes="bcast_windowState">
-            <scrollbox id="snapped-scrollbox" orient="vertical" flex="1">
-              <vbox id="snapped-topsites">
-                <label class="meta-section-title" value="&startTopSitesHeader.label;"/>
-                <richgrid id="snapped-topsites-grid" noun="topsite" class="canSnapTiles" rows="8" columns="1" flex="1"/>
-              </vbox>
-              <label class="meta-section-title" value="&snappedBookmarksHeader.label;"
-                onclick="PanelUI.show('bookmarks-container');"/>
-              <label class="meta-section-title" value="&snappedHistoryHeader.label;"
-                onclick="PanelUI.show('history-container');" inputProcessing="true"/>
-              <label id="snappedRemoteTabsLabel" class="meta-section-title" value="&snappedRemoteTabsHeader.label;"
-                onclick="PanelUI.show('remotetabs-container');" inputProcessing="true"/>
-            </scrollbox>
-          </hbox>
         </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"/>
         <box id="horizontal-scroller" class="scroller" orient="horizontal" left="0" bottom="0"/>
--- a/browser/metro/locales/en-US/chrome/browser.dtd
+++ b/browser/metro/locales/en-US/chrome/browser.dtd
@@ -19,21 +19,23 @@
 <!ENTITY startBookmarksHeader.label       "Bookmarks">
 <!ENTITY startHistoryHeader.label         "Recent History">
 <!ENTITY startRemoteTabsHeader.label      "Tabs from Other Devices">
 
 <!-- LOCALIZATION NOTE (snappedRemoteTabsHeader.label): shortened version of startRemoteTabsHeader.label.
      Needs to be two words or shorter to fit in narrow vertical space.-->
 <!-- LOCALIZATION NOTE (snappedRemoteTabsHeader.label,
                         snappedBookmarksHeader.label,
-                        snappedHistoryHeader.lavel )
+                        snappedHistoryHeader.label,
+                        snappedTopSitesHeader.label )
       The '>' character is not part of the name, but is an indicator of more content. Please do not localize the '>' -->
 <!ENTITY snappedRemoteTabsHeader.label    "Remote Tabs >">
-<!ENTITY snappedBookmarksHeader.label       "Bookmarks >">
-<!ENTITY snappedHistoryHeader.label         "Recent History >">
+<!ENTITY snappedBookmarksHeader.label     "Bookmarks >">
+<!ENTITY snappedHistoryHeader.label       "Recent History >">
+<!ENTITY snappedTopSitesHeader.label      "Top Sites >">
 
 <!ENTITY autocompleteResultsHeader.label  "Your Results">
 <!ENTITY autocompleteSearchesHeader.label "Internet Searches"> 
 
 <!ENTITY downloadsHeader.label     "Downloads">
 <!ENTITY downloadShowPage.label    "Go to Page">
 <!ENTITY downloadShow2.label       "Find">
 <!ENTITY downloadOpen2.label       "Open">
--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -739,21 +739,22 @@ setting[type="radio"] > vbox {
   min-width: @grid_double_column_width@;
 }
 
 #start-topsites {
   /* allot space for 3 tile columns for the topsites grid */
   min-width: calc(3 * @grid_double_column_width@);
 }
 
-/* if snapped, hide the fullscreen awesome screen, if viewstate is anything
- *  other than snapped, hide the snapped awesome screen */
-#start[viewstate="snapped"],
-#snapped-start:not([viewstate="snapped"]) {
-  visibility: collapse;
+#start-scrollbox {
+  -moz-box-orient: horizontal;
+}
+
+#start[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;
 }
 
 #start-container,
--- a/browser/metro/theme/platform.css
+++ b/browser/metro/theme/platform.css
@@ -656,16 +656,22 @@ arrowbox {
 
 .meta-section {
   margin: 0 @metro_spacing_large@;
 }
 
 .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 {
+  visibility: visible;
 }
 
 /* App bars ----------------------------------------------------------------- */
 
 appbar {
   display: block;
   position: fixed;
   bottom: 0;