Changeset 225259 in webkit


Ignore:
Timestamp:
Nov 28, 2017 10:16:54 PM (6 years ago)
Author:
Matt Baker
Message:

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.

Location:
trunk/Source/WebInspectorUI
Files:
1 added
9 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r225257 r225259  
     12017-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
    1532017-11-28  Joseph Pecoraro  <pecoraro@apple.com>
    254
  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r224978 r225259  
    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>
  • trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css

    r224370 r225259  
    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;
  • trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js

    r224370 r225259  
    136136        this._sections.push(this._cssCanvasSection);
    137137
     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);
    138144        this._backtraceSection = new WI.DetailsSection("canvas-backtrace", WI.UIString("Backtrace"));
     145        this._backtraceSection.groups = [new WI.DetailsSectionGroup([backtraceRow])];
     146
    139147        this._backtraceSection.element.hidden = true;
    140148        this._sections.push(this._backtraceSection);
     
    319327    _refreshBacktraceSection()
    320328    {
    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;
    329332    }
    330333
  • trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css

    r220710 r225259  
    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;
  • trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.js

    r223991 r225259  
    2929    {
    3030        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);
    3135
    3236        this._recording = null;
     
    6771
    6872        let trace = this._action.trace;
     73        this._backtraceTreeController.callFrames = trace;
     74
    6975        if (!trace.length) {
    7076            let noTraceDataElement = this.contentView.element.appendChild(document.createElement("div"));
     
    7783        }
    7884
    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);
    8286    }
    8387};
  • trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js

    r223308 r225259  
    290290    static treeElementToggled(event)
    291291    {
    292         var element = event.currentTarget;
     292        let element = event.currentTarget;
    293293        if (!element || !element.treeElement)
    294294            return;
    295295
    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);
    298304        if (!toggleOnClick && !isInTriangle)
    299305            return;
    300306
    301         if (element.treeElement.expanded) {
     307        if (treeElement.expanded) {
    302308            if (event.altKey)
    303                 element.treeElement.collapseRecursively();
     309                treeElement.collapseRecursively();
    304310            else
    305                 element.treeElement.collapse();
     311                treeElement.collapse();
    306312        } else {
    307313            if (event.altKey)
    308                 element.treeElement.expandRecursively();
     314                treeElement.expandRecursively();
    309315            else
    310                 element.treeElement.expand();
     316                treeElement.expand();
    311317        }
    312318        event.stopPropagation();
     
    491497    selectOnMouseDown(event)
    492498    {
     499        if (!this.treeOutline.selectable)
     500            return;
     501
    493502        this.select(false, true);
    494503    }
  • trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css

    r212910 r225259  
    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;
  • trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js

    r223308 r225259  
    2929WI.TreeOutline = class TreeOutline extends WI.Object
    3030{
    31     constructor(element)
     31    constructor(element, selectable = true)
    3232    {
    3333        super();
     
    5454        this._disclosureButtons = true;
    5555        this._customIndent = false;
     56        this._selectable = selectable;
    5657
    5758        this._virtualizedScrollContainer = null;
     
    6465
    6566        WI.TreeOutline._generateStyleRulesIfNeeded();
     67
     68        if (!this._selectable)
     69            this.element.classList.add("non-selectable");
    6670    }
    6771
     
    143147        this.element.classList.toggle(WI.TreeOutline.CustomIndentStyleClassName, this._customIndent);
    144148    }
     149
     150    get selectable() { return this._selectable; }
    145151
    146152    appendChild(child)
     
    813819    ElementDidChange: Symbol("element-did-change"),
    814820    ElementRemoved: Symbol("element-removed"),
     821    ElementClicked: Symbol("element-clicked"),
    815822    ElementDisclosureDidChanged: Symbol("element-disclosure-did-change"),
    816823    ElementVisibilityDidChange: Symbol("element-visbility-did-change"),
Note: See TracChangeset for help on using the changeset viewer.