Bug 685487 - Add title label to tabs pane (r=mbrubeck)
authorLucas Rocha <lucasr@mozilla.com>
Wed, 14 Sep 2011 14:03:08 -0700
changeset 78288 a5d3fc877971498a5153aa43a139fd002e12e9e8
parent 78287 8845e4576a1ca3c123694588ebf7d63fea41e0c9
child 78289 2b7306ae2e2c1107e1147fa331408771864586ba
push id78
push userclegnitto@mozilla.com
push dateFri, 16 Dec 2011 17:32:24 +0000
treeherdermozilla-release@79d24e644fdd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmbrubeck
bugs685487
milestone9.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 685487 - Add title label to tabs pane (r=mbrubeck)
mobile/chrome/content/browser-ui.js
mobile/chrome/content/tabs.xml
mobile/components/SessionStore.js
mobile/themes/core/browser.css
mobile/themes/core/gingerbread/browser.css
mobile/themes/core/honeycomb/browser.css
mobile/themes/core/tablet.css
--- a/mobile/chrome/content/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@@ -110,28 +110,32 @@ var BrowserUI = {
       if (Browser._tabs[i].browser == aBrowser) {
         Browser.selectedTab = Browser.tabs[i];
         break;
       }
     }
   },
 
   _titleChanged: function(aBrowser) {
+    let url = this.getDisplayURI(aBrowser);
+    let caption = aBrowser.contentTitle || url;
+
+    if (aBrowser.contentTitle == "" && !Util.isURLEmpty(aBrowser.userTypedValue))
+      caption = aBrowser.userTypedValue;
+    else if (Util.isURLEmpty(url))
+      caption = "";
+
+    let tab = Browser.getTabForBrowser(aBrowser);
+    if (tab)
+      tab.chromeTab.updateTitle(caption);
+
     let browser = Browser.selectedBrowser;
     if (browser && aBrowser != browser)
       return;
 
-    let url = this.getDisplayURI(browser);
-    let caption = browser.contentTitle || url;
-
-    if (browser.contentTitle == "" && !Util.isURLEmpty(browser.userTypedValue))
-      caption = browser.userTypedValue;
-    else if (Util.isURLEmpty(url))
-      caption = "";
-
     if (caption) {
       this._title.value = caption;
       this._title.classList.remove("placeholder");
     } else {
       this._title.value = this._title.getAttribute("placeholder");
       this._title.classList.add("placeholder");
     }
   },
--- a/mobile/chrome/content/tabs.xml
+++ b/mobile/chrome/content/tabs.xml
@@ -3,31 +3,35 @@
 <bindings
     xmlns="http://www.mozilla.org/xbl"
     xmlns:xbl="http://www.mozilla.org/xbl"
     xmlns:html="http://www.w3.org/1999/xhtml"
     xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
   <binding id="documenttab">
     <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()" 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>
+      <xul:vbox anonid="container" class="documenttab-container" left="0" top="0" observes="bcast_urlbarState">
+        <xul:stack anonid="page" flex="1">
+          <html:canvas anonid="thumbnail" class="documenttab-thumbnail" left="0" moz-opaque="true" empty="true"
+            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>
+        <xul:label anonid="title" crop="end" class="documenttab-title" observes="bcast_urlbarState"/>
+      </xul:vbox>
     </content>
 
     <implementation>
       <field name="ignoreUndo">false</field>
       <field name="thumbnail" readonly="true">document.getAnonymousElementByAttribute(this, "anonid", "thumbnail");</field>
       <field name="_reload" readonly="true">document.getAnonymousElementByAttribute(this, "anonid", "reload");</field>
       <field name="_closeContainer" readonly="true">document.getAnonymousElementByAttribute(this, "anonid", "close-container");</field>
+      <field name="_title" readonly="true">document.getAnonymousElementByAttribute(this, "anonid", "title");</field>
       <field name="_container" readonly="true">this.parentNode.parentNode;</field>
 
       <constructor>
         <![CDATA[
           this.updateTabletLayout(this.thumbnail);
         ]]>
       </constructor>
 
@@ -47,18 +51,19 @@
               tabHeight = 65;
               closeWidth = 55;
               closeHeight = 65;
             }
 
             if (tabWidth != thumbnail.width) {
               let reload = this._reload;
               let closeContainer = this._closeContainer;
+              let title = this._title;
 
-              thumbnail.width = reload.width = tabWidth;
+              thumbnail.width = reload.width = title.width = tabWidth;
               thumbnail.height = reload.height = tabHeight;
               closeContainer.width = closeWidth;
               closeContainer.height = closeHeight;
             }
           ]]>
         </body>
       </method>
 
@@ -89,16 +94,25 @@
             let closeFn = new Function("event", this._container.getAttribute("onreloadtab"));
             closeFn.call(this);
 
             this._container.removeTab(this);
           ]]>
         </body>
       </method>
 
