Bug 765564 - [devtb] Add a DevTools menu to the developer toolbar. r=dao
☠☠ backed out by 7b3b0c5c9933 ☠ ☠
authorPaul Rouget <paul@mozilla.com>
Fri, 13 Jul 2012 11:32:09 +0200
changeset 102876 486fd8f6d29d556c934b2284c7fd2fb7c8ed1030
parent 102875 48a7ba394c0ac315503acc5500cda96492ad7619
child 102877 564ed4fde8abfae7614a051885aef3e0c3793538
push idunknown
push userunknown
push dateunknown
reviewersdao
bugs765564
milestone17.0a1
Bug 765564 - [devtb] Add a DevTools menu to the developer toolbar. r=dao
browser/base/content/browser-appmenu.inc
browser/base/content/browser-menubar.inc
browser/base/content/browser-sets.inc
browser/base/content/browser.css
browser/base/content/browser.js
browser/base/content/browser.xul
browser/locales/en-US/chrome/browser/browser.dtd
browser/themes/gnomestripe/browser.css
browser/themes/pinstripe/browser.css
browser/themes/winstripe/browser.css
--- a/browser/base/content/browser-appmenu.inc
+++ b/browser/base/content/browser-appmenu.inc
@@ -137,78 +137,29 @@
                       label="&printSetupCmd.label;"
                       command="cmd_pageSetup"/>
           </menupopup>
       </splitmenu>
       <menuseparator class="appmenu-menuseparator"/>
       <menu id="appmenu_webDeveloper"
             label="&appMenuWebDeveloper.label;">
         <menupopup id="appmenu_webDeveloper_popup">
-          <menuitem id="appmenu_devToolbar"
-                    type="checkbox"
-                    autocheck="false"
-                    hidden="true"
-                    label="&devToolbarMenu.label;"
-                    command="Tools:DevToolbar"
-                    key="key_devToolbar"/>
-          <menuitem id="appmenu_webConsole"
-                    label="&webConsoleCmd.label;"
-                    type="checkbox"
-                    command="Tools:WebConsole"
-                    key="key_webConsole"/>
-          <menuitem id="appmenu_pageInspect"
-                    hidden="true"
-                    label="&inspectMenu.label;"
-                    type="checkbox"
-                    command="Tools:Inspect"
-                    key="key_inspect"/>
-          <menuitem id="appmenu_responsiveUI"
-                    hidden="true"
-                    label="&responsiveDesignTool.label;"
-                    type="checkbox"
-                    command="Tools:ResponsiveUI"
-                    key="key_responsiveUI"/>
-          <menuitem id="appmenu_debugger"
-                    hidden="true"
-                    type="checkbox"
-                    label="&debuggerMenu.label2;"
-                    key="key_debugger"
-                    command="Tools:Debugger"/>
-          <menuitem id="appmenu_remoteDebugger"
-                    hidden="true"
-                    label="&remoteDebuggerMenu.label;"
-                    command="Tools:RemoteDebugger"/>
-          <menuitem id="appmenu_chromeDebugger"
-                    hidden="true"
-                    label="&chromeDebuggerMenu.label;"
-                    command="Tools:ChromeDebugger"/>
-          <menuitem id="appmenu_scratchpad"
-                    hidden="true"
-                    label="&scratchpad.label;"
-                    key="key_scratchpad"
-                    command="Tools:Scratchpad"/>
-          <menuitem id="appmenu_styleeditor"
-                    hidden="true"
-                    type="checkbox"
-                    label="&styleeditor.label;"
-                    key="key_styleeditor"
-                    command="Tools:StyleEditor"/>
-          <menuitem id="appmenu_pageSource"
-                    label="&viewPageSourceCmd.label;"
-                    command="View:PageSource"
-                    key="key_viewSource"/>
-          <menuitem id="appmenu_errorConsole"
-                    hidden="true"
-                    label="&errorConsoleCmd.label;"
-                    key="key_errorConsole"
-                    oncommand="toJavaScriptConsole();"/>
+          <menuitem id="appmenu_devToolbar" observes="devtoolsMenuBroadcaster_DevToolbar"/>
+          <menuitem id="appmenu_webConsole" observes="devtoolsMenuBroadcaster_WebConsole" />
+          <menuitem id="appmenu_pageinspect" observes="devtoolsMenuBroadcaster_Inspect"/>
+          <menuitem id="appmenu_responsiveUI" observes="devtoolsMenuBroadcaster_ResponsiveUI"/>
+          <menuitem id="appmenu_debugger" observes="devtoolsMenuBroadcaster_Debugger"/>
+          <menuitem id="appmenu_remoteDebugger" observes="devtoolsMenuBroadcaster_RemoteDebugger"/>
+          <menuitem id="appmenu_chromeDebugger" observes="devtoolsMenuBroadcaster_ChromeDebugger"/>
+          <menuitem id="appmenu_scratchpad" observes="devtoolsMenuBroadcaster_Scratchpad"/>
+          <menuitem id="appmenu_styleeditor" observes="devtoolsMenuBroadcaster_StyleEditor"/>
+          <menuitem id="appmenu_pageSource" observes="devtoolsMenuBroadcaster_PageSource"/>
+          <menuitem id="appmenu_errorConsole" observes="devtoolsMenuBroadcaster_ErrorConsole"/>
           <menuseparator id="appmenu_devToolsEndSeparator"/>
