[DevTools] Separate old Application tab code

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

 /*
  * Copyright (C) 2007, 2008, 2010 Apple Inc.  All rights reserved.

[dgozman, 2017/03/17 17:50:11]

One of the files should have new copyright.

[eostroukhov, 2017/03/17 19:01:12]

ApplicationPanelSidebar retains the code so it will have the older notice.

  * 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
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 11 matching lines @@
  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 /**
  * @implements {SDK.TargetManager.Observer}
  * @unrestricted
  */
-Resources.ResourcesPanel = class extends UI.PanelWithSidebar {
-  constructor() {
-    super('resources');
-    this.registerRequiredCSS('resources/resourcesPanel.css');
-
+Resources.ApplicationPanelSidebar = class extends Common.Object {
+  /**
+   * @param {!Element} sidebarElement
+   * @param {!UI.SplitWidget} splitWidget
+   */
+  constructor(sidebarElement, splitWidget) {
+    super();
     this._resourcesLastSelectedItemSetting = Common.settings.createSetting('resourcesLastSelectedItem', {});
 
     this._sidebarTree = new UI.TreeOutlineInShadow();
     this._sidebarTree.element.classList.add('resources-sidebar');
     this._sidebarTree.registerRequiredCSS('resources/resourcesSidebar.css');
     this._sidebarTree.element.classList.add('filter-all');
-    this.panelSidebarElement().appendChild(this._sidebarTree.element);
+    sidebarElement.appendChild(this._sidebarTree.element);

[dgozman, 2017/03/17 17:50:11]

Instead of passing sidebarElement, let's have this.element on
ApplicationPanelSidebar, which panel will put into the right place.

[eostroukhov, 2017/03/17 19:01:12]

Done.

 
     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'));
@@ skipping 30 matching lines @@
     var applicationCacheIcon = UI.Icon.create('mediumicon-table', 'resource-tree-item');
     this.applicationCacheListTreeElement.setLeadingIcons([applicationCacheIcon]);
 
     cacheTreeElement.appendChild(this.applicationCacheListTreeElement);
 
     this._resourcesSection = new Resources.ResourcesSection(this, this._addSidebarSection(Common.UIString('Frames')));
 
     var mainContainer = new UI.VBox();
     this.storageViews = mainContainer.element.createChild('div', 'vbox flex-auto');
     this._storageViewToolbar = new UI.Toolbar('resources-toolbar', mainContainer.element);
-    this.splitWidget().setMainWidget(mainContainer);
+    splitWidget.setMainWidget(mainContainer);

[dgozman, 2017/03/17 17:50:11]

Same for splitWidget.

[eostroukhov, 2017/03/17 19:01:12]

Done.

 
     /** @type {!Map.<!Resources.Database, !Object.<string, !Resources.DatabaseTableView>>} */
     this._databaseTableViews = new Map();
     /** @type {!Map.<!Resources.Database, !Resources.DatabaseQueryView>} */
     this._databaseQueryViews = new Map();
     /** @type {!Map.<!Resources.Database, !Resources.DatabaseTreeElement>} */
     this._databaseTreeElements = new Map();
     /** @type {!Map.<!Resources.DOMStorage, !Resources.DOMStorageTreeElement>} */
     this._domStorageTreeElements = new Map();
     /** @type {!Object.<string, boolean>} */
     this._domains = {};
 
     /** @type {?Resources.DOMStorageItemsView} */
     this._domStorageView = null;
     /** @type {?Resources.CookieItemsView} */
     this._cookieView = null;
 
-    this.panelSidebarElement().addEventListener('mousemove', this._onmousemove.bind(this), false);
-    this.panelSidebarElement().addEventListener('mouseleave', this._onmouseleave.bind(this), false);
+    sidebarElement.addEventListener('mousemove', this._onmousemove.bind(this), false);
+    sidebarElement.addEventListener('mouseleave', this._onmouseleave.bind(this), false);
 
     SDK.targetManager.observeTargets(this);
     SDK.targetManager.addModelListener(
         SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this._frameNavigated, this);
   }
 
   /**
-   * @return {!Resources.ResourcesPanel}
+   * @return {!Resources.ApplicationPanelSidebar}
    */
   static _instance() {

[dgozman, 2017/03/17 17:50:11]

Who needs this?

[eostroukhov, 2017/03/17 19:01:12]

Done.

-    return /** @type {!Resources.ResourcesPanel} */ (self.runtime.sharedInstance(Resources.ResourcesPanel));
+    return /** @type {!Resources.ApplicationPanelSidebar} */ (
+        self.runtime.sharedInstance(Resources.ApplicationPanelSidebar));

[dgozman, 2017/03/17 17:50:11]

Note this requires a declaration in module.json.

[eostroukhov, 2017/03/17 19:01:12]

Code was removed

   }
 
   /**
    * @param {string} title
    * @return {!UI.TreeElement}
    */
   _addSidebarSection(title) {
     var treeElement = new UI.TreeElement(title, true);
     treeElement.listItemElement.classList.add('storage-group-list-item');
     treeElement.setCollapsible(false);
@@ skipping 41 matching lines @@
       resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.CachedResourcesLoaded, this._initialize, this);
       resourceTreeModel.removeEventListener(
           SDK.ResourceTreeModel.Events.WillLoadCachedResources, this._resetWithFrames, this);
     }
     this._databaseModel.off(Resources.DatabaseModel.DatabaseAddedEvent, this._databaseAdded, this);
     this._databaseModel.off(Resources.DatabaseModel.DatabasesRemovedEvent, this._resetWebSQL, this);
 
     this._resetWithFrames();
   }
 
-  /**
-   * @override
-   */
   focus() {

[dgozman, 2017/03/17 17:50:11]

Who is calling this method now? Should we make this a Widget?

[eostroukhov, 2017/03/17 19:01:12]

Panel will now directly set focus on a sidebar tree.

     this._sidebarTree.focus();
   }
 
   _initialize() {
     for (var frame of SDK.ResourceTreeModel.frames())
       this._addCookieDocument(frame);
     this._databaseModel.enable();
 
     var indexedDBModel = Resources.IndexedDBModel.fromTarget(this._target);
     if (indexedDBModel)
@@ skipping 196 matching lines @@
       this._showDatabase(database);
       this._databaseTreeElements.get(database).select();
     }
   }
 
   /**
    * @param {!Resources.DOMStorage} domStorage
    */
   selectDOMStorage(domStorage) {
     if (domStorage) {
-      this._showDOMStorage(domStorage);
+      this.showDOMStorage(domStorage);
       this._domStorageTreeElements.get(domStorage).select();
     }
   }
 
   /**
    * @param {!SDK.Resource} resource
    * @param {number=} line
    * @param {number=} column
    * @return {boolean}
    */
