DevTools: Use real focus in TreeOutline

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

 /*
  * 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.
  */
 
 :host {
     flex: 1 1;
     padding: 2px 0 0 0;
 }
@@ skipping 32 matching lines @@
 .tree-outline li.in-clipboard .highlight {
     outline: 1px dotted darkgrey;
 }
 
 .tree-outline li.elements-drag-over .selection {
     display: block;
     margin-top: -2px;
     border-top: 2px solid rgb(56, 121, 217);
 }
 
-ol.tree-outline:focus li.selected .selection {
+ol.tree-outline li.selected:focus .selection {
     background-color: rgb(56, 121, 217);
 }
 
-ol.tree-outline:focus li.parent.selected::before {
+ol.tree-outline li.parent.selected:focus::before {
     background-color: white;
 }
 
 ol.tree-outline,
 .tree-outline ol {
     list-style-type: none;
 }
 
 .tree-outline-no-padding {
     padding: 0;
 }
 
 .tree-outline ol {
     padding-left: 12px;
 }
 
 .tree-outline li {
     text-overflow: ellipsis;
     white-space: nowrap;
     position: relative;
     display: flex;
     align-items: center;
     min-height: 16px;
 }
 
-ol.tree-outline:focus li.selected {
+ol.tree-outline li.selected:focus {
     color: white;
 }
 
-ol.tree-outline:focus li.selected * {
+ol.tree-outline li.selected:focus * {
     color: inherit;
 }
 
 .tree-outline li .icons-container {
     align-self: center;
     display: flex;
     align-items: center;
 }
 
 .tree-outline li .leading-icons {
@@ skipping 51 matching lines @@
     margin-top: 0;
 }
 
 .tree-outline.tree-outline-dense li.parent::before {
     top: 0;
 }
 
 .tree-outline.tree-outline-dense ol {
     padding-left: 10px;
 }