chrome-devtools-frontend 1.0.1585538 → 1.0.1586699

package/front_end/core/common/Srcset.ts

@@ -0,0 +1,61 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export const enum TokenType {
+  LITERAL = 0,
+  URL = 1
+}
+
+export interface Token {
+  type: TokenType;
+  value: string;
+}
+
+/**
+ * Parsing of
+ * https://html.spec.whatwg.org/multipage/images.html#srcset-attribute and href
+ * attributes to identify URLs vs other text in the srcset.
+ *
+ * Note: this is probably not spec compliant.
+ */
+export function parseSrcset(value: string): Token[] {
+  const result: Token[] = [];
+  let i = 0;
+  while (value.length) {
+    if (i++ > 0) {
+      result.push({value: ' ', type: TokenType.LITERAL});
+    }
+    value = value.trim();
+    let url = '';
+    let descriptor = '';
+    const indexOfSpace = value.search(/\s/);
+    if (indexOfSpace === -1) {
+      url = value;
+    } else if (indexOfSpace > 0 && value[indexOfSpace - 1] === ',') {
+      url = value.substring(0, indexOfSpace);
+    } else {
+      url = value.substring(0, indexOfSpace);
+      const indexOfComma = value.indexOf(',', indexOfSpace);
+      if (indexOfComma !== -1) {
+        descriptor = value.substring(indexOfSpace, indexOfComma + 1);
+      } else {
+        descriptor = value.substring(indexOfSpace);
+      }
+    }
+
+    if (url) {
+      if (url.endsWith(',')) {
+        result.push({value: url.substring(0, url.length - 1), type: TokenType.URL});
+        result.push({type: TokenType.LITERAL, value: ','});
+      } else {
+        result.push({value: url, type: TokenType.URL});
+      }
+    }
+    if (descriptor) {
+      result.push({type: TokenType.LITERAL, value: descriptor});
+    }
+    value = value.substring(url.length + descriptor.length);
+  }
+  return result;
+}

package/front_end/core/common/common.ts

@@ -29,6 +29,7 @@ import * as SegmentedRange from './SegmentedRange.js';
 import * as SettingRegistration from './SettingRegistration.js';
 import * as Settings from './Settings.js';
 import * as SimpleHistoryManager from './SimpleHistoryManager.js';
+import * as Srcset from './Srcset.js';
 import * as StringOutputStream from './StringOutputStream.js';
 import * as TextDictionary from './TextDictionary.js';
 import * as Throttler from './Throttler.js';
