DevTools: reorder items in the resources panel sidebar

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

 /*
  * Copyright (C) 2007, 2008, 2010 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  * Copyright (C) 2013 Samsung Electronics. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 22 matching lines @@
  * @extends {WebInspector.PanelWithSidebar}
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.ResourcesPanel = function()
 {
     WebInspector.PanelWithSidebar.call(this, "resources");
     this.registerRequiredCSS("resources/resourcesPanel.css");
 
     this._resourcesLastSelectedItemSetting = WebInspector.settings.createSetting("resourcesLastSelectedItem", {});
 
-    this._sidebarTree = new TreeOutline();
-    this._sidebarTree.element.classList.add("filter-all", "children", "small", "outline-disclosure");
+    this._sidebarTree = new TreeOutlineInShadow();
+    this._sidebarTree.element.classList.add("resources-sidebar");
+    this._sidebarTree.registerRequiredCSS("resources/resourcesSidebar.css");
+    this._sidebarTree.element.classList.add("filter-all", "outline-disclosure");
     this.panelSidebarElement().appendChild(this._sidebarTree.element);
     this.setDefaultFocusedElement(this._sidebarTree.element);
 
-    this.resourcesListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Frames"), "Frames", ["frame-storage-tree-item"]);
-    this._sidebarTree.appendChild(this.resourcesListTreeElement);
+    var storageTreeElement = new TreeElement(WebInspector.UIString("Storage"), true);
+    storageTreeElement.listItemElement.classList.add("storage-group-list-item");
+    storageTreeElement.setCollapsible(false);
+    storageTreeElement.selectable = false;
+    this._sidebarTree.appendChild(storageTreeElement);
+
+    this.localStorageListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Local Storage"), "LocalStorage", ["domstorage-storage-tree-item", "local-storage"]);
+    storageTreeElement.appendChild(this.localStorageListTreeElement);
+
+    this.sessionStorageListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Session Storage"), "SessionStorage", ["domstorage-storage-tree-item", "session-storage"]);
+    storageTreeElement.appendChild(this.sessionStorageListTreeElement);
+
+    this.indexedDBListTreeElement = new WebInspector.IndexedDBTreeElement(this);
+    storageTreeElement.appendChild(this.indexedDBListTreeElement);
 
     this.databasesListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Web SQL"), "Databases", ["database-storage-tree-item"]);
-    this._sidebarTree.appendChild(this.databasesListTreeElement);
-
-    this.indexedDBListTreeElement = new WebInspector.IndexedDBTreeElement(this);
-    this._sidebarTree.appendChild(this.indexedDBListTreeElement);
-
-    this.localStorageListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Local Storage"), "LocalStorage", ["domstorage-storage-tree-item", "local-storage"]);
-    this._sidebarTree.appendChild(this.localStorageListTreeElement);
-
-    this.sessionStorageListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Session Storage"), "SessionStorage", ["domstorage-storage-tree-item", "session-storage"]);
-    this._sidebarTree.appendChild(this.sessionStorageListTreeElement);
+    storageTreeElement.appendChild(this.databasesListTreeElement);
 
     this.cookieListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Cookies"), "Cookies", ["cookie-storage-tree-item"]);
-    this._sidebarTree.appendChild(this.cookieListTreeElement);
+    storageTreeElement.appendChild(this.cookieListTreeElement);
+
+    var cacheTreeElement = new TreeElement(WebInspector.UIString("Cache"), true);
+    cacheTreeElement.listItemElement.classList.add("storage-group-list-item");
+    cacheTreeElement.setCollapsible(false);
+    cacheTreeElement.selectable = false;
+    this._sidebarTree.appendChild(cacheTreeElement);
+
+    this.cacheStorageListTreeElement = new WebInspector.ServiceWorkerCacheTreeElement(this);
+    cacheTreeElement.appendChild(this.cacheStorageListTreeElement);
 
     this.applicationCacheListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Application Cache"), "ApplicationCache", ["application-cache-storage-tree-item"]);
-    this._sidebarTree.appendChild(this.applicationCacheListTreeElement);
+    cacheTreeElement.appendChild(this.applicationCacheListTreeElement);
 
-    this.cacheStorageListTreeElement = new WebInspector.ServiceWorkerCacheTreeElement(this);
-    this._sidebarTree.appendChild(this.cacheStorageListTreeElement);
+    this.resourcesListTreeElement = new TreeElement(WebInspector.UIString("Frames"), true);
+    this.resourcesListTreeElement.listItemElement.classList.add("storage-group-list-item");
+    this.resourcesListTreeElement.setCollapsible(false);
+    this.resourcesListTreeElement.selectable = false;
+    this._sidebarTree.appendChild(this.resourcesListTreeElement);
 
     var mainContainer = new WebInspector.VBox();
     this.storageViews = mainContainer.element.createChild("div", "vbox flex-auto");
     this._storageViewToolbar = new WebInspector.Toolbar("resources-toolbar", mainContainer.element);
     this.splitWidget().setMainWidget(mainContainer);
 
     /** @type {!Map.<!WebInspector.Database, !Object.<string, !WebInspector.DatabaseTableView>>} */
     this._databaseTableViews = new Map();
     /** @type {!Map.<!WebInspector.Database, !WebInspector.DatabaseQueryView>} */
     this._databaseQueryViews = new Map();
     /** @type {!Map.<!WebInspector.Database, !WebInspector.DatabaseTreeElement>} */
     this._databaseTreeElements = new Map();
     /** @type {!Map.<!WebInspector.DOMStorage, !WebInspector.DOMStorageItemsView>} */
     this._domStorageViews = new Map();
     /** @type {!Map.<!WebInspector.DOMStorage, !WebInspector.DOMStorageTreeElement>} */
     this._domStorageTreeElements = new Map();
     /** @type {!Object.<string, !WebInspector.CookieItemsView>} */
     this._cookieViews = {};
     /** @type {!Object.<string, boolean>} */
     this._domains = {};
 
     this.panelSidebarElement().addEventListener("mousemove", this._onmousemove.bind(this), false);
     this.panelSidebarElement().addEventListener("mouseleave", this._onmouseleave.bind(this), false);
 
     WebInspector.targetManager.observeTargets(this);
 }
 
 WebInspector.ResourcesPanel.prototype = {
+    wasShown: function()
+    {
+        if (!this._sidebarTree.selectedTreeElement) {
+            if (this.serviceWorkersTreeElement)
+                this.serviceWorkersTreeElement.select();
+            else
+                this.localStorageListTreeElement.select();
+        }
+    },
+
     /**
      * @override
      * @param {!WebInspector.Target} target
      */
     targetAdded: function(target)
     {
         if (this._target)
             return;
         this._target = target;
 
         if (target.serviceWorkerManager) {
             this.serviceWorkersTreeElement = new WebInspector.ServiceWorkersTreeElement(this);
-            this._sidebarTree.appendChild(this.serviceWorkersTreeElement);
+            this._sidebarTree.insertChild(this.serviceWorkersTreeElement, 0);
         }
 
         this._databaseModel = WebInspector.DatabaseModel.fromTarget(target);
         this._domStorageModel = WebInspector.DOMStorageModel.fromTarget(target);
 
         if (target.resourceTreeModel.cachedResourcesLoaded())
             this._initialize();
 
         target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.Load, this._loadEventFired, this);
         target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.CachedResourcesLoaded, this._initialize, this);
