2008-05-05 Kevin McCullough <kmccullough@apple.com>
authorkmccullough@apple.com <kmccullough@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 6 May 2008 00:01:19 +0000 (00:01 +0000)
committerkmccullough@apple.com <kmccullough@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 6 May 2008 00:01:19 +0000 (00:01 +0000)
        Reviewed by Tim.

        -<rdar://problem/5770054> JavaScript profiler (10928)
        -Begininings of a UI for the Profiler in the WebInspector.

        * English.lproj/InspectorLocalizedStrings.js: Add new strings to be
        localized.
        * page/inspector/DatabasesPanel.js: Changed the name of the Databae's
        results table to be more generic as it is now also used by the profiler.
        * page/inspector/Images/glossySelected.png: Added.
        * page/inspector/Images/profilesIcon.png: Added.
        * page/inspector/Images/treeUpTriangleBlack.png: Added.
        * page/inspector/Images/treeUpTriangleWhite.png: Added.
        * page/inspector/ProfileView.js: Added. Sets up the header of the table.
        * page/inspector/ProfilesPanel.js: Added.
        * page/inspector/ProfilesPanel.js: Added. Sets up the containers of the
        profiler's content.
        * page/inspector/inspector.css: Change database-result-table to be more
        generic as well as add the styles needed by the profiler.
        * page/inspector/inspector.html: Add profiler support.

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

WebCore/ChangeLog
WebCore/page/inspector/DatabasesPanel.js
WebCore/page/inspector/Images/glossySelected.png [new file with mode: 0644]
WebCore/page/inspector/Images/profilesIcon.png [new file with mode: 0644]
WebCore/page/inspector/Images/treeUpTriangleBlack.png [new file with mode: 0644]
WebCore/page/inspector/Images/treeUpTriangleWhite.png [new file with mode: 0644]
WebCore/page/inspector/ProfileView.js [new file with mode: 0644]
WebCore/page/inspector/ProfilesPanel.js [new file with mode: 0644]
WebCore/page/inspector/inspector.css
WebCore/page/inspector/inspector.html

index 49de041..6270e2a 100644 (file)
@@ -1,3 +1,26 @@
+2008-05-05  Kevin McCullough  <kmccullough@apple.com>
+
+        Reviewed by Tim.
+
+        -<rdar://problem/5770054> JavaScript profiler (10928)
+        -Begininings of a UI for the Profiler in the WebInspector.
+
+        * English.lproj/InspectorLocalizedStrings.js: Add new strings to be
+        localized.
+        * page/inspector/DatabasesPanel.js: Changed the name of the Databae's
+        results table to be more generic as it is now also used by the profiler.
+        * page/inspector/Images/glossySelected.png: Added.
+        * page/inspector/Images/profilesIcon.png: Added.
+        * page/inspector/Images/treeUpTriangleBlack.png: Added.
+        * page/inspector/Images/treeUpTriangleWhite.png: Added.
+        * page/inspector/ProfileView.js: Added. Sets up the header of the table.
+        * page/inspector/ProfilesPanel.js: Added.
+        * page/inspector/ProfilesPanel.js: Added. Sets up the containers of the
+        profiler's content.
+        * page/inspector/inspector.css: Change database-result-table to be more
+        generic as well as add the styles needed by the profiler.
+        * page/inspector/inspector.html: Add profiler support.
+
 2008-05-05  Brady Eidson  <beidson@apple.com>
 
         Change by Darin, reviewed by Brady
