npm - chrome-devtools-frontend - Versions diffs - 1.0.1022059 → 1.0.1022611 - Mend

chrome-devtools-frontend 1.0.1022059 → 1.0.1022611

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/front_end/core/i18n/locales/en-US.json CHANGED Viewed

@@ -6797,6 +6797,9 @@
   "panels/network/BlockedURLsPane.ts | textPatternToBlockMatching": {
     "message": "Text pattern to block matching requests; use * for wildcard"
   },
+  "panels/network/components/RequestHeadersView.ts | chooseThisOptionIfTheResourceAnd": {
+    "message": "Choose this option if the resource and the document are served from the same site."
+  },
   "panels/network/components/RequestHeadersView.ts | fromDiskCache": {
     "message": "(from disk cache)"
   },
@@ -6818,6 +6821,15 @@
   "panels/network/components/RequestHeadersView.ts | general": {
     "message": "General"
   },
+  "panels/network/components/RequestHeadersView.ts | learnMore": {
+    "message": "Learn more"
+  },
+  "panels/network/components/RequestHeadersView.ts | learnMoreInTheIssuesTab": {
+    "message": "Learn more in the issues tab"
+  },
+  "panels/network/components/RequestHeadersView.ts | onlyChooseThisOptionIfAn": {
+    "message": "Only choose this option if an arbitrary website including this resource does not impose a security risk."
+  },
   "panels/network/components/RequestHeadersView.ts | raw": {
     "message": "Raw"
   },
@@ -6845,6 +6857,21 @@
   "panels/network/components/RequestHeadersView.ts | statusCode": {
     "message": "Status Code"
   },
+  "panels/network/components/RequestHeadersView.ts | thisDocumentWasBlockedFrom": {
+    "message": "This document was blocked from loading in an iframe with a sandbox attribute because this document specified a cross-origin opener policy."
+  },
+  "panels/network/components/RequestHeadersView.ts | toEmbedThisFrameInYourDocument": {
+    "message": "To embed this frame in your document, the response needs to enable the cross-origin embedder policy by specifying the following response header:"
+  },
+  "panels/network/components/RequestHeadersView.ts | toUseThisResourceFromADifferent": {
+    "message": "To use this resource from a different origin, the server needs to specify a cross-origin resource policy in the response headers:"
+  },
+  "panels/network/components/RequestHeadersView.ts | toUseThisResourceFromADifferentOrigin": {
+    "message": "To use this resource from a different origin, the server may relax the cross-origin resource policy response header:"
+  },
+  "panels/network/components/RequestHeadersView.ts | toUseThisResourceFromADifferentSite": {
+    "message": "To use this resource from a different site, the server may relax the cross-origin resource policy response header:"
+  },
   "panels/network/components/RequestTrustTokensView.ts | aClientprovidedArgumentWas": {
     "message": "A client-provided argument was malformed or otherwise invalid."
   },
@@ -9650,6 +9677,9 @@
   "panels/sources/AddSourceMapURLDialog.ts | add": {
     "message": "Add"
   },
+  "panels/sources/AddSourceMapURLDialog.ts | debugInfoUrl": {
+    "message": "DWARF symbols URL: "
+  },
   "panels/sources/AddSourceMapURLDialog.ts | sourceMapUrl": {
     "message": "Source map URL: "
   },
@@ -9821,6 +9851,9 @@
   "panels/sources/DebuggerPlugin.ts | addSourceMap": {
     "message": "Add source map…"
   },
+  "panels/sources/DebuggerPlugin.ts | addWasmDebugInfo": {
+    "message": "Add DWARF debug info…"
+  },
   "panels/sources/DebuggerPlugin.ts | associatedFilesAreAvailable": {
     "message": "Associated files are available via file tree or {PH1}."
   },

package/front_end/core/i18n/locales/en-XL.json CHANGED Viewed

@@ -6797,6 +6797,9 @@
   "panels/network/BlockedURLsPane.ts | textPatternToBlockMatching": {
     "message": "T̂éx̂t́ p̂át̂t́êŕn̂ t́ô b́l̂óĉḱ m̂át̂ćĥín̂ǵ r̂éq̂úêśt̂ś; ûśê * f́ôŕ ŵíl̂d́ĉár̂d́"
   },
+  "panels/network/components/RequestHeadersView.ts | chooseThisOptionIfTheResourceAnd": {
+    "message": "Ĉh́ôóŝé t̂h́îś ôṕt̂íôń îf́ t̂h́ê ŕêśôúr̂ćê án̂d́ t̂h́ê d́ôćûḿêńt̂ ár̂é ŝér̂v́êd́ f̂ŕôḿ t̂h́ê śâḿê śît́ê."
+  },
   "panels/network/components/RequestHeadersView.ts | fromDiskCache": {
     "message": "(f̂ŕôḿ d̂íŝḱ ĉáĉh́ê)"
   },
