Bug 465076 - Ctrl+Tab / All Tabs design revision (pref'd off). r=enn

browser/app/profile/firefox.js

@@ -358,7 +358,8 @@ pref("browser.tabs.closeButtons", 1);
 // false  return to the adjacent tab (old default)
 pref("browser.tabs.selectOwnerOnClose", true);
 
-pref("browser.ctrlTab.previews", true);
+pref("browser.allTabs.previews", false);
+pref("browser.ctrlTab.previews", false);
 pref("browser.ctrlTab.recentlyUsedLimit", 7);
 
 // Default bookmark sorting

browser/base/content/browser-menubar.inc

@@ -441,6 +441,12 @@
                           type="checkbox"
                           command="View:FullScreen"/>
 #endif
+                <menuitem id="menu_showAllTabs"
+                          hidden="true"
+                          accesskey="&showAllTabsCmd.accesskey;"
+                          label="&showAllTabsCmd.label;"
+                          command="Browser:ShowAllTabs"
+                          key="key_showAllTabs"/>
                 <menuseparator hidden="true" id="documentDirection-separator"/>
                 <menuitem id="documentDirection-swap"
                           hidden="true"

browser/base/content/browser-sets.inc

@@ -115,6 +115,7 @@
     </command>
     <command id="Browser:NextTab" oncommand="gBrowser.mTabContainer.advanceSelectedTab(1, true);"/>
     <command id="Browser:PrevTab" oncommand="gBrowser.mTabContainer.advanceSelectedTab(-1, true);"/>
+    <command id="Browser:ShowAllTabs" oncommand="allTabs.open();"/>
     <command id="cmd_fullZoomReduce"  oncommand="FullZoom.reduce()"/>
     <command id="cmd_fullZoomEnlarge" oncommand="FullZoom.enlarge()"/>
     <command id="cmd_fullZoomReset"   oncommand="FullZoom.reset()"/>
@@ -317,7 +318,9 @@
     <key                          key="&fullZoomEnlargeCmd.commandkey3;" command="cmd_fullZoomEnlarge" modifiers="accel"/>
     <key id="key_fullZoomReset"   key="&fullZoomResetCmd.commandkey;"    command="cmd_fullZoomReset"   modifiers="accel"/>
     <key                          key="&fullZoomResetCmd.commandkey2;"   command="cmd_fullZoomReset"   modifiers="accel"/>
-    
+
+    <key id="key_showAllTabs" command="Browser:ShowAllTabs" keycode="VK_TAB" modifiers="control,shift"/>
+
     <key id="key_switchTextDirection" key="&bidiSwitchTextDirectionItem.commandkey;" command="cmd_switchTextDirection" modifiers="accel,shift" />
 
     <key id="key_privatebrowsing" command="Tools:PrivateBrowsing" key="&privateBrowsingCmd.commandkey;" modifiers="accel,shift"/>

browser/base/content/browser-tabPreviews.xml

@@ -41,21 +41,49 @@
           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-thumbnail">
-    <content align="center">
-      <children/>
-      <xul:label xbl:inherits="value=label,crop"/>
+  <binding id="ctrlTab-preview" extends="chrome://global/content/bindings/button.xml#button-base">
+    <content pack="center">
+      <xul:stack>
+        <xul:vbox class="ctrlTab-preview-inner" align="center" pack="center"
+                  xbl:inherits="width=canvaswidth">
+          <xul:hbox class="tabPreview-canvas" xbl:inherits="style=canvasstyle">
+            <children/>
+          </xul:hbox>
+          <xul:label xbl:inherits="value=label,crop" class="plain"/>
+        </xul:vbox>
+        <xul:hbox class="ctrlTab-favicon-container" xbl:inherits="hidden=noicon">
+          <xul:image class="ctrlTab-favicon" xbl:inherits="src=image"/>
+        </xul:hbox>
+      </xul:stack>
     </content>
     <handlers>
-      <handler event="click" button="0" action="ctrlTab.selectThumbnail(this);"/>
-      <handler event="click" button="1" action="gBrowser.removeTab(this._tab);"/>
+      <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"><![CDATA[
-        if (!ctrlTab.sticky)
-          ctrlTab.selectThumbnail(this);
-      ]]></handler>
+      <handler event="click" button="2" action="ctrlTab.pick(this);"/>
 #endif
     </handlers>
   </binding>
+
+  <binding id="allTabs-preview" extends="chrome://global/content/bindings/button.xml#button-base">
+    <content pack="center" align="center">
+      <xul:stack>
+        <xul:vbox class="allTabs-preview-inner" align="center" pack="center">
+          <xul:hbox class="tabPreview-canvas" xbl:inherits="style=canvasstyle">
+            <children/>
+          </xul:hbox>
+          <xul:label flex="1" xbl:inherits="value=label,crop" class="allTabs-preview-label plain"/>
+        </xul:vbox>
+        <xul:hbox class="allTabs-favicon-container">
+          <xul:image class="allTabs-favicon" xbl:inherits="src=image"/>
+        </xul:hbox>
+      </xul:stack>
+    </content>
+    <handlers>
+      <handler event="command" action="allTabs.pick(this);"/>
+      <handler event="click" button="1" action="gBrowser.removeTab(this._tab);"/>
+    </handlers>
+  </binding>
 </bindings>

