src/third_party/devtools/front_end/network/RequestTimingView.js - cobalt - Git at Google

 /*
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
  * copyright notice, this list of conditions and the following disclaimer
  * in the documentation and/or other materials provided with the
  * distribution.
  *     * Neither the name of Google Inc. nor the names of its
  * contributors may be used to endorse or promote products derived from
  * this software without specific prior written permission.
  *
  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */

 /**
  * @unrestricted
  */
 export default class RequestTimingView extends UI.VBox {
   /**
    * @param {!SDK.NetworkRequest} request
    * @param {!Network.NetworkTimeCalculator} calculator
    */
   constructor(request, calculator) {
     super();
     this.element.classList.add('resource-timing-view');

     this._request = request;
     this._calculator = calculator;
   }

   /**
    * @param {!RequestTimeRangeNames} name
    * @return {string}
    */
   static _timeRangeTitle(name) {
     switch (name) {
       case RequestTimeRangeNames.Push:
         return Common.UIString('Receiving Push');
       case RequestTimeRangeNames.Queueing:
         return Common.UIString('Queueing');
       case RequestTimeRangeNames.Blocking:
         return Common.UIString('Stalled');
       case RequestTimeRangeNames.Connecting:
         return Common.UIString('Initial connection');
       case RequestTimeRangeNames.DNS:
         return Common.UIString('DNS Lookup');
       case RequestTimeRangeNames.Proxy:
         return Common.UIString('Proxy negotiation');
       case RequestTimeRangeNames.ReceivingPush:
         return Common.UIString('Reading Push');
       case RequestTimeRangeNames.Receiving:
         return Common.UIString('Content Download');
       case RequestTimeRangeNames.Sending:
         return Common.UIString('Request sent');
       case RequestTimeRangeNames.ServiceWorker:
         return Common.UIString('Request to ServiceWorker');
       case RequestTimeRangeNames.ServiceWorkerPreparation:
         return Common.UIString('ServiceWorker Preparation');
       case RequestTimeRangeNames.SSL:
         return Common.UIString('SSL');
       case RequestTimeRangeNames.Total:
         return Common.UIString('Total');
       case RequestTimeRangeNames.Waiting:
         return Common.UIString('Waiting (TTFB)');
       default:
         return Common.UIString(name);
     }
   }

   /**
    * @param {!SDK.NetworkRequest} request
    * @param {number} navigationStart
    * @return {!Array.<!Network.RequestTimeRange>}
    */
   static calculateRequestTimeRanges(request, navigationStart) {
     const result = [];
     /**
      * @param {!RequestTimeRangeNames} name
      * @param {number} start
      * @param {number} end
      */
     function addRange(name, start, end) {
       if (start < Number.MAX_VALUE && start <= end) {
         result.push({name: name, start: start, end: end});
       }
     }

     /**
      * @param {!Array.<number>} numbers
      * @return {number|undefined}
      */
     function firstPositive(numbers) {
       for (let i = 0; i < numbers.length; ++i) {
         if (numbers[i] > 0) {
           return numbers[i];
         }
       }
       return undefined;
     }

     /**
      * @param {!RequestTimeRangeNames} name
      * @param {number} start
      * @param {number} end
      */
     function addOffsetRange(name, start, end) {
       if (start >= 0 && end >= 0) {
         addRange(name, startTime + (start / 1000), startTime + (end / 1000));
       }
     }

     const timing = request.timing;
     if (!timing) {
       const start = request.issueTime() !== -1 ? request.issueTime() : request.startTime !== -1 ? request.startTime : 0;
       const middle = (request.responseReceivedTime === -1) ? Number.MAX_VALUE : request.responseReceivedTime;
       const end = (request.endTime === -1) ? Number.MAX_VALUE : request.endTime;
       addRange(RequestTimeRangeNames.Total, start, end);
       addRange(RequestTimeRangeNames.Blocking, start, middle);
       addRange(RequestTimeRangeNames.Receiving, middle, end);
       return result;
     }

     const issueTime = request.issueTime();
     const startTime = timing.requestTime;
     const endTime = firstPositive([request.endTime, request.responseReceivedTime]) || startTime;

     addRange(RequestTimeRangeNames.Total, issueTime < startTime ? issueTime : startTime, endTime);
     if (timing.pushStart) {
       const pushEnd = timing.pushEnd || endTime;
       // Only show the part of push that happened after the navigation/reload.
       // Pushes that happened on the same connection before we started main request will not be shown.
       if (pushEnd > navigationStart) {
         addRange(RequestTimeRangeNames.Push, Math.max(timing.pushStart, navigationStart), pushEnd);
       }
     }
     if (issueTime < startTime) {
       addRange(RequestTimeRangeNames.Queueing, issueTime, startTime);
     }

     const responseReceived = (request.responseReceivedTime - startTime) * 1000;
     if (request.fetchedViaServiceWorker) {
       addOffsetRange(RequestTimeRangeNames.Blocking, 0, timing.workerStart);
       addOffsetRange(RequestTimeRangeNames.ServiceWorkerPreparation, timing.workerStart, timing.workerReady);
       addOffsetRange(RequestTimeRangeNames.ServiceWorker, timing.workerReady, timing.sendEnd);
       addOffsetRange(RequestTimeRangeNames.Waiting, timing.sendEnd, responseReceived);
     } else if (!timing.pushStart) {
       const blockingEnd =
           firstPositive([timing.dnsStart, timing.connectStart, timing.sendStart, responseReceived]) || 0;
       addOffsetRange(RequestTimeRangeNames.Blocking, 0, blockingEnd);
       addOffsetRange(RequestTimeRangeNames.Proxy, timing.proxyStart, timing.proxyEnd);
       addOffsetRange(RequestTimeRangeNames.DNS, timing.dnsStart, timing.dnsEnd);
       addOffsetRange(RequestTimeRangeNames.Connecting, timing.connectStart, timing.connectEnd);
       addOffsetRange(RequestTimeRangeNames.SSL, timing.sslStart, timing.sslEnd);
       addOffsetRange(RequestTimeRangeNames.Sending, timing.sendStart, timing.sendEnd);
       addOffsetRange(
           RequestTimeRangeNames.Waiting,
           Math.max(timing.sendEnd, timing.connectEnd, timing.dnsEnd, timing.proxyEnd, blockingEnd), responseReceived);
     }

     if (request.endTime !== -1) {
       addRange(
           timing.pushStart ? RequestTimeRangeNames.ReceivingPush : RequestTimeRangeNames.Receiving,
           request.responseReceivedTime, endTime);
     }

     return result;
   }

   /**
    * @param {!SDK.NetworkRequest} request
    * @param {!Network.NetworkTimeCalculator} calculator
    * @return {!Element}
    */
   static createTimingTable(request, calculator) {
     const tableElement = createElementWithClass('table', 'network-timing-table');
     UI.appendStyle(tableElement, 'network/networkTimingTable.css');
     const colgroup = tableElement.createChild('colgroup');
     colgroup.createChild('col', 'labels');
     colgroup.createChild('col', 'bars');
     colgroup.createChild('col', 'duration');

     const timeRanges = RequestTimingView.calculateRequestTimeRanges(request, calculator.minimumBoundary());
     const startTime = timeRanges.map(r => r.start).reduce((a, b) => Math.min(a, b));
     const endTime = timeRanges.map(r => r.end).reduce((a, b) => Math.max(a, b));
     const scale = 100 / (endTime - startTime);

     let connectionHeader;
     let dataHeader;
     let queueingHeader;
     let totalDuration = 0;

     const startTimeHeader = tableElement.createChild('thead', 'network-timing-start');
     const tableHeaderRow = startTimeHeader.createChild('tr');
     const activityHeaderCell = tableHeaderRow.createChild('th');
     activityHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = ls`Label`;
     activityHeaderCell.scope = 'col';
     const waterfallHeaderCell = tableHeaderRow.createChild('th');
     waterfallHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = ls`Waterfall`;
     waterfallHeaderCell.scope = 'col';
     const durationHeaderCell = tableHeaderRow.createChild('th');
     durationHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = ls`Duration`;
     durationHeaderCell.scope = 'col';

     const queuedCell = startTimeHeader.createChild('tr').createChild('td');
     const startedCell = startTimeHeader.createChild('tr').createChild('td');
     queuedCell.colSpan = startedCell.colSpan = 3;
     queuedCell.createTextChild(Common.UIString('Queued at %s', calculator.formatValue(request.issueTime(), 2)));
     startedCell.createTextChild(Common.UIString('Started at %s', calculator.formatValue(request.startTime, 2)));

     let right;
     for (let i = 0; i < timeRanges.length; ++i) {
       const range = timeRanges[i];
       const rangeName = range.name;
       if (rangeName === RequestTimeRangeNames.Total) {
         totalDuration = range.end - range.start;
         continue;
       }
       if (rangeName === RequestTimeRangeNames.Push) {
         createHeader(Common.UIString('Server Push'));
       } else if (rangeName === RequestTimeRangeNames.Queueing) {
         if (!queueingHeader) {
           queueingHeader = createHeader(ls`Resource Scheduling`);
         }
       } else if (ConnectionSetupRangeNames.has(rangeName)) {
         if (!connectionHeader) {
           connectionHeader = createHeader(Common.UIString('Connection Start'));
         }
       } else {
         if (!dataHeader) {
           dataHeader = createHeader(Common.UIString('Request/Response'));
         }
       }

       const left = (scale * (range.start - startTime));
       right = (scale * (endTime - range.end));
       const duration = range.end - range.start;

       const tr = tableElement.createChild('tr');
       tr.createChild('td').createTextChild(RequestTimingView._timeRangeTitle(rangeName));

       const row = tr.createChild('td').createChild('div', 'network-timing-row');
       const bar = row.createChild('span', 'network-timing-bar ' + rangeName);
       bar.style.left = left + '%';
       bar.style.right = right + '%';
       bar.textContent = '\u200B';  // Important for 0-time items to have 0 width.
       UI.ARIAUtils.setAccessibleName(row, ls`Started at ${calculator.formatValue(range.start, 2)}`);
       const label = tr.createChild('td').createChild('div', 'network-timing-bar-title');
       label.textContent = Number.secondsToString(duration, true);
     }

     if (!request.finished) {
       const cell = tableElement.createChild('tr').createChild('td', 'caution');
       cell.colSpan = 3;
       cell.createTextChild(Common.UIString('CAUTION: request is not finished yet!'));
     }

     const footer = tableElement.createChild('tr', 'network-timing-footer');
     const note = footer.createChild('td');
     note.colSpan = 1;
     note.appendChild(
         UI.createDocumentationLink('network-performance/reference#timing-explanation', Common.UIString('Explanation')));
     footer.createChild('td');
     footer.createChild('td').createTextChild(Number.secondsToString(totalDuration, true));

     const serverTimings = request.serverTimings;
     if (!serverTimings) {
       return tableElement;
     }

     const lastTimingRightEdge = right === undefined ? 100 : right;

     const breakElement = tableElement.createChild('tr', 'network-timing-table-header').createChild('td');
     breakElement.colSpan = 3;
     breakElement.createChild('hr', 'break');

     const serverHeader = tableElement.createChild('tr', 'network-timing-table-header');
     serverHeader.createChild('td').createTextChild(Common.UIString('Server Timing'));
     serverHeader.createChild('td');
     serverHeader.createChild('td').createTextChild(Common.UIString('TIME'));

     serverTimings.filter(item => item.metric.toLowerCase() !== 'total')
         .forEach(item => addTiming(item, lastTimingRightEdge));
     serverTimings.filter(item => item.metric.toLowerCase() === 'total')
         .forEach(item => addTiming(item, lastTimingRightEdge));

     return tableElement;

     /**
      * @param {!SDK.ServerTiming} serverTiming
      * @param {number} right
      */
     function addTiming(serverTiming, right) {
       const colorGenerator = new Common.Color.Generator({min: 0, max: 360, count: 36}, {min: 50, max: 80}, 80);
       const isTotal = serverTiming.metric.toLowerCase() === 'total';
       const tr = tableElement.createChild('tr', isTotal ? 'network-timing-footer' : '');
       const metric = tr.createChild('td', 'network-timing-metric');
       const description = serverTiming.description || serverTiming.metric;
       metric.createTextChild(description);
       metric.title = description;
       const row = tr.createChild('td').createChild('div', 'network-timing-row');

       if (serverTiming.value === null) {
         return;
       }
       const left = scale * (endTime - startTime - (serverTiming.value / 1000));
       if (left >= 0) {  // don't chart values too big or too small
         const bar = row.createChild('span', 'network-timing-bar server-timing');
         bar.style.left = left + '%';
         bar.style.right = right + '%';
         bar.textContent = '\u200B';  // Important for 0-time items to have 0 width.
         if (!isTotal) {
           bar.style.backgroundColor = colorGenerator.colorForID(serverTiming.metric);
         }
       }
       const label = tr.createChild('td').createChild('div', 'network-timing-bar-title');
       label.textContent = Number.millisToString(serverTiming.value, true);
     }

     /**
      * @param {string} title
      * @return {!Element}
      */
     function createHeader(title) {
       const dataHeader = tableElement.createChild('tr', 'network-timing-table-header');
       const headerCell = dataHeader.createChild('td');
       headerCell.createTextChild(title);
       UI.ARIAUtils.markAsHeading(headerCell, 2);
       dataHeader.createChild('td').createTextChild('');
       dataHeader.createChild('td').createTextChild(ls`DURATION`);
       return dataHeader;
     }
   }

   /**
    * @override
    */
   wasShown() {
     this._request.addEventListener(SDK.NetworkRequest.Events.TimingChanged, this._refresh, this);
     this._request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this._refresh, this);
     this._calculator.addEventListener(Network.NetworkTimeCalculator.Events.BoundariesChanged, this._refresh, this);
     this._refresh();
   }

   /**
    * @override
    */
   willHide() {
     this._request.removeEventListener(SDK.NetworkRequest.Events.TimingChanged, this._refresh, this);
     this._request.removeEventListener(SDK.NetworkRequest.Events.FinishedLoading, this._refresh, this);
     this._calculator.removeEventListener(Network.NetworkTimeCalculator.Events.BoundariesChanged, this._refresh, this);
   }

   _refresh() {
     if (this._tableElement) {
       this._tableElement.remove();
     }

     this._tableElement = RequestTimingView.createTimingTable(this._request, this._calculator);
     this._tableElement.classList.add('resource-timing-table');
     this.element.appendChild(this._tableElement);
   }
 }

 /** @enum {string} */
 export const RequestTimeRangeNames = {
   Push: 'push',
   Queueing: 'queueing',
   Blocking: 'blocking',
   Connecting: 'connecting',
   DNS: 'dns',
   Proxy: 'proxy',
   Receiving: 'receiving',
   ReceivingPush: 'receiving-push',
   Sending: 'sending',
   ServiceWorker: 'serviceworker',
   ServiceWorkerPreparation: 'serviceworker-preparation',
   SSL: 'ssl',
   Total: 'total',
   Waiting: 'waiting'
 };

 export const ConnectionSetupRangeNames = new Set([
   RequestTimeRangeNames.Queueing, RequestTimeRangeNames.Blocking, RequestTimeRangeNames.Connecting,
   RequestTimeRangeNames.DNS, RequestTimeRangeNames.Proxy, RequestTimeRangeNames.SSL
 ]);

 /* Legacy exported object */
 self.Network = self.Network || {};

 /* Legacy exported object */
 Network = Network || {};

 /** @typedef {{name: !RequestTimeRangeNames, start: number, end: number}} */
 Network.RequestTimeRange;

 /**
  * @constructor
  */
 Network.RequestTimingView = RequestTimingView;
 Network.RequestTimingView.ConnectionSetupRangeNames = ConnectionSetupRangeNames;

 /** @enum {string} */
 Network.RequestTimeRangeNames = RequestTimeRangeNames;
	/*
	* Copyright (C) 2010 Google Inc. All rights reserved.
	*
	* Redistribution and use in source and binary forms, with or without
	* modification, are permitted provided that the following conditions are
	* met:
	*
	* * Redistributions of source code must retain the above copyright
	* notice, this list of conditions and the following disclaimer.
	* * Redistributions in binary form must reproduce the above
	* copyright notice, this list of conditions and the following disclaimer
	* in the documentation and/or other materials provided with the
	* distribution.
	* * Neither the name of Google Inc. nor the names of its
	* contributors may be used to endorse or promote products derived from
	* this software without specific prior written permission.
	*
	* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
	* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
	* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
	* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
	* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
	* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
	* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
	* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
	* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
	* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
	* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
	*/

	/**
	* @unrestricted
	*/
	export default class RequestTimingView extends UI.VBox {
	/**
	* @param {!SDK.NetworkRequest} request
	* @param {!Network.NetworkTimeCalculator} calculator
	*/
	constructor(request, calculator) {
	super();
	this.element.classList.add('resource-timing-view');

	this._request = request;
	this._calculator = calculator;
	}

	/**
	* @param {!RequestTimeRangeNames} name
	* @return {string}
	*/
	static _timeRangeTitle(name) {
	switch (name) {
	case RequestTimeRangeNames.Push:
	return Common.UIString('Receiving Push');
	case RequestTimeRangeNames.Queueing:
	return Common.UIString('Queueing');
	case RequestTimeRangeNames.Blocking:
	return Common.UIString('Stalled');
	case RequestTimeRangeNames.Connecting:
	return Common.UIString('Initial connection');
	case RequestTimeRangeNames.DNS:
	return Common.UIString('DNS Lookup');
	case RequestTimeRangeNames.Proxy:
	return Common.UIString('Proxy negotiation');
	case RequestTimeRangeNames.ReceivingPush:
	return Common.UIString('Reading Push');
	case RequestTimeRangeNames.Receiving:
	return Common.UIString('Content Download');
	case RequestTimeRangeNames.Sending:
	return Common.UIString('Request sent');
	case RequestTimeRangeNames.ServiceWorker:
	return Common.UIString('Request to ServiceWorker');
	case RequestTimeRangeNames.ServiceWorkerPreparation:
	return Common.UIString('ServiceWorker Preparation');
	case RequestTimeRangeNames.SSL:
	return Common.UIString('SSL');
	case RequestTimeRangeNames.Total:
	return Common.UIString('Total');
	case RequestTimeRangeNames.Waiting:
	return Common.UIString('Waiting (TTFB)');
	default:
	return Common.UIString(name);
	}
	}

	/**
	* @param {!SDK.NetworkRequest} request
	* @param {number} navigationStart
	* @return {!Array.<!Network.RequestTimeRange>}
	*/
	static calculateRequestTimeRanges(request, navigationStart) {
	const result = [];
	/**
	* @param {!RequestTimeRangeNames} name
	* @param {number} start
	* @param {number} end
	*/
	function addRange(name, start, end) {
	if (start < Number.MAX_VALUE && start <= end) {
	result.push({name: name, start: start, end: end});
	}
	}

	/**
	* @param {!Array.<number>} numbers
	* @return {number\|undefined}
	*/
	function firstPositive(numbers) {
	for (let i = 0; i < numbers.length; ++i) {
	if (numbers[i] > 0) {
	return numbers[i];
	}
	}
	return undefined;
	}

	/**
	* @param {!RequestTimeRangeNames} name
	* @param {number} start
	* @param {number} end
	*/
	function addOffsetRange(name, start, end) {
	if (start >= 0 && end >= 0) {
	addRange(name, startTime + (start / 1000), startTime + (end / 1000));
	}
	}

	const timing = request.timing;
	if (!timing) {
	const start = request.issueTime() !== -1 ? request.issueTime() : request.startTime !== -1 ? request.startTime : 0;
	const middle = (request.responseReceivedTime === -1) ? Number.MAX_VALUE : request.responseReceivedTime;
	const end = (request.endTime === -1) ? Number.MAX_VALUE : request.endTime;
	addRange(RequestTimeRangeNames.Total, start, end);
	addRange(RequestTimeRangeNames.Blocking, start, middle);
	addRange(RequestTimeRangeNames.Receiving, middle, end);
	return result;
	}

	const issueTime = request.issueTime();
	const startTime = timing.requestTime;
	const endTime = firstPositive([request.endTime, request.responseReceivedTime]) \|\| startTime;

	addRange(RequestTimeRangeNames.Total, issueTime < startTime ? issueTime : startTime, endTime);
	if (timing.pushStart) {
	const pushEnd = timing.pushEnd \|\| endTime;
	// Only show the part of push that happened after the navigation/reload.
	// Pushes that happened on the same connection before we started main request will not be shown.
	if (pushEnd > navigationStart) {
	addRange(RequestTimeRangeNames.Push, Math.max(timing.pushStart, navigationStart), pushEnd);
	}
	}
	if (issueTime < startTime) {
	addRange(RequestTimeRangeNames.Queueing, issueTime, startTime);
	}

	const responseReceived = (request.responseReceivedTime - startTime) * 1000;
	if (request.fetchedViaServiceWorker) {
	addOffsetRange(RequestTimeRangeNames.Blocking, 0, timing.workerStart);
	addOffsetRange(RequestTimeRangeNames.ServiceWorkerPreparation, timing.workerStart, timing.workerReady);
	addOffsetRange(RequestTimeRangeNames.ServiceWorker, timing.workerReady, timing.sendEnd);
	addOffsetRange(RequestTimeRangeNames.Waiting, timing.sendEnd, responseReceived);
	} else if (!timing.pushStart) {
	const blockingEnd =
	firstPositive([timing.dnsStart, timing.connectStart, timing.sendStart, responseReceived]) \|\| 0;
	addOffsetRange(RequestTimeRangeNames.Blocking, 0, blockingEnd);
	addOffsetRange(RequestTimeRangeNames.Proxy, timing.proxyStart, timing.proxyEnd);
	addOffsetRange(RequestTimeRangeNames.DNS, timing.dnsStart, timing.dnsEnd);
	addOffsetRange(RequestTimeRangeNames.Connecting, timing.connectStart, timing.connectEnd);
	addOffsetRange(RequestTimeRangeNames.SSL, timing.sslStart, timing.sslEnd);
	addOffsetRange(RequestTimeRangeNames.Sending, timing.sendStart, timing.sendEnd);
	addOffsetRange(
	RequestTimeRangeNames.Waiting,
	Math.max(timing.sendEnd, timing.connectEnd, timing.dnsEnd, timing.proxyEnd, blockingEnd), responseReceived);
	}

	if (request.endTime !== -1) {
	addRange(
	timing.pushStart ? RequestTimeRangeNames.ReceivingPush : RequestTimeRangeNames.Receiving,
	request.responseReceivedTime, endTime);
	}

	return result;
	}

	/**
	* @param {!SDK.NetworkRequest} request
	* @param {!Network.NetworkTimeCalculator} calculator
	* @return {!Element}
	*/
	static createTimingTable(request, calculator) {
	const tableElement = createElementWithClass('table', 'network-timing-table');
	UI.appendStyle(tableElement, 'network/networkTimingTable.css');
	const colgroup = tableElement.createChild('colgroup');
	colgroup.createChild('col', 'labels');
	colgroup.createChild('col', 'bars');
	colgroup.createChild('col', 'duration');

	const timeRanges = RequestTimingView.calculateRequestTimeRanges(request, calculator.minimumBoundary());
	const startTime = timeRanges.map(r => r.start).reduce((a, b) => Math.min(a, b));
	const endTime = timeRanges.map(r => r.end).reduce((a, b) => Math.max(a, b));
	const scale = 100 / (endTime - startTime);

	let connectionHeader;
	let dataHeader;
	let queueingHeader;
	let totalDuration = 0;

	const startTimeHeader = tableElement.createChild('thead', 'network-timing-start');
	const tableHeaderRow = startTimeHeader.createChild('tr');
	const activityHeaderCell = tableHeaderRow.createChild('th');
	activityHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = ls`Label`;
	activityHeaderCell.scope = 'col';
	const waterfallHeaderCell = tableHeaderRow.createChild('th');
	waterfallHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = ls`Waterfall`;
	waterfallHeaderCell.scope = 'col';
	const durationHeaderCell = tableHeaderRow.createChild('th');
	durationHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = ls`Duration`;
	durationHeaderCell.scope = 'col';

	const queuedCell = startTimeHeader.createChild('tr').createChild('td');
	const startedCell = startTimeHeader.createChild('tr').createChild('td');
	queuedCell.colSpan = startedCell.colSpan = 3;
	queuedCell.createTextChild(Common.UIString('Queued at %s', calculator.formatValue(request.issueTime(), 2)));
	startedCell.createTextChild(Common.UIString('Started at %s', calculator.formatValue(request.startTime, 2)));

	let right;
	for (let i = 0; i < timeRanges.length; ++i) {
	const range = timeRanges[i];
	const rangeName = range.name;
	if (rangeName === RequestTimeRangeNames.Total) {
	totalDuration = range.end - range.start;
	continue;
	}
	if (rangeName === RequestTimeRangeNames.Push) {
	createHeader(Common.UIString('Server Push'));
	} else if (rangeName === RequestTimeRangeNames.Queueing) {
	if (!queueingHeader) {
	queueingHeader = createHeader(ls`Resource Scheduling`);
	}
	} else if (ConnectionSetupRangeNames.has(rangeName)) {
	if (!connectionHeader) {
	connectionHeader = createHeader(Common.UIString('Connection Start'));
	}
	} else {
	if (!dataHeader) {
	dataHeader = createHeader(Common.UIString('Request/Response'));
	}
	}

	const left = (scale * (range.start - startTime));
	right = (scale * (endTime - range.end));
	const duration = range.end - range.start;

	const tr = tableElement.createChild('tr');
	tr.createChild('td').createTextChild(RequestTimingView._timeRangeTitle(rangeName));

	const row = tr.createChild('td').createChild('div', 'network-timing-row');
	const bar = row.createChild('span', 'network-timing-bar ' + rangeName);
	bar.style.left = left + '%';
	bar.style.right = right + '%';
	bar.textContent = '\u200B'; // Important for 0-time items to have 0 width.
	UI.ARIAUtils.setAccessibleName(row, ls`Started at ${calculator.formatValue(range.start, 2)}`);
	const label = tr.createChild('td').createChild('div', 'network-timing-bar-title');
	label.textContent = Number.secondsToString(duration, true);
	}

	if (!request.finished) {
	const cell = tableElement.createChild('tr').createChild('td', 'caution');
	cell.colSpan = 3;
	cell.createTextChild(Common.UIString('CAUTION: request is not finished yet!'));
	}

	const footer = tableElement.createChild('tr', 'network-timing-footer');
	const note = footer.createChild('td');
	note.colSpan = 1;
	note.appendChild(
	UI.createDocumentationLink('network-performance/reference#timing-explanation', Common.UIString('Explanation')));
	footer.createChild('td');
	footer.createChild('td').createTextChild(Number.secondsToString(totalDuration, true));

	const serverTimings = request.serverTimings;
	if (!serverTimings) {
	return tableElement;
	}

	const lastTimingRightEdge = right === undefined ? 100 : right;

	const breakElement = tableElement.createChild('tr', 'network-timing-table-header').createChild('td');
	breakElement.colSpan = 3;
	breakElement.createChild('hr', 'break');

	const serverHeader = tableElement.createChild('tr', 'network-timing-table-header');
	serverHeader.createChild('td').createTextChild(Common.UIString('Server Timing'));
	serverHeader.createChild('td');
	serverHeader.createChild('td').createTextChild(Common.UIString('TIME'));

	serverTimings.filter(item => item.metric.toLowerCase() !== 'total')
	.forEach(item => addTiming(item, lastTimingRightEdge));
	serverTimings.filter(item => item.metric.toLowerCase() === 'total')
	.forEach(item => addTiming(item, lastTimingRightEdge));

	return tableElement;

	/**
	* @param {!SDK.ServerTiming} serverTiming
	* @param {number} right
	*/
	function addTiming(serverTiming, right) {
	const colorGenerator = new Common.Color.Generator({min: 0, max: 360, count: 36}, {min: 50, max: 80}, 80);
	const isTotal = serverTiming.metric.toLowerCase() === 'total';
	const tr = tableElement.createChild('tr', isTotal ? 'network-timing-footer' : '');
	const metric = tr.createChild('td', 'network-timing-metric');
	const description = serverTiming.description \|\| serverTiming.metric;
	metric.createTextChild(description);
	metric.title = description;
	const row = tr.createChild('td').createChild('div', 'network-timing-row');

	if (serverTiming.value === null) {
	return;
	}
	const left = scale * (endTime - startTime - (serverTiming.value / 1000));
	if (left >= 0) { // don't chart values too big or too small
	const bar = row.createChild('span', 'network-timing-bar server-timing');
	bar.style.left = left + '%';
	bar.style.right = right + '%';
	bar.textContent = '\u200B'; // Important for 0-time items to have 0 width.
	if (!isTotal) {
	bar.style.backgroundColor = colorGenerator.colorForID(serverTiming.metric);
	}
	}
	const label = tr.createChild('td').createChild('div', 'network-timing-bar-title');
	label.textContent = Number.millisToString(serverTiming.value, true);
	}

	/**
	* @param {string} title
	* @return {!Element}
	*/
	function createHeader(title) {
	const dataHeader = tableElement.createChild('tr', 'network-timing-table-header');
	const headerCell = dataHeader.createChild('td');
	headerCell.createTextChild(title);
	UI.ARIAUtils.markAsHeading(headerCell, 2);
	dataHeader.createChild('td').createTextChild('');
	dataHeader.createChild('td').createTextChild(ls`DURATION`);
	return dataHeader;
	}
	}

	/**
	* @override
	*/
	wasShown() {
	this._request.addEventListener(SDK.NetworkRequest.Events.TimingChanged, this._refresh, this);
	this._request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this._refresh, this);
	this._calculator.addEventListener(Network.NetworkTimeCalculator.Events.BoundariesChanged, this._refresh, this);
	this._refresh();
	}

	/**
	* @override
	*/
	willHide() {
	this._request.removeEventListener(SDK.NetworkRequest.Events.TimingChanged, this._refresh, this);
	this._request.removeEventListener(SDK.NetworkRequest.Events.FinishedLoading, this._refresh, this);
	this._calculator.removeEventListener(Network.NetworkTimeCalculator.Events.BoundariesChanged, this._refresh, this);
	}

	_refresh() {
	if (this._tableElement) {
	this._tableElement.remove();
	}

	this._tableElement = RequestTimingView.createTimingTable(this._request, this._calculator);
	this._tableElement.classList.add('resource-timing-table');
	this.element.appendChild(this._tableElement);
	}
	}

	/** @enum {string} */
	export const RequestTimeRangeNames = {
	Push: 'push',
	Queueing: 'queueing',
	Blocking: 'blocking',
	Connecting: 'connecting',
	DNS: 'dns',
	Proxy: 'proxy',
	Receiving: 'receiving',
	ReceivingPush: 'receiving-push',
	Sending: 'sending',
	ServiceWorker: 'serviceworker',
	ServiceWorkerPreparation: 'serviceworker-preparation',
	SSL: 'ssl',
	Total: 'total',
	Waiting: 'waiting'
	};

	export const ConnectionSetupRangeNames = new Set([
	RequestTimeRangeNames.Queueing, RequestTimeRangeNames.Blocking, RequestTimeRangeNames.Connecting,
	RequestTimeRangeNames.DNS, RequestTimeRangeNames.Proxy, RequestTimeRangeNames.SSL
	]);

	/* Legacy exported object */
	self.Network = self.Network \|\| {};

	/* Legacy exported object */
	Network = Network \|\| {};

	/** @typedef {{name: !RequestTimeRangeNames, start: number, end: number}} */
	Network.RequestTimeRange;

	/**
	* @constructor
	*/
	Network.RequestTimingView = RequestTimingView;
	Network.RequestTimingView.ConnectionSetupRangeNames = ConnectionSetupRangeNames;

	/** @enum {string} */
	Network.RequestTimeRangeNames = RequestTimeRangeNames;