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

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

Index: third_party/WebKit/Source/devtools/front_end/ui/Icon.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/Icon.js b/third_party/WebKit/Source/devtools/front_end/ui/Icon.js
index 3cd1868be2e953247d5bba4a2ed6cd3998dc9a60..43a241b8a0e04b285dc61663a504026a81a6baac 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/Icon.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/Icon.js
@@ -44,12 +44,12 @@ UI.Icon = class extends HTMLSpanElement {
    */
   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;
     }
@@ -57,30 +57,25 @@ UI.Icon = class extends HTMLSpanElement {
     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}
-   */
-  _spritesheetClass() {
-    return 'spritesheet-' + this._descriptor.spritesheet + (this._descriptor.isMask ? '-mask' : '');
-  }
-
-  /**
-   * @return {string}
+   * @param {boolean} value
    */
-  _propertyName() {
-    return this._descriptor.isMask ? '-webkit-mask-position' : 'background-position';
+  _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);
   }
 
   /**