Bug 1394750 - Keep track of the active and enabled devtools webextensions. r=jdescottes

MozReview-Commit-ID: 4KUQCls8CPe

--HG--
extra : rebase_source : 643303ee53078bb4f5ae43b045a85d09ec65aa58

Author: rpl

devtools/client/framework/devtools.js

@@ -696,6 +696,16 @@ DevTools.prototype = {
     // Is taken care of by the gDevToolsBrowser.forgetBrowserWindow
   },
 
+  /**
+   * Returns the array of the existing toolboxes.
+   *
+   * @return {Array<Toolbox>}
+   *   An array of toolboxes.
+   */
+  getToolboxes() {
+    return Array.from(this._toolboxes.values());
+  },
+
   /**
    * Iterator that yields each of the toolboxes.
    */

devtools/client/framework/test/browser_toolbox_options.js

@@ -26,6 +26,13 @@ add_task(async function() {
   await testOptionsShortcut();
   await testOptions();
   await testToggleTools();
+
+  // Test that registered WebExtensions becomes entries in the
+  // options panel and toggling their checkbox toggle the related
+  // preference.
+  await registerNewWebExtensions();
+  await testToggleWebExtensions();
+
   await cleanup();
 });
 
@@ -47,6 +54,22 @@ function registerNewTool() {
     "The tool is registered");
 }
 