-          <menuitem id="appmenu_getMoreDevtools"
-                    label="&getMoreDevtoolsCmd.label;"
-                    oncommand="openUILinkIn('https://addons.mozilla.org/firefox/collections/mozilla/webdeveloper/', 'tab');"/>
+          <menuitem id="appmenu_getMoreDevtools" observes="devtoolsMenuBroadcaster_GetMoreTools"/>
           <menuseparator/>
 #define ID_PREFIX appmenu_developer_
 #define OMIT_ACCESSKEYS
 #include browser-charsetmenu.inc
 #undef ID_PREFIX
 #undef OMIT_ACCESSKEYS
           <menuitem label="&goOfflineCmd.label;"
                     type="checkbox"
--- a/browser/base/content/browser-menubar.inc
+++ b/browser/base/content/browser-menubar.inc
@@ -509,87 +509,29 @@
                         observes="sync-syncnow-state"
                         oncommand="gSyncUI.doSync(event);"/>
 #endif
               <menuseparator id="devToolsSeparator"/>
               <menu id="webDeveloperMenu"
                     label="&webDeveloperMenu.label;"
                     accesskey="&webDeveloperMenu.accesskey;">
                 <menupopup id="menuWebDeveloperPopup">
-                  <menuitem id="menu_devToolbar"
-                            type="checkbox"
-                            autocheck="false"
-                            hidden="true"
-                            label="&devToolbarMenu.label;"
-                            accesskey="&devToolbarMenu.accesskey;"
-                            key="key_devToolbar"
-                            command="Tools:DevToolbar"/>
-                  <menuitem id="webConsole"
-                            type="checkbox"
-                            label="&webConsoleCmd.label;"
-                            accesskey="&webConsoleCmd.accesskey;"
-                            key="key_webConsole"
-                            command="Tools:WebConsole"/>
-                  <menuitem id="menu_pageinspect"
-                            type="checkbox"
-                            hidden="true"
-                            label="&inspectMenu.label;"
-                            accesskey="&inspectMenu.accesskey;"
-                            key="key_inspect"
-                            command="Tools:Inspect"/>
-                  <menuitem id="menu_responsiveUI"
-                            type="checkbox"
-                            hidden="true"
-                            label="&responsiveDesignTool.label;"
-                            accesskey="&responsiveDesignTool.accesskey;"
-                            key="key_responsiveUI"
-                            command="Tools:ResponsiveUI"/>
-                  <menuitem id="menu_debugger"
-                            hidden="true"
-                            type="checkbox"
-                            label="&debuggerMenu.label2;"
-                            key="key_debugger"
-                            command="Tools:Debugger"/>
-                  <menuitem id="menu_remoteDebugger"
-                            hidden="true"
-                            label="&remoteDebuggerMenu.label;"
-                            command="Tools:RemoteDebugger"/>
-                  <menuitem id="menu_chromeDebugger"
-                            hidden="true"
-                            label="&chromeDebuggerMenu.label;"
-                            command="Tools:ChromeDebugger"/>
-                  <menuitem id="menu_scratchpad"
-                            hidden="true"
-                            label="&scratchpad.label;"
-                            accesskey="&scratchpad.accesskey;"
-                            key="key_scratchpad"
-                            command="Tools:Scratchpad"/>
-                  <menuitem id="menu_styleeditor"
-                            type="checkbox"
-                            hidden="true"
-                            label="&styleeditor.label;"
-                            accesskey="&styleeditor.accesskey;"
-                            key="key_styleeditor"
-                            command="Tools:StyleEditor"/>
-                  <menuitem id="menu_pageSource"
-                            accesskey="&pageSourceCmd.accesskey;"
-                            label="&pageSourceCmd.label;"
-                            key="key_viewSource"
-                            command="View:PageSource"/>
-                  <menuitem id="javascriptConsole"
-                            hidden="true"
-                            label="&errorConsoleCmd.label;"
-                            accesskey="&errorConsoleCmd.accesskey;"
-                            key="key_errorConsole"
-                            oncommand="toJavaScriptConsole();"/>
+                  <menuitem id="menu_devToolbar" observes="devtoolsMenuBroadcaster_DevToolbar" accesskey="&devToolbarMenu.accesskey;"/>
+                  <menuitem id="webConsole" observes="devtoolsMenuBroadcaster_WebConsole" accesskey="&webConsoleCmd.accesskey;"/>
+                  <menuitem id="menu_pageinspect" observes="devtoolsMenuBroadcaster_Inspect" accesskey="&inspectMenu.accesskey;"/>
+                  <menuitem id="menu_responsiveUI" observes="devtoolsMenuBroadcaster_ResponsiveUI" accesskey="&responsiveDesignTool.accesskey;"/>
+                  <menuitem id="menu_debugger" observes="devtoolsMenuBroadcaster_Debugger"/>
+                  <menuitem id="menu_remoteDebugger" observes="devtoolsMenuBroadcaster_RemoteDebugger"/>
+                  <menuitem id="menu_chromeDebugger" observes="devtoolsMenuBroadcaster_ChromeDebugger"/>
+                  <menuitem id="menu_scratchpad" observes="devtoolsMenuBroadcaster_Scratchpad" accesskey="&scratchpad.accesskey;"/>
+                  <menuitem id="menu_styleeditor" observes="devtoolsMenuBroadcaster_StyleEditor" accesskey="&styleeditor.accesskey;"/>
+                  <menuitem id="menu_pageSource" observes="devtoolsMenuBroadcaster_PageSource" accesskey="&pageSourceCmd.accesskey;"/>
+                  <menuitem id="javascriptConsole" observes="devtoolsMenuBroadcaster_ErrorConsole" accesskey="&errorConsoleCmd.accesskey;"/>
                   <menuseparator id="devToolsEndSeparator"/>
