[Storage] Cache storage inspection on all the frames!

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 48 matching lines @@
 
     this.sessionStorageListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Session Storage"), "SessionStorage", ["domstorage-storage-tree-item", "session-storage"]);
     this._sidebarTree.appendChild(this.sessionStorageListTreeElement);
 
     this.cookieListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Cookies"), "Cookies", ["cookie-storage-tree-item"]);
     this._sidebarTree.appendChild(this.cookieListTreeElement);
 
     this.applicationCacheListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Application Cache"), "ApplicationCache", ["application-cache-storage-tree-item"]);
     this._sidebarTree.appendChild(this.applicationCacheListTreeElement);
 
+    this.cacheStorageListTreeElement = new WebInspector.ServiceWorkerCacheTreeElement(this);
+    this._sidebarTree.appendChild(this.cacheStorageListTreeElement);
+
     if (Runtime.experiments.isEnabled("fileSystemInspection")) {
         this.fileSystemListTreeElement = new WebInspector.FileSystemListTreeElement(this);
         this._sidebarTree.appendChild(this.fileSystemListTreeElement);
     }
 
     var mainView = new WebInspector.VBox();
     this.storageViews = mainView.element.createChild("div", "vbox flex-auto");
     this._storageViewToolbar = new WebInspector.Toolbar(mainView.element);
     this._storageViewToolbar.element.classList.add("resources-toolbar");
     this.splitView().setMainView(mainView);
@@ skipping 36 matching lines @@
     /**
      * @override
      * @param {!WebInspector.Target} target
      */
     targetAdded: function(target)
     {
         if (this._target)
             return;
         this._target = target;
 
-        if (target.isServiceWorker()) {
-            this.serviceWorkerCacheListTreeElement = new WebInspector.ServiceWorkerCacheTreeElement(this);
-            this._sidebarTree.appendChild(this.serviceWorkerCacheListTreeElement);
-        }
-
         if (target.serviceWorkerManager && Runtime.experiments.isEnabled("serviceWorkersInResources")) {
             this.serviceWorkersTreeElement = new WebInspector.ServiceWorkersTreeElement(this);
             this._sidebarTree.appendChild(this.serviceWorkersTreeElement);
         }
 
         this._databaseModel = WebInspector.DatabaseModel.fromTarget(target);
         this._domStorageModel = WebInspector.DOMStorageModel.fromTarget(target);
 
         if (target.resourceTreeModel.cachedResourcesLoaded())
             this._initialize();
@@ skipping 23 matching lines @@
     },
 
     _initialize: function()
     {
         this._databaseModel.enable();
         this._domStorageModel.enable();
         var indexedDBModel = WebInspector.IndexedDBModel.fromTarget(this._target);
         if (indexedDBModel)
             indexedDBModel.enable();
 
+        var cacheStorageModel = WebInspector.ServiceWorkerCacheModel.fromTarget(this._target);
+        if (cacheStorageModel)
+            cacheStorageModel.enable();
+
         if (this._target.isPage())
             this._populateResourceTree();
         this._populateDOMStorageTree();
         this._populateApplicationCacheTree();
         this.indexedDBListTreeElement._initialize();
-        if (this.serviceWorkerCacheListTreeElement)
-            this.serviceWorkerCacheListTreeElement._initialize();
+        this.cacheStorageListTreeElement._initialize();
         if (Runtime.experiments.isEnabled("fileSystemInspection"))
             this.fileSystemListTreeElement._initialize();
         this._initDefaultSelection();
         this._initialized = true;
     },
 
     _loadEventFired: function()
     {
         this._initDefaultSelection();
     },
@@ skipping 38 matching lines @@
         this._databaseQueryViews.clear();
         this._databaseTreeElements.clear();
         this._domStorageViews.clear();
         this._domStorageTreeElements.clear();
         this._cookieViews = {};
 
         this.databasesListTreeElement.removeChildren();
         this.localStorageListTreeElement.removeChildren();
         this.sessionStorageListTreeElement.removeChildren();
         this.cookieListTreeElement.removeChildren();
-        if (this.serviceWorkerCacheListTreeElement)
-            this.serviceWorkerCacheListTreeElement.removeChildren();
+        this.cacheStorageListTreeElement.removeChildren();
 
         if (this.visibleView && !(this.visibleView instanceof WebInspector.StorageCategoryView))
             this.visibleView.detach();
 
         this._storageViewToolbar.removeToolbarItems();
 
         if (this._sidebarTree.selectedTreeElement)
             this._sidebarTree.selectedTreeElement.deselect();
     },
 
