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

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

Issue 2876983002: DevTools: group by frame, not product in the network panel. (Closed)
Patch Set: review comments 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 28 matching lines...) Expand all
39 super({}); 39 super({});
40 this._parentView = parentView; 40 this._parentView = parentView;
41 this._isHovered = false; 41 this._isHovered = false;
42 this._isProduct = false; 42 this._isProduct = false;
43 this._showingInitiatorChain = false; 43 this._showingInitiatorChain = false;
44 /** @type {?SDK.NetworkRequest} */ 44 /** @type {?SDK.NetworkRequest} */
45 this._requestOrFirstKnownChildRequest = null; 45 this._requestOrFirstKnownChildRequest = null;
46 } 46 }
47 47
48 /** 48 /**
49 * @param {!Network.NetworkNode._ProductEntryInfo} entryInfo
50 */
51 static buildReportLinkElement(entryInfo) {
52 var shadowRoot = UI.createShadowRootWithCoreStyles(createElement('div'), 'ne twork/networkReportProductEntry.css');
53 var content = shadowRoot.createChild('div', 'network-product-popover');
54
55 var domainElement = content.createChild('div', 'network-product-domain');
56 domainElement.textContent = entryInfo.matchedURL.domain();
57
58 var entryNameElement = content.createChild('div', 'network-product-entry-nam e');
59 entryNameElement.textContent = entryInfo.entry.name;
60
61 var matchedURL = entryInfo.matchedURL;
62 var reportLink =
63 'https://docs.google.com/forms/d/e/1FAIpQLSchz2FdcQ-rRllzl8BbhWaTRRY-12B pPjW6Hr9e1-BpCA083w/viewform' +
64 '?entry_1425918171=' + encodeURIComponent((matchedURL.domain() + matched URL.path).substr(0, 100));
65 content.appendChild(UI.createExternalLink(reportLink, 'Report mismatch', 'ne twork-report-product-link'));
66 return shadowRoot;
67 }
68
69 /**
70 * @return {!Network.NetworkNode._SupportedBackgroundColors} 49 * @return {!Network.NetworkNode._SupportedBackgroundColors}
71 */ 50 */
72 static _themedBackgroundColors() { 51 static _themedBackgroundColors() {
73 if (Network.NetworkNode._themedBackgroundColorsCache) 52 if (Network.NetworkNode._themedBackgroundColorsCache)
74 return Network.NetworkNode._themedBackgroundColorsCache; 53 return Network.NetworkNode._themedBackgroundColorsCache;
75 var themedColors = {}; 54 var themedColors = {};
76 for (var name in Network.NetworkNode._backgroundColors) { 55 for (var name in Network.NetworkNode._backgroundColors) {
77 var color = Common.Color.fromRGBA(Network.NetworkNode._backgroundColors[na me]); 56 var color = Common.Color.fromRGBA(Network.NetworkNode._backgroundColors[na me]);
78 themedColors[name] = UI.themeSupport.patchColor(color, UI.ThemeSupport.Col orUsage.Background); 57 themedColors[name] = UI.themeSupport.patchColor(color, UI.ThemeSupport.Col orUsage.Background);
79 } 58 }
80 Network.NetworkNode._themedBackgroundColorsCache = 59 Network.NetworkNode._themedBackgroundColorsCache =
81 /** @type {!Network.NetworkNode._SupportedBackgroundColors} */ (themedCo lors); 60 /** @type {!Network.NetworkNode._SupportedBackgroundColors} */ (themedCo lors);
82 return Network.NetworkNode._themedBackgroundColorsCache; 61 return Network.NetworkNode._themedBackgroundColorsCache;
83 } 62 }
84 63
85 /** 64 /**
86 * @param {!ProductRegistry.Registry} productRegistry
87 * @param {!SDK.ResourceTreeFrame} frame
88 * @return {?Network.NetworkNode._ProductEntryInfo}
89 */
90 static productEntryInfoForFrame(productRegistry, frame) {
91 var parsedURL = new Common.ParsedURL(frame.url);
92 var entry = productRegistry.entryForUrl(parsedURL);
93 if (entry)
94 return {entry: entry, matchedURL: parsedURL};
95 frame.findCreationCallFrame(callFrame => {
96 if (!callFrame.url)
97 return false;
98 parsedURL = new Common.ParsedURL(callFrame.url);
99 entry = productRegistry.entryForUrl(parsedURL);
100 return !!entry;
101 });
102 if (!entry)
103 return null;
104 return {entry: entry, matchedURL: parsedURL};
105 }
106
107 /**
108 * @protected
109 * @return {!Promise<?Network.NetworkNode._ProductEntryInfo>}
110 */
111 productEntry() {
112 return Promise.resolve(/** @type {?Network.NetworkNode._ProductEntryInfo} */ (null));
113 }
114
115 /**
116 * @param {!UI.PopoverRequest} popover
117 * @return {!Promise<boolean>}
118 */
119 handleProductPopover(popover) {
120 return this.productEntry().then(entryInfo => {
121 if (!entryInfo)
122 return false;
123 popover.setAnchorBehavior(UI.GlassPane.AnchorBehavior.PreferBottom);
124 popover.contentElement.appendChild(Network.NetworkNode.buildReportLinkElem ent(entryInfo));
125 return true;
126 });
127 }
128
129 /**
130 * @return {string} 65 * @return {string}
131 */ 66 */
132 displayName() { 67 displayName() {
133 return ''; 68 return '';
134 } 69 }
135 70
136 /** 71 /**
137 * @return {boolean} 72 * @return {boolean}
138 */ 73 */
139 isFromFrame() { 74 isFromFrame() {
(...skipping 22 matching lines...) Expand all
162 /** 97 /**
163 * @return {string} 98 * @return {string}
164 */ 99 */
165 backgroundColor() { 100 backgroundColor() {
166 var bgColors = Network.NetworkNode._themedBackgroundColors(); 101 var bgColors = Network.NetworkNode._themedBackgroundColors();
167 var color = this.isStriped() ? bgColors.Stripe : bgColors.Default; 102 var color = this.isStriped() ? bgColors.Stripe : bgColors.Default;
168 if (this.isNavigationRequest()) 103 if (this.isNavigationRequest())
169 color = color.blendWith(bgColors.Navigation); 104 color = color.blendWith(bgColors.Navigation);
170 if (this.hovered()) 105 if (this.hovered())
171 color = color.blendWith(bgColors.Hovered); 106 color = color.blendWith(bgColors.Hovered);
172 if (this.isFromFrame())
173 color = color.blendWith(bgColors.FromFrame);
174 else if (this._isProduct)
175 color = color.blendWith(bgColors.IsProduct);
176 if (this.isOnInitiatorPath()) 107 if (this.isOnInitiatorPath())
177 color = color.blendWith(bgColors.InitiatorPath); 108 color = color.blendWith(bgColors.InitiatorPath);
178 if (this.isOnInitiatedPath()) 109 if (this.isOnInitiatedPath())
179 color = color.blendWith(bgColors.InitiatedPath); 110 color = color.blendWith(bgColors.InitiatedPath);
180 if (this.selected) 111 if (this.selected)
181 color = color.blendWith(bgColors.Selected); 112 color = color.blendWith(bgColors.Selected);
182 113
183 return /** @type {string} */ (color.asString(Common.Color.Format.HEX)); 114 return /** @type {string} */ (color.asString(Common.Color.Format.HEX));
184 } 115 }
185 116
(...skipping 615 matching lines...) Expand 10 before | Expand all | Expand 10 after
801 /** 732 /**
802 * @override 733 * @override
803 * @param {!Element} cell 734 * @param {!Element} cell
804 * @param {string} columnId 735 * @param {string} columnId
805 */ 736 */
806 renderCell(cell, columnId) { 737 renderCell(cell, columnId) {
807 switch (columnId) { 738 switch (columnId) {
808 case 'name': 739 case 'name':
809 this._renderNameCell(cell); 740 this._renderNameCell(cell);
810 break; 741 break;
811 case 'product':
812 if (!Runtime.experiments.isEnabled('networkGroupingRequests')) {
813 this._setTextAndTitle(cell, this._request.responseHeaderValue(columnId ) || '');
814 break;
815 }
816 this.productEntry().then(entryInfo => {
817 if (entryInfo)
818 cell.textContent = entryInfo.entry.name;
819 });
820 break;
821 case 'method': 742 case 'method':
822 this._setTextAndTitle(cell, this._request.requestMethod); 743 this._setTextAndTitle(cell, this._request.requestMethod);
823 break; 744 break;
824 case 'status': 745 case 'status':
825 this._renderStatusCell(cell); 746 this._renderStatusCell(cell);
826 break; 747 break;
827 case 'protocol': 748 case 'protocol':
828 this._setTextAndTitle(cell, this._request.protocol); 749 this._setTextAndTitle(cell, this._request.protocol);
829 break; 750 break;
830 case 'scheme': 751 case 'scheme':
(...skipping 101 matching lines...) Expand 10 before | Expand all | Expand 10 after
932 } 853 }
933 iconElement.classList.add(this._request.resourceType().name()); 854 iconElement.classList.add(this._request.resourceType().name());
934 855
935 cell.appendChild(iconElement); 856 cell.appendChild(iconElement);
936 cell.createTextChild(this._request.networkManager().target().decorateLabel(t his._request.name())); 857 cell.createTextChild(this._request.networkManager().target().decorateLabel(t his._request.name()));
937 this._appendSubtitle(cell, this._request.path()); 858 this._appendSubtitle(cell, this._request.path());
938 cell.title = this._request.url(); 859 cell.title = this._request.url();
939 } 860 }
940 861
941 /** 862 /**
942 * @override
943 * @return {!Promise<?Network.NetworkNode._ProductEntryInfo>}
944 */
945 productEntry() {
946 return ProductRegistry.instance().then(productRegistry => {
947 var frame = SDK.ResourceTreeModel.frameForRequest(this._request);
948 var entry = /** @type {?ProductRegistry.Registry.ProductEntry} */ (null);
949 if (frame && frame.isMainFrame())
950 frame = null;
951 var entryInfo = frame ? Network.NetworkNode.productEntryInfoForFrame(produ ctRegistry, frame) : null;
952 if (entryInfo)
953 return entryInfo;
954 entry = productRegistry.entryForUrl(this._request.parsedURL);
955 return entry ? {entry: entry, matchedURL: this._request.parsedURL} : null;
956 });
957 }
958
959 /**
960 * @param {!Element} cell 863 * @param {!Element} cell
961 */ 864 */
962 _renderStatusCell(cell) { 865 _renderStatusCell(cell) {
963 cell.classList.toggle( 866 cell.classList.toggle(
964 'network-dim-cell', !this._isFailed() && (this._request.cached() || !thi s._request.statusCode)); 867 'network-dim-cell', !this._isFailed() && (this._request.cached() || !thi s._request.statusCode));
965 868
966 if (this._request.failed && !this._request.canceled && !this._request.wasBlo cked()) { 869 if (this._request.failed && !this._request.canceled && !this._request.wasBlo cked()) {
967 var failText = Common.UIString('(failed)'); 870 var failText = Common.UIString('(failed)');
968 if (this._request.localizedFailDescription) { 871 if (this._request.localizedFailDescription) {
969 cell.createTextChild(failText); 872 cell.createTextChild(failText);
(...skipping 159 matching lines...) Expand 10 before | Expand all | Expand 10 after
1129 * @param {boolean=} supressSelectedEvent 1032 * @param {boolean=} supressSelectedEvent
1130 */ 1033 */
1131 select(supressSelectedEvent) { 1034 select(supressSelectedEvent) {
1132 if (this.expanded) { 1035 if (this.expanded) {
1133 this.collapse(); 1036 this.collapse();
1134 return; 1037 return;
1135 } 1038 }
1136 this.expand(); 1039 this.expand();
1137 } 1040 }
1138 }; 1041 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698