browser/base/content/browser.css

@@ -123,24 +123,46 @@ window[chromehidden~="toolbar"] toolbar:not(.toolbar-primary):not(.chromeclass-m
   display: -moz-box;
 }
 
-/* Tab Previews */
-#ctrlTab-panel {
-  -moz-user-focus: normal;
+/* ::::: Keyboard UI Panel ::::: */
+.KUI-panel-closebutton {
+  -moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-image");
 }
 
-.ctrlTab-thumbnail {
-  -moz-binding: url("chrome://browser/content/browser-tabPreviews.xml#ctrlTab-thumbnail");
+.ctrlTab-preview > html|canvas,
+.allTabs-preview > html|canvas {
+  min-width: inherit;
+  max-width: inherit;
+  min-height: inherit;
+  max-height: inherit;
 }
 
-.ctrlTab-thumbnail:not([valid]) {
-  visibility: hidden;
+.ctrlTab-favicon-container,
+.allTabs-favicon-container {
+  -moz-box-align: start;
+  -moz-box-pack: start;
 }
 
-#ctrlTab-pages {
+.ctrlTab-favicon,
+.allTabs-favicon {
+  width: 16px;
+  height: 16px;
+}
+
+/* ::::: Ctrl-Tab Panel ::::: */
+.ctrlTab-preview {
+  -moz-binding: url("chrome://browser/content/browser-tabPreviews.xml#ctrlTab-preview");
+}
+
+/* ::::: All Tabs Panel ::::: */
+.allTabs-preview {
+  -moz-binding: url("chrome://browser/content/browser-tabPreviews.xml#allTabs-preview");
+}
+
+#allTabs-tab-close-button {
+  -moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-image");
+  margin: 0;
+}
+
+#allTabs-container {
   display: block;
-  text-align: center;
-}
- 
-.ctrlTab-pagePointer {
-  display: inline-block;
 }

browser/base/content/browser.js

@@ -1058,6 +1058,8 @@ function BrowserStartup() {
     gURLBar.setAttribute("enablehistory", "false");
   }
 
+  allTabs.readPref();
+
   setTimeout(delayedStartup, 0, isLoadingBlank, mustLoadSidebar);
 }
 
