Bug 536945 - Implement wrapping of tab previews in JS to avoid performance issues with display:block. r=mstange

browser/base/content/browser-tabPreviews.js

@@ -569,10 +569,7 @@ var allTabs = {
     delete this.tabCloseButton;
     return this.tabCloseButton = document.getElementById("allTabs-tab-close-button");
   },
-  get _browserCommandSet () {
-    delete this._browserCommandSet;
-    return this._browserCommandSet = document.getElementById("mainCommandSet");
-  },
+  get previews () this.container.getElementsByClassName("allTabs-preview"),
   get isOpen () this.panel.state == "open" || this.panel.state == "showing",
 
   init: function allTabs_init() {
@@ -644,7 +641,7 @@ var allTabs = {
 
     var filter = this._currentFilter.split(/\s+/g);
     this._visible = 0;
-    Array.forEach(this.container.childNodes, function (preview) {
+    Array.forEach(this.previews, function (preview) {
       var tab = preview._tab;
       var matches = 0;
       if (filter.length) {
@@ -712,27 +709,34 @@ var allTabs = {
   },
 
   handleEvent: function allTabs_handleEvent(event) {
+    if (/^Tab/.test(event.type)) {
+      var tab = event.target;
+      if (event.type != "TabOpen")
+        var preview = this._getPreview(tab);
+    }
     switch (event.type) {
       case "TabAttrModified":
         // tab attribute modified (e.g. label, crop, busy, image)
-        let preview = this._getPreview(event.target);
         if (!preview.hidden)
           this._updatePreview(preview);
         break;
       case "TabOpen":
         if (this.isOpen)
           this.close();
-        this._addPreview(event.target);
+        this._addPreview(tab);
         break;
       case "TabMove":
-        if (event.target.nextSibling)
-          this.container.insertBefore(this._getPreview(event.target),
-                                      this._getPreview(event.target.nextSibling));
+        let siblingPreview = tab.nextSibling &&
+                             this._getPreview(tab.nextSibling);
+        if (siblingPreview)
+          siblingPreview.parentNode.insertBefore(preview, siblingPreview);
         else
-          this.container.appendChild(this._getPreview(event.target));
+          this.container.lastChild.appendChild(preview);
+        if (this.isOpen && !preview.hidden)
+          this._reflow();
         break;
       case "TabClose":
-        this._removePreview(this._getPreview(event.target));
+        this._removePreview(preview);
         break;
       case "keypress":
         this._onKeyPress(event);
@@ -754,18 +758,22 @@ var allTabs = {
     delete this._stack;
     return this._stack = document.getElementById("allTabs-stack");
   },
+  get _browserCommandSet () {
+    delete this._browserCommandSet;
+    return this._browserCommandSet = document.getElementById("mainCommandSet");
+  },
   get _previewLabelHeight () {
     delete this._previewLabelHeight;
-    return this._previewLabelHeight = parseInt(getComputedStyle(this.container.firstChild, "").lineHeight);
+    return this._previewLabelHeight = parseInt(getComputedStyle(this.previews[0], "").lineHeight);
   },
 
   get _visiblePreviews ()
-    Array.filter(this.container.childNodes, function (preview) !preview.hidden),
+    Array.filter(this.previews, function (preview) !preview.hidden),
 
   get _firstVisiblePreview () {
     if (this._visible == 0)
       return null;
-    var previews = this.container.childNodes;
+    var previews = this.previews;
     for (let i = 0; i < previews.length; i++) {
       if (!previews[i].hidden)
         return previews[i];
@@ -802,11 +810,23 @@ var allTabs = {
                         "min-height:" + innerHeight + "px;";
     }
 
-    Array.forEach(this.container.childNodes, function (preview) {
+    var previews = Array.slice(this.previews);
+
+    while (this.container.hasChildNodes())
+      this.container.removeChild(this.container.firstChild);
+    for (let i = 0; i < rows; i++)
+      this.container.appendChild(document.createElement("hbox"));
+
+    var row = this.container.firstChild;
+    var i = 0;
+    previews.forEach(function (preview) {
       preview.setAttribute("minwidth", outerWidth);
       preview.setAttribute("height", outerHeight);
       preview.setAttribute("canvasstyle", canvasStyle);
       preview.removeAttribute("closebuttonhover");
+      row.appendChild(preview);
+      if (!preview.hidden)
+        row = this.container.childNodes[Math.floor(++i / this._columns)];
     }, this);
 
     this._stack.width = maxWidth;
@@ -820,13 +840,13 @@ var allTabs = {
     var preview = document.createElement("button");
     preview.className = "allTabs-preview";
     preview._tab = aTab;
-    return this.container.appendChild(preview);
+    this.container.lastChild.appendChild(preview);
   },
 
   _removePreview: function allTabs_removePreview(aPreview) {
     var updateUI = (this.isOpen && !aPreview.hidden);
     aPreview._tab = null;
-    this.container.removeChild(aPreview);
+    aPreview.parentNode.removeChild(aPreview);
     if (updateUI) {
       this._visible--;
       this._reflow();
@@ -835,7 +855,7 @@ var allTabs = {
   },
 
   _getPreview: function allTabs_getPreview(aTab) {
-    var previews = this.container.childNodes;
+    var previews = this.previews;
     for (let i = 0; i < previews.length; i++)
       if (previews[i]._tab == aTab)
         return previews[i];
@@ -854,7 +874,7 @@ var allTabs = {
     }
 
     if (event &&
-        event.target.parentNode == this.container &&
+        event.target.parentNode.parentNode == this.container &&
         (event.target._tab.previousSibling || event.target._tab.nextSibling)) {
       let preview = event.target.getBoundingClientRect();
       let container = this.container.getBoundingClientRect();
@@ -952,7 +972,7 @@ var allTabs = {
 
   _advanceFocusVertically: function allTabs_advanceFocusVertically(event) {
     var preview = document.activeElement;
-    if (!preview || preview.parentNode != this.container)
+    if (!preview || preview.parentNode.parentNode != this.container)
       return;
 
     event.stopPropagation();

browser/base/content/browser.css

@@ -192,14 +192,9 @@ window[chromehidden~="toolbar"] toolbar:not(.toolbar-primary):not(.chromeclass-m
 /* ::::: All Tabs Panel ::::: */
 .allTabs-preview {
   -moz-binding: url("chrome://browser/content/browser-tabPreviews.xml#allTabs-preview");
-  vertical-align: top;
 }
 
 #allTabs-tab-close-button {
   -moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-image");
   margin: 0;
 }
-
-#allTabs-container {
-  display: block;
-}

browser/base/content/browser.xul

@@ -288,7 +288,7 @@
                        tooltiptext="&closeCmd.label;"/>
       </hbox>
       <stack id="allTabs-stack">
-        <box id="allTabs-container"/>
+        <vbox id="allTabs-container"><hbox/></vbox>
         <toolbarbutton id="allTabs-tab-close-button"
                        class="tab-close-button"
                        oncommand="allTabs.closeTab(event);"