⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 184045 in webkit


Ignore:
Timestamp:
May 10, 2015, 5:23:07 AM (11 years ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: In the console, show function name next to the source link
​https://bugs.webkit.org/show_bug.cgi?id=144372

Introduce CallFrameView to display counsole message source links. It looks like this:

[f] functionName - filename.js:42

Reviewed by Timothy Hatcher.

  • UserInterface/Base/Main.js:

(WebInspector.createSourceCodeLocationLink):
(WebInspector.linkifyLocation):
(.showSourceCodeLocation):
(WebInspector.linkifyElement):
Abstract this out as it's used in WebInspector.CallFrameView and WebInspector.createSourceCodeLocationLink.

(WebInspector.sourceCodeForURL):
Move this code from Timeline to Main.js as it's used by Console too.

(WebInspector.linkifyURLAsNode):
Remove tooltipText argument as it is never used.

  • UserInterface/Controllers/TimelineManager.js:

(WebInspector.TimelineManager.prototype._callFramesFromPayload):

  • UserInterface/Main.html:
  • UserInterface/Models/CallFrame.js:

(WebInspector.CallFrame.fromPayload):
Abstract this out as it's used in WebInspector.TimelineManager.prototype._callFramesFromPayload and
WebInspector.ConsoleMessageView._appendLocationLink.

(WebInspector.CallFrame):

  • UserInterface/Views/CallFrameTreeElement.js:

(WebInspector.CallFrameTreeElement):
Move it to WebInspector.CallFrameView.iconForCallFrame.

  • UserInterface/Views/CallFrameView.css: Added.

(.call-frame):
(.call-frame .icon):
(.call-frame .titles):
(.call-frame .title):
(.call-frame .source-link):
(.call-frame .title + .subtitle > .source-link):
(.call-frame .subtitle .source-link):
(.call-frame:focus .subtitle .source-link):
(.call-frame .subtitle:empty):
(.call-frame .subtitle):
(.call-frame .colon):
(.call-frame .title + .subtitle::before):

  • UserInterface/Views/CallFrameView.js: Added.

(WebInspector.CallFrameView):
(WebInspector.CallFrameView.iconClassNameForCallFrame):

  • UserInterface/Views/ConsoleMessageView.css:

(.console-message .console-message-location):
(.console-message .call-frame):
(.console-message .go-to-link):
(.console-message .go-to-link:focus):
(.console-message .console-message-url::before):
(.console-saved-variable): Deleted.

  • UserInterface/Views/ConsoleMessageView.js:

(WebInspector.ConsoleMessageView.prototype._appendLocationLink):

  • UserInterface/Views/DebuggerDashboardView.js:
  • UserInterface/Views/Main.css:

(.hidden): Deleted.

  • UserInterface/Views/ProfileNodeTreeElement.js:

(WebInspector.ProfileNodeTreeElement):

  • UserInterface/Views/TimelineDataGridNode.js:

(WebInspector.TimelineDataGridNode.prototype.createCellContent):

Location:
trunk/Source/WebInspectorUI
Files:
2 added
12 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r184000 r184045  
     12015-05-10  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: In the console, show function name next to the source link
     4        https://bugs.webkit.org/show_bug.cgi?id=144372
     5
     6        Introduce CallFrameView to display counsole message source links. It looks like this:
     7
     8            [f] functionName - filename.js:42
     9
     10        Reviewed by Timothy Hatcher.
     11
     12        * UserInterface/Base/Main.js:
     13        (WebInspector.createSourceCodeLocationLink):
     14        (WebInspector.linkifyLocation):
     15        (.showSourceCodeLocation):
     16        (WebInspector.linkifyElement):
     17        Abstract this out as it's used in WebInspector.CallFrameView and WebInspector.createSourceCodeLocationLink.
     18
     19        (WebInspector.sourceCodeForURL):
     20        Move this code from Timeline to Main.js as it's used by Console too.
     21
     22        (WebInspector.linkifyURLAsNode):
     23        Remove tooltipText argument as it is never used.
     24
     25        * UserInterface/Controllers/TimelineManager.js:
     26        (WebInspector.TimelineManager.prototype._callFramesFromPayload):
     27        * UserInterface/Main.html:
     28        * UserInterface/Models/CallFrame.js:
     29        (WebInspector.CallFrame.fromPayload):
     30        Abstract this out as it's used in WebInspector.TimelineManager.prototype._callFramesFromPayload and
     31        WebInspector.ConsoleMessageView._appendLocationLink.
     32
     33        (WebInspector.CallFrame):
     34        * UserInterface/Views/CallFrameTreeElement.js:
     35        (WebInspector.CallFrameTreeElement):
     36        Move it to WebInspector.CallFrameView.iconForCallFrame.
     37
     38        * UserInterface/Views/CallFrameView.css: Added.
     39        (.call-frame):
     40        (.call-frame .icon):
     41        (.call-frame .titles):
     42        (.call-frame .title):
     43        (.call-frame .source-link):
     44        (.call-frame .title + .subtitle > .source-link):
     45        (.call-frame .subtitle .source-link):
     46        (.call-frame:focus .subtitle .source-link):
     47        (.call-frame .subtitle:empty):
     48        (.call-frame .subtitle):
     49        (.call-frame .colon):
     50        (.call-frame .title + .subtitle::before):
     51        * UserInterface/Views/CallFrameView.js: Added.
     52        (WebInspector.CallFrameView):
     53        (WebInspector.CallFrameView.iconClassNameForCallFrame):
     54        * UserInterface/Views/ConsoleMessageView.css:
     55        (.console-message .console-message-location):
     56        (.console-message .call-frame):
     57        (.console-message .go-to-link):
     58        (.console-message .go-to-link:focus):
     59        (.console-message .console-message-url::before):
     60        (.console-saved-variable): Deleted.
     61        * UserInterface/Views/ConsoleMessageView.js:
     62        (WebInspector.ConsoleMessageView.prototype._appendLocationLink):
     63        * UserInterface/Views/DebuggerDashboardView.js:
     64        * UserInterface/Views/Main.css:
     65        (.hidden): Deleted.
     66        * UserInterface/Views/ProfileNodeTreeElement.js:
     67        (WebInspector.ProfileNodeTreeElement):
     68        * UserInterface/Views/TimelineDataGridNode.js:
     69        (WebInspector.TimelineDataGridNode.prototype.createCellContent):
     70
    1712015-05-08  Tobias Reiss  <tobi+webkit@basecode.de>
    272

  • trunk/Source/WebInspectorUI/UserInterface/Base/Main.js

    r183907 r184045  
    17401740        return null;
    17411741
    1742     function showSourceCodeLocation(event)
    1743     {
    1744         event.stopPropagation();
    1745         event.preventDefault();
    1746 
    1747         if (event.metaKey)
    1748             this.showOriginalUnformattedSourceCodeLocation(sourceCodeLocation);
    1749         else
    1750             this.showSourceCodeLocation(sourceCodeLocation);
    1751     }
    1752 
    17531742    var linkElement = document.createElement("a");
    17541743    linkElement.className = "go-to-link";
    1755     linkElement.addEventListener("click", showSourceCodeLocation.bind(this));
     1744    WebInspector.linkifyElement(linkElement, sourceCodeLocation);
    17561745    sourceCodeLocation.populateLiveDisplayLocationTooltip(linkElement);
    17571746
    … …  
    17691758WebInspector.linkifyLocation = function(url, lineNumber, columnNumber, className)
    17701759{
    1771     var sourceCode = WebInspector.frameResourceManager.resourceForURL(url);
    1772     if (!sourceCode) {
    1773         sourceCode = WebInspector.debuggerManager.scriptsForURL(url)[0];
    1774         if (sourceCode)
    1775             sourceCode = sourceCode.resource || sourceCode;
    1776     }
     1760    var sourceCode = WebInspector.sourceCodeForURL(url);
    17771761
    17781762    if (!sourceCode) {
    … …  
    17931777};
    17941778
    1795 WebInspector.linkifyURLAsNode = function(url, linkText, classes, tooltipText)
     1779WebInspector.linkifyElement = function(linkElement, sourceCodeLocation) {
     1780    console.assert(sourceCodeLocation);
     1781
     1782    function showSourceCodeLocation(event)
     1783    {
     1784        event.stopPropagation();
     1785        event.preventDefault();
     1786
     1787        if (event.metaKey)
     1788            this.showOriginalUnformattedSourceCodeLocation(sourceCodeLocation);
     1789        else
     1790            this.showSourceCodeLocation(sourceCodeLocation);
     1791    }
     1792
     1793    linkElement.addEventListener("click", showSourceCodeLocation.bind(this));
     1794};
     1795
     1796WebInspector.sourceCodeForURL = function(url) {
     1797    var sourceCode = WebInspector.frameResourceManager.resourceForURL(url);
     1798    if (!sourceCode) {
     1799        sourceCode = WebInspector.debuggerManager.scriptsForURL(url)[0];
     1800        if (sourceCode)
     1801            sourceCode = sourceCode.resource || sourceCode;
     1802    }
     1803    return sourceCode || null;
     1804};
     1805
     1806WebInspector.linkifyURLAsNode = function(url, linkText, classes)
    17961807{
    17971808    if (!linkText)
    … …  
    18031814    a.href = url;
    18041815    a.className = classes;
    1805 
    1806     if (tooltipText === undefined)
    1807         a.title = url;
    1808     else if (typeof tooltipText !== "string" || tooltipText.length)
    1809         a.title = tooltipText;
    18101816
    18111817    a.textContent = linkText;

  • trunk/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js

    r183764 r184045  
    452452            return null;
    453453
    454         function createCallFrame(payload)
    455         {
    456             var url = payload.url;
    457             var nativeCode = false;
    458 
    459             if (url === "[native code]") {
    460                 nativeCode = true;
    461                 url = null;
    462             }
    463 
    464             var sourceCode = WebInspector.frameResourceManager.resourceForURL(url);
    465             if (!sourceCode)
    466                 sourceCode = WebInspector.debuggerManager.scriptsForURL(url)[0];
    467 
    468             // The lineNumber is 1-based, but we expect 0-based.
    469             var lineNumber = payload.lineNumber - 1;
    470 
    471             var sourceCodeLocation = sourceCode ? sourceCode.createLazySourceCodeLocation(lineNumber, payload.columnNumber) : null;
    472             var functionName = payload.functionName !== "global code" ? payload.functionName : null;
    473 
    474             return new WebInspector.CallFrame(null, sourceCodeLocation, functionName, null, null, nativeCode);
    475         }
    476 
    477         return payload.map(createCallFrame);
     454        return payload.map(WebInspector.CallFrame.fromPayload);
    478455    }
    479456

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r183721 r184045  
    4343    <link rel="stylesheet" href="Views/CSSStyleDetailsSidebarPanel.css">
    4444    <link rel="stylesheet" href="Views/CallFrameIcons.css">
     45    <link rel="stylesheet" href="Views/CallFrameView.css">
    4546    <link rel="stylesheet" href="Views/ChartDetailsSectionRow.css">
    4647    <link rel="stylesheet" href="Views/ClusterContentView.css">
    … …  
    378379    <script src="Views/CSSStyleDetailsSidebarPanel.js"></script>
    379380    <script src="Views/CallFrameTreeElement.js"></script>
     381    <script src="Views/CallFrameView.js"></script>
    380382    <script src="Views/ChartDetailsSectionRow.js"></script>
    381383    <script src="Views/ClusterContentView.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Models/CallFrame.js

    r182094 r184045  
    100100            this._scopeChain[i].object.deprecatedGetAllProperties(propertiesCollected);
    101101    }
     102
     103    // Static
     104
     105    static fromPayload(payload)
     106    {
     107        console.assert(payload);
     108
     109        var url = payload.url;
     110        var nativeCode = false;
     111
     112        if (url === "[native code]") {
     113            nativeCode = true;
     114            url = null;
     115        }
     116
     117        var sourceCode = WebInspector.frameResourceManager.resourceForURL(url);
     118        if (!sourceCode)
     119            sourceCode = WebInspector.debuggerManager.scriptsForURL(url)[0];
     120
     121        // The lineNumber is 1-based, but we expect 0-based.
     122        var lineNumber = payload.lineNumber - 1;
     123
     124        var sourceCodeLocation = sourceCode ? sourceCode.createLazySourceCodeLocation(lineNumber, payload.columnNumber) : null;
     125        var functionName = payload.functionName !== "global code" ? payload.functionName : null;
     126
     127        return new WebInspector.CallFrame(null, sourceCodeLocation, functionName, null, null, nativeCode);
     128    }
    102129};

  • trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js

    r182042 r184045  
    3030        console.assert(callFrame instanceof WebInspector.CallFrame);
    3131
    32         var className = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
    33         if (callFrame.nativeCode)
    34             className = WebInspector.CallFrameTreeElement.NativeIconStyleClassName;
    35 
    36         // This is more than likely an event listener function with an "on" prefix and it is
    37         // as long or longer than the shortest event listener name -- "oncut".
    38         if (callFrame.functionName && callFrame.functionName.startsWith("on") && callFrame.functionName.length >= 5)
    39             className = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
    40 
     32        var className = WebInspector.CallFrameView.iconClassNameForCallFrame(callFrame);
    4133        var title = callFrame.functionName || WebInspector.UIString("(anonymous function)");
    4234
    … …  
    7971    }
    8072};
    81 
    82 WebInspector.CallFrameTreeElement.FunctionIconStyleClassName = "function-icon";
    83 WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName = "event-listener-icon";
    84 WebInspector.CallFrameTreeElement.NativeIconStyleClassName = "native-icon";

  • trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css

    r183668 r184045  
    202202}
    203203
    204 .console-message-url {
    205     float: right;
    206     margin-left: 4px;
    207     font-weight: normal;
    208 }
    209 
    210204.console-saved-variable {
    211205    font-style: normal;
    … …  
    223217    margin-left: 1px;
    224218}
     219
     220.console-message .console-message-location {
     221    float: right;
     222    font-weight: normal;
     223}
     224
     225.console-message .call-frame {
     226    -webkit-user-select: text;
     227    height: 1.2em;
     228}
     229
     230.console-message .go-to-link {
     231    color: hsla(0, 0%, 0%, 0.6);
     232    text-decoration: none;
     233}
     234
     235.console-message .go-to-link:hover,
     236.console-message .go-to-link:focus {
     237    color: hsl(210, 100%, 40%);
     238}
     239
     240.console-message .console-message-url::before {
     241    content: ' ';
     242}

  • trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.js

    r183659 r184045  
    288288
    289289        var firstNonNativeCallFrame = this._firstNonNativeCallFrame();
     290
     291        var callFrame;
    290292        if (firstNonNativeCallFrame) {
    291             var urlElement = this._linkifyCallFrame(firstNonNativeCallFrame);
    292             this._element.appendChild(urlElement);
     293            // JavaScript errors and console.* methods.
     294            callFrame = WebInspector.CallFrame.fromPayload(firstNonNativeCallFrame);
    293295        } else if (this._message.url && !this._shouldHideURL(this._message.url)) {
    294             var urlElement = this._linkifyLocation(this._message.url, this._message.line, this._message.column);
    295             this._element.appendChild(urlElement);
    296         }
     296            // CSS warnings have no stack traces.
     297            callFrame = WebInspector.CallFrame.fromPayload({
     298                url: this._message.url,
     299                lineNumber: this._message.line,
     300                columnNumber: this._message.column
     301            });
     302        }
     303
     304        if (!callFrame)
     305            return;
     306
     307        var locationElement = new WebInspector.CallFrameView(callFrame);
     308        locationElement.classList.add("console-message-location");
     309        this._element.appendChild(locationElement);
    297310    }
    298311

  • trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js

    r183579 r184045  
    101101};
    102102
    103 WebInspector.DebuggerDashboardView.FunctionIconStyleClassName = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
    104 WebInspector.DebuggerDashboardView.EventListenerIconStyleClassName = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
     103WebInspector.DebuggerDashboardView.FunctionIconStyleClassName = WebInspector.CallFrameView.FunctionIconStyleClassName;
     104WebInspector.DebuggerDashboardView.EventListenerIconStyleClassName = WebInspector.CallFrameView.EventListenerIconStyleClassName;
    105105
    106106WebInspector.DebuggerDashboardView.IconStyleClassName = "icon";

  • trunk/Source/WebInspectorUI/UserInterface/Views/Main.css

    r183579 r184045  
    270270}
    271271
    272 .display-location {
    273     font-style: italic !important;
    274 }
    275 
    276272.hidden {
    277273    display: none !important;

  • trunk/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js

    r182042 r184045  
    5757        switch (profileNode.type) {
    5858        case WebInspector.ProfileNode.Type.Function:
    59             className = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
     59            className = WebInspector.CallFrameView.FunctionIconStyleClassName;
    6060            if (!sourceCodeLocation)
    61                 className = WebInspector.CallFrameTreeElement.NativeIconStyleClassName;
     61                className = WebInspector.CallFrameView.NativeIconStyleClassName;
    6262            break;
    6363        case WebInspector.ProfileNode.Type.Program:
    … …  
    7171        // as long or longer than the shortest event listener name -- "oncut".
    7272        if (profileNode.functionName && profileNode.functionName.startsWith("on") && profileNode.functionName.length >= 5)
    73             className = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
     73            className = WebInspector.CallFrameView.EventListenerIconStyleClassName;
    7474
    7575        var hasChildren = !!profileNode.childNodes.length;

  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js

    r181769 r184045  
    151151            }
    152152
    153             cell.classList.add(WebInspector.CallFrameTreeElement.FunctionIconStyleClassName);
     153            cell.classList.add(WebInspector.CallFrameView.FunctionIconStyleClassName);
    154154
    155155            var fragment = document.createDocumentFragment();
    … …  
    186186                } else {
    187187                    // Show the function name and icon.
    188                     cell.classList.add(WebInspector.CallFrameTreeElement.FunctionIconStyleClassName);
     188                    cell.classList.add(WebInspector.CallFrameView.FunctionIconStyleClassName);
    189189
    190190                    fragment.appendChild(document.createTextNode(functionName));
Note: See TracChangeset for help on using the changeset viewer.