@@ skipping 49 matching lines @@
         view.addEventListener(Resources.DatabaseQueryView.Events.SchemaUpdated, this._updateDatabaseTables, this);
       }
     }
 
     this._innerShowView(view);
   }
 
   /**
    * @param {!Resources.DOMStorage} domStorage
    */
-  _showDOMStorage(domStorage) {
+  showDOMStorage(domStorage) {
     if (!domStorage)
       return;
 
     if (!this._domStorageView)
       this._domStorageView = new Resources.DOMStorageItemsView(domStorage);
     else
       this._domStorageView.setStorage(domStorage);
     this._innerShowView(this._domStorageView);
   }
 
@@ skipping 219 matching lines @@
 
   _onmouseleave(event) {
     if (this._previousHoveredElement) {
       this._previousHoveredElement.hovered = false;
       delete this._previousHoveredElement;
     }
   }
 };
 
 /**
- * @implements {Common.Revealer}
- * @unrestricted
- */
-Resources.ResourcesPanel.ResourceRevealer = class {
-  /**
-   * @override
-   * @param {!Object} resource
-   * @return {!Promise}
-   */
-  reveal(resource) {
-    if (!(resource instanceof SDK.Resource))
-      return Promise.reject(new Error('Internal error: not a resource'));
-    var panel = Resources.ResourcesPanel._instance();
-    return UI.viewManager.showView('resources').then(panel.showResource.bind(panel, resource));
-  }
-};
-
-/**
  * @unrestricted
  */
 Resources.BaseStorageTreeElement = class extends UI.TreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} storagePanel
    * @param {string} title
    * @param {boolean} expandable
    */
   constructor(storagePanel, title, expandable) {
     super(title, expandable);
     this._storagePanel = storagePanel;
   }
 
   /**
    * @override
@@ skipping 19 matching lines @@
     }
     this._storagePanel._innerShowView(view);
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.StorageCategoryTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} storagePanel
    * @param {string} categoryName
    * @param {string} settingsKey
    */
   constructor(storagePanel, categoryName, settingsKey) {
     super(storagePanel, categoryName, false);
     this._expandedSetting =
         Common.settings.createSetting('resources' + settingsKey + 'Expanded', settingsKey === 'Frames');
     this._categoryName = categoryName;
   }
 
