Adds implementations of the Scope Chain and Call Stack sidebar panes.
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 13 May 2008 22:30:29 +0000 (22:30 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 13 May 2008 22:30:29 +0000 (22:30 +0000)
These panes use the JSJavaScriptCallFrame object that will be passed
to the update functions.

Reviewed by Kevin McCullough.

* English.lproj/localizedStrings.js: Adds new strings.
* WebCore.vcproj/WebCore.vcproj: Adds new files.
* page/inspector/CallStackSidebarPane.js:
(WebInspector.CallStackSidebarPane.prototype.update): Walk the
caller chain of the call frame and make placards for each.
(WebInspector.CallStackSidebarPane.prototype.get selectedCallFrame):
Return _selectedCallFrame.
(WebInspector.CallStackSidebarPane.prototype.set selectedCallFrame):
Set _selectedCallFrame and dispatch the "call frame selected" event.
(WebInspector.CallStackSidebarPane.prototype._placardSelected):
Set the selectedCallFrame based on the clicked placard.
* page/inspector/Placard.js: Added. A user interface object that can
be used to show a title and a subtitle block with a selected state.
* page/inspector/ScopeChainSidebarPane.js: Added.
(WebInspector.ScopeChainSidebarPane): Call the base object and set the title.
(WebInspector.ScopeChainSidebarPane.prototype.update): Iterate over the
call frame's scope chain and make ObjectPropertiesSections for each.
* page/inspector/SidebarPane.js:
(WebInspector.SidebarPane.prototype): Inherit from WebInspector.Object.
* page/inspector/WebKit.qrc: Add new files.
* page/inspector/inspector.css: Add placard styles.
* page/inspector/inspector.html: Add new files.

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

WebCore/ChangeLog
WebCore/English.lproj/localizedStrings.js
WebCore/WebCore.vcproj/WebCore.vcproj
WebCore/page/inspector/CallStackSidebarPane.js
WebCore/page/inspector/Placard.js [new file with mode: 0644]
WebCore/page/inspector/ScopeChainSidebarPane.js [new file with mode: 0644]
WebCore/page/inspector/SidebarPane.js
WebCore/page/inspector/WebKit.qrc
WebCore/page/inspector/inspector.css
WebCore/page/inspector/inspector.html

index 5b21985..0545500 100644 (file)
@@ -1,5 +1,36 @@
 2008-05-13  Timothy Hatcher  <timothy@apple.com>
 
+        Adds implementations of the Scope Chain and Call Stack sidebar panes.
+        These panes use the JSJavaScriptCallFrame object that will be passed
+        to the update functions.
+
+        Reviewed by Kevin McCullough.
+
+        * English.lproj/localizedStrings.js: Adds new strings.
+        * WebCore.vcproj/WebCore.vcproj: Adds new files.
+        * page/inspector/CallStackSidebarPane.js:
+        (WebInspector.CallStackSidebarPane.prototype.update): Walk the 
+        caller chain of the call frame and make placards for each.
+        (WebInspector.CallStackSidebarPane.prototype.get selectedCallFrame):
+        Return _selectedCallFrame. 
+        (WebInspector.CallStackSidebarPane.prototype.set selectedCallFrame):
+        Set _selectedCallFrame and dispatch the "call frame selected" event.
+        (WebInspector.CallStackSidebarPane.prototype._placardSelected):
+        Set the selectedCallFrame based on the clicked placard.
+        * page/inspector/Placard.js: Added. A user interface object that can
+        be used to show a title and a subtitle block with a selected state.
+        * page/inspector/ScopeChainSidebarPane.js: Added.
+        (WebInspector.ScopeChainSidebarPane): Call the base object and set the title.
+        (WebInspector.ScopeChainSidebarPane.prototype.update): Iterate over the
+        call frame's scope chain and make ObjectPropertiesSections for each.
+        * page/inspector/SidebarPane.js:
+        (WebInspector.SidebarPane.prototype): Inherit from WebInspector.Object.
+        * page/inspector/WebKit.qrc: Add new files.
+        * page/inspector/inspector.css: Add placard styles.
+        * page/inspector/inspector.html: Add new files.
+
+2008-05-13  Timothy Hatcher  <timothy@apple.com>
+
         Fixes the bug where SourceViews would be blank if shown before
         the Resource finished loading.
 
index b64c787..3a0e7a9 100644 (file)
Binary files a/WebCore/English.lproj/localizedStrings.js and b/WebCore/English.lproj/localizedStrings.js differ
index b939bd7..7cd6d05 100644 (file)
                                        >\r
                                </File>\r
                                <File\r
+                                       RelativePath="..\page\inspector\ScopeChainSidebarPane.js"\r
+                                       >\r
+                               </File>\r
+                               <File\r
                                        RelativePath="..\page\inspector\CallStackSidebarPane.js"\r
                                        >\r
                                </File>\r
                                        >\r
                                </File>\r
                                <File\r
+                                       RelativePath="..\page\inspector\Placard.js"\r
+                                       >\r
+                               </File>\r
+                               <File\r
                                        RelativePath="..\page\inspector\PropertiesSection.js"\r
                                        >\r
                                </File>\r
index 849e562..abb1c1b 100644 (file)
@@ -29,7 +29,60 @@ WebInspector.CallStackSidebarPane = function()
 }
 
 WebInspector.CallStackSidebarPane.prototype = {
-    
+    update: function(callFrame)
+    {
+        this.bodyElement.removeChildren();
+
+        this.placards = [];
+        delete this._selectedCallFrame;
+
+        if (!callFrame)
+            return;
+
+        do {
+            var title = callFrame.functionName;
+            if (!title && callFrame.caller)
+                title = WebInspector.UIString("(anonymous function)");
+            else if (!title)
+                title = WebInspector.UIString("(global code)");
+
+            var placard = new WebInspector.Placard(title);
+            placard.callFrame = callFrame;
+
+            placard.element.addEventListener("click", this._placardSelected.bind(this), false);
+
+            this.placards.push(placard);
+            this.bodyElement.appendChild(placard.element);
+
+            callFrame = callFrame.caller;
+        } while (callFrame);
+    },
+
+    get selectedCallFrame()
+    {
+        return this._selectedCallFrame;
+    },
+
+    set selectedCallFrame(x)
+    {
+        if (this._selectedCallFrame === x)
+            return;
+
+        this._selectedCallFrame = x;
+
+        for (var i = 0; i < this.placards.length; ++i) {
+            var placard = this.placards[i];
+            placard.selected = (placard.callFrame === this._selectedCallFrame);
+        }
+
+        this.dispatchEventToListeners("call frame selected");
+    },
+
+    _placardSelected: function(event)
+    {
+        var placardElement = event.target.enclosingNodeOrSelfWithClass("placard");
+        this.selectedCallFrame = placardElement.placard.callFrame;
+    }
 }
 
 WebInspector.CallStackSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;