@@ -6818,6 +6821,15 @@
   "panels/network/components/RequestHeadersView.ts | general": {
     "message": "Ĝén̂ér̂ál̂"
   },
+  "panels/network/components/RequestHeadersView.ts | learnMore": {
+    "message": "L̂éâŕn̂ ḿôŕê"
+  },
+  "panels/network/components/RequestHeadersView.ts | learnMoreInTheIssuesTab": {
+    "message": "L̂éâŕn̂ ḿôŕê ín̂ t́ĥé îśŝúêś t̂áb̂"
+  },
+  "panels/network/components/RequestHeadersView.ts | onlyChooseThisOptionIfAn": {
+    "message": "Ôńl̂ý ĉh́ôóŝé t̂h́îś ôṕt̂íôń îf́ âń âŕb̂ít̂ŕâŕŷ ẃêb́ŝít̂é îńĉĺûd́îńĝ t́ĥíŝ ŕêśôúr̂ćê d́ôéŝ ńôt́ îḿp̂óŝé â śêćûŕît́ŷ ŕîśk̂."
+  },
   "panels/network/components/RequestHeadersView.ts | raw": {
     "message": "R̂áŵ"
   },
@@ -6845,6 +6857,21 @@
   "panels/network/components/RequestHeadersView.ts | statusCode": {
     "message": "Ŝt́ât́ûś Ĉód̂é"
   },
+  "panels/network/components/RequestHeadersView.ts | thisDocumentWasBlockedFrom": {
+    "message": "T̂h́îś d̂óĉúm̂én̂t́ ŵáŝ b́l̂óĉḱêd́ f̂ŕôḿ l̂óâd́îńĝ ín̂ án̂ iframe ẃît́ĥ á sandbox ât́t̂ŕîb́ût́ê b́êćâúŝé t̂h́îś d̂óĉúm̂én̂t́ ŝṕêćîf́îéd̂ á ĉŕôśŝ-ór̂íĝín̂ óp̂én̂ér̂ ṕôĺîćŷ."
+  },
+  "panels/network/components/RequestHeadersView.ts | toEmbedThisFrameInYourDocument": {
+    "message": "T̂ó êḿb̂éd̂ t́ĥíŝ f́r̂ám̂é îń ŷóûŕ d̂óĉúm̂én̂t́, t̂h́ê ŕêśp̂ón̂śê ńêéd̂ś t̂ó êńâb́l̂é t̂h́ê ćr̂óŝś-ôŕîǵîń êḿb̂éd̂d́êŕ p̂ól̂íĉý b̂ý ŝṕêćîf́ŷín̂ǵ t̂h́ê f́ôĺl̂óŵín̂ǵ r̂éŝṕôńŝé ĥéâd́êŕ:"
+  },
+  "panels/network/components/RequestHeadersView.ts | toUseThisResourceFromADifferent": {
+    "message": "T̂ó ûśê t́ĥíŝ ŕêśôúr̂ćê f́r̂óm̂ á d̂íf̂f́êŕêńt̂ ór̂íĝín̂, t́ĥé ŝér̂v́êŕ n̂éêd́ŝ t́ô śp̂éĉíf̂ý â ćr̂óŝś-ôŕîǵîń r̂éŝóûŕĉé p̂ól̂íĉý îń t̂h́ê ŕêśp̂ón̂śê h́êád̂ér̂ś:"
+  },
+  "panels/network/components/RequestHeadersView.ts | toUseThisResourceFromADifferentOrigin": {
+    "message": "T̂ó ûśê t́ĥíŝ ŕêśôúr̂ćê f́r̂óm̂ á d̂íf̂f́êŕêńt̂ ór̂íĝín̂, t́ĥé ŝér̂v́êŕ m̂áŷ ŕêĺâx́ t̂h́ê ćr̂óŝś-ôŕîǵîń r̂éŝóûŕĉé p̂ól̂íĉý r̂éŝṕôńŝé ĥéâd́êŕ:"
+  },
+  "panels/network/components/RequestHeadersView.ts | toUseThisResourceFromADifferentSite": {
+    "message": "T̂ó ûśê t́ĥíŝ ŕêśôúr̂ćê f́r̂óm̂ á d̂íf̂f́êŕêńt̂ śît́ê, t́ĥé ŝér̂v́êŕ m̂áŷ ŕêĺâx́ t̂h́ê ćr̂óŝś-ôŕîǵîń r̂éŝóûŕĉé p̂ól̂íĉý r̂éŝṕôńŝé ĥéâd́êŕ:"
+  },
   "panels/network/components/RequestTrustTokensView.ts | aClientprovidedArgumentWas": {
     "message": "Â ćl̂íêńt̂-ṕr̂óv̂íd̂éd̂ ár̂ǵûḿêńt̂ ẃâś m̂ál̂f́ôŕm̂éd̂ ór̂ ót̂h́êŕŵíŝé îńv̂ál̂íd̂."
   },
