Source/WebInspectorUI/ChangeLog

112017-11-17 Matt Baker <mattbaker@apple.com>
22
 3 Web Inspector: Clean up backtrace in Canvas details sidebar
 4 https://bugs.webkit.org/show_bug.cgi?id=179807
 5 <rdar://problem/35604378>
 6
 7 Reviewed by NOBODY (OOPS!).
 8
 9 Add a new class, CallFrameTreeController, for managing trees of call frame
 10 elements that can be clicked to navigate to a source location. Use the tree
 11 controller in the Canvas and Recording details sidebar panels.
 12
 13 * UserInterface/Controllers/CallFrameTreeController.js: Added.
 14 (WI.CallFrameTreeController):
 15 (WI.CallFrameTreeController.prototype.get treeOutline):
 16 (WI.CallFrameTreeController.prototype.get callFrames):
 17 (WI.CallFrameTreeController.prototype.set callFrames):
 18 (WI.CallFrameTreeController.prototype.disconnect):
 19 (WI.CallFrameTreeController.prototype._treeElementClicked):
 20 (WI.CallFrameTreeController.prototype._treeSelectionDidChange):
 21 (WI.CallFrameTreeController.prototype._showSourceCodeLocation):
 22
 23 * UserInterface/Main.html:
 24 * UserInterface/Views/CanvasDetailsSidebarPanel.css:
 25 (.sidebar > .panel.details.canvas .details-section.canvas-backtrace .call-frame): Deleted.
 26
 27 * UserInterface/Views/CanvasDetailsSidebarPanel.js:
 28 (WI.CanvasDetailsSidebarPanel.prototype.initialLayout):
 29 (WI.CanvasDetailsSidebarPanel.prototype._refreshBacktraceSection):
 30
 31 * UserInterface/Views/RecordingTraceDetailsSidebarPanel.css:
 32 (.sidebar > .panel.details.recording-trace > .content > .call-frame): Deleted.
 33
 34 * UserInterface/Views/RecordingTraceDetailsSidebarPanel.js:
 35 (WI.RecordingTraceDetailsSidebarPanel):
 36 (WI.RecordingTraceDetailsSidebarPanel.prototype.updateAction):
 37
 38 * UserInterface/Views/TreeElement.js:
 39 (WI.TreeElement.treeElementMouseDown):
 40
 41 * UserInterface/Views/TreeOutline.css:
 42 (.tree-outline.non-selectable .item:hover):
 43
 44 * UserInterface/Views/TreeOutline.js:
 45 (WI.TreeOutline):
 46 (WI.TreeOutline.prototype.get selectable):
 47 (WI.TreeOutline.prototype.set selectable):
 48 When false, disables tree element selection, and instead dispatches
 49 click events when a tree element is clicked.
 50
 512017-11-17 Matt Baker <mattbaker@apple.com>
 52
353 Web Inspector: Remove WI.instanceForClass
454 https://bugs.webkit.org/show_bug.cgi?id=179746
555

