chrome-devtools-frontend 1.0.1021097 → 1.0.1022409

package/front_end/panels/network/components/RequestHeadersView.css

@@ -109,3 +109,58 @@ div.raw-headers-row {
   white-space: pre-wrap;
   word-break: break-all;
 }
+
+.header-badge-text {
+  font-variant: small-caps;
+  font-weight: 500;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.header-badge {
+  display: inline;
+  margin-right: 0.75em;
+  background-color: var(--color-accent-red);
+  color: var(--color-background);
+  border-radius: 100vh;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+.call-to-action {
+  background-color: var(--color-background-elevation-1);
+  padding: 8px;
+  border-radius: 2px;
+}
+
+.call-to-action-body {
+  padding: 6px 0;
+  margin-left: 9.5px;
+  border-left: 2px solid var(--issue-color-yellow);
+  padding-left: 18px;
+  line-height: 20px;
+}
+
+.call-to-action .explanation {
+  font-weight: bold;
+}
+
+.call-to-action code {
+  font-size: 90%;
+}
+
+.call-to-action .example .comment::before {
+  content: " — ";
+}
+
+.link,
+.devtools-link {
+  color: var(--color-link);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 2px 0; /* adjust focus ring size */
+}
+
+.inline-icon {
+  vertical-align: middle;
+}

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

@@ -3,11 +3,17 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../core/common/common.js';
+import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as Platform from '../../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
+import * as Protocol from '../../../generated/protocol.js';
+import * as IssuesManager from '../../../models/issues_manager/issues_manager.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as Input from '../../../ui/components/input/input.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
@@ -18,6 +24,11 @@ const {render, html} = LitHtml;
 
 const UIStrings = {
   /**
+  *@description Text in Headers View of the Network panel
+  */
+  chooseThisOptionIfTheResourceAnd:
+      'Choose this option if the resource and the document are served from the same site.',
+  /**
   *@description Text in Request Headers View of the Network panel
   */
   fromDiskCache: '(from disk cache)',
@@ -46,10 +57,23 @@ const UIStrings = {
   */
   general: 'General',
   /**
+  *@description Text that is usually a hyperlink to more documentation
+  */
+  learnMore: 'Learn more',
+  /**
+  *@description Text for a link to the issues panel
+  */
+  learnMoreInTheIssuesTab: 'Learn more in the issues tab',
+  /**
   *@description Label for a checkbox to switch between raw and parsed headers
   */
   raw: 'Raw',
   /**
+  *@description Text in Headers View of the Network panel
+  */
+  onlyChooseThisOptionIfAn:
+      'Only choose this option if an arbitrary website including this resource does not impose a security risk.',
+  /**
   *@description Text in Request Headers View of the Network panel
   */
   referrerPolicy: 'Referrer Policy',
@@ -81,9 +105,35 @@ const UIStrings = {
   *@description HTTP response code
   */
   statusCode: 'Status Code',
+  /**
+  *@description Text in Headers View of the Network panel
+  */
+  thisDocumentWasBlockedFrom:
+      'This document was blocked from loading in an `iframe` with a `sandbox` attribute because this document specified a cross-origin opener policy.',
+  /**
+  *@description Text in Headers View of the Network panel
+  */
+  toEmbedThisFrameInYourDocument:
+      'To embed this frame in your document, the response needs to enable the cross-origin embedder policy by specifying the following response header:',
+  /**
+  *@description Text in Headers View of the Network panel
+  */
+  toUseThisResourceFromADifferent:
+      'To use this resource from a different origin, the server needs to specify a cross-origin resource policy in the response headers:',
+  /**
+  *@description Text in Headers View of the Network panel
+  */
+  toUseThisResourceFromADifferentOrigin:
+      'To use this resource from a different origin, the server may relax the cross-origin resource policy response header:',
+  /**
+  *@description Text in Headers View of the Network panel
+  */
+  toUseThisResourceFromADifferentSite:
+      'To use this resource from a different site, the server may relax the cross-origin resource policy response header:',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestHeadersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
 export class RequestHeadersView extends UI.Widget.VBox {
   readonly #headersView = new RequestHeadersComponent();
@@ -151,6 +201,39 @@ export class RequestHeadersComponent extends HTMLElement {
   #renderResponseHeaders(): LitHtml.TemplateResult {
     assertNotNullOrUndefined(this.#request);
 
+    const headersWithIssues = [];
+    if (this.#request.wasBlocked()) {
+      const headerWithIssues =
+          BlockedReasonDetails.get((this.#request.blockedReason() as Protocol.Network.BlockedReason));
+      if (headerWithIssues) {
+        headersWithIssues.push(headerWithIssues);
+      }
+    }
+
+    function mergeHeadersWithIssues(
+        headers: SDK.NetworkRequest.NameValue[], headersWithIssues: HeaderDescriptor[]): HeaderDescriptor[] {
+      let i = 0, j = 0;
+      const result: HeaderDescriptor[] = [];
+      while (i < headers.length && j < headersWithIssues.length) {
+        if (headers[i].name < headersWithIssues[j].name) {
+          result.push({...headers[i++], headerNotSet: false});
+        } else if (headers[i].name > headersWithIssues[j].name) {
+          result.push({...headersWithIssues[j++], headerNotSet: true});
+        } else {
+          result.push({...headersWithIssues[j++], ...headers[i++], headerNotSet: false});
+        }
+      }
+      while (i < headers.length) {
+        result.push({...headers[i++], headerNotSet: false});
+      }
+      while (j < headersWithIssues.length) {
+        result.push({...headersWithIssues[j++], headerNotSet: true});
+      }
+      return result;
+    }
+
+    const mergedHeaders = mergeHeadersWithIssues(this.#request.sortedResponseHeaders.slice(), headersWithIssues);
+
     const toggleShowRaw = (): void => {
       this.#showResponseHeadersText = !this.#showResponseHeadersText;
       this.#render();
@@ -171,12 +254,7 @@ export class RequestHeadersComponent extends HTMLElement {
       >
         ${this.#showResponseHeadersText ?
             this.#renderRawHeaders(this.#request.responseHeadersText, true) : html`
-          ${this.#request.sortedResponseHeaders.map(header => html`
-            <div class="row">
-              <div class="header-name">${header.name}:</div>
-              <div class="header-value">${header.value}</div>
-            </div>
-          `)}
+          ${mergedHeaders.map(header => this.#renderHeader(header))}
         `}
       </${Category.litTagName}>
     `;
@@ -185,13 +263,17 @@ export class RequestHeadersComponent extends HTMLElement {
   #renderRequestHeaders(): LitHtml.TemplateResult {
     assertNotNullOrUndefined(this.#request);
 
+    const headers = this.#request.requestHeaders().slice();
+    headers.sort(function(a, b) {
+      return Platform.StringUtilities.compare(a.name.toLowerCase(), b.name.toLowerCase());
+    });
+    const requestHeadersText = this.#request.requestHeadersText();
+
     const toggleShowRaw = (): void => {
       this.#showRequestHeadersText = !this.#showRequestHeadersText;
       this.#render();
     };
 
-    const requestHeadersText = this.#request.requestHeadersText();
-
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
@@ -207,17 +289,85 @@ export class RequestHeadersComponent extends HTMLElement {
       >
         ${(this.#showRequestHeadersText && requestHeadersText) ?
             this.#renderRawHeaders(requestHeadersText, false) : html`
-          ${this.#request.requestHeaders().map(header => html`
-            <div class="row">
-              <div class="header-name">${header.name}:</div>
-              <div class="header-value">${header.value}</div>
-            </div>
-          `)}
+          ${headers.map(header => this.#renderHeader({...header, headerNotSet: false}))}
         `}
       </${Category.litTagName}>
     `;
   }
 
+  #renderHeader(header: HeaderDescriptor): LitHtml.TemplateResult {
+    return html`
+      <div class="row">
+        <div class="header-name">${header.headerNotSet ? html`<div class="header-badge header-badge-text">not-set</div>` : ''}${header.name}:</div>
+        <div class="header-value ${header.headerValueIncorrect ? 'header-warning' : ''}">${header.value?.toString()||''}</div>
+      </div>
+      ${this.#maybeRenderHeaderDetails(header.details)}
+    `;
+  }
+
+  #maybeRenderHeaderDetails(headerDetails?: HeaderDetailsDescriptor): LitHtml.LitTemplate {
+    if (!headerDetails) {
+      return LitHtml.nothing;
+    }
+    return html`
+      <div class="header-details">
+        <div class="call-to-action">
+          <div class="call-to-action-body">
+            <div class="explanation">${headerDetails.explanation()}</div>
+            ${headerDetails.examples.map(example => html`
+              <div class="example">
+                <code>${example.codeSnippet}</code>
+                ${example.comment ? html`
+                  <span class="comment">${example.comment()}</span>
+                ` : ''}
+              </div>
+            `)}
+            ${this.#maybeRenderHeaderDetailsLink(headerDetails)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  #maybeRenderHeaderDetailsLink(headerDetails?: HeaderDetailsDescriptor): LitHtml.LitTemplate {
+    if (this.#request && IssuesManager.RelatedIssue.hasIssueOfCategory(this.#request, IssuesManager.Issue.IssueCategory.CrossOriginEmbedderPolicy)) {
+      const followLink = (): void => {
+        Host.userMetrics.issuesPanelOpenedFrom(Host.UserMetrics.IssueOpener.LearnMoreLinkCOEP);
+        if (this.#request) {
+          void IssuesManager.RelatedIssue.reveal(
+              this.#request, IssuesManager.Issue.IssueCategory.CrossOriginEmbedderPolicy);
+        }
+      };
+      return html`
+        <div class="devtools-link" @click=${followLink}>
+          <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+            iconName: 'issue-exclamation-icon',
+            color: 'var(--issue-color-yellow)',
+            width: '16px',
+            height: '16px',
+            } as IconButton.Icon.IconData}>
+          </${IconButton.Icon.Icon.litTagName}>
+          ${i18nString(UIStrings.learnMoreInTheIssuesTab)}
+        </div>
+      `;
+    }
+    if (headerDetails?.link) {
+      return html`
+        <x-link href=${headerDetails.link.url} class="link">
+          <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+            iconName: 'link_icon',
+            color: 'var(--color-link)',
+            width: '16px',
+            height: '16px',
+          } as IconButton.Icon.IconData}>
+          </${IconButton.Icon.Icon.litTagName}
+          >${i18nString(UIStrings.learnMore)}
+        </x-link>
+      `;
+    }
+    return LitHtml.nothing;
+  }
+
   #renderRawHeaders(rawHeadersText: string, forResponseHeaders: boolean): LitHtml.TemplateResult {
     const trimmed = rawHeadersText.trim();
     const showFull = forResponseHeaders ? this.#showResponseHeadersTextFull : this.#showRequestHeadersTextFull;
@@ -357,7 +507,7 @@ export class Category extends HTMLElement {
   #checked: boolean|undefined = undefined;
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles];
+    this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles, Input.checkboxStyles];
   }
 
   set data(data: CategoryData) {
@@ -433,3 +583,118 @@ declare global {
     'devtools-request-headers-category': Category;
   }
 }
+
+interface HeaderDetailsDescriptor {
+  explanation: () => string;
+  examples: Array<{
+    codeSnippet: string,
+    comment?: (() => string),
+  }>;
+  link: {
+    url: string,
+  }|null;
+}
+
+interface HeaderDescriptor {
+  name: string;
+  value: Object|null;
+  headerValueIncorrect?: boolean|null;
+  details?: HeaderDetailsDescriptor;
+  headerNotSet: boolean|null;
+}
+
+const BlockedReasonDetails = new Map<Protocol.Network.BlockedReason, HeaderDescriptor>([
+  [
+    Protocol.Network.BlockedReason.CoepFrameResourceNeedsCoepHeader,
+    {
+      name: 'cross-origin-embedder-policy',
+      value: null,
+      headerValueIncorrect: null,
+      details: {
+        explanation: i18nLazyString(UIStrings.toEmbedThisFrameInYourDocument),
+        examples: [{codeSnippet: 'Cross-Origin-Embedder-Policy: require-corp', comment: undefined}],
+        link: {url: 'https://web.dev/coop-coep/'},
+      },
+      headerNotSet: null,
+    },
+  ],
+  [
+    Protocol.Network.BlockedReason.CorpNotSameOriginAfterDefaultedToSameOriginByCoep,
+    {
+      name: 'cross-origin-resource-policy',
+      value: null,
+      headerValueIncorrect: null,
+      details: {
+        explanation: i18nLazyString(UIStrings.toUseThisResourceFromADifferent),
+        examples: [
+          {
+            codeSnippet: 'Cross-Origin-Resource-Policy: same-site',
+            comment: i18nLazyString(UIStrings.chooseThisOptionIfTheResourceAnd),
+          },
+          {
+            codeSnippet: 'Cross-Origin-Resource-Policy: cross-origin',
+            comment: i18nLazyString(UIStrings.onlyChooseThisOptionIfAn),
+          },
+        ],
+        link: {url: 'https://web.dev/coop-coep/'},
+      },
+      headerNotSet: null,
+    },
+  ],
+  [
+    Protocol.Network.BlockedReason.CoopSandboxedIframeCannotNavigateToCoopPage,
+    {
+      name: 'cross-origin-opener-policy',
+      value: null,
+      headerValueIncorrect: false,
+      details: {
+        explanation: i18nLazyString(UIStrings.thisDocumentWasBlockedFrom),
+        examples: [],
+        link: {url: 'https://web.dev/coop-coep/'},
+      },
+      headerNotSet: null,
+    },
+  ],
+  [
+    Protocol.Network.BlockedReason.CorpNotSameSite,
+    {
+      name: 'cross-origin-resource-policy',
+      value: null,
+      headerValueIncorrect: true,
+      details: {
+        explanation: i18nLazyString(UIStrings.toUseThisResourceFromADifferentSite),
+        examples: [
+          {
+            codeSnippet: 'Cross-Origin-Resource-Policy: cross-origin',
+            comment: i18nLazyString(UIStrings.onlyChooseThisOptionIfAn),
+          },
+        ],
+        link: null,
+      },
+      headerNotSet: null,
+    },
+  ],
+  [
+    Protocol.Network.BlockedReason.CorpNotSameOrigin,
+    {
+      name: 'cross-origin-resource-policy',
+      value: null,
+      headerValueIncorrect: true,
+      details: {
+        explanation: i18nLazyString(UIStrings.toUseThisResourceFromADifferentOrigin),
+        examples: [
+          {
+            codeSnippet: 'Cross-Origin-Resource-Policy: same-site',
+            comment: i18nLazyString(UIStrings.chooseThisOptionIfTheResourceAnd),
+          },
+          {
+            codeSnippet: 'Cross-Origin-Resource-Policy: cross-origin',
+            comment: i18nLazyString(UIStrings.onlyChooseThisOptionIfAn),
+          },
+        ],
+        link: null,
+      },
+      headerNotSet: null,
+    },
+  ],
+]);

package/front_end/panels/sources/AddSourceMapURLDialog.ts

@@ -14,20 +14,25 @@ const UIStrings = {
   */
   sourceMapUrl: 'Source map URL: ',
   /**
+  *@description Text in Add Debug Info URL Dialog of the Sources panel
+  */
+  debugInfoUrl: 'DWARF symbols URL: ',
+  /**
   *@description Text to add something
   */
   add: 'Add',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/AddSourceMapURLDialog.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class AddSourceMapURLDialog extends UI.Widget.HBox {
+export class AddDebugInfoURLDialog extends UI.Widget.HBox {
   private readonly input: HTMLInputElement;
   private readonly dialog: UI.Dialog.Dialog;
   private readonly callback: (arg0: Platform.DevToolsPath.UrlString) => void;
-  constructor(callback: (arg0: Platform.DevToolsPath.UrlString) => void) {
+  private constructor(
+      label: Platform.UIString.LocalizedString, callback: (arg0: Platform.DevToolsPath.UrlString) => void) {
     super(/* isWebComponent */ true);
 
-    this.contentElement.createChild('label').textContent = i18nString(UIStrings.sourceMapUrl);
+    this.contentElement.createChild('label').textContent = label;
 
     this.input = UI.UIUtils.createInput('add-source-map', 'text');
     this.input.addEventListener('keydown', this.onKeyDown.bind(this), false);
@@ -43,6 +48,15 @@ export class AddSourceMapURLDialog extends UI.Widget.HBox {
     this.callback = callback;
   }
 
+  static createAddSourceMapURLDialog(callback: (arg0: Platform.DevToolsPath.UrlString) => void): AddDebugInfoURLDialog {
+    return new AddDebugInfoURLDialog(i18nString(UIStrings.sourceMapUrl), callback);
+  }
+
+  static createAddDWARFSymbolsURLDialog(callback: (arg0: Platform.DevToolsPath.UrlString) => void):
+      AddDebugInfoURLDialog {
+    return new AddDebugInfoURLDialog(i18nString(UIStrings.debugInfoUrl), callback);
+  }
+
   show(): void {
     super.show(this.dialog.contentElement);
     // UI.Dialog extends GlassPane and overrides the `show` method with a wider

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -160,6 +160,9 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
 
     this.updateItemThrottler = new Common.Throttler.Throttler(100);
     this.scheduledForUpdateItems = new Set();
+
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebugInfoAttached, this.debugInfoAttached, this);
   }
 
   static instance(opts: {
@@ -179,6 +182,10 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     this.update();
   }
 
+  private debugInfoAttached(): void {
+    this.update();
+  }
+
   private update(): void {
     void this.updateThrottler.schedule(() => this.doUpdate());
   }

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -45,7 +45,7 @@ import * as SourceFrame from '../../ui/legacy/components/source_frame/source_fra
 import * as UI from '../../ui/legacy/legacy.js';
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 
-import {AddSourceMapURLDialog} from './AddSourceMapURLDialog.js';
+import {AddDebugInfoURLDialog} from './AddSourceMapURLDialog.js';
 import {BreakpointEditDialog, LogpointPrefix} from './BreakpointEditDialog.js';
 import {Plugin} from './Plugin.js';
 import {ScriptFormatterEditorAction} from './ScriptFormatterEditorAction.js';
@@ -112,6 +112,10 @@ const UIStrings = {
   /**
   *@description Text in Debugger Plugin of the Sources panel
   */
+  addWasmDebugInfo: 'Add DWARF debug info…',
+  /**
+  *@description Text in Debugger Plugin of the Sources panel
+  */
   sourceMapDetected: 'Source map detected.',
   /**
   *@description Text in Debugger Plugin of the Sources panel
@@ -480,7 +484,8 @@ export class DebuggerPlugin extends Plugin {
 
   populateTextAreaContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
     function addSourceMapURL(scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile): void {
-      const dialog = new AddSourceMapURLDialog(addSourceMapURLDialogCallback.bind(null, scriptFile));
+      const dialog =
+          AddDebugInfoURLDialog.createAddSourceMapURLDialog(addSourceMapURLDialogCallback.bind(null, scriptFile));
       dialog.show();
     }
 
@@ -492,13 +497,34 @@ export class DebuggerPlugin extends Plugin {
       scriptFile.addSourceMapURL(url);
     }
 
+    function addDebugInfoURL(scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile): void {
+      const dialog =
+          AddDebugInfoURLDialog.createAddDWARFSymbolsURLDialog(addDebugInfoURLDialogCallback.bind(null, scriptFile));
+      dialog.show();
+    }
+
+    function addDebugInfoURLDialogCallback(
+        scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile, url: Platform.DevToolsPath.UrlString): void {
+      if (!url) {
+        return;
+      }
+      scriptFile.addDebugInfoURL(url);
+    }
+
     if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network &&
         Common.Settings.Settings.instance().moduleSetting('jsSourceMapsEnabled').get() &&
         !Bindings.IgnoreListManager.IgnoreListManager.instance().isIgnoreListedUISourceCode(this.uiSourceCode)) {
       if (this.scriptFileForDebuggerModel.size) {
-        const scriptFile = this.scriptFileForDebuggerModel.values().next().value;
+        const scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile =
+            this.scriptFileForDebuggerModel.values().next().value;
         const addSourceMapURLLabel = i18nString(UIStrings.addSourceMap);
         contextMenu.debugSection().appendItem(addSourceMapURLLabel, addSourceMapURL.bind(null, scriptFile));
+        if (scriptFile.script?.isWasm() &&
+            !Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().pluginManager?.hasPluginForScript(
+                scriptFile.script)) {
+          contextMenu.debugSection().appendItem(
+              i18nString(UIStrings.addWasmDebugInfo), addDebugInfoURL.bind(null, scriptFile));
+        }
       }
     }
   }

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -99,6 +99,8 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     this.infoElement = document.createElement('div');
     this.infoElement.className = 'gray-info-message';
     this.infoElement.tabIndex = -1;
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebugInfoAttached, this.debugInfoAttached, this);
     void this.update();
   }
 
@@ -151,6 +153,12 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     }
   }
 
+  private debugInfoAttached(event: Common.EventTarget.EventTargetEvent<SDK.Script.Script>): void {
+    if (event.data === this.#scopesScript) {
+      void this.update();
+    }
+  }
+
   private async update(): Promise<void> {
     // The `resolveThisObject(callFrame)` and `resolveScopeChain(callFrame)` calls
     // below may take a while to complete, so indicate to the user that something

package/front_end/panels/sources/SourcesPanel.ts

@@ -314,6 +314,8 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerWasEnabled, this.debuggerWasEnabled, this);
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerPaused, this.debuggerPaused, this);
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebugInfoAttached, this.debugInfoAttached, this);
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerResumed,
         event => this.debuggerResumed(event.data));
@@ -474,6 +476,18 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     }
   }
 
+  private debugInfoAttached(event: Common.EventTarget.EventTargetEvent<SDK.Script.Script>): void {
+    const {debuggerModel} = event.data;
+    if (!debuggerModel.isPaused()) {
+      return;
+    }
+
+    const details = debuggerModel.debuggerPausedDetails();
+    if (details && UI.Context.Context.instance().flavor(SDK.Target.Target) === debuggerModel.target()) {
+      this.showDebuggerPausedDetails(details);
+    }
+  }
+
   private showDebuggerPausedDetails(details: SDK.DebuggerModel.DebuggerPausedDetails): void {
     this.pausedInternal = true;
     void this.updateDebuggerButtonsAndStatus();

package/front_end/services/puppeteer/PuppeteerConnection.ts

@@ -60,14 +60,12 @@ export class Transport implements puppeteer.ConnectionTransport {
 }
 
 export class PuppeteerConnection extends puppeteer.Connection {
-  // Overriding Puppeteer's API here.
-  // eslint-disable-next-line rulesdir/no_underscored_properties
-  async _onMessage(message: string): Promise<void> {
+  override async onMessage(message: string): Promise<void> {
     const msgObj = JSON.parse(message) as {id: number, method: string, params: unknown, sessionId?: string};
     if (msgObj.sessionId && !this._sessions.has(msgObj.sessionId)) {
       return;
     }
-    void super._onMessage(message);
+    void super.onMessage(message);
   }
 }
 
@@ -90,7 +88,7 @@ export async function getPuppeteerConnection(
     return targetInfo.targetId === mainTargetId || targetInfo.openerId === mainTargetId || targetInfo.type === 'iframe';
   };
 
-  const browser = await puppeteer.Browser.create(
+  const browser = await puppeteer.Browser._create(
       connection,
       [] /* contextIds */,
       false /* ignoreHTTPSErrors */,

package/front_end/third_party/acorn/acorn.ts

@@ -4,7 +4,7 @@
 
 import * as acorn from './package/dist/acorn.mjs';
 
-import type * as ESTree from './estree-legacy';
+import type * as ESTree from './estree-legacy.js';
 export {ESTree};
 
 export { type Comment, defaultOptions, getLineInfo, isNewLine, lineBreak, lineBreakG, Node, SourceLocation, Token, tokTypes, tokContexts} from './package/dist/acorn.mjs';

package/front_end/third_party/chromium/client-variations/client-variations.ts

@@ -2,4 +2,4 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-export * from './ClientVariations.js';
+export * from './ClientVariations.js';

package/front_end/third_party/diff/DiffWrapper.ts

@@ -5,10 +5,12 @@
 import * as Common from '../../core/common/common.js';
 
 declare global {
+  /* eslint-disable @typescript-eslint/naming-convention */
   class diff_match_patch {
     diff_main(text1: string, text2: string): Array<{0: number, 1: string}>;
     diff_cleanupSemantic(diff: Array<{0: number, 1: string}>): void;
   }
+  /* eslint-enable @typescript-eslint/naming-convention */
 }
 
 export const DiffWrapper = {