Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 16:25:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out 8 changesets (bug 1599806, bug 1604594, bug 1605435) for causing devtools failures CLOSED TREE

Browse Source 
Backed out changeset b3b92ce56bbd (bug 1605435)
Backed out changeset 1a125601a5d0 (bug 1604594)
Backed out changeset 9ed06bf20923 (bug 1604594)
Backed out changeset 2125bbef0588 (bug 1604594)
Backed out changeset e9dd08e86da5 (bug 1604594)
Backed out changeset 1ec5fbe50915 (bug 1604594)
Backed out changeset 36b679985b1d (bug 1604594)
Backed out changeset 7563b0c41886 (bug 1599806)
This commit is contained in:
Noemi Erli 2020-02-10 21:18:49 +02:00
parent 2969add02b
commit 6150d5a8b5
18 changed files with 217 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
devtools/client/accessibility/accessibility-startup.js
View File

@ -30,20 +30,22 @@ class AccessibilityStartup {
}
get walker() {
return this._accessibility.accessibleWalkerFront;
}
get simulator() {
return this._accessibility.simulatorFront;
return this._walker;
}
/**
* Determine which features are supported based on the version of the server.
* Determine which features are supported based on the version of the server. Also, sync
* the state of the accessibility front/actor.
* @return {Promise}
* A promise that returns true when accessibility front is ready.
* A promise that returns true when accessibility front is fully in sync with
* the actor.
*/
async prepareAccessibility() {
// We must call a method on an accessibility front here (such as getWalker), in
// oreder to be able to check actor's backward compatibility via actorHasMethod.
// See targe.js@getActorDescription for more information.
try {
this._walker = await this._accessibility.getWalker();
this._supports = {};
// To add a check for backward compatibility add something similar to the
// example below:
@ -52,6 +54,9 @@ class AccessibilityStartup {
// // Please specify the version of Firefox when the feature was added.
// this.target.actorHasMethod("accessibility", "getSimulator"),
// ]);
await this._accessibility.bootstrap();
return true;
} catch (e) {
// toolbox may be destroyed during this step.
@ -119,7 +124,9 @@ class AccessibilityStartup {
this._accessibility.off("init", this._updateToolHighlight);
this._accessibility.off("shutdown", this._updateToolHighlight);
await this._walker.destroy();
this._accessibility = null;
this._walker = null;
}.bind(this)();
return this._destroyingAccessibility;
}

83
devtools/client/accessibility/accessibility-view.js
View File

@ -51,63 +51,42 @@ AccessibilityView.prototype = {
*
* @param {Object}
* Object that contains the following properties:
* - front {Object}
* front that can initialize
* accessibility walker and
* enable/disable accessibility
* services.
* - supports {JSON}
* a collection of flags indicating
* which accessibility panel features
* are supported by the current
* serverside version.
* - fluentBundles {Array}
* array of FluentBundles elements for
* localization
* - toolbox {Object}
* devtools toolbox.
* - getAccessibilityTreeRoot {Function}
* Returns the topmost accessibiliity
* walker that is used as the root of
* the accessibility tree.
* - startListeningForAccessibilityEvents {Function}
* Add listeners for specific
* accessibility events.
* - stopListeningForAccessibilityEvents {Function}
* Remove listeners for specific
* accessibility events.
* - audit {Function}
* 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).
* - front {Object}
* front that can initialize 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 are supported by the current serverside
* version.
* - 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.
*/
async initialize({
front,
walker,
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));
const container = document.getElementById("content");
const mainFrame = MainFrame({
accessibility: front,
accessibilityWalker: walker,
fluentBundles,
simulator,
toolbox,
getAccessibilityTreeRoot,
startListeningForAccessibilityEvents,
stopListeningForAccessibilityEvents,
audit,
simulate,
});
// Render top level component
const provider = createElement(Provider, { store: this.store }, mainFrame);
@ -119,20 +98,18 @@ AccessibilityView.prototype = {
ReactDOM.unmountComponentAtNode(container);
},
async selectAccessible(accessible) {
await this.store.dispatch(select(accessible));
async selectAccessible(walker, accessible) {
await this.store.dispatch(select(walker, accessible));
window.emit(EVENTS.NEW_ACCESSIBLE_FRONT_INSPECTED);
},
async highlightAccessible(accessible) {
await this.store.dispatch(highlight(accessible));
async highlightAccessible(walker, accessible) {
await this.store.dispatch(highlight(walker, accessible));
window.emit(EVENTS.NEW_ACCESSIBLE_FRONT_HIGHLIGHTED);
},
async selectNodeAccessible(node) {
const accessibilityFront = await node.targetFront.getFront("accessibility");
const accessibleWalkerFront = await accessibilityFront.getWalker();
let accessible = await accessibleWalkerFront.getAccessibleFor(node);
async selectNodeAccessible(walker, node) {
let accessible = await walker.getAccessibleFor(node);
if (accessible) {
await accessible.hydrate();
}
@ -145,7 +122,7 @@ AccessibilityView.prototype = {
const { nodes: children } = await node.walkerFront.children(node);
for (const child of children) {
if (child.nodeType === nodeConstants.TEXT_NODE) {
accessible = await accessibleWalkerFront.getAccessibleFor(child);
accessible = await walker.getAccessibleFor(child);
// indexInParent property is only available with additional request
// for data (hydration) about the accessible object.
if (accessible) {
@ -159,7 +136,7 @@ AccessibilityView.prototype = {
}
}
await this.store.dispatch(select(accessible));
await this.store.dispatch(select(walker, accessible));
window.emit(EVENTS.NEW_ACCESSIBLE_FRONT_INSPECTED);
},

32
devtools/client/accessibility/actions/accessibles.js
View File

@ -20,40 +20,16 @@ exports.fetchChildren = accessible => dispatch =>
.then(response => dispatch({ accessible, type: FETCH_CHILDREN, response }))
.catch(error => dispatch({ accessible, type: FETCH_CHILDREN, error }));
exports.select = accessible => dispatch => {
const accessibleWalkerFront = accessible.parent();
if (!accessibleWalkerFront) {
dispatch({
accessible,
type: SELECT,
error: new Error("AccessibleWalker front is not available."),
});
return Promise.reject();
}
return accessibleWalkerFront
exports.select = (accessibilityWalker, accessible) => dispatch =>
accessibilityWalker
.getAncestry(accessible)
.then(response => dispatch({ accessible, type: SELECT, response }))
.catch(error => dispatch({ accessible, type: SELECT, error }));
};
exports.highlight = accessible => dispatch => {
const accessibleWalkerFront = accessible.parent();
if (!accessibleWalkerFront) {
dispatch({
accessible,
type: SELECT,
error: new Error("AccessibleWalker front is not available."),
});
return Promise.reject();
}
return accessibleWalkerFront
exports.highlight = (accessibilityWalker, accessible) => dispatch =>
accessibilityWalker
.getAncestry(accessible)
.then(response => dispatch({ accessible, type: HIGHLIGHT, response }))
.catch(error => dispatch({ accessible, type: HIGHLIGHT, error }));
};
exports.unhighlight = () => dispatch => dispatch({ type: UNHIGHLIGHT });

36
devtools/client/accessibility/actions/audit.js
View File

@ -4,6 +4,9 @@
"use strict";
const {
accessibility: { AUDIT_TYPE },
} = require("devtools/shared/constants");
const {
AUDIT,
AUDIT_PROGRESS,
@ -20,10 +23,29 @@ exports.auditing = filter => dispatch => {
return dispatch({ auditing, type: AUDITING });
};
exports.audit = (auditFunc, filter) => dispatch =>
auditFunc(
filter,
() => dispatch({ type: AUDIT, error: true }),
progress => dispatch({ type: AUDIT_PROGRESS, progress }),
ancestries => dispatch({ type: AUDIT, response: ancestries })
);
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 });
});

5
devtools/client/accessibility/actions/simulation.js
View File

@ -6,7 +6,8 @@
const { SIMULATE } = require("devtools/client/accessibility/constants");
exports.simulate = (simulateFunc, simTypes = []) => dispatch =>
simulateFunc(simTypes)
exports.simulate = (simulator, simTypes = []) => dispatch =>
simulator
.simulate({ types: simTypes })
.then(success => dispatch({ error: !success, simTypes, type: SIMULATE }))
.catch(error => dispatch({ error, type: SIMULATE }));

12
devtools/client/accessibility/components/AccessibilityRow.js
View File

@ -227,8 +227,8 @@ class AccessibilityRow extends Component {
return;
}
const accessibleWalkerFront = accessibleFront.parent();
if (!accessibleWalkerFront) {
const accessibilityWalkerFront = accessibleFront.parent();
if (!accessibilityWalkerFront) {
return;
}
@ -238,7 +238,7 @@ class AccessibilityRow extends Component {
await this.scrollNodeIntoViewIfNeeded(accessibleFront);
}
accessibleWalkerFront
accessibilityWalkerFront
.highlightAccessible(accessibleFront, options)
.catch(error => console.warn(error));
}
@ -249,12 +249,12 @@ class AccessibilityRow extends Component {
return;
}
const accessibleWalkerFront = accessibleFront.parent();
if (!accessibleWalkerFront) {
const accessibilityWalkerFront = accessibleFront.parent();
if (!accessibilityWalkerFront) {
return;
}
accessibleWalkerFront.unhighlight().catch(error => console.warn(error));
accessibilityWalkerFront.unhighlight().catch(error => console.warn(error));
}
async printToJSON() {

36
devtools/client/accessibility/components/AccessibilityTree.js
View File

@ -41,6 +41,7 @@ const { scrollIntoView } = require("devtools/client/shared/scroll");
class AccessibilityTree extends Component {
static get propTypes() {
return {
accessibilityWalker: PropTypes.object,
toolboxDoc: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
accessibles: PropTypes.object,
@ -48,9 +49,6 @@ class AccessibilityTree extends Component {
selected: PropTypes.string,
highlighted: PropTypes.object,
filtered: PropTypes.bool,
getAccessibilityTreeRoot: PropTypes.func.isRequired,
startListeningForAccessibilityEvents: PropTypes.func.isRequired,
stopListeningForAccessibilityEvents: PropTypes.func.isRequired,
};
}
@ -65,14 +63,15 @@ class AccessibilityTree extends Component {
}
/**
* Add accessibility event listeners that affect tree rendering and updates.
* Add accessibility walker front event listeners that affect tree rendering
* and updates.
*/
componentWillMount() {
this.props.startListeningForAccessibilityEvents({
reorder: this.onReorder,
"name-change": this.onNameChange,
"text-change": this.onTextChange,
});
const { accessibilityWalker } = this.props;
accessibilityWalker.on("reorder", this.onReorder);
accessibilityWalker.on("name-change", this.onNameChange);
accessibilityWalker.on("text-change", this.onTextChange);
window.on(
EVENTS.NEW_ACCESSIBLE_FRONT_INSPECTED,
this.scrollSelectedRowIntoView
@ -91,14 +90,13 @@ class AccessibilityTree extends Component {
}
/**
* Remove accessible event listeners.
* Remove accessible walker front event listeners.
*/
componentWillUnmount() {
this.props.stopListeningForAccessibilityEvents({
reorder: this.onReorder,
"name-change": this.onNameChange,
"text-change": this.onTextChange,
});
const { accessibilityWalker } = this.props;
accessibilityWalker.off("reorder", this.onReorder);
accessibilityWalker.off("name-change", this.onNameChange);
accessibilityWalker.off("text-change", this.onTextChange);
window.off(
EVENTS.NEW_ACCESSIBLE_FRONT_INSPECTED,
@ -151,8 +149,8 @@ class AccessibilityTree extends Component {
*/
onNameChange(accessibleFront, parentFront) {
const { accessibles, dispatch } = this.props;
const accessibleWalkerFront = accessibleFront.parent();
parentFront = parentFront || accessibleWalkerFront;
const accessibilityWalkerFront = accessibleFront.parent();
parentFront = parentFront || accessibilityWalkerFront;
if (
accessibles.has(accessibleFront.actorID) ||
@ -202,9 +200,9 @@ class AccessibilityTree extends Component {
expanded,
selected,
highlighted: highlightedItem,
accessibilityWalker,
toolboxDoc,
filtered,
getAccessibilityTreeRoot,
} = this.props;
const renderRow = rowProps => {
@ -226,7 +224,7 @@ class AccessibilityTree extends Component {
return TreeView({
ref: "treeview",
object: getAccessibilityTreeRoot(),
object: accessibilityWalker,
mode: MODE.SHORT,
provider: new Provider(accessibles, filtered, dispatch),
columns: columns,

6
devtools/client/accessibility/components/AccessibilityTreeFilter.js
View File

@ -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 { audit: auditFunc, dispatch, filters } = this.props;
const { dispatch, filters, accessibilityWalker } = 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(auditFunc, filterKey));
await dispatch(actions.audit(accessibilityWalker, filterKey));
}
// We wait to dispatch filter toggle until the tree is ready to be filtered

35
devtools/client/accessibility/components/Accessible.js
View File

@ -230,18 +230,20 @@ class Accessible extends Component {
return;
}
const accessibleWalkerFront = accessibleFront.parent();
if (!accessibleWalkerFront) {
const accessibilityWalkerFront = accessibleFront.parent();
if (!accessibilityWalkerFront) {
return;
}
accessibleWalkerFront.highlightAccessible(accessibleFront).catch(error => {
// Only report an error where there's still a toolbox. Ignore cases
// where toolbox is already destroyed.
if (this.props.toolbox) {
console.error(error);
}
});
accessibilityWalkerFront
.highlightAccessible(accessibleFront)
.catch(error => {
// Only report an error where there's still a toolbox. Ignore cases
// where toolbox is already destroyed.
if (this.props.toolbox) {
console.error(error);
}
});
}
hideAccessibleHighlighter(accessibleFront) {
@ -250,12 +252,12 @@ class Accessible extends Component {
return;
}
const accessibleWalkerFront = accessibleFront.parent();
if (!accessibleWalkerFront) {
const accessibilityWalkerFront = accessibleFront.parent();
if (!accessibilityWalkerFront) {
return;
}
accessibleWalkerFront.unhighlight().catch(error => {
accessibilityWalkerFront.unhighlight().catch(error => {
// Only report an error where there's still a toolbox. Ignore cases where
// toolbox is already destroyed.
if (this.props.toolbox) {
@ -282,7 +284,14 @@ class Accessible extends Component {
return;
}
await this.props.dispatch(select(accessibleFront));
const accessibilityWalkerFront = accessibleFront.parent();
if (!accessibilityWalkerFront) {
return;
}
await this.props.dispatch(
select(accessibilityWalkerFront, accessibleFront)
);
const { props } = this.refs;
if (props) {

38
devtools/client/accessibility/components/MainFrame.js
View File

@ -55,16 +55,13 @@ 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,
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,
};
}
@ -78,9 +75,11 @@ class MainFrame extends Component {
componentWillMount() {
this.props.accessibility.on("init", this.resetAccessibility);
this.props.accessibility.on("shutdown", this.resetAccessibility);
this.props.startListeningForAccessibilityEvents({
"document-ready": this.resetAccessibility,
});
this.props.accessibilityWalker.on(
"document-ready",
this.resetAccessibility
);
window.addEventListener("resize", this.onPanelWindowResize, true);
}
@ -93,9 +92,11 @@ class MainFrame extends Component {
componentWillUnmount() {
this.props.accessibility.off("init", this.resetAccessibility);
this.props.accessibility.off("shutdown", this.resetAccessibility);
this.props.stopListeningForAccessibilityEvents({
"document-ready": this.resetAccessibility,
});
this.props.accessibilityWalker.off(
"document-ready",
this.resetAccessibility
);
window.removeEventListener("resize", this.onPanelWindowResize, true);
}
@ -125,15 +126,12 @@ class MainFrame extends Component {
render() {
const {
accessibility,
accessibilityWalker,
fluentBundles,
enabled,
auditing,
simulate,
simulator,
toolbox,
getAccessibilityTreeRoot,
startListeningForAccessibilityEvents,
stopListeningForAccessibilityEvents,
audit,
} = this.props;
if (!enabled) {
@ -149,8 +147,8 @@ class MainFrame extends Component {
{ className: "mainFrame", role: "presentation" },
Toolbar({
accessibility,
audit,
simulate,
accessibilityWalker,
simulator,
toolboxDoc: toolbox.doc,
}),
isAuditing && AuditProgressOverlay(),
@ -173,10 +171,8 @@ class MainFrame extends Component {
role: "presentation",
},
AccessibilityTree({
accessibilityWalker,
toolboxDoc: toolbox.doc,
getAccessibilityTreeRoot,
startListeningForAccessibilityEvents,
stopListeningForAccessibilityEvents,
})
),
endPanel: RightSidebar({ toolbox }),

10
devtools/client/accessibility/components/SimulationMenuButton.js
View File

@ -58,7 +58,7 @@ const SIMULATION_MENU_LABELS = {
class SimulationMenuButton extends Component {
static get propTypes() {
return {
simulate: PropTypes.func,
simulator: PropTypes.object.isRequired,
simulation: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
toolboxDoc: PropTypes.object.isRequired,
@ -72,20 +72,20 @@ class SimulationMenuButton extends Component {
}
disableSimulation() {
const { dispatch, simulate: simulateFunc } = this.props;
const { dispatch, simulator } = this.props;
dispatch(actions.simulate(simulateFunc));
dispatch(actions.simulate(simulator));
}
toggleSimulation(simKey) {
const { dispatch, simulation, simulate: simulateFunc } = this.props;
const { dispatch, simulation, simulator } = this.props;
if (!simulation[simKey]) {
if (gTelemetry) {
gTelemetry.keyedScalarAdd(TELEMETRY_SIMULATION_ACTIVATED, simKey, 1);
}
dispatch(actions.simulate(simulateFunc, [simKey]));
dispatch(actions.simulate(simulator, [simKey]));
return;
}

17
devtools/client/accessibility/components/Toolbar.js
View File

@ -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,
simulate: PropTypes.func,
};
}
@ -86,7 +86,12 @@ class Toolbar extends Component {
}
render() {
const { canBeDisabled, simulate, toolboxDoc, audit } = this.props;
const {
canBeDisabled,
accessibilityWalker,
simulator,
toolboxDoc,
} = this.props;
const { disabling } = this.state;
const disableButtonStr = disabling
? "accessibility.disabling"
@ -102,13 +107,13 @@ class Toolbar extends Component {
title = L10N.getStr("accessibility.disable.disabledTitle");
}
const optionalSimulationSection = simulate
const optionalSimulationSection = simulator
? [
div({
role: "separator",
className: "devtools-separator",
}),
SimulationMenuButton({ simulate, toolboxDoc }),
SimulationMenuButton({ simulator, toolboxDoc }),
]
: [];
@ -142,7 +147,7 @@ class Toolbar extends Component {
L10N.getStr("accessibility.beta")
),
AccessibilityTreeFilter({
audit,
accessibilityWalker,
describedby: betaID,
toolboxDoc,
}),

132
devtools/client/accessibility/panel.js
View File

@ -29,11 +29,6 @@ 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
@ -56,15 +51,6 @@ function AccessibilityPanel(iframeWindow, toolbox, startup) {
this
);
this.forceUpdatePickerButton = this.forceUpdatePickerButton.bind(this);
this.getAccessibilityTreeRoot = this.getAccessibilityTreeRoot.bind(this);
this.startListeningForAccessibilityEvents = this.startListeningForAccessibilityEvents.bind(
this
);
this.stopListeningForAccessibilityEvents = this.stopListeningForAccessibilityEvents.bind(
this
);
this.audit = this.audit.bind(this);
this.simulate = this.simulate.bind(this);
EventEmitter.decorate(this);
}
@ -105,6 +91,7 @@ AccessibilityPanel.prototype = {
await this.startup.initAccessibility();
this.picker = new Picker(this);
this.simulator = await this.front.getSimulator();
this.fluentBundles = await this.createFluentBundles();
this.updateA11YServiceDurationTimer();
@ -181,16 +168,11 @@ AccessibilityPanel.prototype = {
this.shouldRefresh = false;
this.postContentMessage("initialize", {
front: this.front,
walker: this.walker,
supports: this.supports,
fluentBundles: this.fluentBundles,
simulator: this.simulator,
toolbox: this._toolbox,
getAccessibilityTreeRoot: this.getAccessibilityTreeRoot,
startListeningForAccessibilityEvents: this
.startListeningForAccessibilityEvents,
stopListeningForAccessibilityEvents: this
.stopListeningForAccessibilityEvents,
audit: this.audit,
simulate: this.startup.simulator && this.simulate,
});
},
@ -203,7 +185,7 @@ AccessibilityPanel.prototype = {
},
selectAccessible(accessibleFront) {
this.postContentMessage("selectAccessible", accessibleFront);
this.postContentMessage("selectAccessible", this.walker, accessibleFront);
},
selectAccessibleForNode(nodeFront, reason) {
@ -215,11 +197,15 @@ AccessibilityPanel.prototype = {
);
}
this.postContentMessage("selectNodeAccessible", nodeFront);
this.postContentMessage("selectNodeAccessible", this.walker, nodeFront);
},
highlightAccessible(accessibleFront) {
this.postContentMessage("highlightAccessible", accessibleFront);
this.postContentMessage(
"highlightAccessible",
this.walker,
accessibleFront
);
},
postContentMessage(type, ...args) {
@ -259,104 +245,6 @@ AccessibilityPanel.prototype = {
this.picker && this.picker.stop();
},
/**
* Stop picking and remove all walker listeners.
*/
async cancelPick(onHovered, onPicked, onPreviewed, onCanceled) {
await this.walker.cancelPick();
this.walker.off("picker-accessible-hovered", onHovered);
this.walker.off("picker-accessible-picked", onPicked);
this.walker.off("picker-accessible-previewed", onPreviewed);
this.walker.off("picker-accessible-canceled", onCanceled);
},
/**
* Start picking and add walker listeners.
* @param {Boolean} doFocus
* If true, move keyboard focus into content.
*/
async pick(doFocus, onHovered, onPicked, onPreviewed, onCanceled) {
this.walker.on("picker-accessible-hovered", onHovered);
this.walker.on("picker-accessible-picked", onPicked);
this.walker.on("picker-accessible-previewed", onPreviewed);
this.walker.on("picker-accessible-canceled", onCanceled);
await this.walker.pick(doFocus);
},
/**
* Return the topmost level accessibility walker to be used as the root of
* the accessibility tree view.
*
* @return {Object}
* Topmost accessibility walker.
*/
getAccessibilityTreeRoot() {
return this.walker;
},
startListeningForAccessibilityEvents(eventMap) {
for (const [type, listener] of Object.entries(eventMap)) {
this.walker.on(type, listener);
}
},
stopListeningForAccessibilityEvents(eventMap) {
for (const [type, listener] of Object.entries(eventMap)) {
this.walker.off(type, listener);
}
},
/**
* 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 });
});
},
simulate(types) {
return this.startup.simulator.simulate({ types });
},
get front() {
return this.startup.accessibility;
},

48
devtools/client/accessibility/picker.js
View File

@ -26,6 +26,10 @@ class Picker {
return this._panel._toolbox;
}
get walker() {
return this._panel.walker;
}
get pickerButton() {
return this.toolbox.pickerButton;
}
@ -128,7 +132,7 @@ class Picker {
}
/**
* Stop picking.
* Stop picking and remove all walker listeners.
*/
async stop() {
if (!this.isPicking) {
@ -136,25 +140,36 @@ class Picker {
}
this.isPicking = false;
this.pickerButton.isChecked = false;
await this._panel.cancelPick(
this.onPickerAccessibleHovered,
this.onPickerAccessiblePicked,
this.onPickerAccessiblePreviewed,
this.onPickerAccessibleCanceled
);
await this.walker.cancelPick();
this._telemetry.toolClosed(
"accessibility_picker",
this.toolbox.sessionId,
this
);
this.walker.off(
"picker-accessible-hovered",
this.onPickerAccessibleHovered
);
this.walker.off("picker-accessible-picked", this.onPickerAccessiblePicked);
this.walker.off(
"picker-accessible-previewed",
this.onPickerAccessiblePreviewed
);
this.walker.off(
"picker-accessible-canceled",
this.onPickerAccessibleCanceled
);
this.emit("picker-stopped");
}
/**
* Start picking.
* Start picking and add walker listeners.
* @param {Boolean} doFocus
* If true, move keyboard focus into content.
*/
@ -164,21 +179,28 @@ class Picker {
}
this.isPicking = true;
this.pickerButton.isChecked = true;
await this._panel.pick(
doFocus,
this.onPickerAccessibleHovered,
this.onPickerAccessiblePicked,
this.onPickerAccessiblePreviewed,
this.walker.on("picker-accessible-hovered", this.onPickerAccessibleHovered);
this.walker.on("picker-accessible-picked", this.onPickerAccessiblePicked);
this.walker.on(
"picker-accessible-previewed",
this.onPickerAccessiblePreviewed
);
this.walker.on(
"picker-accessible-canceled",
this.onPickerAccessibleCanceled
);
await this.walker.pick(doFocus);
this._telemetry.toolOpened(
"accessibility_picker",
this.toolbox.sessionId,
this
);
this.emit("picker-started");
}

4
devtools/client/accessibility/test/browser/head.js
View File

@ -664,12 +664,12 @@ async function toggleSimulationOption(doc, optionIndex) {
}
async function findAccessibleFor(
{ toolbox: { target }, panel: { walker: accessibleWalkerFront } },
{ toolbox: { target }, panel: { walker: accessibilityWalker } },
selector
) {
const domWalker = (await target.getFront("inspector")).walker;
const node = await domWalker.querySelector(domWalker.rootNode, selector);
return accessibleWalkerFront.getAccessibleFor(node);
return accessibilityWalker.getAccessibleFor(node);
}
async function selectAccessibleForNode(env, selector) {

16
devtools/server/tests/browser/browser_accessibility_simple.js
View File

@ -35,14 +35,8 @@ add_task(async function() {
ok(accessibility.getWalker, "The getWalker method exists");
ok(accessibility.getSimulator, "The getSimulator method exists");
ok(accessibility.accessibleWalkerFront, "Accessible walker was initialized");
let a11yWalker = await accessibility.getWalker();
is(
a11yWalker,
accessibility.accessibleWalkerFront,
"The AccessibleWalkerFront was returned"
);
ok(a11yWalker, "The AccessibleWalkerFront was returned");
const a11ySimulator = await accessibility.getSimulator();
const webRenderEnabled = isWebRenderEnabled(window);
@ -51,14 +45,6 @@ add_task(async function() {
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,

2
devtools/server/tests/browser/head.js
View File

@ -86,6 +86,8 @@ async function initAccessibilityFrontForUrl(url) {
const walker = inspector.walker;
const accessibility = await target.getFront("accessibility");
await accessibility.bootstrap();
return { inspector, walker, accessibility, target };
}

22
devtools/shared/fronts/accessibility.js
View File

@ -187,22 +187,12 @@ class AccessibilityFront extends FrontClassWithSpec(accessibilitySpec) {
this.formAttributeName = "accessibilityActor";
}
async initialize() {
this.accessibleWalkerFront = await super.getWalker();
this.simulatorFront = await super.getSimulator();
({
enabled: this.enabled,
canBeEnabled: this.canBeEnabled,
canBeDisabled: this.canBeDisabled,
} = await this.bootstrap());
}
async getWalker() {
return this.accessibleWalkerFront;
}
async getSimulator() {
return this.simulatorFront;
bootstrap() {
return super.bootstrap().then(state => {
this.enabled = state.enabled;
this.canBeEnabled = state.canBeEnabled;
this.canBeDisabled = state.canBeDisabled;
});
}
init() {