[DevTools] Migrate ProfilesPanel to TreeOutlineInShadow.

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 427 matching lines @@
     this.registerRequiredCSS("ui/panelEnablerView.css");
     this.registerRequiredCSS("profiler/heapProfiler.css");
     this.registerRequiredCSS("profiler/profilesPanel.css");
     this.registerRequiredCSS("components/objectValue.css");
 
     var mainContainer = new WebInspector.VBox();
     this.splitWidget().setMainWidget(mainContainer);
 
     this.profilesItemTreeElement = new WebInspector.ProfilesSidebarTreeElement(this);
 
-    this._sidebarTree = new TreeOutline();
-    this._sidebarTree.element.classList.add("sidebar-tree");
+    this._sidebarTree = new TreeOutlineInShadow();
+    this._sidebarTree.registerRequiredCSS("profiler/profilesSidebarTree.css");
     this.panelSidebarElement().appendChild(this._sidebarTree.element);
     this.setDefaultFocusedElement(this._sidebarTree.element);
 
     this._sidebarTree.appendChild(this.profilesItemTreeElement);
 
     this.profileViews = createElement("div");
     this.profileViews.id = "profile-views";
     this.profileViews.classList.add("vbox");
     mainContainer.element.appendChild(this.profileViews);
 
@@ skipping 23 matching lines @@
     this._profileToView = [];
     this._typeIdToSidebarSection = {};
     var types = WebInspector.ProfileTypeRegistry.instance.profileTypes();
     for (var i = 0; i < types.length; i++)
         this._registerProfileType(types[i]);
     this._launcherView.restoreSelectedProfileType();
     this.profilesItemTreeElement.select();
     this._showLauncherView();
 
     this._createFileSelectorElement();
-    this.element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
+    this.element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
 
     this.contentElement.addEventListener("keydown", this._onKeyDown.bind(this), false);
 
     WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.SuspendStateChanged, this._onSuspendStateChanged, this);
 }
 
 WebInspector.ProfilesPanel.prototype = {
     /**
      * @param {!Event} event
      */
@@ skipping 15 matching lines @@
     searchableView: function()
     {
         return this.visibleView && this.visibleView.searchableView ? this.visibleView.searchableView() : null;
     },
 
     _createFileSelectorElement: function()
     {
         if (this._fileSelectorElement)
             this.element.removeChild(this._fileSelectorElement);
         this._fileSelectorElement = WebInspector.createFileSelectorElement(this._loadFromFile.bind(this));
+        WebInspector.ProfilesPanel._fileSelectorElement = this._fileSelectorElement;
         this.element.appendChild(this._fileSelectorElement);
     },
 
     _findProfileTypeByExtension: function(fileName)
     {
         var types = WebInspector.ProfileTypeRegistry.instance.profileTypes();
         for (var i = 0; i < types.length; i++) {
             var type = types[i];
             var extension = type.fileExtension();
             if (!extension)
@@ skipping 136 matching lines @@
 
     /**
      * @param {!WebInspector.ProfileType} profileType
      */
     _registerProfileType: function(profileType)
     {
         this._launcherView.addProfileType(profileType);
         var profileTypeSection = new WebInspector.ProfileTypeSidebarSection(this, profileType);
         this._typeIdToSidebarSection[profileType.id] = profileTypeSection;
         this._sidebarTree.appendChild(profileTypeSection);
-        profileTypeSection.childrenListElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
+        profileTypeSection.childrenListElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
 
         /**
          * @param {!WebInspector.Event} event
          * @this {WebInspector.ProfilesPanel}
          */
         function onAddProfileHeader(event)
         {
             this._addProfileHeader(/** @type {!WebInspector.ProfileHeader} */ (event.data));
         }
 
@@ skipping 23 matching lines @@
         var profiles = profileType.getProfiles();
         for (var i = 0; i < profiles.length; i++)
             this._addProfileHeader(profiles[i]);
     },
 
     /**
      * @param {!Event} event
      */
     _handleContextMenuEvent: function(event)
     {
-        var element = event.srcElement;
-        while (element && !element.treeElement && element !== this.element)
-            element = element.parentElement;
-        if (!element)
-            return;
-        if (element.treeElement && element.treeElement.handleContextMenuEvent) {
-            element.treeElement.handleContextMenuEvent(event, this);
-            return;
-        }
-
         var contextMenu = new WebInspector.ContextMenu(event);
         if (this.visibleView instanceof WebInspector.HeapSnapshotView) {
             this.visibleView.populateContextMenu(contextMenu, event);
         }
-        if (element !== this.element || event.srcElement === this.panelSidebarElement()) {
+        if (this.panelSidebarElement().isSelfOrAncestor(event.srcElement))
             contextMenu.appendItem(WebInspector.UIString("Load\u2026"), this._fileSelectorElement.click.bind(this._fileSelectorElement));
-        }
         contextMenu.show();
     },
 
     showLoadFromFileDialog: function()
     {
         this._fileSelectorElement.click();
     },
 
     /**
      * @param {!WebInspector.ProfileHeader} profile
@@ skipping 180 matching lines @@
 
 /**
  * @constructor
  * @extends {TreeElement}
  * @param {!WebInspector.ProfileType.DataDisplayDelegate} dataDisplayDelegate
  * @param {!WebInspector.ProfileType} profileType
  */
 WebInspector.ProfileTypeSidebarSection = function(dataDisplayDelegate, profileType)
 {
     TreeElement.call(this, profileType.treeItemTitle.escapeHTML(), true);
+    this.selectable = false;
     this._dataDisplayDelegate = dataDisplayDelegate;
     /** @type {!Array<!WebInspector.ProfileSidebarTreeElement>} */
     this._profileTreeElements = [];
     /** @type {!Object<string, !WebInspector.ProfileTypeSidebarSection.ProfileGroup>} */
     this._profileGroups = {};
     this.expand();
     this.hidden = true;
 }
 
 /**
@@ skipping 121 matching lines @@
                 return i;
         }
         return -1;
     },
 
     /**
      * @override
      */
     onattach: function()
     {
-        this.listItemElement.classList.add("sidebar-tree-section");
+        this.listItemElement.classList.add("profiles-tree-section");
     },
 
     __proto__: TreeElement.prototype
 }
 
 
 /**
  * @constructor
  * @implements {WebInspector.ContextMenu.Provider}
  */
@@ skipping 93 matching lines @@
     {
         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);
+        this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
     },
 
     /**
      * @param {!Event} event
-     * @param {!WebInspector.ProfilesPanel} panel
      */
-    handleContextMenuEvent: function(event, panel)
+    _handleContextMenuEvent: function(event)
     {
         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));
