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

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

Issue 2756583002: [Devtools] Added ability to add extension columns to network (Closed)
Patch Set: changes Created 3 years, 9 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 // Copyright 2016 The Chromium Authors. All rights reserved. 1 // Copyright 2016 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 /** 4 /**
5 * @unrestricted 5 * @unrestricted
6 */ 6 */
7 Network.NetworkLogViewColumns = class { 7 Network.NetworkLogViewColumns = class {
8 /** 8 /**
9 * @param {!Network.NetworkLogView} networkLogView 9 * @param {!Network.NetworkLogView} networkLogView
10 * @param {!Network.NetworkTransferTimeCalculator} timeCalculator 10 * @param {!Network.NetworkTransferTimeCalculator} timeCalculator
(...skipping 11 matching lines...) Expand all
22 22
23 /** @type {!Map<string, !Array<number>>} */ 23 /** @type {!Map<string, !Array<number>>} */
24 this._eventDividers = new Map(); 24 this._eventDividers = new Map();
25 this._eventDividersShown = false; 25 this._eventDividersShown = false;
26 26
27 this._gridMode = true; 27 this._gridMode = true;
28 28
29 /** @type {!Array.<!Network.NetworkLogViewColumns.Descriptor>} */ 29 /** @type {!Array.<!Network.NetworkLogViewColumns.Descriptor>} */
30 this._columns = []; 30 this._columns = [];
31 31
32 /** @type {!Map<string, ?Network.NetworkColumnExtensionInterface>} */
33 this._columnExtensions = new Map();
34
32 this._waterfallRequestsAreStale = false; 35 this._waterfallRequestsAreStale = false;
33 this._waterfallScrollerWidthIsStale = true; 36 this._waterfallScrollerWidthIsStale = true;
34 37
35 /** @type {!Components.Linkifier} */ 38 /** @type {!Components.Linkifier} */
36 this._popupLinkifier = new Components.Linkifier(); 39 this._popupLinkifier = new Components.Linkifier();
37 40
38 /** @type {!Map<string, !Network.NetworkTimeCalculator>} */ 41 /** @type {!Map<string, !Network.NetworkTimeCalculator>} */
39 this._calculatorsMap = new Map(); 42 this._calculatorsMap = new Map();
40 this._calculatorsMap.set(Network.NetworkLogViewColumns._calculatorTypes.Time , timeCalculator); 43 this._calculatorsMap.set(Network.NetworkLogViewColumns._calculatorTypes.Time , timeCalculator);
41 this._calculatorsMap.set(Network.NetworkLogViewColumns._calculatorTypes.Dura tion, durationCalculator); 44 this._calculatorsMap.set(Network.NetworkLogViewColumns._calculatorTypes.Dura tion, durationCalculator);
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
73 this._eventDividers.clear(); 76 this._eventDividers.clear();
74 } 77 }
75 78
76 _setupDataGrid() { 79 _setupDataGrid() {
77 var defaultColumns = Network.NetworkLogViewColumns._defaultColumns; 80 var defaultColumns = Network.NetworkLogViewColumns._defaultColumns;
78 var defaultColumnConfig = Network.NetworkLogViewColumns._defaultColumnConfig ; 81 var defaultColumnConfig = Network.NetworkLogViewColumns._defaultColumnConfig ;
79 82
80 this._columns = /** @type {!Array<!Network.NetworkLogViewColumns.Descriptor> } */ ([]); 83 this._columns = /** @type {!Array<!Network.NetworkLogViewColumns.Descriptor> } */ ([]);
81 for (var currentConfigColumn of defaultColumns) { 84 for (var currentConfigColumn of defaultColumns) {
82 var columnConfig = /** @type {!Network.NetworkLogViewColumns.Descriptor} * / ( 85 var columnConfig = /** @type {!Network.NetworkLogViewColumns.Descriptor} * / (
83 Object.assign(/** @type {!Object} */ ({}), defaultColumnConfig, curren tConfigColumn)); 86 Object.assign({}, defaultColumnConfig, currentConfigColumn));
84 columnConfig.id = columnConfig.id; 87 columnConfig.id = columnConfig.id;
85 if (columnConfig.subtitle) 88 if (columnConfig.subtitle)
86 columnConfig.titleDOMFragment = this._makeHeaderFragment(columnConfig.ti tle, columnConfig.subtitle); 89 columnConfig.titleDOMFragment = this._makeHeaderFragment(columnConfig.ti tle, columnConfig.subtitle);
87 this._columns.push(columnConfig); 90 this._columns.push(columnConfig);
88 } 91 }
92 this._loadColumnExtensions();
89 this._loadCustomColumnsAndSettings(); 93 this._loadCustomColumnsAndSettings();
90 94
91 this._popoverHelper = new UI.PopoverHelper(this._networkLogView.element); 95 this._popoverHelper = new UI.PopoverHelper(this._networkLogView.element);
92 this._popoverHelper.initializeCallbacks( 96 this._popoverHelper.initializeCallbacks(
93 this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._o nHidePopover.bind(this)); 97 this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._o nHidePopover.bind(this));
94 this._popoverHelper.setHasPadding(true); 98 this._popoverHelper.setHasPadding(true);
95 99
96 /** @type {!DataGrid.SortableDataGrid<!Network.NetworkNode>} */ 100 /** @type {!DataGrid.SortableDataGrid<!Network.NetworkNode>} */
97 this._dataGrid = 101 this._dataGrid =
98 new DataGrid.SortableDataGrid(this._columns.map(Network.NetworkLogViewCo lumns._convertToDataGridDescriptor)); 102 new DataGrid.SortableDataGrid(this._columns.map(Network.NetworkLogViewCo lumns._convertToDataGridDescriptor));
(...skipping 221 matching lines...) Expand 10 before | Expand all | Expand 10 after
320 this._networkLogView.removeAllNodeHighlights(); 324 this._networkLogView.removeAllNodeHighlights();
321 this._splitWidget.hideSidebar(); 325 this._splitWidget.hideSidebar();
322 this._activeScroller = this._dataGridScroller; 326 this._activeScroller = this._dataGridScroller;
323 this._dataGrid.setScrollContainer(this._dataGridScroller); 327 this._dataGrid.setScrollContainer(this._dataGridScroller);
324 } 328 }
325 this._networkLogView.element.classList.toggle('brief-mode', !gridMode); 329 this._networkLogView.element.classList.toggle('brief-mode', !gridMode);
326 this._updateColumns(); 330 this._updateColumns();
327 } 331 }
328 332
329 /** 333 /**
334 * @return {!Map<string, ?Network.NetworkColumnExtensionInterface>}
335 */
336 columnExtensions() {
337 return this._columnExtensions;
338 }
339
340 /**
330 * @param {!Network.NetworkLogViewColumns.Descriptor} columnConfig 341 * @param {!Network.NetworkLogViewColumns.Descriptor} columnConfig
331 */ 342 */
332 _toggleColumnVisibility(columnConfig) { 343 _toggleColumnVisibility(columnConfig) {
333 this._loadCustomColumnsAndSettings(); 344 this._loadCustomColumnsAndSettings();
334 columnConfig.visible = !columnConfig.visible; 345 columnConfig.visible = !columnConfig.visible;
335 this._saveColumnsSettings(); 346 this._saveColumnsSettings();
336 this._updateColumns(); 347 this._updateColumns();
337 } 348 }
338 349
339 _saveColumnsSettings() { 350 _saveColumnsSettings() {
340 var saveableSettings = {}; 351 var saveableSettings = {};
341 for (var columnConfig of this._columns) 352 for (var columnConfig of this._columns)
342 saveableSettings[columnConfig.id] = {visible: columnConfig.visible, title: columnConfig.title}; 353 saveableSettings[columnConfig.id] = {visible: columnConfig.visible, title: columnConfig.title};
343 354
344 this._persistantSettings.set(saveableSettings); 355 this._persistantSettings.set(saveableSettings);
345 } 356 }
346 357
358 _loadColumnExtensions() {
359 var extensions = self.runtime.extensions(Network.NetworkColumnExtensionInter face);
360 for (var i = 0; i < extensions.length; i++) {
361 var extension = extensions[i];
362 var title = extension.title();
363 var columnId = title.toLowerCase() + '-extension';
364
365 this._columnExtensions.set(columnId, null);
366 extension.instance().then(extensionInstanceResolved.bind(this, columnId));
367
368 var columnConfig = /** @type {!Network.NetworkLogViewColumns.Descriptor} * / (
369 Object.assign({}, Network.NetworkLogViewColumns._defaultColumnConfig, {
370 id: columnId,
371 title: title,
372 isResponseHeader: false,
373 isCustomHeader: false,
374 visible: true,
375 sortingFunction:
376 Network.NetworkRequestNode.ExtensionColumnComparator.bind(null, this._columnExtensions, columnId)
377 }));
378 const columnIndex = i + 1;
379 this._columns.splice(columnIndex, 0, columnConfig);
380 if (this._dataGrid)
381 this._dataGrid.addColumn(Network.NetworkLogViewColumns._convertToDataGri dDescriptor(columnConfig), columnIndex);
382 }
383
384 /**
385 * @param {string} columnId
386 * @param {!Network.NetworkColumnExtensionInterface} instance
387 * @this {Network.NetworkLogViewColumns}
388 */
389 function extensionInstanceResolved(columnId, instance) {
390 this._columnExtensions.set(columnId, instance);
391 this._networkLogView.columnExtensionResolved();
392 }
393 }
394
347 _loadCustomColumnsAndSettings() { 395 _loadCustomColumnsAndSettings() {
348 var savedSettings = this._persistantSettings.get(); 396 var savedSettings = this._persistantSettings.get();
349 var columnIds = Object.keys(savedSettings); 397 var columnIds = Object.keys(savedSettings);
350 for (var columnId of columnIds) { 398 for (var columnId of columnIds) {
351 var setting = savedSettings[columnId]; 399 var setting = savedSettings[columnId];
352 var columnConfig = this._columns.find(columnConfig => columnConfig.id === columnId); 400 var columnConfig = this._columns.find(columnConfig => columnConfig.id === columnId);
353 if (!columnConfig) 401 if (!columnConfig)
354 columnConfig = this._addCustomHeader(setting.title, columnId); 402 columnConfig = this._addCustomHeader(setting.title, columnId);
355 if (columnConfig.hideable && typeof setting.visible === 'boolean') 403 if (columnConfig.hideable && typeof setting.visible === 'boolean')
356 columnConfig.visible = !!setting.visible; 404 columnConfig.visible = !!setting.visible;
(...skipping 119 matching lines...) Expand 10 before | Expand all | Expand 10 after
476 if (!headerId) 524 if (!headerId)
477 headerId = headerTitle.toLowerCase(); 525 headerId = headerTitle.toLowerCase();
478 if (index === undefined) 526 if (index === undefined)
479 index = this._columns.length - 1; 527 index = this._columns.length - 1;
480 528
481 var currentColumnConfig = this._columns.find(columnConfig => columnConfig.id === headerId); 529 var currentColumnConfig = this._columns.find(columnConfig => columnConfig.id === headerId);
482 if (currentColumnConfig) 530 if (currentColumnConfig)
483 return null; 531 return null;
484 532
485 var columnConfig = /** @type {!Network.NetworkLogViewColumns.Descriptor} */ ( 533 var columnConfig = /** @type {!Network.NetworkLogViewColumns.Descriptor} */ (
486 Object.assign(/** @type {!Object} */ ({}), Network.NetworkLogViewColumns ._defaultColumnConfig, { 534 Object.assign({}, Network.NetworkLogViewColumns._defaultColumnConfig, {
487 id: headerId, 535 id: headerId,
488 title: headerTitle, 536 title: headerTitle,
489 isResponseHeader: true, 537 isResponseHeader: true,
490 isCustomHeader: true, 538 isCustomHeader: true,
491 visible: true, 539 visible: true,
492 sortingFunction: Network.NetworkRequestNode.ResponseHeaderStringCompar ator.bind(null, headerId) 540 sortingFunction: Network.NetworkRequestNode.ResponseHeaderStringCompar ator.bind(null, headerId)
493 })); 541 }));
494 this._columns.splice(index, 0, columnConfig); 542 this._columns.splice(index, 0, columnConfig);
495 if (this._dataGrid) 543 if (this._dataGrid)
496 this._dataGrid.addColumn(Network.NetworkLogViewColumns._convertToDataGridD escriptor(columnConfig), index); 544 this._dataGrid.addColumn(Network.NetworkLogViewColumns._convertToDataGridD escriptor(columnConfig), index);
(...skipping 310 matching lines...) Expand 10 before | Expand all | Expand 10 after
807 /** 855 /**
808 * @enum {string} 856 * @enum {string}
809 */ 857 */
810 Network.NetworkLogViewColumns.WaterfallSortIds = { 858 Network.NetworkLogViewColumns.WaterfallSortIds = {
811 StartTime: 'startTime', 859 StartTime: 'startTime',
812 ResponseTime: 'responseReceivedTime', 860 ResponseTime: 'responseReceivedTime',
813 EndTime: 'endTime', 861 EndTime: 'endTime',
814 Duration: 'duration', 862 Duration: 'duration',
815 Latency: 'latency' 863 Latency: 'latency'
816 }; 864 };
865
866 /**
867 * @interface
868 */
869 Network.NetworkColumnExtensionInterface = function() {};
870
871 Network.NetworkColumnExtensionInterface.prototype = {
872 /**
873 * @param {!SDK.NetworkRequest} request
874 * @return {string}
875 */
876 lookupColumnValue(request) {},
877
878 /**
879 * @param {!SDK.NetworkRequest} aRequest
880 * @param {!SDK.NetworkRequest} bRequest
881 * @return {number}
882 */
883 requestComparator(aRequest, bRequest) {}
884 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698