chrome-devtools-frontend 1.0.1585664 → 1.0.1587572

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/entrypoint_template.html

@@ -14,7 +14,11 @@
     }
   }
 </style>
-<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' https://chrome-devtools-frontend.appspot.com">
+<meta
+  http-equiv="Content-Security-Policy"
+  content="default-src 'self' devtools: data:; style-src 'self' 'unsafe-inline' devtools:; object-src 'none'; script-src
+  'self' https://chrome-devtools-frontend.appspot.com; img-src 'self' data:; frame-src * data:; connect-src data:
+  https://chromeuxreport.googleapis.com 'self' devtools:;">
 <meta name="referrer" content="no-referrer">
 <script type="module" src="./entrypoints/%ENTRYPOINT_NAME%/%ENTRYPOINT_NAME%.js"></script>
 <link href="./application_tokens.css" rel="stylesheet">

package/front_end/generated/InspectorBackendCommands.ts

@@ -857,7 +857,7 @@ inspectorBackend.registerCommand("Network.disable", [], [], "Disables network tr
 inspectorBackend.registerCommand("Network.emulateNetworkConditions", [{"name": "offline", "type": "boolean", "optional": false, "description": "True to emulate internet disconnection.", "typeRef": null}, {"name": "latency", "type": "number", "optional": false, "description": "Minimum latency from request sent to response headers received (ms).", "typeRef": null}, {"name": "downloadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.", "typeRef": null}, {"name": "uploadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated upload throughput (bytes/sec).  -1 disables upload throttling.", "typeRef": null}, {"name": "connectionType", "type": "string", "optional": true, "description": "Connection type if known.", "typeRef": "Network.ConnectionType"}, {"name": "packetLoss", "type": "number", "optional": true, "description": "WebRTC packet loss (percent, 0-100). 0 disables packet loss emulation, 100 drops all the packets.", "typeRef": null}, {"name": "packetQueueLength", "type": "number", "optional": true, "description": "WebRTC packet queue length (packet). 0 removes any queue length limitations.", "typeRef": null}, {"name": "packetReordering", "type": "boolean", "optional": true, "description": "WebRTC packetReordering feature.", "typeRef": null}], [], "Activates emulation of network conditions. This command is deprecated in favor of the emulateNetworkConditionsByRule and overrideNetworkState commands, which can be used together to the same effect.");
 inspectorBackend.registerCommand("Network.emulateNetworkConditionsByRule", [{"name": "offline", "type": "boolean", "optional": false, "description": "True to emulate internet disconnection.", "typeRef": null}, {"name": "matchedNetworkConditions", "type": "array", "optional": false, "description": "Configure conditions for matching requests. If multiple entries match a request, the first entry wins.  Global conditions can be configured by leaving the urlPattern for the conditions empty. These global conditions are also applied for throttling of p2p connections.", "typeRef": "Network.NetworkConditions"}], ["ruleIds"], "Activates emulation of network conditions for individual requests using URL match patterns. Unlike the deprecated Network.emulateNetworkConditions this method does not affect `navigator` state. Use Network.overrideNetworkState to explicitly modify `navigator` behavior.");
 inspectorBackend.registerCommand("Network.overrideNetworkState", [{"name": "offline", "type": "boolean", "optional": false, "description": "True to emulate internet disconnection.", "typeRef": null}, {"name": "latency", "type": "number", "optional": false, "description": "Minimum latency from request sent to response headers received (ms).", "typeRef": null}, {"name": "downloadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.", "typeRef": null}, {"name": "uploadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated upload throughput (bytes/sec).  -1 disables upload throttling.", "typeRef": null}, {"name": "connectionType", "type": "string", "optional": true, "description": "Connection type if known.", "typeRef": "Network.ConnectionType"}], [], "Override the state of navigator.onLine and navigator.connection.");
-inspectorBackend.registerCommand("Network.enable", [{"name": "maxTotalBufferSize", "type": "number", "optional": true, "description": "Buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxResourceBufferSize", "type": "number", "optional": true, "description": "Per-resource buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxPostDataSize", "type": "number", "optional": true, "description": "Longest post body size (in bytes) that would be included in requestWillBeSent notification", "typeRef": null}, {"name": "reportDirectSocketTraffic", "type": "boolean", "optional": true, "description": "Whether DirectSocket chunk send/receive events should be reported.", "typeRef": null}, {"name": "enableDurableMessages", "type": "boolean", "optional": true, "description": "Enable storing response bodies outside of renderer, so that these survive a cross-process navigation. Requires maxTotalBufferSize to be set. Currently defaults to false. This field is being deprecated in favor of the dedicated configureDurableMessages command, due to the possibility of deadlocks when awaiting Network.enable before issuing Runtime.runIfWaitingForDebugger.", "typeRef": null}], [], "Enables network tracking, network events will now be delivered to the client.");
+inspectorBackend.registerCommand("Network.enable", [{"name": "maxTotalBufferSize", "type": "number", "optional": true, "description": "Buffer size in bytes to use when preserving network payloads (XHRs, etc). This is the maximum number of bytes that will be collected by this DevTools session.", "typeRef": null}, {"name": "maxResourceBufferSize", "type": "number", "optional": true, "description": "Per-resource buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxPostDataSize", "type": "number", "optional": true, "description": "Longest post body size (in bytes) that would be included in requestWillBeSent notification", "typeRef": null}, {"name": "reportDirectSocketTraffic", "type": "boolean", "optional": true, "description": "Whether DirectSocket chunk send/receive events should be reported.", "typeRef": null}, {"name": "enableDurableMessages", "type": "boolean", "optional": true, "description": "Enable storing response bodies outside of renderer, so that these survive a cross-process navigation. Requires maxTotalBufferSize to be set. Currently defaults to false. This field is being deprecated in favor of the dedicated configureDurableMessages command, due to the possibility of deadlocks when awaiting Network.enable before issuing Runtime.runIfWaitingForDebugger.", "typeRef": null}], [], "Enables network tracking, network events will now be delivered to the client.");
 inspectorBackend.registerCommand("Network.configureDurableMessages", [{"name": "maxTotalBufferSize", "type": "number", "optional": true, "description": "Buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxResourceBufferSize", "type": "number", "optional": true, "description": "Per-resource buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}], [], "Configures storing response bodies outside of renderer, so that these survive a cross-process navigation. If maxTotalBufferSize is not set, durable messages are disabled.");
 inspectorBackend.registerCommand("Network.getAllCookies", [], ["cookies"], "Returns all browser cookies. Depending on the backend support, will return detailed cookie information in the `cookies` field. Deprecated. Use Storage.getCookies instead.");
 inspectorBackend.registerCommand("Network.getCertificate", [{"name": "origin", "type": "string", "optional": false, "description": "Origin to get certificate for.", "typeRef": null}], ["tableNames"], "Returns the DER-encoded certificate.");

package/front_end/generated/protocol.ts

@@ -11896,6 +11896,8 @@ export namespace Network {
   export interface EnableRequest {
     /**
      * Buffer size in bytes to use when preserving network payloads (XHRs, etc).
+     * This is the maximum number of bytes that will be collected by this
+     * DevTools session.
      */
     maxTotalBufferSize?: integer;
     /**

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/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/application/ServiceWorkerCacheViews.ts

@@ -15,7 +15,6 @@ import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrappe
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as NetworkComponents from '../network/components/components.js';
 import * as Network from '../network/network.js';
 
 import * as ApplicationComponents from './components/components.js';
@@ -545,7 +544,7 @@ export class RequestView extends UI.Widget.VBox {
     this.tabbedPane.appendTab(
         'headers', i18nString(UIStrings.headers),
         LegacyWrapper.LegacyWrapper.legacyWrapper(
-            UI.Widget.VBox, new NetworkComponents.RequestHeadersView.RequestHeadersView(request)));
+            UI.Widget.VBox, new Network.RequestHeadersView.RequestHeadersView(request)));
     this.tabbedPane.appendTab(
         'preview', i18nString(UIStrings.preview), new Network.RequestPreviewView.RequestPreviewView(request));
     this.tabbedPane.show(this.element);

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/ElementsPanel.ts

@@ -227,6 +227,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   domTreeButton?: HTMLElement;
   private selectedNodeOnReset?: SDK.DOMModel.DOMNode;
   private hasNonDefaultSelectedNode?: boolean;
+  #restorationGeneration = 0;
   private searchConfig?: UI.SearchableView.SearchConfig;
   private omitDefaultSelection?: boolean;
   private notFirstInspectElement?: boolean;
@@ -609,6 +610,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     if (focus) {
       this.selectedNodeOnReset = selectedNode;
       this.hasNonDefaultSelectedNode = true;
+      this.#restorationGeneration++;
     }
 
     const executionContexts = selectedNode.domModel().runtimeModel().executionContexts();
@@ -645,32 +647,128 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
 
     const savedSelectedNodeOnReset = this.selectedNodeOnReset;
-    void restoreNode.call(this, domModel, this.selectedNodeOnReset || null);
+    void this.restoreSelectedNodeAfterUpdate(domModel, this.selectedNodeOnReset || null, savedSelectedNodeOnReset);
+  }
+
+  /**
+   * Best-effort restoration of the previously focused node after a reload.
+   *
+   * The CDP path-based mechanism works well for stable DOMs, but can be
+   * unreliable for pages that render asynchronously after the initial
+   * document update. To improve reliability we retry a few times, and also
+   * fall back to evaluating a JS path (document.querySelector(...)) when
+   * possible.
+   *
+   * Node resolution (computation) is separated from view state updates:
+   * resolveNode returns a DOMNode|null, and this method handles selection.
+   */
+  private async restoreSelectedNodeAfterUpdate(
+      domModel: SDK.DOMModel.DOMModel, staleNode: SDK.DOMModel.DOMNode|null,
+      savedSelectedNodeOnReset: SDK.DOMModel.DOMNode|undefined): Promise<void> {
+    // Fast path: no previous node to restore -- just select the fallback
+    // synchronously so callers that check selection immediately still work.
+    if (!staleNode) {
+      this.trySetFallbackSelection(domModel);
+      return;
+    }
+
+    const nodePath = staleNode.path();
+
+    // Keep the panel usable quickly by selecting a reasonable default node as
+    // soon as we can, but continue trying to restore the stale node.
+    let didSetFallbackSelection = false;
 
-    async function restoreNode(
-        this: ElementsPanel, domModel: SDK.DOMModel.DOMModel, staleNode: SDK.DOMModel.DOMNode|null): Promise<void> {
-      const nodePath = staleNode ? staleNode.path() : null;
-      const restoredNodeId = nodePath ? await domModel.pushNodeByPathToFrontend(nodePath) : null;
+    // Retry with exponential-ish backoff, capping total wait at ~3s.
+    // Most async-rendered pages settle well within this window.
+    const attemptDelaysMs = [0, 250, 500, 1000, 1500];
 
+    // Capture the restoration generation so any user interaction (node
+    // selection, style editing, node reveal, etc.) cancels pending retries.
+    const restorationGeneration = this.#restorationGeneration;
+
+    for (let attempt = 0; attempt < attemptDelaysMs.length; ++attempt) {
       if (savedSelectedNodeOnReset !== this.selectedNodeOnReset) {
         return;
       }
-      let node = domModel.nodeForId(restoredNodeId);
-      if (!node) {
-        const inspectedDocument = domModel.existingDocument();
-        node = inspectedDocument ? inspectedDocument.body || inspectedDocument.documentElement : null;
+      if (this.hasNonDefaultSelectedNode || this.pendingNodeReveal ||
+          restorationGeneration !== this.#restorationGeneration) {
+        return;
       }
-      // If `node` is null here, the document hasn't been transmitted from the backend yet
-      // and isn't in a valid state to have a default-selected node. Another document update
-      // should be forthcoming. In the meantime, don't set the default-selected node or notify
-      // the test that it's ready, because it isn't.
-      if (node) {
-        this.setDefaultSelectedNode(node);
+
+      if (attemptDelaysMs[attempt]) {
+        await new Promise<void>(resolve => window.setTimeout(resolve, attemptDelaysMs[attempt]));
+      }
+
+      if (savedSelectedNodeOnReset !== this.selectedNodeOnReset) {
+        return;
+      }
+      if (this.hasNonDefaultSelectedNode || this.pendingNodeReveal ||
+          restorationGeneration !== this.#restorationGeneration) {
+        return;
+      }
+
+      // Computation: resolve the node without touching view state.
+      const restoredNode = await this.resolveNodeForRestoration(domModel, nodePath);
+
+      if (restoredNode) {
+        this.setDefaultSelectedNode(restoredNode);
         this.lastSelectedNodeSelectedForTest();
+        return;
+      }
+
+      if (!didSetFallbackSelection) {
+        // If we cannot compute a fallback selection yet, the document likely
+        // has not been transmitted from the backend and isn't in a valid state
+        // to have a default-selected node. Another document update should be
+        // forthcoming. In the meantime, don't notify tests that selection is
+        // ready, because it isn't.
+        if (!this.trySetFallbackSelection(domModel)) {
+          return;
+        }
+        didSetFallbackSelection = true;
       }
     }
   }
 
+  /**
+   * Attempts to resolve a DOM node by its CDP path.
+   * Pure computation -- does not modify view state.
+   */
+  private async resolveNodeForRestoration(domModel: SDK.DOMModel.DOMModel, nodePath: string|null):
+      Promise<SDK.DOMModel.DOMNode|null> {
+    try {
+      if (nodePath) {
+        const restoredNodeId = await domModel.pushNodeByPathToFrontend(nodePath);
+        const restoredNode = domModel.nodeForId(restoredNodeId);
+        if (restoredNode) {
+          return restoredNode;
+        }
+      }
+    } catch {
+      // CDP calls (pushNodeByPathToFrontend) can reject when the target or
+      // session is closed, e.g. if the page navigates again while we are
+      // retrying. Safe to swallow: we either retry on the next iteration or
+      // fall through to the fallback node.
+    }
+    return null;
+  }
+
+  private trySetFallbackSelection(domModel: SDK.DOMModel.DOMModel): boolean {
+    const inspectedDocument = domModel.existingDocument();
+    const fallbackNode = inspectedDocument ? inspectedDocument.body || inspectedDocument.documentElement : null;
+    if (!fallbackNode) {
+      return false;
+    }
+
+    this.setDefaultSelectedNode(fallbackNode);
+    this.lastSelectedNodeSelectedForTest();
+    return true;
+  }
+
+  cancelPendingRestoration(): void {
+    this.#restorationGeneration++;
+  }
+
   private lastSelectedNodeSelectedForTest(): void {
   }
 
@@ -1373,6 +1471,7 @@ export class DOMNodeRevealer implements Common.Revealer.Revealer<
       omitFocus?: boolean): Promise<void> {
     const panel = ElementsPanel.instance();
     panel.pendingNodeReveal = true;
+    panel.cancelPendingRestoration();
 
     return (new Promise<void>(revealPromise)).catch((reason: Error) => {
       let message: string;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -634,64 +634,12 @@ function renderTitle(
   }
 }
 
-const enum SrcsetTokenType {
-  LITERAL = 0,
-  LINK = 1
-}
-
-interface SrcsetToken {
-  type: SrcsetTokenType;
-  value: string;
-}
-
-// FIXME: find a home for this in SDK.
-function parseSrcset(value: string): SrcsetToken[] {
-  const result: SrcsetToken[] = [];
-  let i = 0;
-  while (value.length) {
-    if (i++ > 0) {
-      result.push({value: ' ', type: SrcsetTokenType.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: SrcsetTokenType.LINK});
-        result.push({type: SrcsetTokenType.LITERAL, value: ','});
-      } else {
-        result.push({value: url, type: SrcsetTokenType.LINK});
-      }
-    }
-    if (descriptor) {
-      result.push({type: SrcsetTokenType.LITERAL, value: descriptor});
-    }
-    value = value.substring(url.length + descriptor.length);
-  }
-  return result;
-}
-
-function renderLinkifiedSrcset(tokens: SrcsetToken[], node: SDK.DOMModel.DOMNode): Lit.TemplateResult {
+function renderLinkifiedSrcset(tokens: Common.Srcset.Token[], node: SDK.DOMModel.DOMNode): Lit.TemplateResult {
   return html`${repeat(tokens, token => {
     switch (token.type) {
-      case SrcsetTokenType.LINK:
+      case Common.Srcset.TokenType.URL:
         return renderLinkifiedValue(token.value, node);
-      case SrcsetTokenType.LITERAL:
+      case Common.Srcset.TokenType.LITERAL:
         return token.value;
     }
   })}`;
@@ -849,7 +797,7 @@ function renderAttribute(
                         Boolean(updateRecord?.isAttributeModified(name) && hasText),
                         DOM_UPDATE_ANIMATION_CLASS_NAME)} ${valueRelationRefDirective} ${withEntitiesRef}>
                         ${valueType === ValueType.SRC ? renderLinkifiedValue(value, node) : nothing}
-                        ${valueType === ValueType.SRCSET ? renderLinkifiedSrcset(parseSrcset(value), node) : nothing}
+                        ${valueType === ValueType.SRCSET ? renderLinkifiedSrcset(Common.Srcset.parseSrcset(value), node) : nothing}
                 </span>"` :
                 nothing}</span>`;
   // clang-format on

package/front_end/panels/network/NetworkItemView.ts

@@ -22,6 +22,7 @@ import * as NetworkComponents from './components/components.js';
 import {EventSourceMessagesView} from './EventSourceMessagesView.js';
 import {RequestCookiesView} from './RequestCookiesView.js';
 import {RequestDeviceBoundSessionsView} from './RequestDeviceBoundSessionsView.js';
+import * as RequestHeadersView from './RequestHeadersView.js';
 import {RequestInitiatorView} from './RequestInitiatorView.js';
 import {RequestPayloadView} from './RequestPayloadView.js';
 import {RequestPreviewView} from './RequestPreviewView.js';
@@ -148,7 +149,7 @@ const requestToPreviewView = new WeakMap<SDK.NetworkRequest.NetworkRequest, Requ
 export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   #request: SDK.NetworkRequest.NetworkRequest;
   readonly #resourceViewTabSetting: Common.Settings.Setting<NetworkForward.UIRequestLocation.UIRequestTabs>;
-  readonly #headersViewComponent: NetworkComponents.RequestHeadersView.RequestHeadersView|undefined;
+  readonly #headersViewComponent: RequestHeadersView.RequestHeadersView|undefined;
   #payloadView: RequestPayloadView|null = null;
   readonly #responseView: RequestResponseView|undefined;
   #cookiesView: RequestCookiesView|null = null;
@@ -174,7 +175,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
           i18nString(UIStrings.headers));
     } else {
       this.#firstTab = NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT;
-      this.#headersViewComponent = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
+      this.#headersViewComponent = new RequestHeadersView.RequestHeadersView(request);
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT, i18nString(UIStrings.headers),
           LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.VBox, this.#headersViewComponent),
@@ -426,7 +427,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     this.#headersViewComponent?.revealHeader(section, header);
   }
 
-  getHeadersViewComponent(): NetworkComponents.RequestHeadersView.RequestHeadersView|undefined {
+  getHeadersViewComponent(): RequestHeadersView.RequestHeadersView|undefined {
     return this.#headersViewComponent;
   }
 }