@@ -1318,7 +1320,9 @@ function delayedStartup(isLoadingBlank, mustLoadSidebar) {
   gBrowser.addEventListener("command", BrowserOnCommand, false);
 
   tabPreviews.init();
-  ctrlTab.init();
+  ctrlTab.readPref();
+  gPrefService.addObserver(ctrlTab.prefName, ctrlTab, false);
+  gPrefService.addObserver(allTabs.prefName, allTabs, false);
 
   // Initialize the microsummary service by retrieving it, prompting its factory
   // to create its singleton, whose constructor initializes the service.
@@ -1371,6 +1375,7 @@ function BrowserShutdown()
 {
   tabPreviews.uninit();
   ctrlTab.uninit();
+  allTabs.uninit();
 
   gGestureSupport.init(false);
 

browser/base/content/browser.xul

@@ -242,30 +242,44 @@
       <label crop="center" flex="1" class="tooltip-label"/>
     </tooltip>
 
-    <panel id="ctrlTab-panel" class="KUI-panel" hidden="true" norestorefocus="true" ignorekeys="true">
+    <panel id="ctrlTab-panel" class="KUI-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">
-        <textbox id="ctrlTab-search"
+        <button id="ctrlTab-showAll" class="ctrlTab-preview" noicon="true"/>
+      </hbox>
+    </panel>
+
+    <panel id="allTabs-panel" hidden="true" norestorefocus="true" ignorekeys="true"
+# XXX: KUI style disabled, because the transparent background slows down
+#      interacting with the panel, esp. the search field.
+#           class="KUI-panel"
+           onmouseover="allTabs._updateTabCloseButton(event);">
+      <hbox id="allTabs-meta" align="center">
+        <spacer flex="1"/>
+        <textbox id="allTabs-filter"
+                 tooltiptext="&allTabs.filter.emptyText;"
                  type="search"
-                 emptytext="&ctrlTab.search.emptyText;"
-                 oncommand="ctrlTab.search();"
-                 onfocus="ctrlTab.sticky = true;"/>
+                 oncommand="allTabs.filter();"/>
+        <spacer flex="1"/>
+        <toolbarbutton class="KUI-panel-closebutton"
+                       oncommand="allTabs.close()"
+                       tooltiptext="&closeCmd.label;"/>
       </hbox>
-      <hbox class="ctrlTab-row">
-        <hbox flex="1" pack="center"><vbox class="ctrlTab-thumbnail"/></hbox>
-        <vbox class="ctrlTab-thumbnail"/>
-        <hbox flex="1" pack="center"><vbox class="ctrlTab-thumbnail"/></hbox>
-      </hbox>
-      <hbox class="ctrlTab-row">
-        <hbox flex="1" pack="center"><vbox class="ctrlTab-thumbnail"/></hbox>
-        <vbox class="ctrlTab-thumbnail"/>
-        <hbox flex="1" pack="center"><vbox class="ctrlTab-thumbnail"/></hbox>
-      </hbox>
-      <hbox class="ctrlTab-row">
-        <hbox flex="1" pack="center"><vbox class="ctrlTab-thumbnail"/></hbox>
-        <vbox class="ctrlTab-thumbnail"/>
-        <hbox flex="1" pack="center"><vbox class="ctrlTab-thumbnail"/></hbox>
-      </hbox>
-      <hbox id="ctrlTab-pages"/>
+      <stack id="allTabs-stack">
+        <box id="allTabs-container"/>
+        <toolbarbutton id="allTabs-tab-close-button"
+                       class="tab-close-button"
+                       oncommand="allTabs.closeTab(event);"
+                       tooltiptext="&closeCmd.label;"
+                       style="visibility:hidden"/>
+      </stack>
     </panel>
   </popupset>
 

browser/base/content/tabbrowser.xml

@@ -2879,8 +2879,11 @@
           <xul:stack align="center" pack="end" chromedir="&locale.dir;">
             <xul:hbox flex="1" class="tabs-alltabs-box-animate" anonid="alltabs-box-animate"/>
             <xul:toolbarbutton class="tabs-alltabs-button" anonid="alltabs-button"
-                               tooltiptext="&listAllTabs.label;"
-                               oncommand="ctrlTab.open(true);"/>
+                               type="menu"
+                               tooltiptext="&listAllTabs.label;">
+             <xul:menupopup class="tabs-alltabs-popup" anonid="alltabs-popup"
+                            position="after_end"/>
+            </xul:toolbarbutton>
           </xul:stack>
           <xul:toolbarbutton anonid="tabs-closebutton"
                              class="close-button tabs-closebutton" chromedir="&locale.dir;"/>
@@ -3293,25 +3296,6 @@
   <binding id="tabbrowser-alltabs-popup"
            extends="chrome://global/content/bindings/popup.xml#popup">
     <implementation implements="nsIDOMEventListener">
-      <field name="_xulWindow">
-        null
-      </field>
-
-      <constructor><![CDATA[
-        // We cannot cache the XULBrowserWindow object itself since it might
-        // be set after this binding is constructed.
-        try {
-          this._xulWindow = 
-            window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
-                  .getInterface(Components.interfaces.nsIWebNavigation)
-                  .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
-                  .treeOwner
-                  .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
-                  .getInterface(Components.interfaces.nsIXULWindow);
-        }
-        catch(ex) { }
-      ]]></constructor>
-
       <method name="_menuItemOnCommand">
         <parameter name="aEvent"/>
 
@@ -3471,9 +3455,6 @@
 
       <handler event="DOMMenuItemActive">
       <![CDATA[
-        if (!this._xulWindow || !this._xulWindow.XULBrowserWindow)
-          return;
-
         var tab = event.target.tab;
         if (tab) {
           var statusText = tab.linkedBrowser.currentURI.spec;
@@ -3484,16 +3465,13 @@
             statusText = " ";
           }
 
-          this._xulWindow.XULBrowserWindow.setOverLink(statusText, null);
+          XULBrowserWindow.setOverLink(statusText, null);
         }
       ]]></handler>
 
       <handler event="DOMMenuItemInactive">
       <![CDATA[
-        if (!this._xulWindow || !this._xulWindow.XULBrowserWindow)
-          return;
-
-        this._xulWindow.XULBrowserWindow.setOverLink("", null);
+        XULBrowserWindow.setOverLink("", null);
       ]]></handler>
 
     </handlers>

browser/base/content/test/browser_ctrlTab.js

@@ -1,5 +1,5 @@
 function test() {
-  waitForExplicitFinish();
+  gPrefService.setBoolPref("browser.ctrlTab.previews", true);
 
   gBrowser.addTab();
   gBrowser.addTab();
@@ -9,7 +9,7 @@ function test() {
 
   ctrlTabTest([2]      , 1, 0);
   ctrlTabTest([2, 3, 1], 2, 2);
-  ctrlTabTest([]       , 4, 2);
+  ctrlTabTest([]       , 5, 2);
 
   {
     let selectedIndex = gBrowser.tabContainer.selectedIndex;
@@ -27,9 +27,12 @@ function test() {
     is(gBrowser.mTabs.length, tabs - 1, "Ctrl+Tab -> Ctrl+W removes one tab");
     releaseCtrl();
   }
-  assertTabs(3);
 
-  ctrlTabTest([2, 1, 0], 7, 1);
+  assertTabs(3);
+  ctrlTabTest([2, 1, 0], 9, 1);
+
+  gBrowser.addTab();
+  assertTabs(4);
 
   { // test for bug 445369
     selectTabs([1, 2, 0]);
@@ -49,12 +52,12 @@ function test() {
     ok(gBrowser.selectedTab == selectedTab,
        "Ctrl+Tab*2 -> Ctrl+W -> Ctrl+Shift+Tab*2 keeps the selected tab");
   }
+  gBrowser.removeTab(gBrowser.tabContainer.lastChild);
   assertTabs(2);
 
   ctrlTabTest([1], 1, 0);
 
   gBrowser.removeTab(gBrowser.tabContainer.lastChild);
-
   assertTabs(1);
 
   { // test for bug 445768
@@ -71,65 +74,8 @@ function test() {
        "Ctrl+Tab doesn't change focus if one tab is open");
   }
 
-  gBrowser.addTab();
-  gBrowser.addTab();
-  gBrowser.addTab();
-
-  assertTabs(4);
-  selectTabs([0, 1, 2, 3]);
-  pressCtrlTab();
-  ctrlTab.panel.addEventListener("popupshown", stickyTests, false);
-
-  function stickyTests() {
-    ctrlTab.panel.removeEventListener("popupshown", stickyTests, false);
-
-    EventUtils.synthesizeKey("f", { ctrlKey: true });
-    is(document.activeElement, ctrlTab.searchField.inputField,
-       "Ctrl+Tab -> Ctrl+F focuses the panel's search field");
-
-    releaseCtrl();
-    ok(isOpen(),
-       "panel is sticky after focusing the search field and releasing the Ctrl key");
-
-    EventUtils.synthesizeKey("f", {});
-    EventUtils.synthesizeKey("o", {});
-    EventUtils.synthesizeKey("o", {});
-    is(ctrlTab.searchField.value, "foo",
-       "text entered into search field");
-
-    EventUtils.synthesizeKey("VK_RETURN", {});
-    ok(isOpen(),
-       "Enter key kicks pending search off; the panel stays open as there's no match");
-    is(ctrlTab.searchField.value, "foo",
-       "search field value persists after Enter pressed");
-
-    EventUtils.synthesizeKey("VK_ESCAPE", {});
-    is(ctrlTab.searchField.value, "",
-       "ESC key clears the search field");
-    ok(isOpen(),
-       "Clearing the search field with ESC keeps the panel open");
-
-    // blur the search field
-    EventUtils.synthesizeKey("VK_TAB", {});
-    isnot(document.activeElement, ctrlTab.searchField.inputField,
-          "Tab key blurs the panel's search field");
-
-    // advance selection and close panel
-    EventUtils.synthesizeKey("VK_TAB", {});
-    EventUtils.synthesizeKey("VK_TAB", {});
-    EventUtils.synthesizeKey("VK_RETURN", {});
-    ok(!isOpen(),
-       "Enter key closes the panel");
-    is(gBrowser.tabContainer.selectedIndex, 1,
-       "Tab key advances the selection while the panel is sticky");
-
-    gBrowser.removeCurrentTab();
-    gBrowser.removeCurrentTab();
-    gBrowser.removeCurrentTab();
-    assertTabs(1);
-    finish();
-  }
-
+  // cleanup
+  gPrefService.clearUserPref("browser.ctrlTab.previews");
 
   /* private utility functions */
 
@@ -140,7 +86,7 @@ function test() {
     EventUtils.synthesizeKey("VK_CONTROL", { type: "keyup" });
 
   function isOpen()
-    ctrlTab.panel.state == "showing" || ctrlTab.panel.state == "open";
+    ctrlTab.isOpen;
 
   function assertTabs(aTabs) {
     var tabs = gBrowser.mTabs.length;

browser/locales/en-US/chrome/browser/browser.dtd

@@ -50,6 +50,8 @@
 <!ENTITY pageInfoCmd.commandkey "i">
 <!ENTITY fullScreenCmd.label "Full Screen">
 <!ENTITY fullScreenCmd.accesskey "F">
+<!ENTITY showAllTabsCmd.label "Show All Tabs">
+<!ENTITY showAllTabsCmd.accesskey "A">
 
 <!ENTITY fullScreenMinimize.tooltip "Minimize">
 <!ENTITY fullScreenRestore.tooltip "Restore">
@@ -444,4 +446,4 @@ just addresses the organization to follow, e.g. "This site is run by " -->
 
 <!ENTITY downloadMonitor2.tooltip "Click to open downloads window">
 
-<!ENTITY ctrlTab.search.emptyText "Search Tabs">
+<!ENTITY allTabs.filter.emptyText "Search Tabs">

browser/locales/en-US/chrome/browser/browser.properties

@@ -209,6 +209,12 @@ privateBrowsingYesTitle=&Start Private Browsing
 privateBrowsingNoTitle=&Cancel
 privateBrowsingNeverAsk=&Do not show this message again
 
+# Ctrl-Tab
+# LOCALIZATION NOTE (ctrlTab.showAll.label): #1 represents the number
+# of tabs in the current browser window. It will always be 2 at least.
+# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
+ctrlTab.showAll.label=;Show all #1 tabs
+
 # LOCALIZATION NOTE (addKeywordTitleAutoFill): %S will be replaced by the page's title
 # Used as the bookmark name when saving a keyword for a search field.
 addKeywordTitleAutoFill=Search %S

browser/themes/gnomestripe/browser/browser.css

@@ -1377,42 +1377,91 @@ toolbar[mode="text"] > #window-controls > toolbarbutton > .toolbarbutton-text {
   -moz-image-region: rect(0px 16px 16px 0px);
 }
 
-/* ::::: Ctrl-Tab Panel ::::: */
+
+/* ::::: Keyboard UI Panel ::::: */
+
+.KUI-panel-closebutton {
+  list-style-image: url(KUI-close.png);
+}
+
+.KUI-panel-closebutton > .toolbarbutton-icon {
+  margin: 0;
+}
+
+/* ::::: Ctrl-Tab and All Tabs Panels ::::: */
+
+.ctrlTab-preview,
+.allTabs-preview {
+  -moz-appearance: toolbarbutton;
+}
+
+.tabPreview-canvas {
+  -moz-box-shadow: 0 0 5px ThreeDShadow;
+}
+
+.ctrlTab-preview:focus .tabPreview-canvas,
+.ctrlTab-preview:hover .tabPreview-canvas,
+.allTabs-preview:focus .tabPreview-canvas,
+.allTabs-preview:hover .tabPreview-canvas {
+  -moz-box-shadow: none;
+}
+
+.ctrlTab-favicon[src],
+.allTabs-favicon[src] {
+  background-color: white;
+  padding: 2px;
+/* XXX: Upscaling images is ugly on Linux (bug 422179)
+  width: 24px;
+  height: 24px;
+  opacity: .7;
+*/
+  width: 20px;
+  height: 20px;
+  opacity: .8;
+}
+
+/* Ctrl-Tab */
+
 #ctrlTab-panel {
-  padding-top: 15px;
+  padding: 10px;
 }
 
-#ctrlTab-search {
-  margin: 0 0 15px;
+.ctrlTab-preview:not(#ctrlTab-showAll) .tabPreview-canvas {
+  margin-bottom: 2px;
 }
 
-.ctrlTab-thumbnail {
-  margin-bottom: 15px;
-  cursor: pointer;
+#ctrlTab-showAll {
+  -moz-appearance: button;
+  color: ButtonText;
+  padding: 0 3px;
+  margin-top: 10px;
 }
 
-.ctrlTab-thumbnail > html|canvas {
-  border: 1px solid ThreeDShadow;
-  margin: -1px;
+/* All Tabs */
+
+#allTabs-panel {
+  /* compensate for the widget border and padding to center the panel correctly */
+  margin-left: -13px;
 }
 
-.ctrlTab-thumbnail[selected="true"] ,
-.ctrlTab-thumbnail:hover {
-  background: Highlight;
-  color: HighlightText;
-  -moz-box-shadow: 0 0 2px Highlight, 0 0 2px Highlight, 0 0 3px Highlight, 0 0 4px Highlight, 0 0 10px Highlight, 0 0 15px Highlight;
-}
- 
-.ctrlTab-pagePointer {
-  margin: 0 1em 1em;
-  width: 1.5em;
-  height: 1.5em;
-  -moz-border-radius: .75em;
-  background: ThreeDShadow;
-  cursor: pointer;
+#allTabs-tab-close-button {
+  /*XXX without this, the closebutton can cause the panel to expand horizontally */
+  margin-right: -16px;
 }
 
-.ctrlTab-pagePointer[selected="true"] {
-  background: ThreeDDarkShadow;
-  cursor: default;
+#allTabs-meta {
+  padding: 5px;
+}
+
+#allTabs-filter {
+  -moz-margin-start: 36px;
+  -moz-margin-end: 0;
+}
+
+#allTabs-stack {
+  margin: 10px;
+}
+
+.allTabs-preview-label {
+  -moz-transform: translate(0, -1px);
 }

browser/themes/gnomestripe/browser/jar.mn

@@ -12,6 +12,7 @@ classic.jar:
   skin/classic/browser/Go-arrow.png
   skin/classic/browser/identity.png
   skin/classic/browser/Info.png
+  skin/classic/browser/KUI-close.png
   skin/classic/browser/monitor.png
   skin/classic/browser/monitor_16-10.png
 * skin/classic/browser/pageInfo.css

browser/themes/pinstripe/browser/browser.css

@@ -2124,63 +2124,143 @@ tabpanels.plain {
 }
 
 /* ::::: Keyboard UI Panel ::::: */
+
 .KUI-panel {
   -moz-appearance: none;
-  background: rgba(68, 68, 68, .9) url(KUI-background.png) repeat-x;
+  background: rgba(27%,27%,27%,.9) url(KUI-background.png) repeat-x;
   color: white;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  -moz-border-radius: 10px;
-  margin-top: -1px;
-  margin-left: -1px;
+  border: 1px solid rgba(100%,100%,100%,.15);
+  -moz-border-radius: 20px;
 }
 
-.KUI-panel[level="top"] ,
-#ctrlTab-panel:not([sticky]) {
-  background-color: rgba(68, 68, 68, .5);
+.KUI-panel[level="top"] {
+  background-color: rgba(27%,27%,27%,.65);
+  border-style: none;
   -moz-window-shadow: none;
 }
 
-/* ::::: Ctrl-Tab Panel ::::: */
+.KUI-panel-closebutton {
+  list-style-image: url(KUI-close.png);
+  -moz-appearance: none;
+  border: none;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.KUI-panel-closebutton:not(:hover) {
+  opacity: .6;
+}
+
+.KUI-panel-closebutton > .toolbarbutton-icon {
+  margin: 0;
+}
+
+/* ::::: Ctrl-Tab and All Tabs Panels ::::: */
+
+.tabPreview-canvas {
+  -moz-box-shadow: 1px 1px 3px rgb(12%,12%,12%);
+}
+
+.ctrlTab-favicon-container,
+.allTabs-favicon-container {
+  -moz-box-pack: end;
+}
+
+.ctrlTab-favicon[src],
+.allTabs-favicon[src] {
+  background-color: white;
+  width: 24px;
+  height: 24px;
+  padding: 2px;
+  opacity: .7;
+}
+
+/* Ctrl-Tab */
+
 #ctrlTab-panel {
-  padding-top: 20px;
+  padding: 20px 10px 15px;
+  text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 3px rgb(27%,27%,27%);
+}
+
+.ctrlTab-preview:not(#ctrlTab-showAll) .ctrlTab-preview-inner {
+  padding-bottom: 2px;
+}
+
+.ctrlTab-preview:not(#ctrlTab-showAll) .tabPreview-canvas {
+  margin-bottom: 2px;
+}
+
+.ctrlTab-preview:focus:not(#ctrlTab-showAll) .ctrlTab-preview-inner {
+  background-color: #ccc;
+  color: black;
+  text-shadow: 0 0 1px white;
+  -moz-box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 5px 1px -moz-mac-focusring, 0 0 8px white;
+  padding: 2px;
+  margin: -2px -2px 0;
+}
+
+.ctrlTab-preview:focus .tabPreview-canvas {
+  -moz-box-shadow: none;
+}
+
+#ctrlTab-showAll {
+  -moz-appearance: button;
+  color: ButtonText;
+  text-shadow: none;
+  padding: 0 3px;
+  margin-top: 15px;
   font-size: 1.2em;
-  text-shadow: 0 0 3px black, 0 0 3px black;
 }
 
-#ctrlTab-search {
-  margin: 0 0 20px;
+#ctrlTab-showAll:focus {
+  -moz-box-shadow: 0 0 8px white;
+  -moz-border-radius: 100%;
 }
 
-.ctrlTab-thumbnail {
-  margin-bottom: 20px;
-  cursor: pointer;
-  font-weight: bold;
+/* All Tabs */
+
+#allTabs-panel {
+  padding: 10px;
+  margin-left: -10px;
 }
 
-.ctrlTab-thumbnail > html|canvas {
-  border: 2px solid white;
-  margin: -2px;
+#allTabs-panel:not(.KUI-panel) {
+  -moz-appearance: none;
+  background: rgb(27%,27%,27%) url(KUI-background.png) repeat-x;
+  border: none;
+  color: white;
 }
 
-.ctrlTab-thumbnail[selected="true"] ,
-.ctrlTab-thumbnail:hover {
-  background: Highlight;
-  color: HighlightText;
-  -moz-box-shadow: 0 0 2px Highlight, 0 0 2px Highlight, 0 0 3px Highlight, 0 0 4px Highlight, 0 0 10px Highlight, 0 0 20px white;
-  text-shadow: 0 0 3px transparent;
+#allTabs-meta {
+  margin-bottom: 10px;
 }
 
-.ctrlTab-pagePointer {
-  margin: 0 1em 1em;
-  width: 1.5em;
-  height: 1.5em;
-  -moz-border-radius: .75em;
-  background: rgba(0, 0, 0, .5);
-  border: 1px solid rgba(255, 255, 255, .3);
-  cursor: pointer;
+#allTabs-filter {
+  -moz-margin-start: 24px;
+  -moz-margin-end: 0;
 }
 
-.ctrlTab-pagePointer[selected="true"] {
-  background: rgba(255, 255, 255, .6);
-  cursor: default;
+#allTabs-tab-close-button {
+  /*XXX without this, the closebutton can cause the panel to expand horizontally */
+  margin-right: -16px;
+}
+
+#allTabs-tab-close-button > .toolbarbutton-icon {
+  margin: 0;
+}
+
+.allTabs-preview:hover,
+.allTabs-preview[closebuttonhover] {
+  background-color: rgba(100%,100%,100%,.15);
+  -moz-border-radius: 6px;
+}
+
+.allTabs-preview:focus {
+  background-color: rgba(100%,100%,100%,.3);
+  -moz-border-radius: 6px;
+}
+
+.allTabs-preview-label {
+  -moz-transform: translate(0, -1px);
 }

