Changeset 225259 in webkit
- Timestamp:
- Nov 28, 2017 10:16:54 PM (6 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 1 added
- 9 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r225257 r225259 1 2017-11-28 Matt Baker <mattbaker@apple.com> 2 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 Devin Rousso. 8 9 * UserInterface/Controllers/CallFrameTreeController.js: Added. 10 Display a list of call frames in a tree outline. Browse to the represented 11 call frame's source code location when a tree element is clicked or selected. 12 13 (WI.CallFrameTreeController): 14 (WI.CallFrameTreeController.prototype.get treeOutline): 15 (WI.CallFrameTreeController.prototype.get callFrames): 16 (WI.CallFrameTreeController.prototype.set callFrames): 17 (WI.CallFrameTreeController.prototype.disconnect): 18 (WI.CallFrameTreeController.prototype._treeElementClicked): 19 (WI.CallFrameTreeController.prototype._treeSelectionDidChange): 20 (WI.CallFrameTreeController.prototype._showSourceCodeLocation): 21 22 * UserInterface/Main.html: 23 24 * UserInterface/Views/CanvasDetailsSidebarPanel.css: 25 (.sidebar > .panel.details.canvas .details-section.canvas-backtrace .call-frame): Deleted. 26 * UserInterface/Views/CanvasDetailsSidebarPanel.js: 27 (WI.CanvasDetailsSidebarPanel.prototype.initialLayout): 28 (WI.CanvasDetailsSidebarPanel.prototype._refreshBacktraceSection): 29 30 * UserInterface/Views/RecordingTraceDetailsSidebarPanel.css: 31 (.sidebar > .panel.details.recording-trace > .content > .call-frame): Deleted. 32 * UserInterface/Views/RecordingTraceDetailsSidebarPanel.js: 33 (WI.RecordingTraceDetailsSidebarPanel): 34 (WI.RecordingTraceDetailsSidebarPanel.prototype.updateAction): 35 36 * UserInterface/Views/TreeElement.js: 37 (WI.TreeElement.treeElementToggled): 38 (WI.TreeElement.prototype.selectOnMouseDown): 39 Prevent selection if parent tree outline is not selectable. 40 41 * UserInterface/Views/TreeOutline.css: 42 (.tree-outline.non-selectable .item:hover): 43 44 * UserInterface/Views/TreeOutline.js: 45 Add `selectable` behavior, set at construction time. When false, 46 clicking a tree element dispatches an event instead of selecting 47 the tree element. Default true. 48 49 (WI.TreeOutline): 50 (WI.TreeOutline.prototype.get selectable): 51 Dispatch click event when not selectable, and some drive-by cleanup. 52 1 53 2017-11-28 Joseph Pecoraro <pecoraro@apple.com> 2 54 -
trunk/Source/WebInspectorUI/UserInterface/Main.html
r224978 r225259 803 803 <script src="Controllers/BreakpointPopoverController.js"></script> 804 804 <script src="Controllers/CSSStyleManager.js"></script> 805 <script src="Controllers/CallFrameTreeController.js"></script> 805 806 <script src="Controllers/CanvasManager.js"></script> 806 807 <script src="Controllers/CodeMirrorColorEditingController.js"></script> -
trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css
r224370 r225259 33 33 } 34 34 35 .sidebar > .panel.details.canvas .details-section.canvas-backtrace .call-frame {36 margin: 3px;37 font-size: 11px;38 }39 40 35 .sidebar > .panel.details.canvas > .content > .empty-content-placeholder { 41 36 position: absolute; -
trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js
r224370 r225259 136 136 this._sections.push(this._cssCanvasSection); 137 137 138 const selectable = false; 139 let backtraceTreeOutline = new WI.TreeOutline(null, selectable); 140 this._backtraceTreeController = new WI.CallFrameTreeController(backtraceTreeOutline); 141 142 let backtraceRow = new WI.DetailsSectionRow; 143 backtraceRow.element.appendChild(backtraceTreeOutline.element); 138 144 this._backtraceSection = new WI.DetailsSection("canvas-backtrace", WI.UIString("Backtrace")); 145 this._backtraceSection.groups = [new WI.DetailsSectionGroup([backtraceRow])]; 146 139 147 this._backtraceSection.element.hidden = true; 140 148 this._sections.push(this._backtraceSection); … … 319 327 _refreshBacktraceSection() 320 328 { 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 }); 329 let callFrames = this._canvas.backtrace; 330 this._backtraceTreeController.callFrames = callFrames; 331 this._backtraceSection.element.hidden = !callFrames.length; 329 332 } 330 333 -
trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css
r220710 r225259 24 24 */ 25 25 26 .sidebar > .panel.details.recording-trace > .content > .call-frame {27 height: 20px;28 padding: 2px 5px;29 }30 31 26 .sidebar > .details.recording-trace > .content > .no-trace-data { 32 27 display: flex; -
trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.js
r223991 r225259 29 29 { 30 30 super("recording-trace", WI.UIString("Trace")); 31 32 const selectable = false; 33 this._backtraceTreeOutline = new WI.TreeOutline(null, selectable); 34 this._backtraceTreeController = new WI.CallFrameTreeController(this._backtraceTreeOutline); 31 35 32 36 this._recording = null; … … 67 71 68 72 let trace = this._action.trace; 73 this._backtraceTreeController.callFrames = trace; 74 69 75 if (!trace.length) { 70 76 let noTraceDataElement = this.contentView.element.appendChild(document.createElement("div")); … … 77 83 } 78 84 79 const showFunctionName = true; 80 for (let callFrame of trace) 81 this.contentView.element.appendChild(new WI.CallFrameView(callFrame, showFunctionName)); 85 this.contentView.element.appendChild(this._backtraceTreeOutline.element); 82 86 } 83 87 }; -
trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js
r223308 r225259 290 290 static treeElementToggled(event) 291 291 { 292 varelement = event.currentTarget;292 let element = event.currentTarget; 293 293 if (!element || !element.treeElement) 294 294 return; 295 295 296 var toggleOnClick = element.treeElement.toggleOnClick && !element.treeElement.selectable; 297 var isInTriangle = element.treeElement.isEventWithinDisclosureTriangle(event); 296 let treeElement = element.treeElement; 297 if (!treeElement.treeOutline.selectable) { 298 treeElement.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementClicked, {treeElement}); 299 return; 300 } 301 302 let toggleOnClick = treeElement.toggleOnClick && !treeElement.selectable; 303 let isInTriangle = treeElement.isEventWithinDisclosureTriangle(event); 298 304 if (!toggleOnClick && !isInTriangle) 299 305 return; 300 306 301 if ( element.treeElement.expanded) {307 if (treeElement.expanded) { 302 308 if (event.altKey) 303 element.treeElement.collapseRecursively();309 treeElement.collapseRecursively(); 304 310 else 305 element.treeElement.collapse();311 treeElement.collapse(); 306 312 } else { 307 313 if (event.altKey) 308 element.treeElement.expandRecursively();314 treeElement.expandRecursively(); 309 315 else 310 element.treeElement.expand();316 treeElement.expand(); 311 317 } 312 318 event.stopPropagation(); … … 491 497 selectOnMouseDown(event) 492 498 { 499 if (!this.treeOutline.selectable) 500 return; 501 493 502 this.select(false, true); 494 503 } -
trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
r212910 r225259 66 66 } 67 67 68 .tree-outline.non-selectable .item:hover { 69 background-color: var(--selected-background-color-unfocused); 70 } 71 68 72 body[dir=ltr] .tree-outline .item :matches(.disclosure-button, .icon) { 69 73 float: left; -
trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
r223308 r225259 29 29 WI.TreeOutline = class TreeOutline extends WI.Object 30 30 { 31 constructor(element )31 constructor(element, selectable = true) 32 32 { 33 33 super(); … … 54 54 this._disclosureButtons = true; 55 55 this._customIndent = false; 56 this._selectable = selectable; 56 57 57 58 this._virtualizedScrollContainer = null; … … 64 65 65 66 WI.TreeOutline._generateStyleRulesIfNeeded(); 67 68 if (!this._selectable) 69 this.element.classList.add("non-selectable"); 66 70 } 67 71 … … 143 147 this.element.classList.toggle(WI.TreeOutline.CustomIndentStyleClassName, this._customIndent); 144 148 } 149 150 get selectable() { return this._selectable; } 145 151 146 152 appendChild(child) … … 813 819 ElementDidChange: Symbol("element-did-change"), 814 820 ElementRemoved: Symbol("element-removed"), 821 ElementClicked: Symbol("element-clicked"), 815 822 ElementDisclosureDidChanged: Symbol("element-disclosure-did-change"), 816 823 ElementVisibilityDidChange: Symbol("element-visbility-did-change"),
Note: See TracChangeset
for help on using the changeset viewer.