Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineNetworkFlameChart.js |
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineNetworkFlameChart.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineNetworkFlameChart.js |
deleted file mode 100644 |
index 0facabeb5ace7bad68321786650cb39d1f321472..0000000000000000000000000000000000000000 |
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineNetworkFlameChart.js |
+++ /dev/null |
@@ -1,402 +0,0 @@ |
-// Copyright 2016 The Chromium Authors. All rights reserved. |
-// Use of this source code is governed by a BSD-style license that can be |
-// found in the LICENSE file. |
- |
-/** |
- * @implements {PerfUI.FlameChartDataProvider} |
- * @unrestricted |
- */ |
-Timeline.TimelineFlameChartNetworkDataProvider = class { |
- constructor() { |
- this._font = '11px ' + Host.fontFamily(); |
- this.setModel(null); |
- this._style = { |
- padding: 4, |
- height: 17, |
- collapsible: true, |
- color: UI.themeSupport.patchColor('#222', UI.ThemeSupport.ColorUsage.Foreground), |
- font: this._font, |
- backgroundColor: UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background), |
- nestingLevel: 0, |
- useFirstLineForOverview: false, |
- useDecoratorsForOverview: true, |
- shareHeaderLine: false |
- }; |
- this._group = {startLevel: 0, name: Common.UIString('Network'), expanded: false, style: this._style}; |
- } |
- |
- /** |
- * @param {?Timeline.PerformanceModel} performanceModel |
- */ |
- setModel(performanceModel) { |
- this._model = performanceModel && performanceModel.timelineModel(); |
- this._maxLevel = 0; |
- this._timelineData = null; |
- /** @type {!Array<!TimelineModel.TimelineModel.NetworkRequest>} */ |
- this._requests = []; |
- } |
- |
- /** |
- * @return {boolean} |
- */ |
- isEmpty() { |
- this.timelineData(); |
- return !this._requests.length; |
- } |
- |
- /** |
- * @override |
- * @return {number} |
- */ |
- maxStackDepth() { |
- return this._maxLevel; |
- } |
- |
- /** |
- * @override |
- * @return {!PerfUI.FlameChart.TimelineData} |
- */ |
- timelineData() { |
- if (this._timelineData) |
- return this._timelineData; |
- /** @type {!Array<!TimelineModel.TimelineModel.NetworkRequest>} */ |
- this._requests = []; |
- this._timelineData = new PerfUI.FlameChart.TimelineData([], [], [], []); |
- if (this._model) |
- this._appendTimelineData(this._model.mainThreadEvents()); |
- return this._timelineData; |
- } |
- |
- /** |
- * @override |
- * @return {number} |
- */ |
- minimumBoundary() { |
- return this._minimumBoundary; |
- } |
- |
- /** |
- * @override |
- * @return {number} |
- */ |
- totalTime() { |
- return this._timeSpan; |
- } |
- |
- /** |
- * @param {number} startTime |
- * @param {number} endTime |
- */ |
- setWindowTimes(startTime, endTime) { |
- this._startTime = startTime; |
- this._endTime = endTime; |
- this._updateTimelineData(); |
- } |
- |
- /** |
- * @param {number} index |
- * @return {?Timeline.TimelineSelection} |
- */ |
- createSelection(index) { |
- if (index === -1) |
- return null; |
- var request = this._requests[index]; |
- this._lastSelection = |
- new Timeline.TimelineFlameChartView.Selection(Timeline.TimelineSelection.fromNetworkRequest(request), index); |
- return this._lastSelection.timelineSelection; |
- } |
- |
- /** |
- * @param {?Timeline.TimelineSelection} selection |
- * @return {number} |
- */ |
- entryIndexForSelection(selection) { |
- if (!selection) |
- return -1; |
- |
- if (this._lastSelection && this._lastSelection.timelineSelection.object() === selection.object()) |
- return this._lastSelection.entryIndex; |
- |
- if (selection.type() !== Timeline.TimelineSelection.Type.NetworkRequest) |
- return -1; |
- var request = /** @type{!TimelineModel.TimelineModel.NetworkRequest} */ (selection.object()); |
- var index = this._requests.indexOf(request); |
- if (index !== -1) { |
- this._lastSelection = |
- new Timeline.TimelineFlameChartView.Selection(Timeline.TimelineSelection.fromNetworkRequest(request), index); |
- } |
- return index; |
- } |
- |
- /** |
- * @override |
- * @param {number} index |
- * @return {string} |
- */ |
- entryColor(index) { |
- var request = /** @type {!TimelineModel.TimelineModel.NetworkRequest} */ (this._requests[index]); |
- var category = Timeline.TimelineUIUtils.networkRequestCategory(request); |
- return Timeline.TimelineUIUtils.networkCategoryColor(category); |
- } |
- |
- /** |
- * @override |
- * @param {number} index |
- * @return {string} |
- */ |
- textColor(index) { |
- return Timeline.FlameChartStyle.textColor; |
- } |
- |
- /** |
- * @override |
- * @param {number} index |
- * @return {?string} |
- */ |
- entryTitle(index) { |
- var request = /** @type {!TimelineModel.TimelineModel.NetworkRequest} */ (this._requests[index]); |
- var parsedURL = new Common.ParsedURL(request.url || ''); |
- return parsedURL.isValid ? `${parsedURL.displayName} (${parsedURL.host})` : request.url || null; |
- } |
- |
- /** |
- * @override |
- * @param {number} index |
- * @return {?string} |
- */ |
- entryFont(index) { |
- return this._font; |
- } |
- |
- /** |
- * @override |
- * @param {number} index |
- * @param {!CanvasRenderingContext2D} context |
- * @param {?string} text |
- * @param {number} barX |
- * @param {number} barY |
- * @param {number} barWidth |
- * @param {number} barHeight |
- * @param {number} unclippedBarX |
- * @param {number} timeToPixelRatio |
- * @return {boolean} |
- */ |
- decorateEntry(index, context, text, barX, barY, barWidth, barHeight, unclippedBarX, timeToPixelRatio) { |
- var request = /** @type {!TimelineModel.TimelineModel.NetworkRequest} */ (this._requests[index]); |
- if (!request.timing) |
- return false; |
- |
- /** |
- * @param {number} time |
- * @return {number} |
- */ |
- function timeToPixel(time) { |
- return Math.floor(unclippedBarX + (time - startTime) * timeToPixelRatio); |
- } |
- |
- var /** @const */ minBarWidthPx = 2; |
- var startTime = request.startTime; |
- var endTime = request.endTime; |
- var requestTime = request.timing.requestTime * 1000; |
- var sendStart = Math.max(timeToPixel(requestTime + request.timing.sendStart), unclippedBarX); |
- var headersEnd = Math.max(timeToPixel(requestTime + request.timing.receiveHeadersEnd), sendStart); |
- var finish = Math.max(timeToPixel(request.finishTime || endTime), headersEnd + minBarWidthPx); |
- var end = Math.max(timeToPixel(endTime), finish); |
- |
- context.fillStyle = 'hsla(0, 100%, 100%, 0.8)'; |
- context.fillRect(sendStart + 0.5, barY + 0.5, headersEnd - sendStart - 0.5, barHeight - 2); |
- context.fillStyle = UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background); |
- context.fillRect(barX, barY - 0.5, sendStart - barX, barHeight); |
- context.fillRect(finish, barY - 0.5, barX + barWidth - finish, barHeight); |
- |
- /** |
- * @param {number} begin |
- * @param {number} end |
- * @param {number} y |
- */ |
- function drawTick(begin, end, y) { |
- var /** @const */ tickHeightPx = 6; |
- context.moveTo(begin, y - tickHeightPx / 2); |
- context.lineTo(begin, y + tickHeightPx / 2); |
- context.moveTo(begin, y); |
- context.lineTo(end, y); |
- } |
- |
- context.lineWidth = 1; |
- context.strokeStyle = '#ccc'; |
- var lineY = Math.floor(barY + barHeight / 2) + 0.5; |
- var leftTick = Math.floor(unclippedBarX) + 0.5; |
- var rightTick = end - 0.5; |
- drawTick(leftTick, sendStart, lineY); |
- drawTick(rightTick, finish, lineY); |
- context.stroke(); |
- |
- if (typeof request.priority === 'string') { |
- var color = this._colorForPriority(request.priority); |
- if (color) { |
- context.fillStyle = color; |
- context.fillRect(sendStart + 0.5, barY + 0.5, 3.5, 3.5); |
- } |
- } |
- |
- var textStart = Math.max(sendStart, 0); |
- var textWidth = finish - textStart; |
- var /** @const */ minTextWidthPx = 20; |
- if (textWidth >= minTextWidthPx) { |
- text = this.entryTitle(index) || ''; |
- if (request.fromServiceWorker) |
- text = '⚙ ' + text; |
- if (text) { |
- var /** @const */ textPadding = 4; |
- var /** @const */ textBaseline = 5; |
- var textBaseHeight = barHeight - textBaseline; |
- var trimmedText = UI.trimTextEnd(context, text, textWidth - 2 * textPadding); |
- context.fillStyle = '#333'; |
- context.fillText(trimmedText, textStart + textPadding, barY + textBaseHeight); |
- } |
- } |
- |
- return true; |
- } |
- |
- /** |
- * @override |
- * @param {number} index |
- * @return {boolean} |
- */ |
- forceDecoration(index) { |
- return true; |
- } |
- |
- /** |
- * @override |
- * @param {number} index |
- * @return {?Element} |
- */ |
- prepareHighlightedEntryInfo(index) { |
- var /** @const */ maxURLChars = 80; |
- var request = /** @type {!TimelineModel.TimelineModel.NetworkRequest} */ (this._requests[index]); |
- if (!request.url) |
- return null; |
- var element = createElement('div'); |
- var root = UI.createShadowRootWithCoreStyles(element, 'timeline/timelineFlamechartPopover.css'); |
- var contents = root.createChild('div', 'timeline-flamechart-popover'); |
- var duration = request.endTime - request.startTime; |
- if (request.startTime && isFinite(duration)) |
- contents.createChild('span', 'timeline-info-network-time').textContent = Number.millisToString(duration); |
- if (typeof request.priority === 'string') { |
- var div = contents.createChild('span'); |
- div.textContent = |
- NetworkConditions.uiLabelForPriority(/** @type {!Protocol.Network.ResourcePriority} */ (request.priority)); |
- div.style.color = this._colorForPriority(request.priority) || 'black'; |
- } |
- contents.createChild('span').textContent = request.url.trimMiddle(maxURLChars); |
- return element; |
- } |
- |
- /** |
- * @override |
- * @param {number} entryIndex |
- */ |
- highlightEntry(entryIndex) { |
- } |
- |
- /** |
- * @param {string} priority |
- * @return {?string} |
- */ |
- _colorForPriority(priority) { |
- if (!this._priorityToValue) { |
- var priorities = Protocol.Network.ResourcePriority; |
- this._priorityToValue = new Map([ |
- [priorities.VeryLow, 1], [priorities.Low, 2], [priorities.Medium, 3], [priorities.High, 4], |
- [priorities.VeryHigh, 5] |
- ]); |
- } |
- var value = this._priorityToValue.get(priority); |
- return value ? `hsla(214, 80%, 50%, ${value / 5})` : null; |
- } |
- |
- /** |
- * @param {!Array.<!SDK.TracingModel.Event>} events |
- */ |
- _appendTimelineData(events) { |
- this._minimumBoundary = this._model.minimumRecordTime(); |
- this._maximumBoundary = this._model.maximumRecordTime(); |
- this._timeSpan = this._model.isEmpty() ? 1000 : this._maximumBoundary - this._minimumBoundary; |
- this._model.networkRequests().forEach(this._appendEntry.bind(this)); |
- this._updateTimelineData(); |
- } |
- |
- _updateTimelineData() { |
- if (!this._timelineData) |
- return; |
- var lastTimeByLevel = []; |
- var maxLevel = 0; |
- for (var i = 0; i < this._requests.length; ++i) { |
- var r = this._requests[i]; |
- var visible = r.startTime < this._endTime && r.endTime > this._startTime; |
- if (!visible) { |
- this._timelineData.entryLevels[i] = -1; |
- continue; |
- } |
- while (lastTimeByLevel.length && lastTimeByLevel.peekLast() <= r.startTime) |
- lastTimeByLevel.pop(); |
- this._timelineData.entryLevels[i] = lastTimeByLevel.length; |
- lastTimeByLevel.push(r.endTime); |
- maxLevel = Math.max(maxLevel, lastTimeByLevel.length); |
- } |
- for (var i = 0; i < this._requests.length; ++i) { |
- if (this._timelineData.entryLevels[i] === -1) |
- this._timelineData.entryLevels[i] = maxLevel; |
- } |
- this._timelineData = new PerfUI.FlameChart.TimelineData( |
- this._timelineData.entryLevels, this._timelineData.entryTotalTimes, this._timelineData.entryStartTimes, |
- [this._group]); |
- this._maxLevel = maxLevel; |
- } |
- |
- |
- /** |
- * @param {!TimelineModel.TimelineModel.NetworkRequest} request |
- */ |
- _appendEntry(request) { |
- this._requests.push(request); |
- this._timelineData.entryStartTimes.push(request.startTime); |
- this._timelineData.entryTotalTimes.push(request.endTime - request.startTime); |
- this._timelineData.entryLevels.push(this._requests.length - 1); |
- } |
- |
- /** |
- * @return {number} |
- */ |
- preferredHeight() { |
- return this._style.height * (this._group.expanded ? Number.constrain(this._maxLevel + 1, 4, 8.5) : 1); |
- } |
- |
- /** |
- * @return {boolean} |
- */ |
- isExpanded() { |
- return this._group.expanded; |
- } |
- |
- /** |
- * @override |
- * @param {number} value |
- * @param {number=} precision |
- * @return {string} |
- */ |
- formatValue(value, precision) { |
- return Number.preciseMillisToString(value, precision); |
- } |
- |
- /** |
- * @override |
- * @param {number} entryIndex |
- * @return {boolean} |
- */ |
- canJumpToEntry(entryIndex) { |
- return false; |
- } |
-}; |