[DevTools] Remove SidebarTreeElement from ProfilesPanel.

third_party/WebKit/Source/devtools/front_end/profiler/ProfilesPanel.js

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
@@ skipping 918 matching lines @@
     {
         WebInspector.context.setFlavor(WebInspector.ProfilesPanel, null);
     },
 
     __proto__: WebInspector.PanelWithSidebar.prototype
 }
 
 
 /**
  * @constructor
- * @extends {WebInspector.SidebarSectionTreeElement}
+ * @extends {TreeElement}
  * @param {!WebInspector.ProfileType.DataDisplayDelegate} dataDisplayDelegate
  * @param {!WebInspector.ProfileType} profileType
  */
 WebInspector.ProfileTypeSidebarSection = function(dataDisplayDelegate, profileType)
 {
-    WebInspector.SidebarSectionTreeElement.call(this, profileType.treeItemTitle);
+    TreeElement.call(this, profileType.treeItemTitle.escapeHTML(), true);
     this._dataDisplayDelegate = dataDisplayDelegate;
+    /** @type {!Array<!WebInspector.ProfileSidebarTreeElement>} */
     this._profileTreeElements = [];
+    /** @type {!Object<string, !WebInspector.ProfileTypeSidebarSection.ProfileGroup>} */
     this._profileGroups = {};
+    this.expand();
     this.hidden = true;
 }
 
 /**
  * @constructor
  */
 WebInspector.ProfileTypeSidebarSection.ProfileGroup = function()
 {
+    /** @type {!Array<!WebInspector.ProfileSidebarTreeElement>} */
     this.profileSidebarTreeElements = [];
+    /** @type {?WebInspector.ProfileGroupSidebarTreeElement} */
     this.sidebarTreeElement = null;
 }
 
 WebInspector.ProfileTypeSidebarSection.prototype = {
     /**
      * @param {!WebInspector.ProfileHeader} profile
      */
     addProfileHeader: function(profile)
     {
         this.hidden = false;
@@ skipping 21 matching lines @@
                 var index = this.children().indexOf(firstProfileTreeElement);
                 this.insertChild(group.sidebarTreeElement, index);
 
                 // Move the first profile to the group.
                 var selected = firstProfileTreeElement.selected;
                 this.removeChild(firstProfileTreeElement);
                 group.sidebarTreeElement.appendChild(firstProfileTreeElement);
                 if (selected)
                     firstProfileTreeElement.revealAndSelect();
 
-                firstProfileTreeElement.small = true;
-                firstProfileTreeElement.mainTitle = WebInspector.UIString("Run %d", 1);
+                firstProfileTreeElement.setSmall(true);
+                firstProfileTreeElement.setMainTitle(WebInspector.UIString("Run %d", 1));
 
                 this.treeOutline.element.classList.add("some-expandable");
             }
 
             if (groupSize >= 2) {
                 sidebarParent = group.sidebarTreeElement;
-                profileTreeElement.small = true;
-                profileTreeElement.mainTitle = WebInspector.UIString("Run %d", groupSize);
+                profileTreeElement.setSmall(true);
+                profileTreeElement.setMainTitle(WebInspector.UIString("Run %d", groupSize));
             }
         }
 
         sidebarParent.appendChild(profileTreeElement);
     },
 
     /**
      * @param {!WebInspector.ProfileHeader} profile
      * @return {boolean}
      */
     removeProfileHeader: function(profile)
     {
         var index = this._sidebarElementIndex(profile);
         if (index === -1)
             return false;
         var profileTreeElement = this._profileTreeElements[index];
         this._profileTreeElements.splice(index, 1);
 
         var sidebarParent = this;
         var group = this._profileGroups[profile.title];
         if (group) {
             var groupElements = group.profileSidebarTreeElements;
             groupElements.splice(groupElements.indexOf(profileTreeElement), 1);
             if (groupElements.length === 1) {
                 // Move the last profile out of its group and remove the group.
-                var pos = sidebarParent.children().indexOf(group.sidebarTreeElement);
+                var pos = sidebarParent.children().indexOf(/** @type {!WebInspector.ProfileGroupSidebarTreeElement} */ (group.sidebarTreeElement));
                 group.sidebarTreeElement.removeChild(groupElements[0]);
                 this.insertChild(groupElements[0], pos);
-                groupElements[0].small = false;
-                groupElements[0].mainTitle = group.sidebarTreeElement.title;
+                groupElements[0].setSmall(false);
+                groupElements[0].setMainTitle(profile.title);
                 this.removeChild(group.sidebarTreeElement);
             }
             if (groupElements.length !== 0)
                 sidebarParent = group.sidebarTreeElement;
         }
         sidebarParent.removeChild(profileTreeElement);
         profileTreeElement.dispose();
 
         if (this.childCount())
             return false;
@@ skipping 18 matching lines @@
     _sidebarElementIndex: function(profile)
     {
         var elements = this._profileTreeElements;
         for (var i = 0; i < elements.length; i++) {
             if (elements[i].profile === profile)
                 return i;
         }
         return -1;
     },
 
-    __proto__: WebInspector.SidebarSectionTreeElement.prototype
+    /**
+     * @override
+     */
+    onattach: function()
+    {
+        this.listItemElement.classList.add("sidebar-tree-section");
+    },
+
+    __proto__: TreeElement.prototype
 }
 
 
 /**
  * @constructor
  * @implements {WebInspector.ContextMenu.Provider}
  */
 WebInspector.ProfilesPanel.ContextMenuProvider = function()
 {
 }
 
 WebInspector.ProfilesPanel.ContextMenuProvider.prototype = {
     /**
      * @override
      * @param {!Event} event
      * @param {!WebInspector.ContextMenu} contextMenu
      * @param {!Object} target
      */
     appendApplicableItems: function(event, contextMenu, target)
     {
         WebInspector.ProfilesPanel._instance().appendApplicableItems(event, contextMenu, target);
     }
 }
 
 /**
  * @constructor
- * @extends {WebInspector.SidebarTreeElement}
+ * @extends {TreeElement}
  * @param {!WebInspector.ProfileType.DataDisplayDelegate} dataDisplayDelegate
  * @param {!WebInspector.ProfileHeader} profile
  * @param {string} className
  */
 WebInspector.ProfileSidebarTreeElement = function(dataDisplayDelegate, profile, className)
 {
+    TreeElement.call(this, "", false);
+    this._iconElement = createElementWithClass("div", "icon");
+    this._titlesElement = createElementWithClass("div", "titles no-subtitle");
+    this._titleContainer = this._titlesElement.createChild("span", "title-container");
+    this._titleElement = this._titleContainer.createChild("span", "title");
+    this._subtitleElement = this._titlesElement.createChild("span", "subtitle");
+
+    this._titleElement.textContent = profile.title;
+    this._className = className;
+    this._small = false;
     this._dataDisplayDelegate = dataDisplayDelegate;
     this.profile = profile;
-    WebInspector.SidebarTreeElement.call(this, className, profile.title);
-    this.refreshTitles();
     profile.addEventListener(WebInspector.ProfileHeader.Events.UpdateStatus, this._updateStatus, this);
     if (profile.canSaveToFile())
         this._createSaveLink();
     else
         profile.addEventListener(WebInspector.ProfileHeader.Events.ProfileReceived, this._onProfileReceived, this);
 }
 
 WebInspector.ProfileSidebarTreeElement.prototype = {
     _createSaveLink: function()
     {
-        this._saveLinkElement = this.titleContainer.createChild("span", "save-link");
+        this._saveLinkElement = this._titleContainer.createChild("span", "save-link");
         this._saveLinkElement.textContent = WebInspector.UIString("Save");
         this._saveLinkElement.addEventListener("click", this._saveProfile.bind(this), false);
     },
 
     _onProfileReceived: function(event)
     {
         this._createSaveLink();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _updateStatus: function(event)
     {
         var statusUpdate = event.data;
-        if (statusUpdate.subtitle !== null)
-            this.subtitle = statusUpdate.subtitle;
-        if (typeof statusUpdate.wait === "boolean")
-            this.wait = statusUpdate.wait;
-        this.refreshTitles();
+        if (statusUpdate.subtitle !== null) {
+            if (statusUpdate.subtitle) {
+                this._subtitleElement.textContent = statusUpdate.subtitle;
+                this._titlesElement.classList.remove("no-subtitle");

[alph, 2016/09/13 00:59:07]

nit:
this._subtitleElement.textContent = statusUpdate.subtitle || "";
this._titlesElement.classList.toggle("no-subtitle", !statusUpdate.subtitle);

[dgozman, 2016/09/14 18:34:10]

Done.

+            } else {
+                this._subtitleElement.textContent = "";
+                this._titlesElement.classList.add("no-subtitle");
+            }
+        }
+        if (typeof statusUpdate.wait === "boolean" && this.listItemElement)
+            this.listItemElement.classList.toggle("wait", statusUpdate.wait);
     },
 
     dispose: function()
     {
         this.profile.removeEventListener(WebInspector.ProfileHeader.Events.UpdateStatus, this._updateStatus, this);
         this.profile.removeEventListener(WebInspector.ProfileHeader.Events.ProfileReceived, this._onProfileReceived, this);
     },
 
     /**
      * @override
      * @return {boolean}
      */
     onselect: function()
     {
         this._dataDisplayDelegate.showProfile(this.profile);
         return true;
     },
 
     /**
      * @override
      * @return {boolean}
      */
     ondelete: function()
     {
         this.profile.profileType().removeProfile(this.profile);
         return true;
     },
 
     /**
+     * @override
+     */
+    onattach: function()
+    {
+        this.listItemElement.classList.add("sidebar-tree-item");
+        if (this._className)
+            this.listItemElement.classList.add(this._className);
+        if (this._small)
+            this.listItemElement.classList.add("small");
+        this.listItemElement.appendChildren(this._iconElement, this._titlesElement);
+    },
+
+    /**
      * @param {!Event} event
      * @param {!WebInspector.ProfilesPanel} panel
      */
     handleContextMenuEvent: function(event, panel)
     {
         var profile = this.profile;
         var contextMenu = new WebInspector.ContextMenu(event);
         // FIXME: use context menu provider
         contextMenu.appendItem(WebInspector.UIString("Load\u2026"), panel._fileSelectorElement.click.bind(panel._fileSelectorElement));
         if (profile.canSaveToFile())
             contextMenu.appendItem(WebInspector.UIString("Save\u2026"), profile.saveToFile.bind(profile));
         contextMenu.appendItem(WebInspector.UIString("Delete"), this.ondelete.bind(this));
         contextMenu.show();
     },
 
     _saveProfile: function(event)
     {
         this.profile.saveToFile();
     },
 
-    __proto__: WebInspector.SidebarTreeElement.prototype
+    /**
+     * @param {boolean} small
+     */
+    setSmall: function(small)
+    {
+        this._small = small;
+        if (this.listItemElement)
+            this.listItemElement.classList.toggle("small", this._small);
+    },
+
+    /**
+     * @param {string} title
+     */
+    setMainTitle: function(title)
+    {
+        this._titleElement.textContent = title;
+    },
+
+    __proto__: TreeElement.prototype
 }
 
 /**
  * @constructor
- * @extends {WebInspector.SidebarTreeElement}
+ * @extends {TreeElement}
  * @param {!WebInspector.ProfileType.DataDisplayDelegate} dataDisplayDelegate
  * @param {string} title
- * @param {string=} subtitle
  */
-WebInspector.ProfileGroupSidebarTreeElement = function(dataDisplayDelegate, title, subtitle)
+WebInspector.ProfileGroupSidebarTreeElement = function(dataDisplayDelegate, title)
 {
-    WebInspector.SidebarTreeElement.call(this, "profile-group-sidebar-tree-item", title, subtitle, true);
+    TreeElement.call(this, "", true);
+    this.selectable = false;
     this._dataDisplayDelegate = dataDisplayDelegate;
+    this._title = title;
 }
 
 WebInspector.ProfileGroupSidebarTreeElement.prototype = {
     /**
      * @override
      * @return {boolean}
      */
     onselect: function()
     {
         var hasChildren = this.childCount() > 0;
         if (hasChildren)
             this._dataDisplayDelegate.showProfile(this.lastChild().profile);
         return hasChildren;
     },
 
-    __proto__: WebInspector.SidebarTreeElement.prototype
+    /**
+     * @override
+     */
+    onattach: function()
+    {
+        this.listItemElement.classList.add("sidebar-tree-item", "profile-group-sidebar-tree-item");
+        this._disclosureButton = this.listItemElement.createChild("button", "disclosure-button");
+        this.listItemElement.createChild("div", "icon");
+        this.listItemElement.createChild("div", "titles no-subtitle").createChild("span", "title-container").createChild("span", "title").textContent = this._title;
+    },
+
+    /**
+     * @override
+     * @return {boolean}

[alph, 2016/09/13 00:59:07]

@param

[dgozman, 2016/09/14 18:34:10]

Done.

+     */
+    isEventWithinDisclosureTriangle: function(event)
+    {
+        return event.target === this._disclosureButton;
+    },
+
+    __proto__: TreeElement.prototype
 }
 
 /**
  * @constructor
- * @extends {WebInspector.SidebarTreeElement}
+ * @extends {TreeElement}
  * @param {!WebInspector.ProfilesPanel} panel
  */
 WebInspector.ProfilesSidebarTreeElement = function(panel)
 {
+    TreeElement.call(this, "", false);
+    this.selectable = true;
     this._panel = panel;
-    this.small = false;
-
-    WebInspector.SidebarTreeElement.call(this, "profile-launcher-view-tree-item", WebInspector.UIString("Profiles"));
 }
 
 WebInspector.ProfilesSidebarTreeElement.prototype = {
     /**
      * @override
      * @return {boolean}
      */
     onselect: function()
     {
         this._panel._showLauncherView();
         return true;
     },
 
-    get selectable()
+    /**
+     * @override
+     */
+    onattach: function()
     {
-        return true;
+        this.listItemElement.classList.add("sidebar-tree-item", "profile-launcher-view-tree-item");
+        this.listItemElement.createChild("div", "icon");
+        this.listItemElement.createChild("div", "titles no-subtitle").createChild("span", "title-container").createChild("span", "title").textContent = WebInspector.UIString("Profiles");
     },
 
-    __proto__: WebInspector.SidebarTreeElement.prototype
+    __proto__: TreeElement.prototype
 }
 
 WebInspector.ProfilesPanel.show = function()
 {
     WebInspector.inspectorView.setCurrentPanel(WebInspector.ProfilesPanel._instance());
 }
 
 /**
  * @return {!WebInspector.ProfilesPanel}
  */
@@ skipping 18 matching lines @@
      * @return {boolean}
      */
     handleAction: function(context, actionId)
     {
         var panel = WebInspector.context.flavor(WebInspector.ProfilesPanel);
         console.assert(panel && panel instanceof WebInspector.ProfilesPanel);
         panel.toggleRecord();
         return true;
     }
 }