+        contextMenu.appendItem(WebInspector.UIString("Load\u2026"), WebInspector.ProfilesPanel._fileSelectorElement.click.bind(WebInspector.ProfilesPanel._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();
     },
@@ skipping 24 matching lines @@
  * @extends {TreeElement}
  * @param {!WebInspector.ProfileType.DataDisplayDelegate} dataDisplayDelegate
  * @param {string} title
  */
 WebInspector.ProfileGroupSidebarTreeElement = function(dataDisplayDelegate, title)
 {
     TreeElement.call(this, "", true);
     this.selectable = false;
     this._dataDisplayDelegate = dataDisplayDelegate;
     this._title = title;
+    this.expand();
+    this.toggleOnClick = true;
 }
 
 WebInspector.ProfileGroupSidebarTreeElement.prototype = {
     /**
      * @override
      * @return {boolean}
      */
     onselect: function()
     {
         var hasChildren = this.childCount() > 0;
         if (hasChildren)
             this._dataDisplayDelegate.showProfile(this.lastChild().profile);
         return hasChildren;
     },
 
     /**
      * @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.classList.add("profile-group-sidebar-tree-item");
         this.listItemElement.createChild("div", "icon");
         this.listItemElement.createChild("div", "titles no-subtitle").createChild("span", "title-container").createChild("span", "title").textContent = this._title;
     },
 
-    /**
-     * @override
-     * @param {!Event} event
-     * @return {boolean}
-     */
-    isEventWithinDisclosureTriangle: function(event)
-    {
-        return event.target === this._disclosureButton;
-    },
-
     __proto__: TreeElement.prototype
 }
 
 /**
  * @constructor
  * @extends {TreeElement}
  * @param {!WebInspector.ProfilesPanel} panel
  */
 WebInspector.ProfilesSidebarTreeElement = function(panel)
 {
@@ skipping 11 matching lines @@
     {
         this._panel._showLauncherView();
         return true;
     },
 
     /**
      * @override
      */
     onattach: function()
     {
-        this.listItemElement.classList.add("sidebar-tree-item", "profile-launcher-view-tree-item");
+        this.listItemElement.classList.add("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__: TreeElement.prototype
 }
 
 WebInspector.ProfilesPanel.show = function()
 {
     WebInspector.inspectorView.setCurrentPanel(WebInspector.ProfilesPanel._instance());
@@ skipping 23 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;
     }
 }