@@ skipping 1168 matching lines @@
     },
 
     __proto__: WebInspector.BaseStorageTreeElement.prototype
 }
 
 
 /**
  * @constructor
  * @extends {WebInspector.StorageCategoryTreeElement}
  * @param {!WebInspector.ResourcesPanel} storagePanel
- * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.ServiceWorkerCacheTreeElement = function(storagePanel)
 {
-    WebInspector.StorageCategoryTreeElement.call(this, storagePanel, WebInspector.UIString("Service Worker Cache"), "ServiceWorkerCache", ["service-worker-cache-storage-tree-item"]);
+    WebInspector.StorageCategoryTreeElement.call(this, storagePanel, WebInspector.UIString("Cache Storage"), "CacheStorage", ["service-worker-cache-storage-tree-item"]);
 }
 
 WebInspector.ServiceWorkerCacheTreeElement.prototype = {
     _initialize: function()
     {
         /** @type {!Array.<!WebInspector.SWCacheTreeElement>} */
         this._swCacheTreeElements = [];
-        var targets = WebInspector.targetManager.targets();
-        for (var i = 0; i < targets.length; ++i) {
-            if (!targets[i].serviceWorkerCacheModel)
-                continue;
-            var caches = targets[i].serviceWorkerCacheModel.caches();
-            for (var j = 0; j < caches.length; ++j)
-                this._addCache(targets[i].serviceWorkerCacheModel, caches[j]);
+        var target = this._storagePanel._target;
+        if (target) {
+            var model = WebInspector.ServiceWorkerCacheModel.fromTarget(target);
+            var caches = model.caches();
+            for (var cache of caches)
+                this._addCache(model, cache);
         }
         WebInspector.targetManager.addModelListener(WebInspector.ServiceWorkerCacheModel, WebInspector.ServiceWorkerCacheModel.EventTypes.CacheAdded, this._cacheAdded, this);
         WebInspector.targetManager.addModelListener(WebInspector.ServiceWorkerCacheModel, WebInspector.ServiceWorkerCacheModel.EventTypes.CacheRemoved, this._cacheRemoved, this);
-        this._refreshCaches();
-        WebInspector.targetManager.observeTargets(this);
     },
 
     onattach: function()
     {
         WebInspector.StorageCategoryTreeElement.prototype.onattach.call(this);
         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
     },
 
