diff --git a/devtools/client/accessibility/accessibility-startup.js b/devtools/client/accessibility/accessibility-startup.js index 9ef6fb33f85d..35a742d3f1b8 100644 --- a/devtools/client/accessibility/accessibility-startup.js +++ b/devtools/client/accessibility/accessibility-startup.js @@ -33,6 +33,10 @@ class AccessibilityStartup { return this._accessibility.accessibleWalkerFront; } + get simulator() { + return this._accessibility.simulatorFront; + } + /** * Determine which features are supported based on the version of the server. * @return {Promise} diff --git a/devtools/client/accessibility/accessibility-view.js b/devtools/client/accessibility/accessibility-view.js index c368f7cbbc90..fdeedb204cc4 100644 --- a/devtools/client/accessibility/accessibility-view.js +++ b/devtools/client/accessibility/accessibility-view.js @@ -64,10 +64,6 @@ AccessibilityView.prototype = { * - fluentBundles {Array} * array of FluentBundles elements for * localization - * - simulator {Object} - * front for simulator actor - * responsible for setting color - * matrices in docShell * - toolbox {Object} * devtools toolbox. * - getAccessibilityTreeRoot {Function} @@ -84,17 +80,21 @@ AccessibilityView.prototype = { * Audit function that will start * accessibility audit for given types * of accessibility issues. + * - simulate {null|Function} + * Apply simulation of a given type + * (by setting color matrices in + * docShell). */ async initialize({ front, supports, fluentBundles, - simulator, toolbox, getAccessibilityTreeRoot, startListeningForAccessibilityEvents, stopListeningForAccessibilityEvents, audit, + simulate, }) { // Make sure state is reset every time accessibility panel is initialized. await this.store.dispatch(reset(front, supports)); @@ -102,12 +102,12 @@ AccessibilityView.prototype = { const mainFrame = MainFrame({ accessibility: front, fluentBundles, - simulator, toolbox, getAccessibilityTreeRoot, startListeningForAccessibilityEvents, stopListeningForAccessibilityEvents, audit, + simulate, }); // Render top level component const provider = createElement(Provider, { store: this.store }, mainFrame); diff --git a/devtools/client/accessibility/actions/simulation.js b/devtools/client/accessibility/actions/simulation.js index 0ebea083b376..991764f894c4 100644 --- a/devtools/client/accessibility/actions/simulation.js +++ b/devtools/client/accessibility/actions/simulation.js @@ -6,8 +6,7 @@ const { SIMULATE } = require("devtools/client/accessibility/constants"); -exports.simulate = (simulator, simTypes = []) => dispatch => - simulator - .simulate({ types: simTypes }) +exports.simulate = (simulateFunc, simTypes = []) => dispatch => + simulateFunc(simTypes) .then(success => dispatch({ error: !success, simTypes, type: SIMULATE })) .catch(error => dispatch({ error, type: SIMULATE })); diff --git a/devtools/client/accessibility/components/MainFrame.js b/devtools/client/accessibility/components/MainFrame.js index 747bed952dd9..71cddfc7a6b3 100644 --- a/devtools/client/accessibility/components/MainFrame.js +++ b/devtools/client/accessibility/components/MainFrame.js @@ -59,12 +59,12 @@ class MainFrame extends Component { dispatch: PropTypes.func.isRequired, auditing: PropTypes.array.isRequired, supports: PropTypes.object, - simulator: PropTypes.object, toolbox: PropTypes.object.isRequired, getAccessibilityTreeRoot: PropTypes.func.isRequired, startListeningForAccessibilityEvents: PropTypes.func.isRequired, stopListeningForAccessibilityEvents: PropTypes.func.isRequired, audit: PropTypes.func.isRequired, + simulate: PropTypes.func, }; } @@ -128,7 +128,7 @@ class MainFrame extends Component { fluentBundles, enabled, auditing, - simulator, + simulate, toolbox, getAccessibilityTreeRoot, startListeningForAccessibilityEvents, @@ -150,7 +150,7 @@ class MainFrame extends Component { Toolbar({ accessibility, audit, - simulator, + simulate, toolboxDoc: toolbox.doc, }), isAuditing && AuditProgressOverlay(), diff --git a/devtools/client/accessibility/components/SimulationMenuButton.js b/devtools/client/accessibility/components/SimulationMenuButton.js index ab82cc178f24..6ed452571ccb 100644 --- a/devtools/client/accessibility/components/SimulationMenuButton.js +++ b/devtools/client/accessibility/components/SimulationMenuButton.js @@ -58,7 +58,7 @@ const SIMULATION_MENU_LABELS = { class SimulationMenuButton extends Component { static get propTypes() { return { - simulator: PropTypes.object.isRequired, + simulate: PropTypes.func, simulation: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, toolboxDoc: PropTypes.object.isRequired, @@ -72,20 +72,20 @@ class SimulationMenuButton extends Component { } disableSimulation() { - const { dispatch, simulator } = this.props; + const { dispatch, simulate: simulateFunc } = this.props; - dispatch(actions.simulate(simulator)); + dispatch(actions.simulate(simulateFunc)); } toggleSimulation(simKey) { - const { dispatch, simulation, simulator } = this.props; + const { dispatch, simulation, simulate: simulateFunc } = this.props; if (!simulation[simKey]) { if (gTelemetry) { gTelemetry.keyedScalarAdd(TELEMETRY_SIMULATION_ACTIVATED, simKey, 1); } - dispatch(actions.simulate(simulator, [simKey])); + dispatch(actions.simulate(simulateFunc, [simKey])); return; } diff --git a/devtools/client/accessibility/components/Toolbar.js b/devtools/client/accessibility/components/Toolbar.js index d2719842abf6..8cc0f302d8fe 100644 --- a/devtools/client/accessibility/components/Toolbar.js +++ b/devtools/client/accessibility/components/Toolbar.js @@ -41,9 +41,9 @@ class Toolbar extends Component { dispatch: PropTypes.func.isRequired, accessibility: PropTypes.object.isRequired, canBeDisabled: PropTypes.bool.isRequired, - simulator: PropTypes.object, toolboxDoc: PropTypes.object.isRequired, audit: PropTypes.func.isRequired, + simulate: PropTypes.func, }; } @@ -86,7 +86,7 @@ class Toolbar extends Component { } render() { - const { canBeDisabled, simulator, toolboxDoc, audit } = this.props; + const { canBeDisabled, simulate, toolboxDoc, audit } = this.props; const { disabling } = this.state; const disableButtonStr = disabling ? "accessibility.disabling" @@ -102,13 +102,13 @@ class Toolbar extends Component { title = L10N.getStr("accessibility.disable.disabledTitle"); } - const optionalSimulationSection = simulator + const optionalSimulationSection = simulate ? [ div({ role: "separator", className: "devtools-separator", }), - SimulationMenuButton({ simulator, toolboxDoc }), + SimulationMenuButton({ simulate, toolboxDoc }), ] : []; diff --git a/devtools/client/accessibility/panel.js b/devtools/client/accessibility/panel.js index b5230e311da7..56c544b9e5a8 100644 --- a/devtools/client/accessibility/panel.js +++ b/devtools/client/accessibility/panel.js @@ -64,6 +64,7 @@ function AccessibilityPanel(iframeWindow, toolbox, startup) { this ); this.audit = this.audit.bind(this); + this.simulate = this.simulate.bind(this); EventEmitter.decorate(this); } @@ -104,7 +105,6 @@ AccessibilityPanel.prototype = { await this.startup.initAccessibility(); this.picker = new Picker(this); - this.simulator = await this.front.getSimulator(); this.fluentBundles = await this.createFluentBundles(); this.updateA11YServiceDurationTimer(); @@ -183,7 +183,6 @@ AccessibilityPanel.prototype = { front: this.front, supports: this.supports, fluentBundles: this.fluentBundles, - simulator: this.simulator, toolbox: this._toolbox, getAccessibilityTreeRoot: this.getAccessibilityTreeRoot, startListeningForAccessibilityEvents: this @@ -191,6 +190,7 @@ AccessibilityPanel.prototype = { stopListeningForAccessibilityEvents: this .stopListeningForAccessibilityEvents, audit: this.audit, + simulate: this.startup.simulator && this.simulate, }); }, @@ -353,6 +353,10 @@ AccessibilityPanel.prototype = { }); }, + simulate(types) { + return this.startup.simulator.simulate({ types }); + }, + get front() { return this.startup.accessibility; }, diff --git a/devtools/server/tests/browser/browser_accessibility_simple.js b/devtools/server/tests/browser/browser_accessibility_simple.js index 309060895bd8..1952f4bd42cc 100644 --- a/devtools/server/tests/browser/browser_accessibility_simple.js +++ b/devtools/server/tests/browser/browser_accessibility_simple.js @@ -44,13 +44,21 @@ add_task(async function() { "The AccessibleWalkerFront was returned" ); - const a11ySimulator = await accessibility.getSimulator(); + const a11ySimulator = accessibility.simulatorFront; const webRenderEnabled = isWebRenderEnabled(window); is( !!a11ySimulator, webRenderEnabled, `The SimulatorFront was${webRenderEnabled ? "" : " not"} returned.` ); + if (webRenderEnabled) { + ok(accessibility.simulatorFront, "Accessible simulator was initialized"); + is( + a11ySimulator, + accessibility.simulatorFront, + "The SimulatorFront was returned" + ); + } checkAccessibilityState(accessibility, { enabled: false, diff --git a/devtools/server/tests/browser/browser_accessibility_simulator.js b/devtools/server/tests/browser/browser_accessibility_simulator.js index 10562455fd33..e8d7775b47bc 100644 --- a/devtools/server/tests/browser/browser_accessibility_simulator.js +++ b/devtools/server/tests/browser/browser_accessibility_simulator.js @@ -72,7 +72,7 @@ add_task(async function() { MAIN_DOMAIN + "doc_accessibility.html" ); - const simulator = await accessibility.getSimulator(); + const simulator = accessibility.simulatorFront; if (!simulator) { ok(!isWebRenderEnabled(window), "Web render is disabled."); diff --git a/devtools/shared/fronts/accessibility.js b/devtools/shared/fronts/accessibility.js index 37411508aa70..976e52e0515e 100644 --- a/devtools/shared/fronts/accessibility.js +++ b/devtools/shared/fronts/accessibility.js @@ -199,6 +199,7 @@ class AccessibilityFront extends FrontClassWithSpec(accessibilitySpec) { // correctly. async bootstrap() { this.accessibleWalkerFront = await super.getWalker(); + this.simulatorFront = await super.getSimulator(); ({ enabled: this.enabled, canBeEnabled: this.canBeEnabled,