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

   1 /*
   2  * Copyright (C) 2007, 2008, 2010 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Joseph Pecoraro
   4  * Copyright (C) 2013 Samsung Electronics. All rights reserved.
   5  *
   6  * Redistribution and use in source and binary forms, with or without
   7  * modification, are permitted provided that the following conditions
   8  * are met:
   9  *
  10  * 1.  Redistributions of source code must retain the above copyright
  11  *     notice, this list of conditions and the following disclaimer.
  12  * 2.  Redistributions in binary form must reproduce the above copyright
  13  *     notice, this list of conditions and the following disclaimer in the
  14  *     documentation and/or other materials provided with the distribution.
  15  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  16  *     its contributors may be used to endorse or promote products derived
  17  *     from this software without specific prior written permission.
  18  *
  19  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  20  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  21  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  22  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  23  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  24  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  25  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  26  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  28  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 /**
  32  * @constructor
  33  * @extends {WebInspector.PanelWithSidebar}
  34  * @implements {WebInspector.TargetManager.Observer}
  35  */
  36 WebInspector.ResourcesPanel = function()
  37 {
  38     WebInspector.PanelWithSidebar.call(this, "resources");
  39     this.registerRequiredCSS("resources/resourcesPanel.css");
  40
  41     this._resourcesLastSelectedItemSetting = WebInspector.settings.createSetting("resourcesLastSelectedItem", {});
  42
  43     this._sidebarTree = new TreeOutline();
  44     this._sidebarTree.element.classList.add("filter-all", "children", "small", "outline-disclosure");
  45     this.panelSidebarElement().appendChild(this._sidebarTree.element);
  46     this.setDefaultFocusedElement(this._sidebarTree.element);
  47
  48     this.resourcesListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Frames"), "Frames", ["frame-storage-tree-item"]);
  49     this._sidebarTree.appendChild(this.resourcesListTreeElement);
  50
  51     this.databasesListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Web SQL"), "Databases", ["database-storage-tree-item"]);
  52     this._sidebarTree.appendChild(this.databasesListTreeElement);
  53
  54     this.indexedDBListTreeElement = new WebInspector.IndexedDBTreeElement(this);
  55     this._sidebarTree.appendChild(this.indexedDBListTreeElement);
  56
  57     this.localStorageListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Local Storage"), "LocalStorage", ["domstorage-storage-tree-item", "local-storage"]);
  58     this._sidebarTree.appendChild(this.localStorageListTreeElement);
  59
  60     this.sessionStorageListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Session Storage"), "SessionStorage", ["domstorage-storage-tree-item", "session-storage"]);
  61     this._sidebarTree.appendChild(this.sessionStorageListTreeElement);
  62
  63     this.cookieListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Cookies"), "Cookies", ["cookie-storage-tree-item"]);
  64     this._sidebarTree.appendChild(this.cookieListTreeElement);
  65
  66     this.applicationCacheListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Application Cache"), "ApplicationCache", ["application-cache-storage-tree-item"]);
  67     this._sidebarTree.appendChild(this.applicationCacheListTreeElement);
  68
  69     this.cacheStorageListTreeElement = new WebInspector.ServiceWorkerCacheTreeElement(this);
  70     this._sidebarTree.appendChild(this.cacheStorageListTreeElement);
  71
  72     if (Runtime.experiments.isEnabled("fileSystemInspection")) {
  73         this.fileSystemListTreeElement = new WebInspector.FileSystemListTreeElement(this);
  74         this._sidebarTree.appendChild(this.fileSystemListTreeElement);
  75     }
  76
  77     var mainContainer = new WebInspector.VBox();
  78     this.storageViews = mainContainer.element.createChild("div", "vbox flex-auto");
  79     this._storageViewToolbar = new WebInspector.Toolbar(mainContainer.element);
  80     this._storageViewToolbar.element.classList.add("resources-toolbar");
  81     this.splitWidget().setMainWidget(mainContainer);
  82
  83     /** @type {!Map.<!WebInspector.Database, !Object.<string, !WebInspector.DatabaseTableView>>} */
  84     this._databaseTableViews = new Map();
  85     /** @type {!Map.<!WebInspector.Database, !WebInspector.DatabaseQueryView>} */
  86     this._databaseQueryViews = new Map();
  87     /** @type {!Map.<!WebInspector.Database, !WebInspector.DatabaseTreeElement>} */
  88     this._databaseTreeElements = new Map();
  89     /** @type {!Map.<!WebInspector.DOMStorage, !WebInspector.DOMStorageItemsView>} */
  90     this._domStorageViews = new Map();
  91     /** @type {!Map.<!WebInspector.DOMStorage, !WebInspector.DOMStorageTreeElement>} */
  92     this._domStorageTreeElements = new Map();
  93     /** @type {!Object.<string, !WebInspector.CookieItemsView>} */
  94     this._cookieViews = {};
  95     /** @type {!Object.<string, boolean>} */
  96     this._domains = {};
  97
  98     this.panelSidebarElement().addEventListener("mousemove", this._onmousemove.bind(this), false);
  99     this.panelSidebarElement().addEventListener("mouseleave", this._onmouseleave.bind(this), false);
 100
 101     /**
 102      * @this {WebInspector.ResourcesPanel}
 103      * @return {?WebInspector.SourceFrame}
 104      */
 105     function sourceFrameGetter()
 106     {
 107         var view = this.visibleView;
 108         if (view && view instanceof WebInspector.SourceFrame)
 109             return /** @type {!WebInspector.SourceFrame} */ (view);
 110         return null;
 111     }
 112     WebInspector.GoToLineDialog.install(this, sourceFrameGetter.bind(this));
 113
 114     WebInspector.targetManager.observeTargets(this);
 115 }
 116
 117 WebInspector.ResourcesPanel.prototype = {
 118     /**
 119      * @override
 120      * @param {!WebInspector.Target} target
 121      */
 122     targetAdded: function(target)
 123     {
 124         if (this._target)
 125             return;
 126         this._target = target;
 127
 128         if (target.serviceWorkerManager && Runtime.experiments.isEnabled("serviceWorkersInResources")) {
 129             this.serviceWorkersTreeElement = new WebInspector.ServiceWorkersTreeElement(this);
 130             this._sidebarTree.appendChild(this.serviceWorkersTreeElement);
 131         }
 132
 133         this._databaseModel = WebInspector.DatabaseModel.fromTarget(target);
 134         this._domStorageModel = WebInspector.DOMStorageModel.fromTarget(target);
 135
 136         if (target.resourceTreeModel.cachedResourcesLoaded())
 137             this._initialize();
 138
 139         target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.Load, this._loadEventFired, this);
 140         target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.CachedResourcesLoaded, this._initialize, this);
 141         target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.WillLoadCachedResources, this._resetWithFrames, this);
 142         this._databaseModel.addEventListener(WebInspector.DatabaseModel.Events.DatabaseAdded, this._databaseAdded, this);
 143     },
 144
 145     /**
 146      * @override
 147      * @param {!WebInspector.Target} target
 148      */
 149     targetRemoved: function(target)
 150     {
 151         if (target !== this._target)
 152             return;
 153         delete this._target;
 154
 155         target.resourceTreeModel.removeEventListener(WebInspector.ResourceTreeModel.EventTypes.Load, this._loadEventFired, this);
 156         target.resourceTreeModel.removeEventListener(WebInspector.ResourceTreeModel.EventTypes.CachedResourcesLoaded, this._initialize, this);
 157         target.resourceTreeModel.removeEventListener(WebInspector.ResourceTreeModel.EventTypes.WillLoadCachedResources, this._resetWithFrames, this);
 158         this._databaseModel.removeEventListener(WebInspector.DatabaseModel.Events.DatabaseAdded, this._databaseAdded, this);
 159
 160         this._resetWithFrames();
 161     },
 162
 163     _initialize: function()
 164     {
 165         this._databaseModel.enable();
 166         this._domStorageModel.enable();
 167         var indexedDBModel = WebInspector.IndexedDBModel.fromTarget(this._target);
 168         if (indexedDBModel)
 169             indexedDBModel.enable();
 170
 171         var cacheStorageModel = WebInspector.ServiceWorkerCacheModel.fromTarget(this._target);
 172         if (cacheStorageModel)
 173             cacheStorageModel.enable();
 174
 175         if (this._target.isPage())
 176             this._populateResourceTree();
 177         this._populateDOMStorageTree();
 178         this._populateApplicationCacheTree();
 179         this.indexedDBListTreeElement._initialize();
 180         this.cacheStorageListTreeElement._initialize();
 181         if (Runtime.experiments.isEnabled("fileSystemInspection"))
 182             this.fileSystemListTreeElement._initialize();
 183         this._initDefaultSelection();
 184         this._initialized = true;
 185     },
 186
 187     _loadEventFired: function()
 188     {
 189         this._initDefaultSelection();
 190     },
 191
 192     _initDefaultSelection: function()
 193     {
 194         if (!this._initialized)
 195             return;
 196
 197         var itemURL = this._resourcesLastSelectedItemSetting.get();
 198         if (itemURL) {
 199             var rootElement = this._sidebarTree.rootElement();
 200             for (var treeElement = rootElement.firstChild(); treeElement; treeElement = treeElement.traverseNextTreeElement(false, rootElement, true)) {
 201                 if (treeElement.itemURL === itemURL) {
 202                     treeElement.revealAndSelect(true);
 203                     return;
 204                 }
 205             }
 206         }
 207
 208         var mainResource = this._target.resourceTreeModel.inspectedPageURL() && this.resourcesListTreeElement && this.resourcesListTreeElement.expanded
 209                 ? this._target.resourceTreeModel.resourceForURL(this._target.resourceTreeModel.inspectedPageURL())
 210                 : null;
 211         if (mainResource)
 212             this.showResource(mainResource);
 213     },
 214
 215     _resetWithFrames: function()
 216     {
 217         this.resourcesListTreeElement.removeChildren();
 218         this._treeElementForFrameId = {};
 219         this._reset();
 220     },
 221
 222     _reset: function()
 223     {
 224         this._domains = {};
 225         var queryViews = this._databaseQueryViews.valuesArray();
 226         for (var i = 0; i < queryViews.length; ++i)
 227             queryViews[i].removeEventListener(WebInspector.DatabaseQueryView.Events.SchemaUpdated, this._updateDatabaseTables, this);
 228         this._databaseTableViews.clear();
 229         this._databaseQueryViews.clear();
 230         this._databaseTreeElements.clear();
 231         this._domStorageViews.clear();
 232         this._domStorageTreeElements.clear();
 233         this._cookieViews = {};
 234
 235         this.databasesListTreeElement.removeChildren();
 236         this.localStorageListTreeElement.removeChildren();
 237         this.sessionStorageListTreeElement.removeChildren();
 238         this.cookieListTreeElement.removeChildren();
 239         this.cacheStorageListTreeElement.removeChildren();
 240
 241         if (this.visibleView && !(this.visibleView instanceof WebInspector.StorageCategoryView))
 242             this.visibleView.detach();
 243
 244         this._storageViewToolbar.removeToolbarItems();
 245
 246         if (this._sidebarTree.selectedTreeElement)
 247             this._sidebarTree.selectedTreeElement.deselect();
 248     },
 249
 250     _populateResourceTree: function()
 251     {
 252         this._treeElementForFrameId = {};
 253         this._target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameAdded, this._frameAdded, this);
 254         this._target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameNavigated, this._frameNavigated, this);
 255         this._target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameDetached, this._frameDetached, this);
 256         this._target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.ResourceAdded, this._resourceAdded, this);
 257
 258         /**
 259          * @param {!WebInspector.ResourceTreeFrame} frame
 260          * @this {WebInspector.ResourcesPanel}
 261          */
 262         function populateFrame(frame)
 263         {
 264             this._frameAdded({data:frame});
 265             for (var i = 0; i < frame.childFrames.length; ++i)
 266                 populateFrame.call(this, frame.childFrames[i]);
 267
 268             var resources = frame.resources();
 269             for (var i = 0; i < resources.length; ++i)
 270                 this._resourceAdded({data:resources[i]});
 271         }
 272         populateFrame.call(this, this._target.resourceTreeModel.mainFrame);
 273     },
 274
 275     _frameAdded: function(event)
 276     {
 277         var frame = event.data;
 278         var parentFrame = frame.parentFrame;
 279
 280         var parentTreeElement = parentFrame ? this._treeElementForFrameId[parentFrame.id] : this.resourcesListTreeElement;
 281         if (!parentTreeElement) {
 282             console.warn("No frame to route " + frame.url + " to.");
 283             return;
 284         }
 285
 286         var frameTreeElement = new WebInspector.FrameTreeElement(this, frame);
 287         this._treeElementForFrameId[frame.id] = frameTreeElement;
 288         parentTreeElement.appendChild(frameTreeElement);
 289     },
 290
 291     _frameDetached: function(event)
 292     {
 293         var frame = event.data;
 294         var frameTreeElement = this._treeElementForFrameId[frame.id];
 295         if (!frameTreeElement)
 296             return;
 297
 298         delete this._treeElementForFrameId[frame.id];
 299         if (frameTreeElement.parent)
 300             frameTreeElement.parent.removeChild(frameTreeElement);
 301     },
 302
 303     _resourceAdded: function(event)
 304     {
 305         var resource = event.data;
 306         var frameId = resource.frameId;
 307
 308         if (resource.statusCode >= 301 && resource.statusCode <= 303)
 309             return;
 310
 311         var frameTreeElement = this._treeElementForFrameId[frameId];
 312         if (!frameTreeElement) {
 313             // This is a frame's main resource, it will be retained
 314             // and re-added by the resource manager;
 315             return;
 316         }
 317
 318         frameTreeElement.appendResource(resource);
 319     },
 320
 321     _frameNavigated: function(event)
 322     {
 323         var frame = event.data;
 324
 325         if (!frame.parentFrame)
 326             this._reset();
 327
 328         var frameId = frame.id;
 329         var frameTreeElement = this._treeElementForFrameId[frameId];
 330         if (frameTreeElement)
 331             frameTreeElement.frameNavigated(frame);
 332
 333         var applicationCacheFrameTreeElement = this._applicationCacheFrameElements[frameId];
 334         if (applicationCacheFrameTreeElement)
 335             applicationCacheFrameTreeElement.frameNavigated(frame);
 336     },
 337
 338     /**
 339      * @param {!WebInspector.Event} event
 340      */
 341     _databaseAdded: function(event)
 342     {
 343         var database = /** @type {!WebInspector.Database} */ (event.data);
 344         this._addDatabase(database);
 345     },
 346
 347     /**
 348      * @param {!WebInspector.Database} database
 349      */
 350     _addDatabase: function(database)
 351     {
 352         var databaseTreeElement = new WebInspector.DatabaseTreeElement(this, database);
 353         this._databaseTreeElements.set(database, databaseTreeElement);
 354         this.databasesListTreeElement.appendChild(databaseTreeElement);
 355     },
 356
 357     addDocumentURL: function(url)
 358     {
 359         var parsedURL = url.asParsedURL();
 360         if (!parsedURL)
 361             return;
 362
 363         var domain = parsedURL.host;
 364         if (!this._domains[domain]) {
 365             this._domains[domain] = true;
 366
 367             var cookieDomainTreeElement = new WebInspector.CookieTreeElement(this, domain);
 368             this.cookieListTreeElement.appendChild(cookieDomainTreeElement);
 369         }
 370     },
 371
 372     /**
 373      * @param {!WebInspector.Event} event
 374      */
 375     _domStorageAdded: function(event)
 376     {
 377         var domStorage = /** @type {!WebInspector.DOMStorage} */ (event.data);
 378         this._addDOMStorage(domStorage);
 379     },
 380
 381     /**
 382      * @param {!WebInspector.DOMStorage} domStorage
 383      */
 384     _addDOMStorage: function(domStorage)
 385     {
 386         console.assert(!this._domStorageTreeElements.get(domStorage));
 387
 388         var domStorageTreeElement = new WebInspector.DOMStorageTreeElement(this, domStorage, (domStorage.isLocalStorage ? "local-storage" : "session-storage"));
 389         this._domStorageTreeElements.set(domStorage, domStorageTreeElement);
 390         if (domStorage.isLocalStorage)
 391             this.localStorageListTreeElement.appendChild(domStorageTreeElement);
 392         else
 393             this.sessionStorageListTreeElement.appendChild(domStorageTreeElement);
 394     },
 395
 396     /**
 397      * @param {!WebInspector.Event} event
 398      */
 399     _domStorageRemoved: function(event)
 400     {
 401         var domStorage = /** @type {!WebInspector.DOMStorage} */ (event.data);
 402         this._removeDOMStorage(domStorage);
 403     },
 404
 405     /**
 406      * @param {!WebInspector.DOMStorage} domStorage
 407      */
 408     _removeDOMStorage: function(domStorage)
 409     {
 410         var treeElement = this._domStorageTreeElements.get(domStorage);
 411         if (!treeElement)
 412             return;
 413         var wasSelected = treeElement.selected;
 414         var parentListTreeElement = treeElement.parent;
 415         parentListTreeElement.removeChild(treeElement);
 416         if (wasSelected)
 417             parentListTreeElement.select();
 418         this._domStorageTreeElements.remove(domStorage);
 419         this._domStorageViews.remove(domStorage);
 420     },
 421
 422     /**
 423      * @param {!WebInspector.Database} database
 424      */
 425     selectDatabase: function(database)
 426     {
 427         if (database) {
 428             this._showDatabase(database);
 429             this._databaseTreeElements.get(database).select();
 430         }
 431     },
 432
 433     /**
 434      * @param {!WebInspector.DOMStorage} domStorage
 435      */
 436     selectDOMStorage: function(domStorage)
 437     {
 438         if (domStorage) {
 439             this._showDOMStorage(domStorage);
 440             this._domStorageTreeElements.get(domStorage).select();
 441         }
 442     },
 443
 444     /**
 445      * @param {!WebInspector.Resource} resource
 446      * @param {number=} line
 447      * @param {number=} column
 448      * @return {boolean}
 449      */
 450     showResource: function(resource, line, column)
 451     {
 452         var resourceTreeElement = this._findTreeElementForResource(resource);
 453         if (resourceTreeElement)
 454             resourceTreeElement.revealAndSelect(true);
 455
 456         if (typeof line === "number") {
 457             var resourceSourceFrame = this._resourceSourceFrameViewForResource(resource);
 458             if (resourceSourceFrame)
 459                 resourceSourceFrame.revealPosition(line, column, true);
 460         }
 461         return true;
 462     },
 463
 464     _showResourceView: function(resource)
 465     {
 466         var view = this._resourceViewForResource(resource);
 467         if (!view) {
 468             this.visibleView.detach();
 469             return;
 470         }
 471         this._innerShowView(view);
 472     },
 473
 474     /**
 475      * @param {!WebInspector.Resource} resource
 476      * @return {?WebInspector.Widget}
 477      */
 478     _resourceViewForResource: function(resource)
 479     {
 480         if (resource.hasTextContent()) {
 481             var treeElement = this._findTreeElementForResource(resource);
 482             if (!treeElement)
 483                 return null;
 484             return treeElement.sourceView();
 485         }
 486
 487         switch (resource.resourceType()) {
 488         case WebInspector.resourceTypes.Image:
 489             return new WebInspector.ImageView(resource.url, resource.mimeType, resource);
 490         case WebInspector.resourceTypes.Font:
 491             return new WebInspector.FontView(resource.url, resource.mimeType, resource);
 492         default:
 493             return new WebInspector.EmptyWidget(resource.url);
 494         }
 495     },
 496
 497     /**
 498      * @param {!WebInspector.Resource} resource
 499      * @return {?WebInspector.ResourceSourceFrame}
 500      */
 501     _resourceSourceFrameViewForResource: function(resource)
 502     {
 503         var resourceView = this._resourceViewForResource(resource);
 504         if (resourceView && resourceView instanceof WebInspector.ResourceSourceFrame)
 505             return /** @type {!WebInspector.ResourceSourceFrame} */ (resourceView);
 506         return null;
 507     },
 508
 509     /**
 510      * @param {!WebInspector.Database} database
 511      * @param {string=} tableName
 512      */
 513     _showDatabase: function(database, tableName)
 514     {
 515         if (!database)
 516             return;
 517
 518         var view;
 519         if (tableName) {
 520             var tableViews = this._databaseTableViews.get(database);
 521             if (!tableViews) {
 522                 tableViews = /** @type {!Object.<string, !WebInspector.DatabaseTableView>} */ ({});
 523                 this._databaseTableViews.set(database, tableViews);
 524             }
 525             view = tableViews[tableName];
 526             if (!view) {
 527                 view = new WebInspector.DatabaseTableView(database, tableName);
 528                 tableViews[tableName] = view;
 529             }
 530         } else {
 531             view = this._databaseQueryViews.get(database);
 532             if (!view) {
 533                 view = new WebInspector.DatabaseQueryView(database);
 534                 this._databaseQueryViews.set(database, view);
 535                 view.addEventListener(WebInspector.DatabaseQueryView.Events.SchemaUpdated, this._updateDatabaseTables, this);
 536             }
 537         }
 538
 539         this._innerShowView(view);
 540     },
 541
 542     /**
 543      * @param {!WebInspector.Widget} view
 544      */
 545     showIndexedDB: function(view)
 546     {
 547         this._innerShowView(view);
 548     },
 549
 550     /**
 551      * @param {!WebInspector.Widget} view
 552      */
 553     showServiceWorkerCache: function(view)
 554     {
 555         this._innerShowView(view);
 556     },
 557
 558     /**
 559      * @param {!WebInspector.Widget} view
 560      */
 561      showServiceWorkersView: function(view)
 562     {
 563         this._innerShowView(view);
 564     },
 565
 566     /**
 567      * @param {!WebInspector.DOMStorage} domStorage
 568      */
 569     _showDOMStorage: function(domStorage)
 570     {
 571         if (!domStorage)
 572             return;
 573
 574         var view;
 575         view = this._domStorageViews.get(domStorage);
 576         if (!view) {
 577             view = new WebInspector.DOMStorageItemsView(domStorage);
 578             this._domStorageViews.set(domStorage, view);
 579         }
 580
 581         this._innerShowView(view);
 582     },
 583
 584     /**
 585      * @param {!WebInspector.CookieTreeElement} treeElement
 586      * @param {string} cookieDomain
 587      */
 588     showCookies: function(treeElement, cookieDomain)
 589     {
 590         var view = this._cookieViews[cookieDomain];
 591         if (!view) {
 592             view = new WebInspector.CookieItemsView(treeElement, cookieDomain);
 593             this._cookieViews[cookieDomain] = view;
 594         }
 595
 596         this._innerShowView(view);
 597     },
 598
 599     /**
 600      * @param {string} cookieDomain
 601      */
 602     clearCookies: function(cookieDomain)
 603     {
 604         this._cookieViews[cookieDomain].clear();
 605     },
 606
 607     showApplicationCache: function(frameId)
 608     {
 609         if (!this._applicationCacheViews[frameId])
 610             this._applicationCacheViews[frameId] = new WebInspector.ApplicationCacheItemsView(this._applicationCacheModel, frameId);
 611
 612         this._innerShowView(this._applicationCacheViews[frameId]);
 613     },
 614
 615     /**
 616      *  @param {!WebInspector.Widget} view
 617      */
 618     showFileSystem: function(view)
 619     {
 620         this._innerShowView(view);
 621     },
 622
 623     showCategoryView: function(categoryName)
 624     {
 625         if (!this._categoryView)
 626             this._categoryView = new WebInspector.StorageCategoryView();
 627         this._categoryView.setText(categoryName);
 628         this._innerShowView(this._categoryView);
 629     },
 630
 631     _innerShowView: function(view)
 632     {
 633         if (this.visibleView === view)
 634             return;
 635
 636         if (this.visibleView)
 637             this.visibleView.detach();
 638
 639         view.show(this.storageViews);
 640         this.visibleView = view;
 641
 642         this._storageViewToolbar.removeToolbarItems();
 643         var toolbarItems = view.toolbarItems ? view.toolbarItems() : null;
 644         for (var i = 0; toolbarItems && i < toolbarItems.length; ++i)
 645             this._storageViewToolbar.appendToolbarItem(toolbarItems[i]);
 646     },
 647
 648     closeVisibleView: function()
 649     {
 650         if (!this.visibleView)
 651             return;
 652         this.visibleView.detach();
 653         delete this.visibleView;
 654     },
 655
 656     _updateDatabaseTables: function(event)
 657     {
 658         var database = event.data;
 659
 660         if (!database)
 661             return;
 662
 663         var databasesTreeElement = this._databaseTreeElements.get(database);
 664         if (!databasesTreeElement)
 665             return;
 666
 667         databasesTreeElement.invalidateChildren();
 668         var tableViews = this._databaseTableViews.get(database);
 669
 670         if (!tableViews)
 671             return;
 672
 673         var tableNamesHash = {};
 674         var self = this;
 675         function tableNamesCallback(tableNames)
 676         {
 677             var tableNamesLength = tableNames.length;
 678             for (var i = 0; i < tableNamesLength; ++i)
 679                 tableNamesHash[tableNames[i]] = true;
 680
 681             for (var tableName in tableViews) {
 682                 if (!(tableName in tableNamesHash)) {
 683                     if (self.visibleView === tableViews[tableName])
 684                         self.closeVisibleView();
 685                     delete tableViews[tableName];
 686                 }
 687             }
 688         }
 689         database.getTableNames(tableNamesCallback);
 690     },
 691
 692     _populateDOMStorageTree: function()
 693     {
 694         this._domStorageModel.storages().forEach(this._addDOMStorage.bind(this));
 695         this._domStorageModel.addEventListener(WebInspector.DOMStorageModel.Events.DOMStorageAdded, this._domStorageAdded, this);
 696         this._domStorageModel.addEventListener(WebInspector.DOMStorageModel.Events.DOMStorageRemoved, this._domStorageRemoved, this);
 697     },
 698
 699     _populateApplicationCacheTree: function()
 700     {
 701         this._applicationCacheModel = new WebInspector.ApplicationCacheModel(this._target);
 702
 703         this._applicationCacheViews = {};
 704         this._applicationCacheFrameElements = {};
 705         this._applicationCacheManifestElements = {};
 706
 707         this._applicationCacheModel.addEventListener(WebInspector.ApplicationCacheModel.EventTypes.FrameManifestAdded, this._applicationCacheFrameManifestAdded, this);
 708         this._applicationCacheModel.addEventListener(WebInspector.ApplicationCacheModel.EventTypes.FrameManifestRemoved, this._applicationCacheFrameManifestRemoved, this);
 709
 710         this._applicationCacheModel.addEventListener(WebInspector.ApplicationCacheModel.EventTypes.FrameManifestStatusUpdated, this._applicationCacheFrameManifestStatusChanged, this);
 711         this._applicationCacheModel.addEventListener(WebInspector.ApplicationCacheModel.EventTypes.NetworkStateChanged, this._applicationCacheNetworkStateChanged, this);
 712     },
 713
 714     _applicationCacheFrameManifestAdded: function(event)
 715     {
 716         var frameId = event.data;
 717         var manifestURL = this._applicationCacheModel.frameManifestURL(frameId);
 718
 719         var manifestTreeElement = this._applicationCacheManifestElements[manifestURL];
 720         if (!manifestTreeElement) {
 721             manifestTreeElement = new WebInspector.ApplicationCacheManifestTreeElement(this, manifestURL);
 722             this.applicationCacheListTreeElement.appendChild(manifestTreeElement);
 723             this._applicationCacheManifestElements[manifestURL] = manifestTreeElement;
 724         }
 725
 726         var frameTreeElement = new WebInspector.ApplicationCacheFrameTreeElement(this, frameId, manifestURL);
 727         manifestTreeElement.appendChild(frameTreeElement);
 728         manifestTreeElement.expand();
 729         this._applicationCacheFrameElements[frameId] = frameTreeElement;
 730     },
 731
 732     _applicationCacheFrameManifestRemoved: function(event)
 733     {
 734         var frameId = event.data;
 735         var frameTreeElement = this._applicationCacheFrameElements[frameId];
 736         if (!frameTreeElement)
 737             return;
 738
 739         var manifestURL = frameTreeElement.manifestURL;
 740         delete this._applicationCacheFrameElements[frameId];
 741         delete this._applicationCacheViews[frameId];
 742         frameTreeElement.parent.removeChild(frameTreeElement);
 743
 744         var manifestTreeElement = this._applicationCacheManifestElements[manifestURL];
 745         if (manifestTreeElement.childCount())
 746             return;
 747
 748         delete this._applicationCacheManifestElements[manifestURL];
 749         manifestTreeElement.parent.removeChild(manifestTreeElement);
 750     },
 751
 752     _applicationCacheFrameManifestStatusChanged: function(event)
 753     {
 754         var frameId = event.data;
 755         var status = this._applicationCacheModel.frameManifestStatus(frameId);
 756
 757         if (this._applicationCacheViews[frameId])
 758             this._applicationCacheViews[frameId].updateStatus(status);
 759     },
 760
 761     _applicationCacheNetworkStateChanged: function(event)
 762     {
 763         var isNowOnline = event.data;
 764
 765         for (var manifestURL in this._applicationCacheViews)
 766             this._applicationCacheViews[manifestURL].updateNetworkState(isNowOnline);
 767     },
 768
 769     _findTreeElementForResource: function(resource)
 770     {
 771         return resource[WebInspector.FrameResourceTreeElement._symbol];
 772     },
 773
 774     showView: function(view)
 775     {
 776         if (view)
 777             this.showResource(view.resource);
 778     },
 779
 780     _onmousemove: function(event)
 781     {
 782         var nodeUnderMouse = event.target;
 783         if (!nodeUnderMouse)
 784             return;
 785
 786         var listNode = nodeUnderMouse.enclosingNodeOrSelfWithNodeName("li");
 787         if (!listNode)
 788             return;
 789
 790         var element = listNode.treeElement;
 791         if (this._previousHoveredElement === element)
 792             return;
 793
 794         if (this._previousHoveredElement) {
 795             this._previousHoveredElement.hovered = false;
 796             delete this._previousHoveredElement;
 797         }
 798
 799         if (element instanceof WebInspector.FrameTreeElement) {
 800             this._previousHoveredElement = element;
 801             element.hovered = true;
 802         }
 803     },
 804
 805     _onmouseleave: function(event)
 806     {
 807         if (this._previousHoveredElement) {
 808             this._previousHoveredElement.hovered = false;
 809             delete this._previousHoveredElement;
 810         }
 811     },
 812
 813     __proto__: WebInspector.PanelWithSidebar.prototype
 814 }
 815
 816 /**
 817  * @constructor
 818  * @implements {WebInspector.Revealer}
 819  */
 820 WebInspector.ResourcesPanel.ResourceRevealer = function()
 821 {
 822 }
 823
 824 WebInspector.ResourcesPanel.ResourceRevealer.prototype = {
 825     /**
 826      * @override
 827      * @param {!Object} resource
 828      * @param {number=} lineNumber
 829      * @return {!Promise}
 830      */
 831     reveal: function(resource, lineNumber)
 832     {
 833         if (!(resource instanceof WebInspector.Resource))
 834             return Promise.reject(new Error("Internal error: not a resource"));
 835         var panel = WebInspector.ResourcesPanel._instance();
 836         WebInspector.inspectorView.setCurrentPanel(panel);
 837         panel.showResource(resource, lineNumber);
 838         return Promise.resolve();
 839     }
 840 }
 841
 842 /**
 843  * @constructor
 844  * @extends {TreeElement}
 845  * @param {!WebInspector.ResourcesPanel} storagePanel
 846  * @param {string} title
 847  * @param {?Array.<string>=} iconClasses
 848  * @param {boolean=} expandable
 849  * @param {boolean=} noIcon
 850  */
 851 WebInspector.BaseStorageTreeElement = function(storagePanel, title, iconClasses, expandable, noIcon)
 852 {
 853     TreeElement.call(this, "", expandable);
 854     this._storagePanel = storagePanel;
 855     this._titleText = title;
 856     this._iconClasses = iconClasses;
 857     this._noIcon = noIcon;
 858 }
 859
 860 WebInspector.BaseStorageTreeElement.prototype = {
 861     onattach: function()
 862     {
 863         this.listItemElement.removeChildren();
 864         if (this._iconClasses) {
 865             for (var i = 0; i < this._iconClasses.length; ++i)
 866                 this.listItemElement.classList.add(this._iconClasses[i]);
 867         }
 868
 869         this.listItemElement.createChild("div", "selection");
 870
 871         if (!this._noIcon)
 872             this.imageElement = this.listItemElement.createChild("img", "icon");
 873
 874         this.titleElement = this.listItemElement.createChild("div", "base-storage-tree-element-title");
 875         this._titleTextNode = this.titleElement.createTextChild("");
 876         this._updateTitle();
 877         this._updateSubtitle();
 878     },
 879
 880     get displayName()
 881     {
 882         return this._displayName;
 883     },
 884
 885     _updateDisplayName: function()
 886     {
 887         this._displayName = this._titleText || "";
 888         if (this._subtitleText)
 889             this._displayName += " (" + this._subtitleText + ")";
 890     },
 891
 892     _updateTitle: function()
 893     {
 894         this._updateDisplayName();
 895
 896         if (!this.titleElement)
 897             return;
 898
 899         this._titleTextNode.textContent = this._titleText || "";
 900     },
 901
 902     _updateSubtitle: function()
 903     {
 904         this._updateDisplayName();
 905
 906         if (!this.titleElement)
 907             return;
 908
 909         if (this._subtitleText) {
 910             if (!this._subtitleElement)
 911                 this._subtitleElement = this.titleElement.createChild("span", "base-storage-tree-element-subtitle");
 912             this._subtitleElement.textContent = "(" + this._subtitleText + ")";
 913         } else if (this._subtitleElement) {
 914             this._subtitleElement.remove();
 915             delete this._subtitleElement;
 916         }
 917     },
 918
 919     /**
 920      * @override
 921      * @return {boolean}
 922      */
 923     onselect: function(selectedByUser)
 924     {
 925         if (!selectedByUser)
 926             return false;
 927         var itemURL = this.itemURL;
 928         if (itemURL)
 929             this._storagePanel._resourcesLastSelectedItemSetting.set(itemURL);
 930         return false;
 931     },
 932
 933     /**
 934      * @override
 935      */
 936     onreveal: function()
 937     {
 938         if (this.listItemElement)
 939             this.listItemElement.scrollIntoViewIfNeeded(false);
 940     },
 941
 942     get titleText()
 943     {
 944         return this._titleText;
 945     },
 946
 947     set titleText(titleText)
 948     {
 949         this._titleText = titleText;
 950         this._updateTitle();
 951     },
 952
 953     get subtitleText()
 954     {
 955         return this._subtitleText;
 956     },
 957
 958     set subtitleText(subtitleText)
 959     {
 960         this._subtitleText = subtitleText;
 961         this._updateSubtitle();
 962     },
 963
 964     __proto__: TreeElement.prototype
 965 }
 966
 967 /**
 968  * @constructor
 969  * @extends {WebInspector.BaseStorageTreeElement}
 970  * @param {!WebInspector.ResourcesPanel} storagePanel
 971  * @param {string} categoryName
 972  * @param {string} settingsKey
 973  * @param {?Array.<string>=} iconClasses
 974  * @param {boolean=} noIcon
 975  */
 976 WebInspector.StorageCategoryTreeElement = function(storagePanel, categoryName, settingsKey, iconClasses, noIcon)
 977 {
 978     WebInspector.BaseStorageTreeElement.call(this, storagePanel, categoryName, iconClasses, false, noIcon);
 979     this._expandedSetting = WebInspector.settings.createSetting("resources" + settingsKey + "Expanded", settingsKey === "Frames");
 980     this._categoryName = categoryName;
 981 }
 982
 983 WebInspector.StorageCategoryTreeElement.prototype = {
 984     /**
 985      * @return {!WebInspector.Target}
 986      */
 987     target: function()
 988     {
 989         return this._storagePanel._target;
 990     },
 991
 992     get itemURL()
 993     {
 994         return "category://" + this._categoryName;
 995     },
 996
 997     /**
 998      * @override
 999      * @return {boolean}
1000      */
1001     onselect: function(selectedByUser)
1002     {
1003         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
1004         this._storagePanel.showCategoryView(this._categoryName);
1005         return false;
1006     },
1007
1008     /**
1009      * @override
1010      */
1011     onattach: function()
1012     {
1013         WebInspector.BaseStorageTreeElement.prototype.onattach.call(this);
1014         if (this._expandedSetting.get())
1015             this.expand();
1016     },
1017
1018     /**
1019      * @override
1020      */
1021     onexpand: function()
1022     {
1023         this._expandedSetting.set(true);
1024     },
1025
1026     /**
1027      * @override
1028      */
1029     oncollapse: function()
1030     {
1031         this._expandedSetting.set(false);
1032     },
1033
1034     __proto__: WebInspector.BaseStorageTreeElement.prototype
1035 }
1036
1037 /**
1038  * @constructor
1039  * @extends {WebInspector.BaseStorageTreeElement}
1040  * @param {!WebInspector.ResourcesPanel} storagePanel
1041  * @param {!WebInspector.ResourceTreeFrame} frame
1042  */
1043 WebInspector.FrameTreeElement = function(storagePanel, frame)
1044 {
1045     WebInspector.BaseStorageTreeElement.call(this, storagePanel, "", ["frame-storage-tree-item"]);
1046     this._frame = frame;
1047     this.frameNavigated(frame);
1048 }
1049
1050 WebInspector.FrameTreeElement.prototype = {
1051     frameNavigated: function(frame)
1052     {
1053         this.removeChildren();
1054         this._frameId = frame.id;
1055
1056         this.titleText = frame.name;
1057         this.subtitleText = new WebInspector.ParsedURL(frame.url).displayName;
1058
1059         this._categoryElements = {};
1060         this._treeElementForResource = {};
1061
1062         this._storagePanel.addDocumentURL(frame.url);
1063     },
1064
1065     get itemURL()
1066     {
1067         return "frame://" + encodeURI(this.displayName);
1068     },
1069
1070     /**
1071      * @override
1072      * @return {boolean}
1073      */
1074     onselect: function(selectedByUser)
1075     {
1076         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
1077         this._storagePanel.showCategoryView(this.displayName);
1078
1079         this.listItemElement.classList.remove("hovered");
1080         WebInspector.DOMModel.hideDOMNodeHighlight();
1081         return false;
1082     },
1083
1084     set hovered(hovered)
1085     {
1086         if (hovered) {
1087             this.listItemElement.classList.add("hovered");
1088             var domModel = WebInspector.DOMModel.fromTarget(this._frame.target());
1089             if (domModel)
1090                 domModel.highlightFrame(this._frameId);
1091         } else {
1092             this.listItemElement.classList.remove("hovered");
1093             WebInspector.DOMModel.hideDOMNodeHighlight();
1094         }
1095     },
1096
1097     /**
1098      * @param {!WebInspector.Resource} resource
1099      */
1100     appendResource: function(resource)
1101     {
1102         if (resource.isHidden())
1103             return;
1104         var resourceType = resource.resourceType();
1105         var categoryName = resourceType.name();
1106         var categoryElement = resourceType === WebInspector.resourceTypes.Document ? this : this._categoryElements[categoryName];
1107         if (!categoryElement) {
1108             categoryElement = new WebInspector.StorageCategoryTreeElement(this._storagePanel, resource.resourceType().category().title, categoryName, null, true);
1109             this._categoryElements[resourceType.name()] = categoryElement;
1110             this._insertInPresentationOrder(this, categoryElement);
1111         }
1112         var resourceTreeElement = new WebInspector.FrameResourceTreeElement(this._storagePanel, resource);
1113         this._insertInPresentationOrder(categoryElement, resourceTreeElement);
1114         this._treeElementForResource[resource.url] = resourceTreeElement;
1115     },
1116
1117     /**
1118      * @param {string} url
1119      * @return {?WebInspector.Resource}
1120      */
1121     resourceByURL: function(url)
1122     {
1123         var treeElement = this._treeElementForResource[url];
1124         return treeElement ? treeElement._resource : null;
1125     },
1126
1127     appendChild: function(treeElement)
1128     {
1129         this._insertInPresentationOrder(this, treeElement);
1130     },
1131
1132     _insertInPresentationOrder: function(parentTreeElement, childTreeElement)
1133     {
1134         // Insert in the alphabetical order, first frames, then resources. Document resource goes last.
1135         function typeWeight(treeElement)
1136         {
1137             if (treeElement instanceof WebInspector.StorageCategoryTreeElement)
1138                 return 2;
1139             if (treeElement instanceof WebInspector.FrameTreeElement)
1140                 return 1;
1141             return 3;
1142         }
1143
1144         function compare(treeElement1, treeElement2)
1145         {
1146             var typeWeight1 = typeWeight(treeElement1);
1147             var typeWeight2 = typeWeight(treeElement2);
1148
1149             var result;
1150             if (typeWeight1 > typeWeight2)
1151                 result = 1;
1152             else if (typeWeight1 < typeWeight2)
1153                 result = -1;
1154             else {
1155                 var title1 = treeElement1.displayName || treeElement1.titleText;
1156                 var title2 = treeElement2.displayName || treeElement2.titleText;
1157                 result = title1.localeCompare(title2);
1158             }
1159             return result;
1160         }
1161
1162         var childCount = parentTreeElement.childCount();
1163         var i;
1164         for (i = 0; i < childCount; ++i) {
1165             if (compare(childTreeElement, parentTreeElement.childAt(i)) < 0)
1166                 break;
1167         }
1168         parentTreeElement.insertChild(childTreeElement, i);
1169     },
1170
1171     __proto__: WebInspector.BaseStorageTreeElement.prototype
1172 }
1173
1174 /**
1175  * @constructor
1176  * @extends {WebInspector.BaseStorageTreeElement}
1177  * @param {!WebInspector.ResourcesPanel} storagePanel
1178  * @param {!WebInspector.Resource} resource
1179  */
1180 WebInspector.FrameResourceTreeElement = function(storagePanel, resource)
1181 {
1182     WebInspector.BaseStorageTreeElement.call(this, storagePanel, resource.displayName, ["resource-sidebar-tree-item", "resources-type-" + resource.resourceType().name()]);
1183     /** @type {!WebInspector.Resource} */
1184     this._resource = resource;
1185     this._resource.addEventListener(WebInspector.Resource.Events.MessageAdded, this._consoleMessageAdded, this);
1186     this._resource.addEventListener(WebInspector.Resource.Events.MessagesCleared, this._consoleMessagesCleared, this);
1187     this.tooltip = resource.url;
1188     this._resource[WebInspector.FrameResourceTreeElement._symbol] = this;
1189 }
1190
1191 WebInspector.FrameResourceTreeElement._symbol = Symbol("treeElement");
1192
1193 WebInspector.FrameResourceTreeElement.prototype = {
1194     get itemURL()
1195     {
1196         return this._resource.url;
1197     },
1198
1199     /**
1200      * @override
1201      * @return {boolean}
1202      */
1203     onselect: function(selectedByUser)
1204     {
1205         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
1206         this._storagePanel._showResourceView(this._resource);
1207         return false;
1208     },
1209
1210     /**
1211      * @override
1212      * @return {boolean}
1213      */
1214     ondblclick: function(event)
1215     {
1216         InspectorFrontendHost.openInNewTab(this._resource.url);
1217         return false;
1218     },
1219
1220     /**
1221      * @override
1222      */
1223     onattach: function()
1224     {
1225         WebInspector.BaseStorageTreeElement.prototype.onattach.call(this);
1226
1227         if (this._resource.resourceType() === WebInspector.resourceTypes.Image) {
1228             var iconElement = createElementWithClass("div", "icon");
1229             var previewImage = iconElement.createChild("img", "image-resource-icon-preview");
1230             this._resource.populateImageSource(previewImage);
1231             this.listItemElement.replaceChild(iconElement, this.imageElement);
1232         }
1233
1234         this._statusElement = createElementWithClass("div", "status");
1235         this.listItemElement.insertBefore(this._statusElement, this.titleElement);
1236
1237         this.listItemElement.draggable = true;
1238         this.listItemElement.addEventListener("dragstart", this._ondragstart.bind(this), false);
1239         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
1240
1241         this._updateErrorsAndWarningsBubbles();
1242     },
1243
1244     /**
1245      * @param {!MouseEvent} event
1246      * @return {boolean}
1247      */
1248     _ondragstart: function(event)
1249     {
1250         event.dataTransfer.setData("text/plain", this._resource.content || "");
1251         event.dataTransfer.effectAllowed = "copy";
1252         return true;
1253     },
1254
1255     _handleContextMenuEvent: function(event)
1256     {
1257         var contextMenu = new WebInspector.ContextMenu(event);
1258         contextMenu.appendApplicableItems(this._resource);
1259         contextMenu.show();
1260     },
1261
1262     /**
1263      * @param {string} x
1264      */
1265     _setBubbleText: function(x)
1266     {
1267         if (!this._bubbleElement)
1268             this._bubbleElement = this._statusElement.createChild("div", "bubble-repeat-count");
1269         this._bubbleElement.textContent = x;
1270     },
1271
1272     _resetBubble: function()
1273     {
1274         if (this._bubbleElement) {
1275             this._bubbleElement.textContent = "";
1276             this._bubbleElement.classList.remove("warning");
1277             this._bubbleElement.classList.remove("error");
1278         }
1279     },
1280
1281     _updateErrorsAndWarningsBubbles: function()
1282     {
1283         if (this._storagePanel.currentQuery)
1284             return;
1285
1286         this._resetBubble();
1287
1288         if (this._resource.warnings || this._resource.errors)
1289             this._setBubbleText(String(this._resource.warnings + this._resource.errors));
1290
1291         if (this._resource.warnings)
1292             this._bubbleElement.classList.add("warning");
1293
1294         if (this._resource.errors)
1295             this._bubbleElement.classList.add("error");
1296     },
1297
1298     _consoleMessagesCleared: function()
1299     {
1300         // FIXME: move to the SourceFrame.
1301         if (this._sourceView)
1302             this._sourceView.clearMessages();
1303
1304         this._updateErrorsAndWarningsBubbles();
1305     },
1306
1307     _consoleMessageAdded: function(event)
1308     {
1309         var msg = event.data;
1310         if (this._sourceView)
1311             this._sourceView.addMessage(msg);
1312         this._updateErrorsAndWarningsBubbles();
1313     },
1314
1315     /**
1316      * @return {!WebInspector.ResourceSourceFrame}
1317      */
1318     sourceView: function()
1319     {
1320         if (!this._sourceView) {
1321             var sourceFrame = new WebInspector.ResourceSourceFrame(this._resource);
1322             sourceFrame.setHighlighterType(this._resource.canonicalMimeType());
1323             this._sourceView = sourceFrame;
1324             if (this._resource.messages) {
1325                 for (var i = 0; i < this._resource.messages.length; i++)
1326                     this._sourceView.addPersistentMessage(this._resource.messages[i]);
1327             }
1328         }
1329         return this._sourceView;
1330     },
1331
1332     __proto__: WebInspector.BaseStorageTreeElement.prototype
1333 }
1334
1335 /**
1336  * @constructor
1337  * @extends {WebInspector.BaseStorageTreeElement}
1338  * @param {!WebInspector.ResourcesPanel} storagePanel
1339  * @param {!WebInspector.Database} database
1340  */
1341 WebInspector.DatabaseTreeElement = function(storagePanel, database)
1342 {
1343     WebInspector.BaseStorageTreeElement.call(this, storagePanel, database.name, ["database-storage-tree-item"], true);
1344     this._database = database;
1345 }
1346
1347 WebInspector.DatabaseTreeElement.prototype = {
1348     get itemURL()
1349     {
1350         return "database://" + encodeURI(this._database.name);
1351     },
1352
1353     /**
1354      * @override
1355      * @return {boolean}
1356      */
1357     onselect: function(selectedByUser)
1358     {
1359         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
1360         this._storagePanel._showDatabase(this._database);
1361         return false;
1362     },
1363
1364     /**
1365      * @override
1366      */
1367     onexpand: function()
1368     {
1369         this._updateChildren();
1370     },
1371
1372     _updateChildren: function()
1373     {
1374         this.removeChildren();
1375
1376         /**
1377          * @param {!Array.<string>} tableNames
1378          * @this {WebInspector.DatabaseTreeElement}
1379          */
1380         function tableNamesCallback(tableNames)
1381         {
1382             var tableNamesLength = tableNames.length;
1383             for (var i = 0; i < tableNamesLength; ++i)
1384                 this.appendChild(new WebInspector.DatabaseTableTreeElement(this._storagePanel, this._database, tableNames[i]));
1385         }
1386         this._database.getTableNames(tableNamesCallback.bind(this));
1387     },
1388
1389     __proto__: WebInspector.BaseStorageTreeElement.prototype
1390 }
1391
1392 /**
1393  * @constructor
1394  * @extends {WebInspector.BaseStorageTreeElement}
1395  */
1396 WebInspector.DatabaseTableTreeElement = function(storagePanel, database, tableName)
1397 {
1398     WebInspector.BaseStorageTreeElement.call(this, storagePanel, tableName, ["database-table-storage-tree-item"]);
1399     this._database = database;
1400     this._tableName = tableName;
1401 }
1402
1403 WebInspector.DatabaseTableTreeElement.prototype = {
1404     get itemURL()
1405     {
1406         return "database://" + encodeURI(this._database.name) + "/" + encodeURI(this._tableName);
1407     },
1408
1409     /**
1410      * @override
1411      * @return {boolean}
1412      */
1413     onselect: function(selectedByUser)
1414     {
1415         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
1416         this._storagePanel._showDatabase(this._database, this._tableName);
1417         return false;
1418     },
1419
1420     __proto__: WebInspector.BaseStorageTreeElement.prototype
1421 }
1422
1423
1424 /**
1425  * @constructor
1426  * @extends {WebInspector.StorageCategoryTreeElement}
1427  * @param {!WebInspector.ResourcesPanel} storagePanel
1428  */
1429 WebInspector.ServiceWorkerCacheTreeElement = function(storagePanel)
1430 {
1431     WebInspector.StorageCategoryTreeElement.call(this, storagePanel, WebInspector.UIString("Cache Storage"), "CacheStorage", ["service-worker-cache-storage-tree-item"]);
1432 }
1433
1434 WebInspector.ServiceWorkerCacheTreeElement.prototype = {
1435     _initialize: function()
1436     {
1437         /** @type {!Array.<!WebInspector.SWCacheTreeElement>} */
1438         this._swCacheTreeElements = [];
1439         var target = this._storagePanel._target;
1440         if (target) {
1441             var model = WebInspector.ServiceWorkerCacheModel.fromTarget(target);
1442             var caches = model.caches();
1443             for (var cache of caches)
1444                 this._addCache(model, cache);
1445         }
1446         WebInspector.targetManager.addModelListener(WebInspector.ServiceWorkerCacheModel, WebInspector.ServiceWorkerCacheModel.EventTypes.CacheAdded, this._cacheAdded, this);
1447         WebInspector.targetManager.addModelListener(WebInspector.ServiceWorkerCacheModel, WebInspector.ServiceWorkerCacheModel.EventTypes.CacheRemoved, this._cacheRemoved, this);
1448     },
1449
1450     onattach: function()
1451     {
1452         WebInspector.StorageCategoryTreeElement.prototype.onattach.call(this);
1453         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
1454     },
1455
1456     _handleContextMenuEvent: function(event)
1457     {
1458         var contextMenu = new WebInspector.ContextMenu(event);
1459         contextMenu.appendItem(WebInspector.UIString("Refresh Caches"), this._refreshCaches.bind(this));
1460         contextMenu.show();
1461     },
1462
1463     _refreshCaches: function()
1464     {
1465         var target = this._storagePanel._target;
1466         if (target) {
1467             var model = WebInspector.ServiceWorkerCacheModel.fromTarget(target);
1468             model.refreshCacheNames();
1469         }
1470     },
1471
1472     /**
1473      * @param {!WebInspector.Event} event
1474      */
1475     _cacheAdded: function(event)
1476     {
1477         var cache = /** @type {!WebInspector.ServiceWorkerCacheModel.Cache} */ (event.data);
1478         var model = /** @type {!WebInspector.ServiceWorkerCacheModel} */ (event.target);
1479         this._addCache(model, cache);
1480     },
1481
1482     /**
1483      * @param {!WebInspector.ServiceWorkerCacheModel} model
1484      * @param {!WebInspector.ServiceWorkerCacheModel.Cache} cache
1485      */
1486     _addCache: function(model, cache)
1487     {
1488         var swCacheTreeElement = new WebInspector.SWCacheTreeElement(this._storagePanel, model, cache);
1489         this._swCacheTreeElements.push(swCacheTreeElement);
1490         this.appendChild(swCacheTreeElement);
1491     },
1492
1493     /**
1494      * @param {!WebInspector.Event} event
1495      */
1496     _cacheRemoved: function(event)
1497     {
1498         var cache = /** @type {!WebInspector.ServiceWorkerCacheModel.Cache} */ (event.data);
1499         var model = /** @type {!WebInspector.ServiceWorkerCacheModel} */ (event.target);
1500
1501         var swCacheTreeElement = this._cacheTreeElement(model, cache);
1502         if (!swCacheTreeElement)
1503             return;
1504
1505         swCacheTreeElement.clear();
1506         this.removeChild(swCacheTreeElement);
1507         this._swCacheTreeElements.remove(swCacheTreeElement);
1508     },
1509
1510     /**
1511      * @param {!WebInspector.ServiceWorkerCacheModel} model
1512      * @param {!WebInspector.ServiceWorkerCacheModel.Cache} cache
1513      * @return {?WebInspector.SWCacheTreeElement}
1514      */
1515     _cacheTreeElement: function(model, cache)
1516     {
1517         var index = -1;
1518         for (var i = 0; i < this._swCacheTreeElements.length; ++i) {
1519             if (this._swCacheTreeElements[i]._cache.equals(cache) && this._swCacheTreeElements[i]._model === model) {
1520                 index = i;
1521                 break;
1522             }
1523         }
1524         if (index !== -1)
1525             return this._swCacheTreeElements[i];
1526         return null;
1527     },
1528
1529     __proto__: WebInspector.StorageCategoryTreeElement.prototype
1530 }
1531
1532 /**
1533  * @constructor
1534  * @extends {WebInspector.BaseStorageTreeElement}
1535  * @param {!WebInspector.ResourcesPanel} storagePanel
1536  * @param {!WebInspector.ServiceWorkerCacheModel} model
1537  * @param {!WebInspector.ServiceWorkerCacheModel.Cache} cache
1538  */
1539 WebInspector.SWCacheTreeElement = function(storagePanel, model, cache)
1540 {
1541     WebInspector.BaseStorageTreeElement.call(this, storagePanel, cache.cacheName + " - " + cache.securityOrigin, ["service-worker-cache-tree-item"]);
1542     this._model = model;
1543     this._cache = cache;
1544 }
1545
1546 WebInspector.SWCacheTreeElement.prototype = {
1547     get itemURL()
1548     {
1549         // I don't think this will work at all.
1550         return "cache://" + this._cache.cacheId;
1551     },
1552
1553     onattach: function()
1554     {
1555         WebInspector.BaseStorageTreeElement.prototype.onattach.call(this);
1556         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
1557     },
1558
1559     _handleContextMenuEvent: function(event)
1560     {
1561         var contextMenu = new WebInspector.ContextMenu(event);
1562         contextMenu.appendItem(WebInspector.UIString("Delete"), this._clearCache.bind(this));
1563         contextMenu.show();
1564     },
1565
1566     _clearCache: function()
1567     {
1568         this._model.deleteCache(this._cache);
1569     },
1570
1571     /**
1572      * @param {!WebInspector.ServiceWorkerCacheModel.Cache} cache
1573      */
1574     update: function(cache)
1575     {
1576         this._cache = cache;
1577         if (this._view)
1578             this._view.update(cache);
1579     },
1580
1581     /**
1582      * @override
1583      * @return {boolean}
1584      */
1585     onselect: function(selectedByUser)
1586     {
1587         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
1588         if (!this._view)
1589             this._view = new WebInspector.ServiceWorkerCacheView(this._model, this._cache);
1590
1591         this._storagePanel.showServiceWorkerCache(this._view);
1592         return false;
1593     },
1594
1595     clear: function()
1596     {
1597         if (this._view)
1598             this._view.clear();
1599     },
1600
1601     __proto__: WebInspector.BaseStorageTreeElement.prototype
1602 }
1603
1604
1605 /**
1606  * @constructor
1607  * @extends {WebInspector.StorageCategoryTreeElement}
1608  * @param {!WebInspector.ResourcesPanel} storagePanel
1609  */
1610 WebInspector.ServiceWorkersTreeElement = function(storagePanel)
1611 {
1612     WebInspector.StorageCategoryTreeElement.call(this, storagePanel, WebInspector.UIString("Service Workers"), "Service Workers", ["service-workers-tree-item"]);
1613 }
1614
1615 WebInspector.ServiceWorkersTreeElement.prototype = {
1616     /**
1617      * @override
1618      * @return {boolean}
1619      */
1620     onselect: function(selectedByUser)
1621     {
1622         WebInspector.StorageCategoryTreeElement.prototype.onselect.call(this, selectedByUser);
1623         if (!this._view)
1624             this._view = new WebInspector.ServiceWorkersView();
1625         this._storagePanel.showServiceWorkersView(this._view);
1626         return false;
1627     },
1628
1629     __proto__: WebInspector.StorageCategoryTreeElement.prototype
1630 }
1631
1632
1633 /**
1634  * @constructor
1635  * @extends {WebInspector.StorageCategoryTreeElement}
1636  * @param {!WebInspector.ResourcesPanel} storagePanel
1637  */
1638 WebInspector.IndexedDBTreeElement = function(storagePanel)
1639 {
1640     WebInspector.StorageCategoryTreeElement.call(this, storagePanel, WebInspector.UIString("IndexedDB"), "IndexedDB", ["indexed-db-storage-tree-item"]);
1641 }
1642
1643 WebInspector.IndexedDBTreeElement.prototype = {
1644     _initialize: function()
1645     {
1646         WebInspector.targetManager.addModelListener(WebInspector.IndexedDBModel, WebInspector.IndexedDBModel.EventTypes.DatabaseAdded, this._indexedDBAdded, this);
1647         WebInspector.targetManager.addModelListener(WebInspector.IndexedDBModel, WebInspector.IndexedDBModel.EventTypes.DatabaseRemoved, this._indexedDBRemoved, this);
1648         WebInspector.targetManager.addModelListener(WebInspector.IndexedDBModel, WebInspector.IndexedDBModel.EventTypes.DatabaseLoaded, this._indexedDBLoaded, this);
1649         /** @type {!Array.<!WebInspector.IDBDatabaseTreeElement>} */
1650         this._idbDatabaseTreeElements = [];
1651
1652         var targets = WebInspector.targetManager.targets();
1653         for (var i = 0; i < targets.length; ++i) {
1654             var indexedDBModel = WebInspector.IndexedDBModel.fromTarget(targets[i]);
1655             var databases = indexedDBModel.databases();
1656             for (var j = 0; j < databases.length; ++j)
1657                 this._addIndexedDB(indexedDBModel, databases[j]);
1658         }
1659     },
1660
1661     onattach: function()
1662     {
1663         WebInspector.StorageCategoryTreeElement.prototype.onattach.call(this);
1664         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
1665     },
1666
1667     _handleContextMenuEvent: function(event)
1668     {
1669         var contextMenu = new WebInspector.ContextMenu(event);
1670         contextMenu.appendItem(WebInspector.UIString("Refresh IndexedDB"), this.refreshIndexedDB.bind(this));
1671         contextMenu.show();
1672     },
1673
1674     refreshIndexedDB: function()
1675     {
1676         var targets = WebInspector.targetManager.targets();
1677         for (var i = 0; i < targets.length; ++i)
1678             WebInspector.IndexedDBModel.fromTarget(targets[i]).refreshDatabaseNames();
1679     },
1680
1681     /**
1682      * @param {!WebInspector.Event} event
1683      */
1684     _indexedDBAdded: function(event)
1685     {
1686         var databaseId = /** @type {!WebInspector.IndexedDBModel.DatabaseId} */ (event.data);
1687         var model = /** @type {!WebInspector.IndexedDBModel} */ (event.target);
1688         this._addIndexedDB(model, databaseId);
1689     },
1690
1691     /**
1692      * @param {!WebInspector.IndexedDBModel} model
1693      * @param {!WebInspector.IndexedDBModel.DatabaseId} databaseId
1694      */
1695     _addIndexedDB: function(model, databaseId)
1696     {
1697         var idbDatabaseTreeElement = new WebInspector.IDBDatabaseTreeElement(this._storagePanel, model, databaseId);
1698         this._idbDatabaseTreeElements.push(idbDatabaseTreeElement);
1699         this.appendChild(idbDatabaseTreeElement);
1700         model.refreshDatabase(databaseId);
1701     },
1702
1703     /**
1704      * @param {!WebInspector.Event} event
1705      */
1706     _indexedDBRemoved: function(event)
1707     {
1708         var databaseId = /** @type {!WebInspector.IndexedDBModel.DatabaseId} */ (event.data);
1709         var model = /** @type {!WebInspector.IndexedDBModel} */ (event.target);
1710
1711         var idbDatabaseTreeElement = this._idbDatabaseTreeElement(model, databaseId)
1712         if (!idbDatabaseTreeElement)
1713             return;
1714
1715         idbDatabaseTreeElement.clear();
1716         this.removeChild(idbDatabaseTreeElement);
1717         this._idbDatabaseTreeElements.remove(idbDatabaseTreeElement);
1718     },
1719
1720     /**
1721      * @param {!WebInspector.Event} event
1722      */
1723     _indexedDBLoaded: function(event)
1724     {
1725         var database = /** @type {!WebInspector.IndexedDBModel.Database} */ (event.data);
1726         var model = /** @type {!WebInspector.IndexedDBModel} */ (event.target);
1727
1728         var idbDatabaseTreeElement = this._idbDatabaseTreeElement(model, database.databaseId);
1729         if (!idbDatabaseTreeElement)
1730             return;
1731
1732         idbDatabaseTreeElement.update(database);
1733     },
1734
1735     /**
1736      * @param {!WebInspector.IndexedDBModel.DatabaseId} databaseId
1737      * @param {!WebInspector.IndexedDBModel} model
1738      * @return {?WebInspector.IDBDatabaseTreeElement}
1739      */
1740     _idbDatabaseTreeElement: function(model, databaseId)
1741     {
1742         var index = -1;
1743         for (var i = 0; i < this._idbDatabaseTreeElements.length; ++i) {
1744             if (this._idbDatabaseTreeElements[i]._databaseId.equals(databaseId) && this._idbDatabaseTreeElements[i]._model === model) {
1745                 index = i;
1746                 break;
1747             }
1748         }
1749         if (index !== -1)
1750             return this._idbDatabaseTreeElements[i];
1751         return null;
1752     },
1753
1754     __proto__: WebInspector.StorageCategoryTreeElement.prototype
1755 }
1756
1757 /**
1758  * @constructor
1759  * @extends {WebInspector.StorageCategoryTreeElement}
1760  * @param {!WebInspector.ResourcesPanel} storagePanel
1761  */
1762 WebInspector.FileSystemListTreeElement = function(storagePanel)
1763 {
1764     WebInspector.StorageCategoryTreeElement.call(this, storagePanel, WebInspector.UIString("FileSystem"), "FileSystem", ["file-system-storage-tree-item"]);
1765 }
1766
1767 WebInspector.FileSystemListTreeElement.prototype = {
1768     _initialize: function()
1769     {
1770         this._refreshFileSystem();
1771     },
1772
1773     onattach: function()
1774     {
1775         WebInspector.StorageCategoryTreeElement.prototype.onattach.call(this);
1776         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
1777     },
1778
1779     _handleContextMenuEvent: function(event)
1780     {
1781         var contextMenu = new WebInspector.ContextMenu(event);
1782         contextMenu.appendItem(WebInspector.UIString.capitalize("Refresh FileSystem ^list"), this._refreshFileSystem.bind(this));
1783         contextMenu.show();
1784     },
1785
1786     _fileSystemAdded: function(event)
1787     {
1788         var fileSystem = /** @type {!WebInspector.FileSystemModel.FileSystem} */ (event.data);
1789         var fileSystemTreeElement = new WebInspector.FileSystemTreeElement(this._storagePanel, fileSystem);
1790         this.appendChild(fileSystemTreeElement);
1791     },
1792
1793     _fileSystemRemoved: function(event)
1794     {
1795         var fileSystem = /** @type {!WebInspector.FileSystemModel.FileSystem} */ (event.data);
1796         var fileSystemTreeElement = this._fileSystemTreeElementByName(fileSystem.name);
1797         if (!fileSystemTreeElement)
1798             return;
1799         fileSystemTreeElement.clear();
1800         this.removeChild(fileSystemTreeElement);
1801     },
1802
1803     _fileSystemTreeElementByName: function(fileSystemName)
1804     {
1805         for (var child of this.children()) {
1806             var fschild = /** @type {!WebInspector.FileSystemTreeElement} */ (child);
1807             if (fschild.fileSystemName === fileSystemName)
1808                 return fschild;
1809         }
1810         return null;
1811     },
1812
1813     _refreshFileSystem: function()
1814     {
1815         if (!this._fileSystemModel) {
1816             this._fileSystemModel = new WebInspector.FileSystemModel(this.target());
1817             this._fileSystemModel.addEventListener(WebInspector.FileSystemModel.EventTypes.FileSystemAdded, this._fileSystemAdded, this);
1818             this._fileSystemModel.addEventListener(WebInspector.FileSystemModel.EventTypes.FileSystemRemoved, this._fileSystemRemoved, this);
1819         }
1820
1821         this._fileSystemModel.refreshFileSystemList();
1822     },
1823
1824     __proto__: WebInspector.StorageCategoryTreeElement.prototype
1825 }
1826
1827 /**
1828  * @constructor
1829  * @extends {WebInspector.BaseStorageTreeElement}
1830  * @param {!WebInspector.ResourcesPanel} storagePanel
1831  * @param {!WebInspector.IndexedDBModel} model
1832  * @param {!WebInspector.IndexedDBModel.DatabaseId} databaseId
1833  */
1834 WebInspector.IDBDatabaseTreeElement = function(storagePanel, model, databaseId)
1835 {
1836     WebInspector.BaseStorageTreeElement.call(this, storagePanel, databaseId.name + " - " + databaseId.securityOrigin, ["indexed-db-storage-tree-item"]);
1837     this._model = model;
1838     this._databaseId = databaseId;
1839     this._idbObjectStoreTreeElements = {};
1840 }
1841
1842 WebInspector.IDBDatabaseTreeElement.prototype = {
1843     get itemURL()
1844     {
1845         return "indexedDB://" + this._databaseId.securityOrigin + "/" + this._databaseId.name;
1846     },
1847
1848     onattach: function()
1849     {
1850         WebInspector.BaseStorageTreeElement.prototype.onattach.call(this);
1851         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
1852     },
1853
1854     _handleContextMenuEvent: function(event)
1855     {
1856         var contextMenu = new WebInspector.ContextMenu(event);
1857         contextMenu.appendItem(WebInspector.UIString("Refresh IndexedDB"), this._refreshIndexedDB.bind(this));
1858         contextMenu.show();
1859     },
1860
1861     _refreshIndexedDB: function()
1862     {
1863         this._model.refreshDatabaseNames();
1864     },
1865
1866     /**
1867      * @param {!WebInspector.IndexedDBModel.Database} database
1868      */
1869     update: function(database)
1870     {
1871         this._database = database;
1872         var objectStoreNames = {};
1873         for (var objectStoreName in this._database.objectStores) {
1874             var objectStore = this._database.objectStores[objectStoreName];
1875             objectStoreNames[objectStore.name] = true;
1876             if (!this._idbObjectStoreTreeElements[objectStore.name]) {
1877                 var idbObjectStoreTreeElement = new WebInspector.IDBObjectStoreTreeElement(this._storagePanel, this._model, this._databaseId, objectStore);
1878                 this._idbObjectStoreTreeElements[objectStore.name] = idbObjectStoreTreeElement;
1879                 this.appendChild(idbObjectStoreTreeElement);
1880             }
1881             this._idbObjectStoreTreeElements[objectStore.name].update(objectStore);
1882         }
1883         for (var objectStoreName in this._idbObjectStoreTreeElements) {
1884             if (!objectStoreNames[objectStoreName])
1885                 this._objectStoreRemoved(objectStoreName);
1886         }
1887
1888         if (this._view)
1889             this._view.update(database);
1890
1891         this._updateTooltip();
1892     },
1893
1894     _updateTooltip: function()
1895     {
1896         this.tooltip = WebInspector.UIString("Version") + ": " + this._database.version;
1897     },
1898
1899     /**
1900      * @override
1901      * @return {boolean}
1902      */
1903     onselect: function(selectedByUser)
1904     {
1905         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
1906         if (!this._view)
1907             this._view = new WebInspector.IDBDatabaseView(this._database);
1908
1909         this._storagePanel.showIndexedDB(this._view);
1910         return false;
1911     },
1912
1913     /**
1914      * @param {string} objectStoreName
1915      */
1916     _objectStoreRemoved: function(objectStoreName)
1917     {
1918         var objectStoreTreeElement = this._idbObjectStoreTreeElements[objectStoreName];
1919         objectStoreTreeElement.clear();
1920         this.removeChild(objectStoreTreeElement);
1921         delete this._idbObjectStoreTreeElements[objectStoreName];
1922     },
1923
1924     clear: function()
1925     {
1926         for (var objectStoreName in this._idbObjectStoreTreeElements)
1927             this._objectStoreRemoved(objectStoreName);
1928     },
1929
1930     __proto__: WebInspector.BaseStorageTreeElement.prototype
1931 }
1932
1933 /**
1934  * @constructor
1935  * @extends {WebInspector.BaseStorageTreeElement}
1936  * @param {!WebInspector.ResourcesPanel} storagePanel
1937  * @param {!WebInspector.IndexedDBModel} model
1938  * @param {!WebInspector.IndexedDBModel.DatabaseId} databaseId
1939  * @param {!WebInspector.IndexedDBModel.ObjectStore} objectStore
1940  */
1941 WebInspector.IDBObjectStoreTreeElement = function(storagePanel, model, databaseId, objectStore)
1942 {
1943     WebInspector.BaseStorageTreeElement.call(this, storagePanel, objectStore.name, ["indexed-db-object-store-storage-tree-item"]);
1944     this._model = model;
1945     this._databaseId = databaseId;
1946     this._idbIndexTreeElements = {};
1947 }
1948
1949 WebInspector.IDBObjectStoreTreeElement.prototype = {
1950     get itemURL()
1951     {
1952         return "indexedDB://" + this._databaseId.securityOrigin + "/" + this._databaseId.name + "/" + this._objectStore.name;
1953     },
1954
1955     onattach: function()
1956     {
1957         WebInspector.BaseStorageTreeElement.prototype.onattach.call(this);
1958         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
1959     },
1960
1961     _handleContextMenuEvent: function(event)
1962     {
1963         var contextMenu = new WebInspector.ContextMenu(event);
1964         contextMenu.appendItem(WebInspector.UIString("Clear"), this._clearObjectStore.bind(this));
1965         contextMenu.show();
1966     },
1967
1968     _clearObjectStore: function()
1969     {
1970         /**
1971          * @this {WebInspector.IDBObjectStoreTreeElement}
1972          */
1973         function callback() {
1974             this.update(this._objectStore);
1975         }
1976         this._model.clearObjectStore(this._databaseId, this._objectStore.name, callback.bind(this));
1977     },
1978
1979    /**
1980      * @param {!WebInspector.IndexedDBModel.ObjectStore} objectStore
1981      */
1982     update: function(objectStore)
1983     {
1984         this._objectStore = objectStore;
1985
1986         var indexNames = {};
1987         for (var indexName in this._objectStore.indexes) {
1988             var index = this._objectStore.indexes[indexName];
1989             indexNames[index.name] = true;
1990             if (!this._idbIndexTreeElements[index.name]) {
1991                 var idbIndexTreeElement = new WebInspector.IDBIndexTreeElement(this._storagePanel, this._model, this._databaseId, this._objectStore, index);
1992                 this._idbIndexTreeElements[index.name] = idbIndexTreeElement;
1993                 this.appendChild(idbIndexTreeElement);
1994             }
1995             this._idbIndexTreeElements[index.name].update(index);
1996         }
1997         for (var indexName in this._idbIndexTreeElements) {
1998             if (!indexNames[indexName])
1999                 this._indexRemoved(indexName);
2000         }
2001         for (var indexName in this._idbIndexTreeElements) {
2002             if (!indexNames[indexName]) {
2003                 this.removeChild(this._idbIndexTreeElements[indexName]);
2004                 delete this._idbIndexTreeElements[indexName];
2005             }
2006         }
2007
2008         if (this.childCount())
2009             this.expand();
2010
2011         if (this._view)
2012             this._view.update(this._objectStore);
2013
2014         this._updateTooltip();
2015     },
2016
2017     _updateTooltip: function()
2018     {
2019
2020         var keyPathString = this._objectStore.keyPathString;
2021         var tooltipString = keyPathString !== null ? (WebInspector.UIString("Key path: ") + keyPathString) : "";
2022         if (this._objectStore.autoIncrement)
2023             tooltipString += "\n" + WebInspector.UIString("autoIncrement");
2024         this.tooltip = tooltipString;
2025     },
2026
2027     /**
2028      * @override
2029      * @return {boolean}
2030      */
2031     onselect: function(selectedByUser)
2032     {
2033         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
2034         if (!this._view)
2035             this._view = new WebInspector.IDBDataView(this._model, this._databaseId, this._objectStore, null);
2036
2037         this._storagePanel.showIndexedDB(this._view);
2038         return false;
2039     },
2040
2041     /**
2042      * @param {string} indexName
2043      */
2044     _indexRemoved: function(indexName)
2045     {
2046         var indexTreeElement = this._idbIndexTreeElements[indexName];
2047         indexTreeElement.clear();
2048         this.removeChild(indexTreeElement);
2049         delete this._idbIndexTreeElements[indexName];
2050     },
2051
2052     clear: function()
2053     {
2054         for (var indexName in this._idbIndexTreeElements)
2055             this._indexRemoved(indexName);
2056         if (this._view)
2057             this._view.clear();
2058     },
2059
2060     __proto__: WebInspector.BaseStorageTreeElement.prototype
2061 }
2062
2063 /**
2064  * @constructor
2065  * @extends {WebInspector.BaseStorageTreeElement}
2066  * @param {!WebInspector.ResourcesPanel} storagePanel
2067  * @param {!WebInspector.IndexedDBModel} model
2068  * @param {!WebInspector.IndexedDBModel.DatabaseId} databaseId
2069  * @param {!WebInspector.IndexedDBModel.ObjectStore} objectStore
2070  * @param {!WebInspector.IndexedDBModel.Index} index
2071  */
2072 WebInspector.IDBIndexTreeElement = function(storagePanel, model, databaseId, objectStore, index)
2073 {
2074     WebInspector.BaseStorageTreeElement.call(this, storagePanel, index.name, ["indexed-db-index-storage-tree-item"]);
2075     this._model = model;
2076     this._databaseId = databaseId;
2077     this._objectStore = objectStore;
2078     this._index = index;
2079 }
2080
2081 WebInspector.IDBIndexTreeElement.prototype = {
2082     get itemURL()
2083     {
2084         return "indexedDB://" + this._databaseId.securityOrigin + "/" + this._databaseId.name + "/" + this._objectStore.name + "/" + this._index.name;
2085     },
2086
2087     /**
2088      * @param {!WebInspector.IndexedDBModel.Index} index
2089      */
2090     update: function(index)
2091     {
2092         this._index = index;
2093
2094         if (this._view)
2095             this._view.update(this._index);
2096
2097         this._updateTooltip();
2098     },
2099
2100     _updateTooltip: function()
2101     {
2102         var tooltipLines = [];
2103         var keyPathString = this._index.keyPathString;
2104         tooltipLines.push(WebInspector.UIString("Key path: ") + keyPathString);
2105         if (this._index.unique)
2106             tooltipLines.push(WebInspector.UIString("unique"));
2107         if (this._index.multiEntry)
2108             tooltipLines.push(WebInspector.UIString("multiEntry"));
2109         this.tooltip = tooltipLines.join("\n");
2110     },
2111
2112     /**
2113      * @override
2114      * @return {boolean}
2115      */
2116     onselect: function(selectedByUser)
2117     {
2118         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
2119         if (!this._view)
2120             this._view = new WebInspector.IDBDataView(this._model, this._databaseId, this._objectStore, this._index);
2121
2122         this._storagePanel.showIndexedDB(this._view);
2123         return false;
2124     },
2125
2126     clear: function()
2127     {
2128         if (this._view)
2129             this._view.clear();
2130     },
2131
2132     __proto__: WebInspector.BaseStorageTreeElement.prototype
2133 }
2134
2135 /**
2136  * @constructor
2137  * @extends {WebInspector.BaseStorageTreeElement}
2138  */
2139 WebInspector.DOMStorageTreeElement = function(storagePanel, domStorage, className)
2140 {
2141     WebInspector.BaseStorageTreeElement.call(this, storagePanel, domStorage.securityOrigin ? domStorage.securityOrigin : WebInspector.UIString("Local Files"), ["domstorage-storage-tree-item", className]);
2142     this._domStorage = domStorage;
2143 }
2144
2145 WebInspector.DOMStorageTreeElement.prototype = {
2146     get itemURL()
2147     {
2148         return "storage://" + this._domStorage.securityOrigin + "/" + (this._domStorage.isLocalStorage ? "local" : "session");
2149     },
2150
2151     /**
2152      * @override
2153      * @return {boolean}
2154      */
2155     onselect: function(selectedByUser)
2156     {
2157         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
2158         this._storagePanel._showDOMStorage(this._domStorage);
2159         return false;
2160     },
2161
2162     __proto__: WebInspector.BaseStorageTreeElement.prototype
2163 }
2164
2165 /**
2166  * @constructor
2167  * @extends {WebInspector.BaseStorageTreeElement}
2168  */
2169 WebInspector.CookieTreeElement = function(storagePanel, cookieDomain)
2170 {
2171     WebInspector.BaseStorageTreeElement.call(this, storagePanel, cookieDomain ? cookieDomain : WebInspector.UIString("Local Files"), ["cookie-storage-tree-item"]);
2172     this._cookieDomain = cookieDomain;
2173 }
2174
2175 WebInspector.CookieTreeElement.prototype = {
2176     get itemURL()
2177     {
2178         return "cookies://" + this._cookieDomain;
2179     },
2180
2181     onattach: function()
2182     {
2183         WebInspector.BaseStorageTreeElement.prototype.onattach.call(this);
2184         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
2185     },
2186
2187     /**
2188      * @param {!Event} event
2189      */
2190     _handleContextMenuEvent: function(event)
2191     {
2192         var contextMenu = new WebInspector.ContextMenu(event);
2193         contextMenu.appendItem(WebInspector.UIString("Clear"), this._clearCookies.bind(this));
2194         contextMenu.show();
2195     },
2196
2197     /**
2198      * @param {string} domain
2199      */
2200     _clearCookies: function(domain)
2201     {
2202         this._storagePanel.clearCookies(this._cookieDomain);
2203     },
2204
2205     /**
2206      * @override
2207      * @return {boolean}
2208      */
2209     onselect: function(selectedByUser)
2210     {
2211         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
2212         this._storagePanel.showCookies(this, this._cookieDomain);
2213         return false;
2214     },
2215
2216     __proto__: WebInspector.BaseStorageTreeElement.prototype
2217 }
2218
2219 /**
2220  * @constructor
2221  * @extends {WebInspector.BaseStorageTreeElement}
2222  */
2223 WebInspector.ApplicationCacheManifestTreeElement = function(storagePanel, manifestURL)
2224 {
2225     var title = new WebInspector.ParsedURL(manifestURL).displayName;
2226     WebInspector.BaseStorageTreeElement.call(this, storagePanel, title, ["application-cache-storage-tree-item"]);
2227     this.tooltip = manifestURL;
2228     this._manifestURL = manifestURL;
2229 }
2230
2231 WebInspector.ApplicationCacheManifestTreeElement.prototype = {
2232     get itemURL()
2233     {
2234         return "appcache://" + this._manifestURL;
2235     },
2236
2237     get manifestURL()
2238     {
2239         return this._manifestURL;
2240     },
2241
2242     /**
2243      * @override
2244      * @return {boolean}
2245      */
2246     onselect: function(selectedByUser)
2247     {
2248         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
2249         this._storagePanel.showCategoryView(this._manifestURL);
2250         return false;
2251     },
2252
2253     __proto__: WebInspector.BaseStorageTreeElement.prototype
2254 }
2255
2256 /**
2257  * @constructor
2258  * @extends {WebInspector.BaseStorageTreeElement}
2259  * @param {!WebInspector.ResourcesPanel} storagePanel
2260  * @param {!PageAgent.FrameId} frameId
2261  * @param {string} manifestURL
2262  */
2263 WebInspector.ApplicationCacheFrameTreeElement = function(storagePanel, frameId, manifestURL)
2264 {
2265     WebInspector.BaseStorageTreeElement.call(this, storagePanel, "", ["frame-storage-tree-item"]);
2266     this._frameId = frameId;
2267     this._manifestURL = manifestURL;
2268     this._refreshTitles();
2269 }
2270
2271 WebInspector.ApplicationCacheFrameTreeElement.prototype = {
2272     get itemURL()
2273     {
2274         return "appcache://" + this._manifestURL + "/" + encodeURI(this.displayName);
2275     },
2276
2277     get frameId()
2278     {
2279         return this._frameId;
2280     },
2281
2282     get manifestURL()
2283     {
2284         return this._manifestURL;
2285     },
2286
2287     _refreshTitles: function()
2288     {
2289         var frame = this._storagePanel._target.resourceTreeModel.frameForId(this._frameId);
2290         if (!frame) {
2291             this.subtitleText = WebInspector.UIString("new frame");
2292             return;
2293         }
2294         this.titleText = frame.name;
2295         this.subtitleText = new WebInspector.ParsedURL(frame.url).displayName;
2296     },
2297
2298     frameNavigated: function()
2299     {
2300         this._refreshTitles();
2301     },
2302
2303     /**
2304      * @override
2305      * @return {boolean}
2306      */
2307     onselect: function(selectedByUser)
2308     {
2309         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
2310         this._storagePanel.showApplicationCache(this._frameId);
2311         return false;
2312     },
2313
2314     __proto__: WebInspector.BaseStorageTreeElement.prototype
2315 }
2316
2317 /**
2318  * @constructor
2319  * @extends {WebInspector.BaseStorageTreeElement}
2320  * @param {!WebInspector.ResourcesPanel} storagePanel
2321  * @param {!WebInspector.FileSystemModel.FileSystem} fileSystem
2322  */
2323 WebInspector.FileSystemTreeElement = function(storagePanel, fileSystem)
2324 {
2325     var displayName = fileSystem.type + " - " + fileSystem.origin;
2326     WebInspector.BaseStorageTreeElement.call(this, storagePanel, displayName, ["file-system-storage-tree-item"]);
2327     this._fileSystem = fileSystem;
2328 }
2329
2330 WebInspector.FileSystemTreeElement.prototype = {
2331     get fileSystemName()
2332     {
2333         return this._fileSystem.name;
2334     },
2335
2336     get itemURL()
2337     {
2338         return "filesystem://" + this._fileSystem.name;
2339     },
2340
2341     /**
2342      * @override
2343      * @return {boolean}
2344      */
2345     onselect: function(selectedByUser)
2346     {
2347         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
2348         this._fileSystemView = new WebInspector.FileSystemView(this._fileSystem);
2349         this._storagePanel.showFileSystem(this._fileSystemView);
2350         return false;
2351     },
2352
2353     clear: function()
2354     {
2355         if (this.fileSystemView && this._storagePanel.visibleView === this.fileSystemView)
2356             this._storagePanel.closeVisibleView();
2357     },
2358
2359     __proto__: WebInspector.BaseStorageTreeElement.prototype
2360 }
2361
2362 /**
2363  * @constructor
2364  * @extends {WebInspector.VBox}
2365  */
2366 WebInspector.StorageCategoryView = function()
2367 {
2368     WebInspector.VBox.call(this);
2369
2370     this.element.classList.add("storage-view");
2371     this._emptyWidget = new WebInspector.EmptyWidget("");
2372     this._emptyWidget.show(this.element);
2373 }
2374
2375 WebInspector.StorageCategoryView.prototype = {
2376     /**
2377      * @return {!Array.<!WebInspector.ToolbarItem>}
2378      */
2379     toolbarItems: function()
2380     {
2381         return [];
2382     },
2383
2384     setText: function(text)
2385     {
2386         this._emptyWidget.text = text;
2387     },
2388
2389     __proto__: WebInspector.VBox.prototype
2390 }
2391
2392 WebInspector.ResourcesPanel.show = function()
2393 {
2394     WebInspector.inspectorView.setCurrentPanel(WebInspector.ResourcesPanel._instance());
2395 }
2396
2397 /**
2398  * @return {!WebInspector.ResourcesPanel}
2399  */
2400 WebInspector.ResourcesPanel._instance = function()
2401 {
2402     if (!WebInspector.ResourcesPanel._instanceObject)
2403         WebInspector.ResourcesPanel._instanceObject = new WebInspector.ResourcesPanel();
2404     return WebInspector.ResourcesPanel._instanceObject;
2405 }
2406
2407 /**
2408  * @constructor
2409  * @implements {WebInspector.PanelFactory}
2410  */
2411 WebInspector.ResourcesPanelFactory = function()
2412 {
2413 }
2414
2415 WebInspector.ResourcesPanelFactory.prototype = {
2416     /**
2417      * @override
2418      * @return {!WebInspector.Panel}
2419      */
2420     createPanel: function()
2421     {
2422         return WebInspector.ResourcesPanel._instance();
2423     }
2424 }