chrome-devtools-frontend 1.0.1021582 → 1.0.1022475

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -35,10 +35,12 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {linkifyDeferredNodeReference} from './DOMLinkifier.js';
+import * as ElementsComponents from './components/components.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit} from './ElementsTreeElement.js';
 import elementsTreeOutlineStyles from './elementsTreeOutline.css.js';
@@ -1629,13 +1631,45 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
       text = '<' + text + '>';
     }
     title.textContent = '\u21AA ' + text;
-
-    const link = (linkifyDeferredNodeReference(nodeShortcut.deferredNode) as Element);
-    UI.UIUtils.createTextChild(this.listItemElement, ' ');
-    link.classList.add('elements-tree-shortcut-link');
-    link.textContent = i18nString(UIStrings.reveal);
-    this.listItemElement.appendChild(link);
     this.nodeShortcut = nodeShortcut;
+    this.addRevealAdorner();
+  }
+
+  addRevealAdorner(): void {
+    const adorner = new Adorners.Adorner.Adorner();
+    adorner.classList.add('adorner-reveal');
+    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
+        ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL);
+    const name = config.name;
+    const adornerContent = document.createElement('span');
+    const linkIcon = new IconButton.Icon.Icon();
+    linkIcon
+        .data = {iconName: 'ic_show_node_16x16', color: 'var(--color-text-disabled)', width: '12px', height: '12px'};
+    const slotText = document.createElement('span');
+    slotText.textContent = name;
+    adornerContent.append(linkIcon);
+    adornerContent.append(slotText);
+    adornerContent.classList.add('adorner-with-icon');
+    adorner.data = {
+      name,
+      content: adornerContent,
+    };
+    this.listItemElement.appendChild(adorner);
+    const onClick = (((): void => {
+                       this.nodeShortcut.deferredNode.resolve(
+                           node => {
+                             void Common.Revealer.reveal(node);
+                           },
+                       );
+                     }) as EventListener);
+    adorner.addInteraction(onClick, {
+      isToggle: false,
+      shouldPropagateOnKeydown: false,
+      ariaLabelDefault: i18nString(UIStrings.reveal),
+      ariaLabelActive: i18nString(UIStrings.reveal),
+    });
+    adorner.addEventListener('mousedown', e => e.consume(), false);
+    ElementsPanel.instance().registerAdorner(adorner);
   }
 
   get hovered(): boolean {

package/front_end/panels/elements/TopLayerContainer.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
@@ -79,7 +80,14 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
     const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
         ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
     const adornerContent = document.createElement('span');
-    adornerContent.textContent = ` top-layer (${topLayerElementIndex}) `;
+    adornerContent.classList.add('adorner-with-icon');
+    const linkIcon = new IconButton.Icon.Icon();
+    linkIcon
+        .data = {iconName: 'ic_show_node_16x16', color: 'var(--color-text-disabled)', width: '12px', height: '12px'};
+    const adornerText = document.createElement('span');
+    adornerText.textContent = ` top-layer (${topLayerElementIndex}) `;
+    adornerContent.append(linkIcon);
+    adornerContent.append(adornerText);
     const adorner = element?.adorn(config, adornerContent);
     if (adorner) {
       const onClick = (((): void => {

package/front_end/panels/elements/components/AdornerManager.ts

@@ -31,6 +31,7 @@ export enum RegisteredAdorners {
   CONTAINER = 'container',
   SLOT = 'slot',
   TOP_LAYER = 'top-layer',
+  REVEAL = 'reveal',
 }
 
 // This enum-like const object serves as the authoritative registry for all the
@@ -79,6 +80,12 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };
+    case RegisteredAdorners.REVEAL:
+      return {
+        name: 'reveal',
+        category: AdornerCategories.DEFAULT,
+        enabledByDefault: true,
+      };
   }
 }
 

package/front_end/panels/elements/elementsTreeOutline.css

@@ -27,6 +27,10 @@
   display: none;
 }
 
+.adorner-reveal {
+  margin: 3px;
+}
+
 .adorner-with-icon {
   display: flex;
   justify-content: center;

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,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

@@ -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));
+        }
       }
     }
   }