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

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 this._nodeGroups.clear();
360 this._invalidateAllItems(); 359 this._invalidateAllItems();
361 } 360 }
362 361
363 /** 362 /**
364 * @return {!Set<!Network.NetworkRowDecorator>}
365 */
366 rowDecorators() {
367 return this._rowDecorators;
368 }
369
370 /**
371 * @param {!SDK.NetworkRequest} request 363 * @param {!SDK.NetworkRequest} request
372 * @return {?Network.NetworkRequestNode} 364 * @return {?Network.NetworkRequestNode}
373 */ 365 */
374 nodeForRequest(request) { 366 nodeForRequest(request) {
375 return this._nodesByRequestId.get(request.requestId()); 367 return this._nodesByRequestId.get(request.requestId());
376 } 368 }
377 369
378 /** 370 /**
379 * @return {number} 371 * @return {number}
380 */ 372 */
(...skipping 106 matching lines...) Expand 10 before | Expand all | Expand 10 after
487 479
488 /** 480 /**
489 * @param {!Common.Event} event 481 * @param {!Common.Event} event
490 */ 482 */
491 _filterChanged(event) { 483 _filterChanged(event) {
492 this.removeAllNodeHighlights(); 484 this.removeAllNodeHighlights();
493 this._parseFilterQuery(this._textFilterUI.value()); 485 this._parseFilterQuery(this._textFilterUI.value());
494 this._filterRequests(); 486 this._filterRequests();
495 } 487 }
496 488
489 initializeProductRegistryIfNeeded() {
490 if (this._productRegistryRequested)
491 return;
492 this._productRegistryRequested = true;
493 if (ProductRegistry.existingInstance())
494 this._invalidateAllItems();
495 else
496 ProductRegistry.instance().then(() => this._invalidateAllItems());
497 }
498
497 _initializeView() { 499 _initializeView() {
498 this.element.id = 'network-container'; 500 this.element.id = 'network-container';
499 this._setupDataGrid(); 501 this._setupDataGrid();
500 502
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); 503 this._columns.show(this.element);
508 504
509 this._summaryBarElement = this.element.createChild('div', 'network-summary-b ar'); 505 this._summaryBarElement = this.element.createChild('div', 'network-summary-b ar');
510 506
511 this._columns.sortByCurrentColumn(); 507 this._columns.sortByCurrentColumn();
512 } 508 }
513 509
514 _showRecordingHint() { 510 _showRecordingHint() {
515 this._hideRecordingHint(); 511 this._hideRecordingHint();
516 this._recordingHint = this.element.createChild('div', 'network-status-pane f ill'); 512 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(); 889 return this._dataGrid.rootNode();
894 890
895 var groupKey = this._activeGroupLookup.groupForRequest(node.request()); 891 var groupKey = this._activeGroupLookup.groupForRequest(node.request());
896 if (!groupKey) 892 if (!groupKey)
897 return this._dataGrid.rootNode(); 893 return this._dataGrid.rootNode();
898 894
899 var group = this._nodeGroups.get(groupKey); 895 var group = this._nodeGroups.get(groupKey);
900 if (group) 896 if (group)
901 return group; 897 return group;
902 group = new Network.NetworkGroupNode(this, this._activeGroupLookup.groupName (groupKey)); 898 group = new Network.NetworkGroupNode(this, this._activeGroupLookup.groupName (groupKey));
903 group.setColumnExtensions(this._columns.columnExtensions());
904 this._nodeGroups.set(groupKey, group); 899 this._nodeGroups.set(groupKey, group);
905 return group; 900 return group;
906 } 901 }
907 902
908 reset() { 903 reset() {
909 this._requestWithHighlightedInitiators = null; 904 this._requestWithHighlightedInitiators = null;
910 this.dispatchEventToListeners(Network.NetworkLogView.Events.RequestSelected, null); 905 this.dispatchEventToListeners(Network.NetworkLogView.Events.RequestSelected, null);
911 906
912 this._clearSearchMatchedList(); 907 this._clearSearchMatchedList();
913 908
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
955 return; 950 return;
956 var request = /** @type {!SDK.NetworkRequest} */ (event.data); 951 var request = /** @type {!SDK.NetworkRequest} */ (event.data);
957 this._appendRequest(request); 952 this._appendRequest(request);
958 } 953 }
959 954
960 /** 955 /**
961 * @param {!SDK.NetworkRequest} request 956 * @param {!SDK.NetworkRequest} request
962 */ 957 */
963 _appendRequest(request) { 958 _appendRequest(request) {
964 var node = new Network.NetworkRequestNode(this, request); 959 var node = new Network.NetworkRequestNode(this, request);
965 node.setColumnExtensions(this._columns.columnExtensions());
966 node[Network.NetworkLogView._isFilteredOutSymbol] = true; 960 node[Network.NetworkLogView._isFilteredOutSymbol] = true;
967 node[Network.NetworkLogView._isMatchingSearchQuerySymbol] = false; 961 node[Network.NetworkLogView._isMatchingSearchQuerySymbol] = false;
968 962
969 // In case of redirect request id is reassigned to a redirected 963 // In case of redirect request id is reassigned to a redirected
970 // request and we need to update _nodesByRequestId and search results. 964 // request and we need to update _nodesByRequestId and search results.
971 var originalRequestNode = this._nodesByRequestId.get(request.requestId()); 965 var originalRequestNode = this._nodesByRequestId.get(request.requestId());
972 if (originalRequestNode) 966 if (originalRequestNode)
973 this._nodesByRequestId.set(originalRequestNode.request().requestId(), orig inalRequestNode); 967 this._nodesByRequestId.set(originalRequestNode.request().requestId(), orig inalRequestNode);
974 this._nodesByRequestId.set(request.requestId(), node); 968 this._nodesByRequestId.set(request.requestId(), node);
975 969
(...skipping 836 matching lines...) Expand 10 before | Expand all | Expand 10 after
1812 /** @type {!Array<string>} */ 1806 /** @type {!Array<string>} */
1813 Network.NetworkLogView._searchKeys = 1807 Network.NetworkLogView._searchKeys =
1814 Object.keys(Network.NetworkLogView.FilterType).map(key => Network.NetworkLog View.FilterType[key]); 1808 Object.keys(Network.NetworkLogView.FilterType).map(key => Network.NetworkLog View.FilterType[key]);
1815 1809
1816 /** @typedef {function(!SDK.NetworkRequest): boolean} */ 1810 /** @typedef {function(!SDK.NetworkRequest): boolean} */
1817 Network.NetworkLogView.Filter; 1811 Network.NetworkLogView.Filter;
1818 1812
1819 /** 1813 /**
1820 * @interface 1814 * @interface
1821 */ 1815 */
1822 Network.NetworkGroupLookupInterface = function() {}; 1816 Network.GroupLookupInterface = function() {};
1823 1817
1824 Network.NetworkGroupLookupInterface.prototype = { 1818 Network.GroupLookupInterface.prototype = {
1825 /** 1819 /**
1826 * @param {!SDK.NetworkRequest} request 1820 * @param {!SDK.NetworkRequest} request
1827 * @return {?*} 1821 * @return {?*}
1828 */ 1822 */
1829 groupForRequest(request) {}, 1823 groupForRequest(request) {},
1830 1824
1831 /** 1825 /**
1832 * @param {!*} key 1826 * @param {!*} key
1833 * @return {string} 1827 * @return {string}
1834 */ 1828 */
1835 groupName(key) {} 1829 groupName(key) {}
1836 }; 1830 };
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