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

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

Issue 2747553002: [DevTools] Rework Popover API (Closed)
Patch Set: await 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 70 matching lines...) Expand 10 before | Expand all | Expand 10 after
81 for (var currentConfigColumn of defaultColumns) { 81 for (var currentConfigColumn of defaultColumns) {
82 var columnConfig = /** @type {!Network.NetworkLogViewColumns.Descriptor} * / ( 82 var columnConfig = /** @type {!Network.NetworkLogViewColumns.Descriptor} * / (
83 Object.assign(/** @type {!Object} */ ({}), defaultColumnConfig, curren tConfigColumn)); 83 Object.assign(/** @type {!Object} */ ({}), defaultColumnConfig, curren tConfigColumn));
84 columnConfig.id = columnConfig.id; 84 columnConfig.id = columnConfig.id;
85 if (columnConfig.subtitle) 85 if (columnConfig.subtitle)
86 columnConfig.titleDOMFragment = this._makeHeaderFragment(columnConfig.ti tle, columnConfig.subtitle); 86 columnConfig.titleDOMFragment = this._makeHeaderFragment(columnConfig.ti tle, columnConfig.subtitle);
87 this._columns.push(columnConfig); 87 this._columns.push(columnConfig);
88 } 88 }
89 this._loadColumns(); 89 this._loadColumns();
90 90
91 this._popoverHelper = new UI.PopoverHelper(this._networkLogView.element); 91 this._popoverHelper = new UI.PopoverHelper(this._networkLogView.element, fal se, this._getPopoverContent.bind(this));
92 this._popoverHelper.initializeCallbacks(
93 this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._o nHidePopover.bind(this));
94 this._popoverHelper.setHasPadding(true); 92 this._popoverHelper.setHasPadding(true);
95 93
96 /** @type {!DataGrid.SortableDataGrid<!Network.NetworkNode>} */ 94 /** @type {!DataGrid.SortableDataGrid<!Network.NetworkNode>} */
97 this._dataGrid = 95 this._dataGrid =
98 new DataGrid.SortableDataGrid(this._columns.map(Network.NetworkLogViewCo lumns._convertToDataGridDescriptor)); 96 new DataGrid.SortableDataGrid(this._columns.map(Network.NetworkLogViewCo lumns._convertToDataGridDescriptor));
99 this._dataGrid.element.addEventListener('mousedown', event => { 97 this._dataGrid.element.addEventListener('mousedown', event => {
100 if (!this._dataGrid.selectedNode && event.button) 98 if (!this._dataGrid.selectedNode && event.button)
101 event.consume(); 99 event.consume();
102 }, true); 100 }, true);
103 101
(...skipping 411 matching lines...) Expand 10 before | Expand all | Expand 10 after
515 var currentColumnConfig = this._columns.find(columnConfig => columnConfig.id === newHeaderId); 513 var currentColumnConfig = this._columns.find(columnConfig => columnConfig.id === newHeaderId);
516 if (!oldColumnConfig || (currentColumnConfig && oldHeaderId !== newHeaderId) ) 514 if (!oldColumnConfig || (currentColumnConfig && oldHeaderId !== newHeaderId) )
517 return false; 515 return false;
518 516
519 this._removeCustomHeader(oldHeaderId); 517 this._removeCustomHeader(oldHeaderId);
520 this._addCustomHeader(newHeaderTitle, newHeaderId, oldIndex); 518 this._addCustomHeader(newHeaderTitle, newHeaderId, oldIndex);
521 return true; 519 return true;
522 } 520 }
523 521
524 /** 522 /**
525 * @param {!Element} element
526 * @param {!Event} event 523 * @param {!Event} event
527 * @return {!Element|!AnchorBox|undefined} 524 * @return {?UI.PopoverContent}
528 */ 525 */
529 _getPopoverAnchor(element, event) { 526 _getPopoverContent(event) {
530 if (!this._gridMode) 527 if (!this._gridMode)
531 return; 528 return null;
532 var anchor = element.enclosingNodeOrSelfWithClass('network-script-initiated' ); 529
533 if (anchor && anchor.request) { 530 var anchor = event.target.enclosingNodeOrSelfWithClass('network-script-initi ated');
534 var initiator = /** @type {!SDK.NetworkRequest} */ (anchor.request).initia tor(); 531 var request = /** @type {?SDK.NetworkRequest} */ (anchor ? anchor.request : null);
535 if (initiator && initiator.stack) 532 var initiator = request ? request.initiator() : null;
536 return anchor; 533 if (!initiator || !initiator.stack)
537 } 534 return null;
535
536 return {
537 box: anchor.boxInWindow(),
538 show: popover => {
539 var content = Components.DOMPresentationUtils.buildStackTracePreviewCont ents(
540 anchor.request.target(), this._popupLinkifier, initiator.stack);
541 popover.contentElement.appendChild(content);
542 return Promise.resolve(true);
543 },
544 hide: () => {
545 this._popupLinkifier.reset();
546 }
547 };
538 } 548 }
539 549
540 /** 550 /**
541 * @param {!Element|!AnchorBox} anchor
542 * @param {!UI.GlassPane} popover
543 * @return {!Promise<boolean>}
544 */
545 _showPopover(anchor, popover) {
546 var request = /** @type {!SDK.NetworkRequest} */ (anchor.request);
547 var initiator = /** @type {!Protocol.Network.Initiator} */ (request.initiato r());
548 var content = Components.DOMPresentationUtils.buildStackTracePreviewContents (
549 request.target(), this._popupLinkifier, initiator.stack);
550 popover.contentElement.appendChild(content);
551 return Promise.resolve(true);
552 }
553
554 _onHidePopover() {
555 this._popupLinkifier.reset();
556 }
557
558 /**
559 * @param {!Array<number>} times 551 * @param {!Array<number>} times
560 * @param {string} className 552 * @param {string} className
561 */ 553 */
562 addEventDividers(times, className) { 554 addEventDividers(times, className) {
563 // TODO(allada) Remove this and pass in the color. 555 // TODO(allada) Remove this and pass in the color.
564 var color = 'transparent'; 556 var color = 'transparent';
565 switch (className) { 557 switch (className) {
566 case 'network-blue-divider': 558 case 'network-blue-divider':
567 color = 'hsla(240, 100%, 80%, 0.7)'; 559 color = 'hsla(240, 100%, 80%, 0.7)';
568 break; 560 break;
(...skipping 238 matching lines...) Expand 10 before | Expand all | Expand 10 after
807 /** 799 /**
808 * @enum {string} 800 * @enum {string}
809 */ 801 */
810 Network.NetworkLogViewColumns.WaterfallSortIds = { 802 Network.NetworkLogViewColumns.WaterfallSortIds = {
811 StartTime: 'startTime', 803 StartTime: 'startTime',
812 ResponseTime: 'responseReceivedTime', 804 ResponseTime: 'responseReceivedTime',
813 EndTime: 'endTime', 805 EndTime: 'endTime',
814 Duration: 'duration', 806 Duration: 'duration',
815 Latency: 'latency' 807 Latency: 'latency'
816 }; 808 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698