path: root/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js

/* 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;
  }
}