@@ skipping 210 matching lines @@
         this._databaseTreeElements.set(database, databaseTreeElement);
         this.databasesListTreeElement.appendChild(databaseTreeElement);
     },
 
     addDocumentURL: function(url)
     {
         var parsedURL = url.asParsedURL();
         if (!parsedURL)
             return;
 
-        var domain = parsedURL.host;
+        var domain = parsedURL.securityOrigin();
         if (!this._domains[domain]) {
             this._domains[domain] = true;
 
             var cookieDomainTreeElement = new WebInspector.CookieTreeElement(this, domain);
             this.cookieListTreeElement.appendChild(cookieDomainTreeElement);
         }
     },
 
     /**
      * @param {!WebInspector.Event} event
@@ skipping 469 matching lines @@
  * @constructor
  * @extends {TreeElement}
  * @param {!WebInspector.ResourcesPanel} storagePanel
  * @param {string} title
  * @param {?Array.<string>=} iconClasses
  * @param {boolean=} expandable
  * @param {boolean=} noIcon
  */
 WebInspector.BaseStorageTreeElement = function(storagePanel, title, iconClasses, expandable, noIcon)
 {
-    TreeElement.call(this, "", expandable);
+    TreeElement.call(this, title, expandable);
     this._storagePanel = storagePanel;
-    this._titleText = title;
+    for (var i = 0; iconClasses && i < iconClasses.length; ++i)
+        this.listItemElement.classList.add(iconClasses[i]);
+
     this._iconClasses = iconClasses;
-    this._noIcon = noIcon;
+    if (!noIcon)
+        this.createIcon();
 }
 
 WebInspector.BaseStorageTreeElement.prototype = {
-    onattach: function()
-    {
-        this.listItemElement.removeChildren();
-        if (this._iconClasses) {
-            for (var i = 0; i < this._iconClasses.length; ++i)
-                this.listItemElement.classList.add(this._iconClasses[i]);
-        }
-
-        this.listItemElement.createChild("div", "selection fill");
-
-        if (!this._noIcon)
-            this.imageElement = this.listItemElement.createChild("img", "icon");
-
-        this.titleElement = this.listItemElement.createChild("div", "base-storage-tree-element-title");
-        this._titleTextNode = this.titleElement.createTextChild("");
-        this._updateTitle();
-        this._updateSubtitle();
-    },
-
-    get displayName()
-    {
-        return this._displayName;
-    },
-
-    _updateDisplayName: function()
-    {
-        this._displayName = this._titleText || "";
-        if (this._subtitleText)
-            this._displayName += " (" + this._subtitleText + ")";
-    },
-
-    _updateTitle: function()
-    {
-        this._updateDisplayName();
-
-        if (!this.titleElement)
-            return;
-
-        this._titleTextNode.textContent = this._titleText || "";
-    },
-
-    _updateSubtitle: function()
-    {
-        this._updateDisplayName();
-
-        if (!this.titleElement)
-            return;
-
-        if (this._subtitleText) {
-            if (!this._subtitleElement)
-                this._subtitleElement = this.titleElement.createChild("span", "base-storage-tree-element-subtitle");
-            this._subtitleElement.textContent = "(" + this._subtitleText + ")";
-        } else if (this._subtitleElement) {
-            this._subtitleElement.remove();
-            delete this._subtitleElement;
-        }
-    },
-
     /**
      * @override
      * @return {boolean}
      */
     onselect: function(selectedByUser)
     {
         if (!selectedByUser)
             return false;
         var itemURL = this.itemURL;
         if (itemURL)
             this._storagePanel._resourcesLastSelectedItemSetting.set(itemURL);
         return false;
     },
 
-    get titleText()
-    {
-        return this._titleText;
-    },
-
-    set titleText(titleText)
-    {
-        this._titleText = titleText;
-        this._updateTitle();
-    },
-
-    get subtitleText()
-    {
-        return this._subtitleText;
-    },
-
-    set subtitleText(subtitleText)
-    {
-        this._subtitleText = subtitleText;
-        this._updateSubtitle();
-    },
-
     __proto__: TreeElement.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.BaseStorageTreeElement}
  * @param {!WebInspector.ResourcesPanel} storagePanel
  * @param {string} categoryName
  * @param {string} settingsKey
  * @param {?Array.<string>=} iconClasses
