[DevTools] Element trees should focus on select, highlight on focus

Bug: 865674
Change-Id: I42c6a50ca475615179ccd33bd1c8efb1549f1d69
Reviewed-on: https://chromium-review.googlesource.com/c/1300415
Commit-Queue: Erik Luo <[email protected]>
Reviewed-by: Joel Einbinder <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#604709}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 6d8ff26fcfe69dfbfb8e687169f362fec1834600
diff --git a/front_end/ui/treeoutline.js b/front_end/ui/treeoutline.js
index 3f5c347..11b34fa 100644
--- a/front_end/ui/treeoutline.js
+++ b/front_end/ui/treeoutline.js
@@ -936,7 +936,7 @@
    * @return {boolean}
    */
   collapseOrAscend(altKey) {
-    if (this.expanded) {
+    if (this.expanded && this._collapsible) {
       if (altKey)
         this.collapseRecursively();
       else
@@ -1035,8 +1035,11 @@
    * @return {boolean}
    */
   select(omitFocus, selectedByUser) {
-    if (!this.treeOutline || !this.selectable || this.selected)
+    if (!this.treeOutline || !this.selectable || this.selected) {
+      if (!omitFocus)
+        this.listItemElement.focus();
       return false;
+    }
     // Wait to deselect this element so that focus only changes once
     const lastSelected = this.treeOutline.selectedTreeElement;
     this.treeOutline.selectedTreeElement = null;
@@ -1044,6 +1047,8 @@
     if (this.treeOutline._rootElement === this) {
       if (lastSelected)
         lastSelected.deselect();
+      if (!omitFocus)
+        this.listItemElement.focus();
       return false;
     }