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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.js

Issue 2839273003: [Devtools] New structure and colorize rows for network products (Closed)
Patch Set: changes Created 3 years, 7 months 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 unified diff | Download patch
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. 2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved.
3 * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org> 3 * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
4 * Copyright (C) 2011 Google Inc. All rights reserved. 4 * Copyright (C) 2011 Google Inc. All rights reserved.
5 * 5 *
6 * Redistribution and use in source and binary forms, with or without 6 * Redistribution and use in source and binary forms, with or without
7 * modification, are permitted provided that the following conditions 7 * modification, are permitted provided that the following conditions
8 * are met: 8 * are met:
9 * 9 *
10 * 1. Redistributions of source code must retain the above copyright 10 * 1. Redistributions of source code must retain the above copyright
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after
50 this._progressBarContainer = progressBarContainer; 50 this._progressBarContainer = progressBarContainer;
51 this._networkLogLargeRowsSetting = networkLogLargeRowsSetting; 51 this._networkLogLargeRowsSetting = networkLogLargeRowsSetting;
52 this._networkLogLargeRowsSetting.addChangeListener(updateRowHeight.bind(this ), this); 52 this._networkLogLargeRowsSetting.addChangeListener(updateRowHeight.bind(this ), this);
53 53
54 /** @type {!Network.NetworkTransferTimeCalculator} */ 54 /** @type {!Network.NetworkTransferTimeCalculator} */
55 this._timeCalculator = new Network.NetworkTransferTimeCalculator(); 55 this._timeCalculator = new Network.NetworkTransferTimeCalculator();
56 /** @type {!Network.NetworkTransferDurationCalculator} */ 56 /** @type {!Network.NetworkTransferDurationCalculator} */
57 this._durationCalculator = new Network.NetworkTransferDurationCalculator(); 57 this._durationCalculator = new Network.NetworkTransferDurationCalculator();
58 this._calculator = this._timeCalculator; 58 this._calculator = this._timeCalculator;
59 59
60 /** @type {?Network.NetworkGroupLookupInterface} */ 60 /** @type {?Network.GroupLookupInterface} */
61 this._activeGroupLookup = null; 61 this._activeGroupLookup = null;
62 62
63 this._productRegistryRequested = false;
64
63 /** 65 /**
64 * @this {Network.NetworkLogView} 66 * @this {Network.NetworkLogView}
65 */ 67 */
66 function updateRowHeight() { 68 function updateRowHeight() {
67 /** @type {number} */ 69 /** @type {number} */
68 this._rowHeight = !!this._networkLogLargeRowsSetting.get() ? 41 : 21; 70 this._rowHeight = !!this._networkLogLargeRowsSetting.get() ? 41 : 21;
69 } 71 }
70 updateRowHeight.call(this); 72 updateRowHeight.call(this);
71 73
72 this._columns = new Network.NetworkLogViewColumns( 74 this._columns = new Network.NetworkLogViewColumns(
73 this, this._timeCalculator, this._durationCalculator, networkLogLargeRow sSetting); 75 this, this._timeCalculator, this._durationCalculator, networkLogLargeRow sSetting);
74 76
75 /** @type {!Map.<string, !Network.NetworkRequestNode>} */ 77 /** @type {!Map.<string, !Network.NetworkRequestNode>} */
76 this._nodesByRequestId = new Map(); 78 this._nodesByRequestId = new Map();
77 /** @type {!Map<*, !Network.NetworkGroupNode>} */ 79 /** @type {!Map<*, !Network.NetworkGroupNode>} */
78 this._nodeGroups = new Map(); 80 this._nodeGroups = new Map();
79 /** @type {!Set<!Network.NetworkRowDecorator>} */
80 this._rowDecorators = new Set();
81
82 /** @type {!Object.<string, boolean>} */ 81 /** @type {!Object.<string, boolean>} */
83 this._staleRequestIds = {}; 82 this._staleRequestIds = {};
84 /** @type {number} */ 83 /** @type {number} */
85 this._mainRequestLoadTime = -1; 84 this._mainRequestLoadTime = -1;
86 /** @type {number} */ 85 /** @type {number} */
87 this._mainRequestDOMContentLoadedTime = -1; 86 this._mainRequestDOMContentLoadedTime = -1;
88 this._matchedRequestCount = 0; 87 this._matchedRequestCount = 0;
89 this._highlightedSubstringChanges = []; 88 this._highlightedSubstringChanges = [];
90 89
91 /** @type {!Array.<!Network.NetworkLogView.Filter>} */ 90 /** @type {!Array.<!Network.NetworkLogView.Filter>} */
(...skipping 253 matching lines...) Expand 10 before | Expand all | Expand 10 after
345 */ 344 */
346 static _requestTimeFilter(windowStart, windowEnd, request) { 345 static _requestTimeFilter(windowStart, windowEnd, request) {
347 if (request.issueTime() > windowEnd) 346 if (request.issueTime() > windowEnd)
348 return false; 347 return false;
349 if (request.endTime !== -1 && request.endTime < windowStart) 348 if (request.endTime !== -1 && request.endTime < windowStart)
350 return false; 349 return false;
351 return true; 350 return true;
352 } 351 }
353 352
354 /** 353 /**
355 * @param {?Network.NetworkGroupLookupInterface} grouping 354 * @param {?Network.GroupLookupInterface} grouping
356 */ 355 */
357 setGrouping(grouping) { 356 setGrouping(grouping) {
358 this._activeGroupLookup = grouping; 357 this._activeGroupLookup = grouping;
359 this._nodeGroups.clear(); 358 if (!grouping) {
360 this._invalidateAllItems(); 359 this._nodeGroups.clear();
360 this._invalidateAllItems();
361 return;
362 }
363 grouping.initialize().then(() => {
364 this._nodeGroups.clear();
365 this._invalidateAllItems();
366 });
361 } 367 }
362 368
363 /** 369 /**
364 * @return {!Set<!Network.NetworkRowDecorator>}
365 */
366 rowDecorators() {
367 return this._rowDecorators;
368 }
369
370 /**
371 * @param {!SDK.NetworkRequest} request 370 * @param {!SDK.NetworkRequest} request
372 * @return {?Network.NetworkRequestNode} 371 * @return {?Network.NetworkRequestNode}
373 */ 372 */
374 nodeForRequest(request) { 373 nodeForRequest(request) {
375 return this._nodesByRequestId.get(request.requestId()); 374 return this._nodesByRequestId.get(request.requestId());
376 } 375 }
377 376
378 /** 377 /**
379 * @return {number} 378 * @return {number}
380 */ 379 */
(...skipping 110 matching lines...) Expand 10 before | Expand all | Expand 10 after
491 _filterChanged(event) { 490 _filterChanged(event) {
492 this.removeAllNodeHighlights(); 491 this.removeAllNodeHighlights();
493 this._parseFilterQuery(this._textFilterUI.value()); 492 this._parseFilterQuery(this._textFilterUI.value());
494 this._filterRequests(); 493 this._filterRequests();
495 } 494 }
496 495
497 _initializeView() { 496 _initializeView() {
498 this.element.id = 'network-container'; 497 this.element.id = 'network-container';
499 this._setupDataGrid(); 498 this._setupDataGrid();
500 499
501 self.runtime.allInstances(Network.NetworkRowDecorator).then(instances => {
502 for (var instance of instances)
503 this._rowDecorators.add(instance);
504 this._invalidateAllItems(true);
505 });
506
507 this._columns.show(this.element); 500 this._columns.show(this.element);
508 501
509 this._summaryBarElement = this.element.createChild('div', 'network-summary-b ar'); 502 this._summaryBarElement = this.element.createChild('div', 'network-summary-b ar');
510 503
511 this._columns.sortByCurrentColumn(); 504 this._columns.sortByCurrentColumn();
512 } 505 }
513 506
514 _showRecordingHint() { 507 _showRecordingHint() {
515 this._hideRecordingHint(); 508 this._hideRecordingHint();
516 this._recordingHint = this.element.createChild('div', 'network-status-pane f ill'); 509 this._recordingHint = this.element.createChild('div', 'network-status-pane f ill');
(...skipping 376 matching lines...) Expand 10 before | Expand all | Expand 10 after
893 return this._dataGrid.rootNode(); 886 return this._dataGrid.rootNode();
894 887
895 var groupKey = this._activeGroupLookup.groupForRequest(node.request()); 888 var groupKey = this._activeGroupLookup.groupForRequest(node.request());
896 if (!groupKey) 889 if (!groupKey)
897 return this._dataGrid.rootNode(); 890 return this._dataGrid.rootNode();
898 891
899 var group = this._nodeGroups.get(groupKey); 892 var group = this._nodeGroups.get(groupKey);
900 if (group) 893 if (group)
901 return group; 894 return group;
902 group = new Network.NetworkGroupNode(this, this._activeGroupLookup.groupName (groupKey)); 895 group = new Network.NetworkGroupNode(this, this._activeGroupLookup.groupName (groupKey));
903 group.setColumnExtensions(this._columns.columnExtensions());
904 this._nodeGroups.set(groupKey, group); 896 this._nodeGroups.set(groupKey, group);
905 return group; 897 return group;
906 } 898 }
907 899
908 reset() { 900 reset() {
909 this._requestWithHighlightedInitiators = null; 901 this._requestWithHighlightedInitiators = null;
910 this.dispatchEventToListeners(Network.NetworkLogView.Events.RequestSelected, null); 902 this.dispatchEventToListeners(Network.NetworkLogView.Events.RequestSelected, null);
911 903
912 this._clearSearchMatchedList(); 904 this._clearSearchMatchedList();
913 905
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
955 return; 947 return;
956 var request = /** @type {!SDK.NetworkRequest} */ (event.data); 948 var request = /** @type {!SDK.NetworkRequest} */ (event.data);
957 this._appendRequest(request); 949 this._appendRequest(request);
958 } 950 }
959 951
960 /** 952 /**
961 * @param {!SDK.NetworkRequest} request 953 * @param {!SDK.NetworkRequest} request
962 */ 954 */
963 _appendRequest(request) { 955 _appendRequest(request) {
964 var node = new Network.NetworkRequestNode(this, request); 956 var node = new Network.NetworkRequestNode(this, request);
965 node.setColumnExtensions(this._columns.columnExtensions());
966 node[Network.NetworkLogView._isFilteredOutSymbol] = true; 957 node[Network.NetworkLogView._isFilteredOutSymbol] = true;
967 node[Network.NetworkLogView._isMatchingSearchQuerySymbol] = false; 958 node[Network.NetworkLogView._isMatchingSearchQuerySymbol] = false;
968 959
969 // In case of redirect request id is reassigned to a redirected 960 // In case of redirect request id is reassigned to a redirected
970 // request and we need to update _nodesByRequestId and search results. 961 // request and we need to update _nodesByRequestId and search results.
971 var originalRequestNode = this._nodesByRequestId.get(request.requestId()); 962 var originalRequestNode = this._nodesByRequestId.get(request.requestId());
972 if (originalRequestNode) 963 if (originalRequestNode)
973 this._nodesByRequestId.set(originalRequestNode.request().requestId(), orig inalRequestNode); 964 this._nodesByRequestId.set(originalRequestNode.request().requestId(), orig inalRequestNode);
974 this._nodesByRequestId.set(request.requestId(), node); 965 this._nodesByRequestId.set(request.requestId(), node);
975 966
(...skipping 836 matching lines...) Expand 10 before | Expand all | Expand 10 after
1812 /** @type {!Array<string>} */ 1803 /** @type {!Array<string>} */
1813 Network.NetworkLogView._searchKeys = 1804 Network.NetworkLogView._searchKeys =
1814 Object.keys(Network.NetworkLogView.FilterType).map(key => Network.NetworkLog View.FilterType[key]); 1805 Object.keys(Network.NetworkLogView.FilterType).map(key => Network.NetworkLog View.FilterType[key]);
1815 1806
1816 /** @typedef {function(!SDK.NetworkRequest): boolean} */ 1807 /** @typedef {function(!SDK.NetworkRequest): boolean} */
1817 Network.NetworkLogView.Filter; 1808 Network.NetworkLogView.Filter;
1818 1809
1819 /** 1810 /**
1820 * @interface 1811 * @interface
1821 */ 1812 */
1822 Network.NetworkGroupLookupInterface = function() {}; 1813 Network.GroupLookupInterface = function() {};
1823 1814
1824 Network.NetworkGroupLookupInterface.prototype = { 1815 Network.GroupLookupInterface.prototype = {
1816 /**
1817 * @return {!Promise}
1818 */
1819 initialize: function() {},
1820
1825 /** 1821 /**
1826 * @param {!SDK.NetworkRequest} request 1822 * @param {!SDK.NetworkRequest} request
1827 * @return {?*} 1823 * @return {?*}
1828 */ 1824 */
1829 groupForRequest(request) {}, 1825 groupForRequest: function(request) {},
1830 1826
1831 /** 1827 /**
1832 * @param {!*} key 1828 * @param {!*} key
1833 * @return {string} 1829 * @return {string}
1834 */ 1830 */
1835 groupName(key) {} 1831 groupName: function(key) {}
1836 }; 1832 };
1837
1838 /**
1839 * @interface
1840 */
1841 Network.NetworkRowDecorator = function() {};
1842
1843 Network.NetworkRowDecorator.prototype = {
1844 /**
1845 * @param {!Network.NetworkNode} node
1846 */
1847 decorate(node) {}
1848 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698