Bug 1135635 - Position sidebar allTabs menu absolutely to avoid oveflow jittering; r=bgrins

--HG--
extra : rebase_source : 26e692e502288ff38a6097e7312b7ab2ef9ab802
extra : histedit_source : c84759a2221e14c661a0009f4403ae605ffbc22b%2Cf46ec9753c17d9c613a287dc2f343d70c27dd62d

browser/devtools/framework/sidebar.js

@@ -120,7 +120,7 @@ ToolSidebar.prototype = {
     let tabs = this._tabbox.tabs;
 
     // Create a container and insert it first in the tabbox
-    let allTabsContainer = this._panelDoc.createElementNS(XULNS, "box");
+    let allTabsContainer = this._panelDoc.createElementNS(XULNS, "stack");
     this._tabbox.insertBefore(allTabsContainer, tabs);
 
     // Move the tabs inside and make them flex
@@ -130,8 +130,10 @@ ToolSidebar.prototype = {
     // Create the dropdown menu next to the tabs
     this._allTabsBtn = this._panelDoc.createElementNS(XULNS, "toolbarbutton");
     this._allTabsBtn.setAttribute("class", "devtools-sidebar-alltabs");
+    this._allTabsBtn.setAttribute("right", "0");
+    this._allTabsBtn.setAttribute("top", "0");
+    this._allTabsBtn.setAttribute("width", "15");
     this._allTabsBtn.setAttribute("type", "menu");
-    this._allTabsBtn.setAttribute("label", l10n("sidebar.showAllTabs.label"));
     this._allTabsBtn.setAttribute("tooltiptext", l10n("sidebar.showAllTabs.tooltip"));
     this._allTabsBtn.setAttribute("hidden", "true");
     allTabsContainer.appendChild(this._allTabsBtn);
@@ -162,7 +164,7 @@ ToolSidebar.prototype = {
 
     // Moving back the tabs as a first child of the tabbox
     this._tabbox.insertBefore(tabs, this._tabbox.tabpanels);
-    this._tabbox.querySelector("box").remove();
+    this._tabbox.querySelector("stack").remove();
 
     this._allTabsBtn = null;
   },

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

@@ -71,11 +71,6 @@ browserConsoleCmd.commandkey=j
 # This is the tooltip of the pick button in the toolbox toolbar
 pickButton.tooltip=Pick an element from the page
 
-# LOCALIZATION NOTE (sidebar.showAllTabs.label)
-# This is the label shown in the show all tabs button in the tabbed side
-# bar, when there's no enough space to show all tabs at once
-sidebar.showAllTabs.label=…
-
 # LOCALIZATION NOTE (sidebar.showAllTabs.tooltip)
 # This is the tooltip shown when hover over the '…' button in the tabbed side
 # bar, when there's no enough space to show all tabs at once

browser/themes/shared/devtools/toolbars.inc.css

@@ -26,8 +26,7 @@
 
 /* Toolbars */
 .devtools-toolbar,
-.devtools-sidebar-tabs tabs,
-.devtools-sidebar-alltabs {
+.devtools-sidebar-tabs tabs {
   -moz-appearance: none;
   padding: 0;
   border-width: 0;
@@ -509,13 +508,17 @@
 }
 
 .devtools-sidebar-alltabs {
+  -moz-appearance: none;
+  height: 24px;
+  line-height: 24px;
+  padding: 0 4px;
   margin: 0;
   border-width: 0 0 1px 0;
   -moz-border-start-width: 1px;
   border-style: solid;
 }
 
-.devtools-sidebar-alltabs dropmarker {
+.devtools-sidebar-alltabs .toolbarbutton-icon {
   display: none;
 }