[DevTools] Rework some focus code.

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

Index: third_party/WebKit/Source/devtools/front_end/ui/View.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/View.js b/third_party/WebKit/Source/devtools/front_end/ui/View.js
index 6e910f7bb55c043878ffd0a7108bc4ccd0c9f955..3171847d2054d09f024b93ed72e402883b0ef5c5 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/View.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/View.js
@@ -435,6 +435,8 @@ WebInspector.ViewManager._ContainerWidget = function(view)
     WebInspector.VBox.call(this);
     this.element.classList.add("flex-auto", "view-container", "overflow-auto");
     this._view = view;
+    this.element.tabIndex = 0;
+    this.setDefaultFocusedElement(this.element);
 }
 
 WebInspector.ViewManager._ContainerWidget.prototype = {
@@ -447,7 +449,13 @@ WebInspector.ViewManager._ContainerWidget.prototype = {
             return this._materializePromise;
         var promises = [];
         promises.push(this._view.toolbarItems().then(WebInspector.ViewManager._populateToolbar.bind(WebInspector.ViewManager, this.element)));
-        promises.push(this._view.widget().then(widget => widget.show(this.element)));
+        promises.push(this._view.widget().then(widget => {
+            var shouldFocus = this.element.hasFocus();
+            this.setDefaultFocusedElement(null);
+            widget.show(this.element);
+            if (shouldFocus)
+                widget.focus();
+        }));

[luoe, 2016/09/30 18:25:36]

Can we separate out this function?

promises.push(this._view.widget().then(showAndFocus);
function showAndFocus(){
...
}

[dgozman, 2016/09/30 20:27:19]

Good question. I feel like we are steering towards 8-10 lines arrow functions
being ok. Let's maybe discuss this with the team?

         this._materializePromise = Promise.all(promises);
         return this._materializePromise;
     },
@@ -696,8 +704,8 @@ WebInspector.ViewManager._TabbedLocation.prototype = {
     showView: function(view, insertBefore)
     {
         this.appendView(view, insertBefore);
-        this._tabbedPane.focus();
         this._tabbedPane.selectTab(view.viewId());
+        this._tabbedPane.focus();
         return this._materializeWidget(view);
     },