Source/WebInspectorUI/UserInterface/Controllers/CallFrameTreeController.js

 1/*
 2 * Copyright (C) 2017 Apple Inc. All rights reserved.
 3 *
 4 * Redistribution and use in source and binary forms, with or without
 5 * modification, are permitted provided that the following conditions
 6 * are met:
 7 * 1. Redistributions of source code must retain the above copyright
 8 * notice, this list of conditions and the following disclaimer.
 9 * 2. Redistributions in binary form must reproduce the above copyright
 10 * notice, this list of conditions and the following disclaimer in the
 11 * documentation and/or other materials provided with the distribution.
 12 *
 13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
 14 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 15 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
 17 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 18 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 19 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 20 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 21 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 22 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
 23 * THE POSSIBILITY OF SUCH DAMAGE.
 24 */
 25
 26WI.CallFrameTreeController = class CallFrameTreeController extends WI.Object
 27{
 28 constructor()
 29 {
 30 super();
 31
 32 this._treeOutline = new WI.TreeOutline;
 33
 34 this._treeOutline.addEventListener(WI.TreeOutline.Event.ElementClicked, this._treeElementClicked, this);
 35 this._treeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
 36 }
 37
 38 // Public
 39
 40 get treeOutline() { return this._treeOutline; }
 41
 42 get callFrames()
 43 {
 44 return this._callFrames;
 45 }
 46
 47 set callFrames(callFrames)
 48 {
 49 callFrames = callFrames || [];
 50 if (this._callFrames === callFrames)
 51 return;
 52
 53 this._callFrames = callFrames;
 54
 55 this._treeOutline.removeChildren();
 56
 57 for (let callFrame of this._callFrames)
 58 this._treeOutline.appendChild(new WI.CallFrameTreeElement(callFrame))
 59 }
 60
 61 disconnect()
 62 {
 63 this._treeOutline.removeEventListener(null, null, this);
 64 }
 65
 66 // Private
 67
 68 _treeElementClicked(event)
 69 {
 70 this._showSourceCodeLocation(event.data.element);
 71 }
 72
 73 _treeSelectionDidChange(event)
 74 {
 75 this._showSourceCodeLocation(event.data.selectedElement);
 76 }
 77
 78 _showSourceCodeLocation(treeElement)
 79 {
 80 let callFrame = treeElement.callFrame;
 81 if (!callFrame.sourceCodeLocation)
 82 return;
 83
 84 WI.showSourceCodeLocation(callFrame.sourceCodeLocation, {
 85 ignoreNetworkTab: true,
 86 ignoreSearchTab: true,
 87 });
 88 }
 89};

Source/WebInspectorUI/UserInterface/Main.html

802802 <script src="Controllers/BreakpointLogMessageLexer.js"></script>
803803 <script src="Controllers/BreakpointPopoverController.js"></script>
804804 <script src="Controllers/CSSStyleManager.js"></script>
 805 <script src="Controllers/CallFrameTreeController.js"></script>
805806 <script src="Controllers/CanvasManager.js"></script>
806807 <script src="Controllers/CodeMirrorColorEditingController.js"></script>
807808 <script src="Controllers/CodeMirrorCompletionController.js"></script>

Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css

3232 -webkit-padding-start: 22.5px;
3333}
3434
35 .sidebar > .panel.details.canvas .details-section.canvas-backtrace .call-frame {
36  margin: 3px;
37  font-size: 11px;
38 }
39 
4035.sidebar > .panel.details.canvas > .content > .empty-content-placeholder {
4136 position: absolute;
4237 top: 0;

Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js

@@WI.CanvasDetailsSidebarPanel = class CanvasDetailsSidebarPanel extends WI.Detail
135135 this._cssCanvasSection.element.hidden = true;
136136 this._sections.push(this._cssCanvasSection);
137137
 138 this._backtraceTreeController = new WI.CallFrameTreeController;
 139 this._backtraceTreeController.treeOutline.selectable = false;
 140
 141 this._backtraceRow = new WI.DetailsSectionRow;
 142 this._backtraceRow.element.appendChild(this._backtraceTreeController.treeOutline.element);
138143 this._backtraceSection = new WI.DetailsSection("canvas-backtrace", WI.UIString("Backtrace"));
 144 this._backtraceSection.groups = [new WI.DetailsSectionGroup([this._backtraceRow])];
 145
139146 this._backtraceSection.element.hidden = true;
140147 this._sections.push(this._backtraceSection);
141148

@@WI.CanvasDetailsSidebarPanel = class CanvasDetailsSidebarPanel extends WI.Detail
318325
319326 _refreshBacktraceSection()
320327 {
321  this._backtraceSection.element.hidden = !this._canvas.backtrace.length;
322 
323  const showFunctionName = true;
324  this._backtraceSection.groups = this._canvas.backtrace.map((callFrame) => {
325  return {
326  element: new WI.CallFrameView(callFrame, showFunctionName),
327  };
328  });
 328 let callFrames = this._canvas.backtrace;
 329 this._backtraceTreeController.callFrames = callFrames;
 330 this._backtraceSection.element.hidden = !callFrames.length;
329331 }
330332
331333 _formatMemoryRow()

Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css

2323 * THE POSSIBILITY OF SUCH DAMAGE.
2424 */
2525
26 .sidebar > .panel.details.recording-trace > .content > .call-frame {
27  height: 20px;
28  padding: 2px 5px;
29 }
30 
3126.sidebar > .details.recording-trace > .content > .no-trace-data {
3227 display: flex;
3328 justify-content: center;

Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.js

@@WI.RecordingTraceDetailsSidebarPanel = class RecordingTraceDetailsSidebarPanel e
2929 {
3030 super("recording-trace", WI.UIString("Trace"));
3131
 32 this._backtraceTreeController = new WI.CallFrameTreeController;
 33 this._backtraceTreeController.treeOutline.selectable = false;
 34
3235 this._recording = null;
3336 this._action = null;
3437 }

@@WI.RecordingTraceDetailsSidebarPanel = class RecordingTraceDetailsSidebarPanel e
6669 this.contentView.element.removeChildren();
6770
6871 let trace = this._action.trace;
 72 this._backtraceTreeController.callFrames = trace;
 73
6974 if (!trace.length) {
7075 let noTraceDataElement = this.contentView.element.appendChild(document.createElement("div"));
7176 noTraceDataElement.classList.add("no-trace-data");

@@WI.RecordingTraceDetailsSidebarPanel = class RecordingTraceDetailsSidebarPanel e
7681 return;
7782 }
7883
79  const showFunctionName = true;
80  for (let callFrame of trace)
81  this.contentView.element.appendChild(new WI.CallFrameView(callFrame, showFunctionName));
 84 this.contentView.element.appendChild(this._backtraceTreeController.treeOutline.element);
8285 }
8386};

