chrome-devtools-frontend 1.0.1628368 → 1.0.1629211

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -37,6 +37,7 @@ import {createIcon} from '../../ui/kit/kit.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {
@@ -473,7 +474,12 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp
     this.profileViewToolbar.removeToolbarItems();
 
     void (view as unknown as UI.View.View).toolbarItems().then(items => {
-      items.map(item => this.profileViewToolbar.appendToolbarItem(item));
+      if (Array.isArray(items)) {
+        items.map(item => this.profileViewToolbar.appendToolbarItem(item));
+      } else {
+        // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+        render(items, this.profileViewToolbar);
+      }
     });
 
     return view;

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -49,7 +49,7 @@ import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, render} from '../../ui/lit/lit.js';
+import {Directives, html, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {UISourceCodeFrame} from './UISourceCodeFrame.js';
@@ -179,8 +179,6 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements UI.Ac
                                                                            UI.Toolbar.ItemsProvider {
   #watchExpressions: WatchExpression[];
   #watchExpressionsSetting: Common.Settings.Setting<string[]>;
-  private readonly addButton: UI.Toolbar.ToolbarButton;
-  private readonly refreshButton: UI.Toolbar.ToolbarButton;
   private readonly linkifier: Components.Linkifier.Linkifier;
   #view: View;
   #expandControllers = new Map<string, ObjectUI.ObjectPropertiesSection.ObjectTreeExpansionTracker>();
@@ -192,17 +190,6 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements UI.Ac
     this.#watchExpressionsSetting =
         Common.Settings.Settings.instance().createLocalSetting<string[]>('watch-expressions', []);
 
-    this.addButton = new UI.Toolbar.ToolbarButton(
-        i18nString(UIStrings.addWatchExpression), 'plus', undefined, 'add-watch-expression');
-    this.addButton.setSize(Buttons.Button.Size.SMALL);
-    this.addButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, _event => {
-      void this.addButtonClicked();
-    });
-    this.refreshButton = new UI.Toolbar.ToolbarButton(
-        i18nString(UIStrings.refreshWatchExpressions), 'refresh', undefined, 'refresh-watch-expressions');
-    this.refreshButton.setSize(Buttons.Button.Size.SMALL);
-    this.refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#refreshExpressions, this);
-
     UI.Context.Context.instance().addFlavorChangeListener(
         SDK.RuntimeModel.ExecutionContext, this.#refreshExpressions, this);
     UI.Context.Context.instance().addFlavorChangeListener(
@@ -223,8 +210,27 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements UI.Ac
     return this.#watchExpressions;
   }
 
-  toolbarItems(): UI.Toolbar.ToolbarItem[] {
-    return [this.addButton, this.refreshButton];
+  toolbarItems(): TemplateResult {
+    // clang-format off
+    return html`
+      <devtools-button .data=${{
+          variant: Buttons.Button.Variant.TOOLBAR,
+          iconName: 'plus',
+          size: Buttons.Button.Size.SMALL,
+          title: i18nString(UIStrings.addWatchExpression),
+          jslogContext: 'add-watch-expression',
+        } as Buttons.Button.ButtonData}
+        @click=${(e: Event) => this.addButtonClicked(e)}></devtools-button>
+      <devtools-button .data=${{
+          variant: Buttons.Button.Variant.TOOLBAR,
+          iconName: 'refresh',
+          size: Buttons.Button.Size.SMALL,
+          title: i18nString(UIStrings.refreshWatchExpressions),
+          jslogContext: 'refresh-watch-expressions',
+        } as Buttons.Button.ButtonData}
+        @click=${(e: Event) => this.refreshButtonClicked(e)}></devtools-button>
+    `;
+    // clang-format on
   }
 
   private saveExpressions(): void {
@@ -239,7 +245,8 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements UI.Ac
     this.#watchExpressionsSetting.set(toSave);
   }
 
-  private async addButtonClicked(): Promise<void> {
+  private async addButtonClicked(event?: Event): Promise<void> {
+    event?.consume(true);
     await UI.ViewManager.ViewManager.instance().showView('sources.watch');
     const watchExpression = this.createWatchExpression(null);
     this.requestUpdate();
@@ -250,6 +257,11 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements UI.Ac
     watchExpression.startEditing();
   }
 
+  private refreshButtonClicked(event: Event): void {
+    event.consume(true);
+    this.#refreshExpressions();
+  }
+
   #refreshExpressions(): void {
     this.linkifier.reset();
     for (const expression of this.#watchExpressions) {
@@ -407,7 +419,6 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   get result(): SDK.RemoteObject.RemoteObject|null {
     return this.#result ?? null;
   }
-
   get updateComplete(): Promise<void> {
     return this.#updateComplete;
   }

package/front_end/panels/sources/sources-meta.ts

@@ -1076,6 +1076,13 @@ UI.ActionRegistration.registerActionExtension({
         UI.ActionRegistration.KeybindSet.VS_CODE,
       ],
     },
+    {
+      shortcut: 'Alt+g',
+      keybindSets: [
+        UI.ActionRegistration.KeybindSet.DEVTOOLS_DEFAULT,
+        UI.ActionRegistration.KeybindSet.VS_CODE,
+      ],
+    },
   ],
 });
 

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: 06942485b8753eb50f0a5324c6e1329f955634c8
+Revision: f24b2d64e5f1e00acb4dadb6becaa6aef859c307
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/legacy/TabbedPane.ts

@@ -110,6 +110,8 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private measuredDropDownButtonWidth?: number;
   #leftToolbar?: Toolbar;
   #rightToolbar?: Toolbar;
+  #trailingSlot!: HTMLSlotElement;
+  #lastDispatchedHiddenTabIds = '';
   allowTabReorder?: boolean;
   private automaticReorder?: boolean;
 
@@ -144,6 +146,25 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.tabSlider = document.createElement('div');
     this.tabSlider.classList.add('tabbed-pane-tab-slider');
     this.tabsElement = this.headerContentsElement.createChild('div', 'tabbed-pane-header-tabs');
+
+    // Declarative slot for a trailing affordance (e.g. a plus button).
+    // When something is assigned to this slot, the legacy overflow
+    // chevron is suppressed and the slotted element's width is reserved
+    // during overflow detection so it always stays visible. The slot
+    // itself has `display: contents` and so contributes no layout box
+    // when empty.
+    this.#trailingSlot = document.createElement('slot');
+    this.#trailingSlot.name = 'trailing-button';
+    this.#trailingSlot.classList.add('tabbed-pane-trailing-button');
+    this.headerContentsElement.appendChild(this.#trailingSlot);
+    this.#trailingSlot.addEventListener('slotchange', () => this.requestUpdate());
+
+    // Re-run overflow detection whenever the available space for tabs
+    // changes. The header is a flex container in which `headerContentsElement`
+    // is `flex: auto`, so any growth in the left/right toolbars (e.g. the
+    // issues counter loading asynchronously into the right toolbar) shrinks
+    // `headerContentsElement` and is captured by this single observer.
+    new ResizeObserver(() => this.requestUpdate()).observe(this.headerContentsElement);
     this.tabsElement.setAttribute('role', 'tablist');
     this.tabsElement.addEventListener('keydown', this.keyDown.bind(this), false);
     this.#contentElement = this.contentElement.createChild('div', 'tabbed-pane-content');
@@ -737,15 +758,6 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
   }
 
-  private showTabElement(index: number, tab: TabbedPaneTab): void {
-    if (index >= this.tabsElement.children.length) {
-      this.tabsElement.appendChild(tab.tabElement);
-    } else {
-      this.tabsElement.insertBefore(tab.tabElement, this.tabsElement.children[index]);
-    }
-    tab.shown = true;
-  }
-
   private hideTabElement(tab: TabbedPaneTab): void {
     this.tabsElement.removeChild(tab.tabElement);
     tab.shown = false;
@@ -831,8 +843,16 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   private updateTabsDropDown(): void {
-    const tabsToShowIndexes =
-        this.tabsToShowIndexes(this.#tabs, this.tabsHistory, this.totalWidth(), this.measuredDropDownButtonWidth || 0);
+    // Reserve width for the trailing affordance so it never gets clipped
+    // or pushed past the right edge. When a `trailing-button` slot is
+    // populated (e.g. with a plus button), reserve that element's width
+    // and never use the legacy chevron. Otherwise, fall back to the
+    // legacy chevron behavior: reserve its measured width only when at
+    // least one tab is overflowed.
+    const slottedTrailing = this.#trailingSlot.assignedElements()[0];
+    const reservedWidth =
+        slottedTrailing ? slottedTrailing.getBoundingClientRect().width : (this.measuredDropDownButtonWidth || 0);
+    const tabsToShowIndexes = this.tabsToShowIndexes(this.#tabs, this.tabsHistory, this.totalWidth(), reservedWidth);
     if (this.lastSelectedOverflowTab && this.numberOfTabsShown() !== tabsToShowIndexes.length) {
       delete this.lastSelectedOverflowTab;
       this.updateTabsDropDown();
@@ -844,24 +864,121 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
         this.hideTabElement(this.#tabs[i]);
       }
     }
+    // Synchronize the DOM order of the visible tab row to match
+    // `tabsToShowIndexes`. `insertBefore` moves a node if it is
+    // already in the DOM (preserving focus/selection) and inserts
+    // it otherwise, so a single pass handles both newly-visible
+    // tabs and reorderings of currently-visible tabs without any
+    // imperative DOM manipulation from callers like `moveTab`.
     for (let i = 0; i < tabsToShowIndexes.length; ++i) {
       const tab = this.#tabs[tabsToShowIndexes[i]];
-      if (!tab.shown) {
-        this.showTabElement(i, tab);
+      if (this.tabsElement.children[i] !== tab.tabElement) {
+        this.tabsElement.insertBefore(tab.tabElement, this.tabsElement.children[i] ?? null);
       }
+      tab.shown = true;
     }
 
     this.maybeShowDropDown(tabsToShowIndexes.length !== this.#tabs.length);
+    this.#dispatchOverflowTabsChangedIfNeeded();
   }
 
   private maybeShowDropDown(hasMoreTabs: boolean): void {
-    if (hasMoreTabs && !this.dropDownButton.parentElement) {
+    // The legacy chevron is suppressed when a trailing-button slot is
+    // populated; the slotted element takes its place.
+    const shouldShow = this.#trailingSlot.assignedElements().length === 0 && hasMoreTabs;
+    if (shouldShow && !this.dropDownButton.parentElement) {
       this.headerContentsElement.appendChild(this.dropDownButton);
-    } else if (!hasMoreTabs && this.dropDownButton.parentElement) {
+    } else if (!shouldShow && this.dropDownButton.parentElement) {
       this.headerContentsElement.removeChild(this.dropDownButton);
     }
   }
 
+  /**
+   * Dispatches an `overflow-tabs-changed` DOM event whenever the set of
+   * hidden (overflowed) tabs changes. The event bubbles and is composed
+   * so consumers slotted into `trailing-button` can listen via the
+   * standard `addEventListener` / lit-html `@overflow-tabs-changed=`
+   * syntax. Payload (`event.detail.hiddenTabs`) lists hidden tabs in
+   * tab order.
+   *
+   * `updateTabsDropDown()` runs on every layout/resize tick (including
+   * ResizeObserver callbacks on the toolbars), but in the steady state
+   * the overflow set rarely changes. Dedup against the last dispatched
+   * tab-id list so consumers (e.g. a plus button rendering the hidden
+   * tabs in its menu) are not re-notified on every paint.
+   */
+  #dispatchOverflowTabsChangedIfNeeded(): void {
+    const hidden = this.hiddenTabs();
+    const key = hidden.map(t => t.id).join('\u0000');
+    if (key === this.#lastDispatchedHiddenTabIds) {
+      return;
+    }
+    this.#lastDispatchedHiddenTabIds = key;
+    this.dispatchDOMEvent(new CustomEvent('overflow-tabs-changed', {
+      bubbles: true,
+      composed: true,
+      detail: {hiddenTabs: hidden},
+    }));
+  }
+
+  /**
+   * Returns the tabs that are currently hidden because of overflow, in
+   * tab order. Mirrors the payload of the `overflow-tabs-changed` event.
+   */
+  hiddenTabs(): Array<{id: string, title: string, jslogContext?: string}> {
+    return this.#tabs.filter(tab => !tab.shown).map(tab => ({
+                                                      id: tab.id,
+                                                      title: tab.title,
+                                                      jslogContext: tab.jslogContext,
+                                                    }));
+  }
+
+  /**
+   * Returns the index in tab order of the first overflowed (hidden) tab,
+   * or -1 if every tab fits.
+   */
+  firstHiddenTabIndex(): number {
+    return this.#tabs.findIndex(tab => !tab.shown);
+  }
+
+  /**
+   * Reorders `tabId` to position `newIndex` in the tab list. Unlike
+   * {@link insertBefore}, this does not require the tab to currently be in
+   * the DOM (overflowed tabs are detached). The change is persisted via the
+   * {@link Events.TabOrderChanged} event so the new order survives across
+   * DevTools reloads.
+   */
+  moveTab(tabId: string, newIndex: number): void {
+    const tab = this.tabsById.get(tabId);
+    if (!tab) {
+      return;
+    }
+    const oldIndex = this.#tabs.indexOf(tab);
+    if (oldIndex === -1) {
+      return;
+    }
+    // `newIndex` is the desired final index of the tab. The maximum
+    // valid final index for an existing item is `length - 1`; clamp
+    // here so the no-op early return below catches calls like
+    // `moveTab(lastTabId, 999)` instead of doing redundant work and
+    // firing a spurious TabOrderChanged event.
+    const targetIndex = Math.max(0, Math.min(newIndex, this.#tabs.length - 1));
+    if (oldIndex === targetIndex) {
+      return;
+    }
+    this.#tabs.splice(oldIndex, 1);
+    // After the splice-remove the array is one shorter, so inserting at
+    // `targetIndex` lands the tab at exactly the requested final index
+    // regardless of move direction.
+    this.#tabs.splice(targetIndex, 0, tab);
+    // The visible row's DOM order is reconciled declaratively in
+    // `updateTabsDropDown()` (scheduled by `requestUpdate()` below),
+    // so no imperative DOM reordering is needed here.
+    const eventData: EventData = {tabId: tab.id, view: tab.view};
+    this.dispatchEventToListeners(Events.TabOrderChanged, eventData);
+    this.requestUpdate();
+  }
+
   private measureDropDownButton(): void {
     if (this.measuredDropDownButtonWidth) {
       return;
@@ -964,11 +1081,20 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     if (this.lastSelectedOverflowTab !== undefined) {
       tabsToLookAt.unshift(tabsToLookAt.splice(tabsToLookAt.indexOf(this.lastSelectedOverflowTab), 1)[0]);
     }
+    // The trailing affordance only steals space when it is shown. The
+    // legacy chevron is conditional on actual overflow (so it can be
+    // skipped on the very last tab if everything fits), but a slotted
+    // trailing button (e.g. a plus button) is always rendered and must
+    // therefore always be reserved for — even when the last tab would
+    // otherwise just barely fit by itself — otherwise it gets pushed
+    // past the right edge and clipped by the surrounding
+    // `overflow: hidden` containers.
+    const reserveOnLastTab = this.#trailingSlot.assignedElements().length > 0;
     for (let i = 0; i < tabCount; ++i) {
       const tab = this.automaticReorder ? tabsHistory[i] : tabsToLookAt[i];
       totalTabsWidth += tab.width();
       let minimalRequiredWidth = totalTabsWidth;
-      if (i !== tabCount - 1) {
+      if (i !== tabCount - 1 || reserveOnLastTab) {
         minimalRequiredWidth += measuredDropDownButtonWidth;
       }
       if (!this.verticalTabLayout && minimalRequiredWidth > totalWidth) {

package/front_end/ui/legacy/TextPrompt.docs.ts

@@ -0,0 +1,51 @@
+// 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.
+
+import './legacy.js';
+
+import type * as Platform from '../../core/platform/platform.js';
+import * as Lit from '../lit/lit.js';
+
+import type * as UI from './legacy.js';
+
+const {html} = Lit;
+
+export function render(container: HTMLElement): void {
+  const validator = (text: string): null|Platform.UIString.LocalizedString => {
+    return text === 'invalid' ? 'This value is invalid' as Platform.UIString.LocalizedString : null;
+  };
+
+  Lit.render(
+      html`
+    <style>
+      .example {
+        margin: 20px;
+        padding: 20px;
+        border: 1px solid var(--sys-color-divider);
+      }
+      .label {
+        margin-bottom: 8px;
+        font-weight: bold;
+      }
+    </style>
+    <div class="example">
+      <div class="label">TextPrompt with validation (type 'invalid' and press Enter):</div>
+      <devtools-prompt
+        editing
+        .validator=${validator}
+        @commit=${(e: UI.TextPrompt.TextPromptElement.CommitEvent) => console.log('Committed:', e.detail)}
+      ></devtools-prompt>
+    </div>
+
+    <div class="example">
+      <div class="label">TextPrompt with cancel-on-blur:</div>
+      <devtools-prompt
+        editing
+        cancel-on-blur
+        @cancel=${() => console.log('Cancelled')}
+      >Initial content</devtools-prompt>
+    </div>
+  `,
+      container);
+}

package/front_end/ui/legacy/TextPrompt.ts

@@ -67,19 +67,39 @@ import {cloneCustomElement, ElementFocusRestorer} from './UIUtils.js';
  *            large.
  */
 export class TextPromptElement extends HTMLElement {
-  static readonly observedAttributes = ['editing', 'completions', 'placeholder'];
+  static readonly observedAttributes = ['editing', 'completions', 'placeholder', 'cancel-on-blur'];
+  static formAssociated = true;
   readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #internals = this.attachInternals();
   readonly #entrypoint = this.#shadow.createChild('span');
   readonly #slot = this.#entrypoint.createChild('slot');
   readonly #textPrompt = new TextPrompt();
   #completionTimeout: number|null = null;
   #completionObserver = new MutationObserver(this.#onMutate.bind(this));
+  #validator?: (value: string) => null | Platform.UIString.LocalizedString;
+  #cancelOnBlur = false;
 
   constructor() {
     super();
     this.#textPrompt.initialize(this.#willAutoComplete.bind(this));
   }
 
+  set validator(v: (value: string) => (null | Platform.UIString.LocalizedString)) {
+    this.#validator = v;
+  }
+
+  get validator(): undefined|((value: string) => (null | Platform.UIString.LocalizedString)) {
+    return this.#validator;
+  }
+
+  set cancelOnBlur(cancelOnBlur: boolean) {
+    this.setAttribute('cancel-on-blur', `${cancelOnBlur}`);
+  }
+
+  get cancelOnBlur(): boolean {
+    return this.#cancelOnBlur;
+  }
+
   #onMutate(changes: MutationRecord[]): void {
     const listId = this.getAttribute('completions');
     if (!listId) {
@@ -103,17 +123,27 @@ export class TextPromptElement extends HTMLElement {
       this.#updateCompletions();
     }
   }
-
   attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
     if (oldValue === newValue) {
       return;
     }
 
+    const isTruthy = (value: string|null): boolean => value !== null && value !== 'false';
+
     switch (name) {
+      case 'cancel-on-blur':
+        if (isTruthy(newValue)) {
+          this.#cancelOnBlur = true;
+        } else {
+          this.#cancelOnBlur = false;
+        }
+        break;
       case 'editing':
         if (this.isConnected) {
-          if (newValue !== null && newValue !== 'false' && oldValue === null) {
-            this.#startEditing();
+          if (isTruthy(newValue)) {
+            if (!isTruthy(oldValue)) {
+              this.#startEditing();
+            }
           } else {
             this.#stopEditing();
           }
@@ -166,9 +196,11 @@ export class TextPromptElement extends HTMLElement {
     }
     this.#slot.remove();
 
-    const proxy = this.#textPrompt.attachAndStartEditing(placeholder, e => this.#done(e, /* commit=*/ true));
+    const proxy =
+        this.#textPrompt.attachAndStartEditing(placeholder, e => this.#done(e, /* commit=*/ !this.#cancelOnBlur));
     proxy.addEventListener('keydown', this.#editingValueKeyDown.bind(this));
     placeholder.getComponentSelection()?.selectAllChildren(placeholder);
+    this.#textPrompt.focus();
   }
 
   #stopEditing(): void {
@@ -183,10 +215,26 @@ export class TextPromptElement extends HTMLElement {
     }
   }
 
+  disconnectedCallback(): void {
+    if (this.hasAttribute('editing')) {
+      this.#stopEditing();
+    }
+  }
+
   #done(e: Event, commit: boolean): void {
     const target = e.target as HTMLElement;
     const text = target.textContent || '';
+    this.#internals.setValidity({});
     if (commit) {
+      const validationMessage = this.#validator?.(text) ?? '';
+      if (validationMessage) {
+        this.#internals.setValidity({customError: true}, validationMessage, this.#entrypoint);
+      }
+
+      if (!this.#internals.reportValidity()) {
+        return;
+      }
+
       this.dispatchEvent(new TextPromptElement.CommitEvent(text));
     } else {
       this.dispatchEvent(new TextPromptElement.CancelEvent());
@@ -198,6 +246,7 @@ export class TextPromptElement extends HTMLElement {
     if (event.handled || !(event instanceof KeyboardEvent)) {
       return;
     }
+    this.#internals.setValidity({});
 
     if (event.key === 'Enter') {
       this.#done(event, /* commit=*/ true);
@@ -226,7 +275,7 @@ export namespace TextPromptElement {
       super('commit', {detail});
     }
   }
-  export class CancelEvent extends CustomEvent<string> {
+  export class CancelEvent extends CustomEvent<void> {
     constructor() {
       super('cancel');
     }

package/front_end/ui/legacy/Toolbar.ts

@@ -11,6 +11,7 @@ import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {createIcon} from '../kit/kit.js';
+import type {TemplateResult} from '../lit/lit.js';
 
 import {type Action, Events as ActionEvents} from './ActionRegistration.js';
 import {ActionRegistry} from './ActionRegistry.js';
@@ -1204,7 +1205,7 @@ export interface Provider {
 }
 
 export interface ItemsProvider {
-  toolbarItems(): ToolbarItem[];
+  toolbarItems(): ToolbarItem[]|TemplateResult;
 }
 
 export class ToolbarComboBox extends ToolbarItem<void, HTMLSelectElement> {

package/front_end/ui/legacy/View.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Platform from '../../core/platform/platform.js';
+import type {TemplateResult} from '../lit/lit.js';
 
 import type {TabbedPane} from './TabbedPane.js';
 import type {ToolbarItem, ToolbarMenuButton} from './Toolbar.js';
@@ -22,7 +23,7 @@ export interface View {
 
   isTransient(): boolean;
 
-  toolbarItems(): Promise<ToolbarItem[]>;
+  toolbarItems(): Promise<ToolbarItem[]|TemplateResult>;
 
   widget(): Promise<AnyWidget>;
 

package/front_end/ui/legacy/ViewManager.ts

@@ -12,6 +12,7 @@ import * as Platform from '../../core/platform/platform.js';
 import type * as Root from '../../core/root/root.js';
 import type * as Foundation from '../../foundation/foundation.js';
 import {createIcon, type Icon} from '../kit/kit.js';
+import {render, type TemplateResult} from '../lit/lit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
@@ -119,7 +120,7 @@ export class PreRegisteredView implements View {
     return this.viewRegistration.persistence;
   }
 
-  async toolbarItems(): Promise<ToolbarItem[]> {
+  async toolbarItems(): Promise<ToolbarItem[]|TemplateResult> {
     if (!this.viewRegistration.hasToolbar) {
       return [];
     }
@@ -244,13 +245,18 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     viewManagerInstance = undefined;
   }
 
-  static createToolbar(toolbarItems: ToolbarItem[]): Element|null {
-    if (!toolbarItems.length) {
+  static createToolbar(toolbarItems: ToolbarItem[]|TemplateResult): Element|null {
+    if (Array.isArray(toolbarItems) && !toolbarItems.length) {
       return null;
     }
     const toolbar = document.createElement('devtools-toolbar');
-    for (const item of toolbarItems) {
-      toolbar.appendToolbarItem(item);
+    if (Array.isArray(toolbarItems)) {
+      for (const item of toolbarItems) {
+        toolbar.appendToolbarItem(item);
+      }
+    } else {
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(toolbarItems, toolbar);
     }
     return toolbar;
   }

package/front_end/ui/legacy/textPrompt.css

@@ -37,6 +37,10 @@
   color: var(--sys-color-token-subtle) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+:host(:invalid) .text-prompt {
+  outline: var(--sys-color-error) auto var(--sys-size-1);
+}
+
 .text-prompt[data-placeholder] {
   &:empty::before {
     content: attr(data-placeholder);

package/mcp/mcp.ts

@@ -23,6 +23,7 @@ export type * as CDPConnection from '../front_end/core/protocol_client/CDPConnec
 export {ConnectionTransport} from '../front_end/core/protocol_client/ConnectionTransport.js';
 export * as ProtocolClient from '../front_end/core/protocol_client/protocol_client.js';
 export {DebuggerModel} from '../front_end/core/sdk/DebuggerModel.js';
+export * as NetworkManager from '../front_end/core/sdk/NetworkManager.js';
 export {RuntimeModel} from '../front_end/core/sdk/RuntimeModel.js';
 export {Target} from '../front_end/core/sdk/Target.js';
 export {TargetManager} from '../front_end/core/sdk/TargetManager.js';

package/package.json

@@ -105,5 +105,5 @@
     "ip-address": "10.1.0",
     "basic-ftp": "5.2.2"
   },
-  "version": "1.0.1628368"
+  "version": "1.0.1629211"
 }