diff --git a/WebCore/page/inspector/Placard.js b/WebCore/page/inspector/Placard.js
new file mode 100644 (file)
index 0000000..69a168e
--- /dev/null
@@ -0,0 +1,106 @@
+/*
+ * 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.Placard = function(title, subtitle)
+{
+    this.element = document.createElement("div");
+    this.element.className = "placard";
+    this.element.placard = this;
+
+    this.titleElement = document.createElement("div");
+    this.titleElement.className = "title";
+
+    this.subtitleElement = document.createElement("div");
+    this.subtitleElement.className = "subtitle";
+
+    this.element.appendChild(this.subtitleElement);
+    this.element.appendChild(this.titleElement);
+
+    this.title = title;
+    this.subtitle = subtitle;
+    this.selected = false;
+}
+
+WebInspector.Placard.prototype = {
+    get title()
+    {
+        return this._title;
+    },
+
+    set title(x)
+    {
+        if (this._title === x)
+            return;
+        this._title = x;
+        this.titleElement.textContent = x;
+    },
+
+    get subtitle()
+    {
+        return this._subtitle;
+    },
+
+    set subtitle(x)
+    {
+        if (this._subtitle === x)
+            return;
+        this._subtitle = x;
+        this.subtitleElement.innerHTML = x;
+    },
+
+    get selected()
+    {
+        return this._selected;
+    },
+
+    set selected(x)
+    {
+        if (x)
+            this.select();
+        else
+            this.deselect();
+    },
+
+    select: function()
+    {
+        if (this._selected)
+            return;
+        this._selected = true;
+        this.element.addStyleClass("selected");
+    },
+
+    deselect: function()
+    {
+        if (!this._selected)
+            return;
+        this._selected = false;
+        this.element.removeStyleClass("selected");
+    },
+
+    toggleSelected: function()
+    {
+        this.selected = !this.selected;
+    }
+}
diff --git a/WebCore/page/inspector/ScopeChainSidebarPane.js b/WebCore/page/inspector/ScopeChainSidebarPane.js
new file mode 100644 (file)
index 0000000..8542ab8
--- /dev/null
@@ -0,0 +1,64 @@
+/*
+ * 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.ScopeChainSidebarPane = function()
+{
+    WebInspector.SidebarPane.call(this, WebInspector.UIString("Scope Chain"));
+}
+
+WebInspector.ScopeChainSidebarPane.prototype = {
+    update: function(callFrame)
+    {
+        this.bodyElement.removeChildren();
+
+        this.sections = [];
+
+        if (!callFrame)
+            return;
+
+        var foundLocalScope = false;
+        var scopeChain = callFrame.scopeChain;
+        for (var i = 0; i < scopeChain.length; ++i) {
+            var scopeObject = scopeChain[i];
+            var title = null;
+            var localScope = false;
+
+            if (Object.prototype.toString.call(scopeObject) === "[object Activation]") {
+                title = WebInspector.UIString("Local");
+                foundLocalScope = true;
+                localScope = true;
+            }
+
+            var section = new WebInspector.ObjectPropertiesSection(scopeObject, title);
+            if (!foundLocalScope || localScope)
+                section.expanded = true;
+
+            this.sections.push(section);
+            this.bodyElement.appendChild(section.element);
+        }
+    }
+}
+
+WebInspector.ScopeChainSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;
index 53f9d6d..af9e5f9 100644 (file)
@@ -121,3 +121,5 @@ WebInspector.SidebarPane.prototype = {
         this.expanded = !this.expanded;
     }
 }
+
+WebInspector.SidebarPane.prototype.__proto__ = WebInspector.Object.prototype;
index 25c1759..cbf149b 100644 (file)
@@ -18,6 +18,7 @@
     <file>Object.js</file>
     <file>ObjectPropertiesSection.js</file>
     <file>Panel.js</file>
+    <file>Placard.js</file>
     <file>PropertiesSection.js</file>
     <file>PropertiesSidebarPane.js</file>
     <file>ResourceCategory.js</file>
@@ -25,6 +26,7 @@
     <file>ResourcesPanel.js</file>
     <file>ResourceView.js</file>
     <file>ScriptsPanel.js</file>
+    <file>ScopeChainSidebarPane.js</file>
     <file>SidebarPane.js</file>
     <file>SidebarTreeElement.js</file>
     <file>SourceView.js</file>
index 5e2aba8..9ce3143 100644 (file)
@@ -822,6 +822,65 @@ body:not(.inactive) .focused .outline-disclosure li.selected * {
     color: inherit;
 }
 
+.placard {
+    position: relative;
+    margin-top: 1px;
+    padding: 3px 8px 4px 17px;
+    min-height: 18px;
+    white-space: nowrap;
+}
+
+.placard:nth-of-type(2n) {
+    background-color: rgb(234, 243, 255);
+}
+
+.placard.selected {
+    border-top: 1px solid rgb(145, 160, 192);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
+    -webkit-background-origin: padding;
+    -webkit-background-clip: padding;
+}
+
+.focused .placard.selected {
+    border-top: 1px solid rgb(68, 128, 200);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
+}
+
+body.inactive .placard.selected {
+    border-top: 1px solid rgb(151, 151, 151);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
+}
+
+.placard .title {
+    color: black;
+    font-weight: normal;
+    word-wrap: break-word;
+    white-space: normal;
+}
+
+.placard.selected .title {
+    color: white;
+    font-weight: bold;
+}
+
+.placard .subtitle {
+    float: right;
+    font-size: 10px;
+    margin-left: 5px;
+    max-width: 55%;
+    color: rgba(0, 0, 0, 0.7);
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.placard.selected .subtitle {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.placard .subtitle a {
+    color: inherit;
+}
+
 .section {
     position: relative;
     margin-top: 1px;
index 2c008f7..0b83f55 100644 (file)
@@ -35,6 +35,7 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="inspector.js"></script>
     <script type="text/javascript" src="Object.js"></script>
     <script type="text/javascript" src="TextPrompt.js"></script>
+    <script type="text/javascript" src="Placard.js"></script>
     <script type="text/javascript" src="View.js"></script>
     <script type="text/javascript" src="Console.js"></script>
     <script type="text/javascript" src="Resource.js"></script>
@@ -48,6 +49,7 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="ObjectPropertiesSection.js"></script>
     <script type="text/javascript" src="BreakpointsSidebarPane.js"></script>
     <script type="text/javascript" src="CallStackSidebarPane.js"></script>
+    <script type="text/javascript" src="ScopeChainSidebarPane.js"></script>
     <script type="text/javascript" src="MetricsSidebarPane.js"></script>
     <script type="text/javascript" src="PropertiesSidebarPane.js"></script>
     <script type="text/javascript" src="StylesSidebarPane.js"></script>