@@ -68,6 +69,7 @@ export {
   SettingRegistration,
   Settings,
   SimpleHistoryManager,
+  Srcset,
   StringOutputStream,
   TextDictionary,
   Throttler,

package/front_end/generated/SupportedCSSProperties.js

@@ -4426,7 +4426,8 @@ export const generatedProperties = [
   "inherited": true,
   "keywords": [
    "none",
-   "auto"
+   "auto",
+   "all"
   ],
   "name": "text-decoration-skip-ink"
  },
@@ -6976,7 +6977,8 @@ export const generatedPropertyValues = {
  "text-decoration-skip-ink": {
   "values": [
    "none",
-   "auto"
+   "auto",
+   "all"
   ]
  },
  "text-decoration-style": {

package/front_end/models/ai_assistance/AiConversation.ts

@@ -456,16 +456,20 @@ Time: ${micros(time)}`;
         },
         options.multimodalInput,
         )) {
+      // Add to history if relevant
       if (shouldAddToHistory(data)) {
         void this.addHistoryItem(data);
       }
+      // Always yield the data
+      yield data;
+
+      // If we change the context
+      // requery with the specialized agent.
       if (data.type === ResponseType.CONTEXT_CHANGE) {
         this.setContext(data.context);
         yield* this.#runAgent(initialQuery, options);
         return;
       }
-
-      yield data;
     }
   }
 

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -346,6 +346,18 @@ export class AiCodeCompletion {
     }
     return Boolean(aidaAvailability.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
   }
+
+  static isAiCodeCompletionStylesEnabled(locale: string): boolean {
+    if (!locale.startsWith('en-')) {
+      return false;
+    }
+    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
+    if (!aidaAvailability || aidaAvailability.blockedByGeo || aidaAvailability.blockedByAge ||
+        aidaAvailability.blockedByEnterprisePolicy) {
+      return false;
+    }
+    return Boolean(aidaAvailability.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletionStyles?.enabled);
+  }
 }
 
 export const enum ContextFlavor {

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -6624,8 +6624,8 @@ export const NativeFunctions = [
     signatures: [["type","?eventInitDict"]]
   },
   {
-    name: "setFormControlRange",
-    signatures: [["element","start","end"]]
+    name: "getValueRange",
+    signatures: [["start","end"]]
   },
   {
     name: "getBoxQuads",

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -1621,6 +1621,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             this.#handleConversationContextChange(data.context);
             step.isLoading = false;
             commitStep();
+            step = {isLoading: true};
 
             break;
           }

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -183,6 +183,19 @@ const DEFAULT_VIEW: View = (input, output, target) => {
     `, target);
   // clang-format on
 };
+
+/**
+ * ChatView is a web component for historical reasons and generally should not
+ * exist because it barely has any presenter logic and it is definitely not
+ * re-usable as a custom element. Instead, the template from ChatView should be
+ * embdedded into the AiAssistancePanel (the sole host of chat interfaces) and
+ * the scroll handling logic should be implemented in view functions using refs
+ * or re-usable custom elements. Currently, the ChatView just combines the
+ * interfaces of ChatMessage and ChatInput presenters and passes most of the
+ * properties down to those presenters as-is.
+ *
+ * @deprecated
+ */
 export class ChatView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #scrollTop?: number;

package/front_end/panels/application/FrameDetailsView.ts

@@ -272,7 +272,6 @@ interface FrameDetailsViewInput {
   frame: SDK.ResourceTreeModel.ResourceTreeFrame;
   target: SDK.Target.Target|null;
   creationStackTrace: StackTrace.StackTrace.StackTrace|null;
-  creationTarget: SDK.Target.Target|null;
   adScriptAncestry: Protocol.Page.AdScriptAncestry|null;
   linkTargetDOMNode: SDK.DOMModel.DOMNode|null;
   permissionsPolicies: Protocol.Page.PermissionsPolicyFeatureState[]|null;
@@ -354,7 +353,7 @@ function renderDocumentSection(input: FrameDetailsViewInput): LitTemplate {
       ${maybeRenderUnreachableURL(input.frame?.unreachableUrl())}
       ${maybeRenderOrigin(input.frame?.securityOrigin)}
       ${renderOwnerElement(input.linkTargetDOMNode)}
-      ${maybeRenderCreationStacktrace(input.creationStackTrace, input.creationTarget)}
+      ${maybeRenderCreationStacktrace(input.creationStackTrace)}
       ${maybeRenderAdStatus(input.frame?.adFrameType(), input.frame?.adFrameStatus())}
       ${maybeRenderCreatorAdScriptAncestry(input.frame?.adFrameType(), input.target, input.adScriptAncestry)}
       <devtools-report-divider></devtools-report-divider>`;
@@ -447,9 +446,8 @@ function renderOwnerElement(linkTargetDOMNode: SDK.DOMModel.DOMNode|null): LitTe
   return nothing;
 }
 
-function maybeRenderCreationStacktrace(
-    stackTrace: StackTrace.StackTrace.StackTrace|null, target: SDK.Target.Target|null): LitTemplate {
-  if (stackTrace && target) {
+function maybeRenderCreationStacktrace(stackTrace: StackTrace.StackTrace.StackTrace|null): LitTemplate {
+  if (stackTrace) {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
       return html`
@@ -457,7 +455,7 @@ function maybeRenderCreationStacktrace(
           i18nString(UIStrings.creationStackTrace)}</devtools-report-key>
         <devtools-report-value jslog=${VisualLogging.section('frame-creation-stack-trace')}>
           <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(
-              Components.JSPresentationUtils.StackTracePreviewContent, {target, stackTrace, options: {expandable: true}})}>
+              Components.JSPresentationUtils.StackTracePreviewContent, {stackTrace, options: {expandable: true}})}>
           </devtools-widget>
         </devtools-report-value>
       `;
@@ -844,7 +842,6 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
   #frame?: SDK.ResourceTreeModel.ResourceTreeFrame;
   #target: SDK.Target.Target|null = null;
   #creationStackTrace: StackTrace.StackTrace.StackTrace|null = null;
-  #creationTarget: SDK.Target.Target|null = null;
   #securityIsolationInfo: Protocol.Network.SecurityIsolationStatus|null = null;
   #linkTargetDOMNode: SDK.DOMModel.DOMNode|null = null;
   #trials: Protocol.Page.OriginTrial[]|null = null;
@@ -869,7 +866,6 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
     });
     const {creationStackTrace: rawCreationStackTrace, creationStackTraceTarget: creationTarget} =
         frame.getCreationStackTraceData();
-    this.#creationTarget = creationTarget;
     if (rawCreationStackTrace) {
       void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
           .createStackTraceFromProtocolRuntime(rawCreationStackTrace, creationTarget)
@@ -924,7 +920,6 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
       frame,
       target: this.#target,
       creationStackTrace: this.#creationStackTrace,
-      creationTarget: this.#creationTarget,
       protocolMonitorExperimentEnabled: this.#protocolMonitorExperimentEnabled,
       permissionsPolicies: this.#permissionsPolicies,
       adScriptAncestry: this.#adScriptAncestry,

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -705,8 +705,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const stackTraceElement = contentElement.createChild('div', 'hidden-stack-trace');
     const targetManager = SDK.TargetManager.TargetManager.instance();
     const stackTraceTarget = target ?? targetManager.primaryPageTarget() ?? targetManager.rootTarget();
-    const stackTracePreview = new Components.JSPresentationUtils.StackTracePreviewContent(
-        undefined, stackTraceTarget ?? undefined, this.linkifier, {widthConstrained: true});
+    const stackTracePreview = new Components.JSPresentationUtils.StackTracePreviewContent();
+    stackTracePreview.options = {widthConstrained: true};
     if (stackTraceTarget && stackTrace) {
       const selectableChildIndex = this.selectableChildren.length;
       void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()

package/front_end/panels/console/PromptBuilder.ts

@@ -9,6 +9,7 @@ import * as Formatter from '../../models/formatter/formatter.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import type {ConsoleViewMessage} from './ConsoleViewMessage.js';
 
@@ -85,7 +86,7 @@ export class PromptBuilder {
 
     const relatedCode = sourceCode?.text ? formatRelatedCode(sourceCode) : '';
     const relatedRequest = request ? formatNetworkRequest(request) : '';
-    const stacktrace = sourcesTypes.includes(SourceType.STACKTRACE) ? formatStackTrace(this.#consoleMessage) : '';
+    const stacktrace = sourcesTypes.includes(SourceType.STACKTRACE) ? await formatStackTrace(this.#consoleMessage) : '';
 
     const message = formatConsoleMessage(this.#consoleMessage);
 
@@ -290,14 +291,25 @@ export function formatConsoleMessage(message: ConsoleViewMessage): string {
  * This formats the stacktrace from the console message which might or might not
  * match the content of stacktrace(s) in the console message arguments.
  */
-export function formatStackTrace(message: ConsoleViewMessage): string {
+async function formatStackTrace(message: ConsoleViewMessage): Promise<string> {
   const previewContainer = message.contentElement().querySelector('.stack-preview-container');
 
   if (!previewContainer) {
     return '';
   }
 
-  const preview = previewContainer.shadowRoot?.querySelector('.stack-preview-container') as HTMLElement;
+  const widget =
+      UI.Widget.Widget.get(previewContainer) as Components.JSPresentationUtils.StackTracePreviewContent | undefined;
+  if (!widget) {
+    return '';
+  }
+
+  await widget.updateComplete;
+
+  // TODO(crbug.com/433162438): Get the `StackTrace` from the widget and render that instead
+  //    of crawling the DOM. `StackTrace` is source mapped and has ignore listing.
+
+  const preview = widget.contentElement.querySelector('.stack-preview-container') as HTMLElement;
 
   const nodes = preview.childTextNodes();
   // Gets application-level source mapped stack trace taking the ignore list

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -54,7 +54,7 @@ import type * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import {Icon, Link} from '../../ui/kit/kit.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -72,7 +72,7 @@ import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutlin
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
 
-const {html, nothing, render, Directives: {ref}} = Lit;
+const {html, nothing, render, Directives: {ref, repeat}} = Lit;
 const {animateOn} = UI.UIUtils;
 
 const UIStrings = {
@@ -634,124 +634,86 @@ function renderTitle(
   }
 }
 
-function renderAttribute(
-    attr: {name: string, value?: string}, updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
-    isDiff: boolean, node: SDK.DOMModel.DOMNode): Lit.LitTemplate {
-  const name = attr.name;
-  const value = attr.value || '';
-  const forceValue = isDiff;
-  const closingPunctuationRegex = /[\/;:\)\]\}]/g;
+function renderLinkifiedSrcset(tokens: Common.Srcset.Token[], node: SDK.DOMModel.DOMNode): Lit.TemplateResult {
+  return html`${repeat(tokens, token => {
+    switch (token.type) {
+      case Common.Srcset.TokenType.URL:
+        return renderLinkifiedValue(token.value, node);
+      case Common.Srcset.TokenType.LITERAL:
+        return token.value;
+    }
+  })}`;
+}
+
+const closingPunctuationRegex = /[\/;:\)\]\}]/g;
+
+// FIXME: this should be made declarative next.
+function setValueWithEntities(element: Element, value: string): void {
   let highlightIndex = 0;
   let highlightCount = 0;
   let additionalHighlightOffset = 0;
-
-  function setValueWithEntities(element: Element, value: string): void {
-    const result = convertUnicodeCharsToHTMLEntities(value);
-    highlightCount = result.entityRanges.length;
-    const newValue = result.text.replace(closingPunctuationRegex, (match, replaceOffset) => {
-      while (highlightIndex < highlightCount && result.entityRanges[highlightIndex].offset < replaceOffset) {
-        result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
-        ++highlightIndex;
-      }
-      additionalHighlightOffset += 1;
-      return match + '\u200B';
-    });
-
-    while (highlightIndex < highlightCount) {
+  const result = convertUnicodeCharsToHTMLEntities(value);
+  highlightCount = result.entityRanges.length;
+  const newValue = result.text.replace(closingPunctuationRegex, (match, replaceOffset) => {
+    while (highlightIndex < highlightCount && result.entityRanges[highlightIndex].offset < replaceOffset) {
       result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
       ++highlightIndex;
     }
-    element.setTextContentTruncatedIfNeeded(newValue);
-    Highlighting.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
-  }
-
-  const hasText = (forceValue || value.length > 0);
-  const jslog = VisualLogging.value(name === 'style' ? 'style-attribute' : 'attribute').track({
-    change: true,
-    dblclick: true,
+    additionalHighlightOffset += 1;
+    return match + '\u200B';
   });
 
-  function linkifyValue(value: string): Element {
-    const rewrittenHref = node ? node.resolveURL(value) : null;
-    if (rewrittenHref === null) {
-      const span = document.createElement('span');
-      setValueWithEntities(span, value);
-      return span;
-    }
-    value = value.replace(closingPunctuationRegex, '$&\u200B');
-    if (value.startsWith('data:')) {
-      value = Platform.StringUtilities.trimMiddle(value, 60);
-    }
-    const link = node && node.nodeName().toLowerCase() === 'a' ?
-        Link.create(rewrittenHref, value, undefined, 'image-url') :
-        Components.Linkifier.Linkifier.linkifyURL(rewrittenHref, {
-          text: value,
-          preventClick: true,
-          showColumnNumber: false,
-          inlineFrameIndex: 0,
-        });
-    return ImagePreviewPopover.setImageUrl(link, rewrittenHref);
+  while (highlightIndex < highlightCount) {
+    result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
+    ++highlightIndex;
   }
+  element.setTextContentTruncatedIfNeeded(newValue);
+  Highlighting.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
+}
 
-  function linkifySrcset(value: string): DocumentFragment {
-    // Splitting normally on commas or spaces will break on valid srcsets "foo 1x,bar 2x" and "data:,foo 1x".
-    const fragment = document.createDocumentFragment();
-    let i = 0;
-    while (value.length) {
-      if (i++ > 0) {
-        UI.UIUtils.createTextChild(fragment, ' ');
-      }
-      value = value.trim();
-      let url = '';
-      let descriptor = '';
-      const indexOfSpace = value.search(/\s/);
-      if (indexOfSpace === -1) {
-        url = value;
-      } else if (indexOfSpace > 0 && value[indexOfSpace - 1] === ',') {
-        url = value.substring(0, indexOfSpace);
-      } else {
-        url = value.substring(0, indexOfSpace);
-        const indexOfComma = value.indexOf(',', indexOfSpace);
-        if (indexOfComma !== -1) {
-          descriptor = value.substring(indexOfSpace, indexOfComma + 1);
-        } else {
-          descriptor = value.substring(indexOfSpace);
-        }
-      }
-
-      if (url) {
-        if (url.endsWith(',')) {
-          fragment.appendChild(linkifyValue(url.substring(0, url.length - 1)));
-          UI.UIUtils.createTextChild(fragment, ',');
-        } else {
-          fragment.appendChild(linkifyValue(url));
-        }
+function renderLinkifiedValue(value: string, node: SDK.DOMModel.DOMNode): Lit.TemplateResult {
+  const rewrittenHref = node ? node.resolveURL(value) : null;
+  if (rewrittenHref === null) {
+    return html`<span ${ref(el => {
+      if (el) {
+        setValueWithEntities(el, value);
       }
-      if (descriptor) {
-        UI.UIUtils.createTextChild(fragment, descriptor);
+    })}}></span>`;
+  }
+  value = value.replace(closingPunctuationRegex, '$&\u200B');
+  if (value.startsWith('data:')) {
+    value = Platform.StringUtilities.trimMiddle(value, 60);
+  }
+  const isAnchor = node && node.nodeName().toLowerCase() === 'a';
+  if (isAnchor) {
+    return html`<devtools-link class="devtools-link image-url" href=${rewrittenHref} ${ref(el => {
+      if (el) {
+        ImagePreviewPopover.setImageUrl(el, rewrittenHref);
       }
-      value = value.substring(url.length + descriptor.length);
-    }
-    return fragment;
+    })}>${Platform.StringUtilities.trimMiddle(value, 150)}</devtools-link>`;
   }
-
-  const nodeName = node ? node.nodeName().toLowerCase() : '';
-  const setAttrValue = ref(el => {
-    if (!el) {
-      return;
-    }
-    const valueElement = el as HTMLElement;
-    valueElement.removeChildren();
-    if (nodeName && (name === 'src' || name === 'href') && value) {
-      valueElement.appendChild(linkifyValue(value));
-    } else if ((nodeName === 'img' || nodeName === 'source') && name === 'srcset') {
-      valueElement.appendChild(linkifySrcset(value));
-    } else if (nodeName === 'image' && (name === 'xlink:href' || name === 'href')) {
-      valueElement.appendChild(linkifySrcset(value));
-    } else {
-      setValueWithEntities(valueElement, value);
+  return Components.Linkifier.Linkifier.renderLinkifiedUrl(rewrittenHref, {
+    text: value,
+    preventClick: true,
+    showColumnNumber: false,
+    inlineFrameIndex: 0,
+    onRef: link => {
+      ImagePreviewPopover.setImageUrl(link, rewrittenHref);
     }
   });
+}
+
+function renderAttribute(
+    attr: {name: string, value?: string}, updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
+    isDiff: boolean, node: SDK.DOMModel.DOMNode): Lit.LitTemplate {
+  const name = attr.name;
+  const value = attr.value || '';
+  const forceValue = isDiff;
+  const hasText = (forceValue || value.length > 0);
+  const jslog = VisualLogging.value(name === 'style' ? 'style-attribute' : 'attribute').track({
+    change: true,
+    dblclick: true,
+  });
 
   const relationRef =
       (relation: Protocol.DOM.GetElementByRelationRequestRelation, tooltip: string): ReturnType<typeof ref> =>
@@ -804,14 +766,41 @@ function renderAttribute(
     }
   }
 
+  const nodeName = node ? node.nodeName().toLowerCase() : '';
+  const enum ValueType {
+    UNKNOWN = 0,
+    SRC = 1,
+    SRCSET = 2,
+  }
+  let valueType = ValueType.UNKNOWN;
+  if (nodeName && (name === 'src' || name === 'href') && value) {
+    valueType = ValueType.SRC;
+  } else if ((nodeName === 'img' || nodeName === 'source') && name === 'srcset') {
+    valueType = ValueType.SRCSET;
+  } else if (nodeName === 'image' && (name === 'xlink:href' || name === 'href')) {
+    valueType = ValueType.SRCSET;
+  }
+
+  const withEntitiesRef = valueType === ValueType.UNKNOWN ? ref(el => {
+    if (el) {
+      setValueWithEntities(el, value);
+    }
+  }) :
+                                                            nothing;
+
+  // clang-format off
   return html`<span class="webkit-html-attribute" jslog=${jslog}><span class="webkit-html-attribute-name"
       ${animateOn(Boolean(updateRecord?.isAttributeModified(name) && !hasText), DOM_UPDATE_ANIMATION_CLASS_NAME)} ${
       relationRefDirective}>${name}</span>${
       hasText ? html`=\u200B"<span class="webkit-html-attribute-value" ${
                     animateOn(
                         Boolean(updateRecord?.isAttributeModified(name) && hasText),
-                        DOM_UPDATE_ANIMATION_CLASS_NAME)} ${setAttrValue} ${valueRelationRefDirective}></span>"` :
+                        DOM_UPDATE_ANIMATION_CLASS_NAME)} ${valueRelationRefDirective} ${withEntitiesRef}>
+                        ${valueType === ValueType.SRC ? renderLinkifiedValue(value, node) : nothing}
+                        ${valueType === ValueType.SRCSET ? renderLinkifiedSrcset(Common.Srcset.parseSrcset(value), node) : nothing}
+                </span>"` :
                 nothing}</span>`;
+  // clang-format on
 }
 
 function renderTag(

package/front_end/panels/elements/NodeStackTraceWidget.ts

@@ -22,22 +22,20 @@ const str_ = i18n.i18n.registerUIStrings('panels/elements/NodeStackTraceWidget.t
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 interface ViewInput {
-  target?: SDK.Target.Target;
-  linkifier: Components.Linkifier.Linkifier;
   stackTrace?: StackTrace.StackTrace.StackTrace;
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
-  const {target: sdkTarget, linkifier, stackTrace} = input;
+  const {stackTrace} = input;
   // clang-format off
   render(html`
     <style>${nodeStackTraceWidgetStyles}</style>
     ${target && stackTrace ?
          html`<devtools-widget
                 class="stack-trace"
-                .widgetConfig=${UI.Widget.widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {target: sdkTarget, linkifier, stackTrace})}>
+                .widgetConfig=${UI.Widget.widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {stackTrace})}>
               </devtools-widget>` :
          html`<div class="gray-info-message">${i18nString(UIStrings.noStackTraceAvailable)}</div>`}`,
     target);
@@ -45,7 +43,6 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 export class NodeStackTraceWidget extends UI.Widget.VBox {
-  readonly #linkifier = new Components.Linkifier.Linkifier(UI.UIUtils.MaxLengthForDisplayedURLsInConsole);
   readonly #view: View;
 
   constructor(view = DEFAULT_VIEW) {
@@ -73,11 +70,6 @@ export class NodeStackTraceWidget extends UI.Widget.VBox {
         await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createStackTraceFromProtocolRuntime(
             runtimeStackTrace, target) :
         undefined;
-    const input: ViewInput = {
-      target,
-      linkifier: this.#linkifier,
-      stackTrace,
-    };
-    this.#view(input, {}, this.contentElement);
+    this.#view({stackTrace}, {}, this.contentElement);
   }
 }