DevTools: [Persistence] introduce badged icons instead of checkmarks

third_party/WebKit/Source/devtools/front_end/ui/Icon.js

 // Copyright 2016 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.
 
 /**
  * @constructor
  * @extends {HTMLSpanElement}
  */
 UI.Icon = class extends HTMLSpanElement {
   constructor() {
@@ skipping 12 matching lines @@
 
     var icon = /** @type {!UI.Icon} */ (new UI.Icon._constructor());
     if (className)
       icon.className = className;
     if (iconType)
       icon.setIconType(iconType);
     return icon;
   }
 
   /**
+   * @param {!Array<!UI.Icon>} icons
+   * @return {!Element}
+   */
+  static combine(icons) {
+    var container = createElementWithClass('span', 'icon-stack');
+    for (var icon of icons)
+      container.appendChild(icon);
+    return container;
+  }
+
+  /**
    * @override
    */
   createdCallback() {
     /** @type {?UI.Icon.Descriptor} */
     this._descriptor = null;
     /** @type {string} */
     this._iconType = '';
   }
 
   /**
@@ skipping 58 matching lines @@
   'smallicon-orange-ball': {x: -160, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-thick-right-arrow': {x: -180, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-thick-left-arrow':
       {x: -180, y: 0, width: 10, height: 10, spritesheet: 'smallicons', transform: 'rotate(180deg)'},
   'smallicon-user-command': {x: 0, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-text-prompt': {x: -20, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-command-result': {x: -40, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-shadow': {x: -60, y: -20, width: 10, height: 10, spritesheet: 'smallicons', isMask: true},
   'smallicon-bezier': {x: -80, y: -20, width: 10, height: 10, spritesheet: 'smallicons', isMask: true},
   'smallicon-dropdown-arrow': {x: -18, y: -96, width: 12, height: 12, spritesheet: 'largeicons', isMask: true},
-  'smallicon-checkmark': {x: -100, y: -20, width: 10, height: 10, spritesheet: 'smallicons', isMask: true},
-  'smallicon-green-checkmark': {x: -120, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-triangle-right': {x: -4, y: -98, width: 10, height: 8, spritesheet: 'largeicons', isMask: true},
   'smallicon-triangle-bottom': {x: -20, y: -98, width: 10, height: 8, spritesheet: 'largeicons', isMask: true},
   'smallicon-arrow-in-circle': {x: -10, y: -127, width: 11, height: 11, spritesheet: 'largeicons', isMask: true},
   'smallicon-cross': {x: -177, y: -98, width: 10, height: 10, spritesheet: 'largeicons'},
   'smallicon-inline-breakpoint': {x: -140, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-inline-breakpoint-conditional': {x: -160, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
+  'smallicon-file': {x: -64, y: -24, width: 10, height: 14, spritesheet: 'largeicons'},
+  'smallicon-file-sync': {x: -74, y: -24, width: 12, height: 14, spritesheet: 'largeicons'},
+  'smallicon-badge-sync': {x: -84, y: -24, width: 12, height: 14, spritesheet: 'largeicons'},
 
   'largeicon-longclick-triangle': {x: -290, y: -46, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-menu': {x: -192, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-delete': {x: -128, y: -0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-node-search': {x: -320, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-add': {x: -224, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-clear': {x: -64, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-rotate-screen': {x: -192, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-phone': {x: -320, y: -96, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-block': {x: -32, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
@@ skipping 72 matching lines @@
   'largeicon-hide-bottom-sidebar': {
     x: -192,
     y: -72,
     width: 28,
     height: 24,
     spritesheet: 'largeicons',
     isMask: true,
     transform: 'translate(4px, 1px) rotate(-90deg)'
   },
   'largeicon-navigator-file': {x: -224, y: -72, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
+  'largeicon-navigator-file-synced': {x: -160, y: -24, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
+  'badge-navigator-file-synced': {x: -288, y: -72, width: 32, height: 24, spritesheet: 'largeicons'},
+  'badge-navigator-file-sync-error': {x: -320, y: -72, width: 32, height: 24, spritesheet: 'largeicons'},

[dgozman, 2016/12/21 02:44:40]

Remove.

   'largeicon-navigator-folder': {x: -64, y: -120, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-navigator-domain': {x: -160, y: -144, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-navigator-frame': {x: -256, y: -144, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-navigator-worker': {x: -320, y: -144, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-navigator-snippet': {x: -224, y: -96, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
 };