From 0ca3763ed8349ffb9e48933c49fd6b30a983dbc9 Mon Sep 17 00:00:00 2001 From: Yura Zenevich Date: Mon, 10 Feb 2020 18:12:33 +0000 Subject: [PATCH] Bug 1604594 - decouple accessibility walker front from the audit redux action. r=rcaliman Differential Revision: https://phabricator.services.mozilla.com/D58032 --HG-- extra : moz-landing-system : lando --- .../accessibility/accessibility-view.js | 12 ++-- .../client/accessibility/actions/audit.js | 36 +++--------- .../components/AccessibilityTreeFilter.js | 6 +- .../accessibility/components/MainFrame.js | 6 +- .../accessibility/components/Toolbar.js | 11 +--- devtools/client/accessibility/panel.js | 55 ++++++++++++++++++- 6 files changed, 76 insertions(+), 50 deletions(-) diff --git a/devtools/client/accessibility/accessibility-view.js b/devtools/client/accessibility/accessibility-view.js index 62bc2fa073d5..c368f7cbbc90 100644 --- a/devtools/client/accessibility/accessibility-view.js +++ b/devtools/client/accessibility/accessibility-view.js @@ -56,10 +56,6 @@ AccessibilityView.prototype = { * accessibility walker and * enable/disable accessibility * services. - * - walker {Object} - * front for accessibility walker - * actor responsible for managing - * accessible objects actors/fronts. * - supports {JSON} * a collection of flags indicating * which accessibility panel features @@ -84,10 +80,13 @@ AccessibilityView.prototype = { * - stopListeningForAccessibilityEvents {Function} * Remove listeners for specific * accessibility events. + * - audit {Function} + * Audit function that will start + * accessibility audit for given types + * of accessibility issues. */ async initialize({ front, - walker, supports, fluentBundles, simulator, @@ -95,19 +94,20 @@ AccessibilityView.prototype = { getAccessibilityTreeRoot, startListeningForAccessibilityEvents, stopListeningForAccessibilityEvents, + audit, }) { // Make sure state is reset every time accessibility panel is initialized. await this.store.dispatch(reset(front, supports)); const container = document.getElementById("content"); const mainFrame = MainFrame({ accessibility: front, - accessibilityWalker: walker, fluentBundles, simulator, toolbox, getAccessibilityTreeRoot, startListeningForAccessibilityEvents, stopListeningForAccessibilityEvents, + audit, }); // Render top level component const provider = createElement(Provider, { store: this.store }, mainFrame); diff --git a/devtools/client/accessibility/actions/audit.js b/devtools/client/accessibility/actions/audit.js index 387069e75e62..a7c5bed7173d 100644 --- a/devtools/client/accessibility/actions/audit.js +++ b/devtools/client/accessibility/actions/audit.js @@ -4,9 +4,6 @@ "use strict"; -const { - accessibility: { AUDIT_TYPE }, -} = require("devtools/shared/constants"); const { AUDIT, AUDIT_PROGRESS, @@ -23,29 +20,10 @@ exports.auditing = filter => dispatch => { return dispatch({ auditing, type: AUDITING }); }; -exports.audit = (accessibilityWalker, filter) => dispatch => - new Promise(resolve => { - const types = filter === FILTERS.ALL ? Object.values(AUDIT_TYPE) : [filter]; - const auditEventHandler = ({ type, ancestries, progress }) => { - switch (type) { - case "error": - accessibilityWalker.off("audit-event", auditEventHandler); - dispatch({ type: AUDIT, error: true }); - resolve(); - break; - case "completed": - accessibilityWalker.off("audit-event", auditEventHandler); - dispatch({ type: AUDIT, response: ancestries }); - resolve(); - break; - case "progress": - dispatch({ type: AUDIT_PROGRESS, progress }); - break; - default: - break; - } - }; - - accessibilityWalker.on("audit-event", auditEventHandler); - accessibilityWalker.startAudit({ types }); - }); +exports.audit = (auditFunc, filter) => dispatch => + auditFunc( + filter, + () => dispatch({ type: AUDIT, error: true }), + progress => dispatch({ type: AUDIT_PROGRESS, progress }), + ancestries => dispatch({ type: AUDIT, response: ancestries }) + ); diff --git a/devtools/client/accessibility/components/AccessibilityTreeFilter.js b/devtools/client/accessibility/components/AccessibilityTreeFilter.js index de1a7d86a05e..d8801d31e1ea 100644 --- a/devtools/client/accessibility/components/AccessibilityTreeFilter.js +++ b/devtools/client/accessibility/components/AccessibilityTreeFilter.js @@ -54,14 +54,14 @@ class AccessibilityTreeFilter extends Component { auditing: PropTypes.array.isRequired, filters: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, - accessibilityWalker: PropTypes.object.isRequired, describedby: PropTypes.string, toolboxDoc: PropTypes.object.isRequired, + audit: PropTypes.func.isRequired, }; } async toggleFilter(filterKey) { - const { dispatch, filters, accessibilityWalker } = this.props; + const { audit: auditFunc, dispatch, filters } = this.props; if (filterKey !== FILTERS.NONE && !filters[filterKey]) { if (gTelemetry) { @@ -69,7 +69,7 @@ class AccessibilityTreeFilter extends Component { } dispatch(actions.auditing(filterKey)); - await dispatch(actions.audit(accessibilityWalker, filterKey)); + await dispatch(actions.audit(auditFunc, filterKey)); } // We wait to dispatch filter toggle until the tree is ready to be filtered diff --git a/devtools/client/accessibility/components/MainFrame.js b/devtools/client/accessibility/components/MainFrame.js index 9709bad5fe53..747bed952dd9 100644 --- a/devtools/client/accessibility/components/MainFrame.js +++ b/devtools/client/accessibility/components/MainFrame.js @@ -55,7 +55,6 @@ class MainFrame extends Component { return { accessibility: PropTypes.object.isRequired, fluentBundles: PropTypes.array.isRequired, - accessibilityWalker: PropTypes.object.isRequired, enabled: PropTypes.bool.isRequired, dispatch: PropTypes.func.isRequired, auditing: PropTypes.array.isRequired, @@ -65,6 +64,7 @@ class MainFrame extends Component { getAccessibilityTreeRoot: PropTypes.func.isRequired, startListeningForAccessibilityEvents: PropTypes.func.isRequired, stopListeningForAccessibilityEvents: PropTypes.func.isRequired, + audit: PropTypes.func.isRequired, }; } @@ -125,7 +125,6 @@ class MainFrame extends Component { render() { const { accessibility, - accessibilityWalker, fluentBundles, enabled, auditing, @@ -134,6 +133,7 @@ class MainFrame extends Component { getAccessibilityTreeRoot, startListeningForAccessibilityEvents, stopListeningForAccessibilityEvents, + audit, } = this.props; if (!enabled) { @@ -149,7 +149,7 @@ class MainFrame extends Component { { className: "mainFrame", role: "presentation" }, Toolbar({ accessibility, - accessibilityWalker, + audit, simulator, toolboxDoc: toolbox.doc, }), diff --git a/devtools/client/accessibility/components/Toolbar.js b/devtools/client/accessibility/components/Toolbar.js index 45173941f406..d2719842abf6 100644 --- a/devtools/client/accessibility/components/Toolbar.js +++ b/devtools/client/accessibility/components/Toolbar.js @@ -38,12 +38,12 @@ const { class Toolbar extends Component { static get propTypes() { return { - accessibilityWalker: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, accessibility: PropTypes.object.isRequired, canBeDisabled: PropTypes.bool.isRequired, simulator: PropTypes.object, toolboxDoc: PropTypes.object.isRequired, + audit: PropTypes.func.isRequired, }; } @@ -86,12 +86,7 @@ class Toolbar extends Component { } render() { - const { - canBeDisabled, - accessibilityWalker, - simulator, - toolboxDoc, - } = this.props; + const { canBeDisabled, simulator, toolboxDoc, audit } = this.props; const { disabling } = this.state; const disableButtonStr = disabling ? "accessibility.disabling" @@ -147,7 +142,7 @@ class Toolbar extends Component { L10N.getStr("accessibility.beta") ), AccessibilityTreeFilter({ - accessibilityWalker, + audit, describedby: betaID, toolboxDoc, }), diff --git a/devtools/client/accessibility/panel.js b/devtools/client/accessibility/panel.js index dda896016279..1583e6b4d371 100644 --- a/devtools/client/accessibility/panel.js +++ b/devtools/client/accessibility/panel.js @@ -29,6 +29,11 @@ const EVENTS = { "Accessibility:AccessibilityInspectorUpdated", }; +const { + accessibility: { AUDIT_TYPE }, +} = require("devtools/shared/constants"); +const { FILTERS } = require("devtools/client/accessibility/constants"); + /** * This object represents Accessibility panel. It's responsibility is to * render Accessibility Tree of the current debugger target and the sidebar that @@ -58,6 +63,7 @@ function AccessibilityPanel(iframeWindow, toolbox, startup) { this.stopListeningForAccessibilityEvents = this.stopListeningForAccessibilityEvents.bind( this ); + this.audit = this.audit.bind(this); EventEmitter.decorate(this); } @@ -175,7 +181,6 @@ AccessibilityPanel.prototype = { this.shouldRefresh = false; this.postContentMessage("initialize", { front: this.front, - walker: this.walker, supports: this.supports, fluentBundles: this.fluentBundles, simulator: this.simulator, @@ -185,6 +190,7 @@ AccessibilityPanel.prototype = { .startListeningForAccessibilityEvents, stopListeningForAccessibilityEvents: this .stopListeningForAccessibilityEvents, + audit: this.audit, }); }, @@ -300,6 +306,53 @@ AccessibilityPanel.prototype = { } }, + /** + * Perform an audit for a given filter. + * + * @param {Object} this.walker + * Accessibility walker to be used for accessibility audit. + * @param {String} filter + * Type of an audit to perform. + * @param {Function} onError + * Audit error callback. + * @param {Function} onProgress + * Audit progress callback. + * @param {Function} onCompleted + * Audit completion callback. + * + * @return {Promise} + * Resolves when the audit for a top document, that the walker + * traverses, completes. + */ + audit(filter, onError, onProgress, onCompleted) { + return new Promise(resolve => { + const types = + filter === FILTERS.ALL ? Object.values(AUDIT_TYPE) : [filter]; + const auditEventHandler = ({ type, ancestries, progress }) => { + switch (type) { + case "error": + this.walker.off("audit-event", auditEventHandler); + onError(); + resolve(); + break; + case "completed": + this.walker.off("audit-event", auditEventHandler); + onCompleted(ancestries); + resolve(); + break; + case "progress": + onProgress(progress); + break; + default: + break; + } + }; + + this.walker.on("audit-event", auditEventHandler); + this.walker.startAudit({ types }); + }); + }, + get front() { return this.startup.accessibility; },