Changeset 209213 in webkit


Ignore:
Timestamp:
Dec 1, 2016 2:32:33 PM (7 years ago)
Author:
Matt Baker
Message:

Web Inspector: Show async stack traces for workers
https://bugs.webkit.org/show_bug.cgi?id=165235
<rdar://problem/29450172>

Reviewed by Joseph Pecoraro.

  • UserInterface/Views/CallFrameTreeElement.css:

(.tree-outline > .children > .item.call-frame.async-boundary):
(.tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary):
(.tree-outline .item.call-frame.async-boundary::before):
(.tree-outline.single-thread .item.call-frame.async-boundary::before):
(.tree-outline .item.call-frame.async-boundary): Deleted.
Style changes for single/multiple-thread call stacks.
Padding changes to account for Thread tree element.
Make selectors more specific where needed.

  • UserInterface/Views/DebuggerSidebarPanel.css:

(.sidebar > .panel.navigation.debugger .tree-outline.single-thread > .item.thread):
(.sidebar > .panel.navigation.debugger .tree-outline.single-thread):
Style changes for single/multiple-thread call stacks.

  • UserInterface/Views/DebuggerSidebarPanel.js:

(WebInspector.DebuggerSidebarPanel):
Use a single tree outline for showing a single thread or multiple threads.
For single-threaded, hide Thread tree element and un-indent children.

(WebInspector.DebuggerSidebarPanel.prototype._targetAdded):
(WebInspector.DebuggerSidebarPanel.prototype._targetRemoved):
(WebInspector.DebuggerSidebarPanel.prototype._updateCallStackTreeOutline):
Update tree style and whether Thread tree element is selectable.
(WebInspector.DebuggerSidebarPanel.prototype._debuggerActiveCallFrameDidChange):
Remove support for second tree outline.

(WebInspector.DebuggerSidebarPanel.prototype._updateSingleThreadCallStacks): Deleted.
(WebInspector.DebuggerSidebarPanel.prototype._selectActiveCallFrameTreeElement): Deleted.
(WebInspector.DebuggerSidebarPanel.prototype._showSingleThreadCallStacks): Deleted.
(WebInspector.DebuggerSidebarPanel.prototype._showMultipleThreadCallStacks): Deleted.
No longer needed after unifying tree outlines.

  • UserInterface/Views/ThreadTreeElement.js:

(WebInspector.ThreadTreeElement.prototype.refresh):
Append call frames from the async stack trace.

