Bug 680077 - Update tabs pane for Honeycomb theme (r=mbrubeck)

2011-09-07 13:47:39 -07:00 · 2011-09-07 13:47:39 -07:00 · 82cfb900ac
--- a/mobile/chrome/content/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@ -555,6 +555,21 @@ var BrowserUI = {
    } else {
      Elements.urlbarState.removeAttribute("tablet");
    }
+
+    // Tablet mode changes the size of the thumbnails
+    // in the tabs container. Hence we have to force a
+    // thumbnail update on all tabs.
+    setTimeout(function(self) {
+      self._updateAllTabThumbnails();
+    }, 0, this);
+  },
+
+  _updateAllTabThumbnails: function() {
+    let tabs = Browser.tabs;
+
+    tabs.forEach(function(tab) {
+      tab.updateThumbnail({ force: true });
+    });
  },

  update: function(aState) {
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@ -200,14 +200,14 @@
      <vbox id="tabs-sidebar" class="sidebar" observes="bcast_uidiscovery">
        <spacer class="toolbar-height" id="tabs-spacer" observes="bcast_urlbarState"/>
        <!-- Left toolbar -->
-        <vbox id="tabs-container" class="panel-dark" flex="1">
-          <vbox id="tabs" flex="1"
+        <vbox id="tabs-container" class="panel-dark" flex="1" observes="bcast_urlbarState">
+          <vbox id="tabs" flex="1" observes="bcast_urlbarState"
                onselect="BrowserUI.selectTab(this);"
                onreloadtab="BrowserUI.undoCloseTab()"
                onclosetab="BrowserUI.closeTab(this)"
                onclosereloadtab="this._container.removeTab(this)"/>
          <hbox id="tabs-controls">
-            <toolbarbutton id="newtab-button" class="button-control" command="cmd_newTab"/>
+            <toolbarbutton id="newtab-button" class="button-control" command="cmd_newTab" observes="bcast_urlbarState"/>
          </hbox>
        </vbox>
      </vbox>
--- a/mobile/chrome/content/tabs.xml
+++ b/mobile/chrome/content/tabs.xml
@ -7,13 +7,13 @@
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <binding id="documenttab">
-    <content>
+    <content observes="bcast_urlbarState">
      <xul:stack anonid="page" class="documenttab-container" flex="1">
        <html:canvas anonid="thumbnail" class="documenttab-thumbnail" left="0" moz-opaque="true" empty="true"
-          onclick="document.getBindingParent(this)._onClick()"/>
-        <xul:hbox anonid="reload" class="documenttab-reload" left="0" top="0" onclick="document.getBindingParent(this)._onUndo();"/>
-        <xul:hbox anonid="close-container" class="documenttab-close-container" start="-16" top="0" align="center" onclick="document.getBindingParent(this)._onClose()">
-          <xul:image anonid="close" class="documenttab-close" mousethrough="always"/>
+          onclick="document.getBindingParent(this)._onClick()" observes="bcast_urlbarState"/>
+        <xul:hbox anonid="reload" class="documenttab-reload" left="0" top="0" onclick="document.getBindingParent(this)._onUndo();" observes="bcast_urlbarState"/>
+        <xul:hbox anonid="close-container" class="documenttab-close-container" top="0" align="center" onclick="document.getBindingParent(this)._onClose()" observes="bcast_urlbarState">
+          <xul:image anonid="close" class="documenttab-close" mousethrough="always" observes="bcast_urlbarState"/>
        </xul:hbox>
      </xul:stack>
    </content>
@ -27,17 +27,41 @@

      <constructor>
        <![CDATA[
-          let thumbnail = this.thumbnail;
-          let reload = this._reload;
-          let closeContainer = this._closeContainer;
-
-          thumbnail.width = reload.width = 104;
-          thumbnail.height = reload.height = 65;
-          closeContainer.width = 55;
-          closeContainer.height = 65;
+          this.updateTabletLayout(this.thumbnail);
        ]]>
      </constructor>

+      <method name="updateTabletLayout">
+        <parameter name="thumbnail"/>
+        <body>
+          <![CDATA[
+            let tabWidth, tabHeight, closeWidth, closeHeight;
+
+            if (Util.isTablet()) {
+              tabWidth = 176;
+              tabHeight = 110;
+              closeWidth = 41;
+              closeHeight = 117;
+            } else {
+              tabWidth = 104;
+              tabHeight = 65;
+              closeWidth = 55;
+              closeHeight = 65;
+            }
+
+            if (tabWidth != thumbnail.width) {
+              let reload = this._reload;
+              let closeContainer = this._closeContainer;
+
+              thumbnail.width = reload.width = tabWidth;
+              thumbnail.height = reload.height = tabHeight;
+              closeContainer.width = closeWidth;
+              closeContainer.height = closeHeight;
+            }
+          ]]>
+        </body>
+      </method>
+
      <method name="_onClick">
        <body>
          <![CDATA[
@ -77,14 +101,18 @@
        <body>
          <![CDATA[
            let thumbnail = this.thumbnail;
+            // Ensure the thumbnail will have the correct
+            // dimensions for tablet and phone modes
+            this.updateTabletLayout(thumbnail);
+
            if (browser.currentURI.spec == "about:blank") {
              thumbnail.setAttribute("empty", "true");
              return;
            }
            thumbnail.removeAttribute("empty");

-            const tabWidth = 104;
-            const tabHeight = 65;
+            const tabWidth = thumbnail.width;
+            const tabHeight = thumbnail.height;

            let ratio = tabHeight / tabWidth;
            if (browser.contentDocumentWidth > 0)
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@ -986,6 +986,7 @@ documenttab[selected="true"] > stack > .documenttab-thumbnail {
 .documenttab-close-container {
  position: relative;
  left: -16px;
+  -moz-margin-start: -16px;
  -moz-margin-end: 49px;
 }

--- a/mobile/themes/core/gingerbread/browser.css
+++ b/mobile/themes/core/gingerbread/browser.css
@ -935,6 +935,7 @@ documenttab[selected="true"] > stack > .documenttab-thumbnail {
 .documenttab-close-container {
  position: relative;
  left: -16px;
+  -moz-margin-start: -16px;
  -moz-margin-end: 49px;
 }

--- a/mobile/themes/core/gingerbread/images/close-active-tablet-hdpi.png
+++ b/mobile/themes/core/gingerbread/images/close-active-tablet-hdpi.png
--- a/mobile/themes/core/gingerbread/images/close-background-hdpi.png
+++ b/mobile/themes/core/gingerbread/images/close-background-hdpi.png
--- a/mobile/themes/core/gingerbread/images/close-default-tablet-hdpi.png
+++ b/mobile/themes/core/gingerbread/images/close-default-tablet-hdpi.png
--- a/mobile/themes/core/gingerbread/images/close-inactive-tab-tablet-hdpi.png
+++ b/mobile/themes/core/gingerbread/images/close-inactive-tab-tablet-hdpi.png
--- a/mobile/themes/core/gingerbread/images/newtab-default-tablet-hdpi.png
+++ b/mobile/themes/core/gingerbread/images/newtab-default-tablet-hdpi.png
--- a/mobile/themes/core/honeycomb/browser.css
+++ b/mobile/themes/core/honeycomb/browser.css
@ -1019,6 +1019,7 @@ documenttab[selected="true"] > stack > .documenttab-thumbnail {
 .documenttab-close-container {
  position: relative;
  left: -16px;
+  -moz-margin-start: -16px;
  -moz-margin-end: 49px;
 }

--- a/mobile/themes/core/honeycomb/images/close-active-hdpi.png
+++ b/mobile/themes/core/honeycomb/images/close-active-hdpi.png
--- a/mobile/themes/core/honeycomb/images/close-active-tablet-hdpi.png
+++ b/mobile/themes/core/honeycomb/images/close-active-tablet-hdpi.png
--- a/mobile/themes/core/honeycomb/images/close-background-hdpi.png
+++ b/mobile/themes/core/honeycomb/images/close-background-hdpi.png
--- a/mobile/themes/core/honeycomb/images/close-default-hdpi.png
+++ b/mobile/themes/core/honeycomb/images/close-default-hdpi.png
--- a/mobile/themes/core/honeycomb/images/close-default-tablet-hdpi.png
+++ b/mobile/themes/core/honeycomb/images/close-default-tablet-hdpi.png
--- a/mobile/themes/core/honeycomb/images/close-inactive-tab-hdpi.png
+++ b/mobile/themes/core/honeycomb/images/close-inactive-tab-hdpi.png
--- a/mobile/themes/core/honeycomb/images/close-inactive-tab-tablet-hdpi.png
+++ b/mobile/themes/core/honeycomb/images/close-inactive-tab-tablet-hdpi.png
--- a/mobile/themes/core/honeycomb/images/newtab-default-hdpi.png
+++ b/mobile/themes/core/honeycomb/images/newtab-default-hdpi.png
--- a/mobile/themes/core/honeycomb/images/newtab-default-tablet-hdpi.png
+++ b/mobile/themes/core/honeycomb/images/newtab-default-tablet-hdpi.png
--- a/mobile/themes/core/images/close-active-tablet-hdpi.png
+++ b/mobile/themes/core/images/close-active-tablet-hdpi.png
--- a/mobile/themes/core/images/close-background-hdpi.png
+++ b/mobile/themes/core/images/close-background-hdpi.png
--- a/mobile/themes/core/images/close-default-tablet-hdpi.png
+++ b/mobile/themes/core/images/close-default-tablet-hdpi.png
--- a/mobile/themes/core/images/close-inactive-tab-tablet-hdpi.png
+++ b/mobile/themes/core/images/close-inactive-tab-tablet-hdpi.png
--- a/mobile/themes/core/images/newtab-default-tablet-hdpi.png
+++ b/mobile/themes/core/images/newtab-default-tablet-hdpi.png
--- a/mobile/themes/core/jar.mn
+++ b/mobile/themes/core/jar.mn
@ -90,6 +90,7 @@ chrome.jar:
  skin/images/row-header-bg.png             (images/row-header-bg.png)
  skin/images/console-default-hdpi.png        (images/console-default-hdpi.png)
  skin/images/newtab-default-hdpi.png         (images/newtab-default-hdpi.png)
+  skin/images/newtab-default-tablet-hdpi.png (images/newtab-default-tablet-hdpi.png)
  skin/images/tab-active-hdpi.png           (images/tab-active-hdpi.png)
  skin/images/tab-inactive-hdpi.png         (images/tab-inactive-hdpi.png)
  skin/images/tab-closed-hdpi.png           (images/tab-closed-hdpi.png)
@ -110,8 +111,12 @@ chrome.jar:
  skin/images/unlocked-hdpi.png             (images/unlocked-hdpi.png)
  skin/images/locked-hdpi.png               (images/locked-hdpi.png)
  skin/images/close-default-hdpi.png        (images/close-default-hdpi.png)
+  skin/images/close-default-tablet-hdpi.png (images/close-default-tablet-hdpi.png)
  skin/images/close-active-hdpi.png         (images/close-active-hdpi.png)
+  skin/images/close-active-tablet-hdpi.png  (images/close-active-tablet-hdpi.png)
  skin/images/close-inactive-tab-hdpi.png   (images/close-inactive-tab-hdpi.png)
+  skin/images/close-inactive-tab-tablet-hdpi.png   (images/close-inactive-tab-tablet-hdpi.png)
+  skin/images/close-background-hdpi.png     (images/close-background-hdpi.png)
  skin/images/check-30.png                  (images/check-30.png)
  skin/images/search-glass-30.png           (images/search-glass-30.png)
  skin/images/search-clear-30.png           (images/search-clear-30.png)
@ -214,6 +219,7 @@ chrome.jar:
  skin/gingerbread/images/row-header-bg.png             (gingerbread/images/row-header-bg.png)
  skin/gingerbread/images/console-default-hdpi.png        (gingerbread/images/console-default-hdpi.png)
  skin/gingerbread/images/newtab-default-hdpi.png         (gingerbread/images/newtab-default-hdpi.png)
+  skin/gingerbread/images/newtab-default-tablet-hdpi.png (gingerbread/images/newtab-default-tablet-hdpi.png)
  skin/gingerbread/images/tab-active-hdpi.png           (gingerbread/images/tab-active-hdpi.png)
  skin/gingerbread/images/tab-inactive-hdpi.png         (gingerbread/images/tab-inactive-hdpi.png)
  skin/gingerbread/images/tab-closed-hdpi.png           (gingerbread/images/tab-closed-hdpi.png)
@ -233,8 +239,12 @@ chrome.jar:
  skin/gingerbread/images/unlocked-hdpi.png             (gingerbread/images/unlocked-hdpi.png)
  skin/gingerbread/images/locked-hdpi.png               (gingerbread/images/locked-hdpi.png)
  skin/gingerbread/images/close-default-hdpi.png        (gingerbread/images/close-default-hdpi.png)
+  skin/gingerbread/images/close-default-tablet-hdpi.png (gingerbread/images/close-default-tablet-hdpi.png)
  skin/gingerbread/images/close-active-hdpi.png         (gingerbread/images/close-active-hdpi.png)
+  skin/gingerbread/images/close-active-tablet-hdpi.png  (gingerbread/images/close-active-tablet-hdpi.png)
+  skin/gingerbread/images/close-background-hdpi.png     (gingerbread/images/close-background-hdpi.png)
  skin/gingerbread/images/close-inactive-tab-hdpi.png   (gingerbread/images/close-inactive-tab-hdpi.png)
+  skin/gingerbread/images/close-inactive-tab-tablet-hdpi.png   (gingerbread/images/close-inactive-tab-tablet-hdpi.png)
  skin/gingerbread/images/check-30.png                  (gingerbread/images/check-30.png)
  skin/gingerbread/images/search-glass-30.png           (gingerbread/images/search-glass-30.png)
  skin/gingerbread/images/search-clear-30.png           (gingerbread/images/search-clear-30.png)
@ -339,6 +349,7 @@ chrome.jar:
  skin/honeycomb/images/row-header-bg.png             (honeycomb/images/row-header-bg.png)
  skin/honeycomb/images/console-default-hdpi.png        (honeycomb/images/console-default-hdpi.png)
  skin/honeycomb/images/newtab-default-hdpi.png         (honeycomb/images/newtab-default-hdpi.png)
+  skin/honeycomb/images/newtab-default-tablet-hdpi.png (honeycomb/images/newtab-default-tablet-hdpi.png)
  skin/honeycomb/images/tab-active-hdpi.png           (honeycomb/images/tab-active-hdpi.png)
  skin/honeycomb/images/tab-inactive-hdpi.png         (honeycomb/images/tab-inactive-hdpi.png)
  skin/honeycomb/images/tab-closed-hdpi.png           (honeycomb/images/tab-closed-hdpi.png)
@ -359,8 +370,12 @@ chrome.jar:
  skin/honeycomb/images/unlocked-hdpi.png             (honeycomb/images/unlocked-hdpi.png)
  skin/honeycomb/images/locked-hdpi.png               (honeycomb/images/locked-hdpi.png)
  skin/honeycomb/images/close-default-hdpi.png        (honeycomb/images/close-default-hdpi.png)
+  skin/honeycomb/images/close-default-tablet-hdpi.png (honeycomb/images/close-default-tablet-hdpi.png)
  skin/honeycomb/images/close-active-hdpi.png         (honeycomb/images/close-active-hdpi.png)
+  skin/honeycomb/images/close-active-tablet-hdpi.png  (honeycomb/images/close-active-tablet-hdpi.png)
+  skin/honeycomb/images/close-background-hdpi.png     (honeycomb/images/close-background-hdpi.png)
  skin/honeycomb/images/close-inactive-tab-hdpi.png   (honeycomb/images/close-inactive-tab-hdpi.png)
+  skin/honeycomb/images/close-inactive-tab-tablet-hdpi.png   (honeycomb/images/close-inactive-tab-tablet-hdpi.png)
  skin/honeycomb/images/check-30.png                  (images/check-30.png)
  skin/honeycomb/images/check-selected-hdpi.png       (honeycomb/images/check-selected-hdpi.png)
  skin/honeycomb/images/check-unselected-hdpi.png     (honeycomb/images/check-unselected-hdpi.png)
--- a/mobile/themes/core/tablet.css
+++ b/mobile/themes/core/tablet.css
@ -30,6 +30,70 @@
  visibility: collapse;
 }

+#tabs-container[tablet="true"] {
+  -moz-border-end: 0px;
+  background: #000;
+}
+
+#tabs[tablet="true"] > scrollbox {
+  max-width: 200px;
+}
+
+#tabs[tablet="true"] .tabs-list {
+  -moz-column-width: 200px;
+  -moz-padding-end: 0px;
+  -moz-padding-start: 0px;
+}
+
+documenttab[tablet="true"] {
+  width: 200px;
+  padding: @padding_xxnormal@;
+  -moz-margin-start: 0px;
+  background: none;
+}
+
+documenttab[tablet="true"][selected="true"] {
+  background: none;
+}
+
+.documenttab-thumbnail[tablet="true"] {
+  border-radius: @border_radius_tiny@;
+}
+
+.documenttab-close-container[tablet="true"] {
+  left: 0px;
+  -moz-margin-end: 0px;
+  -moz-margin-start: 135px;
+  -moz-box-pack: end;
+  -moz-box-align: center;
+}
+
+documenttab[selected="true"] > stack > .documenttab-close-container[tablet="true"] {
+  background: url("chrome://browser/skin/images/close-background-hdpi.png");
+  background-repeat: no-repeat;
+  background-position: right;
+  -moz-margin-end: -@padding_xxnormal@;
+  padding-right: 2px;
+}
+
+.documenttab-close[tablet="true"] {
+  width: 30px;
+  height: 44px;
+  list-style-image: url("chrome://browser/skin/images/close-inactive-tab-tablet-hdpi.png");
+}
+
+documenttab[selected="true"] > stack > hbox > .documenttab-close[tablet="true"] {
+  list-style-image: url("chrome://browser/skin/images/close-default-tablet-hdpi.png");
+}
+
+.documenttab-close-container:hover:active > .documenttab-close[tablet="true"] {
+  list-style-image: url("chrome://browser/skin/images/close-active-tablet-hdpi.png");
+}
+
+#newtab-button[tablet="true"] {
+  list-style-image: url("images/newtab-default-tablet-hdpi.png");
+}
+
@media (@orientation@: portrait) {
  #toolbar-main[tablet="true"] > #tool-tabs {
    visibility: visible;