Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(829)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/Source/devtools/front_end/network/NetworkOverview.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/network/NetworkManageCustomHeadersView.js ('k') | third_party/WebKit/Source/devtools/front_end/network/NetworkPanel.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/Source/devtools/front_end/network/NetworkOverview.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/NetworkOverview.js b/third_party/WebKit/Source/devtools/front_end/network/NetworkOverview.js
index 22d79e514ed017b5aff9505705cc579ba4456bef..c57796d8f9fef7d37356761fa21f1bbbcf0026df 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkOverview.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkOverview.js
@@ -1,15 +1,13 @@
// Copyright 2015 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.
-
/**
- * @constructor
- * @extends {WebInspector.TimelineOverviewBase}
+ * @unrestricted
*/
-WebInspector.NetworkOverview = function()
-{
- WebInspector.TimelineOverviewBase.call(this);
- this.element.classList.add("network-overview");
+WebInspector.NetworkOverview = class extends WebInspector.TimelineOverviewBase {
+ constructor() {
+ super();
+ this.element.classList.add('network-overview');
/** @type {number} */
this._numBands = 1;
@@ -26,287 +24,276 @@ WebInspector.NetworkOverview = function()
/** @type {number} */
this._canvasHeight = 0;
- WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.Events.Load, this._loadEventFired, this);
- WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.Events.DOMContentLoaded, this._domContentLoadedEventFired, this);
+ WebInspector.targetManager.addModelListener(
+ WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.Events.Load, this._loadEventFired, this);
+ WebInspector.targetManager.addModelListener(
+ WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.Events.DOMContentLoaded,
+ this._domContentLoadedEventFired, this);
this.reset();
-};
+ }
-/** @type {number} */
-WebInspector.NetworkOverview._bandHeight = 3;
+ /**
+ * @param {?WebInspector.FilmStripModel} filmStripModel
+ */
+ setFilmStripModel(filmStripModel) {
+ this._filmStripModel = filmStripModel;
+ this.scheduleUpdate();
+ }
-/** @typedef {{start: number, end: number}} */
-WebInspector.NetworkOverview.Window;
+ /**
+ * @param {number} time
+ */
+ selectFilmStripFrame(time) {
+ this._selectedFilmStripTime = time;
+ this.scheduleUpdate();
+ }
-WebInspector.NetworkOverview.prototype = {
- /**
- * @param {?WebInspector.FilmStripModel} filmStripModel
- */
- setFilmStripModel: function(filmStripModel)
- {
- this._filmStripModel = filmStripModel;
- this.scheduleUpdate();
- },
+ clearFilmStripFrame() {
+ this._selectedFilmStripTime = -1;
+ this.scheduleUpdate();
+ }
- /**
- * @param {number} time
- */
- selectFilmStripFrame: function(time)
- {
- this._selectedFilmStripTime = time;
- this.scheduleUpdate();
- },
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _loadEventFired(event) {
+ var data = /** @type {number} */ (event.data);
+ if (data)
+ this._loadEvents.push(data * 1000);
+ this.scheduleUpdate();
+ }
- clearFilmStripFrame: function()
- {
- this._selectedFilmStripTime = -1;
- this.scheduleUpdate();
- },
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _domContentLoadedEventFired(event) {
+ var data = /** @type {number} */ (event.data);
+ if (data)
+ this._domContentLoadedEvents.push(data * 1000);
+ this.scheduleUpdate();
+ }
- /**
- * @param {!WebInspector.Event} event
- */
- _loadEventFired: function(event)
- {
- var data = /** @type {number} */ (event.data);
- if (data)
- this._loadEvents.push(data * 1000);
- this.scheduleUpdate();
- },
+ /**
+ * @param {string} connectionId
+ * @return {number}
+ */
+ _bandId(connectionId) {
+ if (!connectionId || connectionId === '0')
+ return -1;
+ if (this._bandMap.has(connectionId))
+ return /** @type {number} */ (this._bandMap.get(connectionId));
+ var result = this._nextBand++;
+ this._bandMap.set(connectionId, result);
+ return result;
+ }
- /**
- * @param {!WebInspector.Event} event
- */
- _domContentLoadedEventFired: function(event)
- {
- var data = /** @type {number} */ (event.data);
- if (data)
- this._domContentLoadedEvents.push(data * 1000);
- this.scheduleUpdate();
- },
+ /**
+ * @param {!WebInspector.NetworkRequest} request
+ */
+ updateRequest(request) {
+ if (!this._requestsSet.has(request)) {
+ this._requestsSet.add(request);
+ this._requestsList.push(request);
+ }
+ this.scheduleUpdate();
+ }
- /**
- * @param {string} connectionId
- * @return {number}
- */
- _bandId: function(connectionId)
- {
- if (!connectionId || connectionId === "0")
- return -1;
- if (this._bandMap.has(connectionId))
- return /** @type {number} */ (this._bandMap.get(connectionId));
- var result = this._nextBand++;
- this._bandMap.set(connectionId, result);
- return result;
- },
+ /**
+ * @override
+ */
+ wasShown() {
+ this.onResize();
+ }
- /**
- * @param {!WebInspector.NetworkRequest} request
- */
- updateRequest: function(request)
- {
- if (!this._requestsSet.has(request)) {
- this._requestsSet.add(request);
- this._requestsList.push(request);
- }
- this.scheduleUpdate();
- },
+ /**
+ * @override
+ */
+ onResize() {
+ var width = this.element.offsetWidth;
+ var height = this.element.offsetHeight;
+ this._calculator.setDisplayWindow(width);
+ this.resetCanvas();
+ var numBands = (((height - 1) / WebInspector.NetworkOverview._bandHeight) - 1) | 0;
+ this._numBands = (numBands > 0) ? numBands : 1;
+ this.scheduleUpdate();
+ }
- /**
- * @override
- */
- wasShown: function()
- {
- this.onResize();
- },
+ /**
+ * @override
+ */
+ reset() {
+ this._windowStart = 0;
+ this._windowEnd = 0;
+ /** @type {?WebInspector.FilmStripModel} */
+ this._filmStripModel = null;
- /**
- * @override
- */
- onResize: function()
- {
- var width = this.element.offsetWidth;
- var height = this.element.offsetHeight;
- this._calculator.setDisplayWindow(width);
- this.resetCanvas();
- var numBands = (((height - 1) / WebInspector.NetworkOverview._bandHeight) - 1) | 0;
- this._numBands = (numBands > 0) ? numBands : 1;
- this.scheduleUpdate();
- },
+ /** @type {number} */
+ this._span = 1;
+ /** @type {?WebInspector.NetworkTimeBoundary} */
+ this._lastBoundary = null;
+ /** @type {number} */
+ this._nextBand = 0;
+ /** @type {!Map.<string, number>} */
+ this._bandMap = new Map();
+ /** @type {!Array.<!WebInspector.NetworkRequest>} */
+ this._requestsList = [];
+ /** @type {!Set.<!WebInspector.NetworkRequest>} */
+ this._requestsSet = new Set();
+ /** @type {!Array.<number>} */
+ this._loadEvents = [];
+ /** @type {!Array.<number>} */
+ this._domContentLoadedEvents = [];
- /**
- * @override
- */
- reset: function()
- {
- this._windowStart = 0;
- this._windowEnd = 0;
- /** @type {?WebInspector.FilmStripModel} */
- this._filmStripModel = null;
+ // Clear screen.
+ this.resetCanvas();
+ }
+
+ /**
+ * @protected
+ */
+ scheduleUpdate() {
+ if (this._updateScheduled || !this.isShowing())
+ return;
+ this._updateScheduled = true;
+ this.element.window().requestAnimationFrame(this.update.bind(this));
+ }
+
+ /**
+ * @override
+ */
+ update() {
+ this._updateScheduled = false;
- /** @type {number} */
- this._span = 1;
- /** @type {?WebInspector.NetworkTimeBoundary} */
- this._lastBoundary = null;
- /** @type {number} */
- this._nextBand = 0;
- /** @type {!Map.<string, number>} */
- this._bandMap = new Map();
- /** @type {!Array.<!WebInspector.NetworkRequest>} */
- this._requestsList = [];
- /** @type {!Set.<!WebInspector.NetworkRequest>} */
- this._requestsSet = new Set();
- /** @type {!Array.<number>} */
- this._loadEvents = [];
- /** @type {!Array.<number>} */
- this._domContentLoadedEvents = [];
+ var newBoundary =
+ new WebInspector.NetworkTimeBoundary(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());
+ if (!this._lastBoundary || !newBoundary.equals(this._lastBoundary)) {
+ var span = this._calculator.boundarySpan();
+ while (this._span < span)
+ this._span *= 1.25;
+ this._calculator.setBounds(this._calculator.minimumBoundary(), this._calculator.minimumBoundary() + this._span);
+ this._lastBoundary =
+ new WebInspector.NetworkTimeBoundary(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());
+ if (this._windowStart || this._windowEnd) {
+ this._restoringWindow = true;
+ var startTime = this._calculator.minimumBoundary();
+ var totalTime = this._calculator.boundarySpan();
+ var left = (this._windowStart - startTime) / totalTime;
+ var right = (this._windowEnd - startTime) / totalTime;
+ this._restoringWindow = false;
+ }
+ }
- // Clear screen.
- this.resetCanvas();
- },
+ var context = this._canvas.getContext('2d');
+ var calculator = this._calculator;
+ var linesByType = {};
+ var paddingTop = 2;
/**
- * @protected
+ * @param {string} type
+ * @param {string} strokeStyle
*/
- scheduleUpdate: function()
- {
- if (this._updateScheduled || !this.isShowing())
- return;
- this._updateScheduled = true;
- this.element.window().requestAnimationFrame(this.update.bind(this));
- },
+ function drawLines(type, strokeStyle) {
+ var lines = linesByType[type];
+ if (!lines)
+ return;
+ var n = lines.length;
+ context.beginPath();
+ context.strokeStyle = strokeStyle;
+ for (var i = 0; i < n;) {
+ var y = lines[i++] * WebInspector.NetworkOverview._bandHeight + paddingTop;
+ var startTime = lines[i++];
+ var endTime = lines[i++];
+ if (endTime === Number.MAX_VALUE)
+ endTime = calculator.maximumBoundary();
+ context.moveTo(calculator.computePosition(startTime), y);
+ context.lineTo(calculator.computePosition(endTime) + 1, y);
+ }
+ context.stroke();
+ }
/**
- * @override
+ * @param {string} type
+ * @param {number} y
+ * @param {number} start
+ * @param {number} end
*/
- update: function()
- {
- this._updateScheduled = false;
-
- var newBoundary = new WebInspector.NetworkTimeBoundary(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());
- if (!this._lastBoundary || !newBoundary.equals(this._lastBoundary)) {
- var span = this._calculator.boundarySpan();
- while (this._span < span)
- this._span *= 1.25;
- this._calculator.setBounds(this._calculator.minimumBoundary(), this._calculator.minimumBoundary() + this._span);
- this._lastBoundary = new WebInspector.NetworkTimeBoundary(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());
- if (this._windowStart || this._windowEnd) {
- this._restoringWindow = true;
- var startTime = this._calculator.minimumBoundary();
- var totalTime = this._calculator.boundarySpan();
- var left = (this._windowStart - startTime) / totalTime;
- var right = (this._windowEnd - startTime) / totalTime;
- this._restoringWindow = false;
- }
- }
-
- var context = this._canvas.getContext("2d");
- var calculator = this._calculator;
- var linesByType = {};
- var paddingTop = 2;
+ function addLine(type, y, start, end) {
+ var lines = linesByType[type];
+ if (!lines) {
+ lines = [];
+ linesByType[type] = lines;
+ }
+ lines.push(y, start, end);
+ }
- /**
- * @param {string} type
- * @param {string} strokeStyle
- */
- function drawLines(type, strokeStyle)
- {
- var lines = linesByType[type];
- if (!lines)
- return;
- var n = lines.length;
- context.beginPath();
- context.strokeStyle = strokeStyle;
- for (var i = 0; i < n;) {
- var y = lines[i++] * WebInspector.NetworkOverview._bandHeight + paddingTop;
- var startTime = lines[i++];
- var endTime = lines[i++];
- if (endTime === Number.MAX_VALUE)
- endTime = calculator.maximumBoundary();
- context.moveTo(calculator.computePosition(startTime), y);
- context.lineTo(calculator.computePosition(endTime) + 1, y);
- }
- context.stroke();
- }
+ var requests = this._requestsList;
+ var n = requests.length;
+ for (var i = 0; i < n; ++i) {
+ var request = requests[i];
+ var band = this._bandId(request.connectionId);
+ var y = (band === -1) ? 0 : (band % this._numBands + 1);
+ var timeRanges =
+ WebInspector.RequestTimingView.calculateRequestTimeRanges(request, this._calculator.minimumBoundary());
+ for (var j = 0; j < timeRanges.length; ++j) {
+ var type = timeRanges[j].name;
+ if (band !== -1 || type === WebInspector.RequestTimeRangeNames.Total)
+ addLine(type, y, timeRanges[j].start * 1000, timeRanges[j].end * 1000);
+ }
+ }
- /**
- * @param {string} type
- * @param {number} y
- * @param {number} start
- * @param {number} end
- */
- function addLine(type, y, start, end)
- {
- var lines = linesByType[type];
- if (!lines) {
- lines = [];
- linesByType[type] = lines;
- }
- lines.push(y, start, end);
- }
+ context.clearRect(0, 0, this._canvas.width, this._canvas.height);
+ context.save();
+ context.scale(window.devicePixelRatio, window.devicePixelRatio);
+ context.lineWidth = 2;
+ drawLines(WebInspector.RequestTimeRangeNames.Total, '#CCCCCC');
+ drawLines(WebInspector.RequestTimeRangeNames.Blocking, '#AAAAAA');
+ drawLines(WebInspector.RequestTimeRangeNames.Connecting, '#FF9800');
+ drawLines(WebInspector.RequestTimeRangeNames.ServiceWorker, '#FF9800');
+ drawLines(WebInspector.RequestTimeRangeNames.ServiceWorkerPreparation, '#FF9800');
+ drawLines(WebInspector.RequestTimeRangeNames.Push, '#8CDBff');
+ drawLines(WebInspector.RequestTimeRangeNames.Proxy, '#A1887F');
+ drawLines(WebInspector.RequestTimeRangeNames.DNS, '#009688');
+ drawLines(WebInspector.RequestTimeRangeNames.SSL, '#9C27B0');
+ drawLines(WebInspector.RequestTimeRangeNames.Sending, '#B0BEC5');
+ drawLines(WebInspector.RequestTimeRangeNames.Waiting, '#00C853');
+ drawLines(WebInspector.RequestTimeRangeNames.Receiving, '#03A9F4');
- var requests = this._requestsList;
- var n = requests.length;
- for (var i = 0; i < n; ++i) {
- var request = requests[i];
- var band = this._bandId(request.connectionId);
- var y = (band === -1) ? 0 : (band % this._numBands + 1);
- var timeRanges = WebInspector.RequestTimingView.calculateRequestTimeRanges(request, this._calculator.minimumBoundary());
- for (var j = 0; j < timeRanges.length; ++j) {
- var type = timeRanges[j].name;
- if (band !== -1 || type === WebInspector.RequestTimeRangeNames.Total)
- addLine(type, y, timeRanges[j].start * 1000, timeRanges[j].end * 1000);
- }
- }
+ var height = this.element.offsetHeight;
+ context.lineWidth = 1;
+ context.beginPath();
+ context.strokeStyle = '#8080FF'; // Keep in sync with .network-blue-divider CSS rule.
+ for (var i = this._domContentLoadedEvents.length - 1; i >= 0; --i) {
+ var x = Math.round(calculator.computePosition(this._domContentLoadedEvents[i])) + 0.5;
+ context.moveTo(x, 0);
+ context.lineTo(x, height);
+ }
+ context.stroke();
- context.clearRect(0, 0, this._canvas.width, this._canvas.height);
- context.save();
- context.scale(window.devicePixelRatio, window.devicePixelRatio);
- context.lineWidth = 2;
- drawLines(WebInspector.RequestTimeRangeNames.Total, "#CCCCCC");
- drawLines(WebInspector.RequestTimeRangeNames.Blocking, "#AAAAAA");
- drawLines(WebInspector.RequestTimeRangeNames.Connecting, "#FF9800");
- drawLines(WebInspector.RequestTimeRangeNames.ServiceWorker, "#FF9800");
- drawLines(WebInspector.RequestTimeRangeNames.ServiceWorkerPreparation, "#FF9800");
- drawLines(WebInspector.RequestTimeRangeNames.Push, "#8CDBff");
- drawLines(WebInspector.RequestTimeRangeNames.Proxy, "#A1887F");
- drawLines(WebInspector.RequestTimeRangeNames.DNS, "#009688");
- drawLines(WebInspector.RequestTimeRangeNames.SSL, "#9C27B0");
- drawLines(WebInspector.RequestTimeRangeNames.Sending, "#B0BEC5");
- drawLines(WebInspector.RequestTimeRangeNames.Waiting, "#00C853");
- drawLines(WebInspector.RequestTimeRangeNames.Receiving, "#03A9F4");
+ context.beginPath();
+ context.strokeStyle = '#FF8080'; // Keep in sync with .network-red-divider CSS rule.
+ for (var i = this._loadEvents.length - 1; i >= 0; --i) {
+ var x = Math.round(calculator.computePosition(this._loadEvents[i])) + 0.5;
+ context.moveTo(x, 0);
+ context.lineTo(x, height);
+ }
+ context.stroke();
- var height = this.element.offsetHeight;
- context.lineWidth = 1;
- context.beginPath();
- context.strokeStyle = "#8080FF"; // Keep in sync with .network-blue-divider CSS rule.
- for (var i = this._domContentLoadedEvents.length - 1; i >= 0; --i) {
- var x = Math.round(calculator.computePosition(this._domContentLoadedEvents[i])) + 0.5;
- context.moveTo(x, 0);
- context.lineTo(x, height);
- }
- context.stroke();
-
- context.beginPath();
- context.strokeStyle = "#FF8080"; // Keep in sync with .network-red-divider CSS rule.
- for (var i = this._loadEvents.length - 1; i >= 0; --i) {
- var x = Math.round(calculator.computePosition(this._loadEvents[i])) + 0.5;
- context.moveTo(x, 0);
- context.lineTo(x, height);
- }
- context.stroke();
+ if (this._selectedFilmStripTime !== -1) {
+ context.lineWidth = 2;
+ context.beginPath();
+ context.strokeStyle = '#FCCC49'; // Keep in sync with .network-frame-divider CSS rule.
+ var x = Math.round(calculator.computePosition(this._selectedFilmStripTime));
+ context.moveTo(x, 0);
+ context.lineTo(x, height);
+ context.stroke();
+ }
+ context.restore();
+ }
+};
- if (this._selectedFilmStripTime !== -1) {
- context.lineWidth = 2;
- context.beginPath();
- context.strokeStyle = "#FCCC49"; // Keep in sync with .network-frame-divider CSS rule.
- var x = Math.round(calculator.computePosition(this._selectedFilmStripTime));
- context.moveTo(x, 0);
- context.lineTo(x, height);
- context.stroke();
- }
- context.restore();
- },
+/** @type {number} */
+WebInspector.NetworkOverview._bandHeight = 3;
- __proto__: WebInspector.TimelineOverviewBase.prototype
-};
+/** @typedef {{start: number, end: number}} */
+WebInspector.NetworkOverview.Window;
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/network/NetworkManageCustomHeadersView.js ('k') | third_party/WebKit/Source/devtools/front_end/network/NetworkPanel.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698