Bug 1520107 - fix focus and keyboard triggered context menu handling in a11y panel tree. r=gl
☠☠ backed out by 1aee4f577b05 ☠ ☠
authorYura Zenevich <yura.zenevich@gmail.com>
Sat, 19 Jan 2019 18:13:55 +0000
changeset 511707 50cc5c5bd5efdb15adda6b1490ecf907f5fe100b
parent 511706 936e2b78ce7cb84299fd66f34b067c36135258d6
child 511708 0cbcad902d49e0be967b41b72252e18737bbed04
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [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/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/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