Location:
trunk/Source/WebInspectorUI
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r209143 r209213  
     12016-12-01  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Show async stack traces for workers
     4        https://bugs.webkit.org/show_bug.cgi?id=165235
     5        <rdar://problem/29450172>
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        * UserInterface/Views/CallFrameTreeElement.css:
     10        (.tree-outline > .children > .item.call-frame.async-boundary):
     11        (.tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary):
     12        (.tree-outline .item.call-frame.async-boundary::before):
     13        (.tree-outline.single-thread .item.call-frame.async-boundary::before):
     14        (.tree-outline .item.call-frame.async-boundary): Deleted.
     15        Style changes for single/multiple-thread call stacks.
     16        Padding changes to account for Thread tree element.
     17        Make selectors more specific where needed.
     18
     19        * UserInterface/Views/DebuggerSidebarPanel.css:
     20        (.sidebar > .panel.navigation.debugger .tree-outline.single-thread > .item.thread):
     21        (.sidebar > .panel.navigation.debugger .tree-outline.single-thread):
     22        Style changes for single/multiple-thread call stacks.
     23
     24        * UserInterface/Views/DebuggerSidebarPanel.js:
     25        (WebInspector.DebuggerSidebarPanel):
     26        Use a single tree outline for showing a single thread or multiple threads.
     27        For single-threaded, hide Thread tree element and un-indent children.
     28
     29        (WebInspector.DebuggerSidebarPanel.prototype._targetAdded):
     30        (WebInspector.DebuggerSidebarPanel.prototype._targetRemoved):
     31        (WebInspector.DebuggerSidebarPanel.prototype._updateCallStackTreeOutline):
     32        Update tree style and whether Thread tree element is selectable.
     33        (WebInspector.DebuggerSidebarPanel.prototype._debuggerActiveCallFrameDidChange):
     34        Remove support for second tree outline.
     35
     36        (WebInspector.DebuggerSidebarPanel.prototype._updateSingleThreadCallStacks): Deleted.
     37        (WebInspector.DebuggerSidebarPanel.prototype._selectActiveCallFrameTreeElement): Deleted.
     38        (WebInspector.DebuggerSidebarPanel.prototype._showSingleThreadCallStacks): Deleted.
     39        (WebInspector.DebuggerSidebarPanel.prototype._showMultipleThreadCallStacks): Deleted.
     40        No longer needed after unifying tree outlines.
     41
     42        * UserInterface/Views/ThreadTreeElement.js:
     43        (WebInspector.ThreadTreeElement.prototype.refresh):
     44        Append call frames from the async stack trace.
     45
    1462016-11-30  Joseph Pecoraro  <pecoraro@apple.com>
    247
  • trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css

    r209062 r209213  
    4848    cursor: default;
    4949    color: var(--text-color-gray-medium);
    50     padding-left: 0;
     50}
     51
     52.tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary {
     53    padding-left: 5px;
    5154}
    5255
     
    7376
    7477.tree-outline .item.call-frame.async-boundary::before {
     78    width: 30px;
     79    margin-left: -5px;
     80    margin-right: 1px;
     81}
     82
     83.tree-outline.single-thread .item.call-frame.async-boundary::before {
    7584    width: 20px;
    76     margin-right: 2px;
    7785}
  • trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css

    r209089 r209213  
    5555}
    5656
     57.sidebar > .panel.navigation.debugger .tree-outline.single-thread > .item.thread {
     58    display: none;
     59}
     60
     61.sidebar > .panel.navigation.debugger .tree-outline.single-thread {
     62    margin-left: -10px;
     63}
     64
    5765.sidebar > .panel.navigation.debugger .warning-banner > a {
    5866    text-decoration: underline;
  • trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js

    r209062 r209213  
    178178        this._callStackTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
    179179
    180         this._singleThreadCallStackTreeOutline = this.createContentTreeOutline(dontHideByDefault, suppressFiltering);
    181         this._singleThreadCallStackTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
    182 
    183         let mainTargetTreeElement = new WebInspector.ThreadTreeElement(WebInspector.mainTarget);
    184         this._callStackTreeOutline.appendChild(mainTargetTreeElement);
    185 
    186         this._multipleThreadsCallStackRow = new WebInspector.DetailsSectionRow;
    187         this._multipleThreadsCallStackRow.element.appendChild(this._callStackTreeOutline.element);
    188 
    189         this._singleThreadCallStackRow = new WebInspector.DetailsSectionRow;
    190         this._singleThreadCallStackRow.element.appendChild(this._singleThreadCallStackTreeOutline.element);
    191 
    192         this._callStackGroup = new WebInspector.DetailsSectionGroup([this._singleThreadCallStackRow]);
     180        this._mainTargetTreeElement = new WebInspector.ThreadTreeElement(WebInspector.mainTarget);
     181        this._callStackTreeOutline.appendChild(this._mainTargetTreeElement);
     182
     183        this._updateCallStackTreeOutline();
     184
     185        this._callStackRow = new WebInspector.DetailsSectionRow;
     186        this._callStackRow.element.appendChild(this._callStackTreeOutline.element);
     187
     188        this._callStackGroup = new WebInspector.DetailsSectionGroup([this._callStackRow]);
    193189        this._callStackSection = new WebInspector.DetailsSection("call-stack", WebInspector.UIString("Call Stack"), [this._callStackGroup]);
    194190
     
    196192
    197193        this._activeCallFrameTreeElement = null;
    198         this._singleThreadActiveCallFrameTreeElement = null;
    199194
    200195        this._pauseReasonTreeOutline = null;
     
    602597    }
    603598
    604     _updateSingleThreadCallStacks()
    605     {
    606         let targetData = WebInspector.debuggerManager.dataForTarget(WebInspector.mainTarget);
    607         let callFrames = targetData.callFrames;
    608 
    609         this._singleThreadCallStackTreeOutline.removeChildren();
    610 
    611         if (!callFrames.length) {
    612             this._singleThreadCallStackTreeOutline.appendChild(new WebInspector.IdleTreeElement);
    613             return;
    614         }
    615 
    616         let activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
    617         let activeCallFrameTreeElement = null;
    618 
    619         for (let callFrame of callFrames) {
    620             let callFrameTreeElement = new WebInspector.CallFrameTreeElement(callFrame);
    621             if (callFrame === activeCallFrame)
    622                 activeCallFrameTreeElement = callFrameTreeElement;
    623             this._singleThreadCallStackTreeOutline.appendChild(callFrameTreeElement);
    624         }
    625 
    626         if (activeCallFrameTreeElement) {
    627             activeCallFrameTreeElement.isActiveCallFrame = true;
    628             if (this._showingSingleThreadCallStack)
    629                 activeCallFrameTreeElement.select(true, true);
    630         }
    631 
    632         if (!targetData.asyncStackTrace)
    633             return;
    634 
    635         let currentStackTrace = targetData.asyncStackTrace;
    636         while (currentStackTrace) {
    637             console.assert(currentStackTrace.callFrames.length, "StackTrace should have non-empty call frames array.");
    638             if (!currentStackTrace.callFrames.length)
    639                 break;
    640 
    641             let boundaryCallFrame;
    642             if (currentStackTrace.topCallFrameIsBoundary) {
    643                 boundaryCallFrame = currentStackTrace.callFrames[0];
    644                 console.assert(boundaryCallFrame.nativeCode && !boundaryCallFrame.sourceCodeLocation);
    645             } else {
    646                 // Create a generic native CallFrame for the asynchronous boundary.
    647                 const functionName = WebInspector.UIString("(async)");
    648                 const nativeCode = true;
    649                 boundaryCallFrame = new WebInspector.CallFrame(null, null, null, functionName, null, null, nativeCode);
    650             }
    651 
    652             const isAsyncBoundaryCallFrame = true;
    653             this._singleThreadCallStackTreeOutline.appendChild(new WebInspector.CallFrameTreeElement(boundaryCallFrame, isAsyncBoundaryCallFrame));
    654 
    655             let startIndex = currentStackTrace.topCallFrameIsBoundary ? 1 : 0;
    656             for (let i = startIndex; i < currentStackTrace.callFrames.length; ++i)
    657                 this._singleThreadCallStackTreeOutline.appendChild(new WebInspector.CallFrameTreeElement(currentStackTrace.callFrames[i]));
    658 
    659             currentStackTrace = currentStackTrace.parentStackTrace;
    660         }
    661     }
    662 
    663     _selectActiveCallFrameTreeElement(treeOutline)
    664     {
    665         let activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
    666         if (activeCallFrame) {
    667             let activeCallFrameTreeElement = treeOutline.findTreeElement(activeCallFrame);
    668             if (activeCallFrameTreeElement)
    669                 activeCallFrameTreeElement.select(true, true);
    670         }
    671     }
    672 
    673     _showSingleThreadCallStacks()
    674     {
    675         console.assert(!this._showingSingleThreadCallStack);
    676         console.assert(WebInspector.targets.size === 1);
    677 
    678         this._showingSingleThreadCallStack = true;
    679 
    680         this._callStackGroup.rows = [this._singleThreadCallStackRow];
    681 
    682         this._selectActiveCallFrameTreeElement(this._singleThreadCallStackTreeOutline);
    683     }
    684 
    685     _showMultipleThreadCallStacks()
    686     {
    687         console.assert(this._showingSingleThreadCallStack);
    688         console.assert(WebInspector.targets.size > 1);
    689 
    690         this._showingSingleThreadCallStack = false;
    691 
    692         this._callStackGroup.rows = [this._multipleThreadsCallStackRow];
    693 
    694         this._selectActiveCallFrameTreeElement(this._callStackTreeOutline);
    695     }
    696 
    697599    _findThreadTreeElementForTarget(target)
    698600    {
     
    711613        this._callStackTreeOutline.appendChild(treeElement);
    712614
    713         if (this._showingSingleThreadCallStack)
    714             this._showMultipleThreadCallStacks();
     615        this._updateCallStackTreeOutline();
    715616    }
    716617
     
    721622        this._callStackTreeOutline.removeChild(treeElement);
    722623
    723         if (WebInspector.targets.size === 1)
    724             this._showSingleThreadCallStacks();
     624        this._updateCallStackTreeOutline();
     625    }
     626
     627    _updateCallStackTreeOutline()
     628    {
     629        let singleThreadShowing = WebInspector.targets.size === 1;
     630        this._callStackTreeOutline.element.classList.toggle("single-thread", singleThreadShowing);
     631        this._mainTargetTreeElement.selectable = !singleThreadShowing;
    725632    }
    726633
     
    771678        let treeElement = this._findThreadTreeElementForTarget(target);
    772679        treeElement.refresh();
    773 
    774         if (target === WebInspector.mainTarget)
    775             this._updateSingleThreadCallStacks();
    776680    }
    777681
     
    782686            this._activeCallFrameTreeElement = null;
    783687        }
    784         if (this._singleThreadActiveCallFrameTreeElement) {
    785             this._singleThreadActiveCallFrameTreeElement.isActiveCallFrame = false;
    786             this._singleThreadActiveCallFrameTreeElement = null;
    787         }
    788688
    789689        if (!WebInspector.debuggerManager.activeCallFrame)
     
    793693        if (this._activeCallFrameTreeElement)
    794694            this._activeCallFrameTreeElement.isActiveCallFrame = true;
    795 
    796         this._singleThreadActiveCallFrameTreeElement = this._singleThreadCallStackTreeOutline.findTreeElement(WebInspector.debuggerManager.activeCallFrame);
    797         if (this._singleThreadActiveCallFrameTreeElement)
    798             this._singleThreadActiveCallFrameTreeElement.isActiveCallFrame = true;
    799695    }
    800696
  • trunk/Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.js

    r208725 r209213  
    6767        }
    6868
     69        let currentStackTrace = targetData.asyncStackTrace;
     70        while (currentStackTrace) {
     71            console.assert(currentStackTrace.callFrames.length, "StackTrace should have non-empty call frames array.");
     72            if (!currentStackTrace.callFrames.length)
     73                break;
     74
     75            let boundaryCallFrame;
     76            if (currentStackTrace.topCallFrameIsBoundary) {
     77                boundaryCallFrame = currentStackTrace.callFrames[0];
     78                console.assert(boundaryCallFrame.nativeCode && !boundaryCallFrame.sourceCodeLocation);
     79            } else {
     80                // Create a generic native CallFrame for the asynchronous boundary.
     81                const functionName = WebInspector.UIString("(async)");
     82                const nativeCode = true;
     83                boundaryCallFrame = new WebInspector.CallFrame(null, null, null, functionName, null, null, nativeCode);
     84            }
     85
     86            const isAsyncBoundaryCallFrame = true;
     87            this.appendChild(new WebInspector.CallFrameTreeElement(boundaryCallFrame, isAsyncBoundaryCallFrame));
     88
     89            let startIndex = currentStackTrace.topCallFrameIsBoundary ? 1 : 0;
     90            for (let i = startIndex; i < currentStackTrace.callFrames.length; ++i)
     91                this.appendChild(new WebInspector.CallFrameTreeElement(currentStackTrace.callFrames[i]));
     92
     93            currentStackTrace = currentStackTrace.parentStackTrace;
     94        }
     95
    6996        this.expand();
    7097    }
Note: See TracChangeset for help on using the changeset viewer.