Bug 768442 - It's impossible to add a sidebar inside a tab. r=dao
authorPaul Rouget <paul@mozilla.com>
Thu, 30 Aug 2012 12:23:26 +0200
changeset 104141 8662609802b839cc1a29aa200d42a0a8019f6e1c
parent 104140 8518de3a9edf7d4147a61530629d89c19279269d
child 104234 e00f615159f19a1735854a277a7242579f1c3b84
push id1056
push userprouget@mozilla.com
push dateWed, 05 Sep 2012 08:48:30 +0000
treeherderfx-team@8662609802b8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs768442
milestone18.0a1
Bug 768442 - It's impossible to add a sidebar inside a tab. r=dao
browser/base/content/browser.css
browser/base/content/tabbrowser.xml
browser/base/content/test/browser_bug462673.js
browser/devtools/responsivedesign/responsivedesign.jsm
browser/themes/gnomestripe/browser.css
browser/themes/pinstripe/browser.css
browser/themes/winstripe/browser.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -600,34 +600,34 @@ html|*#gcli-output-frame,
 /* We don't show the Style Editor button in the developer toolbar for now.
    See bug 771203 */
 #developer-toolbar-styleeditor {
   display: none;
 }
 
 /* Responsive Mode */
 
-vbox[anonid=browserContainer][responsivemode] {
+.browserContainer[responsivemode] {
   overflow: auto;
 }
 
 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) {
   -moz-box-pack: end;
 }
 