browser/themes/pinstripe/browser/jar.mn

@@ -30,6 +30,7 @@ classic.jar:
   skin/classic/browser/identity.png
   skin/classic/browser/Info.png
   skin/classic/browser/KUI-background.png
+  skin/classic/browser/KUI-close.png
   skin/classic/browser/menu-back.png
   skin/classic/browser/menu-forward.png
   skin/classic/browser/page-livemarks.png

browser/themes/winstripe/browser/browser-aero.css

@@ -63,17 +63,29 @@
   z-index: 10;
 }
 
+/*XXX Bug 473152 - Aero Glass clips panel content
+#allTabs-panel:-moz-system-metric(windows-compositor),*/
 #ctrlTab-panel:-moz-system-metric(windows-compositor) {
   background: transparent;
   -moz-appearance: -moz-win-glass;
   -moz-border-radius: 0;
   border: none;
-  font: "Segoe UI", window;
-  font-weight: normal;
+  font: normal 1.2em "Segoe UI";
   color: black;
   text-shadow: white -1px -1px .5em, white -1px 1px .5em, white 1px 1px .5em, white 1px -1px .5em;
 }
 
+/*XXX Bug 473152 - Aero Glass clips panel content
+.allTabs-preview:hover:-moz-system-metric(windows-compositor),
+.allTabs-preview[closebuttonhover]:-moz-system-metric(windows-compositor) {
+  background: rgba(0,0,0,.15) url(KUI-background.png) repeat-x;
+}
+
+.allTabs-preview:focus:-moz-system-metric(windows-compositor) {
+  background: rgba(0,0,0,.3) url(KUI-background.png) repeat-x;
+}
+*/
+
 /* ::::: fullscreen window controls ::::: */
 
 #window-controls {