-                  <menuitem id="getMoreDevtools"
-                            label="&getMoreDevtoolsCmd.label;"
-                            accesskey="&getMoreDevtoolsCmd.accesskey;"
-                            oncommand="openUILinkIn('https://addons.mozilla.org/firefox/collections/mozilla/webdeveloper/', 'tab');"/>
+                  <menuitem id="getMoreDevtools" observes="devtoolsMenuBroadcaster_GetMoreTools" accesskey="&getMoreDevtoolsCmd.accesskey;"/>
                 </menupopup>
               </menu>
               <menuitem id="menu_pageInfo"
                         accesskey="&pageInfoCmd.accesskey;"
                         label="&pageInfoCmd.label;"
 #ifndef XP_WIN
                         key="key_viewInfo"
 #endif
--- a/browser/base/content/browser-sets.inc
+++ b/browser/base/content/browser-sets.inc
@@ -83,26 +83,26 @@
     <command id="cmd_fullZoomReduce"  oncommand="FullZoom.reduce()"/>
     <command id="cmd_fullZoomEnlarge" oncommand="FullZoom.enlarge()"/>
     <command id="cmd_fullZoomReset"   oncommand="FullZoom.reset()"/>
     <command id="cmd_fullZoomToggle"  oncommand="ZoomManager.toggleZoom();"/>
     <command id="Browser:OpenLocation" oncommand="openLocation();"/>
 
     <command id="Tools:Search" oncommand="BrowserSearch.webSearch();"/>
     <command id="Tools:Downloads" oncommand="BrowserDownloadsUI();"/>
-    <command id="Tools:DevToolbar" oncommand="DeveloperToolbar.toggle();" disabled="true"/>
+    <command id="Tools:DevToolbar" oncommand="DeveloperToolbar.toggle();"/>
     <command id="Tools:DevToolbarFocus" oncommand="DeveloperToolbar.focus();" disabled="true"/>
     <command id="Tools:WebConsole" oncommand="HUDConsoleUI.toggleHUD();"/>
