chrome-devtools-frontend 1.0.1661063 → 1.0.1662289

package/front_end/panels/emulation/DeviceModeView.ts

@@ -113,9 +113,17 @@ export class DeviceModeView extends UI.Widget.VBox {
     this.showRulersSetting = Common.Settings.Settings.instance().moduleSetting('emulation.show-rulers');
     this.showRulersSetting.addChangeListener(this.updateUI, this);
 
-    this.topRuler = new Ruler(true, this.model.setWidthAndScaleToFit.bind(this.model));
+    this.topRuler = new Ruler();
+    this.topRuler.horizontal = true;
+    this.topRuler.addEventListener(RulerEvents.MARKER_SELECTED, event => {
+      this.model.setWidthAndScaleToFit(event.data);
+    });
     this.topRuler.element.classList.add('device-mode-ruler-top');
-    this.leftRuler = new Ruler(false, this.model.setHeightAndScaleToFit.bind(this.model));
+    this.leftRuler = new Ruler();
+    this.leftRuler.horizontal = false;
+    this.leftRuler.addEventListener(RulerEvents.MARKER_SELECTED, event => {
+      this.model.setHeightAndScaleToFit(event.data);
+    });
     this.leftRuler.element.classList.add('device-mode-ruler-left');
     this.createUI();
     UI.ZoomManager.ZoomManager.instance().addEventListener(UI.ZoomManager.Events.ZOOM_CHANGED, this.zoomChanged, this);
@@ -566,86 +574,147 @@ export class DeviceModeView extends UI.Widget.VBox {
   }
 }
 
