Backed out changeset 611bd5949e83 (bug 1520107) for dt failures, on a CLOSED TREE.
authorOana Pop Rus <opoprus@mozilla.com>
Sat, 19 Jan 2019 07:27:52 +0200
changeset 454513 1c7ed5d9e1fe429f8a753b40156744b73ef12cda
parent 454512 54a11c7a8f08d4468f2d0d15f22a43962c21a8e7
child 454514 64d167665c2906410aaab43c3346edde9a3428df
child 454598 35418acc5dc72f99920066ae96de8be11c39595c
push id35399
push usercsabou@mozilla.com
push dateSat, 19 Jan 2019 09:28:26 +0000
treeherdermozilla-central@64d167665c29 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1520107
milestone66.0a1
backs out611bd5949e8303b918da760d8e01caae8d30ec80
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 611bd5949e83 (bug 1520107) for dt failures, on a 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,
@@ -308,17 +306,17 @@ define(function(require, exports, module
           const lastRow = this.rows[this.rows.length - 1];
           if (lastRow) {
             this.selectRow(lastRow);
           }
           break;
       }
 
       // Focus should always remain on the tree container itself.
-      this.refs.tree.focus();
+      this.tree.focus();
       event.preventDefault();
     }
 
     onClickRow(nodePath, event) {
       const onClickRow = this.props.onClickRow;
 
       if (onClickRow) {
         onClickRow.call(this, nodePath, event);
@@ -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
@@ -533,27 +531,29 @@ define(function(require, exports, module
       const props = Object.assign({}, this.props, {
         columns: this.state.columns,
       });
 
       return (
         dom.table({
           className: classNames.join(" "),
           role: "tree",
-          ref: "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