Bug 950936 - Add disable autohide button in browser toolbox to help debug panel/popups. r=bgrins

devtools/client/framework/test/browser_toolbox_options_disable_buttons.js

@@ -60,6 +60,9 @@ function testPreferenceAndUIStateIsConsistent() {
   toolboxButtonNodes.push(doc.getElementById("command-button-frames"));
   let toggleableTools = toolbox.toolboxButtons;
 
+  // The noautohide button is only displayed in the browser toolbox
+  toggleableTools = toggleableTools.filter(tool => tool.id != "command-button-noautohide");
+
   for (let tool of toggleableTools) {
     let isVisible = getBoolPref(tool.visibilityswitch);
 
@@ -82,6 +85,10 @@ function testToggleToolboxButtons() {
     toolboxButtonNodes = [...doc.querySelectorAll(".command-button:not(#command-button-tilt)")];
   }
 
+  // The noautohide button is only displayed in the browser toolbox
+  toggleableTools = toggleableTools.filter(tool => tool.id != "command-button-noautohide");
+  toolboxButtonNodes = toolboxButtonNodes.filter(btn => btn.id != "command-button-noautohide");
+
   is (checkNodes.length, toggleableTools.length, "All of the buttons are toggleable." );
   is (checkNodes.length, toolboxButtonNodes.length, "All of the DOM buttons are toggleable." );
 
@@ -89,9 +96,9 @@ function testToggleToolboxButtons() {
     let id = tool.id;
     let matchedCheckboxes = checkNodes.filter(node=>node.id === id);
     let matchedButtons = toolboxButtonNodes.filter(button=>button.id === id);
-    ok (matchedCheckboxes.length === 1,
+    is (matchedCheckboxes.length, 1,
       "There should be a single toggle checkbox for: " + id);
-    ok (matchedButtons.length === 1,
+    is (matchedButtons.length, 1,
       "There should be a DOM button for: " + id);
     is (matchedButtons[0], tool.button,
       "DOM buttons should match for: " + id);

devtools/client/framework/toolbox-options.js

@@ -184,6 +184,9 @@ OptionsPanel.prototype = {
       if (this.toolbox.target.isMultiProcess && tool.id === "command-button-tilt") {
         continue;
       }
+      if (!tool.isTargetSupported(this.toolbox.target)) {
+        continue;
+      }
 
       enabledToolbarButtonsBox.appendChild(createCommandCheckbox(tool));
     }

devtools/client/framework/toolbox-process-window.js

@@ -55,6 +55,7 @@ function setPrefDefaults() {
   Services.prefs.setBoolPref("devtools.performance.ui.show-platform-data", true);
   Services.prefs.setBoolPref("devtools.inspector.showAllAnonymousContent", true);
   Services.prefs.setBoolPref("browser.dom.window.dump.enabled", true);
+  Services.prefs.setBoolPref("devtools.command-button-noautohide.enabled", true);
 }
 
 window.addEventListener("load", function() {

devtools/client/framework/toolbox.js

@@ -61,6 +61,8 @@ loader.lazyRequireGetter(this, "createPerformanceFront",
   "devtools/server/actors/performance", true);
 loader.lazyRequireGetter(this, "system",
   "devtools/shared/system");
+loader.lazyRequireGetter(this, "getPreferenceFront",
+  "devtools/server/actors/preference", true);
 loader.lazyGetter(this, "osString", () => {
   return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
 });
@@ -91,7 +93,9 @@ const ToolboxButtons = exports.ToolboxButtons = [
   { id: "command-button-eyedropper" },
   { id: "command-button-screenshot" },
   { id: "command-button-rulers" },
-  { id: "command-button-measure" }
+  { id: "command-button-measure" },
+  { id: "command-button-noautohide",
+    isTargetSupported: target => target.chrome },
 ];
 
 /**
@@ -119,6 +123,7 @@ function Toolbox(target, selectedTool, hostType, hostOptions) {
   this._toolRegistered = this._toolRegistered.bind(this);
   this._toolUnregistered = this._toolUnregistered.bind(this);
   this._refreshHostTitle = this._refreshHostTitle.bind(this);
+  this._toggleAutohide = this._toggleAutohide.bind(this);
   this.selectFrame = this.selectFrame.bind(this);
   this._updateFrames = this._updateFrames.bind(this);
   this._splitConsoleOnKeypress = this._splitConsoleOnKeypress.bind(this);
@@ -378,6 +383,9 @@ Toolbox.prototype = {
       let framesMenu = this.doc.getElementById("command-button-frames");
       framesMenu.addEventListener("command", this.selectFrame, true);
 
+      let noautohideMenu = this.doc.getElementById("command-button-noautohide");
+      noautohideMenu.addEventListener("command", this._toggleAutohide, true);
+
       this.textboxContextMenuPopup =
         this.doc.getElementById("toolbox-textbox-context-popup");
       this.textboxContextMenuPopup.addEventListener("popupshowing",
@@ -1012,7 +1020,7 @@ Toolbox.prototype = {
         visibilityswitch: "devtools." + options.id + ".enabled",
         isTargetSupported: options.isTargetSupported
                            ? options.isTargetSupported
-                           : target => target.isLocalTab
+                           : target => target.isLocalTab,
       };
     }).filter(button=>button);
   },
@@ -1040,6 +1048,8 @@ Toolbox.prototype = {
       }
     });
 
+    this._updateNoautohideButton();
+
     // Tilt is handled separately because it is disabled in E10S mode. Because
     // we have removed tilt from toolboxButtons we have to deal with it here.
     let tiltEnabled = !this.target.isMultiProcess &&
@@ -1541,6 +1551,40 @@ Toolbox.prototype = {
     this._host.setTitle(title);
   },
 
+  // Returns an instance of the preference actor
+  get _preferenceFront() {
+    return this.target.root.then(rootForm => {
+      return new getPreferenceFront(this.target.client, rootForm);
+    });
+  },
+
+  _toggleAutohide: Task.async(function*() {
+    let prefName = "ui.popup.disable_autohide";
+    let front = yield this._preferenceFront;
+    let current = yield front.getBoolPref(prefName);
+    yield front.setBoolPref(prefName, !current);
+
+    this._updateNoautohideButton();
+  }),
+
+  _updateNoautohideButton: Task.async(function*() {
+    if (!this.target.root) {
+      return;
+    }
+    let menu = this.doc.getElementById("command-button-noautohide");
+    if (menu.getAttribute("hidden") === "true") {
+      return;
+    }
+    let prefName = "ui.popup.disable_autohide";
+    let front = yield this._preferenceFront;
+    let current = yield front.getBoolPref(prefName);
+    if (current) {
+      menu.setAttribute("checked", "true");
+    } else {
+      menu.removeAttribute("checked");
+    }
+  }),
+
   _listFrames: function(event) {
     if (!this._target.activeTab || !this._target.activeTab.traits.frames) {
       // We are not targetting a regular TabActor

devtools/client/framework/toolbox.xul

@@ -126,6 +126,10 @@
                        hidden="true">
           <menupopup position="bottomright topright"></menupopup>
         </toolbarbutton>
+        <toolbarbutton id="command-button-noautohide"
+                       class="command-button command-button-invertable"
+                       tooltiptext="&toolboxNoAutoHideTooltip;"
+                       hidden="true" />
       </hbox>
       <vbox id="toolbox-controls-separator" class="devtools-separator"/>
       <hbox id="toolbox-option-container"/>

devtools/client/jar.mn

@@ -191,6 +191,7 @@ devtools.jar:
     skin/images/command-console@2x.png (themes/images/command-console@2x.png)
     skin/images/command-eyedropper.png (themes/images/command-eyedropper.png)
     skin/images/command-eyedropper@2x.png (themes/images/command-eyedropper@2x.png)
+    skin/images/command-noautohide.svg (themes/images/command-noautohide.svg)
     skin/images/command-rulers.png (themes/images/command-rulers.png)
     skin/images/command-rulers@2x.png (themes/images/command-rulers@2x.png)
     skin/images/command-measure.png (themes/images/command-measure.png)

devtools/client/locales/en-US/toolbox.dtd

@@ -41,6 +41,12 @@ values from browser.dtd.  -->
   -  It allows you to switch the context of the whole toolbox. -->
 <!ENTITY toolboxFramesTooltip          "Select an iframe as the currently targeted document">
 
+<!-- LOCALIZATION NOTE (toolboxNoAutoHideButton): This is the label for
+  -  the button to force the popups/panels to stay visible on blur.
+  -  This is only visible in the browser toolbox as it is meant for
+  -  addon developers and Firefox contributors. -->
+<!ENTITY toolboxNoAutoHideTooltip      "Disable popup auto hide">
+
 <!-- LOCALIZATION NOTE (browserToolboxErrorMessage): This is the label
   -  shown next to error details when the Browser Toolbox is unable to open. -->
 <!ENTITY browserToolboxErrorMessage          "Error opening Browser Toolbox:">

devtools/client/preferences/devtools.js

@@ -48,6 +48,7 @@ pref("devtools.command-button-eyedropper.enabled", false);
 pref("devtools.command-button-screenshot.enabled", false);
 pref("devtools.command-button-rulers.enabled", false);
 pref("devtools.command-button-measure.enabled", false);
+pref("devtools.command-button-noautohide.enabled", false);
 
 // Inspector preferences
 // Enable the Inspector

devtools/client/themes/images/command-noautohide.svg

@@ -0,0 +1,8 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" height="16" viewBox="0 0 30 29" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <g fill-rule="evenodd">
+    <path d="M3 1v11c0-1.104-.896-2-2-2h11c-1.104 0-2 .896-2 2V1c0 1.104.896 2 2 2H1c1.104 0 2-.896 2-2zM0 1c0-.553.447-1 1-1h11c.553 0 1 .447 1 1v11c0 .553-.447 1-1 1H1c-.553 0-1-.447-1-1V1zM20 1v11c0-1.104-.896-2-2-2h11c-1.104 0-2 .896-2 2V1c0 1.104.896 2 2 2H18c1.104 0 2-.896 2-2zm-3 0c0-.553.447-1 1-1h11c.553 0 1 .447 1 1v11c0 .553-.447 1-1 1H18c-.553 0-1-.447-1-1V1zM20 17v11c0-1.104-.896-2-2-2h11c-1.104 0-2 .896-2 2V17c0 1.104.896 2 2 2H18c1.104 0 2-.896 2-2zm-3 0c0-.553.447-1 1-1h11c.553 0 1 .447 1 1v11c0 .553-.447 1-1 1H18c-.553 0-1-.447-1-1V17zM3 17v11c0-1.104-.896-2-2-2h11c-1.104 0-2 .896-2 2V17c0 1.104.896 2 2 2H1c1.104 0 2-.896 2-2zm-3 0c0-.553.447-1 1-1h11c.553 0 1 .447 1 1v11c0 .553-.447 1-1 1H1c-.553 0-1-.447-1-1V17z"/>
+  </g>
+</svg>

devtools/client/themes/toolbars.css

@@ -744,6 +744,10 @@
   background-image: url("chrome://devtools/skin/images/command-console.png");
 }
 
+#command-button-noautohide > image {
+  background-image: url("chrome://devtools/skin/images/command-noautohide.svg");
+}
+
 #command-button-eyedropper > image {
   background-image: url("chrome://devtools/skin/images/command-eyedropper.png");
 }