From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 21:33:14 +0200 Subject: Adding upstream version 115.7.0esr. Signed-off-by: Daniel Baumann --- .../components/SimulationMenuButton.js | 167 +++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 devtools/client/accessibility/components/SimulationMenuButton.js (limited to 'devtools/client/accessibility/components/SimulationMenuButton.js') diff --git a/devtools/client/accessibility/components/SimulationMenuButton.js b/devtools/client/accessibility/components/SimulationMenuButton.js new file mode 100644 index 0000000000..6fd21f4cc8 --- /dev/null +++ b/devtools/client/accessibility/components/SimulationMenuButton.js @@ -0,0 +1,167 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +/* global gTelemetry */ + +// React +const { + createFactory, + Component, +} = require("resource://devtools/client/shared/vendor/react.js"); +const { + hr, + span, + div, +} = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + L10N, +} = require("resource://devtools/client/accessibility/utils/l10n.js"); +const { + connect, +} = require("resource://devtools/client/shared/vendor/react-redux.js"); +const MenuButton = createFactory( + require("resource://devtools/client/shared/components/menu/MenuButton.js") +); +const { openDocLink } = require("resource://devtools/client/shared/link.js"); +const { + A11Y_SIMULATION_DOCUMENTATION_LINK, +} = require("resource://devtools/client/accessibility/constants.js"); +const { + accessibility: { SIMULATION_TYPE }, +} = require("resource://devtools/shared/constants.js"); +const actions = require("resource://devtools/client/accessibility/actions/simulation.js"); + +loader.lazyGetter(this, "MenuItem", function () { + return createFactory( + require("resource://devtools/client/shared/components/menu/MenuItem.js") + ); +}); +loader.lazyGetter(this, "MenuList", function () { + return createFactory( + require("resource://devtools/client/shared/components/menu/MenuList.js") + ); +}); + +const TELEMETRY_SIMULATION_ACTIVATED = + "devtools.accessibility.simulation_activated"; +const SIMULATION_MENU_LABELS = { + NONE: "accessibility.filter.none", + [SIMULATION_TYPE.ACHROMATOPSIA]: "accessibility.simulation.achromatopsia", + [SIMULATION_TYPE.PROTANOPIA]: "accessibility.simulation.protanopia", + [SIMULATION_TYPE.DEUTERANOPIA]: "accessibility.simulation.deuteranopia", + [SIMULATION_TYPE.TRITANOPIA]: "accessibility.simulation.tritanopia", + [SIMULATION_TYPE.CONTRAST_LOSS]: "accessibility.simulation.contrastLoss", + DOCUMENTATION: "accessibility.documentation.label", +}; + +class SimulationMenuButton extends Component { + static get propTypes() { + return { + simulate: PropTypes.func, + simulation: PropTypes.object.isRequired, + dispatch: PropTypes.func.isRequired, + toolboxDoc: PropTypes.object.isRequired, + }; + } + + constructor(props) { + super(props); + + this.disableSimulation = this.disableSimulation.bind(this); + } + + disableSimulation() { + const { dispatch, simulate: simulateFunc } = this.props; + + dispatch(actions.simulate(simulateFunc)); + } + + toggleSimulation(simKey) { + const { dispatch, simulation, simulate: simulateFunc } = this.props; + + if (!simulation[simKey]) { + if (gTelemetry) { + gTelemetry.keyedScalarAdd(TELEMETRY_SIMULATION_ACTIVATED, simKey, 1); + } + + dispatch(actions.simulate(simulateFunc, [simKey])); + return; + } + + this.disableSimulation(); + } + + render() { + const { simulation, toolboxDoc } = this.props; + const simulationMenuButtonId = "simulation-menu-button"; + const toolbarLabelID = "accessibility-simulation-label"; + const currSimulation = Object.entries(simulation).find( + simEntry => simEntry[1] + ); + + const items = [ + // No simulation option + MenuItem({ + key: "simulation-none", + label: L10N.getStr(SIMULATION_MENU_LABELS.NONE), + checked: !currSimulation, + onClick: this.disableSimulation, + }), + hr({ key: "hr-1" }), + // Simulation options + ...Object.keys(SIMULATION_TYPE).map(simType => + MenuItem({ + key: `simulation-${simType}`, + label: L10N.getStr(SIMULATION_MENU_LABELS[simType]), + checked: simulation[simType], + onClick: this.toggleSimulation.bind(this, simType), + }) + ), + hr({ key: "hr-2" }), + // Documentation link + MenuItem({ + className: "link", + key: "simulation-documentation", + label: L10N.getStr(SIMULATION_MENU_LABELS.DOCUMENTATION), + role: "link", + onClick: () => openDocLink(A11Y_SIMULATION_DOCUMENTATION_LINK), + }), + ]; + + return div( + { + role: "group", + className: "accessibility-simulation", + "aria-labelledby": toolbarLabelID, + }, + span( + { id: toolbarLabelID, role: "presentation" }, + L10N.getStr("accessibility.simulation") + ), + MenuButton( + { + id: simulationMenuButtonId, + menuId: simulationMenuButtonId + "-menu", + className: `devtools-button toolbar-menu-button simulation${ + currSimulation ? " active" : "" + }`, + toolboxDoc, + label: L10N.getStr( + SIMULATION_MENU_LABELS[currSimulation ? currSimulation[0] : "NONE"] + ), + }, + MenuList({}, items) + ) + ); + } +} + +const mapStateToProps = ({ simulation }) => { + return { simulation }; +}; + +// Exports from this module +module.exports = connect(mapStateToProps)(SimulationMenuButton); -- cgit v1.2.3