Source/WebInspectorUI/UserInterface/Views/TreeElement.js

@@WI.TreeElement = class TreeElement extends WI.Object
279279 if (!element || !element.treeElement || !element.treeElement.selectable)
280280 return;
281281
 282 if (!element.treeElement.treeOutline.selectable) {
 283 element.treeElement.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementClicked, {element: element.treeElement});
 284 return;
 285 }
 286
282287 if (element.treeElement.isEventWithinDisclosureTriangle(event)) {
283288 event.preventDefault();
284289 return;

Source/WebInspectorUI/UserInterface/Views/TreeOutline.css

6565 --tree-outline-icon-margin-end: 6px;
6666}
6767
 68.tree-outline.non-selectable .item:hover {
 69 background-color: var(--selected-background-color-unfocused);
 70}
 71
6872body[dir=ltr] .tree-outline .item :matches(.disclosure-button, .icon) {
6973 float: left;
7074}

Source/WebInspectorUI/UserInterface/Views/TreeOutline.js

@@WI.TreeOutline = class TreeOutline extends WI.Object
5353 this._large = false;
5454 this._disclosureButtons = true;
5555 this._customIndent = false;
 56 this._selectable = true;
5657
5758 this._virtualizedScrollContainer = null;
5859 this._virtualizedTreeItemHeight = NaN;

@@WI.TreeOutline = class TreeOutline extends WI.Object
143144 this.element.classList.toggle(WI.TreeOutline.CustomIndentStyleClassName, this._customIndent);
144145 }
145146
 147 get selectable()
 148 {
 149 return this._selectable;
 150 }
 151
 152 set selectable(flag)
 153 {
 154 this._selectable = !!flag;
 155 this.element.classList.toggle("non-selectable", !this._selectable);
 156 }
 157
146158 appendChild(child)
147159 {
148160 console.assert(child);

@@WI.TreeOutline.Event = {
812824 ElementAdded: Symbol("element-added"),
813825 ElementDidChange: Symbol("element-did-change"),
814826 ElementRemoved: Symbol("element-removed"),
 827 ElementClicked: Symbol("element-clicked"),
815828 ElementDisclosureDidChanged: Symbol("element-disclosure-did-change"),
816829 ElementVisibilityDidChange: Symbol("element-visbility-did-change"),
817830 SelectionDidChange: Symbol("selection-did-change")