Bug 464205 - Attach the panel to the content area and style it accordingly. r=mstange

2010-03-22 15:11:42 +01:00 · 2010-03-22 15:11:42 +01:00 · 830c6a4ac0
--- a/browser/base/content/browser-tabPreviews.js
+++ b/browser/base/content/browser-tabPreviews.js
@ -672,15 +672,15 @@ var allTabs = {
    if (this.isOpen)
      return;

+    this._maxPanelHeight = Math.max(gBrowser.clientHeight, screen.availHeight / 2);
+    this._maxPanelWidth = Math.max(gBrowser.clientWidth, screen.availWidth / 2);
+
    this.filter();

    tabPreviewPanelHelper.opening(this);

-    this.panel.popupBoxObject.setConsumeRollupEvent(Ci.nsIPopupBoxObject.ROLLUP_CONSUME);
-    var estimateHeight = (this._maxHeight + parseInt(this.container.maxHeight) + 50) / 2;
-    this.panel.openPopupAtScreen(screen.availLeft + (screen.availWidth - this._maxWidth) / 2,
-                                 screen.availTop + (screen.availHeight - estimateHeight) / 2,
-                                 false);
+    this.panel.popupBoxObject.setConsumeRollupEvent(Ci.nsIPopupBoxObject.ROLLUP_NO_CONSUME);
+    this.panel.openPopup(gBrowser, "overlap", 0, 0, false, true);
  },

  close: function allTabs_close() {
@ -694,6 +694,10 @@ var allTabs = {
    this.panel.addEventListener("keypress", this, false);
    this.panel.addEventListener("keypress", this, true);
    this._browserCommandSet.addEventListener("command", this, false);
+
+    // When the panel is open, a second click on the all tabs button should
+    // close the panel but not re-open it.
+    document.getElementById("Browser:ShowAllTabs").setAttribute("disabled", "true");
  },

  suspendGUI: function allTabs_suspendGUI() {
@ -706,6 +710,10 @@ var allTabs = {
    this.panel.removeEventListener("keypress", this, false);
    this.panel.removeEventListener("keypress", this, true);
    this._browserCommandSet.removeEventListener("command", this, false);
+
+    setTimeout(function () {
+      document.getElementById("Browser:ShowAllTabs").removeAttribute("disabled");
+    }, 300);
  },

  handleEvent: function allTabs_handleEvent(event) {
@ -754,8 +762,6 @@ var allTabs = {

  _visible: 0,
  _currentFilter: null,
-  get _maxWidth () screen.availWidth * .9,
-  get _maxHeight () screen.availHeight * .75,
  get _stack () {
    delete this._stack;
    return this._stack = document.getElementById("allTabs-stack");
@ -786,21 +792,22 @@ var allTabs = {
  _reflow: function allTabs_reflow() {
    this._updateTabCloseButton();

+    const CONTAINER_MAX_WIDTH = this._maxPanelWidth * .95;
+    const CONTAINER_MAX_HEIGHT = this._maxPanelHeight - 35;
    // the size of the whole preview relative to the thumbnail
    const REL_PREVIEW_THUMBNAIL = 1.2;
+    const REL_PREVIEW_HEIGHT_WIDTH = tabPreviews.height / tabPreviews.width;
+    const PREVIEW_MAX_WIDTH = tabPreviews.width * REL_PREVIEW_THUMBNAIL;

-    var maxHeight = this._maxHeight;
-    var maxWidth = this._maxWidth;
-    var rel = tabPreviews.height / tabPreviews.width;
    var rows, previewHeight, previewWidth, outerHeight;
-    var previewMaxWidth = tabPreviews.width * REL_PREVIEW_THUMBNAIL;
-    this._columns = Math.floor(maxWidth / previewMaxWidth);
+    this._columns = Math.floor(CONTAINER_MAX_WIDTH / PREVIEW_MAX_WIDTH);
    do {
      rows = Math.ceil(this._visible / this._columns);
-      previewWidth = Math.min(previewMaxWidth, Math.round(maxWidth / this._columns));
-      previewHeight = Math.round(previewWidth * rel);
+      previewWidth = Math.min(PREVIEW_MAX_WIDTH,
+                              Math.round(CONTAINER_MAX_WIDTH / this._columns));
+      previewHeight = Math.round(previewWidth * REL_PREVIEW_HEIGHT_WIDTH);
      outerHeight = previewHeight + this._previewLabelHeight;
-    } while (rows * outerHeight > maxHeight && ++this._columns);
+    } while (rows * outerHeight > CONTAINER_MAX_HEIGHT && ++this._columns);

    var outerWidth = previewWidth;
    {
@ -834,10 +841,10 @@ var allTabs = {
      row.appendChild(preview);
    }, this);

-    this._stack.width = maxWidth;
+    this._stack.width = this._maxPanelWidth;
    this.container.width = Math.ceil(outerWidth * Math.min(this._columns, this._visible));
-    this.container.left = Math.round((maxWidth - this.container.width) / 2);
-    this.container.maxWidth = maxWidth - this.container.left;
+    this.container.left = Math.round((this._maxPanelWidth - this.container.width) / 2);
+    this.container.maxWidth = this._maxPanelWidth - this.container.left;
    this.container.maxHeight = rows * outerHeight;
  },

@ -881,19 +888,19 @@ var allTabs = {
    if (event &&
        event.target.parentNode.parentNode == this.container &&
        (event.target._tab.previousSibling || event.target._tab.nextSibling)) {
-      let preview = event.target.getBoundingClientRect();
+      let canvas = event.target.firstChild.getBoundingClientRect();
      let container = this.container.getBoundingClientRect();
      let tabCloseButton = this.tabCloseButton.getBoundingClientRect();
      let alignLeft = getComputedStyle(this.panel, "").direction == "rtl";
 #ifdef XP_MACOSX
      alignLeft = !alignLeft;
 #endif
-      this.tabCloseButton.left = preview.left -
+      this.tabCloseButton.left = canvas.left -
                                 container.left +
                                 parseInt(this.container.left) +
                                 (alignLeft ? 0 :
-                                  preview.width - tabCloseButton.width);
-      this.tabCloseButton.top = preview.top - container.top;
+                                  canvas.width - tabCloseButton.width);
+      this.tabCloseButton.top = canvas.top - container.top;
      this.tabCloseButton._targetPreview = event.target;
      this.tabCloseButton.style.visibility = "visible";
      event.target.setAttribute("closebuttonhover", "true");
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@ -276,9 +276,6 @@
    </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"/>
--- a/browser/themes/gnomestripe/browser/browser.css
+++ b/browser/themes/gnomestripe/browser/browser.css
@ -1373,26 +1373,19 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
  -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: 10px;
 }

+.ctrlTab-favicon[src] {
+  background-color: white;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+}
+
 .ctrlTab-preview:not(#ctrlTab-showAll) .tabPreview-canvas {
  margin-bottom: 2px;
 }
@ -1407,13 +1400,7 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
 /* All Tabs */

 #allTabs-panel {
-  /* compensate for the widget border and padding to center the panel correctly */
-  margin-left: -13px;
-}
-
-#allTabs-tab-close-button {
-  /*XXX without this, the closebutton can cause the panel to expand horizontally */
-  margin-right: -16px;
+  padding-bottom: 10px;
 }

 #allTabs-meta {
@ -1425,8 +1412,9 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
  -moz-margin-end: 0;
 }

-#allTabs-stack {
-  margin: 10px;
+.allTabs-favicon {
+  margin-top: 1px;
+  -moz-margin-start: 1px;
 }

 .allTabs-preview-label {
--- a/browser/themes/pinstripe/browser/browser.css
+++ b/browser/themes/pinstripe/browser/browser.css
@ -1941,19 +1941,6 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {

 /* ::::: 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 {
@ -1961,22 +1948,33 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
  text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 3px rgb(27%,27%,27%);
 }

-.ctrlTab-preview:not(#ctrlTab-showAll) .tabPreview-canvas {
+.ctrlTab-favicon[src] {
+  background-color: white;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+}
+
+.ctrlTab-preview-inner > .tabPreview-canvas {
+  -moz-box-shadow: 1px 1px 3px rgb(12%,12%,12%);
+}
+
+.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
  margin-bottom: 2px;
 }

-.ctrlTab-preview .ctrlTab-preview-inner {
+.ctrlTab-preview-inner {
  padding-bottom: 10px;
 }

-#ctrlTab-showAll .ctrlTab-preview-inner {
+#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
  padding: 10px;
  background-color: rgba(255,255,255,.2);
  -moz-border-radius: .5em;
 }

-.ctrlTab-preview:focus .ctrlTab-preview-inner,
-#ctrlTab-showAll:focus .ctrlTab-preview-inner {
+.ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
+  color: white;
  background-color: rgba(0,0,0,.6);
  text-shadow: none;
  padding: 8px;
@ -1984,7 +1982,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
  -moz-border-radius: .5em;
 }

-.ctrlTab-preview:not(#ctrlTab-showAll):focus .ctrlTab-preview-inner {
+.ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
  margin: -10px -10px 0;
 }

@ -1995,19 +1993,15 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
 /* All Tabs */

 #allTabs-panel {
-  padding: 10px;
-  margin-left: -10px;
-}
-
-#allTabs-panel:not(.KUI-panel) {
+  padding-bottom: 10px;
  -moz-appearance: none;
-  background: rgb(27%,27%,27%) url(KUI-background.png) repeat-x;
  border: none;
-  color: white;
+  background: -moz-dialog;
+  color: -moz-dialogText;
 }

 #allTabs-meta {
-  margin-bottom: 10px;
+  margin: 10px;
 }

 #allTabs-filter {
@ -2015,26 +2009,24 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
  -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:focus,
-.allTabs-preview:hover,
-.allTabs-preview[closebuttonhover] {
-  background-color: rgba(0,0,0,.4);
-  -moz-border-radius: .5em;
+.allTabs-favicon {
+  margin-top: 1px;
+  -moz-margin-start: 1px;
 }

-.allTabs-preview:focus {
-  border: 2px solid white;
+.allTabs-preview-inner > .tabPreview-canvas {
+  background-color: rgb(60%,60%,60%);
+  -moz-box-shadow: 0 0 2px ThreeDShadow;
 }

-.allTabs-preview-label {
-  -moz-transform: translate(0, 1px);
+.allTabs-preview:not(:hover):not([closebuttonhover]) > html|canvas {
+  opacity: .8;
+}
+
+.allTabs-preview:focus > * > .allTabs-preview-inner {
+  -moz-box-shadow: @focusRingShadow@;
 }
--- a/browser/themes/winstripe/browser/browser.css
+++ b/browser/themes/winstripe/browser/browser.css
@ -1493,19 +1493,6 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {

 /* ::::: 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 {
@ -1514,22 +1501,32 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
  text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 3px rgb(27%,27%,27%);
 }

-.ctrlTab-preview:not(#ctrlTab-showAll) .tabPreview-canvas {
+.ctrlTab-favicon[src] {
+  background-color: white;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+}
+
+.ctrlTab-preview-inner > .tabPreview-canvas {
+  -moz-box-shadow: 1px 1px 3px rgb(12%,12%,12%);
+}
+
+.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
  margin-bottom: 2px;
 }

-.ctrlTab-preview .ctrlTab-preview-inner {
+.ctrlTab-preview-inner {
  padding-bottom: 10px;
 }

-#ctrlTab-showAll .ctrlTab-preview-inner {
+#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
  padding: 10px;
  background-color: rgba(255,255,255,.2);
  -moz-border-radius: .5em;
 }

-.ctrlTab-preview:focus .ctrlTab-preview-inner,
-#ctrlTab-showAll:focus .ctrlTab-preview-inner {
+.ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
  color: white;
  background-color: rgba(0,0,0,.6);
  text-shadow: none;
@ -1538,7 +1535,7 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
  -moz-border-radius: .5em;
 }

-.ctrlTab-preview:not(#ctrlTab-showAll):focus .ctrlTab-preview-inner {
+.ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
  margin: -10px -10px 0;
 }

@ -1549,19 +1546,15 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 /* All Tabs */

 #allTabs-panel {
-  padding: 10px;
-  margin-left: -10px;
-}
-
-#allTabs-panel:not(.KUI-panel) {
+  padding-bottom: 10px;
  -moz-appearance: none;
-  background: rgb(27%,27%,27%) url(KUI-background.png) repeat-x;
  border: none;
-  color: white;
+  background: -moz-dialog;
+  color: -moz-dialogText;
 }

 #allTabs-meta {
-  margin-bottom: 10px;
+  margin: 10px;
 }

 #allTabs-filter {
@ -1569,28 +1562,24 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
  -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:focus,
-.allTabs-preview:hover,
-.allTabs-preview[closebuttonhover] {
-  color: white;
-  text-shadow: none;
-  background-color: rgba(0,0,0,.4);
-  -moz-border-radius: .5em;
+.allTabs-favicon {
+  margin-top: 1px;
+  -moz-margin-start: 1px;
 }

-.allTabs-preview:focus {
-  border: 2px solid white;
+.allTabs-preview-inner > .tabPreview-canvas {
+  background-color: rgb(60%,60%,60%);
+  -moz-box-shadow: 0 0 2px ThreeDShadow;
 }

-.allTabs-preview-label {
-  -moz-transform: translate(0, 1px);
+.allTabs-preview:not(:hover):not([closebuttonhover]) > html|canvas {
+  opacity: .8;
+}
+
+.allTabs-preview:focus > * > .allTabs-preview-inner {
+  outline: 1px dotted -moz-dialogText;
 }