browser/themes/winstripe/browser/browser.css

@@ -2022,63 +2022,138 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 }
 
 /* ::::: Keyboard UI Panel ::::: */
+
 .KUI-panel {
   -moz-appearance: none;
-  background: rgba(68, 68, 68, .9) url(KUI-background.png) repeat-x;
+  background: rgba(27%,27%,27%,.9) url(KUI-background.png) repeat-x;
   color: white;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  -moz-border-radius: 10px;
-  margin-top: -1px;
-  margin-left: -1px;
+  border: 1px solid rgba(100%,100%,100%,.15);
+  -moz-border-radius: 20px;
 }
 
-.KUI-panel[level="top"] ,
-#ctrlTab-panel:not([sticky]) {
-  background-color: rgba(68, 68, 68, .5);
-  -moz-window-shadow: none;
+.KUI-panel[level="top"] {
+  background-color: rgba(27%,27%,27%,.65);
+  border-style: none;
 }
 
-/* ::::: Ctrl-Tab Panel ::::: */
+.KUI-panel-closebutton {
+  list-style-image: url(KUI-close.png);
+  -moz-appearance: none;
+  border: none;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.KUI-panel-closebutton:not(:hover) {
+  opacity: .6;
+}
+
+.KUI-panel-closebutton > .toolbarbutton-icon {
+  margin: 0;
+}
+
+/* ::::: Ctrl-Tab and All Tabs Panels ::::: */
+
+.tabPreview-canvas {
+  -moz-box-shadow: 1px 1px 3px rgb(12%,12%,12%);
+}
+
+.ctrlTab-favicon[src],
+.allTabs-favicon[src] {
+  background-color: white;
+  width: 24px;
+  height: 24px;
+  padding: 2px;
+  opacity: .7;
+}
+
+/* Ctrl-Tab */
+
 #ctrlTab-panel {
-  padding-top: 20px;
-  font-size: 1.2em;
-  text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black;
-}
-
-#ctrlTab-search {
-  margin: 0 0 20px;
-}
-
-.ctrlTab-thumbnail {
-  margin-bottom: 20px;
-  cursor: pointer;
+  padding: 20px 10px 15px;
   font-weight: bold;
+  text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 3px rgb(27%,27%,27%);
 }
 
