DevTools: Use real focus in TreeOutline

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

Index: third_party/WebKit/Source/devtools/front_end/ui/treeoutline.css
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.css b/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.css
index 5b1dab391ab8cfd93529ab5116052ae229306902..1bf0dee57f86b00557a9821dd846ebf33a62d921 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.css
+++ b/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.css
@@ -50,11 +50,11 @@
     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;
 }
 
@@ -80,14 +80,32 @@ ol.tree-outline,
     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 {
+    -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;

[pfeldman, 2017/01/21 04:57:34]

background is a shorthand, it should reset everything. background: none should
suffice.

[einbinder, 2017/01/21 06:20:31]

I copy-pasted this from the code in InspectorCommon.css. Maybe someone had some
clever reason why it was this way? It's hard to check if the icons all look how
they are supposed to.

+    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;