-export class Ruler extends UI.Widget.VBox {
-  #contentElement: HTMLElement;
-  private readonly horizontal: boolean;
-  private scale: number;
-  private readonly throttler: Common.Throttler.Throttler;
-  private readonly applyCallback: (arg0: number) => void;
-  constructor(horizontal: boolean, applyCallback: (arg0: number) => void) {
-    super({jslog: `${VisualLogging.deviceModeRuler().track({click: true})}`});
-    this.element.classList.add('device-mode-ruler');
-    this.#contentElement =
-        this.element.createChild('div', 'device-mode-ruler-content').createChild('div', 'device-mode-ruler-inner');
-    this.horizontal = horizontal;
-    this.scale = 1;
-    this.throttler = new Common.Throttler.Throttler(0);
-    this.applyCallback = applyCallback;
+export interface RulerViewInput {
+  horizontal: boolean;
+  scale: number;
+  onMarkerClick: (size: number) => void;
+}
+
+export type RulerView = (input: RulerViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_RULER_VIEW: RulerView = (input: RulerViewInput, output: undefined, target: HTMLElement): void => {
+  const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
+  const size = input.horizontal ? target.offsetWidth : target.offsetHeight;
+
+  const dipSize = size * zoomFactor / input.scale;
+  const count = Math.ceil(dipSize / 5);
+  let step = 1;
+  if (input.scale < 0.8) {
+    step = 2;
+  }
+  if (input.scale < 0.6) {
+    step = 4;
+  }
+  if (input.scale < 0.4) {
+    step = 8;
+  }
+  if (input.scale < 0.2) {
+    step = 16;
+  }
+  if (input.scale < 0.1) {
+    step = 32;
   }
 
-  render(scale: number): void {
-    this.scale = scale;
-    void this.throttler.schedule(this.update.bind(this));
+  const markers = [];
+  for (let i = 0; i < count; i++) {
+    if (i % step) {
+      continue;
+    }
+    const isLarge = !(i % 10);
+    const isMedium = !(i % 5);
+    const offset = i ? `${(5 * i) * input.scale / zoomFactor}px` : undefined;
+
+    // clang-format off
+    markers.push(html`
+      <div
+        class=${classMap({
+          'device-mode-ruler-marker': true,
+          'device-mode-ruler-marker-large': isLarge,
+          'device-mode-ruler-marker-medium': isMedium && !isLarge,
+        })}
+        style=${styleMap(input.horizontal ? {left: offset} : {top: offset})}>
+          ${i && !(i % 20) ?
+            html`<div class="device-mode-ruler-text" @click=${() => input.onMarkerClick(i * 5)}>${i * 5}</div>` :
+            nothing}
+      </div>
+    `);
+    // clang-format on
   }
 
-  override onResize(): void {
-    void this.throttler.schedule(this.update.bind(this));
+  render(html`
+    <div class="device-mode-ruler-content">
+      <div class="device-mode-ruler-inner">
+        ${markers}
+      </div>
+    </div>
+  `,
+         target, {
+           container: {
+             classes: ['device-mode-ruler'],
+             attributes: {jslog: VisualLogging.deviceModeRuler().track({click: true})},
+           },
+         });
+};
+
+export const enum RulerEvents {
+  MARKER_SELECTED = 'MarkerSelected',
+}
+
+export interface RulerEventTypes {
+  [RulerEvents.MARKER_SELECTED]: number;
+}
+
+export class Ruler extends Common.ObjectWrapper.eventMixin<RulerEventTypes, typeof UI.Widget.Widget>(UI.Widget.Widget) {
+  #view: RulerView;
+  #horizontal = true;
+  #scale = 1;
+
+  constructor(element?: HTMLElement, view: RulerView = DEFAULT_RULER_VIEW) {
+    super(element);
+    this.#view = view;
   }
 
-  update(): void {
-    const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
-    const size = this.horizontal ? this.#contentElement.offsetWidth : this.#contentElement.offsetHeight;
+  get horizontal(): boolean {
+    return this.#horizontal;
+  }
 
-    const dipSize = size * zoomFactor / this.scale;
-    const count = Math.ceil(dipSize / 5);
-    let step = 1;
-    if (this.scale < 0.8) {
-      step = 2;
-    }
-    if (this.scale < 0.6) {
-      step = 4;
-    }
-    if (this.scale < 0.4) {
-      step = 8;
-    }
-    if (this.scale < 0.2) {
-      step = 16;
-    }
-    if (this.scale < 0.1) {
-      step = 32;
+  set horizontal(horizontal: boolean) {
+    if (this.#horizontal === horizontal) {
+      return;
     }
+    this.#horizontal = horizontal;
+    this.requestUpdate();
+  }
 
-    const markers = [];
-    for (let i = 0; i < count; i++) {
-      if (i % step) {
-        continue;
-      }
-      const isLarge = !(i % 10);
-      const isMedium = !(i % 5);
-      const offset = i ? `${(5 * i) * this.scale / zoomFactor}px` : undefined;
-
-      // clang-format off
-      markers.push(html`
-        <div
-          class=${classMap({
-            'device-mode-ruler-marker': true,
-            'device-mode-ruler-marker-large': isLarge,
-            'device-mode-ruler-marker-medium': isMedium && !isLarge,
-          })}
-          style=${styleMap(this.horizontal ? {left: offset} : {top: offset})}>
-            ${i && !(i % 20) ?
-              html`<div class="device-mode-ruler-text" @click=${() => this.onMarkerClick(i * 5)}>${i * 5}</div>` :
-              nothing}
-        </div>
-      `);
-      // clang-format on
+  get scale(): number {
+    return this.#scale;
+  }
+
+  set scale(scale: number) {
+    if (this.#scale === scale) {
+      return;
     }
+    this.#scale = scale;
+    this.requestUpdate();
+  }
 
-    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-    render(html`${markers}`, this.#contentElement);
+  render(scale: number): void {
+    this.scale = scale;
   }
 
-  private onMarkerClick(size: number): void {
-    this.applyCallback.call(null, size);
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  override onResize(): void {
+    super.onResize();
+    this.requestUpdate();
+  }
+
+  #onMarkerClick = (size: number): void => {
+    this.dispatchEventToListeners(RulerEvents.MARKER_SELECTED, size);
+  };
+
+  override performUpdate(): void {
+    if (!this.isShowing()) {
+      return;
+    }
+    const viewInput: RulerViewInput = {
+      horizontal: this.#horizontal,
+      scale: this.#scale,
+      onMarkerClick: this.#onMarkerClick,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -84,7 +84,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
 
     this.affectedResources = this.createAffectedResources();
     this.#affectedResourcesCount = 0;
-    this.requestResolver = new Logs.RequestResolver.RequestResolver();
+    this.requestResolver = new Logs.RequestResolver.RequestResolver(Logs.NetworkLog.NetworkLog.instance());
     this.#frameListeners = [];
     this.#unresolvedFrameIds = new Set();
   }

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import type * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
+import * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import type * as LighthouseModel from '../../models/lighthouse/lighthouse.js';
@@ -78,6 +78,14 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
   private configForTesting?: object;
   private connection?: ProtocolClient.CDPConnection.CDPConnection;
 
+  /**
+   * Session ids that belong to this Lighthouse run. The proxy only relays
+   * worker commands and connection events that target one of these sessions
+   * so that traffic stays scoped to the parallel session created in
+   * `attach()` and its descendants.
+   */
+  readonly #knownSessionIds = new Set<string>();
+
   /**
    * Tracks pending requests to the Lighthouse worker.
    * Key: The message ID sent to the worker.
@@ -119,6 +127,8 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
 
     const rootTargetId = await rootChildTargetManager.getParentTargetId();
     const {sessionId} = await rootTarget.targetAgent().invoke_attachToTarget({targetId: rootTargetId, flatten: true});
+    this.#knownSessionIds.clear();
+    this.#knownSessionIds.add(sessionId);
     this.connection = connection;
     this.connection.observe(this);
 
@@ -217,6 +227,7 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
     this.rootTarget = undefined;
     this.connection?.unobserve(this);
     this.connection = undefined;
+    this.#knownSessionIds.clear();
 
     if (oldLighthouseWorker) {
       (await oldLighthouseWorker).terminate();
@@ -237,18 +248,29 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
   }
 
   private dispatchProtocolMessage(message: ProtocolClient.CDPConnection.CDPReceivableMessage): void {
-    // A message without a sessionId is the main session of the main target (call it "Main session").
-    // A parallel connection and session was made that connects to the same main target (call it "Lighthouse session").
-    // Messages from the "Lighthouse session" have a sessionId.
-    // Without some care, there is a risk of sending the same events for the same main frame to Lighthouse–the backend
-    // will create events for the "Main session" and the "Lighthouse session".
-    // The workaround–only send message to Lighthouse if:
-    //   * the message has a sessionId (is not for the "Main session")
-    //   * the message does not have a sessionId (is for the "Main session"), but only for the Target domain
-    //     (to kickstart autoAttach in LH).
-    if (message.sessionId || ('method' in message && message.method?.startsWith('Target'))) {
-      void this.send('dispatchProtocolMessage', {message});
+    // The shared CDPConnection carries traffic for every DevTools session. A
+    // parallel session is created for the Lighthouse run in `attach()`, and the
+    // worker only ever needs traffic that belongs to that session or one of the
+    // child sessions it subsequently attaches. Filtering on `#knownSessionIds`
+    // keeps the proxy scoped to the run instead of broadcasting unrelated
+    // session traffic into the worker.
+    if (!message.sessionId || !this.#knownSessionIds.has(message.sessionId)) {
+      return;
+    }
+    if ('method' in message) {
+      if (message.method === 'Target.attachedToTarget') {
+        const childSessionId = (message.params as Protocol.Target.AttachedToTargetEvent | undefined)?.sessionId;
+        if (childSessionId) {
+          this.#knownSessionIds.add(childSessionId);
+        }
+      } else if (message.method === 'Target.detachedFromTarget') {
+        const childSessionId = (message.params as Protocol.Target.DetachedFromTargetEvent | undefined)?.sessionId;
+        if (childSessionId) {
+          this.#knownSessionIds.delete(childSessionId);
+        }
+      }
     }
+    void this.send('dispatchProtocolMessage', {message});
   }
 
   onDisconnect(): void {
@@ -303,11 +325,30 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
 
   private sendProtocolMessage(message: string): void {
     const {id, method, params, sessionId} = JSON.parse(message);
+    // The worker is expected to only address the parallel session created in
+    // `attach()` or sessions discovered beneath it. Anything else, including
+    // the root session, is outside the scope of the run.
+    if (!sessionId || !this.#knownSessionIds.has(sessionId)) {
+      void this.send('dispatchProtocolMessage', {
+        message: {
+          id,
+          sessionId,
+          error: {
+            code: ProtocolClient.CDPConnection.CDPErrorStatus.SESSION_NOT_FOUND,
+            message: `Unknown session id: ${sessionId}`,
+          },
+        },
+      });
+      return;
+    }
     // CDPConnection manages it's own message IDs and it's important, otherwise we'd clash
     // with the rest of the DevTools traffic.
     // Instead, we ignore the ID coming from the worker when sending the command, but
     // patch it back in when sending the response back to the worker.
     void this.connection?.send(method, params, sessionId).then(response => {
+      if ('result' in response && method === 'Target.attachToTarget' && response.result?.sessionId) {
+        this.#knownSessionIds.add(response.result.sessionId);
+      }
       const message =
           'result' in response ? {id, sessionId, result: response.result} : {id, sessionId, error: response.error};
       this.dispatchProtocolMessage(message);

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/profiler/HeapSnapshotView.ts

@@ -1795,8 +1795,8 @@ export class HeapProfileHeader extends ProfileHeader {
 
   setupWorker(): void {
     console.assert(!this.workerProxy, 'HeapSnapshotWorkerProxy already exists');
-    this.workerProxy =
-        new HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotWorkerProxy(this.handleWorkerEvent.bind(this));
+    this.workerProxy = new HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotWorkerProxy(
+        this.handleWorkerEvent.bind(this), Common.Console.Console.instance());
     this.workerProxy.addEventListener(
         HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotWorkerProxy.Events.WAIT, event => {
           this.updateStatus(null, event.data);