-    /**
-     * @override
-     * @param {!WebInspector.Target} target
-     */
-    targetAdded: function(target)
-    {
-        if (target.isServiceWorker() && target.serviceWorkerCacheModel)
-            this._refreshCaches();
-    },
-
-    /**
-     * @override
-     * @param {!WebInspector.Target} target
-     */
-    targetRemoved: function(target) {},
-
     _handleContextMenuEvent: function(event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendItem(WebInspector.UIString("Refresh Caches"), this._refreshCaches.bind(this));
         contextMenu.show();
     },
 
     _refreshCaches: function()
     {
-        var targets = WebInspector.targetManager.targets();
-        for (var i = 0; i < targets.length; ++i) {
-            if (targets[i].serviceWorkerCacheModel)
-                targets[i].serviceWorkerCacheModel.refreshCacheNames();
+        var target = this._storagePanel._target;
+        if (target) {
+            var model = WebInspector.ServiceWorkerCacheModel.fromTarget(target);
+            model.refreshCacheNames();
         }
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _cacheAdded: function(event)
     {
-        var cacheId = /** @type {!WebInspector.ServiceWorkerCacheModel.CacheId} */ (event.data);
+        var cache = /** @type {!WebInspector.ServiceWorkerCacheModel.Cache} */ (event.data);
         var model = /** @type {!WebInspector.ServiceWorkerCacheModel} */ (event.target);
-        this._addCache(model, cacheId);
+        this._addCache(model, cache);
     },
 
     /**
      * @param {!WebInspector.ServiceWorkerCacheModel} model
-     * @param {!WebInspector.ServiceWorkerCacheModel.CacheId} cacheId
+     * @param {!WebInspector.ServiceWorkerCacheModel.Cache} cache
      */
-    _addCache: function(model, cacheId)
+    _addCache: function(model, cache)
     {
-        var swCacheTreeElement = new WebInspector.SWCacheTreeElement(this._storagePanel, model, cacheId);
+        var swCacheTreeElement = new WebInspector.SWCacheTreeElement(this._storagePanel, model, cache);
         this._swCacheTreeElements.push(swCacheTreeElement);
         this.appendChild(swCacheTreeElement);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _cacheRemoved: function(event)
     {
-        var cacheId = /** @type {!WebInspector.ServiceWorkerCacheModel.CacheId} */ (event.data);
+        var cache = /** @type {!WebInspector.ServiceWorkerCacheModel.Cache} */ (event.data);
         var model = /** @type {!WebInspector.ServiceWorkerCacheModel} */ (event.target);
 
-        var swCacheTreeElement = this._cacheTreeElement(model, cacheId);
+        var swCacheTreeElement = this._cacheTreeElement(model, cache);
         if (!swCacheTreeElement)
             return;
 
         swCacheTreeElement.clear();
         this.removeChild(swCacheTreeElement);
         this._swCacheTreeElements.remove(swCacheTreeElement);
     },
 
     /**
      * @param {!WebInspector.ServiceWorkerCacheModel} model
-     * @param {!WebInspector.ServiceWorkerCacheModel.CacheId} cacheId
+     * @param {!WebInspector.ServiceWorkerCacheModel.Cache} cache
      * @return {?WebInspector.SWCacheTreeElement}
      */
-    _cacheTreeElement: function(model, cacheId)
+    _cacheTreeElement: function(model, cache)
     {
         var index = -1;
         for (var i = 0; i < this._swCacheTreeElements.length; ++i) {
-            if (this._swCacheTreeElements[i]._cacheId.equals(cacheId) && this._swCacheTreeElements[i]._model === model) {
+            if (this._swCacheTreeElements[i]._cache.equals(cache) && this._swCacheTreeElements[i]._model === model) {
                 index = i;
                 break;
             }
         }
         if (index !== -1)
             return this._swCacheTreeElements[i];
         return null;
     },
 
     __proto__: WebInspector.StorageCategoryTreeElement.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.BaseStorageTreeElement}
  * @param {!WebInspector.ResourcesPanel} storagePanel
  * @param {!WebInspector.ServiceWorkerCacheModel} model
- * @param {!WebInspector.ServiceWorkerCacheModel.CacheId} cacheId
+ * @param {!WebInspector.ServiceWorkerCacheModel.Cache} cache
  */
-WebInspector.SWCacheTreeElement = function(storagePanel, model, cacheId)
+WebInspector.SWCacheTreeElement = function(storagePanel, model, cache)
 {
-    WebInspector.BaseStorageTreeElement.call(this, storagePanel, cacheId.name, ["service-worker-cache-tree-item"]);
+    WebInspector.BaseStorageTreeElement.call(this, storagePanel, cache.cacheName + " - " + cache.securityOrigin, ["service-worker-cache-tree-item"]);
     this._model = model;
-    this._cacheId = cacheId;
+    this._cache = cache;
 }
 
 WebInspector.SWCacheTreeElement.prototype = {
     get itemURL()
     {
         // I don't think this will work at all.
-        return "swcache://" + this._cacheId.name;
+        return "cache://" + this._cache.cacheId;
     },
 
     onattach: function()
     {
         WebInspector.BaseStorageTreeElement.prototype.onattach.call(this);
         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
     },
 
     _handleContextMenuEvent: function(event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendItem(WebInspector.UIString("Delete"), this._clearCache.bind(this));
         contextMenu.show();
     },
 
     _clearCache: function()
     {
-        this._model.deleteCache(this._cacheId);
+        this._model.deleteCache(this._cache);
     },
 
     /**
      * @param {!WebInspector.ServiceWorkerCacheModel.Cache} cache
      */
     update: function(cache)
     {
         this._cache = cache;
         if (this._view)
             this._view.update(cache);
     },
 
     /**
      * @override
      * @return {boolean}
      */
     onselect: function(selectedByUser)
     {
         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
         if (!this._view)
-            this._view = new WebInspector.ServiceWorkerCacheView(this._model, this._cacheId, this._cache);
+            this._view = new WebInspector.ServiceWorkerCacheView(this._model, this._cache);
 
         this._storagePanel.showServiceWorkerCache(this._view);
         return false;
     },
 
     clear: function()
     {
         if (this._view)
             this._view.clear();
     },
@@ skipping 815 matching lines @@
 WebInspector.ResourcesPanelFactory.prototype = {
     /**
      * @override
      * @return {!WebInspector.Panel}
      */
     createPanel: function()
     {
         return WebInspector.ResourcesPanel._instance();
     }
 }