Bug 1227137 - aboutdebugging: addons debugging enabled only if remote dbg is true;r=ochameau

MozReview-Commit-ID: 8NmLIM87bcb

--HG--
extra : rebase_source : 0d50bda89b7d90acbc9b4bc612b08ff479280bfb
extra : amend_source : 929374611cd3f6457f0db33fd1c50dc79f1d2385

devtools/client/aboutdebugging/aboutdebugging.css

@@ -43,13 +43,6 @@ button {
   max-width: 800px;
 }
 
-/* Prefs */
-
-label {
-  display: block;
-  margin-bottom: 5px;
-}
-
 /* Targets */
 
 .targets {
@@ -88,3 +81,8 @@ label {
 .addons-options {
   flex: 1;
 }
+
+.addons-debugging-label {
+  display: inline-block;
+  margin: 0 5px 5px 0;
+}

devtools/client/aboutdebugging/components/addons-controls.js

@@ -17,6 +17,9 @@ loader.lazyImporter(this, "AddonManager",
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
+const MORE_INFO_URL = "https://developer.mozilla.org/docs/Tools" +
+                      "/about:debugging#Enabling_add-on_debugging";
+
 exports.AddonsControls = React.createClass({
   displayName: "AddonsControls",
 
@@ -33,9 +36,14 @@ exports.AddonsControls = React.createClass({
             onChange: this.onEnableAddonDebuggingChange,
           }),
           React.createElement("label", {
+            className: "addons-debugging-label",
             htmlFor: "enable-addon-debugging",
             title: Strings.GetStringFromName("addonDebugging.tooltip")
-          }, Strings.GetStringFromName("addonDebugging.label"))
+          }, Strings.GetStringFromName("addonDebugging.label")),
+          "(",
+          React.createElement("a", { href: MORE_INFO_URL, target: "_blank" },
+            Strings.GetStringFromName("addonDebugging.moreInfo")),
+          ")"
         ),
         React.createElement("button", {
           id: "load-addon-from-file",
@@ -47,6 +55,7 @@ exports.AddonsControls = React.createClass({
   onEnableAddonDebuggingChange(event) {
     let enabled = event.target.checked;
     Services.prefs.setBoolPref("devtools.chrome.enabled", enabled);
+    Services.prefs.setBoolPref("devtools.debugger.remote-enabled", enabled);
   },
 
   loadAddonFromFile(event) {

devtools/client/aboutdebugging/components/addons-tab.js

@@ -23,6 +23,9 @@ const ExtensionIcon = "chrome://mozapps/skin/extensions/extensionGeneric.svg";
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
+const CHROME_ENABLED_PREF = "devtools.chrome.enabled";
+const REMOTE_ENABLED_PREF = "devtools.debugger.remote-enabled";
+
 exports.AddonsTab = React.createClass({
   displayName: "AddonsTab",
 
@@ -35,15 +38,21 @@ exports.AddonsTab = React.createClass({
 
   componentDidMount() {
     AddonManager.addAddonListener(this);
-    Services.prefs.addObserver("devtools.chrome.enabled",
+
+    Services.prefs.addObserver(CHROME_ENABLED_PREF,
       this.updateDebugStatus, false);
+    Services.prefs.addObserver(REMOTE_ENABLED_PREF,
+      this.updateDebugStatus, false);
+
     this.updateDebugStatus();
     this.updateAddonsList();
   },
 
   componentWillUnmount() {
     AddonManager.removeAddonListener(this);
-    Services.prefs.removeObserver("devtools.chrome.enabled",
+    Services.prefs.removeObserver(CHROME_ENABLED_PREF,
+      this.updateDebugStatus);
+    Services.prefs.removeObserver(REMOTE_ENABLED_PREF,
       this.updateDebugStatus);
   },
 
@@ -68,9 +77,11 @@ exports.AddonsTab = React.createClass({
   },
 
   updateDebugStatus() {
-    this.setState({
-      debugDisabled: !Services.prefs.getBoolPref("devtools.chrome.enabled")
-    });
+    let debugDisabled =
+      !Services.prefs.getBoolPref(CHROME_ENABLED_PREF) ||
+      !Services.prefs.getBoolPref(REMOTE_ENABLED_PREF);
+
+    this.setState({ debugDisabled });
   },
 
   updateAddonsList() {

devtools/client/aboutdebugging/test/browser.ini

@@ -8,6 +8,7 @@ support-files =
   service-workers/empty-sw.html
   service-workers/empty-sw.js
 
+[browser_addons_debugging_initial_state.js]
 [browser_addons_install.js]
 [browser_addons_toggle_debug.js]
 [browser_service_workers.js]

devtools/client/aboutdebugging/test/browser_addons_debugging_initial_state.js

@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that addons debugging controls are properly enabled/disabled depending
+// on the values of the relevant preferences:
+// - devtools.chrome.enabled
+// - devtools.debugger.remote-enabled
+
+const ADDON_ID = "test-devtools@mozilla.org";
+
+const TEST_DATA = [
+  {
+    chromeEnabled: false,
+    debuggerRemoteEnable: false,
+    expected: false,
+  }, {
+    chromeEnabled: false,
+    debuggerRemoteEnable: true,
+    expected: false,
+  }, {
+    chromeEnabled: true,
+    debuggerRemoteEnable: false,
+    expected: false,
+  }, {
+    chromeEnabled: true,
+    debuggerRemoteEnable: true,
+    expected: true,
+  }
+];
+
+add_task(function* () {
+  for (let testData of TEST_DATA) {
+    yield testCheckboxState(testData);
+  }
+});
+
+function* testCheckboxState(testData) {
+  info("Set preferences as defined by the current test data.");
+  yield new Promise(resolve => {
+    let options = {"set": [
+      ["devtools.chrome.enabled", testData.chromeEnabled],
+      ["devtools.debugger.remote-enabled", testData.debuggerRemoteEnable],
+    ]};
+    SpecialPowers.pushPrefEnv(options, resolve);
+  });
+
+  let { tab, document } = yield openAboutDebugging("addons");
+
+  info("Install a test addon.");
+  yield installAddon(document, "addons/unpacked/install.rdf", "test-devtools");
+
+  info("Test checkbox checked state.");
+  let addonDebugCheckbox = document.querySelector("#enable-addon-debugging");
+  is(addonDebugCheckbox.checked, testData.expected,
+    "Addons debugging checkbox should be in expected state.");
+
+  info("Test debug buttons disabled state.");
+  let debugButtons = [...document.querySelectorAll("#addons .debug-button")];
+  ok(debugButtons.every(b => b.disabled != testData.expected),
+    "Debug buttons should be in the expected state");
+
+  info("Uninstall test addon installed earlier.");
+  yield uninstallAddon(ADDON_ID);
+
+  yield closeAboutDebugging(tab);
+}

devtools/client/aboutdebugging/test/browser_addons_toggle_debug.js

@@ -13,6 +13,7 @@ add_task(function* () {
   yield new Promise(resolve => {
     let options = {"set": [
       ["devtools.chrome.enabled", false],
+      ["devtools.debugger.remote-enabled", false],
     ]};
     SpecialPowers.pushPrefEnv(options, resolve);
   });

devtools/client/locales/en-US/aboutdebugging.properties

@@ -7,6 +7,7 @@ debug = Debug
 addons = Add-ons
 addonDebugging.label = Enable add-on debugging
 addonDebugging.tooltip = Turning this on will allow you to debug add-ons and various other parts of the browser chrome
+addonDebugging.moreInfo = more info
 loadTemporaryAddon = Load Temporary Add-on
 extensions = Extensions
 selectAddonFromFile = Select Add-on Directory or XPI File