@@ -9650,6 +9677,9 @@
   "panels/sources/AddSourceMapURLDialog.ts | add": {
     "message": "Âd́d̂"
   },
+  "panels/sources/AddSourceMapURLDialog.ts | debugInfoUrl": {
+    "message": "D̂ẂÂŔF̂ śŷḿb̂ól̂ś ÛŔL̂: "
+  },
   "panels/sources/AddSourceMapURLDialog.ts | sourceMapUrl": {
     "message": "Ŝóûŕĉé m̂áp̂ ÚR̂Ĺ: "
   },
@@ -9821,6 +9851,9 @@
   "panels/sources/DebuggerPlugin.ts | addSourceMap": {
     "message": "Âd́d̂ śôúr̂ćê ḿâṕ…"
   },
+  "panels/sources/DebuggerPlugin.ts | addWasmDebugInfo": {
+    "message": "Âd́d̂ D́ŴÁR̂F́ d̂éb̂úĝ ín̂f́ô…"
+  },
   "panels/sources/DebuggerPlugin.ts | associatedFilesAreAvailable": {
     "message": "Âśŝóĉíât́êd́ f̂íl̂éŝ ár̂é âv́âíl̂áb̂ĺê v́îá f̂íl̂é t̂ŕêé ôŕ {PH1}."
   },

package/front_end/core/sdk/DebuggerModel.ts CHANGED Viewed

@@ -737,6 +737,14 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     this.#sourceMapManagerInternal.attachSourceMap(script, script.sourceURL, script.sourceMapURL);
   }
