[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.
  * 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 13 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 UI.VBox {
+  /**
+   * @param {!Resources.ResourcesPanel} panel
+   */
+  constructor(panel) {
+    super();
 
-    this._resourcesLastSelectedItemSetting = Common.settings.createSetting('resourcesLastSelectedItem', {});
+    this._panel = panel;
 
     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);
+    this.contentElement.appendChild(this._sidebarTree.element);
 
     this._applicationTreeElement = this._addSidebarSection(Common.UIString('Application'));
-    this._manifestTreeElement = new Resources.AppManifestTreeElement(this);
+    this._manifestTreeElement = new Resources.AppManifestTreeElement(panel);
     this._applicationTreeElement.appendChild(this._manifestTreeElement);
-    this.serviceWorkersTreeElement = new Resources.ServiceWorkersTreeElement(this);
+    this.serviceWorkersTreeElement = new Resources.ServiceWorkersTreeElement(panel);
     this._applicationTreeElement.appendChild(this.serviceWorkersTreeElement);
-    var clearStorageTreeElement = new Resources.ClearStorageTreeElement(this);
+    var clearStorageTreeElement = new Resources.ClearStorageTreeElement(panel);
     this._applicationTreeElement.appendChild(clearStorageTreeElement);
 
     var storageTreeElement = this._addSidebarSection(Common.UIString('Storage'));
     this.localStorageListTreeElement =
-        new Resources.StorageCategoryTreeElement(this, Common.UIString('Local Storage'), 'LocalStorage');
+        new Resources.StorageCategoryTreeElement(panel, Common.UIString('Local Storage'), 'LocalStorage');
     var localStorageIcon = UI.Icon.create('mediumicon-table', 'resource-tree-item');
     this.localStorageListTreeElement.setLeadingIcons([localStorageIcon]);
 
     storageTreeElement.appendChild(this.localStorageListTreeElement);
     this.sessionStorageListTreeElement =
-        new Resources.StorageCategoryTreeElement(this, Common.UIString('Session Storage'), 'SessionStorage');
+        new Resources.StorageCategoryTreeElement(panel, Common.UIString('Session Storage'), 'SessionStorage');
     var sessionStorageIcon = UI.Icon.create('mediumicon-table', 'resource-tree-item');
     this.sessionStorageListTreeElement.setLeadingIcons([sessionStorageIcon]);
 
     storageTreeElement.appendChild(this.sessionStorageListTreeElement);
-    this.indexedDBListTreeElement = new Resources.IndexedDBTreeElement(this);
+    this.indexedDBListTreeElement = new Resources.IndexedDBTreeElement(panel);
     storageTreeElement.appendChild(this.indexedDBListTreeElement);
     this.databasesListTreeElement =
-        new Resources.StorageCategoryTreeElement(this, Common.UIString('Web SQL'), 'Databases');
+        new Resources.StorageCategoryTreeElement(panel, Common.UIString('Web SQL'), 'Databases');
     var databaseIcon = UI.Icon.create('mediumicon-database', 'resource-tree-item');
     this.databasesListTreeElement.setLeadingIcons([databaseIcon]);
 
     storageTreeElement.appendChild(this.databasesListTreeElement);
-    this.cookieListTreeElement = new Resources.StorageCategoryTreeElement(this, Common.UIString('Cookies'), 'Cookies');
+    this.cookieListTreeElement = new Resources.StorageCategoryTreeElement(panel, Common.UIString('Cookies'), 'Cookies');
     var cookieIcon = UI.Icon.create('mediumicon-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);
+    this.cacheStorageListTreeElement = new Resources.ServiceWorkerCacheTreeElement(panel);
     cacheTreeElement.appendChild(this.cacheStorageListTreeElement);
     this.applicationCacheListTreeElement =
-        new Resources.StorageCategoryTreeElement(this, Common.UIString('Application Cache'), 'ApplicationCache');
+        new Resources.StorageCategoryTreeElement(panel, Common.UIString('Application Cache'), 'ApplicationCache');
     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);
+    this._resourcesSection = new Resources.ResourcesSection(panel, this._addSidebarSection(Common.UIString('Frames')));
 
     /** @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);
+    this._sidebarTree.contentElement.addEventListener('mousemove', this._onmousemove.bind(this), false);
+    this._sidebarTree.contentElement.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}
-   */
-  static _instance() {
-    return /** @type {!Resources.ResourcesPanel} */ (self.runtime.sharedInstance(Resources.ResourcesPanel));
-  }
-
-  /**
    * @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);
     treeElement.selectable = false;
     this._sidebarTree.appendChild(treeElement);
     return treeElement;
@@ skipping 64 matching lines @@
     var cacheStorageModel = SDK.ServiceWorkerCacheModel.fromTarget(this._target);
     if (cacheStorageModel)
       cacheStorageModel.enable();
     var resourceTreeModel = SDK.ResourceTreeModel.fromTarget(this._target);
     if (resourceTreeModel)
       this._populateApplicationCacheTree(resourceTreeModel);
     var domStorageModel = Resources.DOMStorageModel.fromTarget(this._target);
     if (domStorageModel)
       this._populateDOMStorageTree(domStorageModel);
     this.indexedDBListTreeElement._initialize();
-    this.cacheStorageListTreeElement._initialize();
+    var serviceWorkerCacheModel = SDK.ServiceWorkerCacheModel.fromTarget(this._target);
+    this.cacheStorageListTreeElement._initialize(serviceWorkerCacheModel);
     this._initDefaultSelection();
   }
 
   _initDefaultSelection() {
-    var itemURL = this._resourcesLastSelectedItemSetting.get();
+    var itemURL = this._panel.lastSelectedItemURL();
     if (itemURL) {
       var rootElement = this._sidebarTree.rootElement();
       for (var treeElement = rootElement.firstChild(); treeElement;
            treeElement = treeElement.traverseNextTreeElement(false, rootElement, true)) {
         if (treeElement.itemURL === itemURL) {
           treeElement.revealAndSelect(true);
           return;
         }
       }
     }
     this._manifestTreeElement.select();
   }
 
   _resetWithFrames() {
     this._resourcesSection.reset();
     this._reset();
   }
 
   _resetWebSQL() {
-    if (this.visibleView instanceof Resources.DatabaseQueryView ||
-        this.visibleView instanceof Resources.DatabaseTableView) {
-      this.visibleView.detach();
-      delete this.visibleView;
-    }
-
     var queryViews = this._databaseQueryViews.valuesArray();
     for (var i = 0; i < queryViews.length; ++i) {
       queryViews[i].removeEventListener(
           Resources.DatabaseQueryView.Events.SchemaUpdated, this._updateDatabaseTables, this);
     }
     this._databaseTableViews.clear();
     this._databaseQueryViews.clear();
     this._databaseTreeElements.clear();
     this.databasesListTreeElement.removeChildren();
     this.databasesListTreeElement.setExpandable(false);
   }
 
   _resetDOMStorage() {
-    if (this.visibleView === this._domStorageView) {
-      this.visibleView.detach();
-      delete this.visibleView;
-    }
-
     this._domStorageTreeElements.clear();
     this.localStorageListTreeElement.removeChildren();
     this.sessionStorageListTreeElement.removeChildren();
   }
 
   _resetCookies() {
-    if (this.visibleView instanceof Resources.CookieItemsView) {
-      this.visibleView.detach();
-      delete this.visibleView;
-    }
     this.cookieListTreeElement.removeChildren();
   }
 
   _resetCacheStorage() {
-    if (this.visibleView instanceof Resources.ServiceWorkerCacheView) {
-      this.visibleView.detach();
-      delete this.visibleView;
-    }
     this.cacheStorageListTreeElement.removeChildren();
     this.cacheStorageListTreeElement.setExpandable(false);
   }
 
   _resetAppCache() {
     for (var frameId of Object.keys(this._applicationCacheFrameElements))
       this._applicationCacheFrameManifestRemoved({data: frameId});
     this.applicationCacheListTreeElement.setExpandable(false);
   }
 
   _reset() {
     this._domains = {};
     this._resetWebSQL();
     this._resetDOMStorage();
     this._resetCookies();
     this._resetCacheStorage();
     // No need to this._resetAppCache.
 
-    if ((this.visibleView instanceof SourceFrame.ResourceSourceFrame) ||
-        (this.visibleView instanceof SourceFrame.ImageView) || (this.visibleView instanceof SourceFrame.FontView)) {
-      this.visibleView.detach();
-      delete this.visibleView;
-    }
-
-    this._storageViewToolbar.removeToolbarItems();
+    this._panel.resetView();
 
     if (this._sidebarTree.selectedTreeElement)
       this._sidebarTree.selectedTreeElement.deselect();
   }
 
   _frameNavigated(event) {
     var frame = event.data;
 
     if (!frame.parentFrame)
       this._reset();
 
     var applicationCacheFrameTreeElement = this._applicationCacheFrameElements[frame.id];
     if (applicationCacheFrameTreeElement)
       applicationCacheFrameTreeElement.frameNavigated(frame);
     this._addCookieDocument(frame);
   }
 
   /**
    * @param {!Resources.DatabaseModel.DatabaseAddedEvent} event
    */
   _databaseAdded(event) {
-    var databaseTreeElement = new Resources.DatabaseTreeElement(this, event.database);
+    var databaseTreeElement = new Resources.DatabaseTreeElement(this._panel, event.database);
     this._databaseTreeElements.set(event.database, databaseTreeElement);
     this.databasesListTreeElement.appendChild(databaseTreeElement);
   }
 
   /**
    * @param {!SDK.ResourceTreeFrame} frame
    */
   _addCookieDocument(frame) {
     var parsedURL = frame.url.asParsedURL();
     if (!parsedURL || (parsedURL.scheme !== 'http' && parsedURL.scheme !== 'https' && parsedURL.scheme !== 'file'))
       return;
 
     var domain = parsedURL.securityOrigin();
     if (!this._domains[domain]) {
       this._domains[domain] = true;
-      var cookieDomainTreeElement = new Resources.CookieTreeElement(this, frame, domain);
+      var cookieDomainTreeElement = new Resources.CookieTreeElement(this._panel, frame, domain);
       this.cookieListTreeElement.appendChild(cookieDomainTreeElement);
     }
   }
 
   /**
    * @param {!Common.Event} event
    */
   _domStorageAdded(event) {
     var domStorage = /** @type {!Resources.DOMStorage} */ (event.data);
     this._addDOMStorage(domStorage);
   }
 
   /**
    * @param {!Resources.DOMStorage} domStorage
    */
   _addDOMStorage(domStorage) {
     console.assert(!this._domStorageTreeElements.get(domStorage));
 
-    var domStorageTreeElement = new Resources.DOMStorageTreeElement(this, domStorage);
+    var domStorageTreeElement = new Resources.DOMStorageTreeElement(this._panel, domStorage);
     this._domStorageTreeElements.set(domStorage, domStorageTreeElement);
     if (domStorage.isLocalStorage)
       this.localStorageListTreeElement.appendChild(domStorageTreeElement);
     else
       this.sessionStorageListTreeElement.appendChild(domStorageTreeElement);
   }
 
   /**
    * @param {!Common.Event} event
    */
@@ skipping 15 matching lines @@
     if (wasSelected)
       parentListTreeElement.select();
     this._domStorageTreeElements.remove(domStorage);
   }
 
   /**
    * @param {!Resources.Database} database
    */
   selectDatabase(database) {
     if (database) {
-      this._showDatabase(database);
+      this._panel.showDatabase(database);
       this._databaseTreeElements.get(database).select();
     }
   }
 
   /**
-   * @param {!Resources.DOMStorage} domStorage
-   */
-  selectDOMStorage(domStorage) {
-    if (domStorage) {
-      this._showDOMStorage(domStorage);
-      this._domStorageTreeElements.get(domStorage).select();
-    }
-  }
-
-  /**
    * @param {!SDK.Resource} resource
    * @param {number=} line
    * @param {number=} column
    * @return {boolean}
    */
   showResource(resource, line, column) {
     var resourceTreeElement = Resources.FrameResourceTreeElement.forResource(resource);
     if (resourceTreeElement)
       resourceTreeElement.revealAndSelect(true);
 
@@ skipping 13 matching lines @@
     var resourceView = Resources.FrameResourceTreeElement.resourceViewForResource(resource);
     if (resourceView && resourceView instanceof SourceFrame.ResourceSourceFrame)
       return /** @type {!SourceFrame.ResourceSourceFrame} */ (resourceView);
     return null;
   }
 
   /**
    * @param {!Resources.Database} database
    * @param {string=} tableName
    */
-  _showDatabase(database, tableName) {
+  showDatabase(database, tableName) {
     if (!database)
       return;
 
     var view;
     if (tableName) {
       var tableViews = this._databaseTableViews.get(database);
       if (!tableViews) {
         tableViews = /** @type {!Object.<string, !Resources.DatabaseTableView>} */ ({});
         this._databaseTableViews.set(database, tableViews);
       }
       view = tableViews[tableName];
       if (!view) {
         view = new Resources.DatabaseTableView(database, tableName);
         tableViews[tableName] = view;
       }
     } else {
       view = this._databaseQueryViews.get(database);
       if (!view) {
         view = new Resources.DatabaseQueryView(database);
         this._databaseQueryViews.set(database, view);
         view.addEventListener(Resources.DatabaseQueryView.Events.SchemaUpdated, this._updateDatabaseTables, this);
       }
     }
 
     this._innerShowView(view);
   }
 
-  /**
-   * @param {!Resources.DOMStorage} domStorage
-   */
-  _showDOMStorage(domStorage) {
-    if (!domStorage)
-      return;
-
-    if (!this._domStorageView)
-      this._domStorageView = new Resources.DOMStorageItemsView(domStorage);
-    else
-      this._domStorageView.setStorage(domStorage);
-    this._innerShowView(this._domStorageView);
-  }
-
-  /**
-   * @param {!Resources.CookieTreeElement} treeElement
-   * @param {string} cookieDomain
-   * @param {!SDK.Target} cookieFrameTarget
-   */
-  showCookies(treeElement, cookieDomain, cookieFrameTarget) {
-    var model = SDK.CookieModel.fromTarget(cookieFrameTarget);
-    if (!this._cookieView)
-      this._cookieView = new Resources.CookieItemsView(treeElement, model, cookieDomain);
-    else
-      this._cookieView.setCookiesDomain(model, cookieDomain);
-    this._innerShowView(this._cookieView);
-  }
-
-  /**
-   * @param {!SDK.Target} target
-   * @param {string} cookieDomain
-   */
-  _clearCookies(target, cookieDomain) {
-    SDK.CookieModel.fromTarget(target).clear(cookieDomain, () => {
-      if (this._cookieView)
-        this._cookieView.refreshItems();
-    });
-  }
-
   showApplicationCache(frameId) {
     if (!this._applicationCacheViews[frameId]) {
       this._applicationCacheViews[frameId] =
           new Resources.ApplicationCacheItemsView(this._applicationCacheModel, frameId);
     }
 
     this._innerShowView(this._applicationCacheViews[frameId]);
   }
 
   /**
    *  @param {!UI.Widget} view
    */
   showFileSystem(view) {
     this._innerShowView(view);
   }
 
-  showCategoryView(categoryName) {
-    if (!this._categoryView)
-      this._categoryView = new Resources.StorageCategoryView();
-    this._categoryView.setText(categoryName);
-    this._innerShowView(this._categoryView);
-  }
-
   _innerShowView(view) {
-    if (this.visibleView === view)
-      return;
-
-    if (this.visibleView)
-      this.visibleView.detach();
-
-    view.show(this.storageViews);
-    this.visibleView = view;
-
-    this._storageViewToolbar.removeToolbarItems();
-    var toolbarItems = (view instanceof UI.SimpleView && view.syncToolbarItems()) || [];
-    for (var i = 0; i < toolbarItems.length; ++i)
-      this._storageViewToolbar.appendToolbarItem(toolbarItems[i]);
-    this._storageViewToolbar.element.classList.toggle('hidden', !toolbarItems.length);
-  }
-
-  closeVisibleView() {
-    if (!this.visibleView)
-      return;
-    this.visibleView.detach();
-    delete this.visibleView;
+    this._panel.showView(view);
   }
 
   _updateDatabaseTables(event) {
     var database = event.data;
 
     if (!database)
       return;
 
     var databasesTreeElement = this._databaseTreeElements.get(database);
     if (!databasesTreeElement)
       return;
 
     databasesTreeElement.invalidateChildren();
     var tableViews = this._databaseTableViews.get(database);
 
     if (!tableViews)
       return;
 
     var tableNamesHash = {};
-    var self = this;
+    var panel = this._panel;
     function tableNamesCallback(tableNames) {
       var tableNamesLength = tableNames.length;
       for (var i = 0; i < tableNamesLength; ++i)
         tableNamesHash[tableNames[i]] = true;
 
       for (var tableName in tableViews) {
         if (!(tableName in tableNamesHash)) {
-          if (self.visibleView === tableViews[tableName])
-            self.closeVisibleView();
+          if (panel.visibleView === tableViews[tableName])
+            panel.showView(null);
           delete tableViews[tableName];
         }
       }
     }
     database.getTableNames(tableNamesCallback);
   }
 
   /**
    * @param {!Resources.DOMStorageModel} domStorageModel
    */
@@ skipping 32 matching lines @@
     var frameId = event.data;
     var manifestURL = this._applicationCacheModel.frameManifestURL(frameId);
 
     var manifestTreeElement = this._applicationCacheManifestElements[manifestURL];
     if (!manifestTreeElement) {
       manifestTreeElement = new Resources.ApplicationCacheManifestTreeElement(this, manifestURL);
       this.applicationCacheListTreeElement.appendChild(manifestTreeElement);
       this._applicationCacheManifestElements[manifestURL] = manifestTreeElement;
     }
 
-    var frameTreeElement = new Resources.ApplicationCacheFrameTreeElement(this, frameId, manifestURL);
+    var model = SDK.ResourceTreeModel.fromTarget(this._target);
+    var frameTreeElement =
+        new Resources.ApplicationCacheFrameTreeElement(this._panel, model.frameForId(frameId), manifestURL);
     manifestTreeElement.appendChild(frameTreeElement);
     manifestTreeElement.expand();
     this._applicationCacheFrameElements[frameId] = frameTreeElement;
   }
 
   _applicationCacheFrameManifestRemoved(event) {
     var frameId = event.data;
     var frameTreeElement = this._applicationCacheFrameElements[frameId];
     if (!frameTreeElement)
       return;
@@ skipping 57 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 {string} title
-   * @param {boolean} expandable
-   */
-  constructor(storagePanel, title, expandable) {
-    super(title, expandable);
-    this._storagePanel = storagePanel;
-  }
-
-  /**
-   * @override
-   * @return {boolean}
-   */
-  onselect(selectedByUser) {
-    if (!selectedByUser)
-      return false;
-    var itemURL = this.itemURL;
-    if (itemURL)
-      this._storagePanel._resourcesLastSelectedItemSetting.set(itemURL);
-    return false;
-  }
-
-  /**
-   * @protected
-   * @param {?UI.Widget} view
-   */
-  showView(view) {
-    if (!view) {
-      this._storagePanel.visibleView.detach();
-      return;
-    }
-    this._storagePanel._innerShowView(view);
-  }
-};
-
-/**
- * @unrestricted
- */
-Resources.StorageCategoryTreeElement = class extends Resources.BaseStorageTreeElement {
-  /**
-   * @param {!Resources.ResourcesPanel} 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;
-  }
-
-  /**
-   * @return {!SDK.Target}
-   */
-  target() {
-    return this._storagePanel._target;
-  }
-
-  get itemURL() {
-    return 'category://' + this._categoryName;
-  }
-
-  /**
-   * @override
-   * @return {boolean}
-   */
-  onselect(selectedByUser) {
-    super.onselect(selectedByUser);
-    this._storagePanel.showCategoryView(this._categoryName);
-    return false;
-  }
-
-  /**
-   * @override
-   */
-  onattach() {
-    super.onattach();
-    if (this._expandedSetting.get())
-      this.expand();
-  }
-
-  /**
-   * @override
-   */
-  onexpand() {
-    this._expandedSetting.set(true);
-  }
-
-  /**
-   * @override
-   */
-  oncollapse() {
-    this._expandedSetting.set(false);
-  }
-};
-
-/**
  * @unrestricted
  */
 Resources.DatabaseTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} 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]);
   }
 
   get itemURL() {
     return 'database://' + encodeURI(this._database.name);
   }
 
   /**
    * @override
    * @return {boolean}
    */
   onselect(selectedByUser) {
     super.onselect(selectedByUser);
-    this._storagePanel._showDatabase(this._database);
+    this.appPanel.showDatabase(this._database);
     return false;
   }
 
   /**
    * @override
    */
   onexpand() {
     this._updateChildren();
   }
 
   _updateChildren() {
     this.removeChildren();
 
     /**
      * @param {!Array.<string>} tableNames
      * @this {Resources.DatabaseTreeElement}
      */
     function tableNamesCallback(tableNames) {
       var tableNamesLength = tableNames.length;
       for (var i = 0; i < tableNamesLength; ++i)
-        this.appendChild(new Resources.DatabaseTableTreeElement(this._storagePanel, this._database, tableNames[i]));
+        this.appendChild(new Resources.DatabaseTableTreeElement(this.appPanel, this._database, tableNames[i]));
     }
     this._database.getTableNames(tableNamesCallback.bind(this));
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.DatabaseTableTreeElement = class extends Resources.BaseStorageTreeElement {
   constructor(storagePanel, database, tableName) {
     super(storagePanel, tableName, false);
     this._database = database;
     this._tableName = tableName;
     var icon = UI.Icon.create('mediumicon-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);
+    this.appPanel.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');
     var icon = UI.Icon.create('mediumicon-database', 'resource-tree-item');
     this.setLeadingIcons([icon]);
+    /** @type {?SDK.ServiceWorkerCacheModel} */
+    this._swCacheModel = null;
   }
 
-  _initialize() {
+  /**
+   * @param {?SDK.ServiceWorkerCacheModel} model
+   */
+  _initialize(model) {
     /** @type {!Array.<!Resources.SWCacheTreeElement>} */
     this._swCacheTreeElements = [];
-    var target = this._storagePanel._target;
-    var model = target && SDK.ServiceWorkerCacheModel.fromTarget(target);
+    this._swCacheModel = model;
     if (model) {
       for (var cache of model.caches())
         this._addCache(model, cache);
     }
     SDK.targetManager.addModelListener(
         SDK.ServiceWorkerCacheModel, SDK.ServiceWorkerCacheModel.Events.CacheAdded, this._cacheAdded, this);
     SDK.targetManager.addModelListener(
         SDK.ServiceWorkerCacheModel, SDK.ServiceWorkerCacheModel.Events.CacheRemoved, this._cacheRemoved, this);
   }
 
   /**
    * @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('Refresh Caches'), this._refreshCaches.bind(this));
     contextMenu.show();
   }
 
   _refreshCaches() {
-    var target = this._storagePanel._target;
-    if (target) {
-      var model = SDK.ServiceWorkerCacheModel.fromTarget(target);
-      if (!model)
-        return;
-      model.refreshCacheNames();
-    }
+    if (this._swCacheModel)
+      this._swCacheModel.refreshCacheNames();
   }
 
   /**
    * @param {!Common.Event} event
    */
   _cacheAdded(event) {
     var cache = /** @type {!SDK.ServiceWorkerCacheModel.Cache} */ (event.data.cache);
     var model = /** @type {!SDK.ServiceWorkerCacheModel} */ (event.data.model);
     this._addCache(model, cache);
   }
 
   /**
    * @param {!SDK.ServiceWorkerCacheModel} model
    * @param {!SDK.ServiceWorkerCacheModel.Cache} cache
    */
   _addCache(model, cache) {
-    var swCacheTreeElement = new Resources.SWCacheTreeElement(this._storagePanel, model, cache);
+    var swCacheTreeElement = new Resources.SWCacheTreeElement(this.appPanel, model, cache);
     this._swCacheTreeElements.push(swCacheTreeElement);
     this.appendChild(swCacheTreeElement);
   }
 
   /**
    * @param {!Common.Event} event
    */
   _cacheRemoved(event) {
     var cache = /** @type {!SDK.ServiceWorkerCacheModel.Cache} */ (event.data.cache);
     var model = /** @type {!SDK.ServiceWorkerCacheModel} */ (event.data.model);
@@ skipping 180 matching lines @@
     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 {
   /**
@@ skipping 51 matching lines @@
     var databaseId = /** @type {!Resources.IndexedDBModel.DatabaseId} */ (event.data.databaseId);
     var model = /** @type {!Resources.IndexedDBModel} */ (event.data.model);
     this._addIndexedDB(model, databaseId);
   }
 
   /**
    * @param {!Resources.IndexedDBModel} model
    * @param {!Resources.IndexedDBModel.DatabaseId} databaseId
    */
   _addIndexedDB(model, databaseId) {
-    var idbDatabaseTreeElement = new Resources.IDBDatabaseTreeElement(this._storagePanel, model, databaseId);
+    var idbDatabaseTreeElement = new Resources.IDBDatabaseTreeElement(this.appPanel, model, databaseId);
     this._idbDatabaseTreeElements.push(idbDatabaseTreeElement);
     this.appendChild(idbDatabaseTreeElement);
     model.refreshDatabase(databaseId);
   }
 
   /**
    * @param {!Common.Event} event
    */
   _indexedDBRemoved(event) {
     var databaseId = /** @type {!Resources.IndexedDBModel.DatabaseId} */ (event.data.databaseId);
@@ skipping 86 matching lines @@
    * @param {!Resources.IndexedDBModel.Database} database
    */
   update(database) {
     this._database = database;
     var objectStoreNames = {};
     for (var objectStoreName in this._database.objectStores) {
       var objectStore = this._database.objectStores[objectStoreName];
       objectStoreNames[objectStore.name] = true;
       if (!this._idbObjectStoreTreeElements[objectStore.name]) {
         var idbObjectStoreTreeElement =
-            new Resources.IDBObjectStoreTreeElement(this._storagePanel, this._model, this._databaseId, objectStore);
+            new Resources.IDBObjectStoreTreeElement(this.appPanel, this._model, this._databaseId, objectStore);
         this._idbObjectStoreTreeElements[objectStore.name] = idbObjectStoreTreeElement;
         this.appendChild(idbObjectStoreTreeElement);
       }
       this._idbObjectStoreTreeElements[objectStore.name].update(objectStore);
     }
     for (var objectStoreName in this._idbObjectStoreTreeElements) {
       if (!objectStoreNames[objectStoreName])
         this._objectStoreRemoved(objectStoreName);
     }
 
@@ skipping 88 matching lines @@
    * @param {!Resources.IndexedDBModel.ObjectStore} objectStore
    */
   update(objectStore) {
     this._objectStore = objectStore;
 
     var indexNames = {};
     for (var indexName in this._objectStore.indexes) {
       var index = this._objectStore.indexes[indexName];
       indexNames[index.name] = true;
       if (!this._idbIndexTreeElements[index.name]) {
-        var idbIndexTreeElement = new Resources.IDBIndexTreeElement(
-            this._storagePanel, this._model, this._databaseId, this._objectStore, index);
+        var idbIndexTreeElement =
+            new Resources.IDBIndexTreeElement(this.appPanel, this._model, this._databaseId, this._objectStore, index);
         this._idbIndexTreeElements[index.name] = idbIndexTreeElement;
         this.appendChild(idbIndexTreeElement);
       }
       this._idbIndexTreeElements[index.name].update(index);
     }
     for (var indexName in this._idbIndexTreeElements) {
       if (!indexNames[indexName])
         this._indexRemoved(indexName);
     }
     for (var indexName in this._idbIndexTreeElements) {
@@ skipping 114 matching lines @@
   clear() {
     if (this._view)
       this._view.clear();
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.DOMStorageTreeElement = class extends Resources.BaseStorageTreeElement {
+  /**
+   * @param {!Resources.ResourcesPanel} storagePanel
+   * @param {!Resources.DOMStorage} domStorage
+   */
   constructor(storagePanel, domStorage) {
     super(storagePanel, domStorage.securityOrigin ? domStorage.securityOrigin : Common.UIString('Local Files'), false);
     this._domStorage = domStorage;
     var icon = UI.Icon.create('mediumicon-table', 'resource-tree-item');
     this.setLeadingIcons([icon]);
   }
 
   get itemURL() {
     return 'storage://' + this._domStorage.securityOrigin + '/' +
         (this._domStorage.isLocalStorage ? 'local' : 'session');
   }
 
   /**
    * @override
    * @return {boolean}
    */
   onselect(selectedByUser) {
     super.onselect(selectedByUser);
-    this._storagePanel._showDOMStorage(this._domStorage);
+    this.appPanel.showDOMStorage(this._domStorage);
     return false;
   }
 
   /**
    * @override
    */
   onattach() {
     super.onattach();
     this.listItemElement.addEventListener('contextmenu', this._handleContextMenuEvent.bind(this), true);
   }
@@ skipping 30 matching lines @@
     super.onattach();
     this.listItemElement.addEventListener('contextmenu', this._handleContextMenuEvent.bind(this), true);
   }
 
   /**
    * @param {!Event} event
    */
   _handleContextMenuEvent(event) {
     var contextMenu = new UI.ContextMenu(event);
     contextMenu.appendItem(
-        Common.UIString('Clear'), () => this._storagePanel._clearCookies(this._target, this._cookieDomain));
+        Common.UIString('Clear'), () => this.appPanel.clearCookies(this._target, this._cookieDomain));
     contextMenu.show();
   }
 
   /**
    * @override
    * @return {boolean}
    */
   onselect(selectedByUser) {
     super.onselect(selectedByUser);
-    this._storagePanel.showCookies(this, this._cookieDomain, this._target);
+    this.appPanel.showCookies(this._target, this._cookieDomain);
     return false;
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.ApplicationCacheManifestTreeElement = class extends Resources.BaseStorageTreeElement {
   constructor(storagePanel, manifestURL) {
     var title = new Common.ParsedURL(manifestURL).displayName;
     super(storagePanel, title, false);
     this.tooltip = manifestURL;
     this._manifestURL = manifestURL;
   }
 
   get itemURL() {
     return 'appcache://' + this._manifestURL;
   }
 
   get manifestURL() {
     return this._manifestURL;
   }
 
   /**
    * @override
    * @return {boolean}
    */
   onselect(selectedByUser) {
     super.onselect(selectedByUser);
-    this._storagePanel.showCategoryView(this._manifestURL);
+    this.appPanel.showCategoryView(this._manifestURL);
     return false;
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.ApplicationCacheFrameTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
-   * @param {!Protocol.Page.FrameId} frameId
+   * @param {!SDK.ResourceTreeFrame} frame
    * @param {string} manifestURL
    */
-  constructor(storagePanel, frameId, manifestURL) {
+  constructor(storagePanel, frame, manifestURL) {
     super(storagePanel, '', false);
-    this._frameId = frameId;
+    this._frameId = frame.id;
     this._manifestURL = manifestURL;
-    this._refreshTitles();
+    this._refreshTitles(frame);
 
     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;
   }
 
   get manifestURL() {
     return this._manifestURL;
   }
 
-  _refreshTitles() {
-    var resourceTreeModel = SDK.ResourceTreeModel.fromTarget(this._storagePanel._target);
-    var frame = resourceTreeModel.frameForId(this._frameId);
+  /**
+   * @param {!SDK.ResourceTreeFrame} frame
+   */
+  _refreshTitles(frame) {
     this.title = frame.displayName();
   }
 
-  frameNavigated() {
-    this._refreshTitles();
+  /**
+   * @param {!SDK.ResourceTreeFrame} frame
+   */
+  frameNavigated(frame) {
+    this._refreshTitles(frame);
   }
 
   /**
    * @override
    * @return {boolean}
    */
   onselect(selectedByUser) {
     super.onselect(selectedByUser);
-    this._storagePanel.showApplicationCache(this._frameId);
+    this.appPanel.showApplicationCache(this._frameId);
     return false;
   }
 };
 
 /**
  * @unrestricted
  */
 Resources.StorageCategoryView = class extends UI.VBox {
   constructor() {
     super();
 
     this.element.classList.add('storage-view');
     this._emptyWidget = new UI.EmptyWidget('');
     this._emptyWidget.show(this.element);
   }
 
   setText(text) {
     this._emptyWidget.text = text;
   }
 };