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;
 }
 
+ol.tree-outline li.selected:focus [is=ui-icon].spritesheet-smallicons {

[pfeldman, 2017/01/30 18:43:07]

lusha is replacing these with the use of UI.Icon all over the place. What is
happening here, why is this only added and not removed anywhere?

[einbinder, 2017/02/01 22:51:35]

I removed the focus event listener, which was adding a force-white-icons class.
Without copying over the CSS, I'd have to juggle blur and focus event listeners
on the selected TreeElements.
Edit

+    -webkit-mask-image: -webkit-image-set(url(Images/smallIcons.png) 1x, url(Images/smallIcons_2x.png) 2x);
+    -webkit-mask-size: 190px 30px;
+    background-image: unset;
+    background-size: unset;
+    background: unset;
+    background-color: white;
+}
+
+ol.tree-outline li.selected:focus [is=ui-icon].spritesheet-largeicons {
+    -webkit-mask-image: -webkit-image-set(url(Images/toolbarButtonGlyphs.png) 1x, url(Images/toolbarButtonGlyphs_2x.png) 2x);
+    -webkit-mask-size: 352px 168px;
+    background-image: unset;
+    background-size: unset;
+    background: unset;
+    background-color: white;
+}
+
 .tree-outline li .icons-container {
     align-self: center;
     display: flex;
     align-items: center;
 }
 
 .tree-outline li .leading-icons {
     margin-right: 4px;
 }
 
@@ skipping 48 matching lines @@
     margin-top: 0;
 }
 
 .tree-outline.tree-outline-dense li.parent::before {
     top: 0;
 }
 
 .tree-outline.tree-outline-dense ol {
     padding-left: 10px;
 }