DevTools: introduce spritesheet assembler.

third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.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.
  */
 
 * {
     /* This is required for correct sizing of flex items because we rely
      * on an old version of the flexbox spec.
      * Longer-term we should remove this, see crbug.com/473625 */
@@ skipping 313 matching lines @@
 
 [is=ui-icon] {
     display: inline-block;
     flex-shrink: 0;
 }
 
 .icon-mask {
     background-color: rgb(110, 110, 110);
 }
 
-.spritesheet-smallicons:not(.icon-mask) {
-    background-image: -webkit-image-set(url(Images/smallIcons.png) 1x, url(Images/smallIcons_2x.png) 2x);
-    background-size: 190px 30px;
+[is=ui-icon]:not(.icon-mask) {
+    background-image: -webkit-image-set(url(Images/icons_spritesheet.png) 1x, url(Images/icons_spritesheet_2x.png) 2x);
+    background-size: var(--spritesheet-size);
+    background-position: var(--spritesheet-position);
 }
 
-.spritesheet-smallicons.icon-mask {
-    -webkit-mask-image: -webkit-image-set(url(Images/smallIcons.png) 1x, url(Images/smallIcons_2x.png) 2x);
-    -webkit-mask-size: 190px 30px;
+[is=ui-icon].icon-mask {
+    -webkit-mask-image: -webkit-image-set(url(Images/icons_spritesheet.png) 1x, url(Images/icons_spritesheet_2x.png) 2x);
+    -webkit-mask-size: var(--spritesheet-size);
+    -webkit-mask-position: var(--spritesheet-position);
 }
 
-.spritesheet-largeicons:not(.icon-mask) {
-    background-image: -webkit-image-set(url(Images/toolbarButtonGlyphs.png) 1x, url(Images/toolbarButtonGlyphs_2x.png) 2x);
-    background-size: 352px 168px;
-}
-
-.spritesheet-largeicons.icon-mask {
-    -webkit-mask-image: -webkit-image-set(url(Images/toolbarButtonGlyphs.png) 1x, url(Images/toolbarButtonGlyphs_2x.png) 2x);
-    -webkit-mask-size: 352px 168px;
-}
-
-.spritesheet-resourceicons:not(.icon-mask) {
-    background-image: -webkit-image-set(url(Images/resourceGlyphs.png) 1x, url(Images/resourceGlyphs_2x.png) 2x);
-    background-size: 140px 20px;
-}
-
-.spritesheet-resourceicons.icon-mask {
-    -webkit-mask-image: -webkit-image-set(url(Images/resourceGlyphs.png) 1x, url(Images/resourceGlyphs_2x.png) 2x);
-    -webkit-mask-size: 140px 20px;
-}
-
-.force-white-icons [is=ui-icon].spritesheet-smallicons, [is=ui-icon].force-white-icons.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;
-    background-color: white;
-}
-
-.force-white-icons [is=ui-icon].spritesheet-largeicons, [is=ui-icon].force-white-icons.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;
-}
-
-.force-white-icons [is=ui-icon].spritesheet-resourceicons, [is=ui-icon].force-white-icons.spritesheet-resourceicons {
-    -webkit-mask-image: -webkit-image-set(url(Images/resourceGlyphs.png) 1x, url(Images/resourceGlyphs_2x.png) 2x);
-    -webkit-mask-size: 140px 20px;
-    background-image: unset;
-    background-size: unset;
-    background: unset;
-    background-color: white;
+.force-white-icons [is=ui-icon], [is=ui-icon].force-white-icons {
+    -webkit-mask-image: -webkit-image-set(url(Images/icons_spritesheet.png) 1x, url(Images/icons_spritesheet_2x.png) 2x);
+    -webkit-mask-size: var(--spritesheet-size);
+    -webkit-mask-position: var(--spritesheet-position);
+    background: white !important;
 }
 
 .glass-pane {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     overflow: hidden;
 }
 
 .glass-pane-content {
     display: flex;
 }