+// Register a fake WebExtension to check that it is
+// listed in the toolbox options.
+function registerNewWebExtensions() {
+  // Register some fake extensions and init the related preferences
+  // (similarly to ext-devtools.js).
+  for (let i = 0; i < 2; i++) {
+    const extPref = `devtools.webextensions.fakeExtId${i}.enabled`;
+    Services.prefs.setBoolPref(extPref, true);
+
+    toolbox.registerWebExtension(`fakeUUID${i}`, {
+      name: `Fake WebExtension ${i}`,
+      pref: extPref,
+    });
+  }
+}
+
 function registerNewPerToolboxTool() {
   let toolDefinition = {
     id: "test-pertoolbox-tool",
@@ -104,8 +127,7 @@ async function testOptionsShortcut() {
 async function testOptions() {
   let tool = toolbox.getPanel("options");
   panelWin = tool.panelWin;
-  let prefNodes = tool.panelDoc.querySelectorAll(
-    "input[type=checkbox][data-pref]");
+  let prefNodes = tool.panelDoc.querySelectorAll("input[type=checkbox][data-pref]");
 
   // Store modified pref names so that they can be cleared on error.
   for (let node of tool.panelDoc.querySelectorAll("[data-pref]")) {
@@ -191,6 +213,132 @@ async function testMouseClick(node, prefValue) {
   observer.destroy();
 }
 
+async function testToggleWebExtensions() {
+  const disabledExtensions = new Set();
+  let toggleableWebExtensions = toolbox.listWebExtensions();
+
+  function toggleWebExtension(node) {
+    node.scrollIntoView();
+    EventUtils.synthesizeMouseAtCenter(node, {}, panelWin);
+  }
+
+  function assertExpectedDisabledExtensions() {
+    for (let ext of toggleableWebExtensions) {
+      if (disabledExtensions.has(ext)) {
+        ok(!toolbox.isWebExtensionEnabled(ext.uuid),
+           `The WebExtension "${ext.name}" should be disabled`);
+      } else {
+        ok(toolbox.isWebExtensionEnabled(ext.uuid),
+           `The WebExtension "${ext.name}" should  be enabled`);
+      }
+    }
+  }
+
+  function assertAllExtensionsDisabled() {
+    const enabledUUIDs = toggleableWebExtensions
+            .filter(ext => toolbox.isWebExtensionEnabled(ext.uuid))
+            .map(ext => ext.uuid);
+
+    Assert.deepEqual(enabledUUIDs, [],
+                     "All the registered WebExtensions should be disabled");
+  }
+
+  function assertAllExtensionsEnabled() {
+    const disabledUUIDs = toolbox.listWebExtensions()
+            .filter(ext => !toolbox.isWebExtensionEnabled(ext.uuid))
+            .map(ext => ext.uuid);
+
+    Assert.deepEqual(disabledUUIDs, [],
+                     "All the registered WebExtensions should be enabled");
+  }
+
+  function getWebExtensionNodes() {
+    let toolNodes = panelWin.document.querySelectorAll(
+      "#default-tools-box input[type=checkbox]:not([data-unsupported])," +
+        "#additional-tools-box input[type=checkbox]:not([data-unsupported])");
+
+    return [...toolNodes].filter(node => {
+      return toggleableWebExtensions.some(
+        ({uuid}) => node.getAttribute("id") === `webext-${uuid}`
+      );
+    });
+  }
+
+  let webExtensionNodes = getWebExtensionNodes();
+
+  is(webExtensionNodes.length, toggleableWebExtensions.length,
+     "There should be a toggle checkbox for every WebExtension registered");
+
+  for (let ext of toggleableWebExtensions) {
+    ok(toolbox.isWebExtensionEnabled(ext.uuid),
+       `The WebExtension "${ext.name}" is initially enabled`);
+  }
+
+  // Store modified pref names so that they can be cleared on error.
+  for (let ext of toggleableWebExtensions) {
+    modifiedPrefs.push(ext.pref);
+  }
+
+  // Turn each registered WebExtension to disabled.
+  for (let node of webExtensionNodes) {
+    toggleWebExtension(node);
+
+    const toggledExt = toggleableWebExtensions.find(ext => {
+      return node.id == `webext-${ext.uuid}`;
+    });
+    ok(toggledExt, "Found a WebExtension for the checkbox element");
+    disabledExtensions.add(toggledExt);
+
+    assertExpectedDisabledExtensions();
+  }
+
+  assertAllExtensionsDisabled();
+
+  // Turn each registered WebExtension to enabled.
+  for (let node of webExtensionNodes) {
+    toggleWebExtension(node);
+
+    const toggledExt = toggleableWebExtensions.find(ext => {
+      return node.id == `webext-${ext.uuid}`;
+    });
+    ok(toggledExt, "Found a WebExtension for the checkbox element");
+    disabledExtensions.delete(toggledExt);
+
+    assertExpectedDisabledExtensions();
+  }
+
+  assertAllExtensionsEnabled();
+
+  // Unregister the WebExtensions one by one, and check that only the expected
+  // ones have been unregistered, and the remaining onea are still listed.
+  for (let ext of toggleableWebExtensions) {
+    ok(toolbox.listWebExtensions().length > 0,
+       "There should still be extensions registered");
+    toolbox.unregisterWebExtension(ext.uuid);
+
+    const registeredUUIDs = toolbox.listWebExtensions().map(item => item.uuid);
+    ok(!registeredUUIDs.includes(ext.uuid),
+       `the WebExtension "${ext.name}" should have been unregistered`);
+
+    webExtensionNodes = getWebExtensionNodes();
+
+    const checkboxEl = webExtensionNodes.find(el => el.id === `webext-${ext.uuid}`);
+    is(checkboxEl, undefined,
+       "The unregistered WebExtension checkbox should have been removed");
+
+    is(registeredUUIDs.length, webExtensionNodes.length,
+       "There should be the expected number of WebExtensions checkboxes");
+  }
+
+  is(toolbox.listWebExtensions().length, 0,
+     "All WebExtensions have been unregistered");
+
+  webExtensionNodes = getWebExtensionNodes();
+
+  is(webExtensionNodes.length, 0,
+     "There should not be any checkbox for the unregistered WebExtensions");
+}
+
 async function testToggleTools() {
   let toolNodes = panelWin.document.querySelectorAll(
     "#default-tools-box input[type=checkbox]:not([data-unsupported])," +
@@ -207,7 +355,7 @@ async function testToggleTools() {
   for (let node of toolNodes) {
     let id = node.getAttribute("id");
     ok(toggleableTools.some(tool => tool.id === id),
-      "There should be a toggle checkbox for: " + id);
+       "There should be a toggle checkbox for: " + id);
   }
 
   // Store modified pref names so that they can be cleared on error.
@@ -220,6 +368,7 @@ async function testToggleTools() {
   for (let node of toolNodes) {
     await toggleTool(node);
   }
+
   // Toggle again to reset tool enablement state
   for (let node of toolNodes) {
     await toggleTool(node);

devtools/client/framework/toolbox-options.js

@@ -64,6 +64,8 @@ function OptionsPanel(iframeWindow, toolbox) {
   this._prefChanged = this._prefChanged.bind(this);
   this._themeRegistered = this._themeRegistered.bind(this);
   this._themeUnregistered = this._themeUnregistered.bind(this);
+  this._webExtensionRegistered = this._webExtensionRegistered.bind(this);
+  this._webExtensionUnregistered = this._webExtensionUnregistered.bind(this);
   this._disableJSClicked = this._disableJSClicked.bind(this);
 
   this.disableJSNode = this.panelDoc.getElementById("devtools-disable-javascript");
@@ -103,13 +105,20 @@ OptionsPanel.prototype = {
                                this._prefChanged);
     gDevTools.on("theme-registered", this._themeRegistered);
     gDevTools.on("theme-unregistered", this._themeUnregistered);
+
+    this.toolbox.on("webextension-registered", this._webExtensionRegistered);
+    this.toolbox.on("webextension-unregistered", this._webExtensionUnregistered);
   },
 
   _removeListeners: function() {
     Services.prefs.removeObserver("devtools.cache.disabled", this._prefChanged);
     Services.prefs.removeObserver("devtools.theme", this._prefChanged);
     Services.prefs.removeObserver("devtools.source-map.client-service.enabled",
                                   this._prefChanged);
+
+    this.toolbox.off("webextension-registered", this._webExtensionRegistered);
+    this.toolbox.off("webextension-unregistered", this._webExtensionUnregistered);
+
     gDevTools.off("theme-registered", this._themeRegistered);
     gDevTools.off("theme-unregistered", this._themeUnregistered);
   },
@@ -139,6 +148,18 @@ OptionsPanel.prototype = {
     }
   },
 
+  _webExtensionRegistered: function(extensionUUID) {
+    // Refresh the tools list when a new webextension has been registered
+    // to the toolbox.
+    this.setupToolsList();
+  },
+
+  _webExtensionUnregistered: function(extensionUUID) {
+    // Refresh the tools list when a new webextension has been unregistered
+    // from the toolbox.
+    this.setupToolsList();
+  },
+
   async setupToolbarButtonsList() {
     // Ensure the toolbox is open, and the buttons are all set up.
     await this.toolbox.isOpen;
@@ -200,14 +221,17 @@ OptionsPanel.prototype = {
 
     // Signal tool registering/unregistering globally (for the tools registered
     // globally) and per toolbox (for the tools registered to a single toolbox).
-    let onCheckboxClick = function(id) {
-      let toolDefinition = gDevTools._tools.get(id) || toolbox.getToolDefinition(id);
+    // This event handler expect this to be binded to the related checkbox element.
+    let onCheckboxClick = function(tool) {
       // Set the kill switch pref boolean to true
-      Services.prefs.setBoolPref(toolDefinition.visibilityswitch, this.checked);
-      gDevTools.emit(this.checked ? "tool-registered" : "tool-unregistered", id);
+      Services.prefs.setBoolPref(tool.visibilityswitch, this.checked);
+
+      if (!tool.isWebExtension) {
+        gDevTools.emit(this.checked ? "tool-registered" : "tool-unregistered", tool.id);
+      }
     };
 
-    let createToolCheckbox = tool => {
+    let createToolCheckbox = (tool) => {
       let checkboxLabel = this.panelDoc.createElement("label");
       let checkboxInput = this.panelDoc.createElement("input");
       checkboxInput.setAttribute("type", "checkbox");
@@ -229,14 +253,18 @@ OptionsPanel.prototype = {
         checkboxInput.setAttribute("checked", "true");
       }
 
-      checkboxInput.addEventListener("change",
-        onCheckboxClick.bind(checkboxInput, tool.id));
+      checkboxInput.addEventListener("change", onCheckboxClick.bind(checkboxInput, tool));
 
       checkboxLabel.appendChild(checkboxInput);
       checkboxLabel.appendChild(checkboxSpanLabel);
       return checkboxLabel;
     };
 
+    // Clean up any existent default tools content.
+    for (let label of defaultToolsBox.querySelectorAll("label")) {
+      label.remove();
+    }
+
     // Populating the default tools lists
     let toggleableTools = gDevTools.getDefaultTools().filter(tool => {
       return tool.visibilityswitch && !tool.hiddenInOptions;
@@ -246,26 +274,52 @@ OptionsPanel.prototype = {
       defaultToolsBox.appendChild(createToolCheckbox(tool));
     }
 
-    // Populating the additional tools list that came from add-ons.
+    // Clean up any existent additional tools content.
+    for (let label of additionalToolsBox.querySelectorAll("label")) {
+      label.remove();
+    }
+
+    // Populating the additional tools list.
     let atleastOneAddon = false;
     for (let tool of gDevTools.getAdditionalTools()) {
       atleastOneAddon = true;
       additionalToolsBox.appendChild(createToolCheckbox(tool));
     }
 
-    // Populating the additional toolbox-specific tools list that came
-    // from WebExtension add-ons.
-    for (let tool of this.toolbox.getAdditionalTools()) {
+    // Populating the additional tools that came from the installed WebExtension add-ons.
+    for (let {uuid, name, pref} of toolbox.listWebExtensions()) {
       atleastOneAddon = true;
-      additionalToolsBox.appendChild(createToolCheckbox(tool));
+
+      additionalToolsBox.appendChild(createToolCheckbox({
+        isWebExtension: true,
+
+        // Use the preference as the unified webextensions tool id.
+        id: `webext-${uuid}`,
+        tooltip: name,
+        label: name,
+        // Disable the devtools extension using the given pref name:
+        // the toolbox options for the WebExtensions are not related to a single
+        // tool (e.g. a devtools panel created from the extension devtools_page)
+        // but to the entire devtools part of a webextension which is enabled
+        // by the Addon Manager (but it may be disabled by its related
+        // devtools about:config preference), and so the following
+        visibilityswitch: pref,
+
+        // Only local tabs are currently supported as targets.
+        isTargetSupported: target => target.isLocalTab,
+      }));
     }
 
     if (!atleastOneAddon) {
       additionalToolsBox.style.display = "none";
+    } else {
+      additionalToolsBox.style.display = "";
     }
 
     if (!atleastOneToolNotSupported) {
       toolsNotSupportedLabel.style.display = "none";
+    } else {
+      toolsNotSupportedLabel.style.display = "";
     }
 
     this.panelWin.focus();