DevTools: Use real focus in TreeOutline

third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js

Index: third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js b/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
index b32588bfc35d12c21b9acd67704fa02f180d61d7..39afc0df91c04e4e8f542497c82adf7d0ba86555 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
@@ -37,6 +37,7 @@ UI.TreeOutline = class extends Common.Object {
     super();
     this._createRootElement();
 
+    /** @type {?UI.TreeElement} */
     this.selectedTreeElement = null;
     this.expandTreeElementsWhenArrowing = false;
     /** @type {?function(!UI.TreeElement, !UI.TreeElement):number} */
@@ -44,26 +45,14 @@ UI.TreeOutline = class extends Common.Object {
 
     this.contentElement = this._rootElement._childrenListNode;
     this.contentElement.addEventListener('keydown', this._treeKeyDown.bind(this), true);
-    this.contentElement.addEventListener('focus', setFocused.bind(this, true), false);
-    this.contentElement.addEventListener('blur', setFocused.bind(this, false), false);
 
-    this.setFocusable(!nonFocusable);
+    this._focusable = !nonFocusable;
 
     this.element = this.contentElement;
 
     // Adjust to allow computing margin-left for the selection element.
     // Check the padding-left for the li element for correct value.
     this._paddingSize = 0;
-
-    /**
-     * @param {boolean} isFocused
-     * @this {UI.TreeOutline}
-     */
-    function setFocused(isFocused) {
-      this._focused = isFocused;
-      if (this.selectedTreeElement)
-        this.selectedTreeElement._setFocused(this._focused);
-    }
   }
 
   _createRootElement() {
@@ -146,18 +135,9 @@ UI.TreeOutline = class extends Common.Object {
     this._comparator = comparator;
   }
 
-  /**
-   * @param {boolean} focusable
-   */
-  setFocusable(focusable) {
-    if (focusable)
-      this.contentElement.setAttribute('tabIndex', 0);
-    else
-      this.contentElement.removeAttribute('tabIndex');
-  }
-
   focus() {
-    this.contentElement.focus();
+    if (this.selectedTreeElement)

[pfeldman, 2017/01/30 18:43:07]

What if there is no selected element? Can there be no selected element btw?
Previously we could rely upon the fact that treeoutline would pick focus, we no
longer can.

[einbinder, 2017/02/01 22:51:35]

Selecting the contentElement now, and restoring focus to/from it.

+      this.selectedTreeElement.listItemElement.focus();
   }
 
   /**
@@ -180,6 +160,7 @@ UI.TreeOutline = class extends Common.Object {
     element.deselect();
     element.onunbind();
     element.treeOutline = null;
+    element.listItemElement.removeAttribute('tabIndex');

[pfeldman, 2017/01/30 18:43:07]

It seems like you are now balancing this in the select/deselect pair?

[einbinder, 2017/02/01 22:51:35]

Yep, that is better.

   }
 
   /**
@@ -223,10 +204,8 @@ UI.TreeOutline = class extends Common.Object {
    * @param {!Event} event
    */
   _treeKeyDown(event) {
-    if (event.target !== this.contentElement)
-      return;
-
-    if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
+    if (!this.selectedTreeElement || event.target !== this.selectedTreeElement.listItemElement || event.shiftKey ||
+        event.metaKey || event.ctrlKey)
       return;
 
     var handled = false;
@@ -287,8 +266,11 @@ UI.TreeOutline.Events = {
  * @unrestricted
  */
 UI.TreeOutlineInShadow = class extends UI.TreeOutline {
-  constructor() {
-    super();
+  /**
+   * @param {boolean=} nonFocusable
+   */
+  constructor(nonFocusable) {
+    super(nonFocusable);
     this.contentElement.classList.add('tree-outline');
 
     // Redefine element to the external one.
@@ -682,13 +664,6 @@ UI.TreeElement = class {
       this._trailingIconsElement.appendChild(icon);
   }
 
-  /**
-   * @param {boolean} focused
-   */
-  _setFocused(focused) {
-    this._focused = focused;
-    this._listItemNode.classList.toggle('force-white-icons', focused);
-  }
 
   /**
    * @return {string}
@@ -1028,15 +1003,13 @@ UI.TreeElement = class {
 
     this.selected = true;
 
+    this.treeOutline.selectedTreeElement = this;
+    if (this.treeOutline._focusable)
+      this._listItemNode.setAttribute('tabIndex', 0);
     if (!omitFocus)
-      this.treeOutline.focus();
+      this.listItemElement.focus();
 
-    // Focusing on another node may detach "this" from tree.
-    if (!this.treeOutline)
-      return false;
-    this.treeOutline.selectedTreeElement = this;
     this._listItemNode.classList.add('selected');
-    this._setFocused(this.treeOutline._focused);
     this.treeOutline.dispatchEventToListeners(UI.TreeOutline.Events.ElementSelected, this);
     return this.onselect(selectedByUser);
   }
@@ -1059,7 +1032,7 @@ UI.TreeElement = class {
     this.selected = false;
     this.treeOutline.selectedTreeElement = null;
     this._listItemNode.classList.remove('selected');
-    this._setFocused(false);
+    this._listItemNode.removeAttribute('tabIndex');
   }
 
   _populateIfNeeded() {