<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[225259] trunk/Source/WebInspectorUI</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/225259">225259</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2017-11-28 22:16:54 -0800 (Tue, 28 Nov 2017)</dd>
</dl>

<h3>Log Message</h3>
<pre>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.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCanvasDetailsSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCanvasDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRecordingTraceDetailsSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRecordingTraceDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinecss">trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinejs">trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersCallFrameTreeControllerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/CallFrameTreeController.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (225258 => 225259)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,55 @@
</span><ins>+2017-11-28  Matt Baker  <mattbaker@apple.com>
+
+        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.
+
</ins><span class="cx"> 2017-11-28  Joseph Pecoraro  <pecoraro@apple.com>
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: Move console Preserve Log setting from Setting tab to Console navigation bar
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersCallFrameTreeControllerjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Controllers/CallFrameTreeController.js (0 => 225259)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,93 @@
</span><ins>+/*
+ * 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,
+        });
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (225258 => 225259)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -802,6 +802,7 @@
</span><span class="cx">     <script src="Controllers/BreakpointLogMessageLexer.js"></script>
</span><span class="cx">     <script src="Controllers/BreakpointPopoverController.js"></script>
</span><span class="cx">     <script src="Controllers/CSSStyleManager.js"></script>
</span><ins>+    <script src="Controllers/CallFrameTreeController.js"></script>
</ins><span class="cx">     <script src="Controllers/CanvasManager.js"></script>
</span><span class="cx">     <script src="Controllers/CodeMirrorColorEditingController.js"></script>
</span><span class="cx">     <script src="Controllers/CodeMirrorCompletionController.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCanvasDetailsSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css (225258 => 225259)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -32,11 +32,6 @@
</span><span class="cx">     -webkit-padding-start: 22.5px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.sidebar > .panel.details.canvas .details-section.canvas-backtrace .call-frame {
-    margin: 3px;
-    font-size: 11px;
-}
-
</del><span class="cx"> .sidebar > .panel.details.canvas > .content > .empty-content-placeholder {
</span><span class="cx">     position: absolute;
</span><span class="cx">     top: 0;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCanvasDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js (225258 => 225259)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -135,7 +135,15 @@
</span><span class="cx">         this._cssCanvasSection.element.hidden = true;
</span><span class="cx">         this._sections.push(this._cssCanvasSection);
</span><span class="cx"> 
</span><ins>+        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);
</ins><span class="cx">         this._backtraceSection = new WI.DetailsSection("canvas-backtrace", WI.UIString("Backtrace"));
</span><ins>+        this._backtraceSection.groups = [new WI.DetailsSectionGroup([backtraceRow])];
+
</ins><span class="cx">         this._backtraceSection.element.hidden = true;
</span><span class="cx">         this._sections.push(this._backtraceSection);
</span><span class="cx"> 
</span><span class="lines">@@ -318,14 +326,9 @@
</span><span class="cx"> 
</span><span class="cx">     _refreshBacktraceSection()
</span><span class="cx">     {
</span><del>-        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),
-            };
-        });
</del><ins>+        let callFrames = this._canvas.backtrace;
+        this._backtraceTreeController.callFrames = callFrames;
+        this._backtraceSection.element.hidden = !callFrames.length;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _formatMemoryRow()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRecordingTraceDetailsSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css (225258 => 225259)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -23,11 +23,6 @@
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-.sidebar > .panel.details.recording-trace > .content > .call-frame {
-    height: 20px;
-    padding: 2px 5px;
-}
-
</del><span class="cx"> .sidebar > .details.recording-trace > .content > .no-trace-data {
</span><span class="cx">     display: flex;
</span><span class="cx">     justify-content: center;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRecordingTraceDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.js (225258 => 225259)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -29,6 +29,10 @@
</span><span class="cx">     {
</span><span class="cx">         super("recording-trace", WI.UIString("Trace"));
</span><span class="cx"> 
</span><ins>+        const selectable = false;
+        this._backtraceTreeOutline = new WI.TreeOutline(null, selectable);
+        this._backtraceTreeController = new WI.CallFrameTreeController(this._backtraceTreeOutline);
+
</ins><span class="cx">         this._recording = null;
</span><span class="cx">         this._action = null;
</span><span class="cx">     }
</span><span class="lines">@@ -66,6 +70,8 @@
</span><span class="cx">         this.contentView.element.removeChildren();
</span><span class="cx"> 
</span><span class="cx">         let trace = this._action.trace;
</span><ins>+        this._backtraceTreeController.callFrames = trace;
+
</ins><span class="cx">         if (!trace.length) {
</span><span class="cx">             let noTraceDataElement = this.contentView.element.appendChild(document.createElement("div"));
</span><span class="cx">             noTraceDataElement.classList.add("no-trace-data");
</span><span class="lines">@@ -76,8 +82,6 @@
</span><span class="cx">             return;
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        const showFunctionName = true;
-        for (let callFrame of trace)
-            this.contentView.element.appendChild(new WI.CallFrameView(callFrame, showFunctionName));
</del><ins>+        this.contentView.element.appendChild(this._backtraceTreeOutline.element);
</ins><span class="cx">     }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js (225258 => 225259)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -289,25 +289,31 @@
</span><span class="cx"> 
</span><span class="cx">     static treeElementToggled(event)
</span><span class="cx">     {
</span><del>-        var element = event.currentTarget;
</del><ins>+        let element = event.currentTarget;
</ins><span class="cx">         if (!element || !element.treeElement)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        var toggleOnClick = element.treeElement.toggleOnClick && !element.treeElement.selectable;
-        var isInTriangle = element.treeElement.isEventWithinDisclosureTriangle(event);
</del><ins>+        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);
</ins><span class="cx">         if (!toggleOnClick && !isInTriangle)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        if (element.treeElement.expanded) {
</del><ins>+        if (treeElement.expanded) {
</ins><span class="cx">             if (event.altKey)
</span><del>-                element.treeElement.collapseRecursively();
</del><ins>+                treeElement.collapseRecursively();
</ins><span class="cx">             else
</span><del>-                element.treeElement.collapse();
</del><ins>+                treeElement.collapse();
</ins><span class="cx">         } else {
</span><span class="cx">             if (event.altKey)
</span><del>-                element.treeElement.expandRecursively();
</del><ins>+                treeElement.expandRecursively();
</ins><span class="cx">             else
</span><del>-                element.treeElement.expand();
</del><ins>+                treeElement.expand();
</ins><span class="cx">         }
</span><span class="cx">         event.stopPropagation();
</span><span class="cx">     }
</span><span class="lines">@@ -490,6 +496,9 @@
</span><span class="cx"> 
</span><span class="cx">     selectOnMouseDown(event)
</span><span class="cx">     {
</span><ins>+        if (!this.treeOutline.selectable)
+            return;
+
</ins><span class="cx">         this.select(false, true);
</span><span class="cx">     }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css (225258 => 225259)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -65,6 +65,10 @@
</span><span class="cx">     --tree-outline-icon-margin-end: 6px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.tree-outline.non-selectable .item:hover {
+    background-color: var(--selected-background-color-unfocused);
+}
+
</ins><span class="cx"> body[dir=ltr] .tree-outline .item :matches(.disclosure-button, .icon) {
</span><span class="cx">     float: left;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js (225258 => 225259)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -28,7 +28,7 @@
</span><span class="cx"> 
</span><span class="cx"> WI.TreeOutline = class TreeOutline extends WI.Object
</span><span class="cx"> {
</span><del>-    constructor(element)
</del><ins>+    constructor(element, selectable = true)
</ins><span class="cx">     {
</span><span class="cx">         super();
</span><span class="cx"> 
</span><span class="lines">@@ -53,6 +53,7 @@
</span><span class="cx">         this._large = false;
</span><span class="cx">         this._disclosureButtons = true;
</span><span class="cx">         this._customIndent = false;
</span><ins>+        this._selectable = selectable;
</ins><span class="cx"> 
</span><span class="cx">         this._virtualizedScrollContainer = null;
</span><span class="cx">         this._virtualizedTreeItemHeight = NaN;
</span><span class="lines">@@ -63,6 +64,9 @@
</span><span class="cx">         this._childrenListNode.addEventListener("keydown", this._treeKeyDown.bind(this), true);
</span><span class="cx"> 
</span><span class="cx">         WI.TreeOutline._generateStyleRulesIfNeeded();
</span><ins>+
+        if (!this._selectable)
+            this.element.classList.add("non-selectable");
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="lines">@@ -143,6 +147,8 @@
</span><span class="cx">         this.element.classList.toggle(WI.TreeOutline.CustomIndentStyleClassName, this._customIndent);
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    get selectable() { return this._selectable; }
+
</ins><span class="cx">     appendChild(child)
</span><span class="cx">     {
</span><span class="cx">         console.assert(child);
</span><span class="lines">@@ -812,6 +818,7 @@
</span><span class="cx">     ElementAdded: Symbol("element-added"),
</span><span class="cx">     ElementDidChange: Symbol("element-did-change"),
</span><span class="cx">     ElementRemoved: Symbol("element-removed"),
</span><ins>+    ElementClicked: Symbol("element-clicked"),
</ins><span class="cx">     ElementDisclosureDidChanged: Symbol("element-disclosure-did-change"),
</span><span class="cx">     ElementVisibilityDidChange: Symbol("element-visbility-did-change"),
</span><span class="cx">     SelectionDidChange: Symbol("selection-did-change")
</span></span></pre>
</div>
</div>

</body>
</html>