DevTools: Don't lose focus when interacting with ListWidget

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

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /**
  * @unrestricted
  */
 UI.ListWidget = class extends UI.VBox {
   /**
    * @param {!UI.ListWidget.Delegate} delegate
    */
   constructor(delegate) {
     super(true);
     this.registerRequiredCSS('ui/listWidget.css');
     this._delegate = delegate;
 
     this._list = this.contentElement.createChild('div', 'list');
+    this.element.tabIndex = -1;
 
     /** @type {?UI.ListWidget.Editor} */
     this._editor = null;
     /** @type {*|null} */
     this._editItem = null;
     /** @type {?Element} */
     this._editElement = null;
 
     /** @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();
   }
 
   clear() {
     this._items = [];
     this._editable = [];
     this._elements = [];
     this._lastSeparator = false;
     this._list.removeChildren();
     this._updatePlaceholder();
@@ skipping 99 matching lines @@
       var index = this._elements.indexOf(element);
       var insertionPoint = this._elements[index + 1] || null;
       this._startEditing(item, element, insertionPoint);
     }
 
     /**
      * @this {UI.ListWidget}
      */
     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);
     }
   }
 
   /**
    * @override
    */
   wasShown() {
     super.wasShown();
     this._stopEditing();
@@ skipping 12 matching lines @@
   /**
    * @param {*} item
    * @param {?Element} element
    * @param {?Element} insertionPoint
    */
   _startEditing(item, element, insertionPoint) {
     if (element && this._editElement === element)
       return;
 
     this._stopEditing();
+    this._previousFocusedElement = this.element.ownerDocument.deepActiveElement();
 
     this._list.classList.add('list-editing');
     this._editItem = item;
     this._editElement = element;
     if (element)
       element.classList.add('hidden');
 
     var index = element ? this._elements.indexOf(element) : -1;
     this._editor = this._delegate.beginEdit(item);
     this._updatePlaceholder();
     this._list.insertBefore(this._editor.element, insertionPoint);
     this._editor.beginEdit(
         item, index, element ? Common.UIString('Save') : Common.UIString('Add'), this._commitEditing.bind(this),
         this._stopEditing.bind(this));
   }
 
   _commitEditing() {
     var editItem = this._editItem;
     var isNew = !this._editElement;
     var editor = /** @type {!UI.ListWidget.Editor} */ (this._editor);
     this._stopEditing();
     this._delegate.commitEdit(editItem, editor, isNew);
   }
 
   _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)
       this._editor.element.remove();
 
     this._editor = null;
     this._editItem = null;
     this._editElement = null;
     this._updatePlaceholder();
+    if (this._previousFocusedElement && hadFocus)
+      this._previousFocusedElement.focus();
+    this._previousFocusedElement = null;
   }
 };
 
 /**
  * @interface
  */
 UI.ListWidget.Delegate = function() {};
 
 UI.ListWidget.Delegate.prototype = {
   /**
@@ skipping 174 matching lines @@
 
   _cancelClicked() {
     var cancel = this._cancel;
     this._commit = null;
     this._cancel = null;
     this._item = null;
     this._index = -1;
     cancel();
   }
 };