DevTools: migrate ResourcesPanel icons over to UI.Icon

third_party/WebKit/Source/devtools/front_end/resources/ResourcesPanel.js

 /*
  * Copyright (C) 2007, 2008, 2010 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  * Copyright (C) 2013 Samsung Electronics. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 35 matching lines @@
 
     this._applicationTreeElement = this._addSidebarSection(Common.UIString('Application'));
     this._manifestTreeElement = new Resources.AppManifestTreeElement(this);
     this._applicationTreeElement.appendChild(this._manifestTreeElement);
     this.serviceWorkersTreeElement = new Resources.ServiceWorkersTreeElement(this);
     this._applicationTreeElement.appendChild(this.serviceWorkersTreeElement);
     var clearStorageTreeElement = new Resources.ClearStorageTreeElement(this);
     this._applicationTreeElement.appendChild(clearStorageTreeElement);
 
     var storageTreeElement = this._addSidebarSection(Common.UIString('Storage'));
-    this.localStorageListTreeElement = new Resources.StorageCategoryTreeElement(
-        this, Common.UIString('Local Storage'), 'LocalStorage', ['table-tree-item', 'resource-tree-item']);

[lushnikov, 2017/01/30 12:50:36]

note: the StorageCategoryTreeElement doesn't accept array and a boolean as a
parameter any more

+    this.localStorageListTreeElement =
+        new Resources.StorageCategoryTreeElement(this, Common.UIString('Local Storage'), 'LocalStorage');
+    var localStorageIcon = UI.Icon.create('resourceicon-table', 'resource-tree-item');
+    this.localStorageListTreeElement.setLeadingIcons([localStorageIcon]);
+
     storageTreeElement.appendChild(this.localStorageListTreeElement);
-    this.sessionStorageListTreeElement = new Resources.StorageCategoryTreeElement(
-        this, Common.UIString('Session Storage'), 'SessionStorage', ['table-tree-item', 'resource-tree-item']);
+    this.sessionStorageListTreeElement =
+        new Resources.StorageCategoryTreeElement(this, Common.UIString('Session Storage'), 'SessionStorage');
+    var sessionStorageIcon = UI.Icon.create('resourceicon-table', 'resource-tree-item');
+    this.sessionStorageListTreeElement.setLeadingIcons([sessionStorageIcon]);
+
     storageTreeElement.appendChild(this.sessionStorageListTreeElement);
     this.indexedDBListTreeElement = new Resources.IndexedDBTreeElement(this);
     storageTreeElement.appendChild(this.indexedDBListTreeElement);
-    this.databasesListTreeElement = new Resources.StorageCategoryTreeElement(
-        this, Common.UIString('Web SQL'), 'Databases', ['database-tree-item', 'resource-tree-item']);
+    this.databasesListTreeElement =
+        new Resources.StorageCategoryTreeElement(this, Common.UIString('Web SQL'), 'Databases');
+    var databaseIcon = UI.Icon.create('resourceicon-database', 'resource-tree-item');
+    this.databasesListTreeElement.setLeadingIcons([databaseIcon]);
+
     storageTreeElement.appendChild(this.databasesListTreeElement);
-    this.cookieListTreeElement = new Resources.StorageCategoryTreeElement(
-        this, Common.UIString('Cookies'), 'Cookies', ['cookie-tree-item', 'resource-tree-item']);
+    this.cookieListTreeElement = new Resources.StorageCategoryTreeElement(this, Common.UIString('Cookies'), 'Cookies');
+    var cookieIcon = UI.Icon.create('resourceicon-cookie', 'resource-tree-item');
+    this.cookieListTreeElement.setLeadingIcons([cookieIcon]);
     storageTreeElement.appendChild(this.cookieListTreeElement);
 
     var cacheTreeElement = this._addSidebarSection(Common.UIString('Cache'));
     this.cacheStorageListTreeElement = new Resources.ServiceWorkerCacheTreeElement(this);
     cacheTreeElement.appendChild(this.cacheStorageListTreeElement);
-    this.applicationCacheListTreeElement = new Resources.StorageCategoryTreeElement(
-        this, Common.UIString('Application Cache'), 'ApplicationCache',
-        ['appcache-tree-item', 'table-tree-item', 'resource-tree-item']);
+    this.applicationCacheListTreeElement =
+        new Resources.StorageCategoryTreeElement(this, Common.UIString('Application Cache'), 'ApplicationCache');
+    var applicationCacheIcon = UI.Icon.create('resourceicon-table', 'resource-tree-item');
+    this.applicationCacheListTreeElement.setLeadingIcons([applicationCacheIcon]);
+
     cacheTreeElement.appendChild(this.applicationCacheListTreeElement);
 
     this.resourcesListTreeElement = this._addSidebarSection(Common.UIString('Frames'));
 
     var mainContainer = new UI.VBox();
     this._storageViewToolbar = new UI.Toolbar('resources-toolbar', mainContainer.element);
     this.storageViews = mainContainer.element.createChild('div', 'vbox flex-auto');
     this.splitWidget().setMainWidget(mainContainer);
 
     /** @type {!Map.<!Resources.Database, !Object.<string, !Resources.DatabaseTableView>>} */
