Bug 1520107 - fix focus and keyboard triggered context menu handling in a11y panel tree. r=gl
authorYura Zenevich <yura.zenevich@gmail.com>
Sun, 20 Jan 2019 04:26:17 +0000
changeset 514602 6aa3c460ff66470e1571059f33d08f8355ec9528
parent 514601 47e442ac35b32dab741071cdfd50e99075f5cafd
child 514604 219bc50b5cd5ac8b374cac6531ece44dddf4bfff
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1520107
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1520107 - fix focus and keyboard triggered context menu handling in a11y panel tree. r=gl MozReview-Commit-ID: 2kzvA2Eb1eF Differential Revision: https://phabricator.services.mozilla.com/D16986
devtools/client/accessibility/accessibility.css
devtools/client/accessibility/components/AccessibilityRow.js
devtools/client/accessibility/components/AccessibilityTree.js
devtools/client/accessibility/test/mochitest/test_accessible_row_context_menu.html
devtools/client/shared/components/tree/TreeView.js
--- a/devtools/client/accessibility/accessibility.css
+++ b/devtools/client/accessibility/accessibility.css
@@ -223,40 +223,38 @@ body {
 .treeTable .treeRow.highlighted:not(.selected) {
   background-color: var(--theme-selection-background-hover);
 }
 
 .treeTable .treeLabelCell {
   min-width: 50%;
 }
 
-.treeTable:focus,
-.treeTable > tbody:focus {
+.treeTable:focus {
   outline: 0;
 }
 
-.treeTable::-moz-focus-inner,
-.treeTable > tbody::-moz-focus-inner {
+.treeTable::-moz-focus-inner {
   border: 0;
 }
 
-.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected {
+.treeTable:not(:focus) .treeRow.selected {
   background-color: var(--accessibility-unfocused-tree-focused-node-background);
 }
 
-.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .theme-twisty {
+.treeTable:not(:focus) .treeRow.selected .theme-twisty {
   fill: var(--accessibility-unfocused-tree-focused-node-twisty-fill);
 }
 
-.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected *,
-.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .treeLabelCell:after {
+.treeTable:not(:focus) .treeRow.selected *,
+.treeTable:not(:focus) .treeRow.selected .treeLabelCell:after {
   color: inherit;
 }
 
-.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .objectBox-string {
+.treeTable:not(:focus) .treeRow.selected .objectBox-string {
   color: var(--string-color);
 }
 
 .treeTable > thead {
   pointer-events: none;
 }
 
 .treeTable > tbody tr {
--- a/devtools/client/accessibility/components/AccessibilityRow.js
+++ b/devtools/client/accessibility/components/AccessibilityRow.js
@@ -56,16 +56,17 @@ class HighlightableTreeRowClass extends 
 const HighlightableTreeRow = createFactory(HighlightableTreeRowClass);
 
 // Component that expands TreeView's own TreeRow and is responsible for
 // rendering an accessible object.
 class AccessibilityRow extends Component {
   static get propTypes() {
     return {
       ...TreeRow.propTypes,
+      hasContextMenu: PropTypes.bool.isRequired,
       dispatch: PropTypes.func.isRequired,
       walker: PropTypes.object,
     };
   }
 
   componentDidMount() {
     const { selected, object } = this.props.member;
     if (selected) {
@@ -188,34 +189,30 @@ class AccessibilityRow extends Component
 
     menu.popup(e.screenX, e.screenY, gToolbox);
 
     if (gTelemetry) {
       gTelemetry.scalarAdd(TELEMETRY_ACCESSIBLE_CONTEXT_MENU_OPENED, 1);
     }
   }
 
-  get hasContextMenu() {
-    const { supports } = this.props;
-    return supports.snapshot;
-  }
-
   /**
    * Render accessible row component.
    * @returns acecssible-row React component.
    */
   render() {
     const { object } = this.props.member;
     const props = Object.assign({}, this.props, {
-      onContextMenu: this.hasContextMenu && (e => this.onContextMenu(e)),
+      onContextMenu: this.props.hasContextMenu && (e => this.onContextMenu(e)),
       onMouseOver: () => this.highlight(object),
       onMouseOut: () => this.unhighlight(),
     });
 
     return (HighlightableTreeRow(props));
   }
 }
 
 const mapStateToProps = ({ ui }) => ({
   supports: ui.supports,
 });
 
-module.exports = connect(mapStateToProps)(AccessibilityRow);
+module.exports =
+  connect(mapStateToProps, null, null, { withRef: true })(AccessibilityRow);
--- a/devtools/client/accessibility/components/AccessibilityTree.js
+++ b/devtools/client/accessibility/components/AccessibilityTree.js
@@ -29,16 +29,17 @@ class AccessibilityTree extends Componen
   static get propTypes() {
     return {
       walker: PropTypes.object,
       dispatch: PropTypes.func.isRequired,
       accessibles: PropTypes.object,
       expanded: PropTypes.object,
       selected: PropTypes.string,
       highlighted: PropTypes.object,
+      supports: PropTypes.object,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.onNameChange = this.onNameChange.bind(this);
     this.onReorder = this.onReorder.bind(this);
@@ -132,31 +133,37 @@ class AccessibilityTree extends Componen
     }];
 
     const {
       accessibles,
       dispatch,
       expanded,
       selected,
       highlighted: highlightedItem,
+      supports,
       walker,
     } = this.props;
 
+    // Historically, the first context menu item is snapshot function and it is available
+    // for all accessible object.
+    const hasContextMenu = supports.snapshot;
+
     const renderValue = props => {
       return Rep(Object.assign({}, props, {
         defaultRep: Grip,
         cropLimit: 50,
       }));
     };
 
     const renderRow = rowProps => {
       const { object } = rowProps.member;
       const highlighted = object === highlightedItem;
       return AccessibilityRow(Object.assign({}, rowProps, {
         walker,
+        hasContextMenu,
         highlighted,
         decorator: {
           getRowClass: function() {
             return highlighted ? ["highlighted"] : [];
           },
         },
       }));
     };
@@ -175,21 +182,33 @@ class AccessibilityTree extends Componen
         selected,
         onClickRow(nodePath, event) {
           event.stopPropagation();
           if (event.target.classList.contains("theme-twisty")) {
             this.toggle(nodePath);
           }
           this.selectRow(event.currentTarget);
         },
+        onContextMenuTree: hasContextMenu && function(e) {
+          // If context menu event is triggered on (or bubbled to) the TreeView, it was
+          // done via keyboard. Open context menu for currently selected row.
+          let row = this.getSelectedRow();
+          if (!row) {
+            return;
+          }
+
+          row = row.getWrappedInstance();
+          row.onContextMenu(e);
+        },
       })
     );
   }
 }
 
 const mapStateToProps = ({ accessibles, ui }) => ({
   accessibles,
   expanded: ui.expanded,
   selected: ui.selected,
+  supports: ui.supports,
   highlighted: ui.highlighted,
 });
 // Exports from this module
 module.exports = connect(mapStateToProps)(AccessibilityTree);
--- a/devtools/client/accessibility/test/mochitest/test_accessible_row_context_menu.html
+++ b/devtools/client/accessibility/test/mochitest/test_accessible_row_context_menu.html
@@ -57,19 +57,16 @@ window.onload = async function() {
       const provider = createElement(Provider, { store: mockStore }, accRow);
 
       container = document.createElement("div");
       container.id = "container";
       document.body.appendChild(container);
       return ReactDOM.render(provider, container);
     }
 
-    const checker = Symbol();
-    let isCalled;
-
     const ROW_ID = "test-row";
     const JSON_URL_PREFIX = "data:application/json;charset=UTF-8,";
     const SNAPSHOT = { "snapshot": true };
     const defaultProps = {
       id: ROW_ID,
       member: {
         object: {
           name: "test",
@@ -82,23 +79,22 @@ window.onload = async function() {
       },
       columns: [
         { "id": "default", "title": "role" },
         { "id": "value", "title": "name" },
       ],
       provider: {
         getValue: (object, id) => object[id],
       },
+      hasContextMenu: true,
     };
 
     const mockProps = {
       ...defaultProps,
-      onContextMenu: () => {
-        isCalled = true;
-      },
+      hasContextMenu: null,
     };
 
     const defaultState = { ui: { supports: { snapshot: true }}};
     const mockState = { ui: { supports: {}}};
 
     info("Check contextmenu default behaviour.");
     renderAccessibilityRow(defaultProps, defaultState);
     let row = document.getElementById(ROW_ID);
@@ -128,35 +124,35 @@ window.onload = async function() {
 
       const [ url, where ] = await openWebLinkInPromise;
       is(url, `${JSON_URL_PREFIX}${encodeURIComponent(JSON.stringify(SNAPSHOT))}`,
          "Correct URL is opened");
       is(where, "tab", "URL was opened correctly");
 
       // Reset @openWebLinkIn to default.
       browserWindow.openWebLinkIn = defaultOpenWebLinkIn;
+      menu.remove();
     });
 
     info("Check accessibility row when context menu is not supported.");
-    renderAccessibilityRow(mockProps, mockState);
+    renderAccessibilityRow(defaultProps, mockState);
     row = document.getElementById(ROW_ID);
 
     info("Check contextmenu listener is not called when context menu is not supported.");
-    isCalled = checker;
     Simulate.contextMenu(row);
-    ok(isCalled === checker, "contextmenu event handler was never called.");
+    let menu = document.getElementById("accessibility-row-contextmenu");
+    ok(!menu, "contextmenu event handler was never called.");
 
-    info("Check accessibility row when context menu is supported.");
+    info("Check accessibility row when no context menu is available.");
     renderAccessibilityRow(mockProps, defaultState);
     row = document.getElementById(ROW_ID);
 
-    info("Check contextmenu listener is called when context menu is supported.");
-    isCalled = checker;
     Simulate.contextMenu(row);
-    ok(isCalled, "contextmenu event handler was called correctly.");
+    menu = document.getElementById("accessibility-row-contextmenu");
+    ok(!menu, "contextmenu event handler was never called.");
   } catch (e) {
     ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
   } finally {
     SimpleTest.finish();
   }
 };
 </script>
 </pre>
--- a/devtools/client/shared/components/tree/TreeView.js
+++ b/devtools/client/shared/components/tree/TreeView.js
@@ -112,16 +112,18 @@ define(function(require, exports, module
         // Selected node
         selected: PropTypes.string,
         // Custom filtering callback
         onFilter: PropTypes.func,
         // Custom sorting callback
         onSort: PropTypes.func,
         // Custom row click callback
         onClickRow: PropTypes.func,
+        // Tree context menu event handler
+        onContextMenuTree: PropTypes.func,
         // A header is displayed if set to true
         header: PropTypes.bool,
         // Long string is expandable by a toggle button
         expandableStrings: PropTypes.bool,
         // Array of columns
         columns: PropTypes.arrayOf(PropTypes.shape({
           id: PropTypes.string.isRequired,
           title: PropTypes.string,
@@ -507,18 +509,18 @@ define(function(require, exports, module
       return rows;
     }
 
     render() {
       const root = this.props.object;
       const classNames = ["treeTable"];
       this.rows = [];
 
+      const { className, onContextMenuTree } = this.props;
       // Use custom class name from props.
-      const className = this.props.className;
       if (className) {
         classNames.push(...className.split(" "));
       }
 
       // Alright, let's render all tree rows. The tree is one big <table>.
       let rows = this.renderRows(root, 0, "");
 
       // This happens when the view needs to do initial asynchronous
@@ -536,24 +538,24 @@ define(function(require, exports, module
         dom.table({
           className: classNames.join(" "),
           role: "tree",
           ref: tree => {
             this.tree = tree;
           },
           tabIndex: 0,
           onKeyDown: this.onKeyDown,
+          onContextMenu: onContextMenuTree && onContextMenuTree.bind(this),
           "aria-label": this.props.label || "",
           "aria-activedescendant": this.state.selected,
           cellPadding: 0,
           cellSpacing: 0},
           TreeHeader(props),
           dom.tbody({
             role: "presentation",
-            tabIndex: -1,
           }, rows)
         )
       );
     }
   }
 
   // Helpers