-stack[anonid=browserStack][responsivemode] {
+.browserStack[responsivemode] {
   transition-duration: 200ms;
   transition-timing-function: linear;
 }
 
-stack[anonid=browserStack][responsivemode] {
+.browserStack[responsivemode] {
   transition-property: min-width, max-width, min-height, max-height;
 }
 
-stack[anonid=browserStack][responsivemode][notransition] {
+.browserStack[responsivemode][notransition] {
   transition: none;
 }
 
 chatbox {
   -moz-binding: url("chrome://browser/content/socialchat.xml#chatbox");
 }
 
 chatbar {
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -21,22 +21,24 @@
 
     <content>
       <xul:stringbundle anonid="tbstringbundle" src="chrome://browser/locale/tabbrowser.properties"/>
       <xul:tabbox anonid="tabbox" class="tabbrowser-tabbox"
                   flex="1" eventnode="document" xbl:inherits="handleCtrlPageUpDown"
                   onselect="if (event.target.localName == 'tabpanels') this.parentNode.updateCurrentBrowser();">
         <xul:tabpanels flex="1" class="plain" selectedIndex="0" anonid="panelcontainer">
           <xul:notificationbox flex="1">
-            <xul:vbox flex="1" anonid="browserContainer">
-              <xul:stack flex="1" anonid="browserStack">
-                <xul:browser type="content-primary" message="true" disablehistory="true"
-                             xbl:inherits="tooltip=contenttooltip,contextmenu=contentcontextmenu,autocompletepopup"/>
-              </xul:stack>
-            </xul:vbox>
+            <xul:hbox flex="1" class="browserSidebarContainer">
+              <xul:vbox flex="1" class="browserContainer">
+                <xul:stack flex="1" class="browserStack">
+                  <xul:browser anonid="initialBrowser" type="content-primary" message="true" disablehistory="true"
+                               xbl:inherits="tooltip=contenttooltip,contextmenu=contentcontextmenu,autocompletepopup"/>
+                </xul:stack>
+              </xul:vbox>
+            </xul:hbox>
           </xul:notificationbox>
         </xul:tabpanels>
       </xul:tabbox>
       <children/>
     </content>
     <implementation implements="nsIDOMEventListener">
 
       <property name="tabContextMenu" readonly="true"
@@ -290,16 +292,25 @@
         ]]>
         </body>
       </method>
 
       <method name="getNotificationBox">
         <parameter name="aBrowser"/>
         <body>
           <![CDATA[
+            return this.getSidebarContainer(aBrowser).parentNode;
+          ]]>
+        </body>
+      </method>
+
+      <method name="getSidebarContainer">
+        <parameter name="aBrowser"/>
+        <body>
+          <![CDATA[
             return this.getBrowserContainer(aBrowser).parentNode;
           ]]>
         </body>
       </method>
 
       <method name="getBrowserContainer">
         <parameter name="aBrowser"/>
         <body>
@@ -1287,34 +1298,42 @@
             if (this.hasAttribute("autocompletepopup"))
               b.setAttribute("autocompletepopup", this.getAttribute("autocompletepopup"));
             b.setAttribute("autoscrollpopup", this._autoScrollPopup.id);
 
             // Create the browserStack container
             var stack = document.createElementNS(
                                     "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
                                     "stack");
-            stack.setAttribute("anonid", "browserStack");
+            stack.className = "browserStack";
             stack.appendChild(b);
             stack.setAttribute("flex", "1");
 
             // Create the browserContainer
-            var box = document.createElementNS(
+            var browserContainer = document.createElementNS(
                                     "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
                                     "vbox");
-            box.setAttribute("anonid", "browserContainer");
-            box.appendChild(stack);
-            box.setAttribute("flex", "1");
+            browserContainer.className = "browserContainer";
+            browserContainer.appendChild(stack);
+            browserContainer.setAttribute("flex", "1");
+
+            // Create the sidebar container
+            var browserSidebarContainer = document.createElementNS(
+                                      "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
+                                      "hbox");
+            browserSidebarContainer.className = "browserSidebarContainer";
+            browserSidebarContainer.appendChild(browserContainer);
+            browserSidebarContainer.setAttribute("flex", "1");
 
             // Add the Message and the Browser to the box
             var notificationbox = document.createElementNS(
                                     "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
                                     "notificationbox");
             notificationbox.setAttribute("flex", "1");
-            notificationbox.appendChild(box);
+            notificationbox.appendChild(browserSidebarContainer);
 
             var position = this.tabs.length - 1;
             var uniqueId = "panel" + Date.now() + position;
             notificationbox.id = uniqueId;
             t.linkedPanel = uniqueId;
             t.linkedBrowser = b;
             t._tPos = position;
             if (t.previousSibling.selected)
@@ -1749,17 +1768,17 @@
             // browser removal. So we remove the browser and the panel in two
             // steps.
 
             var panel = this.getNotificationBox(browser);
 
             // This will unload the document. An unload handler could remove
             // dependant tabs, so it's important that the tabbrowser is now in
             // a consistent state (tab removed, tab positions updated, etc.).
-            panel.removeChild(this.getBrowserContainer(browser));
+            browser.parentNode.removeChild(browser);
 
             // Release the browser in case something is erroneously holding a
             // reference to the tab after its removal.
             aTab.linkedBrowser = null;
 
             // As the browser is removed, the removal of a dependent document can
             // cause the whole window to close. So at this point, it's possible
             // that the binding is destructed.
@@ -2554,17 +2573,17 @@
               }
               break;
           }
         ]]></body>
       </method>
 
       <constructor>
         <![CDATA[
-          this.mCurrentBrowser = this.mPanelContainer.firstChild.firstChild.firstChild.firstChild;
+          this.mCurrentBrowser = document.getAnonymousElementByAttribute(this, "anonid", "initialBrowser");
           this.mCurrentTab = this.tabContainer.firstChild;
           document.addEventListener("keypress", this, false);
           window.addEventListener("sizemodechange", this, false);
 
           var uniqueId = "panel" + Date.now();
           this.mPanelContainer.childNodes[0].id = uniqueId;
           this.mCurrentTab.linkedPanel = uniqueId;
           this.mCurrentTab._tPos = 0;
--- a/browser/base/content/test/browser_bug462673.js
+++ b/browser/base/content/test/browser_bug462673.js
@@ -10,17 +10,17 @@ var runs = [
     var newBrowser = newTab.linkedBrowser;
     tabbrowser.removeTab(tab);
     ok(!win.closed, "Window stays open");
     if (!win.closed) {
       is(tabbrowser.tabContainer.childElementCount, 1, "Window has one tab");
       is(tabbrowser.browsers.length, 1, "Window has one browser");
       is(tabbrowser.selectedTab, newTab, "Remaining tab is selected");
       is(tabbrowser.selectedBrowser, newBrowser, "Browser for remaining tab is selected");
-      is(tabbrowser.mTabBox.selectedPanel, newBrowser.parentNode.parentNode.parentNode, "Panel for remaining tab is selected");
+      is(tabbrowser.mTabBox.selectedPanel, newBrowser.parentNode.parentNode.parentNode.parentNode, "Panel for remaining tab is selected");
     }
   }
 ];
 
 function test() {
   waitForExplicitFinish();
   runOneTest();
 }
--- a/browser/devtools/responsivedesign/responsivedesign.jsm
+++ b/browser/devtools/responsivedesign/responsivedesign.jsm
@@ -88,17 +88,17 @@ let presets = [
 function ResponsiveUI(aWindow, aTab)
 {
   this.mainWindow = aWindow;
   this.tab = aTab;
   this.tabContainer = aWindow.gBrowser.tabContainer;
   this.browser = aTab.linkedBrowser;
   this.chromeDoc = aWindow.document;
   this.container = aWindow.gBrowser.getBrowserContainer(this.browser);
-  this.stack = this.container.querySelector("[anonid=browserStack]");
+  this.stack = this.container.querySelector(".browserStack");
 
   // Try to load presets from prefs
   if (Services.prefs.prefHasUserValue("devtools.responsiveUI.presets")) {
     try {
       presets = JSON.parse(Services.prefs.getCharPref("devtools.responsiveUI.presets"));
     } catch(e) {
       // User pref is malformated.
       Cu.reportError("Could not parse pref `devtools.responsiveUI.presets`: " + e);
@@ -277,22 +277,22 @@ ResponsiveUI.prototype = {
    */
    unCheckMenus: function RUI_unCheckMenus() {
      this.chromeDoc.getElementById("Tools:ResponsiveUI").setAttribute("checked", "false");
    },
 
   /**
    * Build the toolbar and the resizers.
    *
-   * <vbox anonid="browserContainer"> From tabbrowser.xml
+   * <vbox class="browserContainer"> From tabbrowser.xml
    *  <toolbar class="devtools-toolbar devtools-responsiveui-toolbar">
    *    <menulist class="devtools-menulist"/> // presets
    *    <toolbarbutton tabindex="0" class="devtools-toolbarbutton" label="rotate"/> // rotate
    *  </toolbar>
-   *  <stack anonid="browserStack"> From tabbrowser.xml
+   *  <stack class="browserStack"> From tabbrowser.xml
    *    <browser/>
    *    <box class="devtools-responsiveui-resizehandle" bottom="0" right="0"/>
    *    <box class="devtools-responsiveui-resizebar" top="0" right="0"/>
    *  </stack>
    * </vbox>
    */
   buildUI: function RUI_buildUI() {
     // Toolbar
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -2482,23 +2482,23 @@ html|*#gcli-output-frame {
 }
 
 .gcli-in-closebrace {
   color: hsl(0,0%,80%);
 }
 
 /* Responsive Mode */
 
-vbox[anonid=browserContainer][responsivemode] {
+.browserContainer[responsivemode] {
   background: #2a3643 url("chrome://browser/skin/devtools/responsive-background.png");
   box-shadow: 0 0 7px black inset;
   padding: 0 20px 20px 20px;
 }
 
-stack[anonid=browserStack][responsivemode] {
+.browserStack[responsivemode] {
   box-shadow: 0 0 7px black;
 }
 
 .devtools-responsiveui-toolbar {
   background: transparent;
   margin: 10px 0;
   padding: 0;
   box-shadow: none;
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -3201,23 +3201,23 @@ html|*#gcli-output-frame {
 }
 
 .gcli-in-closebrace {
   color: hsl(0,0%,80%);
 }
 
 /* Responsive Mode */
 
-vbox[anonid=browserContainer][responsivemode] {
+.browserContainer[responsivemode] {
   background: #2a3643 url("chrome://browser/skin/devtools/responsive-background.png");
   box-shadow: 0 0 7px black inset;
   padding: 0 20px 20px 20px;
 }
 
-stack[anonid=browserStack][responsivemode] {
+.browserStack[responsivemode] {
   box-shadow: 0 0 7px black;
 }
 
 .devtools-responsiveui-toolbar {
   background: transparent;
   margin: 10px 0;
   padding: 0;
   box-shadow: none;
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -3162,23 +3162,23 @@ html|*#gcli-output-frame {
 }
 
 .gcli-in-closebrace {
   color: hsl(0,0%,80%);
 }
 
 /* Responsive Mode */
 
-vbox[anonid=browserContainer][responsivemode] {
+.browserContainer[responsivemode] {
   background: #2a3643 url("chrome://browser/skin/devtools/responsive-background.png");
   box-shadow: 0 0 7px black inset;
   padding: 0 20px 20px 20px;
 }
 
-stack[anonid=browserStack][responsivemode] {
+.browserStack[responsivemode] {
   box-shadow: 0 0 7px black;
 }
 
 .devtools-responsiveui-toolbar {
   background: transparent;
   margin: 10px 0;
   padding: 0;
   box-shadow: none;