- Revision
- 205930
- Author
- [email protected]
- Date
- 2016-09-14 14:15:59 -0700 (Wed, 14 Sep 2016)
Log Message
Web Inspector: Call Stack tree in the Debugger sidebar should mark the active call frame
https://bugs.webkit.org/show_bug.cgi?id=161945
<rdar://problem/28293451>
Reviewed by Joseph Pecoraro.
Add an indicator for the active call frame tree element, patterned after
Xcode's call stack UI. The indicator should be positioned on the left,
with a fill color based on the tree element's selected/focused state.
* UserInterface/Images/ActiveCallFrame.svg: Added.
Image for "active call frame" tree element status.
* UserInterface/Main.html:
New file.
* UserInterface/Views/CallFrameTreeElement.css: Added.
(.tree-outline .item.call-frame .status):
(.tree-outline .item.call-frame .status > .status-image):
(.tree-outline .item.call-frame.selected .status > .status-image):
(.tree-outline:matches(:focus, .force-focus) .item.call-frame.selected .status > .status-image):
New tree element styles.
* UserInterface/Views/CallFrameTreeElement.js:
(WebInspector.CallFrameTreeElement):
(WebInspector.CallFrameTreeElement.prototype.get callFrame):
(WebInspector.CallFrameTreeElement.prototype.get isActiveCallFrame):
(WebInspector.CallFrameTreeElement.prototype.set isActiveCallFrame):
Add property for toggling active call frame indicator.
(WebInspector.CallFrameTreeElement.prototype.onattach):
(WebInspector.CallFrameTreeElement.prototype._updateStatus):
* UserInterface/Views/DebuggerSidebarPanel.js:
(WebInspector.DebuggerSidebarPanel):
(WebInspector.DebuggerSidebarPanel.prototype._debuggerCallFramesDidChange):
(WebInspector.DebuggerSidebarPanel.prototype._debuggerActiveCallFrameDidChange):
* UserInterface/Views/Variables.css:
(:root):
New global for dark border color.
Modified Paths
Added Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (205929 => 205930)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-09-14 20:57:41 UTC (rev 205929)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-09-14 21:15:59 UTC (rev 205930)
@@ -1,3 +1,46 @@
+2016-09-14 Matt Baker <[email protected]>
+
+ Web Inspector: Call Stack tree in the Debugger sidebar should mark the active call frame
+ https://bugs.webkit.org/show_bug.cgi?id=161945
+ <rdar://problem/28293451>
+
+ Reviewed by Joseph Pecoraro.
+
+ Add an indicator for the active call frame tree element, patterned after
+ Xcode's call stack UI. The indicator should be positioned on the left,
+ with a fill color based on the tree element's selected/focused state.
+
+ * UserInterface/Images/ActiveCallFrame.svg: Added.
+ Image for "active call frame" tree element status.
+
+ * UserInterface/Main.html:
+ New file.
+
+ * UserInterface/Views/CallFrameTreeElement.css: Added.
+ (.tree-outline .item.call-frame .status):
+ (.tree-outline .item.call-frame .status > .status-image):
+ (.tree-outline .item.call-frame.selected .status > .status-image):
+ (.tree-outline:matches(:focus, .force-focus) .item.call-frame.selected .status > .status-image):
+ New tree element styles.
+
+ * UserInterface/Views/CallFrameTreeElement.js:
+ (WebInspector.CallFrameTreeElement):
+ (WebInspector.CallFrameTreeElement.prototype.get callFrame):
+ (WebInspector.CallFrameTreeElement.prototype.get isActiveCallFrame):
+ (WebInspector.CallFrameTreeElement.prototype.set isActiveCallFrame):
+ Add property for toggling active call frame indicator.
+ (WebInspector.CallFrameTreeElement.prototype.onattach):
+ (WebInspector.CallFrameTreeElement.prototype._updateStatus):
+
+ * UserInterface/Views/DebuggerSidebarPanel.js:
+ (WebInspector.DebuggerSidebarPanel):
+ (WebInspector.DebuggerSidebarPanel.prototype._debuggerCallFramesDidChange):
+ (WebInspector.DebuggerSidebarPanel.prototype._debuggerActiveCallFrameDidChange):
+
+ * UserInterface/Views/Variables.css:
+ (:root):
+ New global for dark border color.
+
2016-09-13 Matt Baker <[email protected]>
Web Inspector: Use Array.shallowEqual instead of Object.shallowEqual in more places
Added: trunk/Source/WebInspectorUI/UserInterface/Images/ActiveCallFrame.svg (0 => 205930)
--- trunk/Source/WebInspectorUI/UserInterface/Images/ActiveCallFrame.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/ActiveCallFrame.svg 2016-09-14 21:15:59 UTC (rev 205930)
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2016 Apple Inc. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="M 4 15.5 L 0.5 15.5 L 0.5 0.5 L 4 0.5 L 7 7.5 Z"/>
+</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (205929 => 205930)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-09-14 20:57:41 UTC (rev 205929)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-09-14 21:15:59 UTC (rev 205930)
@@ -43,6 +43,7 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
Added: trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css (0 => 205930)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css 2016-09-14 21:15:59 UTC (rev 205930)
@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2016 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. AND ITS CONTRIBUTORS ``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 ITS 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.
+ */
+
+.tree-outline .item.call-frame .status {
+ position: absolute;
+ float: none;
+ left: 1px;
+ margin: 0;
+}
+
+.tree-outline .item.call-frame .status > .status-image {
+ width: 17px;
+ height: 17px;
+ fill: var(--border-color);
+}
+
+.tree-outline .item.call-frame.selected .status > .status-image {
+ fill: var(--border-color-dark);
+}
+
+.tree-outline:matches(:focus, .force-focus) .item.call-frame.selected .status > .status-image {
+ fill: var(--selected-foreground-color);
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js (205929 => 205930)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js 2016-09-14 20:57:41 UTC (rev 205929)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js 2016-09-14 21:15:59 UTC (rev 205930)
@@ -32,7 +32,7 @@
let className = WebInspector.CallFrameView.iconClassNameForCallFrame(callFrame);
let title = callFrame.functionName || WebInspector.UIString("(anonymous function)");
- super(className, title, null, callFrame, false);
+ super(["call-frame", className], title, null, callFrame, false);
if (!callFrame.nativeCode && callFrame.sourceCodeLocation) {
let displayScriptURL = callFrame.sourceCodeLocation.displaySourceCode.url;
@@ -45,13 +45,21 @@
}
this._callFrame = callFrame;
+ this._isActiveCallFrame = false;
}
// Public
- get callFrame()
+ get callFrame() { return this._callFrame; }
+ get isActiveCallFrame() { return this._isActiveCallFrame; }
+
+ set isActiveCallFrame(x)
{
- return this._callFrame;
+ if (this._isActiveCallFrame === x)
+ return;
+
+ this._isActiveCallFrame = x;
+ this._updateStatus();
}
// Protected
@@ -69,5 +77,24 @@
let tooltipPrefix = this.mainTitle + tailCallSuffix + "\n";
this._callFrame.sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
}
+
+ this._updateStatus();
}
+
+ // Private
+
+ _updateStatus()
+ {
+ if (!this.element)
+ return;
+
+ if (!this._isActiveCallFrame) {
+ this.status = null;
+ return;
+ }
+
+ if (!this._statusImageElement)
+ this._statusImageElement = useSVGSymbol("Images/ActiveCallFrame.svg", "status-image");
+ this.status = this._statusImageElement;
+ }
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js (205929 => 205930)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js 2016-09-14 20:57:41 UTC (rev 205929)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js 2016-09-14 21:15:59 UTC (rev 205930)
@@ -162,6 +162,7 @@
this._callStackContentTreeOutline = this.createContentTreeOutline(true, true);
this._callStackContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+ this._activeCallFrameTreeElement = null;
this._callStackRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Call Frames"));
this._callStackRow.showEmptyMessage();
@@ -598,6 +599,7 @@
_debuggerCallFramesDidChange()
{
this._callStackContentTreeOutline.removeChildren();
+ this._activeCallFrameTreeElement = null;
var callFrames = WebInspector.debuggerManager.callFrames;
if (!callFrames || !callFrames.length) {
@@ -608,18 +610,18 @@
this._callStackRow.hideEmptyMessage();
this._callStackRow.element.appendChild(this._callStackContentTreeOutline.element);
- var treeElementToSelect = null;
-
var activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
for (var i = 0; i < callFrames.length; ++i) {
var callFrameTreeElement = new WebInspector.CallFrameTreeElement(callFrames[i]);
if (callFrames[i] === activeCallFrame)
- treeElementToSelect = callFrameTreeElement;
+ this._activeCallFrameTreeElement = callFrameTreeElement;
this._callStackContentTreeOutline.appendChild(callFrameTreeElement);
}
- if (treeElementToSelect)
- treeElementToSelect.select(true, true);
+ if (this._activeCallFrameTreeElement) {
+ this._activeCallFrameTreeElement.select(true, true);
+ this._activeCallFrameTreeElement.isActiveCallFrame = true;
+ }
}
_debuggerActiveCallFrameDidChange()
@@ -628,6 +630,13 @@
if (!callFrames)
return;
+ if (this._activeCallFrameTreeElement)
+ this._activeCallFrameTreeElement.isActiveCallFrame = false;
+
+ this._activeCallFrameTreeElement = this._callStackContentTreeOutline.findTreeElement(WebInspector.debuggerManager.activeCallFrame);
+ if (this._activeCallFrameTreeElement)
+ this._activeCallFrameTreeElement.isActiveCallFrame = true;
+
var indexOfActiveCallFrame = callFrames.indexOf(WebInspector.debuggerManager.activeCallFrame);
// It is useful to turn off the step out button when there is no call frame to go through
// since there might be call frames in the backend that were removed when processing the call
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (205929 => 205930)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2016-09-14 20:57:41 UTC (rev 205929)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2016-09-14 21:15:59 UTC (rev 205930)
@@ -45,6 +45,7 @@
--glyph-color-active-pressed: hsl(218, 85%, 52%);
--border-color: hsl(0, 0%, 70%);
+ --border-color-dark: hsl(0, 0%, 57%);
--panel-background-color: hsl(0, 0%, 94%);
--panel-background-color-light: hsl(0, 0%, 96%);
