Web Inspector: allow each profiler panel to have own landing page
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 Mar 2013 13:58:11 +0000 (13:58 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 Mar 2013 13:58:11 +0000 (13:58 +0000)
https://bugs.webkit.org/show_bug.cgi?id=111298

Patch by Alexei Filippov <alph@chromium.org> on 2013-03-05
Reviewed by Yury Semikhatsky.

Refactor profiler landing page to allow different profiler panels to have own landing pages.
  - MultiProfileLauncherView is inherited from ProfileLauncherView
  - Native memory distribution profiler has got a custom page.

No new tests: code refactoring.

* inspector/front-end/HeapSnapshotView.js:
(WebInspector.HeapSnapshotView.prototype.get profile):
(WebInspector.HeapSnapshotView.prototype.get baseProfile):
(WebInspector.HeapSnapshotView.prototype._profiles):
* inspector/front-end/NativeMemorySnapshotView.js:
* inspector/front-end/ProfileLauncherView.js:
(WebInspector.ProfileLauncherView):
(WebInspector.ProfileLauncherView.prototype.addProfileType):
(WebInspector.ProfileLauncherView.prototype._controlButtonClicked):
(WebInspector.ProfileLauncherView.prototype._updateControls):
(WebInspector.ProfileLauncherView.prototype.profileStarted):
(WebInspector.ProfileLauncherView.prototype.profileFinished):
(WebInspector.MultiProfileLauncherView):
(WebInspector.MultiProfileLauncherView.prototype.addProfileType):
(WebInspector.MultiProfileLauncherView.prototype._profileTypeChanged):
(WebInspector.NativeProfileLauncherView):
* inspector/front-end/ProfilesPanel.js:
(WebInspector.ProfilesPanel):
(WebInspector.ProfilesPanel.prototype._createLauncherView):
(WebInspector.CPUProfilerPanel):
(WebInspector.CSSSelectorProfilerPanel):
(WebInspector.HeapProfilerPanel):
(WebInspector.CanvasProfilerPanel):
(WebInspector.MemoryChartProfilerPanel):
(WebInspector.MemoryChartProfilerPanel.prototype._createLauncherView):
(WebInspector.NativeMemoryProfilerPanel):
* inspector/front-end/profilesPanel.css:
(.panel-enabler-view.profile-launcher-view button:not(.status-bar-item)):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@144754 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/HeapSnapshotView.js
Source/WebCore/inspector/front-end/NativeMemorySnapshotView.js
Source/WebCore/inspector/front-end/ProfileLauncherView.js
Source/WebCore/inspector/front-end/ProfilesPanel.js
Source/WebCore/inspector/front-end/profilesPanel.css

index 66f12b0..ce51db0 100644 (file)
@@ -1,3 +1,45 @@
+2013-03-05  Alexei Filippov  <alph@chromium.org>
+
+        Web Inspector: allow each profiler panel to have own landing page
+        https://bugs.webkit.org/show_bug.cgi?id=111298
+
+        Reviewed by Yury Semikhatsky.
+
+        Refactor profiler landing page to allow different profiler panels to have own landing pages.
+          - MultiProfileLauncherView is inherited from ProfileLauncherView
+          - Native memory distribution profiler has got a custom page.
+
+        No new tests: code refactoring.
+
+        * inspector/front-end/HeapSnapshotView.js:
+        (WebInspector.HeapSnapshotView.prototype.get profile):
+        (WebInspector.HeapSnapshotView.prototype.get baseProfile):
+        (WebInspector.HeapSnapshotView.prototype._profiles):
+        * inspector/front-end/NativeMemorySnapshotView.js:
+        * inspector/front-end/ProfileLauncherView.js:
+        (WebInspector.ProfileLauncherView):
+        (WebInspector.ProfileLauncherView.prototype.addProfileType):
+        (WebInspector.ProfileLauncherView.prototype._controlButtonClicked):
+        (WebInspector.ProfileLauncherView.prototype._updateControls):
+        (WebInspector.ProfileLauncherView.prototype.profileStarted):
+        (WebInspector.ProfileLauncherView.prototype.profileFinished):
+        (WebInspector.MultiProfileLauncherView):
+        (WebInspector.MultiProfileLauncherView.prototype.addProfileType):
+        (WebInspector.MultiProfileLauncherView.prototype._profileTypeChanged):
+        (WebInspector.NativeProfileLauncherView):
+        * inspector/front-end/ProfilesPanel.js:
+        (WebInspector.ProfilesPanel):
+        (WebInspector.ProfilesPanel.prototype._createLauncherView):
+        (WebInspector.CPUProfilerPanel):
+        (WebInspector.CSSSelectorProfilerPanel):
+        (WebInspector.HeapProfilerPanel):
+        (WebInspector.CanvasProfilerPanel):
+        (WebInspector.MemoryChartProfilerPanel):
+        (WebInspector.MemoryChartProfilerPanel.prototype._createLauncherView):
+        (WebInspector.NativeMemoryProfilerPanel):
+        * inspector/front-end/profilesPanel.css:
+        (.panel-enabler-view.profile-launcher-view button:not(.status-bar-item)):
+
 2013-03-05  Eugene Klyuchnikov  <eustas@chromium.org>
 
         Web Inspector: Clarify some StylesSidebarPanel and CSSMetadata JSDocs.
index a5a0009..f14dca3 100644 (file)
@@ -31,8 +31,8 @@
 /**
  * @constructor
  * @extends {WebInspector.View}
- * @param {WebInspector.ProfilesPanel} parent
- * @param {WebInspector.HeapProfileHeader} profile
+ * @param {!WebInspector.ProfilesPanel} parent
+ * @param {!WebInspector.HeapProfileHeader} profile
  */
 WebInspector.HeapSnapshotView = function(parent, profile)
 {
@@ -188,12 +188,12 @@ WebInspector.HeapSnapshotView.prototype = {
 
     get profile()
     {
-        return this.parent.getProfile(WebInspector.HeapSnapshotProfileType.TypeId, this._profileUid);
+        return this.parent.getProfile(this._profileTypeId, this._profileUid);
     },
 
     get baseProfile()
     {
-        return this.parent.getProfile(WebInspector.HeapSnapshotProfileType.TypeId, this._baseProfileUid);
+        return this.parent.getProfile(this._profileTypeId, this._baseProfileUid);
     },
 
     wasShown: function()
@@ -427,7 +427,7 @@ WebInspector.HeapSnapshotView.prototype = {
      */
     _profiles: function()
     {
-        return this.parent.getProfileType(WebInspector.HeapSnapshotProfileType.TypeId).getProfiles();
+        return this.parent.getProfileType(this._profileTypeId).getProfiles();
     },
 
     /**
@@ -928,7 +928,7 @@ WebInspector.HeapProfileHeader.prototype = {
 
     /**
      * @override
-     * @param {WebInspector.ProfilesPanel} profilesPanel
+     * @param {!WebInspector.ProfilesPanel} profilesPanel
      */
     createView: function(profilesPanel)
     {
index e213e2e..115e6d7 100644 (file)
@@ -382,7 +382,7 @@ WebInspector.NativeSnapshotProfileHeader = function(type, title, uid)
 WebInspector.NativeSnapshotProfileHeader.prototype = {
     /**
      * @override
-     * @param {WebInspector.ProfilesPanel} profilesPanel
+     * @param {!WebInspector.ProfilesPanel} profilesPanel
      */
     createView: function(profilesPanel)
     {
@@ -413,8 +413,8 @@ WebInspector.NativeSnapshotProfileHeader.prototype = {
 /**
  * @constructor
  * @extends {WebInspector.HeapSnapshotView}
- * @param {WebInspector.ProfilesPanel} parent
- * @param {WebInspector.NativeSnapshotProfileHeader} profile
+ * @param {!WebInspector.ProfilesPanel} parent
+ * @param {!WebInspector.NativeSnapshotProfileHeader} profile
  */
 WebInspector.NativeHeapSnapshotView = function(parent, profile)
 {
index ee322b5..2c3f72e 100644 (file)
  * @constructor
  * @extends {WebInspector.View}
  * @param {!WebInspector.ProfilesPanel} profilesPanel
- * @param {boolean} singleProfileMode
  */
-WebInspector.ProfileLauncherView = function(profilesPanel, singleProfileMode)
+WebInspector.ProfileLauncherView = function(profilesPanel)
 {
     WebInspector.View.call(this);
 
     this._panel = profilesPanel;
-    this._singleProfileMode = singleProfileMode;
     this._profileRunning = false;
 
     this.element.addStyleClass("profile-launcher-view");
     this.element.addStyleClass("panel-enabler-view");
 
     this._contentElement = this.element.createChild("div", "profile-launcher-view-content");
+    this._innerContentElement = this._contentElement.createChild("div");
 
-    if (!singleProfileMode) {
-        var header = this._contentElement.createChild("h1");
-        header.textContent = WebInspector.UIString("Select profiling type");
-    }
+    this._controlButton = this._contentElement.createChild("button", "control-profiling");
+    this._controlButton.addEventListener("click", this._controlButtonClicked.bind(this), false);
+}
+
+WebInspector.ProfileLauncherView.prototype = {
+    /**
+     * @param {WebInspector.ProfileType} profileType
+     */
+    addProfileType: function(profileType)
+    {
+        var descriptionElement = this._innerContentElement.createChild("h1");
+        descriptionElement.textContent = profileType.description;
+        var decorationElement = profileType.decorationElement();
+        if (decorationElement)
+            this._innerContentElement.appendChild(decorationElement);
+    },
+
+    _controlButtonClicked: function()
+    {
+        this._panel.toggleRecordButton();
+    },
+
+    _updateControls: function()
+    {
+        if (this._isProfiling) {
+            this._controlButton.addStyleClass("running");
+            this._controlButton.textContent = WebInspector.UIString("Stop");
+        } else {
+            this._controlButton.removeStyleClass("running");
+            this._controlButton.textContent = WebInspector.UIString("Start");
+        }
+    },
+
+    profileStarted: function()
+    {
+        this._isProfiling = true;
+        this._updateControls();
+    },
 
-    this._profileTypeSelectorForm = this._contentElement.createChild("form");
+    profileFinished: function()
+    {
+        this._isProfiling = false;
+        this._updateControls();
+    },
+
+    __proto__: WebInspector.View.prototype
+}
+
+
+/**
+ * @constructor
+ * @extends {WebInspector.ProfileLauncherView}
+ * @param {!WebInspector.ProfilesPanel} profilesPanel
+ */
+WebInspector.MultiProfileLauncherView = function(profilesPanel)
+{
+    WebInspector.ProfileLauncherView.call(this, profilesPanel);
+
+    var header = this._innerContentElement.createChild("h1");
+    header.textContent = WebInspector.UIString("Select profiling type");
+
+    this._profileTypeSelectorForm = this._innerContentElement.createChild("form");
 
     if (WebInspector.experimentsSettings.liveNativeMemoryChart.isEnabled()) {
-        this._nativeMemoryElement = this._contentElement.createChild("div");
+        this._nativeMemoryElement = this._innerContentElement.createChild("div");
         this._nativeMemoryLiveChart = new WebInspector.NativeMemoryBarChart();
         this._nativeMemoryLiveChart.show(this._nativeMemoryElement);
     }
 
-    this._contentElement.createChild("div", "flexible-space");
-
-    this._controlButton = this._contentElement.createChild("button", "control-profiling");
-    this._controlButton.addEventListener("click", this._controlButtonClicked.bind(this), false);
-    this._updateControls();
+    this._innerContentElement.createChild("div", "flexible-space");
 }
 
-WebInspector.ProfileLauncherView.EventTypes = {
+WebInspector.MultiProfileLauncherView.EventTypes = {
     ProfileTypeSelected: "profile-type-selected"
 }
 
-WebInspector.ProfileLauncherView.prototype = {
+WebInspector.MultiProfileLauncherView.prototype = {
     /**
+     * @override
      * @param {WebInspector.ProfileType} profileType
      */
     addProfileType: function(profileType)
     {
         var checked = !this._profileTypeSelectorForm.children.length;
-        var labelElement;
-        if (this._singleProfileMode)
-            labelElement = this._profileTypeSelectorForm.createChild("h1");
-        else {
-            labelElement = this._profileTypeSelectorForm.createChild("label");
-            labelElement.textContent = profileType.name;
-            var optionElement = document.createElement("input");
-            labelElement.insertBefore(optionElement, labelElement.firstChild);
-            optionElement.type = "radio";
-            optionElement.name = "profile-type";
-            optionElement.style.hidden = true;
-            if (checked) {
-                optionElement.checked = checked;
-                this.dispatchEventToListeners(WebInspector.ProfileLauncherView.EventTypes.ProfileTypeSelected, profileType);
-            }
-            optionElement.addEventListener("change", this._profileTypeChanged.bind(this, profileType), false);
+        var labelElement = this._profileTypeSelectorForm.createChild("label");
+        labelElement.textContent = profileType.name;
+        var optionElement = document.createElement("input");
+        labelElement.insertBefore(optionElement, labelElement.firstChild);
+        optionElement.type = "radio";
+        optionElement.name = "profile-type";
+        optionElement.style.hidden = true;
+        if (checked) {
+            optionElement.checked = checked;
+            this.dispatchEventToListeners(WebInspector.MultiProfileLauncherView.EventTypes.ProfileTypeSelected, profileType);
         }
+        optionElement.addEventListener("change", this._profileTypeChanged.bind(this, profileType), false);
         var descriptionElement = labelElement.createChild("p");
         descriptionElement.textContent = profileType.description;
         var decorationElement = profileType.decorationElement();
         if (decorationElement)
             labelElement.appendChild(decorationElement);
-        if (this._singleProfileMode)
-            this._profileTypeChanged(profileType, null);
     },
 
     _controlButtonClicked: function()
@@ -130,7 +175,7 @@ WebInspector.ProfileLauncherView.prototype = {
      */
     _profileTypeChanged: function(profileType, event)
     {
-        this.dispatchEventToListeners(WebInspector.ProfileLauncherView.EventTypes.ProfileTypeSelected, profileType);
+        this.dispatchEventToListeners(WebInspector.MultiProfileLauncherView.EventTypes.ProfileTypeSelected, profileType);
     },
 
     profileStarted: function()
@@ -145,5 +190,27 @@ WebInspector.ProfileLauncherView.prototype = {
         this._updateControls();
     },
 
-    __proto__: WebInspector.View.prototype
+    __proto__: WebInspector.ProfileLauncherView.prototype
+}
+
+
+/**
+ * @constructor
+ * @extends {WebInspector.ProfileLauncherView}
+ * @param {!WebInspector.ProfilesPanel} profilesPanel
+ */
+WebInspector.NativeProfileLauncherView = function(profilesPanel)
+{
+    WebInspector.ProfileLauncherView.call(this, profilesPanel);
+
+    if (WebInspector.experimentsSettings.liveNativeMemoryChart.isEnabled()) {
+        this._nativeMemoryElement = document.createElement("div");
+        this._contentElement.insertBefore(this._nativeMemoryElement, this._controlButton);
+        this._nativeMemoryLiveChart = new WebInspector.NativeMemoryBarChart();
+        this._nativeMemoryLiveChart.show(this._nativeMemoryElement);
+    }
+}
+
+WebInspector.NativeProfileLauncherView.prototype = {
+    __proto__: WebInspector.ProfileLauncherView.prototype
 }
index 5780086..04475ae 100644 (file)
@@ -333,8 +333,9 @@ WebInspector.ProfileHeader.prototype = {
  * @extends {WebInspector.Panel}
  * @implements {WebInspector.ContextMenu.Provider}
  * @param {string=} name
+ * @param {WebInspector.ProfileType=} type
  */
-WebInspector.ProfilesPanel = function(name)
+WebInspector.ProfilesPanel = function(name, type)
 {
     // If the name is not specified the ProfilesPanel works in multi-profile mode.
     var singleProfileMode = typeof name !== "undefined";
@@ -391,24 +392,30 @@ WebInspector.ProfilesPanel = function(name)
 
     this._profilerEnabled = !Capabilities.profilerCausesRecompilation;
 
-    this._launcherView = new WebInspector.ProfileLauncherView(this, singleProfileMode);
-    this._launcherView.addEventListener(WebInspector.ProfileLauncherView.EventTypes.ProfileTypeSelected, this._onProfileTypeSelected, this);
-    this._reset();
+    if (singleProfileMode) {
+        this._launcherView = this._createLauncherView();
+        this._registerProfileType(/** @type {!WebInspector.ProfileType} */ (type));
+        this._selectedProfileType = type;
+        this._updateProfileTypeSpecificUI();
+    } else {
+        this._launcherView = new WebInspector.MultiProfileLauncherView(this);
+        this._launcherView.addEventListener(WebInspector.MultiProfileLauncherView.EventTypes.ProfileTypeSelected, this._onProfileTypeSelected, this);
 
-    if (!singleProfileMode) {
         this._registerProfileType(new WebInspector.CPUProfileType());
         if (!WebInspector.WorkerManager.isWorkerFrontend())
             this._registerProfileType(new WebInspector.CSSSelectorProfileType());
         if (Capabilities.heapProfilerPresent)
             this._registerProfileType(new WebInspector.HeapSnapshotProfileType());
-        if (WebInspector.experimentsSettings.nativeMemorySnapshots.isEnabled()) {
+        if (!WebInspector.WorkerManager.isWorkerFrontend() && WebInspector.experimentsSettings.nativeMemorySnapshots.isEnabled()) {
             this._registerProfileType(new WebInspector.NativeSnapshotProfileType());
             this._registerProfileType(new WebInspector.NativeMemoryProfileType());
         }
-        if (WebInspector.experimentsSettings.canvasInspection.isEnabled())
+        if (!WebInspector.WorkerManager.isWorkerFrontend() && WebInspector.experimentsSettings.canvasInspection.isEnabled())
             this._registerProfileType(new WebInspector.CanvasProfileType());
     }
 
+    this._reset();
+
     this._createFileSelectorElement();
     this.element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
 
@@ -425,6 +432,14 @@ WebInspector.ProfilesPanel.prototype = {
     },
 
     /**
+     * @return {!WebInspector.ProfileLauncherView}
+     */
+    _createLauncherView: function()
+    {
+        return new WebInspector.ProfileLauncherView(this);
+    },
+
+    /**
      * @param {!File} file
      */
     _loadFromFile: function(file)
@@ -1353,8 +1368,7 @@ WebInspector.ProfilesSidebarTreeElement.prototype = {
  */
 WebInspector.CPUProfilerPanel = function()
 {
-    WebInspector.ProfilesPanel.call(this, "cpu-profiler");
-    this._registerProfileType(new WebInspector.CPUProfileType());
+    WebInspector.ProfilesPanel.call(this, "cpu-profiler", new WebInspector.CPUProfileType());
 }
 
 WebInspector.CPUProfilerPanel.prototype = {
@@ -1368,8 +1382,7 @@ WebInspector.CPUProfilerPanel.prototype = {
  */
 WebInspector.CSSSelectorProfilerPanel = function()
 {
-    WebInspector.ProfilesPanel.call(this, "css-profiler");
-    this._registerProfileType(new WebInspector.CSSSelectorProfileType());
+    WebInspector.ProfilesPanel.call(this, "css-profiler", new WebInspector.CSSSelectorProfileType());
 }
 
 WebInspector.CSSSelectorProfilerPanel.prototype = {
@@ -1383,8 +1396,7 @@ WebInspector.CSSSelectorProfilerPanel.prototype = {
  */
 WebInspector.HeapProfilerPanel = function()
 {
-    WebInspector.ProfilesPanel.call(this, "heap-profiler");
-    this._registerProfileType(new WebInspector.HeapSnapshotProfileType());
+    WebInspector.ProfilesPanel.call(this, "heap-profiler", new WebInspector.HeapSnapshotProfileType());
 }
 
 WebInspector.HeapProfilerPanel.prototype = {
@@ -1398,8 +1410,7 @@ WebInspector.HeapProfilerPanel.prototype = {
  */
 WebInspector.CanvasProfilerPanel = function()
 {
-    WebInspector.ProfilesPanel.call(this, "canvas-profiler");
-    this._registerProfileType(new WebInspector.CanvasProfileType());
+    WebInspector.ProfilesPanel.call(this, "canvas-profiler", new WebInspector.CanvasProfileType());
 }
 
 WebInspector.CanvasProfilerPanel.prototype = {
@@ -1413,11 +1424,19 @@ WebInspector.CanvasProfilerPanel.prototype = {
  */
 WebInspector.MemoryChartProfilerPanel = function()
 {
-    WebInspector.ProfilesPanel.call(this, "memory-chart-profiler");
-    this._registerProfileType(new WebInspector.NativeMemoryProfileType());
+    WebInspector.ProfilesPanel.call(this, "memory-chart-profiler", new WebInspector.NativeMemoryProfileType());
 }
 
 WebInspector.MemoryChartProfilerPanel.prototype = {
+    /**
+     * @override
+     * @return {!WebInspector.ProfileLauncherView}
+     */
+    _createLauncherView: function()
+    {
+        return new WebInspector.NativeProfileLauncherView(this);
+    },
+
     __proto__: WebInspector.ProfilesPanel.prototype
 }
 
@@ -1428,8 +1447,7 @@ WebInspector.MemoryChartProfilerPanel.prototype = {
  */
 WebInspector.NativeMemoryProfilerPanel = function()
 {
-    WebInspector.ProfilesPanel.call(this, "memory-snapshot-profiler");
-    this._registerProfileType(new WebInspector.NativeSnapshotProfileType());
+    WebInspector.ProfilesPanel.call(this, "memory-snapshot-profiler", new WebInspector.NativeSnapshotProfileType());
 }
 
 WebInspector.NativeMemoryProfilerPanel.prototype = {
index 296dafe..7a1db1c 100644 (file)
 
 .panel-enabler-view.profile-launcher-view button:not(.status-bar-item) {
     color: rgb(6, 6, 6);
-    margin: 16px 0;
+    margin: 0 0 16px;
 }
 
 .profile-launcher-view-content button.running:not(.status-bar-item) {