Bug 1451665 - update tool list every time tool is registered/unregistered. r=jryans

MozReview-Commit-ID: 8PagqPOPdCJ

devtools/client/framework/test/browser.ini

@@ -82,6 +82,7 @@ skip-if = os == 'win' || debug # Bug 1282269, 1448084
 [browser_toolbox_keyboard_navigation.js]
 skip-if = os == "mac" # Full keyboard navigation on OSX only works if Full Keyboard Access setting is set to All Control in System Keyboard Preferences
 [browser_toolbox_options.js]
+[browser_toolbox_options_multiple_tabs.js]
 [browser_toolbox_options_disable_buttons.js]
 [browser_toolbox_options_disable_cache-01.js]
 [browser_toolbox_options_disable_cache-02.js]

devtools/client/framework/test/browser_toolbox_options_multiple_tabs.js

@@ -0,0 +1,112 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const URL = "data:text/html;charset=utf8,test for dynamically registering " +
+            "and unregistering tools across multiple tabs";
+
+let tab1, tab2, modifiedPref;
+
+add_task(async function() {
+  tab1 = await openToolboxOptionsInNewTab();
+  tab2 = await openToolboxOptionsInNewTab();
+
+  await testToggleTools();
+  await cleanup();
+});
+
+async function openToolboxOptionsInNewTab() {
+  const tab = await addTab(URL);
+  const target = TargetFactory.forTab(tab);
+  const toolbox = await gDevTools.showToolbox(target);
+  const doc = toolbox.doc;
+  const panel = await toolbox.selectTool("options");
+  const { id } = panel.panelDoc.querySelector(
+    "#default-tools-box input[type=checkbox]:not([data-unsupported]):not([checked])");
+
+  return {
+    tab,
+    toolbox,
+    doc,
+    panelWin: panel.panelWin,
+    // This is a getter becuse toolbox tools list gets re-setup every time there
+    // is a tool-registered or tool-undregistered event.
+    get checkbox() {
+      return panel.panelDoc.getElementById(id);
+    }
+  };
+}
+
+async function testToggleTools() {
+  is(tab1.checkbox.id, tab2.checkbox.id, "Default tool box should be in sync.");
+
+  const toolId = tab1.checkbox.id;
+  const testTool = gDevTools.getDefaultTools().find(tool => tool.id === toolId);
+  // Store modified pref names so that they can be cleared on error.
+  modifiedPref = testTool.visibilityswitch;
+
+  info(`Registering tool ${toolId} in the first tab.`);
+  await toggleTool(tab1, toolId);
+
+  info(`Unregistering tool ${toolId} in the first tab.`);
+  await toggleTool(tab1, toolId);
+
+  info(`Registering tool ${toolId} in the second tab.`);
+  await toggleTool(tab2, toolId);
+
+  info(`Unregistering tool ${toolId} in the second tab.`);
+  await toggleTool(tab2, toolId);
+
+  info(`Registering tool ${toolId} in the first tab.`);
+  await toggleTool(tab1, toolId);
+
+  info(`Unregistering tool ${toolId} in the second tab.`);
+  await toggleTool(tab2, toolId);
+}
+
+async function toggleTool({ doc, panelWin, checkbox, tab }, toolId) {
+  const prevChecked = checkbox.checked;
+
+  (prevChecked ? checkRegistered : checkUnregistered)(toolId);
+
+  const onToggleTool = gDevTools.once(
+    `tool-${prevChecked ? "unregistered" : "registered"}`);
+  EventUtils.sendMouseEvent({ type: "click" }, checkbox, panelWin);
+  const id = await onToggleTool;
+
+  is(id, toolId, `Correct event for ${toolId} was fired`);
+  // await new Promise(resolve => setTimeout(resolve, 60000));
+  (prevChecked ? checkUnregistered : checkRegistered)(toolId);
+}
+
+async function checkUnregistered(toolId) {
+  ok(!tab1.doc.getElementById("toolbox-tab-" + toolId),
+    `Tab for unregistered tool ${toolId} is not present in first toolbox`);
+  ok(!tab1.checkbox.checked,
+    `Checkbox for unregistered tool ${toolId} is not checked in first toolbox`);
+  ok(!tab2.doc.getElementById("toolbox-tab-" + toolId),
+    `Tab for unregistered tool ${toolId} is not present in second toolbox`);
+  ok(!tab2.checkbox.checked,
+    `Checkbox for unregistered tool ${toolId} is not checked in second toolbox`);
+}
+
+function checkRegistered(toolId) {
+  ok(tab1.doc.getElementById("toolbox-tab-" + toolId),
+    `Tab for registered tool ${toolId} is present in first toolbox`);
+  ok(tab1.checkbox.checked,
+    `Checkbox for registered tool ${toolId} is checked in first toolbox`);
+  ok(tab2.doc.getElementById("toolbox-tab-" + toolId),
+    `Tab for registered tool ${toolId} is present in second toolbox`);
+  ok(tab2.checkbox.checked,
+    `Checkbox for registered tool ${toolId} is checked in second toolbox`);
+}
+
+async function cleanup() {
+  await tab1.toolbox.destroy();
+  await tab2.toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  gBrowser.removeCurrentTab();
+  Services.prefs.clearUserPref(modifiedPref);
+  tab1 = tab2 = modifiedPref = null;
+}

devtools/client/framework/toolbox-options.js

@@ -61,11 +61,10 @@ function OptionsPanel(iframeWindow, toolbox) {
   this.toolbox = toolbox;
   this.isReady = false;
 
+  this.setupToolsList = this.setupToolsList.bind(this);
   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");
@@ -106,8 +105,14 @@ OptionsPanel.prototype = {
     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);
+    // Refresh the tools list when a new tool or webextension has been
+    // registered to the toolbox.
+    this.toolbox.on("tool-registered", this.setupToolsList);
+    this.toolbox.on("webextension-registered", this.setupToolsList);
+    // Refresh the tools list when a new tool or webextension has been
+    // unregistered from the toolbox.
+    this.toolbox.on("tool-unregistered", this.setupToolsList);
+    this.toolbox.on("webextension-unregistered", this.setupToolsList);
   },
 
   _removeListeners: function() {
@@ -116,8 +121,10 @@ OptionsPanel.prototype = {
     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);
+    this.toolbox.off("tool-registered", this.setupToolsList);
+    this.toolbox.off("tool-unregistered", this.setupToolsList);
+    this.toolbox.off("webextension-registered", this.setupToolsList);
+    this.toolbox.off("webextension-unregistered", this.setupToolsList);
 
     gDevTools.off("theme-registered", this._themeRegistered);
     gDevTools.off("theme-unregistered", this._themeUnregistered);
@@ -148,18 +155,6 @@ 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;