DevTools: extract treeoutline triangle icons from toolbarButtonGlyphs.png

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 86 matching lines @@
 .tree-outline li .leading-icons {
     margin-right: 4px;
 }
 
 .tree-outline li .trailing-icons {
     margin-left: 4px;
 }
 
 .tree-outline li::before {
     -webkit-user-select: none;
-    -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
-    -webkit-mask-size: 352px 168px;
+    -webkit-mask-image: url(Images/treeoutlineTriangles.png);
+    -webkit-mask-size: 32px 24px;
     content: "aa";
     color: transparent;
     text-shadow: none;
     margin-right: -2px;
     height: 12px;
 }
 
 .tree-outline li:not(.parent)::before {
     background-color: transparent;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.1) {
 .tree-outline li::before {
-    -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
+    -webkit-mask-image: url(Images/treeoutlineTriangles_2x.png);
 }
 } /* media */
 
 .tree-outline li::before {
-    -webkit-mask-position: -4px -96px;

[dgozman, 2017/01/30 19:31:21]

I remember some of them were positioned one-pixel-off to align better. Could you
please search for all +1/-1 combinations as well?

[lushnikov, 2017/01/31 09:14:29]

Looks like those were moved over to UI.Icon. We have only a handful of
toolbarButtonGlyphs.png references in the codebase - i've checked them all

+    -webkit-mask-position: 0 0;
     background-color: rgb(110, 110, 110);
 }
 
 .tree-outline li.parent.expanded::before {
-    -webkit-mask-position: -20px -96px;
+    -webkit-mask-position: -16px 0;
 }
 
 .tree-outline ol.children {
     display: none;
 }
 
 .tree-outline ol.children.expanded {
     display: block;
 }
 
 .tree-outline.tree-outline-dense li {
     margin-top: 1px;
     min-height: 12px;
 }
 
 .tree-outline.tree-outline-dense li.parent {
     margin-top: 0;
 }
 
 .tree-outline.tree-outline-dense li.parent::before {
     top: 0;
 }
 
 .tree-outline.tree-outline-dense ol {
     padding-left: 10px;
 }