Backed out changeset 50cc5c5bd5ef (bug 1520107) for mochitest failures at test_accessible_row_context_menu.html. CLOSED TREE

devtools/client/accessibility/accessibility.css

@@ -228,28 +228,30 @@ body {
   min-width: 50%;
 }
 
-.treeTable:focus {
+.treeTable:focus,
+.treeTable > tbody:focus {
   outline: 0;
 }
 
-.treeTable::-moz-focus-inner {
+.treeTable::-moz-focus-inner,
+.treeTable > tbody::-moz-focus-inner {
   border: 0;
 }
 
-.treeTable:not(:focus) .treeRow.selected {
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected {
   background-color: var(--accessibility-unfocused-tree-focused-node-background);
 }
 
-.treeTable:not(:focus) .treeRow.selected .theme-twisty {
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .theme-twisty {
   fill: var(--accessibility-unfocused-tree-focused-node-twisty-fill);
 }
 
-.treeTable:not(:focus) .treeRow.selected *,
-.treeTable:not(:focus) .treeRow.selected .treeLabelCell:after {
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected *,
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .treeLabelCell:after {
   color: inherit;
 }
 
-.treeTable:not(:focus) .treeRow.selected .objectBox-string {
+.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .objectBox-string {
   color: var(--string-color);
 }
 

devtools/client/accessibility/components/AccessibilityRow.js

@@ -61,7 +61,6 @@ class AccessibilityRow extends Component {
   static get propTypes() {
     return {
       ...TreeRow.propTypes,
-      hasContextMenu: PropTypes.bool.isRequired,
       dispatch: PropTypes.func.isRequired,
       walker: PropTypes.object,
     };
@@ -194,6 +193,11 @@ class AccessibilityRow extends Component {
     }
   }
 
+  get hasContextMenu() {
+    const { supports } = this.props;
+    return supports.snapshot;
+  }
+
   /**
    * Render accessible row component.
    * @returns acecssible-row React component.
@@ -201,7 +205,7 @@ class AccessibilityRow extends Component {
   render() {
     const { object } = this.props.member;
     const props = Object.assign({}, this.props, {
-      onContextMenu: this.props.hasContextMenu && (e => this.onContextMenu(e)),
+      onContextMenu: this.hasContextMenu && (e => this.onContextMenu(e)),
       onMouseOver: () => this.highlight(object),
       onMouseOut: () => this.unhighlight(),
     });
@@ -214,5 +218,4 @@ const mapStateToProps = ({ ui }) => ({
   supports: ui.supports,
 });
 
-module.exports =
-  connect(mapStateToProps, null, null, { withRef: true })(AccessibilityRow);
+module.exports = connect(mapStateToProps)(AccessibilityRow);

devtools/client/accessibility/components/AccessibilityTree.js

@@ -34,7 +34,6 @@ class AccessibilityTree extends Component {
       expanded: PropTypes.object,
       selected: PropTypes.string,
       highlighted: PropTypes.object,
-      supports: PropTypes.object,
     };
   }
 
@@ -138,14 +137,9 @@ class AccessibilityTree extends Component {
       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,
@@ -158,7 +152,6 @@ class AccessibilityTree extends Component {
       const highlighted = object === highlightedItem;
       return AccessibilityRow(Object.assign({}, rowProps, {
         walker,
-        hasContextMenu,
         highlighted,
         decorator: {
           getRowClass: function() {
@@ -187,17 +180,6 @@ class AccessibilityTree extends Component {
           }
           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);
-        },
       })
     );
   }
@@ -207,7 +189,6 @@ const mapStateToProps = ({ accessibles, ui }) => ({
   accessibles,
   expanded: ui.expanded,
   selected: ui.selected,
-  supports: ui.supports,
   highlighted: ui.highlighted,
 });
 // Exports from this module

devtools/client/shared/components/tree/TreeView.js

@@ -117,8 +117,6 @@ define(function(require, exports, module) {
         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
@@ -514,8 +512,8 @@ define(function(require, exports, module) {
       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(" "));
       }
@@ -543,7 +541,6 @@ define(function(require, exports, module) {
           },
           tabIndex: 0,
           onKeyDown: this.onKeyDown,
-          onContextMenu: onContextMenuTree && onContextMenuTree.bind(this),
           "aria-label": this.props.label || "",
           "aria-activedescendant": this.state.selected,
           cellPadding: 0,
@@ -551,6 +548,7 @@ define(function(require, exports, module) {
           TreeHeader(props),
           dom.tbody({
             role: "presentation",
+            tabIndex: -1,
           }, rows)
         )
       );