@@ skipping 40 matching lines @@
   oncollapse() {
     this._expandedSetting.set(false);
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.DatabaseTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} storagePanel
    * @param {!Resources.Database} database
    */
   constructor(storagePanel, database) {
     super(storagePanel, database.name, true);
     this._database = database;
 
     var icon = UI.Icon.create('mediumicon-database', 'resource-tree-item');
     this.setLeadingIcons([icon]);
   }
 
@@ skipping 59 matching lines @@
     this._storagePanel._showDatabase(this._database, this._tableName);
     return false;
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.ServiceWorkerCacheTreeElement = class extends Resources.StorageCategoryTreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} storagePanel
    */
   constructor(storagePanel) {
     super(storagePanel, Common.UIString('Cache Storage'), 'CacheStorage');
     var icon = UI.Icon.create('mediumicon-database', 'resource-tree-item');
     this.setLeadingIcons([icon]);
   }
 
   _initialize() {
     /** @type {!Array.<!Resources.SWCacheTreeElement>} */
     this._swCacheTreeElements = [];
@@ skipping 85 matching lines @@
       return this._swCacheTreeElements[i];
     return null;
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.SWCacheTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} storagePanel
    * @param {!SDK.ServiceWorkerCacheModel} model
    * @param {!SDK.ServiceWorkerCacheModel.Cache} cache
    */
   constructor(storagePanel, model, cache) {
     super(storagePanel, cache.cacheName + ' - ' + cache.securityOrigin, false);
     this._model = model;
     this._cache = cache;
     var icon = UI.Icon.create('mediumicon-table', 'resource-tree-item');
     this.setLeadingIcons([icon]);
   }
@@ skipping 47 matching lines @@
     if (this._view)
       this._view.clear();
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.ServiceWorkersTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} storagePanel
    */
   constructor(storagePanel) {
     super(storagePanel, Common.UIString('Service Workers'), false);
     var icon = UI.Icon.create('mediumicon-service-worker', 'resource-tree-item');
     this.setLeadingIcons([icon]);
   }
 
   /**
    * @return {string}
    */
@@ skipping 12 matching lines @@
     this.showView(this._view);
     return false;
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.AppManifestTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} storagePanel
    */
   constructor(storagePanel) {
     super(storagePanel, Common.UIString('Manifest'), false);
     var icon = UI.Icon.create('mediumicon-manifest', 'resource-tree-item');
     this.setLeadingIcons([icon]);
   }
 
   /**
    * @return {string}
    */