-    <command id="Tools:Inspect" oncommand="InspectorUI.toggleInspectorUI();" disabled="true"/>
-    <command id="Tools:Debugger" oncommand="DebuggerUI.toggleDebugger();" disabled="true"/>
-    <command id="Tools:RemoteDebugger" oncommand="DebuggerUI.toggleRemoteDebugger();" disabled="true"/>
-    <command id="Tools:ChromeDebugger" oncommand="DebuggerUI.toggleChromeDebugger();" disabled="true"/>
-    <command id="Tools:Scratchpad" oncommand="Scratchpad.openScratchpad();" disabled="true"/>
-    <command id="Tools:StyleEditor" oncommand="StyleEditor.toggle();" disabled="true"/>
-    <command id="Tools:ResponsiveUI" oncommand="ResponsiveUI.toggle();" disabled="true"/>
+    <command id="Tools:Inspect" oncommand="InspectorUI.toggleInspectorUI();"/>
+    <command id="Tools:Debugger" oncommand="DebuggerUI.toggleDebugger();"/>
+    <command id="Tools:RemoteDebugger" oncommand="DebuggerUI.toggleRemoteDebugger();"/>
+    <command id="Tools:ChromeDebugger" oncommand="DebuggerUI.toggleChromeDebugger();"/>
+    <command id="Tools:Scratchpad" oncommand="Scratchpad.openScratchpad();"/>
+    <command id="Tools:StyleEditor" oncommand="StyleEditor.toggle();"/>
+    <command id="Tools:ResponsiveUI" oncommand="ResponsiveUI.toggle();"/>
     <command id="Tools:Addons" oncommand="BrowserOpenAddonsMgr();"/>
     <command id="Tools:Sanitize"
      oncommand="Cc['@mozilla.org/browser/browserglue;1'].getService(Ci.nsIBrowserGlue).sanitize(window);"/>
     <command id="Tools:PrivateBrowsing" oncommand="gPrivateBrowsingUI.toggleMode();"/>
     <command id="History:UndoCloseTab" oncommand="undoCloseTab();"/>
     <command id="History:UndoCloseWindow" oncommand="undoCloseWindow();"/>
     <command id="Browser:ToggleAddonBar" oncommand="toggleAddonBar();"/>
     <command id="Social:SharePage" oncommand="SocialShareButton.sharePage();"/>
@@ -176,16 +176,81 @@
     <broadcaster id="singleFeedMenuitemState" disabled="true"/>
     <broadcaster id="multipleFeedsMenuState" hidden="true"/>
     <broadcaster id="tabviewGroupsNumber" groups="1"/>
 #ifdef MOZ_SERVICES_SYNC
     <broadcaster id="sync-setup-state"/>
     <broadcaster id="sync-syncnow-state"/>
 #endif
     <broadcaster id="workOfflineMenuitemState"/>
+
+    <!-- DevTools broadcasters -->
+    <broadcaster id="devtoolsMenuBroadcaster_DevToolbar"
+                 label="&devToolbarMenu.label;"
+                 type="checkbox" autocheck="false"
+                 command="Tools:DevToolbar"
+                 key="key_devToolbar"
+                 disabled="true" hidden="true"/>
+    <broadcaster id="devtoolsMenuBroadcaster_WebConsole"
+                 label="&webConsoleCmd.label;"
+                 type="checkbox" autocheck="false"
+                 key="key_webConsole"
+                 command="Tools:WebConsole"/>
+    <broadcaster id="devtoolsMenuBroadcaster_Inspect"
+                 label="&inspectMenu.label;"
+                 type="checkbox" autocheck="false"
+                 command="Tools:Inspect"
+                 key="key_inspect"
+                 disabled="true" hidden="true"/>
+    <broadcaster id="devtoolsMenuBroadcaster_Debugger"
+                 label="&debuggerMenu.label2;"
+                 type="checkbox" autocheck="false"
+                 command="Tools:Debugger"
+                 key="key_debugger"
+                 disabled="true" hidden="true"/>
+    <broadcaster id="devtoolsMenuBroadcaster_RemoteDebugger"
+                 label="&remoteDebuggerMenu.label;"
+                 command="Tools:RemoteDebugger"
+                 disabled="true" hidden="true"/>
+    <broadcaster id="devtoolsMenuBroadcaster_ChromeDebugger"
+                 label="&chromeDebuggerMenu.label;"
+                 command="Tools:ChromeDebugger"
+                 disabled="true" hidden="true"/>
+    <broadcaster id="devtoolsMenuBroadcaster_Scratchpad"
+                 label="&scratchpad.label;"
+                 command="Tools:Scratchpad"
+                 key="key_scratchpad"
+                 disabled="true" hidden="true"/>
+    <broadcaster id="devtoolsMenuBroadcaster_StyleEditor"
+                 label="&styleeditor.label;"
+                 type="checkbox" autocheck="false"
+                 command="Tools:StyleEditor"
+                 key="key_styleeditor"
+                 disabled="true" hidden="true"/>
+    <broadcaster id="devtoolsMenuBroadcaster_ResponsiveUI"
+                 label="&responsiveDesignTool.label;"
+                 type="checkbox" autocheck="false"
+                 command="Tools:ResponsiveUI"
+                 key="key_responsiveUI"
+                 disabled="true" hidden="true"/>
+    <broadcaster id="devtoolsMenuBroadcaster_PageSource"
+                 accesskey="&pageSourceCmd.accesskey;"
+                 label="&pageSourceCmd.label;"
+                 key="key_viewSource"
+                 command="View:PageSource"/>
+    <broadcaster id="devtoolsMenuBroadcaster_ErrorConsole"
+                 hidden="true"
+                 label="&errorConsoleCmd.label;"
+                 accesskey="&errorConsoleCmd.accesskey;"
+                 key="key_errorConsole"
+                 oncommand="toJavaScriptConsole();"/>
+    <broadcaster id="devtoolsMenuBroadcaster_GetMoreTools"
+                 label="&getMoreDevtoolsCmd.label;"
+                 accesskey="&getMoreDevtoolsCmd.accesskey;"
+                 oncommand="openUILinkIn('https://addons.mozilla.org/firefox/collections/mozilla/webdeveloper/', 'tab');"/>
   </broadcasterset>
 
   <keyset id="mainKeyset">
     <key id="key_newNavigator"
          key="&newNavigatorCmd.key;"
          command="cmd_newNavigator"
          modifiers="accel"/>
     <key id="key_newNavigatorTab" key="&tabCmd.commandkey;" modifiers="accel" command="cmd_newNavigatorTab"/>
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -573,16 +573,22 @@ html|*#gcli-output-frame,
 }
 
 #developer-toolbar-webconsole[error-count]:before {
   content: attr(error-count);
   display: -moz-box;
   -moz-box-pack: center;
 }
 
