Changeset 226158 in webkit


Ignore:
Timestamp:
Dec 19, 2017, 4:56:31 PM (8 years ago)
Author:
Joseph Pecoraro
Message:

Web Inspector: Network Table - Redesign the waterfall popover showing timing data
​https://bugs.webkit.org/show_bug.cgi?id=180996
<rdar://problem/34072542>

Reviewed by Matt Baker.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Main.html:

New strings and files.

  • UserInterface/Views/NetworkTableContentView.js:

(WI.NetworkTableContentView.prototype._waterfallPopoverContentForResource):
(WI.NetworkTableContentView.prototype._handleMousedownWaterfall):
Use the ResourceTimingBreakdownView with a fixed width size.

  • UserInterface/Views/ResourceTimingContentView.css: Removed.
  • UserInterface/Views/ResourceTimingContentView.js:

(WI.ResourceTimingContentView.prototype.initialLayout):
(WI.ResourceTimingContentView.prototype._refreshTimingSection):
(WI.ResourceTimingContentView.prototype._refreshTimingSection.createBlock): Deleted.
(WI.ResourceTimingContentView.prototype._refreshTimingSection.createTimeLabel): Deleted.
(WI.ResourceTimingContentView.prototype._refreshTimingSection.createRow): Deleted.
Use the ResourceTimingBreakdownView with a flexible size.
Also changed the loading indicator and empty message to match
normal ContentView loading indicator and message only UI.

  • UserInterface/Views/ResourceTimingBreakdownView.css:

(.waterfall-popover .resource-timing-breakdown):
(.resource-timing-breakdown > table > tr > td.label):
(.resource-timing-breakdown > table > tr > td.graph):
(.resource-timing-breakdown > table > tr > td.time):
(.resource-timing-breakdown > table > tr.empty):
(.resource-timing-breakdown > table > tr.header:not(.total-row) > td):
(.resource-timing-breakdown > table hr):
(.resource-timing-breakdown .waterfall .block):
(.resource-timing-breakdown): Deleted.
(.resource-timing-breakdown > .waterfall): Deleted.
(.resource-timing-breakdown > .waterfall .block): Deleted.
(.resource-timing-breakdown ul): Deleted.
(.resource-timing-breakdown ul > li): Deleted.
(.resource-timing-breakdown ul > li > .row-label): Deleted.
(body[dir=ltr] .resource-timing-breakdown ul > li > .row-label): Deleted.
(body[dir=rtl] .resource-timing-breakdown ul > li > .row-label): Deleted.
(.resource-timing-breakdown ul > li > .section-label): Deleted.
(.resource-timing-breakdown ul > li > .time-label): Deleted.
(.resource-timing-breakdown .time-section): Deleted.
(.resource-timing-breakdown ul > li > .time-section > .label): Deleted.
(.resource-timing-breakdown ul > li.total .block): Deleted.
(.resource-timing-breakdown ul > li.total .time-label): Deleted.

  • UserInterface/Views/ResourceTimingBreakdownView.js:

(WI.ResourceTimingBreakdownView):
(WI.ResourceTimingBreakdownView.prototype._appendEmptyRow):
(WI.ResourceTimingBreakdownView.prototype._appendHeaderRow):
(WI.ResourceTimingBreakdownView.prototype._appendRow):
(WI.ResourceTimingBreakdownView.prototype.initialLayout):
(WI.ResourceTimingBreakdownView.prototype.initialLayout.createBlock): Deleted.
(WI.ResourceTimingBreakdownView.prototype.initialLayout.createSectionLabel): Deleted.
(WI.ResourceTimingBreakdownView.prototype.initialLayout.createTimeLabel): Deleted.
(WI.ResourceTimingBreakdownView.prototype.initialLayout.createTimeSection): Deleted.
(WI.ResourceTimingBreakdownView.prototype.initialLayout.createRow): Deleted.
(WI.ResourceTimingBreakdownView.prototype.initialLayout.emptyRow): Deleted.
(WI.ResourceTimingBreakdownView.prototype.initialLayout.appendGraphRow): Deleted.
(WI.ResourceTimingBreakdownView.prototype.initialLayout.appendEmptyRow): Deleted.
(WI.ResourceTimingBreakdownView.prototype.initialLayout.getCurrentSectionMetrics): Deleted.
Redesign the breakdown view.