@@ skipping 12 matching lines @@
     this.showView(this._view);
     return false;
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.ClearStorageTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} storagePanel
    */
   constructor(storagePanel) {
     super(storagePanel, Common.UIString('Clear storage'), false);
     var icon = UI.Icon.create('mediumicon-clear-storage', 'resource-tree-item');
     this.setLeadingIcons([icon]);
   }
 
   /**
    * @return {string}
    */
   get itemURL() {
     return 'clear-storage://';
   }
 
   /**
    * @override
    * @return {boolean}
    */
   onselect(selectedByUser) {
     super.onselect(selectedByUser);
     if (!this._view)
-      this._view = new Resources.ClearStorageView(this._storagePanel);
+      this._view = new Resources.ClearStorageView();
     this.showView(this._view);
     return false;
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.IndexedDBTreeElement = class extends Resources.StorageCategoryTreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} storagePanel
    */
   constructor(storagePanel) {
     super(storagePanel, Common.UIString('IndexedDB'), 'IndexedDB');
     var icon = UI.Icon.create('mediumicon-database', 'resource-tree-item');
     this.setLeadingIcons([icon]);
   }
 
   _initialize() {
     SDK.targetManager.addModelListener(
         Resources.IndexedDBModel, Resources.IndexedDBModel.Events.DatabaseAdded, this._indexedDBAdded, this);
@@ skipping 101 matching lines @@
       return this._idbDatabaseTreeElements[i];
     return null;
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.IDBDatabaseTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} storagePanel
    * @param {!Resources.IndexedDBModel} model
    * @param {!Resources.IndexedDBModel.DatabaseId} databaseId
    */
   constructor(storagePanel, model, databaseId) {
     super(storagePanel, databaseId.name + ' - ' + databaseId.securityOrigin, false);
     this._model = model;
     this._databaseId = databaseId;
     this._idbObjectStoreTreeElements = {};
     var icon = UI.Icon.create('mediumicon-database', 'resource-tree-item');
     this.setLeadingIcons([icon]);
@@ skipping 80 matching lines @@
     for (var objectStoreName in this._idbObjectStoreTreeElements)
       this._objectStoreRemoved(objectStoreName);
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.IDBObjectStoreTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} storagePanel
    * @param {!Resources.IndexedDBModel} model
    * @param {!Resources.IndexedDBModel.DatabaseId} databaseId
    * @param {!Resources.IndexedDBModel.ObjectStore} objectStore
    */
   constructor(storagePanel, model, databaseId, objectStore) {
     super(storagePanel, objectStore.name, false);
     this._model = model;
     this._databaseId = databaseId;
     this._idbIndexTreeElements = {};
     var icon = UI.Icon.create('mediumicon-table', 'resource-tree-item');
@@ skipping 104 matching lines @@
     if (this._view)
       this._view.clear();
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.IDBIndexTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} 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, false);
     this._model = model;
     this._databaseId = databaseId;
     this._objectStore = objectStore;
@@ skipping 62 matching lines @@
     return 'storage://' + this._domStorage.securityOrigin + '/' +
         (this._domStorage.isLocalStorage ? 'local' : 'session');
   }
 
   /**
    * @override
    * @return {boolean}
    */
   onselect(selectedByUser) {
     super.onselect(selectedByUser);
-    this._storagePanel._showDOMStorage(this._domStorage);
+    this._storagePanel.showDOMStorage(this._domStorage);
     return false;
   }
 
   /**
    * @override
    */
   onattach() {
     super.onattach();
     this.listItemElement.addEventListener('contextmenu', this._handleContextMenuEvent.bind(this), true);
   }
 
   _handleContextMenuEvent(event) {
     var contextMenu = new UI.ContextMenu(event);
     contextMenu.appendItem(Common.UIString('Clear'), () => this._domStorage.clear());
     contextMenu.show();
   }
 };
 
 Resources.CookieTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} storagePanel
    * @param {!SDK.ResourceTreeFrame} frame
    * @param {string} cookieDomain
    */
   constructor(storagePanel, frame, cookieDomain) {
     super(storagePanel, cookieDomain ? cookieDomain : Common.UIString('Local Files'), false);
     this._target = frame.target();
     this._cookieDomain = cookieDomain;
     var icon = UI.Icon.create('mediumicon-cookie', 'resource-tree-item');
     this.setLeadingIcons([icon]);
   }
@@ skipping 59 matching lines @@
     this._storagePanel.showCategoryView(this._manifestURL);
     return false;
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.ApplicationCacheFrameTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
-   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.ApplicationPanelSidebar} storagePanel
    * @param {!Protocol.Page.FrameId} frameId
    * @param {string} manifestURL
    */
   constructor(storagePanel, frameId, manifestURL) {
     super(storagePanel, '', false);
     this._frameId = frameId;
     this._manifestURL = manifestURL;
     this._refreshTitles();
 
     var icon = UI.Icon.create('largeicon-navigator-folder', 'navigator-tree-item');
@@ skipping 43 matching lines @@
 
     this.element.classList.add('storage-view');
     this._emptyWidget = new UI.EmptyWidget('');
     this._emptyWidget.show(this.element);
   }
 
   setText(text) {
     this._emptyWidget.text = text;
   }
 };