+/* 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] {
   overflow: auto;
 }
 
 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) {
   -moz-box-pack: end;
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1397,124 +1397,101 @@ var gBrowserInit = {
     window.addEventListener("resize", function resizeHandler(event) {
       if (event.target == window)
         setUrlAndSearchBarWidthForConditionalForwardButton();
     });
 
     // Enable developer toolbar?
     let devToolbarEnabled = gPrefService.getBoolPref("devtools.toolbar.enabled");
     if (devToolbarEnabled) {
-      document.getElementById("menu_devToolbar").hidden = false;
-      document.getElementById("Tools:DevToolbar").removeAttribute("disabled");
+      let broadcaster = document.getElementById("devtoolsMenuBroadcaster_DevToolbar");
+      broadcaster.removeAttribute("disabled");
+      broadcaster.removeAttribute("hidden");
       document.getElementById("Tools:DevToolbarFocus").removeAttribute("disabled");
-#ifdef MENUBAR_CAN_AUTOHIDE
-      document.getElementById("appmenu_devToolbar").hidden = false;
-#endif
 
       // Show the toolbar if it was previously visible
       if (gPrefService.getBoolPref("devtools.toolbar.visible")) {
         DeveloperToolbar.show(false);
       }
     }
 
     // Enable Inspector?
     let enabled = gPrefService.getBoolPref("devtools.inspector.enabled");
     if (enabled) {
-      document.getElementById("menu_pageinspect").hidden = false;
-      document.getElementById("Tools:Inspect").removeAttribute("disabled");
-#ifdef MENUBAR_CAN_AUTOHIDE
-      document.getElementById("appmenu_pageInspect").hidden = false;
-#endif
-      document.getElementById("developer-toolbar-inspector").hidden = false;
+      let broadcaster = document.getElementById("devtoolsMenuBroadcaster_Inspect");
+      broadcaster.removeAttribute("disabled");
+      broadcaster.removeAttribute("hidden");
     }
 
     // Enable Debugger?
     let enabled = gPrefService.getBoolPref("devtools.debugger.enabled");
     if (enabled) {
-      document.getElementById("menu_debugger").hidden = false;
-      document.getElementById("Tools:Debugger").removeAttribute("disabled");
-#ifdef MENUBAR_CAN_AUTOHIDE
-      document.getElementById("appmenu_debugger").hidden = false;
-#endif
-      document.getElementById("developer-toolbar-debugger").hidden = false;
+      let broadcaster = document.getElementById("devtoolsMenuBroadcaster_Debugger");
+      broadcaster.removeAttribute("disabled");
+      broadcaster.removeAttribute("hidden");
     }
 
     // Enable Remote Debugger?
     let enabled = gPrefService.getBoolPref("devtools.debugger.remote-enabled");
     if (enabled) {
-      document.getElementById("menu_remoteDebugger").hidden = false;
-      document.getElementById("Tools:RemoteDebugger").removeAttribute("disabled");
-#ifdef MENUBAR_CAN_AUTOHIDE
-      document.getElementById("appmenu_remoteDebugger").hidden = false;
-#endif
+      let broadcaster = document.getElementById("devtoolsMenuBroadcaster_RemoteDebugger");
+      broadcaster.removeAttribute("disabled");
+      broadcaster.removeAttribute("hidden");
     }
 
     // Enable Chrome Debugger?
     let enabled = gPrefService.getBoolPref("devtools.chrome.enabled") &&
                   gPrefService.getBoolPref("devtools.debugger.chrome-enabled") &&
                   gPrefService.getBoolPref("devtools.debugger.remote-enabled");
     if (enabled) {
-      document.getElementById("menu_chromeDebugger").hidden = false;
-      document.getElementById("Tools:ChromeDebugger").removeAttribute("disabled");
-#ifdef MENUBAR_CAN_AUTOHIDE
-      document.getElementById("appmenu_chromeDebugger").hidden = false;
-#endif
+      let broadcaster = document.getElementById("devtoolsMenuBroadcaster_ChromeDebugger");
+      broadcaster.removeAttribute("disabled");
+      broadcaster.removeAttribute("hidden");
     }
 
     // Enable Error Console?
     // XXX Temporarily always-enabled, see bug 601201
     let consoleEnabled = true || gPrefService.getBoolPref("devtools.errorconsole.enabled");
     if (consoleEnabled) {
-      document.getElementById("javascriptConsole").hidden = false;
-      document.getElementById("key_errorConsole").removeAttribute("disabled");
-#ifdef MENUBAR_CAN_AUTOHIDE
-      document.getElementById("appmenu_errorConsole").hidden = false;
-#endif
+      let broadcaster = document.getElementById("devtoolsMenuBroadcaster_ErrorConsole");
+      broadcaster.removeAttribute("disabled");
+      broadcaster.removeAttribute("hidden");
     }
 
     // Enable Scratchpad in the UI, if the preference allows this.
     let scratchpadEnabled = gPrefService.getBoolPref(Scratchpad.prefEnabledName);
     if (scratchpadEnabled) {
-      document.getElementById("menu_scratchpad").hidden = false;
-      document.getElementById("Tools:Scratchpad").removeAttribute("disabled");
-#ifdef MENUBAR_CAN_AUTOHIDE
-      document.getElementById("appmenu_scratchpad").hidden = false;
-#endif
+      let broadcaster = document.getElementById("devtoolsMenuBroadcaster_Scratchpad");
+      broadcaster.removeAttribute("disabled");
+      broadcaster.removeAttribute("hidden");
     }
 
     // Enable Style Editor?
     let styleEditorEnabled = gPrefService.getBoolPref(StyleEditor.prefEnabledName);
     if (styleEditorEnabled) {
-      document.getElementById("menu_styleeditor").hidden = false;
-      document.getElementById("Tools:StyleEditor").removeAttribute("disabled");
-#ifdef MENUBAR_CAN_AUTOHIDE
-      document.getElementById("appmenu_styleeditor").hidden = false;
-#endif
-      // We don't show the Style Editor button in the developer toolbar for now.
-      // See bug 771203
-      // document.getElementById("developer-toolbar-styleeditor").hidden = false;
+      let broadcaster = document.getElementById("devtoolsMenuBroadcaster_StyleEditor");
+      broadcaster.removeAttribute("disabled");
+      broadcaster.removeAttribute("hidden");
     }
 
 #ifdef MENUBAR_CAN_AUTOHIDE
     // If the user (or the locale) hasn't enabled the top-level "Character
     // Encoding" menu via the "browser.menu.showCharacterEncoding" preference,
     // hide it.
     if ("true" != gPrefService.getComplexValue("browser.menu.showCharacterEncoding",
                                                Ci.nsIPrefLocalizedString).data)
       document.getElementById("appmenu_charsetMenu").hidden = true;
 #endif
 
     // Enable Responsive UI?
     let responsiveUIEnabled = gPrefService.getBoolPref("devtools.responsiveUI.enabled");
     if (responsiveUIEnabled) {
-      document.getElementById("menu_responsiveUI").hidden = false;
-      document.getElementById("Tools:ResponsiveUI").removeAttribute("disabled");
-#ifdef MENUBAR_CAN_AUTOHIDE
-      document.getElementById("appmenu_responsiveUI").hidden = false;
-#endif
+      let broadcaster = document.getElementById("devtoolsMenuBroadcaster_ResponsiveUI");
+      broadcaster.removeAttribute("disabled");
+      broadcaster.removeAttribute("hidden");
     }
 
     let appMenuButton = document.getElementById("appmenu-button");
     let appMenuPopup = document.getElementById("appmenu-popup");
     if (appMenuButton && appMenuPopup) {
       let appMenuOpening = null;
       appMenuButton.addEventListener("mousedown", function(event) {
         if (event.button == 0)
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1120,34 +1120,45 @@
           <stack class="gclitoolbar-stack-node" flex="1">
             <hbox class="gclitoolbar-prompt">
               <label class="gclitoolbar-prompt-label">&#187;</label>
             </hbox>
             <hbox class="gclitoolbar-complete-node"/>
             <textbox class="gclitoolbar-input-node" rows="1"/>
           </stack>
           <toolbarbutton id="developer-toolbar-webconsole"
-                         label="&webConsoleButton.label;"
                          class="developer-toolbar-button"
-                         command="Tools:WebConsole"/>
+                         observes="devtoolsMenuBroadcaster_WebConsole"/>
           <toolbarbutton id="developer-toolbar-inspector"
-                         label="&inspectorButton.label;"
                          class="developer-toolbar-button"
-                         hidden="true"
-                         command="Tools:Inspect"/>
+                         observes="devtoolsMenuBroadcaster_Inspect"/>
           <toolbarbutton id="developer-toolbar-styleeditor"
-                         label="&styleeditor.label;"
                          class="developer-toolbar-button"
-                         hidden="true"
-                         command="Tools:StyleEditor"/>
+                         observes="devtoolsMenuBroadcaster_StyleEditor"/>
           <toolbarbutton id="developer-toolbar-debugger"
-                         label="&debuggerMenu.label2;"
+                         class="developer-toolbar-button"
+                         observes="devtoolsMenuBroadcaster_Debugger"/>
+          <toolbarbutton id="developer-toolbar-other-tools"
+                         type="menu"
                          class="developer-toolbar-button"
-                         hidden="true"
-                         command="Tools:Debugger"/>
+                         label="&devToolbarOtherToolsButton.label;">
+            <menupopup position="before_end">
+               <menuitem observes="devtoolsMenuBroadcaster_DevToolbar"/>
+               <menuitem observes="devtoolsMenuBroadcaster_ResponsiveUI"/>
+               <menuitem observes="devtoolsMenuBroadcaster_RemoteDebugger"/>
+               <menuitem observes="devtoolsMenuBroadcaster_ChromeDebugger"/>
+               <menuitem observes="devtoolsMenuBroadcaster_Scratchpad"/>
+               <menuitem observes="devtoolsMenuBroadcaster_StyleEditor"/>
+               <menuitem observes="devtoolsMenuBroadcaster_PageSource"/>
+               <menuitem observes="devtoolsMenuBroadcaster_ErrorConsole"/>
+               <menuseparator/>
+               <menuitem observes="devtoolsMenuBroadcaster_GetMoreTools"/>
+            </menupopup>
+          </toolbarbutton>
+
 #ifndef XP_MACOSX
           <toolbarbutton id="developer-toolbar-closebutton"
                          class="devtools-closebutton"
                          oncommand="DeveloperToolbar.hide();"
                          tooltiptext="&devToolbarCloseButton.tooltiptext;"/>
 #endif
    </toolbar>
 
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -236,16 +236,17 @@ These should match what Safari and other
 
 <!ENTITY inspectCloseButton.tooltiptext "Close Inspector">
 
 <!ENTITY devToolbarCloseButton.tooltiptext "Close Developer Toolbar">
 <!ENTITY devToolbarMenu.label              "Developer Toolbar">
 <!ENTITY devToolbarMenu.accesskey          "v">
 <!ENTITY devToolbar.keycode                "VK_F2">
 <!ENTITY devToolbar.keytext                "F2">
+<!ENTITY devToolbarOtherToolsButton.label  "More Tools">
 
 <!ENTITY webConsoleButton.label "Web Console">
 <!ENTITY inspectorButton.label "Inspector">
 
 <!ENTITY inspectorHTMLCopyInner.label       "Copy Inner HTML">
 <!ENTITY inspectorHTMLCopyInner.accesskey   "I">
 
 <!ENTITY inspectorHTMLCopyOuter.label       "Copy Outer HTML">
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -2546,16 +2546,17 @@ stack[anonid=browserStack][responsivemod
   border-radius: 3px;
   color: inherit;
   border: 1px solid transparent;
   margin: 0 5px;
   padding: 0 10px;
   list-style-image: url("chrome://browser/skin/devtools/tools-icons-small.png");
 }
 
+.developer-toolbar-button[open=true],
 .developer-toolbar-button:active:hover,
 .developer-toolbar-button[checked=true] {
   border-color: hsla(210,8%,5%,.6);
   background: rgba(0,0,0,.6);
   box-shadow: 0 1px 2px rgba(0,0,0,.5) inset, 0 1px 0 hsla(210,16%,76%,.15);
 }
 
 .developer-toolbar-button[checked=true] {
@@ -2575,16 +2576,24 @@ stack[anonid=browserStack][responsivemod
 #developer-toolbar-styleeditor {
   -moz-image-region: rect(32px, 16px, 48px, 0);
 }
 
 #developer-toolbar-debugger {
   -moz-image-region: rect(48px, 16px, 64px, 0);
 }
 
+#developer-toolbar-other-tools {
+  -moz-image-region: rect(64px, 16px, 80px, 0);
+}
+
+#developer-toolbar-other-tools > .toolbarbutton-menu-dropmarker {
+  display: none;
+}
+
 /* Error counter */
 
 #developer-toolbar-webconsole[error-count]:before {
   color: #FDF3DE;
   min-width: 16px;
   text-shadow: none;
   background-image: -moz-linear-gradient(top, #B4211B, #8A1915);
   border-radius: 1px;
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -3300,16 +3300,17 @@ stack[anonid=browserStack][responsivemod
   border-radius: @toolbarbuttonCornerRadius@;
   color: inherit;
   border: 1px solid transparent;
   margin: 0 5px;
   padding: 0 10px;
   list-style-image: url("chrome://browser/skin/devtools/tools-icons-small.png");
 }
 
+.developer-toolbar-button[open=true],
 .developer-toolbar-button:active:hover,
 .developer-toolbar-button[checked=true] {
   border-color: hsla(210,8%,5%,.6);
   background: rgba(0,0,0,.6);
   box-shadow: 0 1px 2px rgba(0,0,0,.5) inset, 0 1px 0 hsla(210,16%,76%,.15);
 }
 
 .developer-toolbar-button[checked=true] {
@@ -3329,16 +3330,24 @@ stack[anonid=browserStack][responsivemod
 #developer-toolbar-styleeditor {
   -moz-image-region: rect(32px, 16px, 48px, 0);
 }
 
 #developer-toolbar-debugger {
   -moz-image-region: rect(48px, 16px, 64px, 0);
 }
 
+#developer-toolbar-other-tools {
+  -moz-image-region: rect(64px, 16px, 80px, 0);
+}
+
+#developer-toolbar-other-tools > .toolbarbutton-menu-dropmarker {
+  display: none;
+}
+
 /* Error counter */
 
 #developer-toolbar-webconsole[error-count]:before {
   color: #FDF3DE;
   min-width: 16px;
   text-shadow: none;
   background-image: -moz-linear-gradient(top, #B4211B, #8A1915);
   border-radius: 1px;
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -3227,16 +3227,17 @@ stack[anonid=browserStack][responsivemod
   border-radius: 3px;
   color: inherit;
   border: 1px solid transparent;
   margin: 0 5px;
   padding: 0 10px;
   list-style-image: url("chrome://browser/skin/devtools/tools-icons-small.png");
 }
 
+.developer-toolbar-button[open=true],
 .developer-toolbar-button:active:hover,
 .developer-toolbar-button[checked=true] {
   border-color: hsla(210,8%,5%,.6);
   background: rgba(0,0,0,.6);
   box-shadow: 0 1px 2px rgba(0,0,0,.5) inset, 0 1px 0 hsla(210,16%,76%,.1);
 }
 
 .developer-toolbar-button[checked=true] {
@@ -3256,16 +3257,24 @@ stack[anonid=browserStack][responsivemod
 #developer-toolbar-styleeditor {
   -moz-image-region: rect(32px, 16px, 48px, 0);
 }
 
 #developer-toolbar-debugger {
   -moz-image-region: rect(48px, 16px, 64px, 0);
 }
 
+#developer-toolbar-other-tools {
+  -moz-image-region: rect(64px, 16px, 80px, 0);
+}
+
+#developer-toolbar-other-tools > .toolbarbutton-menu-dropmarker {
+  display: none;
+}
+
 /* Error counter */
 
 #developer-toolbar-webconsole[error-count]:before {
   color: #FDF3DE;
   min-width: 16px;
   text-shadow: none;
   background-image: -moz-linear-gradient(top, #B4211B, #8A1915);
   border-radius: 1px;