Changeset 237151 in webkit


Ignore:
Timestamp:
Oct 15, 2018 4:10:20 PM (5 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Expose Server Timing Response Headers in Network Tab
https://bugs.webkit.org/show_bug.cgi?id=190440

Patch by Charles Vazac <cvazac@gmail.com> on 2018-10-15
Reviewed by Joseph Pecoraro.

Source/WebInspectorUI:

  • Localizations/en.lproj/localizedStrings.js: new key "Server Timing:"
  • UserInterface/Main.html: add reference to Models/ServerTimingEntry.js
  • UserInterface/Models/Resource.js:

(WI.Resource.prototype.get serverTiming):
(WI.Resource.prototype.updateForResponse):

  • UserInterface/Models/ServerTimingEntry.js: Added.

(WI.ServerTimingEntry):
(WI.ServerTimingEntry.parseHeaders): parse raw response headers into an array of ServerTimingEntry objects
(WI.ServerTimingEntry.parseHeaders.consumeDelimiter):
(WI.ServerTimingEntry.parseHeaders.consumeToken):
(WI.ServerTimingEntry.):

  • UserInterface/Test.html: add reference to Models/ServerTimingEntry.js
  • UserInterface/Views/ResourceTimingBreakdownView.js:

(WI.ResourceTimingBreakdownView.prototype._appendServerTimingRow): render a table row per ServerTimingEntry object
(WI.ResourceTimingBreakdownView.prototype.initialLayout):
(WI.ResourceTimingBreakdownView):

LayoutTests:

  • inspector/unit-tests/server-timing-entry-expected.txt:
  • inspector/unit-tests/server-timing-entry.html:
Location:
trunk
Files:
3 added
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r237149 r237151  
     12018-10-15  Charles Vazac  <cvazac@gmail.com>
     2
     3        Web Inspector: Expose Server Timing Response Headers in Network Tab
     4        https://bugs.webkit.org/show_bug.cgi?id=190440
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * inspector/unit-tests/server-timing-entry-expected.txt:
     9        * inspector/unit-tests/server-timing-entry.html:
     10
    1112018-10-15  Alex Christensen  <achristensen@webkit.org>
    212
  • trunk/Source/WebInspectorUI/ChangeLog

    r237150 r237151  
     12018-10-15  Charles Vazac  <cvazac@gmail.com>
     2
     3        Web Inspector: Expose Server Timing Response Headers in Network Tab
     4        https://bugs.webkit.org/show_bug.cgi?id=190440
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * Localizations/en.lproj/localizedStrings.js: new key "Server Timing:"
     9        * UserInterface/Main.html: add reference to Models/ServerTimingEntry.js
     10        * UserInterface/Models/Resource.js:
     11        (WI.Resource.prototype.get serverTiming):
     12        (WI.Resource.prototype.updateForResponse):
     13        * UserInterface/Models/ServerTimingEntry.js: Added.
     14        (WI.ServerTimingEntry):
     15        (WI.ServerTimingEntry.parseHeaders): parse raw response headers into an array of ServerTimingEntry objects
     16        (WI.ServerTimingEntry.parseHeaders.consumeDelimiter):
     17        (WI.ServerTimingEntry.parseHeaders.consumeToken):
     18        (WI.ServerTimingEntry.):
     19        * UserInterface/Test.html: add reference to Models/ServerTimingEntry.js
     20        * UserInterface/Views/ResourceTimingBreakdownView.js:
     21        (WI.ResourceTimingBreakdownView.prototype._appendServerTimingRow): render a table row per ServerTimingEntry object
     22        (WI.ResourceTimingBreakdownView.prototype.initialLayout):
     23        (WI.ResourceTimingBreakdownView):
     24
    1252018-10-15  Nikita Vasilyev  <nvasilyev@apple.com>
    226
  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r237028 r237151  
    749749localizedStrings["Self Time"] = "Self Time";
    750750localizedStrings["Semantic Issue"] = "Semantic Issue";
     751localizedStrings["Server Timing:"] = "Server Timing:";
    751752localizedStrings["Service Worker"] = "Service Worker";
    752753localizedStrings["ServiceWorker"] = "ServiceWorker";
  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r237028 r237151  
    420420    <script src="Models/ScriptSyntaxTree.js"></script>
    421421    <script src="Models/ScriptTimelineRecord.js"></script>
     422    <script src="Models/ServerTimingEntry.js"></script>
    422423    <script src="Models/ShaderProgram.js"></script>
    423424    <script src="Models/SourceCodePosition.js"></script>
  • trunk/Source/WebInspectorUI/UserInterface/Models/Resource.js

    r236995 r237151  
    5151        this._requestCookies = null;
    5252        this._responseCookies = null;
     53        this._serverTimingEntries = null;
    5354        this._parentFrame = null;
    5455        this._initiatorSourceCodeLocation = initiatorSourceCodeLocation || null;
     
    607608    }
    608609
     610    get serverTiming()
     611    {
     612        if (!this._serverTimingEntries)
     613            this._serverTimingEntries = WI.ServerTimingEntry.parseHeaders(this._responseHeaders.valueForCaseInsensitiveKey("Server-Timing"));
     614        return this._serverTimingEntries;
     615    }
     616
    609617    scriptForLocation(sourceCodeLocation)
    610618    {
     
    690698        this._responseHeaders = responseHeaders || {};
    691699        this._responseCookies = null;
     700        this._serverTimingEntries = null;
    692701        this._responseReceivedTimestamp = elapsedTime || NaN;
    693702        this._timingData = WI.ResourceTimingData.fromPayload(timingData, this);
  • trunk/Source/WebInspectorUI/UserInterface/Test.html

    r236995 r237151  
    186186    <script src="Models/ScriptSyntaxTree.js"></script>
    187187    <script src="Models/ScriptTimelineRecord.js"></script>
     188    <script src="Models/ServerTimingEntry.js"></script>
    188189    <script src="Models/ShaderProgram.js"></script>
    189190    <script src="Models/SourceCodeRevision.js"></script>
  • trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.js

    r236995 r237151  
    9898    }
    9999
     100    _appendServerTimingRow(label, duration, maxDuration)
     101    {
     102        let row = this._tableElement.appendChild(document.createElement("tr"));
     103
     104        let labelCell = row.appendChild(document.createElement("td"));
     105        labelCell.className = "label";
     106        labelCell.textContent = label;
     107
     108        // We need to allow duration to be zero.
     109        if (duration !== undefined) {
     110            let graphWidth = (duration / maxDuration) * 100;
     111            let graphCell = row.appendChild(document.createElement("td"));
     112            graphCell.className = "graph";
     113
     114            let block = graphCell.appendChild(document.createElement("div"));
     115            // FIXME: Provide unique colors for the different ServerTiming rows based on the label/order.
     116            block.classList.add("block", "response");
     117            block.style.width = graphWidth + "%";
     118            block.style.right = 0;
     119
     120            let timeCell = row.appendChild(document.createElement("td"));
     121            timeCell.className = "time";
     122            // Convert duration from milliseconds to seconds.
     123            timeCell.textContent = Number.secondsToMillisecondsString(duration / 1000);
     124        }
     125
     126        return row;
     127    }
     128
     129    _appendDividerRow()
     130    {
     131        let emptyCell = this._appendEmptyRow().appendChild(document.createElement("td"));
     132        emptyCell.colSpan = 3;
     133        emptyCell.appendChild(document.createElement("hr"));
     134    }
     135
    100136    initialLayout()
    101137    {
     
    103139
    104140        let {startTime, redirectStart, redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, responseStart, responseEnd} = this._resource.timingData;
     141        let serverTiming = this._resource.serverTiming;
    105142
    106143        this._tableElement = this.element.appendChild(document.createElement("table"));
     
    140177        this._appendHeaderRow(WI.UIString("Time to First Byte"), Number.secondsToMillisecondsString(responseStart - startTime), "total-row");
    141178        this._appendHeaderRow(WI.UIString("Start to Finish"), Number.secondsToMillisecondsString(responseEnd - startTime), "total-row");
     179
     180        if (serverTiming.length > 0) {
     181            this._appendDividerRow()
     182            this._appendHeaderRow(WI.UIString("Server Timing:"));
     183
     184            let maxDuration = serverTiming.reduce((max, {duration = 0}) => Math.max(max, duration), 0);
     185
     186            for (let entry of serverTiming) {
     187                let {name, duration, description} = entry;
     188
     189                // For the label, prefer description over name.
     190                this._appendServerTimingRow(description || name, duration, maxDuration);
     191            }
     192        }
    142193    }
    143194};
Note: See TracChangeset for help on using the changeset viewer.