@@ skipping 61 matching lines @@
 }
 
 /**
  * @constructor
  * @extends {WebInspector.BaseStorageTreeElement}
  * @param {!WebInspector.ResourcesPanel} storagePanel
  * @param {!WebInspector.ResourceTreeFrame} frame
  */
 WebInspector.FrameTreeElement = function(storagePanel, frame)
 {
-    WebInspector.BaseStorageTreeElement.call(this, storagePanel, "", ["frame-storage-tree-item"]);
+    WebInspector.BaseStorageTreeElement.call(this, storagePanel, "", ["navigator-tree-item", "navigator-folder-tree-item"]);
     this._frame = frame;
     this.frameNavigated(frame);
 }
 
 WebInspector.FrameTreeElement.prototype = {
     frameNavigated: function(frame)
     {
         this.removeChildren();
         this._frameId = frame.id;
-
-        this.titleText = frame.name;
-        this.subtitleText = new WebInspector.ParsedURL(frame.url).displayName;
-
+        this.title = frame.displayName();
         this._categoryElements = {};
         this._treeElementForResource = {};
 
         this._storagePanel.addDocumentURL(frame.url);
     },
 
     get itemURL()
     {
-        return "frame://" + encodeURI(this.displayName);
+        return "frame://" + encodeURI(this.titleAsText());
     },
 
     /**
      * @override
      * @return {boolean}
      */
     onselect: function(selectedByUser)
     {
         WebInspector.BaseStorageTreeElement.prototype.onselect.call(this, selectedByUser);
-        this._storagePanel.showCategoryView(this.displayName);
+        this._storagePanel.showCategoryView(this.titleAsText());
 
         this.listItemElement.classList.remove("hovered");
         WebInspector.DOMModel.hideDOMNodeHighlight();
         return false;
     },
 
     set hovered(hovered)
     {
         if (hovered) {
             this.listItemElement.classList.add("hovered");
@@ skipping 56 matching lines @@
         function compare(treeElement1, treeElement2)
         {
             var typeWeight1 = typeWeight(treeElement1);
             var typeWeight2 = typeWeight(treeElement2);
 
             var result;
             if (typeWeight1 > typeWeight2)
                 result = 1;
             else if (typeWeight1 < typeWeight2)
                 result = -1;
-            else {
-                var title1 = treeElement1.displayName || treeElement1.titleText;
-                var title2 = treeElement2.displayName || treeElement2.titleText;
-                result = title1.localeCompare(title2);
-            }
+            else
+                result = treeElement1.titleAsText().localeCompare(treeElement2.titleAsText());
             return result;
         }
 
         var childCount = parentTreeElement.childCount();
         var i;
         for (i = 0; i < childCount; ++i) {
             if (compare(childTreeElement, parentTreeElement.childAt(i)) < 0)
                 break;
         }
         parentTreeElement.insertChild(childTreeElement, i);
     },
 
     __proto__: WebInspector.BaseStorageTreeElement.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.BaseStorageTreeElement}
  * @param {!WebInspector.ResourcesPanel} storagePanel
  * @param {!WebInspector.Resource} resource
  */
 WebInspector.FrameResourceTreeElement = function(storagePanel, resource)
 {
-    WebInspector.BaseStorageTreeElement.call(this, storagePanel, resource.displayName, ["resource-sidebar-tree-item", "resources-type-" + resource.resourceType().name()]);
+    WebInspector.BaseStorageTreeElement.call(this, storagePanel, resource.displayName, ["navigator-tree-item", "navigator-file-tree-item", "navigator-" + resource.resourceType().name() + "-tree-item"]);
     /** @type {!WebInspector.Resource} */
     this._resource = resource;
     this.tooltip = resource.url;
     this._resource[WebInspector.FrameResourceTreeElement._symbol] = this;
 }
 
 WebInspector.FrameResourceTreeElement._symbol = Symbol("treeElement");
 
 WebInspector.FrameResourceTreeElement.prototype = {
     get itemURL()
@@ skipping 21 matching lines @@
         InspectorFrontendHost.openInNewTab(this._resource.url);
         return false;
     },
 
     /**
      * @override
      */
     onattach: function()
     {
         WebInspector.BaseStorageTreeElement.prototype.onattach.call(this);
-
-        if (this._resource.resourceType() === WebInspector.resourceTypes.Image) {
-            var iconElement = createElementWithClass("div", "icon");
-            var previewImage = iconElement.createChild("img", "image-resource-icon-preview");
-            this._resource.populateImageSource(previewImage);
-            this.listItemElement.replaceChild(iconElement, this.imageElement);
-        }
-
-        this._statusElement = createElementWithClass("div", "status");
-        this.listItemElement.insertBefore(this._statusElement, this.titleElement);
-
         this.listItemElement.draggable = true;
         this.listItemElement.addEventListener("dragstart", this._ondragstart.bind(this), false);
         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
     },
 
     /**
      * @param {!MouseEvent} event
      * @return {boolean}
      */
     _ondragstart: function(event)
@@ skipping 296 matching lines @@
 }
 
 
 /**
  * @constructor
  * @extends {WebInspector.BaseStorageTreeElement}
  * @param {!WebInspector.ResourcesPanel} storagePanel
  */
 WebInspector.ServiceWorkersTreeElement = function(storagePanel)
 {
-    WebInspector.BaseStorageTreeElement.call(this, storagePanel, "Service Workers", ["service-workers-tree-item"], false);
+    WebInspector.BaseStorageTreeElement.call(this, storagePanel, WebInspector.UIString("Service Workers"), ["service-workers-tree-item"], false);
 }
 
 WebInspector.ServiceWorkersTreeElement.prototype = {
     /**
      * @return {string}
      */
     get itemURL()
     {
         return "service-workers://";
     },
@@ skipping 570 matching lines @@
 
 /**
  * @constructor
  * @extends {WebInspector.BaseStorageTreeElement}
  * @param {!WebInspector.ResourcesPanel} storagePanel
  * @param {!PageAgent.FrameId} frameId
  * @param {string} manifestURL
  */
 WebInspector.ApplicationCacheFrameTreeElement = function(storagePanel, frameId, manifestURL)
 {
-    WebInspector.BaseStorageTreeElement.call(this, storagePanel, "", ["frame-storage-tree-item"]);
+    WebInspector.BaseStorageTreeElement.call(this, storagePanel, "", ["navigator-tree-item", "navigator-folder-tree-item"]);
     this._frameId = frameId;
     this._manifestURL = manifestURL;
     this._refreshTitles();
 }
 
 WebInspector.ApplicationCacheFrameTreeElement.prototype = {
     get itemURL()
     {
-        return "appcache://" + this._manifestURL + "/" + encodeURI(this.displayName);
+        return "appcache://" + this._manifestURL + "/" + encodeURI(this.titleAsText());

[dgozman, 2016/04/28 01:44:58]

It's strange to use titleAsText as a part of URL, it can contain arbitrary text
like "iframe (url.html)".

     },
 
     get frameId()
     {
         return this._frameId;
     },
 
     get manifestURL()
     {
         return this._manifestURL;
     },
 
     _refreshTitles: function()
     {
         var frame = this._storagePanel._target.resourceTreeModel.frameForId(this._frameId);
-        if (!frame) {
-            this.subtitleText = WebInspector.UIString("new frame");
-            return;
-        }
-        this.titleText = frame.name;
-        this.subtitleText = new WebInspector.ParsedURL(frame.url).displayName;
+        this.title = frame.displayName();
     },
 
     frameNavigated: function()
     {
         this._refreshTitles();
     },
 
     /**
      * @override
      * @return {boolean}
@@ skipping 64 matching lines @@
 WebInspector.ResourcesPanelFactory.prototype = {
     /**
      * @override
      * @return {!WebInspector.Panel}
      */
     createPanel: function()
     {
         return WebInspector.ResourcesPanel._instance();
     }
 }