index 79adab0..ed28344 100644 (file)
@@ -172,7 +172,7 @@ WebInspector.DatabasesPanel.prototype = {
         var columnWidths = [];
 
         var table = document.createElement("table");
-        table.className = "database-result-table";
+        table.className = "data-grid";
 
         var headerRow = document.createElement("tr");
         table.appendChild(headerRow);
diff --git a/WebCore/page/inspector/Images/glossySelected.png b/WebCore/page/inspector/Images/glossySelected.png
new file mode 100644 (file)
index 0000000..20b1f1a
Binary files /dev/null and b/WebCore/page/inspector/Images/glossySelected.png differ
diff --git a/WebCore/page/inspector/Images/profilesIcon.png b/WebCore/page/inspector/Images/profilesIcon.png
new file mode 100644 (file)
index 0000000..6ca7cd6
Binary files /dev/null and b/WebCore/page/inspector/Images/profilesIcon.png differ
diff --git a/WebCore/page/inspector/Images/treeUpTriangleBlack.png b/WebCore/page/inspector/Images/treeUpTriangleBlack.png
new file mode 100644 (file)
index 0000000..ef69dbc
Binary files /dev/null and b/WebCore/page/inspector/Images/treeUpTriangleBlack.png differ
diff --git a/WebCore/page/inspector/Images/treeUpTriangleWhite.png b/WebCore/page/inspector/Images/treeUpTriangleWhite.png
new file mode 100644 (file)
index 0000000..43ce4be
Binary files /dev/null and b/WebCore/page/inspector/Images/treeUpTriangleWhite.png differ
diff --git a/WebCore/page/inspector/ProfileView.js b/WebCore/page/inspector/ProfileView.js
new file mode 100644 (file)
index 0000000..7c7ea69
--- /dev/null
@@ -0,0 +1,91 @@
+/*
+ * 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
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProfileView = function(profile)
+{
+    WebInspector.View.call(this);
+
+    this.element.addStyleClass("profile-view");
+
+    this.profile = profile;
+    
+    // Create the header
+    var headerTable = document.createElement("table");
+    headerTable.className = "data-grid";
+    this.element.appendChild(headerTable);
+
+    var headerTableTR = document.createElement("tr");
+    headerTable.appendChild(headerTableTR);
+
+    var headerTableSelf = document.createElement("th");
+    headerTableSelf.className = "narrow sort-descending selected";
+    headerTableSelf.addEventListener("click", this._toggleSortOrder.bind(this), false);
+    headerTableSelf.textContent = WebInspector.UIString("Self");
+    headerTableTR.appendChild(headerTableSelf);
+
+    this.selectedHeaderColumn = headerTableSelf;
+
+    var headerTableTotal = document.createElement("th");
+    headerTableTotal.classname = "narrow";
+    headerTableTotal.addEventListener("click", this._toggleSortOrder.bind(this), false);
+    headerTableTotal.textContent = WebInspector.UIString("Total");
+    headerTableTR.appendChild(headerTableTotal);
+
+    var headerTableCalls = document.createElement("th");
+    headerTableCalls.classname = "narrow";
+    headerTableCalls.addEventListener("click", this._toggleSortOrder.bind(this), false);
+    headerTableCalls.textContent = WebInspector.UIString("Calls");
+    headerTableTR.appendChild(headerTableCalls);
+
+    var headerTableSymbol = document.createElement("th");
+    headerTableSymbol.addEventListener("click", this._toggleSortOrder.bind(this), false);
+    headerTableSymbol.textContent = WebInspector.UIString("Function");
+    headerTableTR.appendChild(headerTableSymbol);
+}
+
+WebInspector.ProfileView.prototype = {
+
+    _toggleSortOrder: function(event)
+    {
+        var headerElement = event.target;
+        if (headerElement.hasStyleClass("sort-descending")) {
+            headerElement.removeStyleClass("sort-descending");
+            headerElement.addStyleClass("sort-ascending");
+        } else if (headerElement.hasStyleClass("sort-ascending")) {
+            headerElement.removeStyleClass("sort-ascending");
+            headerElement.addStyleClass("sort-descending");
+        } else {
+            this.selectedHeaderColumn.removeStyleClass("sort-ascending");
+            this.selectedHeaderColumn.removeStyleClass("sort-descending");
+            this.selectedHeaderColumn.removeStyleClass("selected");
+            headerElement.addStyleClass("sort-descending");
+            headerElement.addStyleClass("selected");
+            this.selectedHeaderColumn = headerElement;
+        }
+    },
+
+}
+
+WebInspector.ProfileView.prototype.__proto__ = WebInspector.View.prototype;
diff --git a/WebCore/page/inspector/ProfilesPanel.js b/WebCore/page/inspector/ProfilesPanel.js
new file mode 100644 (file)
index 0000000..ba4f7f2
--- /dev/null
@@ -0,0 +1,52 @@
+/*
+ * 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
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProfilesPanel = function()
+{
+    WebInspector.Panel.call(this);
+
+    this.element.addStyleClass("profiles");
+
+    this.sidebarElement = document.createElement("div");
+    this.sidebarElement.id = "profiles-sidebar";
+    this.sidebarElement.className = "sidebar";
+    this.element.appendChild(this.sidebarElement);
+
+    this.profileViews = document.createElement("div");
+    this.profileViews.id = "profile-views";
+    this.element.appendChild(this.profileViews);
+}
+
+
+WebInspector.ProfilesPanel.prototype = {
+    toolbarItemClass: "profiles",
+
+    get toolbarItemLabel()
+    {
+        return WebInspector.UIString("Profiles");
+    },
+}
+
+WebInspector.ProfilesPanel.prototype.__proto__ = WebInspector.Panel.prototype;
index 41292cc..5e2aba8 100644 (file)
@@ -132,6 +132,10 @@ body.detached.platform-mac-leopard #toolbar {
     content: url(Images/databasesIcon.png);
 }
 
+.toolbar-item.profiles .toolbar-icon {
+    content: url(Images/profilesIcon.png);
+}
+
 #searchResults {
     position: absolute;
     top: -100px;
@@ -1188,7 +1192,7 @@ body.inactive .sidebar {
     overflow-x: hidden;
 }
 
-.database-view.table .database-result-table {
+.database-view.table .data-grid {
     border: none;
     height: 100%;
 }
@@ -1215,11 +1219,11 @@ body.inactive .sidebar {
     color: rgb(66%, 33%, 33%);
 }
 
-.database-result-table .database-result-filler-row {
+.data-grid .database-result-filler-row {
     height: auto;
 }
 
-.database-result-table .database-result-filler-row.alternate td {
+.data-grid .database-result-filler-row.alternate td {
     background-position-y: 16px;
 }
 
@@ -1230,7 +1234,7 @@ body.inactive .sidebar {
     -webkit-background-clip: padding;
 }
 
-.database-result-table {
+.data-grid {
     border: 1px solid #aaa;
     table-layout: fixed;
     border-spacing: 0;
@@ -1238,7 +1242,7 @@ body.inactive .sidebar {
     width: 100%;
 }
 
-.database-result-table th {
+.data-grid th {
     text-align: left;
     background: url(Images/glossyHeader.png) repeat-x;
     border-right: 1px solid #aaa;
@@ -1250,15 +1254,15 @@ body.inactive .sidebar {
     white-space: nowrap;
 }
 
-.database-result-table tr {
+.data-grid tr {
     height: 16px;
 }
 
-.database-result-table tr.alternate {
+.data-grid tr.alternate {
     background-color: rgb(236, 243, 254);
 }
 
-.database-result-table td {
+.data-grid td {
     vertical-align: top;
     padding: 2px 4px;
     white-space: nowrap;
@@ -1266,12 +1270,48 @@ body.inactive .sidebar {
     -webkit-user-select: text;
 }
 
-.database-result-table td > div, .database-result-table th > div {
+.data-grid td > div, .data-grid th > div {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
 }
 
+.data-grid th.narrow {
+    width: 75px;
+}
+
+.data-grid th.selected {
+    border-top: 1px solid rgb(156, 168, 207);
+    border-bottom: 1px solid rgb(107, 139, 195);
+    border-left: url(Images/glossySelected.png);
+    border-right: url(Images/glossySelected.png);
+    background: url(Images/glossySelected.png) repeat-x;
+}
+
+.data-grid th.sort-ascending::before {
+    float: right;
+    display: inline-block;
+    margin-bottom: 2px;
+    margin-right: 3px;
+    width: 8px;
+    height: 8px;
+    content: url(Images/treeUpTriangleBlack.png);
+}
+
+.data-grid th.sort-descending::before {
+    float: right;
+    display: inline-block;
+    margin-top: 2px;
+    margin-right: 3px;
+    width: 8px;
+    height: 8px;
+    content: url(Images/treeDownTriangleBlack.png);
+}
+
+body.inactive .data-grid th.sort-ascending, body.inactive .data-grid th.sort-descending {
+    background: url(Images/glossyHeader.png) repeat-x;
+}
+
 .database-view.query {
     font-size: 10px;
     font-family: Monaco, Lucida Console, monospace;
@@ -2055,3 +2095,31 @@ body.inactive .sidebar-tree-item.selected {
 .resource-sidebar-tree-item .bubble.error {
     background-color: rgb(216, 35, 35);
 }
+
+/* Profiler Style */
+
+#profile-views {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 200px;
+    bottom: 0;
+}
+
+.profile-view {
+    display: none;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.profile-view.visible {
+    display: block;
+}
+
+.profile-view .data-grid {
+    border: none;
+}
index bcb23c5..8f72bc0 100644 (file)
@@ -52,12 +52,14 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="ResourcesPanel.js"></script>
     <script type="text/javascript" src="ScriptsPanel.js"></script>
     <script type="text/javascript" src="DatabasesPanel.js"></script>
+    <script type="text/javascript" src="ProfilesPanel.js"></script>
     <script type="text/javascript" src="ResourceView.js"></script>
     <script type="text/javascript" src="SourceView.js"></script>
     <script type="text/javascript" src="FontView.js"></script>
     <script type="text/javascript" src="ImageView.js"></script>
     <script type="text/javascript" src="DatabaseTableView.js"></script>
     <script type="text/javascript" src="DatabaseQueryView.js"></script>
+    <script type="text/javascript" src="ProfileView.js"></script>
 </head>
 <body class="detached">
     <div id="toolbar">