chrome-devtools-frontend 1.0.1661063 → 1.0.1662965

package/front_end/panels/network/RequestPayloadView.ts

@@ -109,8 +109,10 @@ const str_ = i18n.i18n.registerUIStrings('panels/network/RequestPayloadView.ts',
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 interface ViewInput {
-  decodeRequestParameters: boolean;
-  setURLDecoding(value: boolean): void;
+  decodeQueryParameters: boolean;
+  setDecodeQueryParameters(value: boolean): void;
+  decodeFormParameters: boolean;
+  setDecodeFormParameters(value: boolean): void;
   viewQueryParamSource: boolean;
   setViewQueryParamSource(value: boolean): void;
   viewFormParamSource: boolean;
@@ -157,15 +159,28 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         </devtools-widget>
       </li>`;
 
-  const createParsedParams = (params: SDK.NetworkRequest.NameValue[]): TemplateResult[] => params.map(
-      param => html`<li role=treeitem @contextmenu=${
-          copyValueContextmenu(i18nString(UIStrings.copyValue), () => decodeURIComponent(param.value), 'copy-value')}>${
-          param.name !== '' ?
-              html`${RequestPayloadView.formatParameter(param.name, 'payload-name', input.decodeRequestParameters)}${
-                  RequestPayloadView.formatParameter(
-                      param.value, 'payload-value source-code', input.decodeRequestParameters)}` :
-              RequestPayloadView.formatParameter(
-                  i18nString(UIStrings.empty), 'empty-request-payload', input.decodeRequestParameters)}</li>`);
+  const createParsedParams = (params: SDK.NetworkRequest.NameValue[],
+                              decodeParameters: boolean): TemplateResult[] => params.map(param => {
+    // clang-format off
+        return html`
+        <li role=treeitem
+            @contextmenu=${copyValueContextmenu(
+                i18nString(UIStrings.copyValue),
+                () => decodeURIComponent(param.value),
+                'copy-value'
+            )}>
+          ${param.name !== '' ? html`
+            ${RequestPayloadView.formatParameter(param.name, 'payload-name', decodeParameters)}
+            ${RequestPayloadView.formatParameter(param.value, 'payload-value source-code', decodeParameters)}
+          ` : RequestPayloadView.formatParameter(
+              i18nString(UIStrings.empty),
+              'empty-request-payload',
+              decodeParameters
+          )}
+        </li>
+      `;
+    // clang-format on
+  });
 
   const parsedFormData = (() => {
     if (input.formData && !input.formParameters) {
@@ -201,24 +216,23 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   const requestPayloadExpandedSetting =
       Common.Settings.Settings.instance().createSetting('request-info-request-payload-category-expanded', true);
 
-  const toggleURLDecoding = (e: Event): void => {
-    e.consume();
-    input.setURLDecoding(!input.decodeRequestParameters);
-  };
-
-  const onContextMenu = (viewSource: boolean, callback: (value: boolean) => void, includeURLDecodingOption = true) => (
-      event: Event): void => {
+  const onContextMenu = (
+      viewSource: boolean,
+      setViewSource: (value: boolean) => void,
+      decoding?: {decode: boolean, toggleDecode: () => void},
+      ) => (event: Event): void => {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     const section = contextMenu.newSection();
     if (viewSource) {
-      section.appendItem(i18nString(UIStrings.viewParsed), () => callback(!viewSource), {jslogContext: 'view-parsed'});
+      section.appendItem(i18nString(UIStrings.viewParsed), () => setViewSource(!viewSource),
+                         {jslogContext: 'view-parsed'});
     } else {
-      section.appendItem(i18nString(UIStrings.viewSource), () => callback(!viewSource), {jslogContext: 'view-source'});
-      if (includeURLDecodingOption) {
+      section.appendItem(i18nString(UIStrings.viewSource), () => setViewSource(!viewSource),
+                         {jslogContext: 'view-source'});
+      if (decoding) {
         const viewURLEncodedText =
-            input.decodeRequestParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded);
-        section.appendItem(
-            viewURLEncodedText, toggleURLDecoding.bind(this, event), {jslogContext: 'toggle-url-decoding'});
+            decoding.decode ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded);
+        section.appendItem(viewURLEncodedText, () => decoding.toggleDecode(), {jslogContext: 'toggle-url-decoding'});
       }
     }
     void contextMenu.show();
@@ -235,7 +249,14 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           role=treeitem
           ?hidden=${!input.queryParameters}
           jslog=${VisualLogging.section().context('query-string')}
-          @contextmenu=${onContextMenu(input.viewQueryParamSource, input.setViewQueryParamSource)}
+          @contextmenu=${onContextMenu(
+              input.viewQueryParamSource,
+              input.setViewQueryParamSource,
+              {
+                decode: input.decodeQueryParameters,
+                toggleDecode: () => input.setDecodeQueryParameters(!input.decodeQueryParameters),
+              }
+          )}
           @expanded=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) =>
             queryStringExpandedSetting.set(e.detail.expanded)}
           ?open=${queryStringExpandedSetting.get()}
@@ -248,19 +269,26 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             ?hidden=${input.viewQueryParamSource}
             jslog=${VisualLogging.action().track({click: true}).context('decode-encode')}
             .variant=${Buttons.Button.Variant.OUTLINED}
-            @click=${toggleURLDecoding}>
-          ${input.decodeRequestParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded)}
+            @click=${(e: Event) => { e.consume(); input.setDecodeQueryParameters(!input.decodeQueryParameters); }}>
+          ${input.decodeQueryParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded)}
         </devtools-button>
         <ul role=group>
           ${ifExpanded(input.viewQueryParamSource ? createSourceText(input.queryString ?? '')
-                                                  : createParsedParams(input.queryParameters ?? []))}
+                                                  : createParsedParams(input.queryParameters ?? [], input.decodeQueryParameters))}
         </ul>
       </li>
       <li
           role=treeitem
           ?hidden=${!input.formData || !input.formParameters}
           jslog=${VisualLogging.section().context('form-data')}
-          @contextmenu=${onContextMenu(input.viewFormParamSource, input.setViewFormParamSource)}
+          @contextmenu=${onContextMenu(
+              input.viewFormParamSource,
+              input.setViewFormParamSource,
+              {
+                decode: input.decodeFormParameters,
+                toggleDecode: () => input.setDecodeFormParameters(!input.decodeFormParameters),
+              }
+          )}
           @expanded=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => formDataExpandedSetting.set(e.detail.expanded)}
           ?open=${formDataExpandedSetting.get()}
         >
@@ -272,20 +300,22 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             ?hidden=${input.viewFormParamSource}
             jslog=${VisualLogging.action().track({click: true}).context('decode-encode')}
             .variant=${Buttons.Button.Variant.OUTLINED}
-            @click=${toggleURLDecoding}>
-          ${input.decodeRequestParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded)}
+            @click=${(e: Event) => { e.consume(); input.setDecodeFormParameters(!input.decodeFormParameters); }}>
+          ${input.decodeFormParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded)}
         </devtools-button>
         <ul role=group>
           ${ifExpanded(input.viewFormParamSource ? createSourceText(input.formData ?? '')
-                                                 : createParsedParams(input.formParameters ?? []))}
+                                                 : createParsedParams(input.formParameters ?? [], input.decodeFormParameters))}
         </ul>
       </li>
       <li
           role=treeitem
           ?hidden=${!input.formData || Boolean(input.formParameters) || Boolean(input.binaryPayloadContentData)}
           jslog=${VisualLogging.section().context('request-payload')}
-          @contextmenu=${onContextMenu(input.viewJSONPayloadSource, input.setViewJSONPayloadSource,
-                                       /* includeURLDecodingOption*/ false)}
+          @contextmenu=${onContextMenu(
+              input.viewJSONPayloadSource,
+              input.setViewJSONPayloadSource,
+          )}
           @expanded=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) =>
             requestPayloadExpandedSetting.set(e.detail.expanded)}
           ?open=${requestPayloadExpandedSetting.get()}
@@ -324,7 +354,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
 export class RequestPayloadView extends UI.Widget.VBox {
   #request?: SDK.NetworkRequest.NetworkRequest;
-  #decodeRequestParameters = true;
+  #decodeQueryParameters = true;
+  #decodeFormParameters = true;
   #formData?: string;
   #formParameters?: SDK.NetworkRequest.NameValue[];
   #binaryPayloadContentData: TextUtils.ContentData.ContentData|null = null;
@@ -345,9 +376,11 @@ export class RequestPayloadView extends UI.Widget.VBox {
     }
     this.#request = request;
 
+    this.#decodeQueryParameters = true;
+    this.#decodeFormParameters = true;
     const contentType = request.requestContentType();
     if (contentType) {
-      this.#decodeRequestParameters = Boolean(contentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i));
+      this.#decodeFormParameters = Boolean(contentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i));
     }
 
     if (this.isShowing()) {
@@ -402,9 +435,14 @@ export class RequestPayloadView extends UI.Widget.VBox {
       queryParameters: this.request.queryParameters,
       formData: this.#formData,
       formParameters: this.#formParameters,
-      decodeRequestParameters: this.#decodeRequestParameters,
-      setURLDecoding: (value: boolean): void => {
-        this.#decodeRequestParameters = value;
+      decodeQueryParameters: this.#decodeQueryParameters,
+      setDecodeQueryParameters: (value: boolean): void => {
+        this.#decodeQueryParameters = value;
+        this.requestUpdate();
+      },
+      decodeFormParameters: this.#decodeFormParameters,
+      setDecodeFormParameters: (value: boolean): void => {
+        this.#decodeFormParameters = value;
         this.requestUpdate();
       },
       viewQueryParamSource: this.#viewQueryParamSource,

package/front_end/panels/network/components/ResponseHeaderSection.ts

@@ -170,12 +170,14 @@ export class ResponseHeaderSection extends ResponseHeaderSectionBase {
           BlockedReasonDetails.get((this.#request.blockedReason() as Protocol.Network.BlockedReason));
       if (headerWithIssues) {
         if (IssuesManager.RelatedIssue.hasIssueOfCategory(
-                this.#request, IssuesManager.Issue.IssueCategory.CROSS_ORIGIN_EMBEDDER_POLICY)) {
+                this.#request, IssuesManager.Issue.IssueCategory.CROSS_ORIGIN_EMBEDDER_POLICY,
+                IssuesManager.IssuesManager.IssuesManager.instance())) {
           const followLink = (): void => {
             Host.userMetrics.issuesPanelOpenedFrom(Host.UserMetrics.IssueOpener.LEARN_MORE_LINK_COEP);
             if (this.#request) {
-              void IssuesManager.RelatedIssue.reveal(
-                  this.#request, IssuesManager.Issue.IssueCategory.CROSS_ORIGIN_EMBEDDER_POLICY);
+              void IssuesManager.RelatedIssue.reveal(this.#request,
+                                                     IssuesManager.IssuesManager.IssuesManager.instance(),
+                                                     IssuesManager.Issue.IssueCategory.CROSS_ORIGIN_EMBEDDER_POLICY);
             }
           };
           if (headerWithIssues.blockedDetails) {

package/front_end/panels/network/networkLogView.css

@@ -262,12 +262,17 @@ td.time-column {
 }
 
 .data-grid-data-grid-node devtools-icon[name="arrow-up-down-circle"],
+.data-grid-data-grid-node devtools-icon.network-console-icon,
 .network-log-grid.data-grid.small .icon {
   width: 16px;
   height: 16px;
   vertical-align: sub;
 }
 
+.data-grid-data-grid-node devtools-icon.network-console-icon {
+  margin-right: 3px;
+}
+
 .image-network-icon-preview {
   inset: 0;
   margin: auto;

package/front_end/panels/network/requestInitiatorViewTree.css

@@ -17,6 +17,11 @@
   padding: 4px;
 }
 
+.console-origin-label {
+  color: var(--sys-color-token-subtle);
+  padding: 2px 4px 2px 20px;
+}
+
 .request-initiator-view-section-title:focus-visible {
   background-color: var(--sys-color-state-focus-highlight);
 }