+      <method name="updateTitle">
+        <parameter name="title"/>
+        <body>
+          <![CDATA[
+            this._title.value = title;
+          ]]>
+        </body>
+      </method>
+
       <method name="updateThumbnail">
         <parameter name="browser"/>
         <parameter name="width"/>
         <parameter name="height"/>
         <body>
           <![CDATA[
             let thumbnail = this.thumbnail;
             // Ensure the thumbnail will have the correct
--- a/mobile/components/SessionStore.js
+++ b/mobile/components/SessionStore.js
@@ -776,16 +776,19 @@ SessionStore.prototype = {
               index: tabData.index
             };
             tab.browser.messageManager.sendAsyncMessage("WebNavigation:LoadURI", json);
           } else {
             // Make sure the browser has its session data for the delay reload
             tab.browser.__SS_data = tabData;
             tab.browser.__SS_restore = true;
 
+            // Restore current title
+            tab.chromeTab.updateTitle(tabData.entries[tabData.index - 1].title);
+
             // Recreate the thumbnail if we are delay loading the tab
             let canvas = tab.chromeTab.thumbnail;
             canvas.setAttribute("restored", "true");
   
             let image = new window.Image();
             image.onload = function() {
               if (canvas)
                 canvas.getContext("2d").drawImage(image, 0, 0);
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -973,63 +973,67 @@ documenttab[selected="true"] {
   background-color: white;
   opacity: 0.5;
 
   /* if there is no border, blank thumbnail are invisible */
   border: 1px solid white;
   margin: -1px;
 }
 
-documenttab:hover:active > stack > .documenttab-thumbnail,
-documenttab[selected="true"] > stack > .documenttab-thumbnail {
+documenttab:hover:active > vbox > stack > .documenttab-thumbnail,
+documenttab[selected="true"] > vbox > stack > .documenttab-thumbnail {
   opacity: 1.0;
 }
 
 .documenttab-close-container {
   position: relative;
   left: -16px;
   -moz-margin-start: -16px;
   -moz-margin-end: 49px;
 }
 
 .documenttab-close {
   width: 40px;
   height: 40px;
   list-style-image: url("chrome://browser/skin/images/close-inactive-tab-hdpi.png");
 }
 
-documenttab[selected="true"] > stack > hbox > .documenttab-close {
+documenttab[selected="true"] > vbox > stack > hbox > .documenttab-close {
   list-style-image: url("chrome://browser/skin/images/close-default-hdpi.png");
 }
 
 .documenttab-close-container:hover:active > .documenttab-close {
   list-style-image: url("chrome://browser/skin/images/close-active-hdpi.png");
 }
 
-documenttab:only-child > stack > hbox > .documenttab-close {
+documenttab:only-child > vbox > stack > hbox > .documenttab-close {
   display: none;
 }
 
 documenttab[reload="true"] {
   background: url("chrome://browser/skin/images/tab-closed-hdpi.png") bottom repeat-x;
 }
 
 .documenttab-reload {
   background: url("chrome://browser/skin/images/tab-reopen-hdpi.png");
   display: none;
 }
 
-documenttab[reload="true"] > stack > .documenttab-close-container {
+documenttab[reload="true"] > vbox > stack > .documenttab-close-container {
   display: none;
 }
 
-documenttab[reload="true"] > stack > .documenttab-reload {
+documenttab[reload="true"] > vbox > stack > .documenttab-reload {
   display: -moz-box;
 }
 
+.documenttab-title {
+  display: none;
+}
+
 #newtab-button {
   -moz-box-flex: 1;
   list-style-image: url("images/newtab-default-hdpi.png");
   height: @sidebar_button_height@;
 }
 
 /* bookmark editor   ------------------------------------------------------- */
 #bookmark-form .bookmark-controls {
--- a/mobile/themes/core/gingerbread/browser.css
+++ b/mobile/themes/core/gingerbread/browser.css
@@ -922,63 +922,67 @@ documenttab[selected="true"] {
   background-color: white;
   opacity: 0.5;
 
   /* if there is no border, blank thumbnail are invisible */
   border: 1px solid white;
   margin: -1px;
 }
 
-documenttab:hover:active > stack > .documenttab-thumbnail,
-documenttab[selected="true"] > stack > .documenttab-thumbnail {
+documenttab:hover:active > vbox > stack > .documenttab-thumbnail,
+documenttab[selected="true"] > vbox > stack > .documenttab-thumbnail {
   opacity: 1.0;
 }
 
 .documenttab-close-container {
   position: relative;
   left: -16px;
   -moz-margin-start: -16px;
   -moz-margin-end: 49px;
 }
 
 .documenttab-close {
   width: 40px;
   height: 40px;
   list-style-image: url("chrome://browser/skin/images/close-inactive-tab-hdpi.png");
 }
 
-documenttab[selected="true"] > stack > hbox > .documenttab-close {
+documenttab[selected="true"] > vbox > stack > hbox > .documenttab-close {
   list-style-image: url("chrome://browser/skin/images/close-default-hdpi.png");
 }
 
 .documenttab-close-container:hover:active > .documenttab-close {
   list-style-image: url("chrome://browser/skin/images/close-active-hdpi.png");
 }
 
-documenttab:only-child > stack > hbox > .documenttab-close {
+documenttab:only-child > vbox > stack > hbox > .documenttab-close {
   display: none;
 }
 
 documenttab[reload="true"] {
   background: url("chrome://browser/skin/images/tab-closed-hdpi.png") bottom repeat-x;
 }
 
 .documenttab-reload {
   background: url("chrome://browser/skin/images/tab-reopen-hdpi.png");
   display: none;
 }
 
-documenttab[reload="true"] > stack > .documenttab-close-container {
+documenttab[reload="true"] > vbox > stack > .documenttab-close-container {
   display: none;
 }
 
-documenttab[reload="true"] > stack > .documenttab-reload {
+documenttab[reload="true"] > vbox > stack > .documenttab-reload {
   display: -moz-box;
 }
 
+.documenttab-title {
+  display: none;
+}
+
 #newtab-button {
   -moz-box-flex: 1;
   list-style-image: url("images/newtab-default-hdpi.png");
   height: @sidebar_button_height@;
 }
 
 /* bookmark editor   ------------------------------------------------------- */
 #bookmark-form .bookmark-controls {
--- a/mobile/themes/core/honeycomb/browser.css
+++ b/mobile/themes/core/honeycomb/browser.css
@@ -1011,63 +1011,67 @@ documenttab[selected="true"] {
   background-color: white;
   opacity: 0.5;
 
   /* if there is no border, blank thumbnail are invisible */
   border: 1px solid white;
   margin: -1px;
 }
 
-documenttab:hover:active > stack > .documenttab-thumbnail,
-documenttab[selected="true"] > stack > .documenttab-thumbnail {
+documenttab:hover:active > vbox > stack > .documenttab-thumbnail,
+documenttab[selected="true"] > vbox > stack > .documenttab-thumbnail {
   opacity: 1.0;
 }
 
 .documenttab-close-container {
   position: relative;
   left: -16px;
   -moz-margin-start: -16px;
   -moz-margin-end: 49px;
 }
 
 .documenttab-close {
   width: 40px;
   height: 40px;
   list-style-image: url("chrome://browser/skin/images/close-inactive-tab-hdpi.png");
 }
 
-documenttab[selected="true"] > stack > hbox > .documenttab-close {
+documenttab[selected="true"] > vbox > stack > hbox > .documenttab-close {
   list-style-image: url("chrome://browser/skin/images/close-default-hdpi.png");
 }
 
 .documenttab-close-container:hover:active > .documenttab-close {
   list-style-image: url("chrome://browser/skin/images/close-active-hdpi.png");
 }
 
-documenttab:only-child > stack > hbox > .documenttab-close {
+documenttab:only-child > vbox > stack > hbox > .documenttab-close {
   display: none;
 }
 
 documenttab[reload="true"] {
   background: url("chrome://browser/skin/images/tab-closed-hdpi.png") bottom repeat-x;
 }
 
 .documenttab-reload {
   background: url("chrome://browser/skin/images/tab-reopen-hdpi.png");
   display: none;
 }
 
-documenttab[reload="true"] > stack > .documenttab-close-container {
+documenttab[reload="true"] > vbox > stack > .documenttab-close-container {
   display: none;
 }
 
-documenttab[reload="true"] > stack > .documenttab-reload {
+documenttab[reload="true"] > vbox > stack > .documenttab-reload {
   display: -moz-box;
 }
 
+.documenttab-title {
+  display: none;
+}
+
 #newtab-button {
   -moz-box-flex: 1;
   list-style-image: url("images/newtab-default-hdpi.png");
   height: @sidebar_button_height@;
 }
 
 /* bookmark editor   ------------------------------------------------------- */
 #bookmark-form .bookmark-controls {
--- a/mobile/themes/core/tablet.css
+++ b/mobile/themes/core/tablet.css
@@ -66,42 +66,51 @@
 .documenttab-close-container[tablet] {
   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] {
+documenttab[selected="true"] > vbox > stack > .documenttab-close-container[tablet] {
   background: url("chrome://browser/skin/images/close-background-hdpi.png");
   background-repeat: no-repeat;
   background-position: right;
   -moz-margin-end: -12px;
   padding-right: 2px;
 }
 
 .documenttab-close[tablet] {
   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] {
+documenttab[selected="true"] > vbox > stack > hbox > .documenttab-close[tablet] {
   list-style-image: url("chrome://browser/skin/images/close-default-tablet-hdpi.png");
 }
 
 .documenttab-close-container:hover:active > .documenttab-close[tablet] {
   list-style-image: url("chrome://browser/skin/images/close-active-tablet-hdpi.png");
 }
 
 .documenttab-reload[tablet] {
   background: url("chrome://browser/skin/images/tab-reopen-tablet-hdpi.png");
 }
 
+.documenttab-title[tablet] {
+  color: #FFF;
+  font-size: @font_xtiny@ !important;
+  padding: @padding_small@;
+  margin: 0px;
+  text-align: center;
+  display: -moz-box;
+}
+
 #newtab-button[tablet] {
   list-style-image: url("images/newtab-default-tablet-hdpi.png");
 }
 
 @media (@orientation@: portrait) {
   #toolbar-main[tablet] > #tool-tabs {
     visibility: visible;
   }