chrome-devtools-frontend 1.0.1703574 → 1.0.1704172

package/front_end/panels/network/ShowMoreDetailsWidget.ts

@@ -11,6 +11,10 @@ const UIStrings = {
    * @description Text to show more content
    */
   showMore: 'Show more',
+  /**
+   * @description Context menu item to copy the shown text to the clipboard
+   */
+  copy: 'Copy',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/ShowMoreDetailsWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -20,7 +24,7 @@ interface ViewInput {
   text: string;
   showMore: boolean;
   onToggle: () => void;
-  copy: CopyMenuItem|null;
+  copy: (() => void)|null;
 }
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 const MAX_LENGTH = 3000;
@@ -29,7 +33,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   const onContextMenuShowMore = (event: Event): void => {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     if (input.copy) {
-      contextMenu.clipboardSection().appendItem(input.copy.menuItem, input.copy.handler);
+      contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copy), input.copy, {jslogContext: 'copy'});
     }
     if (!input.showMore) {
       contextMenu.newSection().appendItem(i18nString(UIStrings.showMore), input.onToggle, {jslogContext: 'show-more'});
@@ -51,16 +55,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       target);
 };
 
-interface CopyMenuItem {
-  menuItem: UI.ContextMenu.Item;
-  handler: () => void;
-}
-
 export class ShowMoreDetailsWidget extends UI.Widget.Widget {
   readonly #view: View;
   #text = '';
   #showMore = false;
-  #copy: CopyMenuItem|null = null;
+  #copy: (() => void)|null = null;
   constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target);
     this.#view = view;