@@ skipping 743 matching lines @@
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.BaseStorageTreeElement = class extends UI.TreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    * @param {string} title
-   * @param {?Array.<string>=} iconClasses
-   * @param {boolean=} expandable
-   * @param {boolean=} noIcon
+   * @param {boolean} expandable
    */
-  constructor(storagePanel, title, iconClasses, expandable, noIcon) {
+  constructor(storagePanel, title, expandable) {
     super(title, expandable);
     this._storagePanel = storagePanel;
-    for (var i = 0; iconClasses && i < iconClasses.length; ++i)
-      this.listItemElement.classList.add(iconClasses[i]);
-
-    this._iconClasses = iconClasses;
-    if (!noIcon)
-      this.createIcon();
   }
 
   /**
    * @override
    * @return {boolean}
    */
   onselect(selectedByUser) {
     if (!selectedByUser)
       return false;
     var itemURL = this.itemURL;
     if (itemURL)
       this._storagePanel._resourcesLastSelectedItemSetting.set(itemURL);
     return false;
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.StorageCategoryTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    * @param {string} categoryName
    * @param {string} settingsKey
-   * @param {?Array.<string>=} iconClasses
-   * @param {boolean=} noIcon
    */
-  constructor(storagePanel, categoryName, settingsKey, iconClasses, noIcon) {
-    super(storagePanel, categoryName, iconClasses, false, noIcon);
+  constructor(storagePanel, categoryName, settingsKey) {
+    super(storagePanel, categoryName, false);
     this._expandedSetting =
         Common.settings.createSetting('resources' + settingsKey + 'Expanded', settingsKey === 'Frames');
     this._categoryName = categoryName;
   }
 
   /**
    * @return {!SDK.Target}
    */
   target() {
     return this._storagePanel._target;
@@ skipping 39 matching lines @@
 
 /**
  * @unrestricted
  */
 Resources.FrameTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    * @param {!SDK.ResourceTreeFrame} frame
    */
   constructor(storagePanel, frame) {
-    super(storagePanel, '', ['navigator-tree-item', 'navigator-frame-tree-item']);
+    super(storagePanel, '', false);

[lushnikov, 2017/01/30 12:50:36]

started explicitly passing the "expandable" argument of the constructor

     this._frame = frame;
     this.frameNavigated(frame);
+
+    var icon = UI.Icon.create('largeicon-navigator-frame', 'navigator-tree-item');
+    icon.classList.add('navigator-frame-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   frameNavigated(frame) {
     this.removeChildren();
     this._frameId = frame.id;
     this.title = frame.displayName();
     this._categoryElements = {};
     this._treeElementForResource = {};
 
     this._storagePanel.addCookieDocument(frame);
@@ skipping 30 matching lines @@
 
   /**
    * @param {!SDK.Resource} resource
    */
   appendResource(resource) {
     var resourceType = resource.resourceType();
     var categoryName = resourceType.name();
     var categoryElement = resourceType === Common.resourceTypes.Document ? this : this._categoryElements[categoryName];
     if (!categoryElement) {
       categoryElement = new Resources.StorageCategoryTreeElement(
-          this._storagePanel, resource.resourceType().category().title, categoryName, null, true);

[lushnikov, 2017/01/30 12:50:36]

this was the only usage of the "noIcon" argument

+          this._storagePanel, resource.resourceType().category().title, categoryName);
       this._categoryElements[resourceType.name()] = categoryElement;
       this._insertInPresentationOrder(this, categoryElement);
     }
     var resourceTreeElement = new Resources.FrameResourceTreeElement(this._storagePanel, resource);
     this._insertInPresentationOrder(categoryElement, resourceTreeElement);
     this._treeElementForResource[resource.url] = resourceTreeElement;
   }
 
   /**
    * @param {string} url
@@ skipping 47 matching lines @@
 
 /**
  * @unrestricted
  */
 Resources.FrameResourceTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    * @param {!SDK.Resource} resource
    */
   constructor(storagePanel, resource) {
-    super(storagePanel, resource.displayName, [
-      'navigator-tree-item', 'navigator-file-tree-item', 'navigator-' + resource.resourceType().name() + '-tree-item'
-    ]);
+    super(storagePanel, resource.displayName, false);
     /** @type {!SDK.Resource} */
     this._resource = resource;
     this.tooltip = resource.url;
     this._resource[Resources.FrameResourceTreeElement._symbol] = this;
+
+    var icon = UI.Icon.create('largeicon-navigator-file', 'navigator-tree-item');
+    icon.classList.add('navigator-file-tree-item');
+    icon.classList.add('navigator-' + resource.resourceType().name() + '-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   get itemURL() {
     return this._resource.url;
   }
 
   /**
    * @override
    * @return {boolean}
    */
@@ skipping 55 matching lines @@
 
 /**
  * @unrestricted
  */
 Resources.DatabaseTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    * @param {!Resources.Database} database
    */
   constructor(storagePanel, database) {
-    super(storagePanel, database.name, ['database-tree-item', 'resource-tree-item'], true);
+    super(storagePanel, database.name, true);
     this._database = database;
+
+    var icon = UI.Icon.create('resourceicon-database', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   get itemURL() {
     return 'database://' + encodeURI(this._database.name);
   }
 
   /**
    * @override
    * @return {boolean}
    */
@@ skipping 24 matching lines @@
     }
     this._database.getTableNames(tableNamesCallback.bind(this));
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.DatabaseTableTreeElement = class extends Resources.BaseStorageTreeElement {
   constructor(storagePanel, database, tableName) {
-    super(storagePanel, tableName, ['table-tree-item', 'resource-tree-item']);
+    super(storagePanel, tableName, false);
     this._database = database;
     this._tableName = tableName;
+    var icon = UI.Icon.create('resourceicon-table', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   get itemURL() {
     return 'database://' + encodeURI(this._database.name) + '/' + encodeURI(this._tableName);
   }
 
   /**
    * @override
    * @return {boolean}
    */
   onselect(selectedByUser) {
     super.onselect(selectedByUser);
     this._storagePanel._showDatabase(this._database, this._tableName);
     return false;
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.ServiceWorkerCacheTreeElement = class extends Resources.StorageCategoryTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    */
   constructor(storagePanel) {
-    super(storagePanel, Common.UIString('Cache Storage'), 'CacheStorage', ['database-tree-item', 'resource-tree-item']);
+    super(storagePanel, Common.UIString('Cache Storage'), 'CacheStorage');
+    var icon = UI.Icon.create('resourceicon-database', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   _initialize() {
     /** @type {!Array.<!Resources.SWCacheTreeElement>} */
     this._swCacheTreeElements = [];
     var target = this._storagePanel._target;
     var model = target && SDK.ServiceWorkerCacheModel.fromTarget(target);
     if (model) {
       for (var cache of model.caches())
         this._addCache(model, cache);
@@ skipping 85 matching lines @@
 /**
  * @unrestricted
  */
 Resources.SWCacheTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    * @param {!SDK.ServiceWorkerCacheModel} model
    * @param {!SDK.ServiceWorkerCacheModel.Cache} cache
    */
   constructor(storagePanel, model, cache) {
-    super(storagePanel, cache.cacheName + ' - ' + cache.securityOrigin, ['table-tree-item', 'resource-tree-item']);
+    super(storagePanel, cache.cacheName + ' - ' + cache.securityOrigin, false);
     this._model = model;
     this._cache = cache;
+    var icon = UI.Icon.create('resourceicon-table', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   get itemURL() {
     // I don't think this will work at all.
     return 'cache://' + this._cache.cacheId;
   }
 
   /**
    * @override
    */
@@ skipping 41 matching lines @@
 };
 
 /**
  * @unrestricted
  */
 Resources.ServiceWorkersTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    */
   constructor(storagePanel) {
-    super(storagePanel, Common.UIString('Service Workers'), ['service-worker-tree-item', 'resource-tree-item'], false);
+    super(storagePanel, Common.UIString('Service Workers'), false);
+    var icon = UI.Icon.create('resourceicon-service-worker', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   /**
    * @return {string}
    */
   get itemURL() {
     return 'service-workers://';
   }
 
   /**
@@ skipping 10 matching lines @@
 };
 
 /**
  * @unrestricted
  */
 Resources.AppManifestTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    */
   constructor(storagePanel) {
-    super(storagePanel, Common.UIString('Manifest'), ['manifest-tree-item', 'resource-tree-item'], false, false);
+    super(storagePanel, Common.UIString('Manifest'), false);
+    var icon = UI.Icon.create('resourceicon-manifest', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   /**
    * @return {string}
    */
   get itemURL() {
     return 'manifest://';
   }
 
   /**
@@ skipping 10 matching lines @@
 };
 
 /**
  * @unrestricted
  */
 Resources.ClearStorageTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    */
   constructor(storagePanel) {
-    super(
-        storagePanel, Common.UIString('Clear storage'), ['clear-storage-tree-item', 'resource-tree-item'], false,
-        false);
+    super(storagePanel, Common.UIString('Clear storage'), false);
+    var icon = UI.Icon.create('resourceicon-clear-storage', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   /**
    * @return {string}
    */
   get itemURL() {
     return 'clear-storage://';
   }
 
   /**
@@ skipping 10 matching lines @@
 };
 
 /**
  * @unrestricted
  */
 Resources.IndexedDBTreeElement = class extends Resources.StorageCategoryTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    */
   constructor(storagePanel) {
-    super(storagePanel, Common.UIString('IndexedDB'), 'IndexedDB', ['database-tree-item', 'resource-tree-item']);
+    super(storagePanel, Common.UIString('IndexedDB'), 'IndexedDB');
+    var icon = UI.Icon.create('resourceicon-database', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   _initialize() {
     SDK.targetManager.addModelListener(
         Resources.IndexedDBModel, Resources.IndexedDBModel.Events.DatabaseAdded, this._indexedDBAdded, this);
     SDK.targetManager.addModelListener(
         Resources.IndexedDBModel, Resources.IndexedDBModel.Events.DatabaseRemoved, this._indexedDBRemoved, this);
     SDK.targetManager.addModelListener(
         Resources.IndexedDBModel, Resources.IndexedDBModel.Events.DatabaseLoaded, this._indexedDBLoaded, this);
     /** @type {!Array.<!Resources.IDBDatabaseTreeElement>} */
@@ skipping 101 matching lines @@
 /**
  * @unrestricted
  */
 Resources.IDBDatabaseTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    * @param {!Resources.IndexedDBModel} model
    * @param {!Resources.IndexedDBModel.DatabaseId} databaseId
    */
   constructor(storagePanel, model, databaseId) {
-    super(
-        storagePanel, databaseId.name + ' - ' + databaseId.securityOrigin,
-        ['database-tree-item', 'resource-tree-item']);
+    super(storagePanel, databaseId.name + ' - ' + databaseId.securityOrigin, false);
     this._model = model;
     this._databaseId = databaseId;
     this._idbObjectStoreTreeElements = {};
+    var icon = UI.Icon.create('resourceicon-database', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   get itemURL() {
     return 'indexedDB://' + this._databaseId.securityOrigin + '/' + this._databaseId.name;
   }
 
   /**
    * @override
    */
   onattach() {
@@ skipping 76 matching lines @@
  * @unrestricted
  */
 Resources.IDBObjectStoreTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    * @param {!Resources.IndexedDBModel} model
    * @param {!Resources.IndexedDBModel.DatabaseId} databaseId
    * @param {!Resources.IndexedDBModel.ObjectStore} objectStore
    */
   constructor(storagePanel, model, databaseId, objectStore) {
-    super(storagePanel, objectStore.name, ['table-tree-item', 'resource-tree-item']);
+    super(storagePanel, objectStore.name, false);
     this._model = model;
     this._databaseId = databaseId;
     this._idbIndexTreeElements = {};
+    var icon = UI.Icon.create('resourceicon-table', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   get itemURL() {
     return 'indexedDB://' + this._databaseId.securityOrigin + '/' + this._databaseId.name + '/' +
         this._objectStore.name;
   }
 
   /**
    * @override
    */
@@ skipping 100 matching lines @@
  */
 Resources.IDBIndexTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    * @param {!Resources.IndexedDBModel} model
    * @param {!Resources.IndexedDBModel.DatabaseId} databaseId
    * @param {!Resources.IndexedDBModel.ObjectStore} objectStore
    * @param {!Resources.IndexedDBModel.Index} index
    */
   constructor(storagePanel, model, databaseId, objectStore, index) {
-    super(storagePanel, index.name, ['index-tree-item', 'resource-tree-item']);
+    super(storagePanel, index.name, false);
     this._model = model;
     this._databaseId = databaseId;
     this._objectStore = objectStore;
     this._index = index;
   }
 
   get itemURL() {
     return 'indexedDB://' + this._databaseId.securityOrigin + '/' + this._databaseId.name + '/' +
         this._objectStore.name + '/' + this._index.name;
   }
@@ skipping 38 matching lines @@
     if (this._view)
       this._view.clear();
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.DOMStorageTreeElement = class extends Resources.BaseStorageTreeElement {
   constructor(storagePanel, domStorage) {
-    super(
-        storagePanel, domStorage.securityOrigin ? domStorage.securityOrigin : Common.UIString('Local Files'),
-        ['table-tree-item', 'resource-tree-item']);
+    super(storagePanel, domStorage.securityOrigin ? domStorage.securityOrigin : Common.UIString('Local Files'), false);
     this._domStorage = domStorage;
+    var icon = UI.Icon.create('resourceicon-table', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   get itemURL() {
     return 'storage://' + this._domStorage.securityOrigin + '/' +
         (this._domStorage.isLocalStorage ? 'local' : 'session');
   }
 
   /**
    * @override
    * @return {boolean}
@@ skipping 17 matching lines @@
     contextMenu.appendItem(Common.UIString('Clear'), () => this._domStorage.clear());
     contextMenu.show();
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.CookieTreeElement = class extends Resources.BaseStorageTreeElement {
   constructor(storagePanel, frame, cookieDomain) {
-    super(
-        storagePanel, cookieDomain ? cookieDomain : Common.UIString('Local Files'),
-        ['cookie-tree-item', 'resource-tree-item']);
+    super(storagePanel, cookieDomain ? cookieDomain : Common.UIString('Local Files'), false);
     this._frame = frame;
     this._cookieDomain = cookieDomain;
+    var icon = UI.Icon.create('resourceicon-cookie', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   get itemURL() {
     return 'cookies://' + this._cookieDomain;
   }
 
   /**
    * @override
    */
   onattach() {
@@ skipping 27 matching lines @@
     return false;
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.ApplicationCacheManifestTreeElement = class extends Resources.BaseStorageTreeElement {
   constructor(storagePanel, manifestURL) {
     var title = new Common.ParsedURL(manifestURL).displayName;
-    super(storagePanel, title, ['application-cache-storage-tree-item']);
+    super(storagePanel, title, false);
     this.tooltip = manifestURL;
     this._manifestURL = manifestURL;
   }
 
   get itemURL() {
     return 'appcache://' + this._manifestURL;
   }
 
   get manifestURL() {
     return this._manifestURL;
@@ skipping 13 matching lines @@
 /**
  * @unrestricted
  */
 Resources.ApplicationCacheFrameTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    * @param {!Protocol.Page.FrameId} frameId
    * @param {string} manifestURL
    */
   constructor(storagePanel, frameId, manifestURL) {
-    super(storagePanel, '', ['navigator-tree-item', 'navigator-folder-tree-item']);
+    super(storagePanel, '', false);
     this._frameId = frameId;
     this._manifestURL = manifestURL;
     this._refreshTitles();
+
+    var icon = UI.Icon.create('largeicon-navigator-folder', 'navigator-tree-item');
+    icon.classList.add('navigator-folder-tree-item');
+    this.setLeadingIcons([icon]);
   }
 
   get itemURL() {
     return 'appcache://' + this._manifestURL + '/' + encodeURI(this.titleAsText());
   }
 
   get frameId() {
     return this._frameId;
   }
 
@@ skipping 31 matching lines @@
 
     this.element.classList.add('storage-view');
     this._emptyWidget = new UI.EmptyWidget('');
     this._emptyWidget.show(this.element);
   }
 
   setText(text) {
     this._emptyWidget.text = text;
   }
 };