diff --git a/devtools/client/accessibility/components/AccessibilityRow.js b/devtools/client/accessibility/components/AccessibilityRow.js index da276e6463dd..85886b84ec17 100644 --- a/devtools/client/accessibility/components/AccessibilityRow.js +++ b/devtools/client/accessibility/components/AccessibilityRow.js @@ -16,12 +16,20 @@ const TreeRow = require("devtools/client/shared/components/tree/TreeRow"); // Utils const {flashElementOn, flashElementOff} = require("devtools/client/inspector/markup/utils"); +const { openDocLink } = require("devtools/client/shared/link"); const { VALUE_FLASHING_DURATION, VALUE_HIGHLIGHT_DURATION } = require("../constants"); // Actions const { updateDetails } = require("../actions/details"); const { unhighlight } = require("../actions/accessibles"); +const { L10N } = require("../utils/l10n"); + +loader.lazyRequireGetter(this, "Menu", "devtools/client/framework/menu"); +loader.lazyRequireGetter(this, "MenuItem", "devtools/client/framework/menu-item"); + +const JSON_URL_PREFIX = "data:application/json;charset=UTF-8,"; + class HighlightableTreeRowClass extends TreeRow { shouldComponentUpdate(nextProps) { const props = ["name", "open", "value", "loading", "selected", "hasChildren"]; @@ -138,6 +146,44 @@ class AccessibilityRow extends Component { walker.unhighlight().catch(error => console.warn(error)); } + async printToJSON() { + const { member, supports } = this.props; + if (!supports.snapshot) { + // Debugger server does not support Accessible actor snapshots. + return; + } + + const snapshot = await member.object.snapshot(); + openDocLink(`${JSON_URL_PREFIX}${encodeURIComponent(JSON.stringify(snapshot))}`); + } + + onContextMenu(e) { + e.stopPropagation(); + e.preventDefault(); + + if (!gToolbox) { + return; + } + + const menu = new Menu({ id: "accessibility-row-contextmenu" }); + const { supports } = this.props; + + if (supports.snapshot) { + menu.append(new MenuItem({ + id: "menu-printtojson", + label: L10N.getStr("accessibility.tree.menu.printToJSON"), + click: () => this.printToJSON(), + })); + } + + menu.popup(e.screenX, e.screenY, gToolbox); + } + + get hasContextMenu() { + const { supports } = this.props; + return supports.snapshot; + } + /** * Render accessible row component. * @returns acecssible-row React component. @@ -145,6 +191,7 @@ class AccessibilityRow extends Component { render() { const { object } = this.props.member; const props = Object.assign({}, this.props, { + onContextMenu: this.hasContextMenu && (e => this.onContextMenu(e)), onMouseOver: () => this.highlight(object), onMouseOut: () => this.unhighlight(), }); diff --git a/devtools/client/accessibility/test/mochitest/chrome.ini b/devtools/client/accessibility/test/mochitest/chrome.ini index 7bea8e7f0d13..3aea7ea2878e 100644 --- a/devtools/client/accessibility/test/mochitest/chrome.ini +++ b/devtools/client/accessibility/test/mochitest/chrome.ini @@ -5,3 +5,4 @@ support-files = [test_accessible_learnMoreLink.html] [test_accessible_openLink.html] [test_accessible_relations.html] +[test_accessible_row_context_menu.html] diff --git a/devtools/client/accessibility/test/mochitest/test_accessible_row_context_menu.html b/devtools/client/accessibility/test/mochitest/test_accessible_row_context_menu.html new file mode 100644 index 000000000000..40b83df141d8 --- /dev/null +++ b/devtools/client/accessibility/test/mochitest/test_accessible_row_context_menu.html @@ -0,0 +1,164 @@ + + + + + + + AccessibilityRow context menu test + + + + + +
+
+
+
+ + diff --git a/devtools/client/locales/en-US/accessibility.properties b/devtools/client/locales/en-US/accessibility.properties index 4acccdd7a2dc..19359293dff8 100644 --- a/devtools/client/locales/en-US/accessibility.properties +++ b/devtools/client/locales/en-US/accessibility.properties @@ -101,3 +101,8 @@ accessibility.description.general.p2=Accessibility features may affect the perfo # when accessibility service description is provided when a client is connected # to an older version of accessibility actor. accessibility.description.oldVersion=You are connected to a debugger server that is too old. To use Accessibility panel, please connect to the latest debugger server version. + +# LOCALIZATION NOTE (accessibility.tree.menu.printToJSON): A title text used when a +# context menu item for printing an accessible tree to JSON is rendered after triggering a +# context menu for an accessible tree row. +accessibility.tree.menu.printToJSON=Print to JSON