Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (225258 => 225259)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-11-29 06:10:50 UTC (rev 225258)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-11-29 06:16:54 UTC (rev 225259)
@@ -1,3 +1,55 @@
+2017-11-28 Matt Baker <[email protected]>
+
+ Web Inspector: Clean up backtrace in Canvas details sidebar
+ https://bugs.webkit.org/show_bug.cgi?id=179807
+ <rdar://problem/35604378>
+
+ Reviewed by Devin Rousso.
+
+ * UserInterface/Controllers/CallFrameTreeController.js: Added.
+ Display a list of call frames in a tree outline. Browse to the represented
+ call frame's source code location when a tree element is clicked or selected.
+
+ (WI.CallFrameTreeController):
+ (WI.CallFrameTreeController.prototype.get treeOutline):
+ (WI.CallFrameTreeController.prototype.get callFrames):
+ (WI.CallFrameTreeController.prototype.set callFrames):
+ (WI.CallFrameTreeController.prototype.disconnect):
+ (WI.CallFrameTreeController.prototype._treeElementClicked):
+ (WI.CallFrameTreeController.prototype._treeSelectionDidChange):
+ (WI.CallFrameTreeController.prototype._showSourceCodeLocation):
+
+ * UserInterface/Main.html:
+
+ * UserInterface/Views/CanvasDetailsSidebarPanel.css:
+ (.sidebar > .panel.details.canvas .details-section.canvas-backtrace .call-frame): Deleted.
+ * UserInterface/Views/CanvasDetailsSidebarPanel.js:
+ (WI.CanvasDetailsSidebarPanel.prototype.initialLayout):
+ (WI.CanvasDetailsSidebarPanel.prototype._refreshBacktraceSection):
+
+ * UserInterface/Views/RecordingTraceDetailsSidebarPanel.css:
+ (.sidebar > .panel.details.recording-trace > .content > .call-frame): Deleted.
+ * UserInterface/Views/RecordingTraceDetailsSidebarPanel.js:
+ (WI.RecordingTraceDetailsSidebarPanel):
+ (WI.RecordingTraceDetailsSidebarPanel.prototype.updateAction):
+
+ * UserInterface/Views/TreeElement.js:
+ (WI.TreeElement.treeElementToggled):
+ (WI.TreeElement.prototype.selectOnMouseDown):
+ Prevent selection if parent tree outline is not selectable.
+
+ * UserInterface/Views/TreeOutline.css:
+ (.tree-outline.non-selectable .item:hover):
+
+ * UserInterface/Views/TreeOutline.js:
+ Add `selectable` behavior, set at construction time. When false,
+ clicking a tree element dispatches an event instead of selecting
+ the tree element. Default true.
+
+ (WI.TreeOutline):
+ (WI.TreeOutline.prototype.get selectable):
+ Dispatch click event when not selectable, and some drive-by cleanup.
+
2017-11-28 Joseph Pecoraro <[email protected]>
Web Inspector: Move console Preserve Log setting from Setting tab to Console navigation bar
Added: trunk/Source/WebInspectorUI/UserInterface/Controllers/CallFrameTreeController.js (0 => 225259)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/CallFrameTreeController.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/CallFrameTreeController.js 2017-11-29 06:16:54 UTC (rev 225259)
@@ -0,0 +1,93 @@
+/*
+ * Copyright (C) 2017 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.
+ */
+
+WI.CallFrameTreeController = class CallFrameTreeController extends WI.Object
+{
+ constructor(treeOutline)
+ {
+ console.assert(treeOutline instanceof WI.TreeOutline);
+
+ super();
+
+ this._treeOutline = treeOutline;
+
+ if (this._treeOutline.selectable)
+ this._treeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+ else
+ this._treeOutline.addEventListener(WI.TreeOutline.Event.ElementClicked, this._treeElementClicked, this);
+ }
+
+ // Public
+
+ get treeOutline() { return this._treeOutline; }
+
+ get callFrames()
+ {
+ return this._callFrames;
+ }
+
+ set callFrames(callFrames)
+ {
+ callFrames = callFrames || [];
+ if (this._callFrames === callFrames)
+ return;
+
+ this._callFrames = callFrames;
+
+ this._treeOutline.removeChildren();
+
+ for (let callFrame of this._callFrames)
+ this._treeOutline.appendChild(new WI.CallFrameTreeElement(callFrame))
+ }
+
+ disconnect()
+ {
+ this._treeOutline.removeEventListener(null, null, this);
+ }
+
+ // Private
+
+ _treeElementClicked(event)
+ {
+ this._showSourceCodeLocation(event.data.treeElement);
+ }
+
+ _treeSelectionDidChange(event)
+ {
+ this._showSourceCodeLocation(event.data.selectedElement);
+ }
+
+ _showSourceCodeLocation(treeElement)
+ {
+ let callFrame = treeElement.callFrame;
+ if (!callFrame.sourceCodeLocation)
+ return;
+
+ WI.showSourceCodeLocation(callFrame.sourceCodeLocation, {
+ ignoreNetworkTab: true,
+ ignoreSearchTab: true,
+ });
+ }
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (225258 => 225259)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2017-11-29 06:10:50 UTC (rev 225258)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2017-11-29 06:16:54 UTC (rev 225259)
@@ -802,6 +802,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css (225258 => 225259)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css 2017-11-29 06:10:50 UTC (rev 225258)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css 2017-11-29 06:16:54 UTC (rev 225259)
@@ -32,11 +32,6 @@
-webkit-padding-start: 22.5px;
}
-.sidebar > .panel.details.canvas .details-section.canvas-backtrace .call-frame {
- margin: 3px;
- font-size: 11px;
-}
-
.sidebar > .panel.details.canvas > .content > .empty-content-placeholder {
position: absolute;
top: 0;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js (225258 => 225259)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js 2017-11-29 06:10:50 UTC (rev 225258)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js 2017-11-29 06:16:54 UTC (rev 225259)
@@ -135,7 +135,15 @@
this._cssCanvasSection.element.hidden = true;
this._sections.push(this._cssCanvasSection);
+ const selectable = false;
+ let backtraceTreeOutline = new WI.TreeOutline(null, selectable);
+ this._backtraceTreeController = new WI.CallFrameTreeController(backtraceTreeOutline);
+
+ let backtraceRow = new WI.DetailsSectionRow;
+ backtraceRow.element.appendChild(backtraceTreeOutline.element);
this._backtraceSection = new WI.DetailsSection("canvas-backtrace", WI.UIString("Backtrace"));
+ this._backtraceSection.groups = [new WI.DetailsSectionGroup([backtraceRow])];
+
this._backtraceSection.element.hidden = true;
this._sections.push(this._backtraceSection);
@@ -318,14 +326,9 @@
_refreshBacktraceSection()
{
- this._backtraceSection.element.hidden = !this._canvas.backtrace.length;
-
- const showFunctionName = true;
- this._backtraceSection.groups = this._canvas.backtrace.map((callFrame) => {
- return {
- element: new WI.CallFrameView(callFrame, showFunctionName),
- };
- });
+ let callFrames = this._canvas.backtrace;
+ this._backtraceTreeController.callFrames = callFrames;
+ this._backtraceSection.element.hidden = !callFrames.length;
}
_formatMemoryRow()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css (225258 => 225259)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css 2017-11-29 06:10:50 UTC (rev 225258)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css 2017-11-29 06:16:54 UTC (rev 225259)
@@ -23,11 +23,6 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-.sidebar > .panel.details.recording-trace > .content > .call-frame {
- height: 20px;
- padding: 2px 5px;
-}
-
.sidebar > .details.recording-trace > .content > .no-trace-data {
display: flex;
justify-content: center;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.js (225258 => 225259)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.js 2017-11-29 06:10:50 UTC (rev 225258)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.js 2017-11-29 06:16:54 UTC (rev 225259)
@@ -29,6 +29,10 @@
{
super("recording-trace", WI.UIString("Trace"));
+ const selectable = false;
+ this._backtraceTreeOutline = new WI.TreeOutline(null, selectable);
+ this._backtraceTreeController = new WI.CallFrameTreeController(this._backtraceTreeOutline);
+
this._recording = null;
this._action = null;
}
@@ -66,6 +70,8 @@
this.contentView.element.removeChildren();
let trace = this._action.trace;
+ this._backtraceTreeController.callFrames = trace;
+
if (!trace.length) {
let noTraceDataElement = this.contentView.element.appendChild(document.createElement("div"));
noTraceDataElement.classList.add("no-trace-data");
@@ -76,8 +82,6 @@
return;
}
- const showFunctionName = true;
- for (let callFrame of trace)
- this.contentView.element.appendChild(new WI.CallFrameView(callFrame, showFunctionName));
+ this.contentView.element.appendChild(this._backtraceTreeOutline.element);
}
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js (225258 => 225259)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js 2017-11-29 06:10:50 UTC (rev 225258)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js 2017-11-29 06:16:54 UTC (rev 225259)
@@ -289,25 +289,31 @@
static treeElementToggled(event)
{
- var element = event.currentTarget;
+ let element = event.currentTarget;
if (!element || !element.treeElement)
return;
- var toggleOnClick = element.treeElement.toggleOnClick && !element.treeElement.selectable;
- var isInTriangle = element.treeElement.isEventWithinDisclosureTriangle(event);
+ let treeElement = element.treeElement;
+ if (!treeElement.treeOutline.selectable) {
+ treeElement.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementClicked, {treeElement});
+ return;
+ }
+
+ let toggleOnClick = treeElement.toggleOnClick && !treeElement.selectable;
+ let isInTriangle = treeElement.isEventWithinDisclosureTriangle(event);
if (!toggleOnClick && !isInTriangle)
return;
- if (element.treeElement.expanded) {
+ if (treeElement.expanded) {
if (event.altKey)
- element.treeElement.collapseRecursively();
+ treeElement.collapseRecursively();
else
- element.treeElement.collapse();
+ treeElement.collapse();
} else {
if (event.altKey)
- element.treeElement.expandRecursively();
+ treeElement.expandRecursively();
else
- element.treeElement.expand();
+ treeElement.expand();
}
event.stopPropagation();
}
@@ -490,6 +496,9 @@
selectOnMouseDown(event)
{
+ if (!this.treeOutline.selectable)
+ return;
+
this.select(false, true);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css (225258 => 225259)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2017-11-29 06:10:50 UTC (rev 225258)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2017-11-29 06:16:54 UTC (rev 225259)
@@ -65,6 +65,10 @@
--tree-outline-icon-margin-end: 6px;
}
+.tree-outline.non-selectable .item:hover {
+ background-color: var(--selected-background-color-unfocused);
+}
+
body[dir=ltr] .tree-outline .item :matches(.disclosure-button, .icon) {
float: left;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js (225258 => 225259)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js 2017-11-29 06:10:50 UTC (rev 225258)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js 2017-11-29 06:16:54 UTC (rev 225259)
@@ -28,7 +28,7 @@
WI.TreeOutline = class TreeOutline extends WI.Object
{
- constructor(element)
+ constructor(element, selectable = true)
{
super();
@@ -53,6 +53,7 @@
this._large = false;
this._disclosureButtons = true;
this._customIndent = false;
+ this._selectable = selectable;
this._virtualizedScrollContainer = null;
this._virtualizedTreeItemHeight = NaN;
@@ -63,6 +64,9 @@
this._childrenListNode.addEventListener("keydown", this._treeKeyDown.bind(this), true);
WI.TreeOutline._generateStyleRulesIfNeeded();
+
+ if (!this._selectable)
+ this.element.classList.add("non-selectable");
}
// Public
@@ -143,6 +147,8 @@
this.element.classList.toggle(WI.TreeOutline.CustomIndentStyleClassName, this._customIndent);
}
+ get selectable() { return this._selectable; }
+
appendChild(child)
{
console.assert(child);
@@ -812,6 +818,7 @@
ElementAdded: Symbol("element-added"),
ElementDidChange: Symbol("element-did-change"),
ElementRemoved: Symbol("element-removed"),
+ ElementClicked: Symbol("element-clicked"),
ElementDisclosureDidChanged: Symbol("element-disclosure-did-change"),
ElementVisibilityDidChange: Symbol("element-visbility-did-change"),
SelectionDidChange: Symbol("selection-did-change")
