Backed out changeset 50cc5c5bd5ef (bug 1520107) for mochitest failures at test_accessible_row_context_menu.html. CLOSED TREE
authorBrindusan Cristian <cbrindusan@mozilla.com>
Sat, 19 Jan 2019 20:57:45 +0200
changeset 511709 1aee4f577b05824f71ca36db2ab640e76d90cc60
parent 511708 0cbcad902d49e0be967b41b72252e18737bbed04
child 511718 0a4598992141595a1baba8fb30652b59b26d4358
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)
bugs1520107
milestone66.0a1
backs out50cc5c5bd5efdb15adda6b1490ecf907f5fe100b
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
Backed out changeset 50cc5c5bd5ef (bug 1520107) for mochitest failures at test_accessible_row_context_menu.html. CLOSED TREE
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,38 +223,40 @@ body {
 .treeTable .treeRow.highlighted:not(.selected) {
   background-color: var(--theme-selection-background-hover);
 }
 
 .treeTable .treeLabelCell {
   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);
 }
 
 .treeTable > thead {
   pointer-events: none;
 }
 
 .treeTable > tbody tr {
--- a/devtools/client/accessibility/components/AccessibilityRow.js
+++ b/devtools/client/accessibility/components/AccessibilityRow.js
@@ -56,17 +56,16 @@ 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) {
@@ -189,30 +188,34 @@ 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.props.hasContextMenu && (e => this.onContextMenu(e)),
+      onContextMenu: this.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, null, null, { withRef: true })(AccessibilityRow);
+module.exports = connect(mapStateToProps)(AccessibilityRow);
--- a/devtools/client/accessibility/components/AccessibilityTree.js
+++ b/devtools/client/accessibility/components/AccessibilityTree.js
@@ -29,17 +29,16 @@ 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);
@@ -133,37 +132,31 @@ 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"] : [];
           },
         },
       }));
     };
@@ -182,33 +175,21 @@ 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,18 +112,16 @@ 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,
@@ -509,18 +507,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
@@ -538,24 +536,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