--- a/browser/base/content/browser-ctrlTab.js
+++ b/browser/base/content/browser-ctrlTab.js
@@ -138,32 +138,39 @@ var tabPreviewPanelHelper = {
     }
   }
 };
 
 /**
  * Ctrl-Tab panel
  */
 var ctrlTab = {
+  maxTabPreviews: 6,
   get panel() {
     delete this.panel;
     return this.panel = document.getElementById("ctrlTab-panel");
   },
   get showAllButton() {
     delete this.showAllButton;
-    return this.showAllButton = document.getElementById("ctrlTab-showAll");
+    let button = this.makePreview(true);
+    button.setAttribute("id", "ctrlTab-showAll");
+    document.getElementById("ctrlTab-showAll-container").appendChild(button);
+    return this.showAllButton = button;
   },
   get previews() {
     delete this.previews;
+    let previewsContainer = document.getElementById("ctrlTab-previews");
+    for (let i = 0; i < this.maxTabPreviews; i++) {
+      previewsContainer.appendChild(this.makePreview(false));
+    }
+    // Ensure that showAllButton is in the document before returning the single
+    // node list that includes both the previews and the button.
+    this.showAllButton;
     return this.previews = this.panel.getElementsByClassName("ctrlTab-preview");
   },
-  get maxTabPreviews() {
-    delete this.maxTabPreviews;
-    return this.maxTabPreviews = this.previews.length - 1;
-  },
   get canvasWidth() {
     delete this.canvasWidth;
     return this.canvasWidth = Math.ceil(screen.availWidth * .85 / this.maxTabPreviews);
   },
   get canvasHeight() {
     delete this.canvasHeight;
     return this.canvasHeight = Math.round(this.canvasWidth * tabPreviews.aspectRatio);
   },
@@ -223,56 +230,103 @@ var ctrlTab = {
       this.init();
     else
       this.uninit();
   },
   observe(aSubject, aTopic, aPrefName) {
     this.readPref();
   },
 
+  makePreview: function ctrlTab_makePreview(aIsShowAllButton) {
+    let preview = document.createElement("button");
+    preview.setAttribute("class", "ctrlTab-preview");
+    preview.setAttribute("pack", "center");
+    if (!aIsShowAllButton) {
+      preview.setAttribute("flex", "1");
+    }
+    preview.addEventListener("mouseover", () => this._mouseOverFocus(preview));
+    preview.addEventListener("command", () => this.pick(preview));
+    preview.addEventListener("click", event => {
+      if (event.button == 1) {
+        this.remove(preview);
+      } else if (AppConstants.platform == "macosx" && event.button == 2) {
+        // Control+click is a right click on OS X
+        this.pick(preview);
+      }
+    });
+
+    let previewInner = document.createElement("vbox");
+    previewInner.setAttribute("class", "ctrlTab-preview-inner");
+    preview.appendChild(previewInner);
+
+    if (!aIsShowAllButton) {
+      let canvasWidth = this.canvasWidth;
+      let canvasHeight = this.canvasHeight;
+
+      let canvas = preview._canvas = document.createElement("hbox");
+      canvas.setAttribute("class", "ctrlTab-canvas");
+      canvas.setAttribute("width", canvasWidth);
+      canvas.setAttribute("style", "max-width:" + canvasWidth + "px;" +
+                                   "min-width:" + canvasWidth + "px;" +
+                                   "max-height:" + canvasHeight + "px;" +
+                                   "min-height:" + canvasHeight + "px;");
+      previewInner.appendChild(canvas);
+
+      let faviconContainer = document.createElement("hbox");
+      faviconContainer.setAttribute("class", "ctrlTab-favicon-container");
+      previewInner.appendChild(faviconContainer);
+
+      let favicon = preview._favicon = document.createElement("image");
+      favicon.setAttribute("class", "ctrlTab-favicon");
+      faviconContainer.appendChild(favicon);
+    }
+
+    let label = preview._label = document.createElement("label");
+    label.setAttribute("class", "ctrlTab-label plain");
+    label.setAttribute("crop", "end");
+    previewInner.appendChild(label);
+
+    return preview;
+  },
+
   updatePreviews: function ctrlTab_updatePreviews() {
     for (let i = 0; i < this.previews.length; i++)
       this.updatePreview(this.previews[i], this.tabList[i]);
 
     var showAllLabel = gNavigatorBundle.getString("ctrlTab.listAllTabs.label");
-    this.showAllButton.label =
-      PluralForm.get(this.tabCount, showAllLabel).replace("#1", this.tabCount);
+    this.showAllButton._label.setAttribute("value",
+      PluralForm.get(this.tabCount, showAllLabel).replace("#1", this.tabCount));
     this.showAllButton.hidden = !allTabs.canOpen;
   },
 
   updatePreview: function ctrlTab_updatePreview(aPreview, aTab) {
     if (aPreview == this.showAllButton)
       return;
 
     aPreview._tab = aTab;
 
-    if (aPreview.firstChild)
-      aPreview.firstChild.remove();
+    if (aPreview._canvas.firstChild) {
+      aPreview._canvas.firstChild.remove();
+    }
+
     if (aTab) {
-      let canvasWidth = this.canvasWidth;
-      let canvasHeight = this.canvasHeight;
-      aPreview.appendChild(tabPreviews.get(aTab));
-      aPreview.setAttribute("label", aTab.label);
+      aPreview._canvas.appendChild(tabPreviews.get(aTab));
+      aPreview._label.setAttribute("value", aTab.label);
       aPreview.setAttribute("tooltiptext", aTab.label);
-      aPreview.setAttribute("canvaswidth", canvasWidth);
-      aPreview.setAttribute("canvasstyle",
-                            "max-width:" + canvasWidth + "px;" +
-                            "min-width:" + canvasWidth + "px;" +
-                            "max-height:" + canvasHeight + "px;" +
-                            "min-height:" + canvasHeight + "px;");
-      if (aTab.image)
-        aPreview.setAttribute("image", aTab.image);
-      else
-        aPreview.removeAttribute("image");
+      if (aTab.image) {
+        aPreview._favicon.setAttribute("src", aTab.image);
+      } else {
+        aPreview._favicon.removeAttribute("src");
+      }
       aPreview.hidden = false;
     } else {
       aPreview.hidden = true;
-      aPreview.removeAttribute("label");
+      aPreview._label.removeAttribute("value");
       aPreview.removeAttribute("tooltiptext");
-      aPreview.removeAttribute("image");
+      aPreview._favicon.removeAttribute("src");
     }
   },
 
   advanceFocus: function ctrlTab_advanceFocus(aForward) {
     let selectedIndex = Array.indexOf(this.previews, this.selected);
     do {
       selectedIndex += aForward ? 1 : -1;
       if (selectedIndex < 0)

--- a/browser/base/content/browser-tabPreviews.xml
+++ b/browser/base/content/browser-tabPreviews.xml
@@ -1,35 +1,13 @@
 <?xml version="1.0"?>
-
-# -*- Mode: HTML -*-
-# This Source Code Form is subject to the terms of the Mozilla Public
-# License, v. 2.0. If a copy of the MPL was not distributed with this
-# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <bindings id="tabPreviews"
           xmlns="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl">
   <binding id="ctrlTab-preview" extends="chrome://global/content/bindings/button.xml#button-base">
-    <content pack="center">
-      <xul:vbox class="ctrlTab-preview-inner">
-        <xul:hbox class="ctrlTab-canvas" xbl:inherits="style=canvasstyle,width=canvaswidth">
-          <children/>
-        </xul:hbox>
-        <xul:hbox class="ctrlTab-favicon-container" xbl:inherits="hidden=noicon">
-          <xul:image class="ctrlTab-favicon" xbl:inherits="src=image"/>
-        </xul:hbox>
-        <xul:label class="ctrlTab-label plain" xbl:inherits="value=label" crop="end"/>
-      </xul:vbox>
-    </content>
-
-    <handlers>
-      <handler event="mouseover" action="ctrlTab._mouseOverFocus(this);"/>
-      <handler event="command" action="ctrlTab.pick(this);"/>
-      <handler event="click" button="1" action="ctrlTab.remove(this);"/>
-#ifdef XP_MACOSX
-# Control+click is a right click on OS X
-      <handler event="click" button="2" action="ctrlTab.pick(this);"/>
-#endif
-    </handlers>
+    <content/>
   </binding>
 </bindings>

--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -416,27 +416,18 @@
                               gContextMenu = null;
                               updateEditUIVisibility();">
 #include browser-context.inc
     </menupopup>
 
 #include ../../components/places/content/placesContextMenu.inc.xul
 
     <panel id="ctrlTab-panel" hidden="true" norestorefocus="true" level="top">
-      <hbox>
-        <button class="ctrlTab-preview" flex="1"/>
-        <button class="ctrlTab-preview" flex="1"/>
-        <button class="ctrlTab-preview" flex="1"/>
-        <button class="ctrlTab-preview" flex="1"/>
-        <button class="ctrlTab-preview" flex="1"/>
-        <button class="ctrlTab-preview" flex="1"/>
-      </hbox>
-      <hbox pack="center">
-        <button id="ctrlTab-showAll" class="ctrlTab-preview" noicon="true"/>
-      </hbox>
+      <hbox id="ctrlTab-previews"/>
+      <hbox id="ctrlTab-showAll-container" pack="center"/>
     </panel>
 
     <panel id="pageActionPanel"
            class="cui-widget-panel"
            role="group"
            type="arrow"
            hidden="true"
            flip="slide"

--- a/browser/base/jar.mn
+++ b/browser/base/jar.mn
@@ -67,17 +67,17 @@ browser.jar:
         content/browser/browser-media.js              (content/browser-media.js)
         content/browser/browser-pageActions.js        (content/browser-pageActions.js)
         content/browser/browser-places.js             (content/browser-places.js)
         content/browser/browser-plugins.js            (content/browser-plugins.js)
         content/browser/browser-safebrowsing.js       (content/browser-safebrowsing.js)
         content/browser/browser-sidebar.js            (content/browser-sidebar.js)
         content/browser/browser-siteIdentity.js       (content/browser-siteIdentity.js)
         content/browser/browser-sync.js               (content/browser-sync.js)
-*       content/browser/browser-tabPreviews.xml       (content/browser-tabPreviews.xml)
+        content/browser/browser-tabPreviews.xml       (content/browser-tabPreviews.xml)
         content/browser/browser-tabsintitlebar.js       (content/browser-tabsintitlebar.js)
         content/browser/browser-thumbnails.js         (content/browser-thumbnails.js)
         content/browser/browser-trackingprotection.js (content/browser-trackingprotection.js)
         content/browser/browser-webrender.js          (content/browser-webrender.js)
         content/browser/tab-content.js                (content/tab-content.js)
         content/browser/content.js                    (content/content.js)
         content/browser/defaultthemes/1.header.jpg    (content/defaultthemes/1.header.jpg)
         content/browser/defaultthemes/1.icon.jpg      (content/defaultthemes/1.icon.jpg)

--- a/browser/themes/shared/ctrlTab.inc.css
+++ b/browser/themes/shared/ctrlTab.inc.css
@@ -16,18 +16,18 @@
   border-style: none;
   padding: 20px 10px 10px;
 %ifndef XP_MACOSX
   font-weight: bold;
 %endif
   text-shadow: 0 0 1px hsl(0,0%,12%), 0 0 2px hsl(0,0%,12%);
 }
 
-.ctrlTab-preview > html|img,
-.ctrlTab-preview > html|canvas {
+.ctrlTab-canvas > html|img,
+.ctrlTab-canvas > html|canvas {
   min-width: inherit;
   max-width: inherit;
   min-height: inherit;
   max-height: inherit;
 }
 
 .ctrlTab-favicon-container {
   position: relative;
@@ -41,17 +41,17 @@
   margin-bottom: 2px;
   margin-inline-end: -6px;
   padding: 5px;
   background-color: #F9F9FA;
   border-radius: 6px;
   box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
 }
 
-.ctrlTab-preview:not(#ctrlTab-showAll) > .ctrlTab-preview-inner > .ctrlTab-canvas {
+.ctrlTab-canvas {
   box-shadow: 1px 1px 2px hsl(0,0%,12%);
   margin-bottom: 8px;
 }
 
 .ctrlTab-preview-inner {
   padding: 8px;
   border: 2px solid transparent;
   border-radius: .5em;