-.ctrlTab-thumbnail > html|canvas {
-  border: 2px solid white;
-  margin: -2px;
+.ctrlTab-preview:not(#ctrlTab-showAll) .ctrlTab-preview-inner {
+  padding-bottom: 2px;
 }
 
-.ctrlTab-thumbnail[selected="true"] ,
-.ctrlTab-thumbnail:hover {
-  background: Highlight;
-  color: HighlightText;
-  -moz-box-shadow: 0 0 2px Highlight, 0 0 2px Highlight, 0 0 3px Highlight, 0 0 4px Highlight, 0 0 10px Highlight, 0 0 20px white;
-  text-shadow: 0 0 3px transparent;
+.ctrlTab-preview:not(#ctrlTab-showAll) .tabPreview-canvas {
+  margin-bottom: 2px;
 }
 
-.ctrlTab-pagePointer {
-  margin: 0 1em 1em;
-  width: 1.5em;
-  height: 1.5em;
-  -moz-border-radius: .75em;
-  background: rgba(0, 0, 0, .5);
-  border: 1px solid rgba(255, 255, 255, .3);
-  cursor: pointer;
+.ctrlTab-preview:focus:not(#ctrlTab-showAll) .ctrlTab-preview-inner {
+  background-color: #ccc;
+  color: black;
+  text-shadow: 0 0 1px white;
+  -moz-box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 5px 1px Highlight, 0 0 8px white;
+  padding: 2px;
+  margin: -2px -2px 0;
 }
 
-.ctrlTab-pagePointer[selected="true"] {
-  background: rgba(255, 255, 255, .6);
-  cursor: default;
+.ctrlTab-preview:focus .tabPreview-canvas {
+  -moz-box-shadow: none;
+}
+
+#ctrlTab-showAll {
+  -moz-appearance: button;
+  color: ButtonText;
+  font-weight: normal;
+  text-shadow: none;
+  padding: 3px 5px;
+  margin-top: 15px;
+}
+
+#ctrlTab-showAll:focus {
+  -moz-box-shadow: 0 0 8px white;
+  -moz-border-radius: 3px;
+}
+
+/* All Tabs */
+
+#allTabs-panel {
+  padding: 10px;
+  margin-left: -10px;
+}
+
+#allTabs-panel:not(.KUI-panel) {
+  -moz-appearance: none;
+  background: rgb(27%,27%,27%) url(KUI-background.png) repeat-x;
+  border: none;
+  color: white;
+}
+
+#allTabs-meta {
+  margin-bottom: 10px;
+}
+
+#allTabs-filter {
+  -moz-margin-start: 24px;
+  -moz-margin-end: 0;
+}
+
+#allTabs-tab-close-button {
+  /*XXX without this, the closebutton can cause the panel to expand horizontally */
+  margin-right: -16px;
+}
+
+#allTabs-tab-close-button > .toolbarbutton-icon {
+  margin: 0;
+}
+
+.allTabs-preview:hover,
+.allTabs-preview[closebuttonhover] {
+  background-color: rgba(100%,100%,100%,.15);
+  -moz-border-radius: 4px;
+}
+
+.allTabs-preview:focus {
+  background-color: rgba(100%,100%,100%,.3);
+  -moz-border-radius: 4px;
+}
+
+.allTabs-preview-label {
+  -moz-transform: translate(0, -1px);
 }

browser/themes/winstripe/browser/jar.mn

@@ -14,6 +14,7 @@ classic.jar:
         skin/classic/browser/Info.png                                (Info.png)
         skin/classic/browser/identity.png                            (identity.png)
         skin/classic/browser/KUI-background.png
+        skin/classic/browser/KUI-close.png
         skin/classic/browser/mainwindow-dropdown-arrow.png
         skin/classic/browser/pageInfo.css
         skin/classic/browser/pageInfo.png                            (pageInfo.png)
@@ -106,6 +107,7 @@ classic.jar:
         skin/classic/aero/browser/Info.png                           (Info-aero.png)
         skin/classic/aero/browser/identity.png                       (identity-aero.png)
         skin/classic/aero/browser/KUI-background.png
+        skin/classic/aero/browser/KUI-close.png
         skin/classic/aero/browser/mainwindow-dropdown-arrow.png      (mainwindow-dropdown-arrow-aero.png)
         skin/classic/aero/browser/pageInfo.css
         skin/classic/aero/browser/pageInfo.png                       (pageInfo-aero.png)