DevTools: Don't lose focus when interacting with ListWidget

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

Index: third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js b/third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js
index 6a3a19e79b0779cf4c49ae3b795c79aecddc3c12..d3b487982c06bc623ffc33ddaade6b10cfe717bf 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/ListWidget.js
@@ -14,6 +14,7 @@ UI.ListWidget = class extends UI.VBox {
     this._delegate = delegate;
 
     this._list = this.contentElement.createChild('div', 'list');
+    this.element.tabIndex = -1;
 
     /** @type {?UI.ListWidget.Editor} */
     this._editor = null;
@@ -25,6 +26,9 @@ UI.ListWidget = class extends UI.VBox {
     /** @type {?Element} */
     this._emptyPlaceholder = null;
 
+    /** @type {?Element} */
+    this._previousFocusedElement = null;

[einbinder, 2017/04/19 17:02:09]

Can't use focus restorer, because we don't necessarily want to focus the list.

[dgozman, 2017/04/19 19:59:34]

Could you please describe in more details?

[einbinder, 2017/04/20 16:35:26]

The list doesn't need to steal focus, it is up to sub classes to decide if and
how they are focusable. If there was an "add item" button that created a list,
focus should stay on the button if the list item isn't editable.

Another issue with FocusRestorer is that it checks and restores at the same
time. Often the previous focused element is hidden until the the list is
removed, so the "hadFocus" variable is needed.

+
     this.clear();
   }
 
@@ -144,6 +148,7 @@ UI.ListWidget = class extends UI.VBox {
      */
     function onRemoveClicked() {
       var index = this._elements.indexOf(element);
+      this.element.focus();

[einbinder, 2017/04/19 17:02:09]

When a remove button is clicked, I don't have a good place to put focus so I am
just putting it on the widget itself.

       this._delegate.removeItemRequested(this._items[index], index);
     }
   }
@@ -176,6 +181,7 @@ UI.ListWidget = class extends UI.VBox {
       return;
 
     this._stopEditing();
+    this._previousFocusedElement = this.element.ownerDocument.deepActiveElement();
 
     this._list.classList.add('list-editing');
     this._editItem = item;
@@ -202,6 +208,7 @@ UI.ListWidget = class extends UI.VBox {
 
   _stopEditing() {
     this._list.classList.remove('list-editing');
+    var hadFocus = this._editor && this._editor.element.hasFocus();
     if (this._editElement)
       this._editElement.classList.remove('hidden');
     if (this._editor && this._editor.element.parentElement)
@@ -211,6 +218,9 @@ UI.ListWidget = class extends UI.VBox {
     this._editItem = null;
     this._editElement = null;
     this._updatePlaceholder();
+    if (this._previousFocusedElement && hadFocus)
+      this._previousFocusedElement.focus();
+    this._previousFocusedElement = null;
   }
 };