Location:
trunk/Source/WebInspectorUI
Files:
1 deleted
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r226153 r226158  
     12017-12-19  Joseph Pecoraro  <pecoraro@apple.com>
     2
     3        Web Inspector: Network Table - Redesign the waterfall popover showing timing data
     4        https://bugs.webkit.org/show_bug.cgi?id=180996
     5        <rdar://problem/34072542>
     6
     7        Reviewed by Matt Baker.
     8
     9        * Localizations/en.lproj/localizedStrings.js:
     10        * UserInterface/Main.html:
     11        New strings and files.
     12
     13        * UserInterface/Views/NetworkTableContentView.js:
     14        (WI.NetworkTableContentView.prototype._waterfallPopoverContentForResource):
     15        (WI.NetworkTableContentView.prototype._handleMousedownWaterfall):
     16        Use the ResourceTimingBreakdownView with a fixed width size.
     17
     18        * UserInterface/Views/ResourceTimingContentView.css: Removed.
     19        * UserInterface/Views/ResourceTimingContentView.js:
     20        (WI.ResourceTimingContentView.prototype.initialLayout):
     21        (WI.ResourceTimingContentView.prototype._refreshTimingSection):
     22        (WI.ResourceTimingContentView.prototype._refreshTimingSection.createBlock): Deleted.
     23        (WI.ResourceTimingContentView.prototype._refreshTimingSection.createTimeLabel): Deleted.
     24        (WI.ResourceTimingContentView.prototype._refreshTimingSection.createRow): Deleted.
     25        Use the ResourceTimingBreakdownView with a flexible size.
     26        Also changed the loading indicator and empty message to match
     27        normal ContentView loading indicator and message only UI.
     28
     29        * UserInterface/Views/ResourceTimingBreakdownView.css:
     30        (.waterfall-popover .resource-timing-breakdown):
     31        (.resource-timing-breakdown > table > tr > td.label):
     32        (.resource-timing-breakdown > table > tr > td.graph):
     33        (.resource-timing-breakdown > table > tr > td.time):
     34        (.resource-timing-breakdown > table > tr.empty):
     35        (.resource-timing-breakdown > table > tr.header:not(.total-row) > td):
     36        (.resource-timing-breakdown > table hr):
     37        (.resource-timing-breakdown .waterfall .block):
     38        (.resource-timing-breakdown): Deleted.
     39        (.resource-timing-breakdown > .waterfall): Deleted.
     40        (.resource-timing-breakdown > .waterfall .block): Deleted.
     41        (.resource-timing-breakdown ul): Deleted.
     42        (.resource-timing-breakdown ul > li): Deleted.
     43        (.resource-timing-breakdown ul > li > .row-label): Deleted.
     44        (body[dir=ltr] .resource-timing-breakdown ul > li > .row-label): Deleted.
     45        (body[dir=rtl] .resource-timing-breakdown ul > li > .row-label): Deleted.
     46        (.resource-timing-breakdown ul > li > .section-label): Deleted.
     47        (.resource-timing-breakdown ul > li > .time-label): Deleted.
     48        (.resource-timing-breakdown .time-section): Deleted.
     49        (.resource-timing-breakdown ul > li > .time-section > .label): Deleted.
     50        (.resource-timing-breakdown ul > li.total .block): Deleted.
     51        (.resource-timing-breakdown ul > li.total .time-label): Deleted.
     52        * UserInterface/Views/ResourceTimingBreakdownView.js:
     53        (WI.ResourceTimingBreakdownView):
     54        (WI.ResourceTimingBreakdownView.prototype._appendEmptyRow):
     55        (WI.ResourceTimingBreakdownView.prototype._appendHeaderRow):
     56        (WI.ResourceTimingBreakdownView.prototype._appendRow):
     57        (WI.ResourceTimingBreakdownView.prototype.initialLayout):
     58        (WI.ResourceTimingBreakdownView.prototype.initialLayout.createBlock): Deleted.
     59        (WI.ResourceTimingBreakdownView.prototype.initialLayout.createSectionLabel): Deleted.
     60        (WI.ResourceTimingBreakdownView.prototype.initialLayout.createTimeLabel): Deleted.
     61        (WI.ResourceTimingBreakdownView.prototype.initialLayout.createTimeSection): Deleted.
     62        (WI.ResourceTimingBreakdownView.prototype.initialLayout.createRow): Deleted.
     63        (WI.ResourceTimingBreakdownView.prototype.initialLayout.emptyRow): Deleted.
     64        (WI.ResourceTimingBreakdownView.prototype.initialLayout.appendGraphRow): Deleted.
     65        (WI.ResourceTimingBreakdownView.prototype.initialLayout.appendEmptyRow): Deleted.
     66        (WI.ResourceTimingBreakdownView.prototype.initialLayout.getCurrentSectionMetrics): Deleted.
     67        Redesign the breakdown view.
     68
    1692017-12-19  Brian Burg  <bburg@apple.com>
    270

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r225895 r226158  
    234234localizedStrings["Connection Closed"] = "Connection Closed";
    235235localizedStrings["Connection ID"] = "Connection ID";
     236localizedStrings["Connection:"] = "Connection:";
    236237localizedStrings["Console"] = "Console";
    237238localizedStrings["Console Evaluation"] = "Console Evaluation";
    … …  
    317318localizedStrings["Domain"] = "Domain";
    318319localizedStrings["Done"] = "Done";
     320localizedStrings["Download"] = "Download";
    319321localizedStrings["Download Web Archive"] = "Download Web Archive";
    320322localizedStrings["Duplicate Selector"] = "Duplicate Selector";
    … …  
    721723localizedStrings["Query String"] = "Query String";
    722724localizedStrings["Query returned no results."] = "Query returned no results.";
     725localizedStrings["Queued"] = "Queued";
    723726localizedStrings["Radial Gradient"] = "Radial Gradient";
    724727localizedStrings["Radius"] = "Radius";
    … …  
    775778localizedStrings["Response Cookies"] = "Response Cookies";
    776779localizedStrings["Response Headers"] = "Response Headers";
     780localizedStrings["Response:"] = "Response:";
    777781localizedStrings["Restart (%s)"] = "Restart (%s)";
    778782localizedStrings["Restart animation"] = "Restart animation";
    … …  
    795799localizedStrings["Save Selected"] = "Save Selected";
    796800localizedStrings["Save configuration"] = "Save configuration";
    797 localizedStrings["Scheduled"] = "Scheduled";
     801localizedStrings["Scheduling:"] = "Scheduling:";
    798802localizedStrings["Scheme"] = "Scheme";
    799803localizedStrings["Scope"] = "Scope";
    … …  
    897901localizedStrings["Start recording (%s)\nCreate new recording (%s)"] = "Start recording (%s)\nCreate new recording (%s)";
    898902localizedStrings["Start recording canvas actions. Shift-click to record a single frame."] = "Start recording canvas actions. Shift-click to record a single frame.";
     903localizedStrings["Start to Finish"] = "Start to Finish";
    899904localizedStrings["State"] = "State";
    900905localizedStrings["Status"] = "Status";
    … …  
    950955localizedStrings["This text resource could benefit from compression"] = "This text resource could benefit from compression";
    951956localizedStrings["Time"] = "Time";
     957localizedStrings["Time to First Byte"] = "Time to First Byte";
    952958localizedStrings["Timeline"] = "Timeline";
    953959localizedStrings["Timeline Recording %d"] = "Timeline Recording %d";
    … …  
    965971localizedStrings["Top"] = "Top";
    966972localizedStrings["Top Functions"] = "Top Functions";
    967 localizedStrings["Total"] = "Total";
    968973localizedStrings["Total Time"] = "Total Time";
    969974localizedStrings["Total memory size at the end of the selected time range"] = "Total memory size at the end of the selected time range";
    970975localizedStrings["Total time"] = "Total time";
     976localizedStrings["Totals:"] = "Totals:";
    971977localizedStrings["Trace"] = "Trace";
    972978localizedStrings["Trace: %s"] = "Trace: %s";

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

    r225709 r226158  
    155155    <link rel="stylesheet" href="Views/ResourceIcons.css">
    156156    <link rel="stylesheet" href="Views/ResourceSizesContentView.css">
    157     <link rel="stylesheet" href="Views/ResourceTimingContentView.css">
    158157    <link rel="stylesheet" href="Views/ResourceSidebarPanel.css">
    159158    <link rel="stylesheet" href="Views/ResourceTimelineDataGridNode.css">

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

    r226151 r226158  
    14121412        }
    14131413
    1414         let breakdownView = new WI.ResourceTimingBreakdownView(resource);
     1414        let breakdownView = new WI.ResourceTimingBreakdownView(resource, 300);
    14151415        contentElement.appendChild(breakdownView.element);
    14161416        breakdownView.updateLayout();
    … …  
    14471447
    14481448        let targetFrame = calculateTargetFrame();
     1449        if (!targetFrame)
     1450            return;
    14491451        if (!targetFrame.size.width && !targetFrame.size.height)
    14501452            return;

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

    r223734 r226158  
    2424 */
    2525
    26 .resource-timing-breakdown {
    27     width: 300px;
    28     padding: 10px 0;
    29     text-align: center;
     26.waterfall-popover .resource-timing-breakdown {
     27    margin: 5px;
    3028}
    3129
    32 .resource-timing-breakdown .waterfall {
     30.resource-timing-breakdown > table > tr > td.label {
     31    min-width: 80px;
     32    color: gray;
     33}
     34
     35.resource-timing-breakdown > table > tr > td.graph {
    3336    position: relative;
    34     height: 40px;
     37    width: 100%;
     38}
     39
     40.resource-timing-breakdown > table > tr > td.time {
     41    -webkit-padding-start: 5px;
     42    text-align: end;
     43    color: gray;
     44}
     45
     46.resource-timing-breakdown > table > tr.empty {
     47    height: 8px;
     48}
     49
     50.resource-timing-breakdown > table > tr.header:not(.total-row) > td {
     51    color: black;
     52}
     53
     54.resource-timing-breakdown > table hr {
     55    position: relative;
     56    top: 2px;
     57    min-width: 40px;
     58    border-top: none;
     59    border-left: none;
     60    border-right: none;
     61    border-color: gray;
     62    border-bottom-width: 1px;
    3563}
    3664
    3765.resource-timing-breakdown .waterfall .block {
    38     top: 12px;
    39     min-width: 3px;
    40     height: 12px;
     66    top: 1px;
     67    height: 14px;
    4168}
    42 
    43 .resource-timing-breakdown .waterfall .block.request,
    44 .resource-timing-breakdown .waterfall .block.response {
    45     top: 4px;
    46     height: 28px;
    47 }
    48 
    49 body[dir=ltr] .resource-timing-breakdown .waterfall .block:matches(.queue, .request) {
    50     border-top-left-radius: 2px;
    51     border-bottom-left-radius: 2px;
    52 }
    53 
    54 body[dir=ltr] .resource-timing-breakdown .waterfall .block.response {
    55     border-top-right-radius: 2px;
    56     border-bottom-right-radius: 2px;
    57 }
    58 
    59 body[dir=rtl] .resource-timing-breakdown .waterfall .block:matches(.queue, .request) {
    60     border-top-right-radius: 2px;
    61     border-bottom-right-radius: 2px;
    62 }
    63 
    64 body[dir=rtl] .resource-timing-breakdown .waterfall .block.response {
    65     border-top-left-radius: 2px;
    66     border-bottom-left-radius: 2px;
    67 }
    68 
    69 .resource-timing-breakdown .numbers {
    70     display: inline-block;
    71     -webkit-margin-start: 20px;
    72     text-align: start;
    73 }
    74 
    75 .resource-timing-breakdown .numbers > p {
    76     margin: 5px 0;
    77 }
    78 
    79 .resource-timing-breakdown .numbers > p > .swatch {
    80     display: inline-block;
    81     width: 10px;
    82     height: 10px;
    83     -webkit-margin-start: 12px;
    84     -webkit-margin-end: 3px;
    85     border: 1px solid hsla(0, 0%, 25%, 0.4);
    86     border-radius: 2px;
    87 }
    88 
    89 .resource-timing-breakdown .numbers .swatch.queue {
    90     background-color: var(--network-queue-color);
    91 }
    92 
    93 .resource-timing-breakdown .numbers .swatch.dns {
    94     background-color: var(--network-dns-color);
    95 }
    96 
    97 .resource-timing-breakdown .numbers .swatch.connect {
    98     background-color: var(--network-connect-color);
    99 }
    100 
    101 .resource-timing-breakdown .numbers .swatch.secure {
    102     background-color: var(--network-secure-color);
    103 }
    104 
    105 .resource-timing-breakdown .numbers .swatch.request {
    106     background-color: var(--network-request-color);
    107 }
    108 
    109 .resource-timing-breakdown .numbers .swatch.response {
    110     background-color: var(--network-response-color);
    111 }
    112 
    113 .resource-timing-breakdown .numbers > p > .label {
    114     font-weight: bold;
    115 }
    116 
    117 .resource-timing-breakdown .numbers > p.total {
    118     margin-top: 15px;
    119 }

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

    r223734 r226158  
    2626WI.ResourceTimingBreakdownView = class ResourceTimingBreakdownView extends WI.View
    2727{
    28     constructor(resource)
     28    constructor(resource, fixedWidth)
    2929    {
    3030        super(null);
    3131
    3232        console.assert(resource.timingData.startTime && resource.timingData.responseEnd, "Timing breakdown view requires a resource with timing data.");
     33        console.assert(!fixedWidth || fixedWidth >= 100, "fixedWidth must be at least wide enough for strings.");
    3334
    3435        this._resource = resource;
    3536
    3637        this.element.classList.add("resource-timing-breakdown");
     38
     39        if (fixedWidth)
     40            this.element.style.width = fixedWidth + "px";
    3741    }
    3842
    3943    // Protected
     44
     45    _appendEmptyRow()
     46    {
     47        let row = this._tableElement.appendChild(document.createElement("tr"));
     48        row.className = "empty";
     49        return row;
     50    }
     51
     52    _appendHeaderRow(label, time, additionalClassName)
     53    {
     54        let row = this._tableElement.appendChild(document.createElement("tr"));
     55        row.className = "header";
     56        if (additionalClassName)
     57            row.classList.add(additionalClassName);
     58
     59        let labelCell = row.appendChild(document.createElement("td"));
     60        labelCell.className = "label";
     61        labelCell.textContent = label;
     62        labelCell.colSpan = 2;
     63
     64        let timeCell = row.appendChild(document.createElement("td"));
     65        timeCell.className = "time";
     66        if (time)
     67            timeCell.textContent = time;
     68        else if (time === undefined)
     69            timeCell.appendChild(document.createElement("hr"));
     70
     71        return row;
     72    }
     73
     74    _appendRow(label, type, startTime, endTime)
     75    {
     76        let row = this._tableElement.appendChild(document.createElement("tr"));
     77
     78        let labelCell = row.appendChild(document.createElement("td"));
     79        labelCell.className = "label";
     80        labelCell.textContent = label;
     81
     82        let duration = endTime - startTime;
     83        let graphWidth = (duration / this._graphDuration) * 100;
     84        let graphOffset = ((startTime - this._graphStartTime) / this._graphDuration) * 100;
     85        let positionProperty = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "right" : "left";
     86        let graphCell = row.appendChild(document.createElement("td"));
     87        graphCell.className = "graph";
     88        let block = graphCell.appendChild(document.createElement("div"));
     89        block.classList.add("block", type);
     90        block.style.width = graphWidth + "%";
     91        block.style[positionProperty] = graphOffset + "%";
     92
     93        let timeCell = row.appendChild(document.createElement("td"));
     94        timeCell.className = "time";
     95        timeCell.textContent = Number.secondsToMillisecondsString(duration);
     96
     97        return row;
     98    }
    4099
    41100    initialLayout()
    … …  
    43102        super.initialLayout();
    44103
    45         const graphWidth = 250;
    46         const graphStartOffset = 25;
     104        let {startTime, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, responseStart, responseEnd} = this._resource.timingData;
    47105
    48         let {startTime, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, responseStart, responseEnd} = this._resource.timingData;
    49         let graphStartTime = startTime;
    50         let graphEndTime = responseEnd;
    51         let secondsPerPixel = (responseEnd - startTime) / graphWidth;
     106        this._tableElement = this.element.appendChild(document.createElement("table"));
     107        this._tableElement.className = "waterfall";
    52108
    53         let waterfallElement = this.element.appendChild(document.createElement("div"));
    54         waterfallElement.className = "waterfall";
     109        this._graphStartTime = startTime;
     110        this._graphEndTime = responseEnd;
     111        this._graphDuration = this._graphEndTime - this._graphStartTime;
    55112
    56         function appendBlock(startTime, endTime, className) {
    57             let startOffset = graphStartOffset + ((startTime - graphStartTime) / secondsPerPixel);
    58             let width = (endTime - startTime) / secondsPerPixel;
    59             let block = waterfallElement.appendChild(document.createElement("div"));
    60             block.classList.add("block", className);
    61             let styleAttribute = WI.resolvedLayoutDirection() === WI.LayoutDirection.LTR ? "left" : "right";
    62             block.style[styleAttribute] = startOffset + "px";
    63             block.style.width = width + "px";
     113        this._appendHeaderRow(WI.UIString("Scheduling:"));
     114        this._appendRow(WI.UIString("Queued"), "queue", startTime, domainLookupStart || connectStart || requestStart);
     115
     116        if (domainLookupStart || connectStart) {
     117            this._appendEmptyRow();
     118            this._appendHeaderRow(WI.UIString("Connection:"));
     119            if (domainLookupStart)
     120                this._appendRow(WI.UIString("DNS"), "dns", domainLookupStart, domainLookupEnd || connectStart || requestStart);
     121            if (connectStart)
     122                this._appendRow(WI.UIString("TCP"), "connect", connectStart, connectEnd || requestStart);
     123            if (secureConnectionStart)
     124                this._appendRow(WI.UIString("Secure"), "secure", secureConnectionStart, connectEnd || requestStart);
    64125        }
    65126
    66         if (domainLookupStart) {
    67             appendBlock(startTime, domainLookupStart, "queue");
    68             appendBlock(domainLookupStart, connectStart || requestStart, "dns");
    69         } else if (connectStart)
    70             appendBlock(startTime, connectStart, "queue");
    71         else if (requestStart)
    72             appendBlock(startTime, requestStart, "queue");
    73         if (connectStart)
    74             appendBlock(connectStart, connectEnd, "connect");
    75         if (secureConnectionStart)
    76             appendBlock(secureConnectionStart, connectEnd, "secure");
    77         appendBlock(requestStart, responseStart, "request");
    78         appendBlock(responseStart, responseEnd, "response");
     127        this._appendEmptyRow();
     128        this._appendHeaderRow(WI.UIString("Response:"));
     129        this._appendRow(WI.UIString("Waiting"), "request", requestStart, responseStart);
     130        this._appendRow(WI.UIString("Download"), "response", responseStart, responseEnd);
    79131
    80         let numbersSection = this.element.appendChild(document.createElement("div"));
    81         numbersSection.className = "numbers";
    82 
    83         function appendRow(label, duration, paragraphClass, swatchClass) {
    84             let p = numbersSection.appendChild(document.createElement("p"));
    85             if (paragraphClass)
    86                 p.className = paragraphClass;
    87 
    88             if (swatchClass) {
    89                 let swatch = p.appendChild(document.createElement("span"));
    90                 swatch.classList.add("swatch", swatchClass);
    91             }
    92 
    93             let labelElement = p.appendChild(document.createElement("span"));
    94             labelElement.className = "label";
    95             labelElement.textContent = label;
    96 
    97             p.append(": ");
    98 
    99             let durationElement = p.appendChild(document.createElement("span"));
    100             durationElement.className = "duration";
    101             durationElement.textContent = Number.secondsToMillisecondsString(duration);
    102         }
    103 
    104         let scheduledDuration = (domainLookupStart || connectStart || requestStart) - startTime;
    105         let connectionDuration = (connectEnd || requestStart) - (domainLookupStart || connectStart || connectEnd || requestStart);
    106         let requestResponseDuration = responseEnd - requestStart;
    107 
    108         appendRow(WI.UIString("Scheduled"), scheduledDuration);
    109         if (connectionDuration) {
    110             appendRow(WI.UIString("Connection"), connectionDuration);
    111             if (domainLookupStart)
    112                 appendRow(WI.UIString("DNS"), (domainLookupEnd || connectStart) - domainLookupStart, "sub", "dns");
    113             appendRow(WI.UIString("TCP"), connectEnd - connectStart, "sub", "connect");
    114             if (secureConnectionStart)
    115                 appendRow(WI.UIString("Secure"), connectEnd - secureConnectionStart, "sub", "secure");
    116         }
    117         appendRow(WI.UIString("Request & Response"), responseEnd - requestStart);
    118         appendRow(WI.UIString("Waiting"), responseStart - requestStart, "sub", "request");
    119         appendRow(WI.UIString("Response"), responseEnd - responseStart, "sub", "response");
    120         appendRow(WI.UIString("Total"), responseEnd - startTime, "total");
     132        this._appendEmptyRow();
     133        this._appendHeaderRow(WI.UIString("Totals:"));
     134        this._appendHeaderRow(WI.UIString("Time to First Byte"), Number.secondsToMillisecondsString(responseStart - startTime), "total-row");
     135        this._appendHeaderRow(WI.UIString("Start to Finish"), Number.secondsToMillisecondsString(responseEnd - startTime), "total-row");
    121136    }
    122137};

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

    r224851 r226158  
    4747        super.initialLayout();
    4848
    49         let contentElement = this.element.appendChild(document.createElement("div"));
    50         contentElement.className = "content";
    51 
    52         this._timingSection = contentElement.appendChild(document.createElement("section"));
    53         this._timingSection.className = "timing";
    54 
    5549        this._refreshTimingSection();
    5650
    … …  
    7973    _refreshTimingSection()
    8074    {
    81         this._timingSection.removeChildren();
     75        this.element.removeChildren();
    8276
    8377        if (!this._resource.hasResponse()) {
    8478            let spinner = new WI.IndeterminateProgressSpinner;
    85             this._timingSection.appendChild(spinner.element);
     79            this.element.appendChild(spinner.element);
    8680            return;
    8781        }
    8882
    8983        if (!this._resource.timingData.startTime || !this._resource.timingData.responseEnd) {
    90             let p = this._timingSection.appendChild(document.createElement("p"));
    91             p.className = "empty";
    92             p.textContent = WI.UIString("Resource does not have timing data");
     84            const isError = false;
     85            this.element.appendChild(WI.createMessageTextView(WI.UIString("Resource does not have timing data"), isError));
    9386            return;
    9487        }
    9588
    96         // FIXME: Converge on using WI.ResourceTimingBreakdownView when a design is finalized.
     89        let contentElement = this.element.appendChild(document.createElement("div"));
     90        contentElement.className = "content";
    9791
    98         let listElement = this._timingSection.appendChild(document.createElement("ul"));
    99         listElement.className = "waterfall"; // Include waterfall block styles.
     92        let timingSection = contentElement.appendChild(document.createElement("section"));
     93        timingSection.className = "timing";
    10094
    101         const graphWidth = 380;
    102         const graphStartOffset = 80;
    103 
    104         let {startTime, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, responseStart, responseEnd} = this._resource.timingData;
    105         let graphStartTime = startTime;
    106         let graphEndTime = responseEnd;
    107         let secondsPerPixel = (responseEnd - startTime) / graphWidth;
    108 
    109         function createBlock(startTime, endTime, className, makeEmpty) {
    110             let startOffset = graphStartOffset + ((startTime - graphStartTime) / secondsPerPixel);
    111             let width = makeEmpty ? 1 : (endTime - startTime) / secondsPerPixel;
    112             let block = document.createElement("div");
    113             block.classList.add("block", className);
    114             let property = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "right" : "left";
    115             block.style[property] = startOffset + "px";
    116             block.style.width = width + "px";
    117             return block;
    118         }
    119 
    120         function createTimeLabel(endTime, label) {
    121             let positionOffset = graphStartOffset + ((endTime - graphStartTime) / secondsPerPixel);
    122             positionOffset += 3;
    123             let timeLabel = document.createElement("div");
    124             timeLabel.className = "time-label";
    125             timeLabel.textContent = label;
    126             let property = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "right" : "left";
    127             timeLabel.style[property] = positionOffset + "px";
    128             return timeLabel;
    129         }
    130 
    131         function createRow(label, startTime, endTime, className) {
    132             let row = document.createElement("li");
    133             let labelElement = row.appendChild(document.createElement("span"));
    134             labelElement.className = "row-label";
    135             labelElement.textContent = label;
    136             row.appendChild(createBlock(startTime, endTime, className));
    137             row.appendChild(createTimeLabel(endTime, Number.secondsToMillisecondsString(endTime - startTime)));
    138             return row;
    139         }
    140 
    141         listElement.appendChild(createRow(WI.UIString("Scheduled"), startTime, domainLookupStart || connectStart || requestStart, "queue"));
    142         if (domainLookupStart)
    143             listElement.appendChild(createRow(WI.UIString("DNS"), domainLookupStart, domainLookupEnd || connectStart || requestStart, "dns"));
    144         if (connectStart)
    145             listElement.appendChild(createRow(WI.UIString("TCP"), connectStart, connectEnd || requestStart, "connect"));
    146         if (secureConnectionStart)
    147             listElement.appendChild(createRow(WI.UIString("Secure"), secureConnectionStart, connectEnd || requestStart, "secure"));
    148         listElement.appendChild(createRow(WI.UIString("Request"), requestStart, responseStart, "request"));
    149         listElement.appendChild(createRow(WI.UIString("Response"), responseStart, responseEnd, "response"));
    150 
    151         let totalRow = createRow(WI.UIString("Total"), startTime, responseEnd, "total");
    152         listElement.appendChild(totalRow);
    153         totalRow.classList.add("total");
     95        let breakdownView = new WI.ResourceTimingBreakdownView(this._resource);
     96        timingSection.appendChild(breakdownView.element);
     97        breakdownView.updateLayout();
    15498    }
    15599
Note: See TracChangeset for help on using the changeset viewer.