1 files changed, 270 insertions, 0 deletions
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js b/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js
new file mode 100644
index 0000000000..417970bc07
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js
@@ -0,0 +1,270 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+let TEST_URL =
+  "data:text/html;charset=utf8,test for dynamically " +
+  "registering and unregistering tools";
+
+// The frames button is only shown if the page has at least one iframe so we
+// need to add one to the test page.
+TEST_URL += '<iframe src="data:text/plain,iframe"></iframe>';
+// The error count button is only shown if there are errors on the page
+TEST_URL += '<script>console.error("err")</script>';
+
+var modifiedPrefs = [];
+registerCleanupFunction(() => {
+  for (const pref of modifiedPrefs) {
+    Services.prefs.clearUserPref(pref);
+  }
+});
+
+const TOGGLE_BUTTONS = [
+  "command-button-measure",
+  "command-button-rulers",
+  "command-button-responsive",
+  "command-button-pick",
+];
+
+add_task(async function test() {
+  const tab = await addTab(TEST_URL);
+  let toolbox = await gDevTools.showToolboxForTab(tab);
+  const optionsPanelWin = await selectOptionsPanel(toolbox);
+  await testToggleToolboxButtons(toolbox, optionsPanelWin);
+  toolbox = await testPrefsAreRespectedWhenReopeningToolbox();
+  await testButtonStateOnClick(toolbox);
+
+  await toolbox.destroy();
+});
+
+async function selectOptionsPanel(toolbox) {
+  info("Selecting the options panel");
+
+  const onOptionsSelected = toolbox.once("options-selected");
+  toolbox.selectTool("options");
+  const optionsPanel = await onOptionsSelected;
+  ok(true, "Options panel selected via selectTool method");
+  return optionsPanel.panelWin;
+}
+
+async function testToggleToolboxButtons(toolbox, optionsPanelWin) {
+  const checkNodes = [
+    ...optionsPanelWin.document.querySelectorAll(
+      "#enabled-toolbox-buttons-box input[type=checkbox]"
+    ),
+  ];
+
+  // Filter out all the buttons which are not supported on the current target.
+  // (DevTools Experimental Preferences etc...)
+  const toolbarButtons = toolbox.toolbarButtons.filter(tool =>
+    tool.isToolSupported(toolbox)
+  );
+
+  const visibleToolbarButtons = toolbarButtons.filter(tool => tool.isVisible);
+
+  const toolbarButtonNodes = [
+    ...toolbox.doc.querySelectorAll(".command-button"),
+  ];
+
+  is(
+    checkNodes.length,
+    toolbarButtons.length,
+    "All of the buttons are toggleable."
+  );
+  is(
+    visibleToolbarButtons.length,
+    toolbarButtonNodes.length,
+    "All of the DOM buttons are toggleable."
+  );
+
+  for (const tool of toolbarButtons) {
+    const id = tool.id;
+    const matchedCheckboxes = checkNodes.filter(node => node.id === id);
+    const matchedButtons = toolbarButtonNodes.filter(
+      button => button.id === id
+    );
+    if (tool.isVisible) {
+      is(
+        matchedCheckboxes.length,
+        1,
+        "There should be a single toggle checkbox for: " + id
+      );
+      is(
+        matchedCheckboxes[0].nextSibling.textContent,
+        tool.description,
+        "The label for checkbox matches the tool definition."
+      );
+      is(
+        matchedButtons.length,
+        1,
+        "There should be a DOM button for the visible: " + id
+      );
+
+      // The error count button title isn't its description
+      if (id !== "command-button-errorcount") {
+        is(
+          matchedButtons[0].getAttribute("title"),
+          tool.description,
+          "The tooltip for button matches the tool definition."
+        );
+      }
+
+      if (TOGGLE_BUTTONS.includes(id)) {
+        is(
+          matchedButtons[0].getAttribute("aria-pressed"),
+          "false",
+          `The aria-pressed attribute is set to false for ${id} button`
+        );
+      } else {
+        is(
+          matchedButtons[0].getAttribute("aria-pressed"),
+          null,
+          `The ${id} button does not have the aria-pressed attribute`
+        );
+      }
+    } else {
+      is(
+        matchedButtons.length,
+        0,
+        "There should not be a DOM button for the invisible: " + id
+      );
+    }
+  }
+
+  // Store modified pref names so that they can be cleared on error.
+  for (const tool of toolbarButtons) {
+    const pref = tool.visibilityswitch;
+    modifiedPrefs.push(pref);
+  }
+
+  // Try checking each checkbox, making sure that it changes the preference
+  for (const node of checkNodes) {
+    const tool = toolbarButtons.filter(
+      commandButton => commandButton.id === node.id
+    )[0];
+    const isVisible = getBoolPref(tool.visibilityswitch);
+
+    testPreferenceAndUIStateIsConsistent(toolbox, optionsPanelWin);
+    node.click();
+    testPreferenceAndUIStateIsConsistent(toolbox, optionsPanelWin);
+
+    const isVisibleAfterClick = getBoolPref(tool.visibilityswitch);
+
+    is(
+      isVisible,
+      !isVisibleAfterClick,
+      "Clicking on the node should have toggled visibility preference for " +
+        tool.visibilityswitch
+    );
+
+    if (isVisibleAfterClick) {
+      const matchedButton = toolbox.doc.getElementById(tool.id);
+      if (TOGGLE_BUTTONS.includes(tool.id)) {
+        is(
+          matchedButton.getAttribute("aria-pressed"),
+          "false",
+          `The aria-pressed attribute is set to false for ${tool.id} button`
+        );
+      } else {
+        is(
+          matchedButton.getAttribute("aria-pressed"),
+          null,
+          `The ${tool.id} button does not have the aria-pressed attribute`
+        );
+      }
+    }
+  }
+}
+
+async function testPrefsAreRespectedWhenReopeningToolbox() {
+  info("Closing toolbox to test after reopening");
+  await gDevTools.closeToolboxForTab(gBrowser.selectedTab);
+
+  const toolbox = await gDevTools.showToolboxForTab(gBrowser.selectedTab);
+  const optionsPanelWin = await selectOptionsPanel(toolbox);
+
+  info("Toolbox has been reopened.  Checking UI state.");
+  await testPreferenceAndUIStateIsConsistent(toolbox, optionsPanelWin);
+  return toolbox;
+}
+
+function testPreferenceAndUIStateIsConsistent(toolbox, optionsPanelWin) {
+  const checkNodes = [
+    ...optionsPanelWin.document.querySelectorAll(
+      "#enabled-toolbox-buttons-box input[type=checkbox]"
+    ),
+  ];
+  const toolboxButtonNodes = [
+    ...toolbox.doc.querySelectorAll(".command-button"),
+  ];
+
+  for (const tool of toolbox.toolbarButtons) {
+    const isVisible = getBoolPref(tool.visibilityswitch);
+
+    const button = toolboxButtonNodes.find(
+      toolboxButton => toolboxButton.id === tool.id
+    );
+    is(!!button, isVisible, "Button visibility matches pref for " + tool.id);
+
+    const check = checkNodes.filter(node => node.id === tool.id)[0];
+    if (check) {
+      is(
+        check.checked,
+        isVisible,
+        "Checkbox should be selected based on current pref for " + tool.id
+      );
+    }
+  }
+}
+
+async function testButtonStateOnClick(toolbox) {
+  const toolboxButtons = ["#command-button-rulers", "#command-button-measure"];
+  for (const toolboxButton of toolboxButtons) {
+    const button = toolbox.doc.querySelector(toolboxButton);
+    if (!button) {
+      ok(false, `Couldn't find ${toolboxButton}`);
+      continue;
+    }
+
+    const isChecked = waitUntil(() => button.classList.contains("checked"));
+    is(
+      button.getAttribute("aria-pressed"),
+      "false",
+      `${toolboxButton} has aria-pressed set to false when it's off`
+    );
+
+    button.click();
+    await isChecked;
+    ok(
+      button.classList.contains("checked"),
+      `Button for ${toolboxButton} can be toggled on`
+    );
+    is(
+      button.getAttribute("aria-pressed"),
+      "true",
+      `${toolboxButton} has aria-pressed set to true when it's on`
+    );
+
+    const isUnchecked = waitUntil(() => !button.classList.contains("checked"));
+    button.click();
+    await isUnchecked;
+    ok(
+      !button.classList.contains("checked"),
+      `Button for ${toolboxButton} can be toggled off`
+    );
+    is(
+      button.getAttribute("aria-pressed"),
+      "false",
+      `aria-pressed is set back to false on ${toolboxButton} after it has been toggled off`
+    );
+  }
+}
+
+function getBoolPref(key) {
+  try {
+    return Services.prefs.getBoolPref(key);
+  } catch (e) {
+    return false;
+  }
+}