+
+`;
+
+if (!isWebRenderEnabled(window)) {
+ addA11YPanelTask(
+ "Test that simulation menu button does not exist without WebRender.",
+ TEST_URI,
+ async function({ doc }) {
+ ok(
+ !doc.querySelector("#simulation-menu-button"),
+ "Simulation menu is not shown without WebRender."
+ );
+ }
+ );
+} else {
+ /**
+ * Test data has the format of:
+ * {
+ * desc {String} description for better logging
+ * setup {Function} An optional setup that needs to be performed before
+ * the state of the simulation components can be checked.
+ * expected {JSON} An expected states for the simulation components.
+ * }
+ */
+ const tests = [
+ {
+ desc:
+ "Check that the menu button is inactivate and the menu is closed initially.",
+ expected: {
+ simulation: {
+ buttonActive: false,
+ },
+ },
+ },
+ {
+ desc:
+ "Clicking the menu button shows the menu with No Simulation selected.",
+ setup: async ({ doc }) => {
+ await openSimulationMenu(doc);
+ },
+ expected: {
+ simulation: {
+ buttonActive: false,
+ checkedOptionIndices: [0],
+ },
+ },
+ },
+ {
+ desc:
+ "Selecting an option renders the menu button active and closes the menu.",
+ setup: async ({ doc }) => {
+ await toggleSimulationOption(doc, 2);
+ },
+ expected: {
+ simulation: {
+ buttonActive: true,
+ checkedOptionIndices: [2],
+ },
+ },
+ },
+ {
+ desc: "Reopening the menu preserves the previously selected option.",
+ setup: async ({ doc }) => {
+ await openSimulationMenu(doc);
+ },
+ expected: {
+ simulation: {
+ buttonActive: true,
+ checkedOptionIndices: [2],
+ },
+ },
+ },
+ {
+ desc:
+ "Unselecting the option renders the button inactive and closes the menu.",
+ setup: async ({ doc }) => {
+ await toggleSimulationOption(doc, 2);
+ },
+ expected: {
+ simulation: {
+ buttonActive: false,
+ checkedOptionIndices: [0],
+ },
+ },
+ },
+ ];
+
+ /**
+ * Test that checks state of simulation button and menu when
+ * options are selected/unselected with web render enabled.
+ */
+ addA11yPanelTestsTask(
+ tests,
+ TEST_URI,
+ "Test selecting and unselecting simulation options updates UI."
+ );
+}
diff --git a/devtools/client/accessibility/test/browser/head.js b/devtools/client/accessibility/test/browser/head.js
index df96d3575340..ad31926d898c 100644
--- a/devtools/client/accessibility/test/browser/head.js
+++ b/devtools/client/accessibility/test/browser/head.js
@@ -6,7 +6,7 @@
/* global waitUntilState, gBrowser */
/* exported addTestTab, checkTreeState, checkSidebarState, checkAuditState, selectRow,
- toggleRow, toggleMenuItem, addA11yPanelTestsTask, reload, navigate */
+ toggleRow, toggleMenuItem, addA11yPanelTestsTask, reload, navigate, openSimulationMenu, toggleSimulationOption */
"use strict";
@@ -36,6 +36,8 @@ const {
// Enable the Accessibility panel
Services.prefs.setBoolPref("devtools.accessibility.enabled", true);
+const SIMULATION_MENU_BUTTON_ID = "#simulation-menu-button";
+
/**
* Enable accessibility service and wait for a11y init event.
* @return {Object} instance of accessibility service.
@@ -470,6 +472,42 @@ async function checkToolbarState(doc, activeToolbarFilters) {
ok(hasExpectedStructure, "Toolbar state is correct.");
}
+/**
+ * Check the state of the simulation button and menu components.
+ * @param {Object} doc Panel document.
+ * @param {Object} expected Expected states of the simulation components:
+ * menuVisible, buttonActive, checkedOptionIndices (Optional)
+ */
+async function checkSimulationState(doc, expected) {
+ const { buttonActive, checkedOptionIndices } = expected;
+ const simulationMenuOptions = doc
+ .querySelector(SIMULATION_MENU_BUTTON_ID + "-menu")
+ .querySelectorAll(".menuitem");
+
+ // Check simulation menu button state
+ is(
+ doc.querySelector(SIMULATION_MENU_BUTTON_ID).className,
+ `devtools-button toolbar-menu-button simulation${
+ buttonActive ? " active" : ""
+ }`,
+ `Simulation menu button contains ${buttonActive ? "active" : "base"} class.`
+ );
+
+ // Check simulation menu options states, if specified
+ if (checkedOptionIndices) {
+ simulationMenuOptions.forEach((menuListItem, index) => {
+ const isChecked = checkedOptionIndices.includes(index);
+ const button = menuListItem.firstChild;
+
+ is(
+ button.getAttribute("aria-checked"),
+ isChecked ? "true" : null,
+ `Simulation option ${index} is ${isChecked ? "" : "not "}selected.`
+ );
+ });
+ }
+}
+
/**
* Focus accessibility properties tree in the a11y inspector sidebar. If focused for the
* first time, the tree will select first rendered node as defult selection for keyboard
@@ -590,6 +628,25 @@ async function toggleMenuItem(doc, menuButtonIndex, menuItemIndex) {
);
}
+async function openSimulationMenu(doc) {
+ doc.querySelector(SIMULATION_MENU_BUTTON_ID).click();
+
+ await BrowserTestUtils.waitForCondition(() =>
+ doc
+ .querySelector(SIMULATION_MENU_BUTTON_ID + "-menu")
+ .classList.contains("tooltip-visible")
+ );
+}
+
+async function toggleSimulationOption(doc, optionIndex) {
+ const simulationMenu = doc.querySelector(SIMULATION_MENU_BUTTON_ID + "-menu");
+ simulationMenu.querySelectorAll(".menuitem")[optionIndex].firstChild.click();
+
+ await BrowserTestUtils.waitForCondition(
+ () => !simulationMenu.classList.contains("tooltip-visible")
+ );
+}
+
async function findAccessibleFor(
{ toolbox: { target }, panel: { walker: accessibilityWalker } },
selector
@@ -648,6 +705,7 @@ async function runA11yPanelTests(tests, env) {
audit,
toolbarPrefValues,
activeToolbarFilters,
+ simulation,
} = expected;
if (tree) {
await checkTreeState(env.doc, tree);
@@ -668,6 +726,10 @@ async function runA11yPanelTests(tests, env) {
if (typeof audit !== "undefined") {
await checkAuditState(env.store, audit);
}
+
+ if (simulation) {
+ await checkSimulationState(env.doc, simulation);
+ }
}
}
diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn
index 2a6092359a76..b063681ba976 100644
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -152,6 +152,7 @@ devtools.jar:
skin/images/item-arrow-ltr.svg (themes/images/item-arrow-ltr.svg)
skin/images/dropmarker.svg (themes/images/dropmarker.svg)
skin/boxmodel.css (themes/boxmodel.css)
+ skin/images/eye.svg (themes/images/eye.svg)
skin/images/geometry-editor.svg (themes/images/geometry-editor.svg)
skin/images/open-inspector.svg (themes/images/open-inspector.svg)
skin/images/more.svg (themes/images/more.svg)
diff --git a/devtools/client/locales/en-US/accessibility.properties b/devtools/client/locales/en-US/accessibility.properties
index 0d5ebe2a7ba4..6963d3e101c5 100644
--- a/devtools/client/locales/en-US/accessibility.properties
+++ b/devtools/client/locales/en-US/accessibility.properties
@@ -163,7 +163,8 @@ accessibility.badges=Accessibility checks
# LOCALIZATION NOTE (accessibility.filter.none): A title text for the filter
# that is rendered within the accessibility panel toolbar for a menu item that
-# resets all filtering in tree.
+# resets all filtering in tree, and for the simulation menu item that resets
+# applied color matrices to the default matrix.
accessibility.filter.none=None
# LOCALIZATION NOTE (accessibility.filter.all2): A title text for the filter
@@ -268,3 +269,38 @@ accessibility.pref.scroll.into.view.label=Scroll into view
# LOCALIZATION NOTE (accessibility.documentation.label): This is the label for
# the Documentation menu item.
accessibility.documentation.label=Documentation…
+
+# LOCALIZATION NOTE (accessibility.simulation): A title text for the toolbar
+# within the main accessibility panel that contains a list of simulations for
+# vision deficiencies.
+accessibility.simulation=Simulate:
+
+# LOCALIZATION NOTE (accessibility.simulation.deuteranomaly): This label is shown
+# in the "Simulate" menu in the accessibility panel and represent the deuteranomaly simulation option.
+accessibility.simulation.deuteranomaly=Deuteranomaly (low green)
+
+# LOCALIZATION NOTE (accessibility.simulation.protanomaly): This label is shown
+# in the "Simulate" menu in the accessibility panel and represent the protanomaly simulation option.
+accessibility.simulation.protanomaly=Protanomaly (low red)
+
+# LOCALIZATION NOTE (accessibility.simulation.protanopia): This label is shown
+# in the "Simulate" menu in the accessibility panel and represent the protanopia simulation option.
+accessibility.simulation.protanopia=Protanopia (no red)
+
+# LOCALIZATION NOTE (accessibility.simulation.deuteranopia): This label is shown
+# in the "Simulate" menu in the accessibility panel and represent the deuteranopia simulation option.
+accessibility.simulation.deuteranopia=Deuteranopia (no green)
+
+# LOCALIZATION NOTE (accessibility.simulation.tritanopia): This label is shown
+# in the "Simulate" menu in the accessibility panel and represent the tritanopia simulation option.
+accessibility.simulation.tritanopia=Tritanopia (no blue)
+
+# LOCALIZATION NOTE (accessibility.simulation.tritanomaly): This label is shown
+# in the "Simulate" menu in the accessibility panel and represent the tritanomaly simulation option.
+accessibility.simulation.tritanomaly=Tritanomaly (low blue)
+
+# LOCALIZATION NOTE (accessibility.simulation.contrastLoss): This label is shown
+# in the "Simulate" menu in the accessibility panel and represent the contrast loss simulation option.
+# It is also shown in the simulation menu button in the accessibility panel and represent the
+# contrast loss simulation option currently selected.
+accessibility.simulation.contrastLoss=Contrast loss
diff --git a/devtools/client/themes/images/eye.svg b/devtools/client/themes/images/eye.svg
new file mode 100644
index 000000000000..d0e964b60649
--- /dev/null
+++ b/devtools/client/themes/images/eye.svg
@@ -0,0 +1,8 @@
+
+