@@ -75,7 +74,11 @@ export class ShowMoreDetailsWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  set copy(copy: CopyMenuItem) {
+  get copy(): (() => void)|null {
+    return this.#copy;
+  }
+
+  set copy(copy: () => void) {
     this.#copy = copy;
     this.requestUpdate();
   }

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -583,6 +583,7 @@ export class DebuggerPlugin extends Plugin {
   }
 
   private workingCopyChanged(): void {
+    this.#scopeMappingsCache.clear();
     this.setMuted(this.uiSourceCode.isDirty());
   }
 
@@ -666,7 +667,7 @@ export class DebuggerPlugin extends Plugin {
     return {
       box,
       show: async (popover: UI.GlassPane.GlassPane) => {
-        const scopeMappings = await this.#getScopeMappings(selectedCallFrame);
+        const scopeMappings = await this.#getScopeMappings(debuggableFrame) ?? [];
         const scopedVariable = findVariableInScopeMappings(evaluationText, highlightRange.from, scopeMappings);
         if (scopedVariable.found) {
           if (!scopedVariable.value) {
@@ -967,21 +968,18 @@ export class DebuggerPlugin extends Plugin {
     return offset ?? null;
   }
 
-  #cachedScopeMappings?: {callFrame: SDK.DebuggerModel.CallFrame, promise: Promise<ScopeMapping[]>};
+  readonly #scopeMappingsCache = new ScopeMappingsCache(this.uiSourceCode);
 
-  #getScopeMappings(callFrame: SDK.DebuggerModel.CallFrame,
-                    resolvedScopeChain?: SDK.DebuggerModel.ScopeChainEntry[]): Promise<ScopeMapping[]> {
-    if (this.#cachedScopeMappings?.callFrame !== callFrame) {
-      const url = this.uiSourceCode.url();
-      this.#cachedScopeMappings = {
-        callFrame,
-        promise: computeScopeMappings(
-            callFrame, location => this.#rawLocationToEditorOffset(location, url),
+  /** @returns `null` if the scope mappings can't be used because the file has unsaved edits. */
+  #getScopeMappings(debuggableFrame: StackTrace.StackTrace.DebuggableFrameFlavor,
+                    resolvedScopeChain?: SDK.DebuggerModel.ScopeChainEntry[]): Promise<ScopeMapping[]>|null {
+    const url = this.uiSourceCode.url();
+    return this.#scopeMappingsCache.get(
+        debuggableFrame,
+        () => computeScopeMappings(
+            debuggableFrame.sdkFrame, location => this.#rawLocationToEditorOffset(location, url),
             (line, col) => this.editor?.toOffset(this.transformer.uiLocationToEditorLocation(line, col)) ?? null,
-            resolvedScopeChain),
-      };
-    }
-    return this.#cachedScopeMappings.promise;
+            resolvedScopeChain));
   }
 
   private async computeValueDecorations(): Promise<CodeMirror.DecorationSet|null> {
@@ -1040,9 +1038,9 @@ export class DebuggerPlugin extends Plugin {
       return null;
     }
 
-    const scopeMappings = await this.#getScopeMappings(callFrame, scopeChain);
+    const scopeMappings = await this.#getScopeMappings(debuggableFrame, scopeChain);
     // After the `await` the DebuggerPlugin could have been disposed. Re-check `this.editor`.
-    if (!this.editor || scopeMappings.length === 0) {
+    if (!this.editor || !scopeMappings?.length) {
       return null;
     }
 
@@ -2144,6 +2142,41 @@ export interface ScopeMapping {
   variableMap: Map<string, SDK.RemoteObject.RemoteObject|null>;
 }
 
+/**
+ * Caches the {@link ScopeMapping}s for the selected frame of a single {@link DebuggerPlugin}.
+ *
+ * The editor offsets in a {@link ScopeMapping} are derived from raw and UI locations, which describe
+ * the committed script content. Once the user edits the file, these offsets no longer match the
+ * editor content. So no mappings are handed out while the UISourceCode has unsaved edits.
+ *
+ * The cache is keyed on the DebuggableFrameFlavor rather than the SDK CallFrame: Re-translating a
+ * frame (e.g. after a source map is attached) produces a new flavor for the same SDK CallFrame.
+ */
+export class ScopeMappingsCache {
+  readonly #uiSourceCode: Workspace.UISourceCode.UISourceCode;
+  #cached?: {frame: StackTrace.StackTrace.DebuggableFrameFlavor, promise: Promise<ScopeMapping[]>};
+
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
+    this.#uiSourceCode = uiSourceCode;
+  }
+
+  /** @returns the (cached) scope mappings for `frame`, or `null` if the UISourceCode has unsaved edits. */
+  get(frame: StackTrace.StackTrace.DebuggableFrameFlavor,
+      compute: () => Promise<ScopeMapping[]>): Promise<ScopeMapping[]>|null {
+    if (this.#uiSourceCode.isDirty()) {
+      return null;
+    }
+    if (this.#cached?.frame !== frame) {
+      this.#cached = {frame, promise: compute()};
+    }
+    return this.#cached.promise;
+  }
+
+  clear(): void {
+    this.#cached = undefined;
+  }
+}
+
 export async function computeScopeMappings(
     callFrame: SDK.DebuggerModel.CallFrame,
     rawLocationToEditorOffset: (l: SDK.DebuggerModel.Location|null) => Promise<number|null>,

package/front_end/panels/sources/SourcesPanel.ts

@@ -327,7 +327,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
   static updateResizerAndSidebarButtons(panel: SourcesPanel): void {
     const isInWrapper = Boolean(UI.Context.Context.instance().flavor(QuickSourceView)) &&
         !UI.InspectorView.InspectorView.instance().isDrawerMinimized();
-    panel.#sourcesView.setLayoutMode(panel.splitWidget, panel.splitWidget.isVertical(), isInWrapper);
+    panel.#sourcesView.setLayoutMode(panel.splitWidget.isVertical(), isInWrapper);
   }
 
   targetAdded(_target: SDK.Target.Target): void {

package/front_end/panels/sources/SourcesView.ts

@@ -16,7 +16,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
+import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {EditingLocationHistoryManager} from './EditingLocationHistoryManager.js';
@@ -69,7 +69,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/SourcesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const {ref} = Directives;
 const {widget, widgetRef} = UI.Widget;
 
 export interface ViewInput {
@@ -83,7 +82,6 @@ export interface ViewInput {
   isVertical: boolean;
   isInWrapper: boolean;
   isTraceApp: boolean;
-  splitWidget?: UI.SplitWidget.SplitWidget;
   onToggleNavigatorSidebar?: () => void;
   onToggleDebuggerSidebar?: () => void;
   breakpointsActive: boolean;
@@ -170,11 +168,7 @@ export const DEFAULT_VIEW: View = (input, output, target): void => {
       </devtools-widget>
     </devtools-widget>
     <div class="sources-toolbar" jslog=${VisualLogging.toolbar('bottom')}>
-      <devtools-toolbar class="script-view-toolbar" style="flex: auto;" ${ref(el => {
-        if (el && input.splitWidget) {
-          input.splitWidget.toggleResizer(el, !input.isVertical && !input.isInWrapper);
-        }
-      })}>
+      <devtools-toolbar class="script-view-toolbar" style="flex: auto;">
         ${Array.isArray(input.scriptViewToolbarItems)
             ? input.scriptViewToolbarItems.map(item => item.element)
             : input.scriptViewToolbarItems}
@@ -218,7 +212,6 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
   #debuggerSidebarInitialized = false;
   #isVertical = false;
   #isInWrapper = true;
-  #splitWidget?: UI.SplitWidget.SplitWidget;
   #breakpointsActive = true;
   #editorContainerPromise: Promise<TabbedEditorContainer>;
   #editorContainerResolve!: (container: TabbedEditorContainer) => void;
@@ -295,7 +288,6 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
       isVertical: this.#isVertical,
       isInWrapper: this.#isInWrapper,
       isTraceApp: Root.Runtime.Runtime.isTraceApp(),
-      splitWidget: this.#splitWidget,
       onToggleNavigatorSidebar: this.#onToggleNavigatorSidebar,
       onToggleDebuggerSidebar: this.#onToggleDebuggerSidebar,
       breakpointsActive: this.#breakpointsActive,
@@ -390,8 +382,7 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
     this.requestUpdate();
   }
 
-  setLayoutMode(splitWidget: UI.SplitWidget.SplitWidget, isVertical: boolean, isInWrapper: boolean): void {
-    this.#splitWidget = splitWidget;
+  setLayoutMode(isVertical: boolean, isInWrapper: boolean): void {
     this.#isVertical = isVertical;
     this.#isInWrapper = isInWrapper;
     this.requestUpdate();

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -291,9 +291,6 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
   }
 
   override performUpdate(): void {
-    if (false) {
-      return;
-    }
     const shortcuts = [
       {actionId: 'quick-open.show', description: i18nString(UIStrings.openFile)},
       {actionId: 'quick-open.show-command-menu', description: i18nString(UIStrings.runCommand)},

package/front_end/panels/sources/components/HeadersView.ts

@@ -1,8 +1,6 @@
 // Copyright 2022 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -18,7 +16,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import headersViewStyles from './HeadersView.css.js';
 
-const {html} = Lit;
+const {html, Directives: {ref}} = Lit;
 
 const UIStrings = {
   /**
@@ -59,25 +57,70 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const DEFAULT_HEADER_VALUE = 'header value';
 const getDefaultHeaderName = (i: number): string => `header-name-${i}`;
 
+export interface WrapperViewInput {
+  data: HeadersViewComponentData;
+}
+
+export interface WrapperViewOutput {
+  component?: HeadersViewComponent;
+}
+
+export type WrapperView = (input: WrapperViewInput, output: WrapperViewOutput, target: HTMLElement) => void;
+
+// clang-format off
+export const HEADERS_VIEW_DEFAULT_VIEW: WrapperView = (input, output, target) => {
+  Lit.render(html`
+    <devtools-sources-headers-view
+      .data=${input.data}
+      ${ref(el => {
+        if (el) {
+          output.component = el as HeadersViewComponent;
+        }
+      })}
+    ></devtools-sources-headers-view>
+  `, target);
+};
+// clang-format on
+
 export class HeadersView extends UI.View.SimpleView {
-  readonly #headersViewComponent = new HeadersViewComponent();
+  #headersViewComponent!: HeadersViewComponent;
   #uiSourceCode: Workspace.UISourceCode.UISourceCode;
+  readonly #view: WrapperView;
+  #componentData: HeadersViewComponentData;
 
-  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode, view: WrapperView = HEADERS_VIEW_DEFAULT_VIEW) {
     super({
       title: i18n.i18n.lockedString('HeadersView'),
       viewId: 'headers-view',
       jslog: `${VisualLogging.pane('headers-view')}`,
     });
+    this.#view = view;
     this.#uiSourceCode = uiSourceCode;
-    this.#uiSourceCode.addEventListener(
-        Workspace.UISourceCode.Events.WorkingCopyChanged, this.#onWorkingCopyChanged, this);
-    this.#uiSourceCode.addEventListener(
-        Workspace.UISourceCode.Events.WorkingCopyCommitted, this.#onWorkingCopyCommitted, this);
-    this.element.appendChild(this.#headersViewComponent);
+    this.#componentData = {
+      headerOverrides: [],
+      uiSourceCode: this.#uiSourceCode,
+      parsingError: false,
+    };
+    this.#uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.#onWorkingCopyChanged,
+                                        this);
+    this.#uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted,
+                                        this.#onWorkingCopyCommitted, this);
+    this.performUpdate();
     void this.#setInitialData();
   }
 
+  override performUpdate(): void {
+    const that = this;
+    const output: WrapperViewOutput = {
+      set component(value: HeadersViewComponent|undefined) {
+        if (value) {
+          that.#headersViewComponent = value;
+        }
+      },
+    };
+    this.#view({data: this.#componentData}, output, this.contentElement);
+  }
+
   async #setInitialData(): Promise<void> {
     const contentDataOrError = await this.#uiSourceCode.requestContentData();
     this.#setComponentData(TextUtils.ContentData.ContentData.textOr(contentDataOrError, ''));
@@ -97,11 +140,12 @@ export class HeadersView extends UI.View.SimpleView {
       parsingError = true;
     }
 
-    this.#headersViewComponent.data = {
+    this.#componentData = {
       headerOverrides,
       uiSourceCode: this.#uiSourceCode,
       parsingError,
     };
+    this.performUpdate();
   }
 
   #onWorkingCopyChanged(): void {
@@ -117,10 +161,10 @@ export class HeadersView extends UI.View.SimpleView {
   }
 
   dispose(): void {
-    this.#uiSourceCode.removeEventListener(
-        Workspace.UISourceCode.Events.WorkingCopyChanged, this.#onWorkingCopyChanged, this);
-    this.#uiSourceCode.removeEventListener(
-        Workspace.UISourceCode.Events.WorkingCopyCommitted, this.#onWorkingCopyCommitted, this);
+    this.#uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.#onWorkingCopyChanged,
+                                           this);
+    this.#uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted,
+                                           this.#onWorkingCopyCommitted, this);
   }
 }
 
@@ -323,7 +367,7 @@ export class HeadersViewComponent extends HTMLElement {
       }
       range.deleteContents();
 
-      const textNode = document.createTextNode(text);
+      const textNode = new Text(text);
       range.insertNode(textNode);
       range.selectNodeContents(textNode);
       range.collapse(false);
@@ -341,119 +385,42 @@ export class HeadersViewComponent extends HTMLElement {
       throw new Error('HeadersView render was not scheduled');
     }
 
-    if (this.#parsingError) {
-      const fileName = this.#uiSourceCode?.name() || '.headers';
-      // clang-format off
-      Lit.render(html`
-        <style>${headersViewStyles}</style>
-        <div class="center-wrapper">
-          <div class="centered">
-            <div class="error-header">${i18nString(UIStrings.errorWhenParsing, {PH1: fileName})}</div>
-            <div class="error-body">${i18nString(UIStrings.parsingErrorExplainer, {PH1: fileName})}</div>
-          </div>
-        </div>
-      `, this.#shadow, {host: this});
-      // clang-format on
-      return;
-    }
-
-    // clang-format off
-    Lit.render(html`
-      <style>${headersViewStyles}</style>
-      ${this.#headerOverrides.map((headerOverride, blockIndex) =>
-        html`
-          ${this.#renderApplyToRow(headerOverride.applyTo, blockIndex)}
-          ${headerOverride.headers.map((header, headerIndex) =>
-            html`
-              ${this.#renderHeaderRow(header, blockIndex, headerIndex)}
-            `,
-          )}
-        `,
-      )}
-      <devtools-button
-          .variant=${Buttons.Button.Variant.OUTLINED}
-          .jslogContext=${'headers-view.add-override-rule'}
-          class="add-block">
-        ${i18nString(UIStrings.addOverrideRule)}
-      </devtools-button>
-      <div class="learn-more-row">
-        <devtools-link
-            href="https://goo.gle/devtools-override"
-            class="link"
-            jslogContext=${'learn-more'}>${i18nString(UIStrings.learnMore)}</devtools-link>
-      </div>
-    `, this.#shadow, {host: this});
-    // clang-format on
+    const output: ComponentViewOutput = {};
+    DEFAULT_VIEW(
+        {
+          headerOverrides: this.#headerOverrides,
+          parsingError: this.#parsingError,
+          fileName: this.#uiSourceCode?.name() || '.headers',
+          isDeletable: (blockIndex: number, headerIndex: number) => this.#isDeletable(blockIndex, headerIndex),
+        },
+        output,
+        this.#shadow,
+    );
 
     if (this.#focusElement) {
-      let focusElement: Element|null = null;
-      if (this.#focusElement.headerIndex) {
-        focusElement = this.#shadow.querySelector(`[data-block-index="${
-            this.#focusElement.blockIndex}"][data-header-index="${this.#focusElement.headerIndex}"] .header-name`);
-      } else {
-        focusElement = this.#shadow.querySelector(`[data-block-index="${this.#focusElement.blockIndex}"] .apply-to`);
-      }
-      if (focusElement) {
-        (focusElement as HTMLElement).focus();
-      }
+      output.focusElement?.(this.#focusElement.blockIndex, this.#focusElement.headerIndex);
       this.#focusElement = null;
     }
   }
+}
 
-  #renderApplyToRow(pattern: string, blockIndex: number): Lit.TemplateResult {
-    // clang-format off
-    return html`
-      <div class="row" data-block-index=${blockIndex}
-           jslog=${VisualLogging.treeItem(pattern === '*' ? pattern : undefined).track({resize: true})}>
-        <div>${i18n.i18n.lockedString('Apply to')}</div>
-        <div class="separator">:</div>
-        ${this.#renderEditable(pattern, 'apply-to')}
-        <devtools-button
-        title=${i18nString(UIStrings.removeBlock)}
-        .size=${Buttons.Button.Size.SMALL}
-        .iconName=${'bin'}
-        .iconWidth=${'14px'}
-        .iconHeight=${'14px'}
-        .variant=${Buttons.Button.Variant.ICON}
-        .jslogContext=${'headers-view.remove-apply-to-section'}
-        class="remove-block inline-button"
-      ></devtools-button>
-      </div>
-    `;
-    // clang-format on
-  }
+export interface ComponentViewInput {
+  headerOverrides: Persistence.NetworkPersistenceManager.HeaderOverride[];
+  parsingError: boolean;
+  fileName: string;
+  isDeletable: (blockIndex: number, headerIndex: number) => boolean;
+}
 
-  #renderHeaderRow(header: Protocol.Fetch.HeaderEntry, blockIndex: number, headerIndex: number): Lit.TemplateResult {
-    // clang-format off
-    return html`
-      <div class="row padded" data-block-index=${blockIndex} data-header-index=${headerIndex}
-           jslog=${VisualLogging.treeItem(header.name).parent('headers-editor-row-parent').track({resize: true})}>
-        ${this.#renderEditable(header.name, 'header-name red', true)}
-        <div class="separator">:</div>
-        ${this.#renderEditable(header.value, 'header-value')}
-        <devtools-button
-          title=${i18nString(UIStrings.addHeader)}
-          .size=${Buttons.Button.Size.SMALL}
-          .iconName=${'plus'}
-          .variant=${Buttons.Button.Variant.ICON}
-          .jslogContext=${'headers-view.add-header'}
-          class="add-header inline-button"
-        ></devtools-button>
-        <devtools-button
-          title=${i18nString(UIStrings.removeHeader)}
-          .size=${Buttons.Button.Size.SMALL}
-          .iconName=${'bin'}
-          .variant=${Buttons.Button.Variant.ICON}
-          ?hidden=${!this.#isDeletable(blockIndex, headerIndex)}
-          .jslogContext=${'headers-view.remove-header'}
-          class="remove-header inline-button"
-        ></devtools-button>
-      </div>
-    `;
-    // clang-format on
-  }
+export interface ComponentViewOutput {
+  focusElement?: (blockIndex: number, headerIndex?: number) => void;
+}
 
-  #renderEditable(value: string, className?: string, isKey?: boolean): Lit.TemplateResult {
+export const DEFAULT_VIEW = (
+    input: ComponentViewInput,
+    output: ComponentViewOutput,
+    target: HTMLElement|DocumentFragment,
+    ): void => {
+  const renderEditable = (value: string, className?: string, isKey?: boolean): Lit.TemplateResult => {
     // This uses Lit's `live`-directive, so that when checking whether to
     // update during re-render, `value` is compared against the actual live DOM
     // value of the contenteditable element and not the potentially outdated
@@ -466,8 +433,111 @@ export class HeadersViewComponent extends HTMLElement {
                               tabindex="0"
                               .innerText=${Lit.Directives.live(value)}></span>`;
     // clang-format on
-  }
-}
+  };
+
+  const renderApplyToRow = (pattern: string, blockIndex: number): Lit.TemplateResult => {
+    // clang-format off
+    return html`
+      <div class="row" data-block-index=${blockIndex}
+           jslog=${VisualLogging.treeItem(pattern === '*' ? pattern : undefined).track({resize: true})}>
+        <div>${i18n.i18n.lockedString('Apply to')}</div>
+        <div class="separator">:</div>
+        ${renderEditable(pattern, 'apply-to')}
+        <devtools-button
+          title=${i18nString(UIStrings.removeBlock)}
+          .size=${Buttons.Button.Size.SMALL}
+          .iconName=${'bin'}
+          .iconWidth=${'14px'}
+          .iconHeight=${'14px'}
+          .variant=${Buttons.Button.Variant.ICON}
+          .jslogContext=${'headers-view.remove-apply-to-section'}
+          class="remove-block inline-button"
+        ></devtools-button>
+      </div>
+    `;
+    // clang-format on
+  };
+
+  const renderHeaderRow =
+      (header: Protocol.Fetch.HeaderEntry, blockIndex: number, headerIndex: number): Lit.TemplateResult => {
+        // clang-format off
+        return html`
+          <div class="row padded" data-block-index=${blockIndex} data-header-index=${headerIndex}
+               jslog=${VisualLogging.treeItem(header.name).parent('headers-editor-row-parent').track({resize: true})}>
+            ${renderEditable(header.name, 'header-name red', true)}
+            <div class="separator">:</div>
+            ${renderEditable(header.value, 'header-value')}
+            <devtools-button
+              title=${i18nString(UIStrings.addHeader)}
+              .size=${Buttons.Button.Size.SMALL}
+              .iconName=${'plus'}
+              .variant=${Buttons.Button.Variant.ICON}
+              .jslogContext=${'headers-view.add-header'}
+              class="add-header inline-button"
+            ></devtools-button>
+            <devtools-button
+              title=${i18nString(UIStrings.removeHeader)}
+              .size=${Buttons.Button.Size.SMALL}
+              .iconName=${'bin'}
+              .variant=${Buttons.Button.Variant.ICON}
+              ?hidden=${!input.isDeletable(blockIndex, headerIndex)}
+              .jslogContext=${'headers-view.remove-header'}
+              class="remove-header inline-button"
+            ></devtools-button>
+          </div>
+        `;
+        // clang-format on
+      };
+
+  // clang-format off
+  Lit.render(
+      input.parsingError
+          ? html`
+              <style>${headersViewStyles}</style>
+              <div class="center-wrapper">
+                <div class="centered">
+                  <div class="error-header">${i18nString(UIStrings.errorWhenParsing, {PH1: input.fileName})}</div>
+                  <div class="error-body">${i18nString(UIStrings.parsingErrorExplainer, {PH1: input.fileName})}</div>
+                </div>
+              </div>
+            `
+          : html`
+              <style>${headersViewStyles}</style>
+              ${input.headerOverrides.map((headerOverride, blockIndex) =>
+                html`
+                  ${renderApplyToRow(headerOverride.applyTo, blockIndex)}
+                  ${headerOverride.headers.map((header, headerIndex) =>
+                    html`
+                      ${renderHeaderRow(header, blockIndex, headerIndex)}
+                    `,
+                  )}
+                `,
+              )}
+              <devtools-button
+                  .variant=${Buttons.Button.Variant.OUTLINED}
+                  .jslogContext=${'headers-view.add-override-rule'}
+                  class="add-block">
+                ${i18nString(UIStrings.addOverrideRule)}
+              </devtools-button>
+              <div class="learn-more-row">
+                <devtools-link
+                    href="https://goo.gle/devtools-override"
+                    class="link"
+                    jslogContext=${'learn-more'}>${i18nString(UIStrings.learnMore)}</devtools-link>
+              </div>
+            `,
+      target);
+  // clang-format on
+
+  output.focusElement = (blockIndex: number, headerIndex?: number) => {
+    const focusElement = headerIndex !== undefined ?
+        target.querySelector(`[data-block-index="${blockIndex}"][data-header-index="${headerIndex}"] .header-name`) :
+        target.querySelector(`[data-block-index="${blockIndex}"] .apply-to`);
+    if (focusElement) {
+      (focusElement as HTMLElement).focus();
+    }
+  };
+};
 
 VisualLogging.registerParentProvider('headers-editor-row-parent', (e: Element) => {
   while (e.previousElementSibling?.classList?.contains('padded')) {

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: d45ba94c77a2835c4097934e46ff30d9b7615fc0
+Revision: d4131488cec036cb5a8b1c69a9c252d54b540f29
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/third_party/puppeteer/README.chromium

@@ -1,10 +1,10 @@
 Name: Puppeteer Core
 Short Name: Puppeteer Core
 URL: https://github.com/puppeteer/puppeteer/tree/main/packages/puppeteer-core
-Version: 25.11.0
+Version: 25.12.0
 License: Apache-2.0
 License File: LICENSE
-Revision: 043cd46e594b39ea77343e221a59724183448059
+Revision: 15684eb7f1adf98c1c0c4a5d23a154b7995e947e
 Security Critical: no
 Shipped: yes
 Update Mechanism: Autoroll

package/front_end/third_party/puppeteer/package/lib/es5-iife/puppeteer-core-browser.d.ts

@@ -8392,6 +8392,11 @@ export declare const PredefinedNetworkConditions: Readonly<{
 export declare type Predicate<From, To extends From = From> =
   ((value: From) => value is To) | ((value: From) => Awaitable<boolean>);
 
+declare interface ProcessExitEmitter {
+  once(event: 'exit', listener: () => void): void;
+  off(event: 'exit', listener: () => void): void;
+}
+
 export {Protocol};
 
 /**