DevTools: [SuggestBox] migrate suggestbox icons onto UI.Icon

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 26 matching lines @@
     this._descriptor = null;
     /** @type {string} */
     this._iconType = '';
   }
 
   /**
    * @param {string} iconType
    */
   setIconType(iconType) {
     if (this._descriptor) {
-      this.style.removeProperty(this._propertyName());
+      this.style.removeProperty('-webkit-mask-position');
+      this.style.removeProperty('background-position');
       this.style.removeProperty('width');
       this.style.removeProperty('height');
       this.style.removeProperty('transform');
-      this.classList.remove(this._spritesheetClass());
-      this.classList.remove(this._iconType);
+      this._toggleClasses(false);
       this._iconType = '';
       this._descriptor = null;
     }
     var descriptor = UI.Icon.Descriptors[iconType] || null;
     if (descriptor) {
       this._iconType = iconType;
       this._descriptor = descriptor;
-      this.style.setProperty(this._propertyName(), this._propertyValue());
+      this.style.setProperty('-webkit-mask-position', this._propertyValue());
+      this.style.setProperty('background-position', this._propertyValue());
       this.style.setProperty('width', this._descriptor.width + 'px');
       this.style.setProperty('height', this._descriptor.height + 'px');
       if (this._descriptor.transform)
         this.style.setProperty('transform', this._descriptor.transform);
-      this.classList.add(this._spritesheetClass());
-      this.classList.add(this._iconType);
+      this._toggleClasses(true);
     } else if (iconType) {
       throw new Error(`ERROR: failed to find icon descriptor for type: ${iconType}`);
     }
   }
 
   /**
-   * @return {string}
+   * @param {boolean} value
    */
-  _spritesheetClass() {
-    return 'spritesheet-' + this._descriptor.spritesheet + (this._descriptor.isMask ? '-mask' : '');
+  _toggleClasses(value) {
+    this.classList.toggle('spritesheet-' + this._descriptor.spritesheet, value);
+    this.classList.toggle(this._iconType, value);
+    this.classList.toggle('icon-mask', value && this._descriptor.isMask);

[dgozman, 2016/11/30 17:52:13]

!!this._descriptor.isMask

[lushnikov, 2016/11/30 20:29:17]

Done.

   }
 
   /**
-   * @return {string}
-   */
-  _propertyName() {
-    return this._descriptor.isMask ? '-webkit-mask-position' : 'background-position';
-  }
-
-  /**
    * @return {string}
    */
   _propertyValue() {
     return `${this._descriptor.x}px ${this._descriptor.y}px`;
   }
 };
 
 /** @typedef {{x: number, y: number, width: number, height: number, spritesheet: string, isMask: (boolean|undefined)}} */
 UI.Icon.Descriptor;
 
@@ skipping 102 matching lines @@
   'largeicon-hide-bottom-sidebar': {
     x: -192,
     y: -72,
     width: 28,
     height: 24,
     spritesheet: 'largeicons',
     isMask: true,
     transform: 'translate(4px, 1px) rotate(-90deg)'
   },
 };