blob: c702ca375d72fe704db0c90dc5164a3f82443c36 [file] [log] [blame]
Blink Reformat4c46d092018-04-07 15:32:371/*
2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved.
3 * Copyright (C) IBM Corp. 2009 All rights reserved.
4 * Copyright (C) 2010 Google Inc. All rights reserved.
5 *
6 * Redistribution and use in source and binary forms, with or without
7 * modification, are permitted provided that the following conditions
8 * are met:
9 *
10 * 1. Redistributions of source code must retain the above copyright
11 * notice, this list of conditions and the following disclaimer.
12 * 2. Redistributions in binary form must reproduce the above copyright
13 * notice, this list of conditions and the following disclaimer in the
14 * documentation and/or other materials provided with the distribution.
15 * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of
16 * its contributors may be used to endorse or promote products derived
17 * from this software without specific prior written permission.
18 *
19 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
20 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
21 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
23 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
24 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
25 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
26 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
28 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29 */
30
Sigurd Schneiderba818512020-04-29 10:54:3731import * as BrowserSDK from '../browser_sdk/browser_sdk.js';
Tim van der Lippe0ed1d2b2020-02-04 13:45:1332import * as Common from '../common/common.js';
Wolfgang Beyera03d3df2020-05-04 13:59:3133import * as Host from '../host/host.js';
Tim van der Lippe0ed1d2b2020-02-04 13:45:1334import * as ObjectUI from '../object_ui/object_ui.js';
35import * as SDK from '../sdk/sdk.js';
36import * as UI from '../ui/ui.js';
37
38export class RequestHeadersView extends UI.Widget.VBox {
Blink Reformat4c46d092018-04-07 15:32:3739 /**
Tim van der Lippe0ed1d2b2020-02-04 13:45:1340 * @param {!SDK.NetworkRequest.NetworkRequest} request
Blink Reformat4c46d092018-04-07 15:32:3741 */
42 constructor(request) {
43 super();
44 this.registerRequiredCSS('network/requestHeadersView.css');
45 this.element.classList.add('request-headers-view');
46
47 this._request = request;
48 this._decodeRequestParameters = true;
49 this._showRequestHeadersText = false;
50 this._showResponseHeadersText = false;
51
Alex Rudenko9d00edb2020-04-09 09:50:0952 const contentType = request.requestContentType();
53 if (contentType) {
54 this._decodeRequestParameters = !!contentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i);
55 }
56
Tim van der Lippe0ed1d2b2020-02-04 13:45:1357 /** @type {?UI.TreeOutline.TreeElement} */
Blink Reformat4c46d092018-04-07 15:32:3758 this._highlightedElement = null;
59
Tim van der Lippe0ed1d2b2020-02-04 13:45:1360 const root = new UI.TreeOutline.TreeOutlineInShadow();
Amanda Bakerc3d15272019-10-25 00:56:3961 root.registerRequiredCSS('object_ui/objectValue.css');
62 root.registerRequiredCSS('object_ui/objectPropertiesSection.css');
Blink Reformat4c46d092018-04-07 15:32:3763 root.registerRequiredCSS('network/requestHeadersTree.css');
64 root.element.classList.add('request-headers-tree');
Blink Reformat4c46d092018-04-07 15:32:3765 root.makeDense();
Blink Reformat4c46d092018-04-07 15:32:3766 this.element.appendChild(root.element);
67
Tim van der Lippe0ed1d2b2020-02-04 13:45:1368 const generalCategory = new Category(root, 'general', Common.UIString.UIString('General'));
Blink Reformat4c46d092018-04-07 15:32:3769 generalCategory.hidden = false;
Amanda Baker2e19a1b2019-10-25 00:41:0270 this._root = generalCategory;
Blink Reformat4c46d092018-04-07 15:32:3771 this._urlItem = generalCategory.createLeaf();
72 this._requestMethodItem = generalCategory.createLeaf();
73 this._statusCodeItem = generalCategory.createLeaf();
74 this._remoteAddressItem = generalCategory.createLeaf();
75 this._remoteAddressItem.hidden = true;
76 this._referrerPolicyItem = generalCategory.createLeaf();
77 this._referrerPolicyItem.hidden = true;
78
Paul Lewis56509652019-12-06 12:51:5879 this._responseHeadersCategory = new Category(root, 'responseHeaders', '');
80 this._requestHeadersCategory = new Category(root, 'requestHeaders', '');
81 this._queryStringCategory = new Category(root, 'queryString', '');
82 this._formDataCategory = new Category(root, 'formData', '');
Tim van der Lippe0ed1d2b2020-02-04 13:45:1383 this._requestPayloadCategory = new Category(root, 'requestPayload', Common.UIString.UIString('Request Payload'));
Blink Reformat4c46d092018-04-07 15:32:3784 }
85
86 /**
87 * @override
88 */
89 wasShown() {
90 this._clearHighlight();
91 this._request.addEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this._refreshRemoteAddress, this);
92 this._request.addEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged, this._refreshRequestHeaders, this);
93 this._request.addEventListener(
94 SDK.NetworkRequest.Events.ResponseHeadersChanged, this._refreshResponseHeaders, this);
95 this._request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this._refreshHTTPInformation, this);
96
97 this._refreshURL();
98 this._refreshQueryString();
99 this._refreshRequestHeaders();
100 this._refreshResponseHeaders();
101 this._refreshHTTPInformation();
102 this._refreshRemoteAddress();
103 this._refreshReferrerPolicy();
Amanda Baker2e19a1b2019-10-25 00:41:02104 this._root.select(/* omitFocus */ true, /* selectedByUser */ false);
Blink Reformat4c46d092018-04-07 15:32:37105 }
106
107 /**
108 * @override
109 */
110 willHide() {
111 this._request.removeEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this._refreshRemoteAddress, this);
112 this._request.removeEventListener(
113 SDK.NetworkRequest.Events.RequestHeadersChanged, this._refreshRequestHeaders, this);
114 this._request.removeEventListener(
115 SDK.NetworkRequest.Events.ResponseHeadersChanged, this._refreshResponseHeaders, this);
116 this._request.removeEventListener(SDK.NetworkRequest.Events.FinishedLoading, this._refreshHTTPInformation, this);
117 }
118
119 /**
120 * @param {string} name
121 * @param {string} value
122 * @return {!DocumentFragment}
123 */
124 _formatHeader(name, value) {
125 const fragment = createDocumentFragment();
126 fragment.createChild('div', 'header-name').textContent = name + ': ';
127 fragment.createChild('span', 'header-separator');
128 fragment.createChild('div', 'header-value source-code').textContent = value;
129
130 return fragment;
131 }
132
133 /**
Sigurd Schneidercae7b532020-03-06 11:20:06134 * @param {!{name:string,value:(string|undefined),headerNotSet:(boolean|undefined),headerValueIncorrect:(boolean|undefined),details:(!{explanation:string,examples:!Array<!{codeSnippet:string,comment:(string|undefined)}>}|undefined)}} header
Sigurd Schneidera2afe0b2020-03-03 15:27:13135 * @return {!DocumentFragment}
136 */
137 _formatHeaderObject(header) {
138 const fragment = createDocumentFragment();
139 if (header.headerNotSet) {
140 fragment.createChild('div', 'header-badge header-badge-text').textContent = 'not-set';
141 }
142 const colon = header.value ? ': ' : '';
143 fragment.createChild('div', 'header-name').textContent = header.name + colon;
144 fragment.createChild('span', 'header-separator');
145 if (header.value) {
146 if (header.headerValueIncorrect) {
147 fragment.createChild('div', 'header-value source-code header-warning').textContent = header.value;
148 } else {
149 fragment.createChild('div', 'header-value source-code').textContent = header.value;
150 }
151 }
152 if (header.details) {
Sigurd Schneidercae7b532020-03-06 11:20:06153 const detailsNode = fragment.createChild('div', 'header-details');
154 const callToAction = detailsNode.createChild('div', 'call-to-action');
155 const callToActionBody = callToAction.createChild('div', 'call-to-action-body');
156 callToActionBody.createChild('div', 'explanation').textContent = header.details.explanation;
157 for (const example of header.details.examples) {
158 const exampleNode = callToActionBody.createChild('div', 'example');
159 exampleNode.createChild('code').textContent = example.codeSnippet;
160 if (example.comment) {
161 exampleNode.createChild('span', 'comment').textContent = example.comment;
162 }
163 }
Sigurd Schneidere07f9ee2020-03-25 14:09:39164
165 if (Root.Runtime.experiments.isEnabled('issuesPane') &&
Sigurd Schneiderba818512020-04-29 10:54:37166 BrowserSDK.RelatedIssue.hasIssueOfCategory(
167 this._request, SDK.Issue.IssueCategory.CrossOriginEmbedderPolicy)) {
Tim van der Lippef49e2322020-05-01 15:03:09168 const link = document.createElement('div');
169 link.classList.add('devtools-link');
Sigurd Schneidere07f9ee2020-03-25 14:09:39170 link.onclick = () => {
Wolfgang Beyera03d3df2020-05-04 13:59:31171 Host.userMetrics.issuesPanelOpenedFrom(Host.UserMetrics.IssueOpener.LearnMoreLinkCOEP);
Sigurd Schneiderba818512020-04-29 10:54:37172 BrowserSDK.RelatedIssue.reveal(this._request, SDK.Issue.IssueCategory.CrossOriginEmbedderPolicy);
Sigurd Schneidere07f9ee2020-03-25 14:09:39173 };
Tim van der Lippef49e2322020-05-01 15:03:09174 const text = document.createElement('span');
175 text.classList.add('devtools-link');
Sigurd Schneidere07f9ee2020-03-25 14:09:39176 text.textContent = 'Learn more in the issues panel';
177 link.appendChild(text);
178 link.prepend(UI.Icon.Icon.create('largeicon-breaking-change', 'icon'));
179 callToActionBody.appendChild(link);
180 } else if (header.details.link) {
Sigurd Schneidereaadca12020-03-10 13:50:40181 const link = UI.XLink.XLink.create(header.details.link.url, ls`Learn more`, 'link');
182 link.prepend(UI.Icon.Icon.create('largeicon-link', 'link-icon'));
183 callToActionBody.appendChild(link);
184 }
Sigurd Schneidera2afe0b2020-03-03 15:27:13185 }
186 return fragment;
187 }
188
189 /**
Blink Reformat4c46d092018-04-07 15:32:37190 * @param {string} value
191 * @param {string} className
192 * @param {boolean} decodeParameters
193 * @return {!Element}
194 */
195 _formatParameter(value, className, decodeParameters) {
196 let errorDecoding = false;
197
198 if (decodeParameters) {
199 value = value.replace(/\+/g, ' ');
200 if (value.indexOf('%') >= 0) {
201 try {
202 value = decodeURIComponent(value);
203 } catch (e) {
204 errorDecoding = true;
205 }
206 }
207 }
Tim van der Lippe7ea01c22020-05-04 12:27:22208 const div = document.createElement('div');
209 if (className) {
210 div.className = className;
211 }
Tim van der Lippe1d6e57a2019-09-30 11:55:34212 if (value === '') {
Blink Reformat4c46d092018-04-07 15:32:37213 div.classList.add('empty-value');
Tim van der Lippe1d6e57a2019-09-30 11:55:34214 }
215 if (errorDecoding) {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13216 div.createChild('span', 'header-decode-error').textContent = Common.UIString.UIString('(unable to decode value)');
Tim van der Lippe1d6e57a2019-09-30 11:55:34217 } else {
Blink Reformat4c46d092018-04-07 15:32:37218 div.textContent = value;
Tim van der Lippe1d6e57a2019-09-30 11:55:34219 }
Blink Reformat4c46d092018-04-07 15:32:37220 return div;
221 }
222
223 _refreshURL() {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13224 this._urlItem.title = this._formatHeader(Common.UIString.UIString('Request URL'), this._request.url());
Blink Reformat4c46d092018-04-07 15:32:37225 }
226
227 _refreshQueryString() {
228 const queryString = this._request.queryString();
229 const queryParameters = this._request.queryParameters;
230 this._queryStringCategory.hidden = !queryParameters;
231 if (queryParameters) {
232 this._refreshParams(
Tim van der Lippe0ed1d2b2020-02-04 13:45:13233 Common.UIString.UIString('Query String Parameters'), queryParameters, queryString, this._queryStringCategory);
Blink Reformat4c46d092018-04-07 15:32:37234 }
235 }
236
237 async _refreshFormData() {
Blink Reformat4c46d092018-04-07 15:32:37238 const formData = await this._request.requestFormData();
Tim van der Lippe1d6e57a2019-09-30 11:55:34239 if (!formData) {
Alex Rudenko9d00edb2020-04-09 09:50:09240 this._formDataCategory.hidden = true;
241 this._requestPayloadCategory.hidden = true;
Blink Reformat4c46d092018-04-07 15:32:37242 return;
Tim van der Lippe1d6e57a2019-09-30 11:55:34243 }
Blink Reformat4c46d092018-04-07 15:32:37244
245 const formParameters = await this._request.formParameters();
246 if (formParameters) {
247 this._formDataCategory.hidden = false;
Alex Rudenko9d00edb2020-04-09 09:50:09248 this._requestPayloadCategory.hidden = true;
Tim van der Lippe0ed1d2b2020-02-04 13:45:13249 this._refreshParams(Common.UIString.UIString('Form Data'), formParameters, formData, this._formDataCategory);
Blink Reformat4c46d092018-04-07 15:32:37250 } else {
251 this._requestPayloadCategory.hidden = false;
Alex Rudenko9d00edb2020-04-09 09:50:09252 this._formDataCategory.hidden = true;
Blink Reformat4c46d092018-04-07 15:32:37253 try {
254 const json = JSON.parse(formData);
255 this._refreshRequestJSONPayload(json, formData);
256 } catch (e) {
257 this._populateTreeElementWithSourceText(this._requestPayloadCategory, formData);
258 }
259 }
260 }
261
262 /**
Tim van der Lippe0ed1d2b2020-02-04 13:45:13263 * @param {!UI.TreeOutline.TreeElement} treeElement
Blink Reformat4c46d092018-04-07 15:32:37264 * @param {?string} sourceText
265 */
266 _populateTreeElementWithSourceText(treeElement, sourceText) {
267 const max_len = 3000;
268 const text = (sourceText || '').trim();
269 const trim = text.length > max_len;
270
Tim van der Lippee7f27052020-05-01 15:15:28271 const sourceTextElement = document.createElement('span');
272 sourceTextElement.classList.add('header-value');
273 sourceTextElement.classList.add('source-code');
Blink Reformat4c46d092018-04-07 15:32:37274 sourceTextElement.textContent = trim ? text.substr(0, max_len) : text;
275
Tim van der Lippe0ed1d2b2020-02-04 13:45:13276 const sourceTreeElement = new UI.TreeOutline.TreeElement(sourceTextElement);
Blink Reformat4c46d092018-04-07 15:32:37277 treeElement.removeChildren();
278 treeElement.appendChild(sourceTreeElement);
Tim van der Lippe1d6e57a2019-09-30 11:55:34279 if (!trim) {
Blink Reformat4c46d092018-04-07 15:32:37280 return;
Tim van der Lippe1d6e57a2019-09-30 11:55:34281 }
Blink Reformat4c46d092018-04-07 15:32:37282
Tim van der Lippef49e2322020-05-01 15:03:09283 const showMoreButton = document.createElement('button');
284 showMoreButton.classList.add('request-headers-show-more-button');
Tim van der Lippe0ed1d2b2020-02-04 13:45:13285 showMoreButton.textContent = Common.UIString.UIString('Show more');
Amanda Baker89806492019-10-25 01:49:02286
287 function showMore() {
Blink Reformat4c46d092018-04-07 15:32:37288 showMoreButton.remove();
289 sourceTextElement.textContent = text;
Amanda Baker89806492019-10-25 01:49:02290 sourceTreeElement.listItemElement.removeEventListener('contextmenu', onContextMenuShowMore);
291 }
292 showMoreButton.addEventListener('click', showMore);
293
294 /**
295 * @param {!Event} event
296 */
297 function onContextMenuShowMore(event) {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13298 const contextMenu = new UI.ContextMenu.ContextMenu(event);
Amanda Baker89806492019-10-25 01:49:02299 const section = contextMenu.newSection();
300 section.appendItem(ls`Show more`, showMore);
301 contextMenu.show();
302 }
303 sourceTreeElement.listItemElement.addEventListener('contextmenu', onContextMenuShowMore);
Blink Reformat4c46d092018-04-07 15:32:37304 sourceTextElement.appendChild(showMoreButton);
305 }
306
307 /**
308 * @param {string} title
309 * @param {?Array.<!SDK.NetworkRequest.NameValue>} params
310 * @param {?string} sourceText
Tim van der Lippe0ed1d2b2020-02-04 13:45:13311 * @param {!UI.TreeOutline.TreeElement} paramsTreeElement
Blink Reformat4c46d092018-04-07 15:32:37312 */
313 _refreshParams(title, params, sourceText, paramsTreeElement) {
314 paramsTreeElement.removeChildren();
315
316 paramsTreeElement.listItemElement.removeChildren();
Amanda Baker2e19a1b2019-10-25 00:41:02317 paramsTreeElement.listItemElement.createChild('div', 'selection fill');
Blink Reformat4c46d092018-04-07 15:32:37318 paramsTreeElement.listItemElement.createTextChild(title);
319
Tim van der Lippef49e2322020-05-01 15:03:09320 const headerCount = document.createElement('span');
321 headerCount.classList.add('header-count');
Tim van der Lippe0ed1d2b2020-02-04 13:45:13322 headerCount.textContent = Common.UIString.UIString('\xA0(%d)', params.length);
Blink Reformat4c46d092018-04-07 15:32:37323 paramsTreeElement.listItemElement.appendChild(headerCount);
324
Paul Lewis56509652019-12-06 12:51:58325 const shouldViewSource = paramsTreeElement[_viewSourceSymbol];
Amanda Bakere2bb99d2019-10-25 01:28:43326 if (shouldViewSource) {
327 this._appendParamsSource(title, params, sourceText, paramsTreeElement);
328 } else {
329 this._appendParamsParsed(title, params, sourceText, paramsTreeElement);
330 }
331 }
332
333 /**
334 * @param {string} title
335 * @param {?Array.<!SDK.NetworkRequest.NameValue>} params
336 * @param {?string} sourceText
Tim van der Lippe0ed1d2b2020-02-04 13:45:13337 * @param {!UI.TreeOutline.TreeElement} paramsTreeElement
Amanda Bakere2bb99d2019-10-25 01:28:43338 */
339 _appendParamsSource(title, params, sourceText, paramsTreeElement) {
340 this._populateTreeElementWithSourceText(paramsTreeElement, sourceText);
341
342 const listItemElement = paramsTreeElement.listItemElement;
343
Blink Reformat4c46d092018-04-07 15:32:37344 /**
345 * @param {!Event} event
Paul Lewis56509652019-12-06 12:51:58346 * @this {RequestHeadersView}
Blink Reformat4c46d092018-04-07 15:32:37347 */
Amanda Bakere2bb99d2019-10-25 01:28:43348 const viewParsed = function(event) {
349 listItemElement.removeEventListener('contextmenu', viewParsedContextMenu);
350
Paul Lewis56509652019-12-06 12:51:58351 paramsTreeElement[_viewSourceSymbol] = false;
Blink Reformat4c46d092018-04-07 15:32:37352 this._refreshParams(title, params, sourceText, paramsTreeElement);
353 event.consume();
Amanda Bakere2bb99d2019-10-25 01:28:43354 };
Blink Reformat4c46d092018-04-07 15:32:37355
Amanda Bakere2bb99d2019-10-25 01:28:43356 /**
357 * @param {!Event} event
Paul Lewis56509652019-12-06 12:51:58358 * @this {RequestHeadersView}
Amanda Bakere2bb99d2019-10-25 01:28:43359 */
360 const viewParsedContextMenu = function(event) {
361 if (!paramsTreeElement.expanded) {
362 return;
363 }
Tim van der Lippe0ed1d2b2020-02-04 13:45:13364 const contextMenu = new UI.ContextMenu.ContextMenu(event);
Amanda Bakere2bb99d2019-10-25 01:28:43365 contextMenu.newSection().appendItem(ls`View parsed`, viewParsed.bind(this, event));
366 contextMenu.show();
367 }.bind(this);
Blink Reformat4c46d092018-04-07 15:32:37368
Amanda Bakere2bb99d2019-10-25 01:28:43369 const viewParsedButton = this._createViewSourceToggle(/* viewSource */ true, viewParsed.bind(this));
370 listItemElement.appendChild(viewParsedButton);
Blink Reformat4c46d092018-04-07 15:32:37371
Amanda Bakere2bb99d2019-10-25 01:28:43372 listItemElement.addEventListener('contextmenu', viewParsedContextMenu);
373 }
Blink Reformat4c46d092018-04-07 15:32:37374
Amanda Bakere2bb99d2019-10-25 01:28:43375 /**
376 * @param {string} title
377 * @param {?Array.<!SDK.NetworkRequest.NameValue>} params
378 * @param {?string} sourceText
Tim van der Lippe0ed1d2b2020-02-04 13:45:13379 * @param {!UI.TreeOutline.TreeElement} paramsTreeElement
Amanda Bakere2bb99d2019-10-25 01:28:43380 */
381 _appendParamsParsed(title, params, sourceText, paramsTreeElement) {
Blink Reformat4c46d092018-04-07 15:32:37382 for (let i = 0; i < params.length; ++i) {
383 const paramNameValue = createDocumentFragment();
384 if (params[i].name !== '') {
385 const name = this._formatParameter(params[i].name + ': ', 'header-name', this._decodeRequestParameters);
386 const value = this._formatParameter(params[i].value, 'header-value source-code', this._decodeRequestParameters);
387 paramNameValue.appendChild(name);
388 paramNameValue.createChild('span', 'header-separator');
389 paramNameValue.appendChild(value);
390 } else {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13391 paramNameValue.appendChild(this._formatParameter(
392 Common.UIString.UIString('(empty)'), 'empty-request-header', this._decodeRequestParameters));
Blink Reformat4c46d092018-04-07 15:32:37393 }
394
Tim van der Lippe0ed1d2b2020-02-04 13:45:13395 const paramTreeElement = new UI.TreeOutline.TreeElement(paramNameValue);
Blink Reformat4c46d092018-04-07 15:32:37396 paramsTreeElement.appendChild(paramTreeElement);
397 }
Amanda Bakere2bb99d2019-10-25 01:28:43398
399 const listItemElement = paramsTreeElement.listItemElement;
400
401 /**
402 * @param {!Event} event
Paul Lewis56509652019-12-06 12:51:58403 * @this {RequestHeadersView}
Amanda Bakere2bb99d2019-10-25 01:28:43404 */
405 const viewSource = function(event) {
406 listItemElement.removeEventListener('contextmenu', viewSourceContextMenu);
407
Paul Lewis56509652019-12-06 12:51:58408 paramsTreeElement[_viewSourceSymbol] = true;
Amanda Bakere2bb99d2019-10-25 01:28:43409 this._refreshParams(title, params, sourceText, paramsTreeElement);
410 event.consume();
411 };
412
413 /**
414 * @param {!Event} event
Paul Lewis56509652019-12-06 12:51:58415 * @this {RequestHeadersView}
Amanda Bakere2bb99d2019-10-25 01:28:43416 */
417 const toggleURLDecoding = function(event) {
418 listItemElement.removeEventListener('contextmenu', viewSourceContextMenu);
419 this._toggleURLDecoding(event);
420 };
421
422 /**
423 * @param {!Event} event
Paul Lewis56509652019-12-06 12:51:58424 * @this {RequestHeadersView}
Amanda Bakere2bb99d2019-10-25 01:28:43425 */
426 const viewSourceContextMenu = function(event) {
427 if (!paramsTreeElement.expanded) {
428 return;
429 }
Tim van der Lippe0ed1d2b2020-02-04 13:45:13430 const contextMenu = new UI.ContextMenu.ContextMenu(event);
Amanda Bakere2bb99d2019-10-25 01:28:43431 const section = contextMenu.newSection();
432 section.appendItem(ls`View source`, viewSource.bind(this, event));
433 const viewURLEncodedText = this._decodeRequestParameters ? ls`View URL encoded` : ls`View decoded`;
434 section.appendItem(viewURLEncodedText, toggleURLDecoding.bind(this, event));
435 contextMenu.show();
436 }.bind(this);
437
438 const viewSourceButton = this._createViewSourceToggle(/* viewSource */ false, viewSource.bind(this));
439 listItemElement.appendChild(viewSourceButton);
440
441 const toggleTitle = this._decodeRequestParameters ? ls`view URL encoded` : ls`view decoded`;
442 const toggleButton = this._createToggleButton(toggleTitle);
443 toggleButton.addEventListener('click', toggleURLDecoding.bind(this), false);
444 listItemElement.appendChild(toggleButton);
445
446 listItemElement.addEventListener('contextmenu', viewSourceContextMenu);
Blink Reformat4c46d092018-04-07 15:32:37447 }
448
449 /**
450 * @param {*} parsedObject
451 * @param {string} sourceText
452 */
453 _refreshRequestJSONPayload(parsedObject, sourceText) {
Amanda Baker1815fca2019-10-25 01:16:00454 const rootListItem = this._requestPayloadCategory;
455 rootListItem.removeChildren();
Blink Reformat4c46d092018-04-07 15:32:37456
Amanda Baker1815fca2019-10-25 01:16:00457 const rootListItemElement = rootListItem.listItemElement;
458 rootListItemElement.removeChildren();
459 rootListItemElement.createChild('div', 'selection fill');
460 rootListItemElement.createTextChild(this._requestPayloadCategory.title);
461
Paul Lewis56509652019-12-06 12:51:58462 const shouldViewSource = rootListItem[_viewSourceSymbol];
Amanda Baker1815fca2019-10-25 01:16:00463 if (shouldViewSource) {
464 this._appendJSONPayloadSource(rootListItem, parsedObject, sourceText);
465 } else {
466 this._appendJSONPayloadParsed(rootListItem, parsedObject, sourceText);
467 }
468 }
469
470 /**
Paul Lewis56509652019-12-06 12:51:58471 * @param {!Category} rootListItem
Amanda Baker1815fca2019-10-25 01:16:00472 * @param {*} parsedObject
473 * @param {string} sourceText
474 */
475 _appendJSONPayloadSource(rootListItem, parsedObject, sourceText) {
476 const rootListItemElement = rootListItem.listItemElement;
477 this._populateTreeElementWithSourceText(rootListItem, sourceText);
Blink Reformat4c46d092018-04-07 15:32:37478
479 /**
480 * @param {!Event} event
Paul Lewis56509652019-12-06 12:51:58481 * @this {RequestHeadersView}
Blink Reformat4c46d092018-04-07 15:32:37482 */
Amanda Baker1815fca2019-10-25 01:16:00483 const viewParsed = function(event) {
484 rootListItemElement.removeEventListener('contextmenu', viewParsedContextMenu);
Paul Lewis56509652019-12-06 12:51:58485 rootListItem[_viewSourceSymbol] = false;
Blink Reformat4c46d092018-04-07 15:32:37486 this._refreshRequestJSONPayload(parsedObject, sourceText);
487 event.consume();
Amanda Baker1815fca2019-10-25 01:16:00488 };
Blink Reformat4c46d092018-04-07 15:32:37489
Amanda Baker1815fca2019-10-25 01:16:00490 const viewParsedButton = this._createViewSourceToggle(/* viewSource */ true, viewParsed.bind(this));
491 rootListItemElement.appendChild(viewParsedButton);
492
493 /**
494 * @param {!Event} event
Paul Lewis56509652019-12-06 12:51:58495 * @this {RequestHeadersView}
Amanda Baker1815fca2019-10-25 01:16:00496 */
497 const viewParsedContextMenu = function(event) {
498 if (!rootListItem.expanded) {
499 return;
500 }
Tim van der Lippe0ed1d2b2020-02-04 13:45:13501 const contextMenu = new UI.ContextMenu.ContextMenu(event);
Amanda Baker1815fca2019-10-25 01:16:00502 contextMenu.newSection().appendItem(ls`View parsed`, viewParsed.bind(this, event));
503 contextMenu.show();
504 }.bind(this);
505
506 rootListItemElement.addEventListener('contextmenu', viewParsedContextMenu);
507 }
508
509 /**
Paul Lewis56509652019-12-06 12:51:58510 * @param {!Category} rootListItem
Amanda Baker1815fca2019-10-25 01:16:00511 * @param {*} parsedObject
512 * @param {string} sourceText
513 */
514 _appendJSONPayloadParsed(rootListItem, parsedObject, sourceText) {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13515 const object =
516 /** @type {!SDK.RemoteObject.LocalJSONObject} */ (SDK.RemoteObject.RemoteObject.fromLocalObject(parsedObject));
Amanda Baker1815fca2019-10-25 01:16:00517 const section = new ObjectUI.ObjectPropertiesSection.RootElement(object);
518 section.title = object.description;
519 section.expand();
520 section.editable = false;
521 rootListItem.childrenListElement.classList.add('source-code', 'object-properties-section');
522
523 rootListItem.appendChild(section);
524 const rootListItemElement = rootListItem.listItemElement;
525
526 /**
527 * @param {!Event} event
Paul Lewis56509652019-12-06 12:51:58528 * @this {RequestHeadersView}
Amanda Baker1815fca2019-10-25 01:16:00529 */
530 const viewSource = function(event) {
531 rootListItemElement.removeEventListener('contextmenu', viewSourceContextMenu);
532
Paul Lewis56509652019-12-06 12:51:58533 rootListItem[_viewSourceSymbol] = true;
Amanda Baker1815fca2019-10-25 01:16:00534 this._refreshRequestJSONPayload(parsedObject, sourceText);
535 event.consume();
536 };
537
538 /**
539 * @param {!Event} event
Paul Lewis56509652019-12-06 12:51:58540 * @this {RequestHeadersView}
Amanda Baker1815fca2019-10-25 01:16:00541 */
542 const viewSourceContextMenu = function(event) {
543 if (!rootListItem.expanded) {
544 return;
545 }
Tim van der Lippe0ed1d2b2020-02-04 13:45:13546 const contextMenu = new UI.ContextMenu.ContextMenu(event);
Amanda Baker1815fca2019-10-25 01:16:00547 contextMenu.newSection().appendItem(ls`View source`, viewSource.bind(this, event));
548 contextMenu.show();
549 }.bind(this);
550
551 const viewSourceButton = this._createViewSourceToggle(/* viewSource */ false, viewSource.bind(this));
552 rootListItemElement.appendChild(viewSourceButton);
553
554 rootListItemElement.addEventListener('contextmenu', viewSourceContextMenu);
Blink Reformat4c46d092018-04-07 15:32:37555 }
556
557 /**
558 * @param {boolean} viewSource
559 * @param {function(!Event)} handler
560 * @return {!Element}
561 */
562 _createViewSourceToggle(viewSource, handler) {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13563 const viewSourceToggleTitle =
564 viewSource ? Common.UIString.UIString('view parsed') : Common.UIString.UIString('view source');
Blink Reformat4c46d092018-04-07 15:32:37565 const viewSourceToggleButton = this._createToggleButton(viewSourceToggleTitle);
566 viewSourceToggleButton.addEventListener('click', handler, false);
567 return viewSourceToggleButton;
568 }
569
570 /**
571 * @param {!Event} event
572 */
573 _toggleURLDecoding(event) {
574 this._decodeRequestParameters = !this._decodeRequestParameters;
575 this._refreshQueryString();
576 this._refreshFormData();
577 event.consume();
578 }
579
580 _refreshRequestHeaders() {
581 const treeElement = this._requestHeadersCategory;
582 const headers = this._request.requestHeaders().slice();
583 headers.sort(function(a, b) {
584 return a.name.toLowerCase().compareTo(b.name.toLowerCase());
585 });
586 const headersText = this._request.requestHeadersText();
587
Tim van der Lippe1d6e57a2019-09-30 11:55:34588 if (this._showRequestHeadersText && headersText) {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13589 this._refreshHeadersText(Common.UIString.UIString('Request Headers'), headers.length, headersText, treeElement);
Tim van der Lippe1d6e57a2019-09-30 11:55:34590 } else {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13591 this._refreshHeaders(
592 Common.UIString.UIString('Request Headers'), headers, treeElement, headersText === undefined);
Tim van der Lippe1d6e57a2019-09-30 11:55:34593 }
Blink Reformat4c46d092018-04-07 15:32:37594
595 if (headersText) {
596 const toggleButton = this._createHeadersToggleButton(this._showRequestHeadersText);
597 toggleButton.addEventListener('click', this._toggleRequestHeadersText.bind(this), false);
598 treeElement.listItemElement.appendChild(toggleButton);
599 }
600
601 this._refreshFormData();
602 }
603
604 _refreshResponseHeaders() {
605 const treeElement = this._responseHeadersCategory;
606 const headers = this._request.sortedResponseHeaders.slice();
607 const headersText = this._request.responseHeadersText;
608
Joey Arhar7199a942019-09-10 22:37:39609 if (this._showResponseHeadersText) {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13610 this._refreshHeadersText(Common.UIString.UIString('Response Headers'), headers.length, headersText, treeElement);
Joey Arhar7199a942019-09-10 22:37:39611 } else {
Sigurd Schneidera2afe0b2020-03-03 15:27:13612 const headersWithIssues = [];
613 if (this._request.wasBlocked()) {
614 const headerWithIssues = BlockedReasonDetails.get(this._request.blockedReason());
615 if (headerWithIssues) {
616 headersWithIssues.push(headerWithIssues);
617 }
618 }
Joey Arhar7199a942019-09-10 22:37:39619 this._refreshHeaders(
Sigurd Schneidera2afe0b2020-03-03 15:27:13620 Common.UIString.UIString('Response Headers'), mergeHeadersWithIssues(headers, headersWithIssues), treeElement,
621 /* provisional */ false, this._request.blockedResponseCookies());
Joey Arhar7199a942019-09-10 22:37:39622 }
Blink Reformat4c46d092018-04-07 15:32:37623
624 if (headersText) {
625 const toggleButton = this._createHeadersToggleButton(this._showResponseHeadersText);
626 toggleButton.addEventListener('click', this._toggleResponseHeadersText.bind(this), false);
627 treeElement.listItemElement.appendChild(toggleButton);
628 }
Sigurd Schneidera2afe0b2020-03-03 15:27:13629
630 /**
631 *
632 * @param {!Array<*>} headers
633 * @param {!Array<*>} headersWithIssues
634 */
635 function mergeHeadersWithIssues(headers, headersWithIssues) {
636 let i = 0, j = 0;
637 const result = [];
638 while (i < headers.length || j < headersWithIssues.length) {
639 if (i < headers.length && (j >= headersWithIssues.length || headers[i].name < headersWithIssues[j].name)) {
640 result.push({...headers[i++], headerNotSet: false});
641 } else if (
642 j < headersWithIssues.length && (i >= headers.length || headers[i].name > headersWithIssues[j].name)) {
643 result.push({...headersWithIssues[j++], headerNotSet: true});
644 } else if (
645 i < headers.length && j < headersWithIssues.length && headers[i].name === headersWithIssues[j].name) {
646 result.push({...headersWithIssues[j++], ...headers[i++], headerNotSet: false});
647 }
648 }
649 return result;
650 }
Blink Reformat4c46d092018-04-07 15:32:37651 }
652
653 _refreshHTTPInformation() {
654 const requestMethodElement = this._requestMethodItem;
655 requestMethodElement.hidden = !this._request.statusCode;
656 const statusCodeElement = this._statusCodeItem;
657 statusCodeElement.hidden = !this._request.statusCode;
658
659 if (this._request.statusCode) {
660 const statusCodeFragment = createDocumentFragment();
Tsuyoshi Horo41dcffd2019-05-24 03:59:05661 statusCodeFragment.createChild('div', 'header-name').textContent = ls`Status Code` +
662 ': ';
Blink Reformat4c46d092018-04-07 15:32:37663 statusCodeFragment.createChild('span', 'header-separator');
664
Joel Einbinder7fbe24c2019-01-24 05:19:01665 const statusCodeImage = statusCodeFragment.createChild('span', 'resource-status-image', 'dt-icon-label');
Blink Reformat4c46d092018-04-07 15:32:37666 statusCodeImage.title = this._request.statusCode + ' ' + this._request.statusText;
667
Tim van der Lippe1d6e57a2019-09-30 11:55:34668 if (this._request.statusCode < 300 || this._request.statusCode === 304) {
Blink Reformat4c46d092018-04-07 15:32:37669 statusCodeImage.type = 'smallicon-green-ball';
Tim van der Lippe1d6e57a2019-09-30 11:55:34670 } else if (this._request.statusCode < 400) {
Blink Reformat4c46d092018-04-07 15:32:37671 statusCodeImage.type = 'smallicon-orange-ball';
Tim van der Lippe1d6e57a2019-09-30 11:55:34672 } else {
Blink Reformat4c46d092018-04-07 15:32:37673 statusCodeImage.type = 'smallicon-red-ball';
Tim van der Lippe1d6e57a2019-09-30 11:55:34674 }
Blink Reformat4c46d092018-04-07 15:32:37675
Tsuyoshi Horo41dcffd2019-05-24 03:59:05676 requestMethodElement.title = this._formatHeader(ls`Request Method`, this._request.requestMethod);
Blink Reformat4c46d092018-04-07 15:32:37677
678 const statusTextElement = statusCodeFragment.createChild('div', 'header-value source-code');
679 let statusText = this._request.statusCode + ' ' + this._request.statusText;
Ben Kelly0375f502018-09-11 17:05:50680 if (this._request.cachedInMemory()) {
Tsuyoshi Horo41dcffd2019-05-24 03:59:05681 statusText += ' ' + ls`(from memory cache)`;
Ben Kelly0375f502018-09-11 17:05:50682 statusTextElement.classList.add('status-from-cache');
683 } else if (this._request.fetchedViaServiceWorker) {
Tsuyoshi Horo41dcffd2019-05-24 03:59:05684 statusText += ' ' + ls`(from ServiceWorker)`;
Blink Reformat4c46d092018-04-07 15:32:37685 statusTextElement.classList.add('status-from-cache');
Tsuyoshi Horo8f6a2b12018-10-01 22:24:03686 } else if (
687 this._request.redirectSource() && this._request.redirectSource().signedExchangeInfo() &&
688 !this._request.redirectSource().signedExchangeInfo().errors) {
Tsuyoshi Horo41dcffd2019-05-24 03:59:05689 statusText += ' ' + ls`(from signed-exchange)`;
690 statusTextElement.classList.add('status-from-cache');
691 } else if (this._request.fromPrefetchCache()) {
692 statusText += ' ' + ls`(from prefetch cache)`;
Tsuyoshi Horo02266c32018-05-21 17:01:18693 statusTextElement.classList.add('status-from-cache');
Blink Reformat4c46d092018-04-07 15:32:37694 } else if (this._request.cached()) {
Tsuyoshi Horo41dcffd2019-05-24 03:59:05695 statusText += ' ' + ls`(from disk cache)`;
Blink Reformat4c46d092018-04-07 15:32:37696 statusTextElement.classList.add('status-from-cache');
697 }
698 statusTextElement.textContent = statusText;
699
700 statusCodeElement.title = statusCodeFragment;
701 }
702 }
703
704 /**
705 * @param {string} title
Tim van der Lippe0ed1d2b2020-02-04 13:45:13706 * @param {!UI.TreeOutline.TreeElement} headersTreeElement
Blink Reformat4c46d092018-04-07 15:32:37707 * @param {number} headersLength
708 */
709 _refreshHeadersTitle(title, headersTreeElement, headersLength) {
710 headersTreeElement.listItemElement.removeChildren();
Amanda Baker2e19a1b2019-10-25 00:41:02711 headersTreeElement.listItemElement.createChild('div', 'selection fill');
Blink Reformat4c46d092018-04-07 15:32:37712 headersTreeElement.listItemElement.createTextChild(title);
713
Tim van der Lippe0ed1d2b2020-02-04 13:45:13714 const headerCount = Common.UIString.UIString('\xA0(%d)', headersLength);
Blink Reformat4c46d092018-04-07 15:32:37715 headersTreeElement.listItemElement.createChild('span', 'header-count').textContent = headerCount;
716 }
717
718 /**
719 * @param {string} title
720 * @param {!Array.<!SDK.NetworkRequest.NameValue>} headers
Tim van der Lippe0ed1d2b2020-02-04 13:45:13721 * @param {!UI.TreeOutline.TreeElement} headersTreeElement
Blink Reformat4c46d092018-04-07 15:32:37722 * @param {boolean=} provisionalHeaders
Joey Arhar7199a942019-09-10 22:37:39723 * @param {!Array<!SDK.NetworkRequest.BlockedSetCookieWithReason>=} blockedResponseCookies
Blink Reformat4c46d092018-04-07 15:32:37724 */
Joey Arhar7199a942019-09-10 22:37:39725 _refreshHeaders(title, headers, headersTreeElement, provisionalHeaders, blockedResponseCookies) {
Blink Reformat4c46d092018-04-07 15:32:37726 headersTreeElement.removeChildren();
727
728 const length = headers.length;
729 this._refreshHeadersTitle(title, headersTreeElement, length);
730
731 if (provisionalHeaders) {
Joey Arhara613f912020-01-17 22:46:57732 let cautionText;
733 let cautionTitle = '';
734 if (this._request.cachedInMemory() || this._request.cached()) {
735 cautionText = ls`Provisional headers are shown. Disable cache to see full headers.`;
736 cautionTitle = ls
737 `Only provisional headers are available because this request was not sent over the network and instead was served from a local cache, which doesn't store the original request headers. Disable cache to see full request headers.`;
738 } else {
739 cautionText = ls`Provisional headers are shown`;
740 }
741 const cautionElement = createElement('div');
742 cautionElement.title = cautionTitle;
743 cautionElement.createChild('span', '', 'dt-icon-label').type = 'smallicon-warning';
744 cautionElement.createChild('div', 'caution').textContent = cautionText;
Tim van der Lippe0ed1d2b2020-02-04 13:45:13745 const cautionTreeElement = new UI.TreeOutline.TreeElement(cautionElement);
Blink Reformat4c46d092018-04-07 15:32:37746 headersTreeElement.appendChild(cautionTreeElement);
747 }
748
Joey Arhar41a5fad2019-09-13 22:18:45749 /** @type {!Map<string, !Array<!Protocol.Network.SetCookieBlockedReason>>} */
750 const blockedCookieLineToReasons = new Map();
Joey Arhar7199a942019-09-10 22:37:39751 if (blockedResponseCookies) {
752 blockedResponseCookies.forEach(blockedCookie => {
Joey Arhar41a5fad2019-09-13 22:18:45753 blockedCookieLineToReasons.set(blockedCookie.cookieLine, blockedCookie.blockedReasons);
Joey Arhar7199a942019-09-10 22:37:39754 });
755 }
756
Blink Reformat4c46d092018-04-07 15:32:37757 headersTreeElement.hidden = !length && !provisionalHeaders;
758 for (let i = 0; i < length; ++i) {
Sigurd Schneidera2afe0b2020-03-03 15:27:13759 const headerTreeElement = new UI.TreeOutline.TreeElement(this._formatHeaderObject(headers[i]));
Paul Lewis56509652019-12-06 12:51:58760 headerTreeElement[_headerNameSymbol] = headers[i].name;
Joey Arhar7199a942019-09-10 22:37:39761
762 if (headers[i].name.toLowerCase() === 'set-cookie') {
Joey Arhar41a5fad2019-09-13 22:18:45763 const matchingBlockedReasons = blockedCookieLineToReasons.get(headers[i].value);
764 if (matchingBlockedReasons) {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13765 const icon = UI.Icon.Icon.create('smallicon-warning', '');
Joey Arhar7199a942019-09-10 22:37:39766 headerTreeElement.listItemElement.appendChild(icon);
Joey Arhar41a5fad2019-09-13 22:18:45767
768 let titleText = '';
769 for (const blockedReason of matchingBlockedReasons) {
Tim van der Lippe1d6e57a2019-09-30 11:55:34770 if (titleText) {
Joey Arhar41a5fad2019-09-13 22:18:45771 titleText += '\n';
Tim van der Lippe1d6e57a2019-09-30 11:55:34772 }
Joey Arhar41a5fad2019-09-13 22:18:45773 titleText += SDK.NetworkRequest.setCookieBlockedReasonToUiString(blockedReason);
774 }
775 icon.title = titleText;
Joey Arhar7199a942019-09-10 22:37:39776 }
777 }
778
779 headersTreeElement.appendChild(headerTreeElement);
Blink Reformat4c46d092018-04-07 15:32:37780 }
781 }
782
783 /**
784 * @param {string} title
785 * @param {number} count
786 * @param {string} headersText
Tim van der Lippe0ed1d2b2020-02-04 13:45:13787 * @param {!UI.TreeOutline.TreeElement} headersTreeElement
Blink Reformat4c46d092018-04-07 15:32:37788 */
789 _refreshHeadersText(title, count, headersText, headersTreeElement) {
790 this._populateTreeElementWithSourceText(headersTreeElement, headersText);
791 this._refreshHeadersTitle(title, headersTreeElement, count);
792 }
793
794 _refreshRemoteAddress() {
795 const remoteAddress = this._request.remoteAddress();
796 const treeElement = this._remoteAddressItem;
797 treeElement.hidden = !remoteAddress;
Tim van der Lippe1d6e57a2019-09-30 11:55:34798 if (remoteAddress) {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13799 treeElement.title = this._formatHeader(Common.UIString.UIString('Remote Address'), remoteAddress);
Tim van der Lippe1d6e57a2019-09-30 11:55:34800 }
Blink Reformat4c46d092018-04-07 15:32:37801 }
802
803 _refreshReferrerPolicy() {
804 const referrerPolicy = this._request.referrerPolicy();
805 const treeElement = this._referrerPolicyItem;
806 treeElement.hidden = !referrerPolicy;
Tim van der Lippe1d6e57a2019-09-30 11:55:34807 if (referrerPolicy) {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13808 treeElement.title = this._formatHeader(Common.UIString.UIString('Referrer Policy'), referrerPolicy);
Tim van der Lippe1d6e57a2019-09-30 11:55:34809 }
Blink Reformat4c46d092018-04-07 15:32:37810 }
811
812 /**
813 * @param {!Event} event
814 */
815 _toggleRequestHeadersText(event) {
816 this._showRequestHeadersText = !this._showRequestHeadersText;
817 this._refreshRequestHeaders();
818 event.consume();
819 }
820
821 /**
822 * @param {!Event} event
823 */
824 _toggleResponseHeadersText(event) {
825 this._showResponseHeadersText = !this._showResponseHeadersText;
826 this._refreshResponseHeaders();
827 event.consume();
828 }
829
830 /**
831 * @param {string} title
832 * @return {!Element}
833 */
834 _createToggleButton(title) {
Tim van der Lippef49e2322020-05-01 15:03:09835 const button = document.createElement('span');
836 button.classList.add('header-toggle');
Blink Reformat4c46d092018-04-07 15:32:37837 button.textContent = title;
838 return button;
839 }
840
841 /**
842 * @param {boolean} isHeadersTextShown
843 * @return {!Element}
844 */
845 _createHeadersToggleButton(isHeadersTextShown) {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13846 const toggleTitle =
847 isHeadersTextShown ? Common.UIString.UIString('view parsed') : Common.UIString.UIString('view source');
Blink Reformat4c46d092018-04-07 15:32:37848 return this._createToggleButton(toggleTitle);
849 }
850
851 _clearHighlight() {
Tim van der Lippe1d6e57a2019-09-30 11:55:34852 if (this._highlightedElement) {
Blink Reformat4c46d092018-04-07 15:32:37853 this._highlightedElement.listItemElement.classList.remove('header-highlight');
Tim van der Lippe1d6e57a2019-09-30 11:55:34854 }
Blink Reformat4c46d092018-04-07 15:32:37855 this._highlightedElement = null;
856 }
857
858
859 /**
Tim van der Lippe0ed1d2b2020-02-04 13:45:13860 * @param {?UI.TreeOutline.TreeElement} category
Blink Reformat4c46d092018-04-07 15:32:37861 * @param {string} name
862 */
863 _revealAndHighlight(category, name) {
864 this._clearHighlight();
865 for (const element of category.children()) {
Paul Lewis56509652019-12-06 12:51:58866 if (element[_headerNameSymbol] !== name) {
Blink Reformat4c46d092018-04-07 15:32:37867 continue;
Tim van der Lippe1d6e57a2019-09-30 11:55:34868 }
Blink Reformat4c46d092018-04-07 15:32:37869 this._highlightedElement = element;
870 element.reveal();
871 element.listItemElement.classList.add('header-highlight');
872 return;
873 }
874 }
875
876 /**
877 * @param {string} header
878 */
879 revealRequestHeader(header) {
880 this._revealAndHighlight(this._requestHeadersCategory, header);
881 }
882
883 /**
884 * @param {string} header
885 */
886 revealResponseHeader(header) {
887 this._revealAndHighlight(this._responseHeadersCategory, header);
888 }
Paul Lewis56509652019-12-06 12:51:58889}
Blink Reformat4c46d092018-04-07 15:32:37890
Paul Lewis56509652019-12-06 12:51:58891export const _headerNameSymbol = Symbol('HeaderName');
892export const _viewSourceSymbol = Symbol('ViewSource');
Blink Reformat4c46d092018-04-07 15:32:37893
894/**
895 * @unrestricted
896 */
Tim van der Lippe0ed1d2b2020-02-04 13:45:13897export class Category extends UI.TreeOutline.TreeElement {
Blink Reformat4c46d092018-04-07 15:32:37898 /**
Tim van der Lippe0ed1d2b2020-02-04 13:45:13899 * @param {!UI.TreeOutline.TreeOutline} root
Blink Reformat4c46d092018-04-07 15:32:37900 * @param {string} name
901 * @param {string=} title
902 */
903 constructor(root, name, title) {
904 super(title || '', true);
Blink Reformat4c46d092018-04-07 15:32:37905 this.toggleOnClick = true;
906 this.hidden = true;
Paul Lewis2d7d65c2020-03-16 17:26:30907 this._expandedSetting =
908 Common.Settings.Settings.instance().createSetting('request-info-' + name + '-category-expanded', true);
Blink Reformat4c46d092018-04-07 15:32:37909 this.expanded = this._expandedSetting.get();
910 root.appendChild(this);
911 }
912
913 /**
Tim van der Lippe0ed1d2b2020-02-04 13:45:13914 * @return {!UI.TreeOutline.TreeElement}
Blink Reformat4c46d092018-04-07 15:32:37915 */
916 createLeaf() {
Tim van der Lippe0ed1d2b2020-02-04 13:45:13917 const leaf = new UI.TreeOutline.TreeElement();
Blink Reformat4c46d092018-04-07 15:32:37918 this.appendChild(leaf);
919 return leaf;
920 }
921
922 /**
923 * @override
924 */
925 onexpand() {
926 this._expandedSetting.set(true);
927 }
928
929 /**
930 * @override
931 */
932 oncollapse() {
933 this._expandedSetting.set(false);
934 }
Paul Lewis56509652019-12-06 12:51:58935}
Sigurd Schneidera2afe0b2020-03-03 15:27:13936
937
938const BlockedReasonDetails = new Map([
939 [
940 Protocol.Network.BlockedReason.CoepFrameResourceNeedsCoepHeader, {
941 name: 'cross-origin-embedder-policy',
942 value: null,
Sigurd Schneidercae7b532020-03-06 11:20:06943 details: {
944 explanation:
945 ls
946 `To embed this frame in your document, the response needs to enable the cross-origin embedder policy by specifying the following response header:`,
Sigurd Schneidereaadca12020-03-10 13:50:40947 examples: [{codeSnippet:'Cross-Origin-Embedder-Policy: require-corp'}],
948 link: {url: 'https://web.dev/coop-coep/'}
Sigurd Schneidercae7b532020-03-06 11:20:06949 }
Sigurd Schneidera2afe0b2020-03-03 15:27:13950 }
951 ],
952 [
953 Protocol.Network.BlockedReason.CorpNotSameOriginAfterDefaultedToSameOriginByCoep, {
954 name: 'cross-origin-resource-policy',
955 value: null,
Sigurd Schneidercae7b532020-03-06 11:20:06956 details: {
957 explanation:
958 ls
959 `To use this resource from a different origin, the server needs to specify a cross-origin resource policy in the response headers:`,
960 examples: [
961 {codeSnippet:'Cross-Origin-Resource-Policy: same-site', comment: ls`Choose this option if the resource and the document are served from the same site.` },
962 {codeSnippet:'Cross-Origin-Resource-Policy: cross-origin', comment: ls`Only choose this option if an arbitrary website including this resource does not impose a security risk.` },
Sigurd Schneidereaadca12020-03-10 13:50:40963 ],
964 link: {url: 'https://web.dev/coop-coep/'}
Sigurd Schneidercae7b532020-03-06 11:20:06965 }
Sigurd Schneidera2afe0b2020-03-03 15:27:13966 }
967 ],
968 [
969 Protocol.Network.BlockedReason.CoopSandboxedIframeCannotNavigateToCoopPage, {
970 name: 'cross-origin-opener-policy',
971 value: null,
972 headerValueIncorrect: false,
Sigurd Schneidercae7b532020-03-06 11:20:06973 details: {
974 explanation:
975 ls
976 `This document was blocked from loading in an iframe with a sandbox attribute because this document specified a cross-origin opener policy.`,
Sigurd Schneidereaadca12020-03-10 13:50:40977 examples: [],
978 link: {url: 'https://web.dev/coop-coep/'}
Sigurd Schneidercae7b532020-03-06 11:20:06979 }
Sigurd Schneidera2afe0b2020-03-03 15:27:13980 }
981 ],
982 [
983 Protocol.Network.BlockedReason.CorpNotSameSite, {
984 name: 'cross-origin-resource-policy',
985 value: null,
986 headerValueIncorrect: true,
Sigurd Schneidercae7b532020-03-06 11:20:06987 details: {
988 explanation:
989 ls
990 `To use this resource from a different site, the server may relax the cross-origin resource policy response header:`,
991 examples: [
992 {codeSnippet:'Cross-Origin-Resource-Policy: cross-origin', comment: ls`Only choose this option if an arbitrary website including this resource does not impose a security risk.` },
993 ]
994 }
Sigurd Schneidera2afe0b2020-03-03 15:27:13995 }
996 ],
997 [
998 Protocol.Network.BlockedReason.CorpNotSameOrigin, {
999 name: 'cross-origin-resource-policy',
1000 value: null,
1001 headerValueIncorrect: true,
Sigurd Schneidercae7b532020-03-06 11:20:061002 details: {
1003 explanation:
1004 ls
1005 `To use this resource from a different origin, the server may relax the cross-origin resource policy response header:`,
1006 examples: [
1007 {codeSnippet:'Cross-Origin-Resource-Policy: same-site', comment: ls`Choose this option if the resource and the document are served from the same site.` },
1008 {codeSnippet:'Cross-Origin-Resource-Policy: cross-origin', comment: ls`Only choose this option if an arbitrary website including this resource does not impose a security risk.` },
1009 ]
1010 }
Sigurd Schneidera2afe0b2020-03-03 15:27:131011 }
1012 ],
1013]);