+  async setDebugInfoURL(script: Script, _externalURL: Platform.DevToolsPath.UrlString): Promise<void> {
+    if (this.#expandCallFramesCallback && this.#debuggerPausedDetailsInternal) {
+      this.#debuggerPausedDetailsInternal.callFrames =
+          await this.#expandCallFramesCallback.call(null, this.#debuggerPausedDetailsInternal.callFrames);
+    }
+    this.dispatchEventToListeners(Events.DebugInfoAttached, script);
+  }
   executionContextDestroyed(executionContext: ExecutionContext): void {
     const sourceMapIds = Array.from(this.#sourceMapIdToScript.keys());
     for (const sourceMapId of sourceMapIds) {
@@ -968,6 +976,7 @@ export enum Events {
   DebuggerWasDisabled = 'DebuggerWasDisabled',
   DebuggerPaused = 'DebuggerPaused',
   DebuggerResumed = 'DebuggerResumed',
+  DebugInfoAttached = 'DebugInfoAttached',
   ParsedScriptSource = 'ParsedScriptSource',
   DiscardedAnonymousScriptSource = 'DiscardedAnonymousScriptSource',
   GlobalObjectCleared = 'GlobalObjectCleared',
@@ -985,6 +994,7 @@ export type EventTypes = {
   [Events.GlobalObjectCleared]: DebuggerModel,
   [Events.CallFrameSelected]: DebuggerModel,
   [Events.DebuggerIsReadyToPause]: DebuggerModel,
+  [Events.DebugInfoAttached]: Script,
 };
 class DebuggerDispatcher implements ProtocolProxyApi.DebuggerDispatcher {

package/front_end/models/bindings/DebuggerLanguagePlugins.ts CHANGED Viewed

@@ -1200,6 +1200,15 @@ export class DebuggerLanguagePluginManager implements
     return [];
   }
+  setDebugInfoURL(script: SDK.Script.Script, externalURL: Platform.DevToolsPath.UrlString): void {
+    if (this.hasPluginForScript(script)) {
+      return;
+    }
+    script.debugSymbols = {type: Protocol.Debugger.DebugSymbolsType.ExternalDWARF, externalURL};
+    this.parsedScriptSource({data: script});
+    void script.debuggerModel.setDebugInfoURL(script, externalURL);
+  }
   private parsedScriptSource(event: Common.EventTarget.EventTargetEvent<SDK.Script.Script>): void {
     const script = event.data;
     if (!script.sourceURL) {

package/front_end/models/bindings/ResourceScriptMapping.ts CHANGED Viewed

@@ -38,7 +38,8 @@ import * as Workspace from '../workspace/workspace.js';
 import type {Breakpoint} from './BreakpointManager.js';
 import {BreakpointManager} from './BreakpointManager.js';
 import {ContentProviderBasedProject} from './ContentProviderBasedProject.js';
-import type {DebuggerSourceMapping, DebuggerWorkspaceBinding} from './DebuggerWorkspaceBinding.js';
+import type {DebuggerSourceMapping} from './DebuggerWorkspaceBinding.js';
+import {DebuggerWorkspaceBinding} from './DebuggerWorkspaceBinding.js';
 import {NetworkProject} from './NetworkProject.js';
 import {metadataForURL} from './ResourceUtils.js';
@@ -455,6 +456,16 @@ export class ResourceScriptFile extends Common.ObjectWrapper.ObjectWrapper<Resou
     this.scriptInternal.debuggerModel.setSourceMapURL(this.scriptInternal, sourceMapURL);
   }
+  addDebugInfoURL(debugInfoURL: Platform.DevToolsPath.UrlString): void {
+    if (!this.scriptInternal) {
+      return;
+    }
+    const {pluginManager} = DebuggerWorkspaceBinding.instance();
+    if (pluginManager) {
+      pluginManager.setDebugInfoURL(this.scriptInternal, debugInfoURL);
+    }
+  }
   hasSourceMapURL(): boolean {
     return this.scriptInternal !== undefined && Boolean(this.scriptInternal.sourceMapURL);
   }

package/front_end/models/issues_manager/RelatedIssue.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type {Issue, IssueCategory} from './Issue.js';
 import {IssuesManager} from './IssuesManager.js';
-export type IssuesAssociatable = SDK.NetworkRequest.NetworkRequest|SDK.Cookie.Cookie|string;
+export type IssuesAssociatable = Readonly<SDK.NetworkRequest.NetworkRequest>|SDK.Cookie.Cookie|string;
 function issuesAssociatedWithNetworkRequest(issues: Issue[], request: SDK.NetworkRequest.NetworkRequest): Issue[] {
   return issues.filter(issue => {

package/front_end/models/issues_manager/descriptions/federatedAuthRequestErrorIdToken.md CHANGED Viewed

	@@ -1 +1 @@
1	- # Error retrieving an id token.
1	+ # Error retrieving a token.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenInvalidRequest.md CHANGED Viewed

	@@ -1 +1 @@
1	- # The id token fetching request is invalid.
1	+ # The token fetching request is invalid.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenInvalidResponse.md CHANGED Viewed

	@@ -1 +1 @@
1	- # Provider's id token is invalid.
1	+ # Provider's token is invalid.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenNoResponse.md CHANGED Viewed

	@@ -1 +1 @@
1	- # The response body is empty when fetching the provider's id token.
1	+ # The response body is empty when fetching the provider's token.

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

@@ -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 CHANGED Viewed

@@ -3,11 +3,16 @@
 // 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';
@@ -19,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)',
@@ -47,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',
@@ -82,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();
@@ -152,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();
@@ -172,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}>
     `;
@@ -186,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`
@@ -208,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;
@@ -434,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/package.json CHANGED Viewed

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1022059"
+  "version": "1.0.1022611"
 }

package/scripts/eslint_rules/lib/custom_element_definitions_location.js CHANGED Viewed

@@ -64,7 +64,7 @@ module.exports = {
           const filePathWithPanelName = classDefiningFileName.substring(PANELS_DIRECTORY.length + 1);
           const filePathWithoutPanelName = filePathWithPanelName.substring(filePathWithPanelName.indexOf(path.sep) + 1);
-          if (filePathWithoutPanelName.startsWith('components' + path.sep)) {
+          if (filePathWithoutPanelName.includes(`components${path.sep}`)) {
             return;
           }
         }

package/scripts/eslint_rules/tests/custom_element_definitions_location_test.js CHANGED Viewed

@@ -27,6 +27,11 @@ ruleTester.run('custom_element_definitions_location', rule, {
       filename: 'front_end/panels/issues/components/nested/folder/Foo.ts',
       options: [{rootFrontendDirectory: path.join(__dirname, '..', '..', '..', 'front_end')}]
     },
+    {
+      code: 'class Foo extends HTMLElement {}',
+      filename: 'front_end/panels/performance/library/components/metrics/Metric.ts',
+      options: [{rootFrontendDirectory: path.join(__dirname, '..', '..', '..', 'front_end')}]
+    },
     {
       code: 'class Foo extends OtherClass {}',
       filename: 'front_end/models/some/Model.ts',