chrome-devtools-frontend 1.0.1516909 → 1.0.1518653

package/front_end/third_party/codemirror.next/codemirror.next.d.ts

@@ -7728,13 +7728,6 @@ parser](https://github.com/lezer-parser/html), extended with the
 JavaScript and CSS parsers to parse the content of `<script>` and
 `<style>` tags.
 */
-declare const htmlPlain: LRLanguage;
-/**
-A language provider based on the [Lezer HTML
-parser](https://github.com/lezer-parser/html), extended with the
-JavaScript and CSS parsers to parse the content of `<script>` and
-`<style>` tags.
-*/
 declare const htmlLanguage: LRLanguage;
 /**
 Language support for HTML, including
@@ -7749,6 +7742,11 @@ declare function html(config?: {
     document).
     */
     matchClosingTags?: boolean;
+    /**
+    By default, the parser does not allow arbitrary self-closing tags.
+    Set this to `true` to turn on support for `/>` self-closing tag
+    syntax.
+    */
     selfClosingTags?: boolean;
     /**
     Determines whether [`autoCloseTags`](https://codemirror.net/6/docs/ref/#lang-html.autoCloseTags)
@@ -7786,9 +7784,8 @@ declare const index_d$1_html: typeof html;
 declare const index_d$1_htmlCompletionSource: typeof htmlCompletionSource;
 declare const index_d$1_htmlCompletionSourceWith: typeof htmlCompletionSourceWith;
 declare const index_d$1_htmlLanguage: typeof htmlLanguage;
-declare const index_d$1_htmlPlain: typeof htmlPlain;
 declare namespace index_d$1 {
-  export { type index_d$1_TagSpec as TagSpec, autoCloseTags$1 as autoCloseTags, index_d$1_html as html, index_d$1_htmlCompletionSource as htmlCompletionSource, index_d$1_htmlCompletionSourceWith as htmlCompletionSourceWith, index_d$1_htmlLanguage as htmlLanguage, index_d$1_htmlPlain as htmlPlain };
+  export { type index_d$1_TagSpec as TagSpec, autoCloseTags$1 as autoCloseTags, index_d$1_html as html, index_d$1_htmlCompletionSource as htmlCompletionSource, index_d$1_htmlCompletionSourceWith as htmlCompletionSourceWith, index_d$1_htmlLanguage as htmlLanguage };
 }
 
 type Severity = "hint" | "info" | "warning" | "error";

package/front_end/third_party/codemirror.next/package.json

@@ -9,7 +9,7 @@
     "@codemirror/lang-angular": "0.1.3",
     "@codemirror/lang-cpp": "6.0.2",
     "@codemirror/lang-css": "6.3.0",
-    "@codemirror/lang-html": "6.4.7",
+    "@codemirror/lang-html": "6.4.10",
     "@codemirror/lang-java": "6.0.1",
     "@codemirror/lang-javascript": "6.2.1",
     "@codemirror/lang-less": "6.0.2",
@@ -36,6 +36,7 @@
     "style-mod": "4.1.0"
   },
   "devDependencies": {
+    "rollup": "4.50.2",
     "rollup-plugin-dts": "6.1.1"
   }
 }

package/front_end/third_party/diff/README.chromium

@@ -6,6 +6,7 @@ Revision: 0ae308daa77aeddb089cd6b7b0a443fca026266e
 Update Mechanism: Manual
 License: Apache-2.0
 License File: LICENSE
+Update Mechanism: Static.HardFork (https://crbug.com/422918273)
 Security Critical: no
 Shipped: yes
 

package/front_end/ui/components/text_editor/config.ts

@@ -620,18 +620,16 @@ export const aiAutoCompleteSuggestion: CM.Extension = [
               this.decorations = CM.Decoration.none;
               return;
             }
-            // If the user typed the full selected completion, then we don't check for overlap.
-            // (e.g. the user wrote `flex`, traditional suggestion is `flex` and the AI autocompletion is
-            // `;\njustify-content: center`. Then, we want to show the AI completion)
-            const endsWithCompleteSelectedCompletion =
-                update.state.doc.sliceString(head - selectedCompletion.label.length, head) === selectedCompletion.label;
             // If a traditional autocomplete menu is shown, the AI suggestion is only
             // shown if it builds upon the currently selected item. If there is no
             // overlap, we hide the AI suggestion. For example, for the text `console`
             // if the traditional autocomplete suggests `log` and the AI
             // suggests `warn`, there is no overlap and the AI suggestion is hidden.
-            if (!endsWithCompleteSelectedCompletion &&
-                !TextUtils.TextUtils.getOverlap(selectedCompletion.label, ghostText)) {
+            const overlappingText = TextUtils.TextUtils.getOverlap(selectedCompletion.label, ghostText) ?? '';
+            const lineAtAiSuggestion = update.state.doc.lineAt(activeSuggestion.from).text;
+            const overlapsWithSelectedCompletion =
+                (lineAtAiSuggestion + overlappingText).endsWith(selectedCompletion.label);
+            if (!overlapsWithSelectedCompletion) {
               this.decorations = CM.Decoration.none;
               return;
             }
@@ -664,6 +662,7 @@ export const aiAutoCompleteSuggestion: CM.Extension = [
           const latency = performance.now() - activeSuggestion.startTime;
           // only register impression for the first time AI generated suggestion is shown to the user.
           activeSuggestion.onImpression(activeSuggestion.rpcGlobalId, activeSuggestion.sampleId, latency);
+          this.#lastLoggedSuggestion = activeSuggestion;
         }
       },
       {decorations: p => p.decorations}),

package/front_end/ui/components/tooltips/Tooltip.ts

@@ -21,6 +21,13 @@ interface PositioningParams {
   currentPopoverRect: DOMRect;
 }
 
+enum PositionOption {
+  BOTTOM_SPAN_RIGHT = 'bottom-span-right',
+  BOTTOM_SPAN_LEFT = 'bottom-span-left',
+  TOP_SPAN_RIGHT = 'top-span-right',
+  TOP_SPAN_LEFT = 'top-span-left',
+}
+
 const positioningUtils = {
   bottomSpanRight: ({anchorRect}: PositioningParams): ProposedRect => {
     return {
@@ -93,36 +100,50 @@ const positioningUtils = {
   }
 };
 
-const proposedRectForRichTooltip =
-    ({inspectorViewRect, anchorRect, currentPopoverRect}:
-         {inspectorViewRect: DOMRect, anchorRect: DOMRect, currentPopoverRect: DOMRect}): ProposedRect => {
-      // Tries the default positioning of bottom right, bottom left, top right and top left.
-      // If they don't work out, we default back to showing in bottom right and adjust its insets so that the popover is inside the inspector view bounds.
-      let proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
-      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
-        return proposedRect;
-      }
-
-      proposedRect = positioningUtils.bottomSpanLeft({anchorRect, currentPopoverRect});
-      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
-        return proposedRect;
-      }
-
-      proposedRect = positioningUtils.topSpanRight({anchorRect, currentPopoverRect});
-      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
-        return proposedRect;
-      }
-
-      proposedRect = positioningUtils.topSpanLeft({anchorRect, currentPopoverRect});
-      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
-        return proposedRect;
-      }
+const proposedRectForRichTooltip = ({inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions}: {
+  inspectorViewRect: DOMRect,
+  anchorRect: DOMRect,
+  currentPopoverRect: DOMRect,
+  preferredPositions: PositionOption[],
+}): ProposedRect => {
+  // The default positioning order is `BOTTOM_SPAN_RIGHT`, `BOTTOM_SPAN_LEFT`, `TOP_SPAN_RIGHT`
+  // and `TOP_SPAN_LEFT`. If `preferredPositions` are given, those are tried first, before
+  // continuing with the remaining options in default order. Duplicate entries are removed.
+  const uniqueOrder = [
+    ...new Set([
+      ...preferredPositions,
+      ...Object.values(PositionOption),
+    ]),
+  ];
+
+  // Tries the positioning options in the order given by `uniqueOrder`.
+  // If none of them work out, we default to showing the tooltip in the bottom right and adjust
+  // its insets so that the tooltip is inside the inspector view bounds.
+  for (const positionOption of uniqueOrder) {
+    let proposedRect;
+    switch (positionOption) {
+      case PositionOption.BOTTOM_SPAN_RIGHT:
+        proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
+        break;
+      case PositionOption.BOTTOM_SPAN_LEFT:
+        proposedRect = positioningUtils.bottomSpanLeft({anchorRect, currentPopoverRect});
+        break;
+      case PositionOption.TOP_SPAN_RIGHT:
+        proposedRect = positioningUtils.topSpanRight({anchorRect, currentPopoverRect});
+        break;
+      case PositionOption.TOP_SPAN_LEFT:
+        proposedRect = positioningUtils.topSpanLeft({anchorRect, currentPopoverRect});
+    }
+    if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
+      return proposedRect;
+    }
+  }
 
-      // If none of the options work above, we position to bottom right
-      // and adjust the insets so that it does not go out of bounds.
-      proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
-      return positioningUtils.insetAdjustedRect({anchorRect, currentPopoverRect, inspectorViewRect, proposedRect});
-    };
+  // If none of the options work above, we position to bottom right
+  // and adjust the insets so that it does not go out of bounds.
+  const proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
+  return positioningUtils.insetAdjustedRect({anchorRect, currentPopoverRect, inspectorViewRect, proposedRect});
+};
 
 const proposedRectForSimpleTooltip =
     ({inspectorViewRect, anchorRect, currentPopoverRect}:
@@ -162,7 +183,8 @@ export interface TooltipProperties {
  * @property variant - reflects the `"variant"` attribute.
  * @property padding - reflects the `"padding"` attribute.
  * @property useClick - reflects the `"click"` attribute.
- * @property verticalDistanceIncrease - reflexts the `"vertical-distance-increase"` attribute.
+ * @property verticalDistanceIncrease - reflects the `"vertical-distance-increase"` attribute.
+ * @property preferSpanLeft - reflects the `"prefer-span-left"` attribute.
  * @attribute id - Id of the tooltip. Used for searching an anchor element with aria-describedby.
  * @attribute hover-delay - Hover length in ms before the tooltip is shown and hidden.
  * @attribute variant - Variant of the tooltip, `"simple"` for strings only, inverted background,
@@ -170,6 +192,9 @@ export interface TooltipProperties {
  * @attribute padding - Which padding to use, defaults to `"small"`. Use `"large"` for richer content.
  * @attribute use-click - If present, the tooltip will be shown on click instead of on hover.
  * @attribute vertical-distance-increase - The tooltip is moved vertically this many pixels further away from its anchor.
+ * @attribute prefer-span-left - If present, the tooltip's preferred position is `"span-left"` (The right
+ *                 side of the tooltip and its anchor are aligned. The tooltip expands to the left from
+ *                 there.). Applies to rich tooltips only.
  * @attribute use-hotkey - If present, the tooltip will be shown on hover but not when receiving focus.
  *                    Requires a hotkey to open when fosed (Alt-down). When `"use-click"` is present
  *                    as well, use-click takes precedence.
@@ -254,6 +279,18 @@ export class Tooltip extends HTMLElement {
     this.setAttribute('vertical-distance-increase', increase.toString());
   }
 
+  get preferSpanLeft(): boolean {
+    return this.hasAttribute('prefer-span-left');
+  }
+
+  set preferSpanLeft(value: boolean) {
+    if (value) {
+      this.setAttribute('prefer-span-left', '');
+    } else {
+      this.removeAttribute('prefer-span-left');
+    }
+  }
+
   get anchor(): HTMLElement|null {
     return this.#anchor;
   }
@@ -391,8 +428,10 @@ export class Tooltip extends HTMLElement {
     this.#previousPopoverRect = currentPopoverRect;
 
     const inspectorViewRect = UI.InspectorView.InspectorView.instance().element.getBoundingClientRect();
+    const preferredPositions =
+        this.preferSpanLeft ? [PositionOption.BOTTOM_SPAN_LEFT, PositionOption.TOP_SPAN_LEFT] : [];
     const proposedPopoverRect = this.variant === 'rich' ?
-        proposedRectForRichTooltip({inspectorViewRect, anchorRect, currentPopoverRect}) :
+        proposedRectForRichTooltip({inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions}) :
         proposedRectForSimpleTooltip({inspectorViewRect, anchorRect, currentPopoverRect});
     this.style.left = `${proposedPopoverRect.left}px`;
 

package/front_end/ui/legacy/README.md

@@ -11,7 +11,7 @@ For a detailed explanation of the behavior of each property, please see the docu
 
 As an example, take the registration of the `Network conditions` pane, which is located in the drawer:
 
-```js
+```ts
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.DRAWER_VIEW,
   id: 'network.config',
@@ -24,11 +24,11 @@ UI.ViewManager.registerViewExtension({
     ls`network throttling`,
     ls`useragent`,
     ls`user agent`,
-    ls`user-agent`
+    ls`user-agent`,
   ],
-  async loadView(): UI.Widget.Widget  {
-    const  Network  = await loadNetworkModule();
-    return  Network.NetworkConfigView.NetworkConfigView.instance();
+  async loadView(): UI.Widget.Widget {
+    const Network = await loadNetworkModule();
+    return Network.NetworkConfigView.NetworkConfigView.instance();
   },
 });
 ```
@@ -43,38 +43,40 @@ For a detailed explanation of the behavior of each property, please see the docu
 
 As an example, take the registration of the  `network.toggle-recording` action, which allows to start or stop recording a network log:
 
-```js
+```ts
 UI.ActionRegistration.registerActionExtension({
-  actionId:  'network.toggle-recording',
+  actionId: 'network.toggle-recording',
   category: UI.ActionRegistration.ActionCategory.NETWORK,
   iconClass: UI.ActionRegistration.IconClass.LARGEICON_START_RECORDING,
-  toggleable:  true,
+  toggleable: true,
   toggledIconClass: UI.ActionRegistration.IconClass.LARGEICON_STOP_RECORDING,
-  toggleWithRedColor:  true,
+  toggleWithRedColor: true,
   contextTypes(): unknown[] {
-    return maybeRetrieveContextTypes(Network  =>  [Network.NetworkPanel.NetworkPanel]);
+    return maybeRetrieveContextTypes(Network => [
+      Network.NetworkPanel.NetworkPanel,
+    ]);
   },
-  async loadActionDelegate(): UI.ActionRegistration.ActionDelegate  {
-    const  Network  = await loadNetworkModule();
-    return  Network.NetworkPanel.ActionDelegate.instance();
+  async loadActionDelegate(): UI.ActionRegistration.ActionDelegate {
+    const Network = await loadNetworkModule();
+    return Network.NetworkPanel.ActionDelegate.instance();
   },
-  options:  [
+  options: [
     {
-      value:  true,
+      value: true,
       title: ls`Record network log`,
     },
     {
-      value:  false,
+      value: false,
       title: ls`Stop recording network log`,
     },
   ],
-  bindings:  [
+  bindings: [
     {
-      shortcut:  'Ctrl+E',
+      shortcut: 'Ctrl+E',
       platform: UI.ActionRegistration.Platforms.WindowsLinux,
     },
     {
-      shortcut:  'Meta+E',
+      shortcut: 'Meta+E',
       platform: UI.ActionRegistration.Platforms.Mac,
     },
   ],
@@ -105,10 +107,12 @@ A key binding will be used when the selected preset matches any of the keybind s
 If you don't specify additional constraints, the keybinding will be always available.
 It is possible that this results in duplicate keybindings, for example:
 
-```js
+```ts
 UI.ActionRegistration.registerActionExtension({
   contextTypes() {
-    return maybeRetrieveContextTypes(Elements => [Elements.ElementsPanel.ElementsPanel]);
+    return maybeRetrieveContextTypes(Elements => [
+      Elements.ElementsPanel.ElementsPanel,
+    ]);
   },
   bindings: [
     {
@@ -133,10 +137,12 @@ These two key bindings both allocate the same key for the `windows, linux` platf
 If key bindings were declared such that **at least one** of the three variables (`platform, contextTypes` and `keybindSets`) doesn't overlap, then no duplication would occur.
 For example, the following is **not** a form of duplication:
 
-```js
+```ts
 UI.ActionRegistration.registerActionExtension({
   contextTypes() {
-    return maybeRetrieveContextTypes(Elements => [Elements.ElementsPanel.ElementsPanel]);
+    return maybeRetrieveContextTypes(Elements => [
+      Elements.ElementsPanel.ElementsPanel,
+    ]);
   },
   bindings: [
     {
@@ -146,8 +152,10 @@ UI.ActionRegistration.registerActionExtension({
   ],
 });
 ```
+
 And
-```js
+
+```ts
 UI.ActionRegistration.registerActionExtension({
   contextTypes: undefined,
   bindings: [
@@ -159,4 +167,5 @@ UI.ActionRegistration.registerActionExtension({
   ],
 });
 ```
+
 In this case, they keybindings are declared for different keybind sets and thus do not result in duplcation.

package/front_end/ui/legacy/SearchableView.ts

@@ -414,21 +414,19 @@ export class SearchableView extends VBox {
   }
 
   updateSearchMatchesCount(matches: number): void {
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const untypedSearchProvider = (this.searchProvider as any);
-    if (untypedSearchProvider.currentSearchMatches === matches) {
+    if (this.searchProvider.currentSearchMatches === matches) {
       return;
     }
-    untypedSearchProvider.currentSearchMatches = matches;
-    this.updateSearchMatchesCountAndCurrentMatchIndex(untypedSearchProvider.currentQuery ? matches : 0, -1);
+    this.searchProvider.currentSearchMatches = matches;
+    this.updateSearchMatchesCountAndCurrentMatchIndex(this.searchProvider.currentQuery ? matches : 0, -1);
   }
 
   updateCurrentMatchIndex(currentMatchIndex: number): void {
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const untypedSearchProvider = (this.searchProvider as any);
-    this.updateSearchMatchesCountAndCurrentMatchIndex(untypedSearchProvider.currentSearchMatches, currentMatchIndex);
+    if (!this.searchProvider.currentSearchMatches) {
+      return;
+    }
+
+    this.updateSearchMatchesCountAndCurrentMatchIndex(this.searchProvider.currentSearchMatches, currentMatchIndex);
   }
 
   closeSearch(): void {
@@ -595,12 +593,9 @@ export class SearchableView extends VBox {
   }
 
   private clearSearch(): void {
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const untypedSearchProvider = (this.searchProvider as any);
-    delete this.currentQuery;
-    if (Boolean(untypedSearchProvider.currentQuery)) {
-      delete untypedSearchProvider.currentQuery;
+    this.currentQuery = undefined;
+    if (Boolean(this.searchProvider.currentQuery)) {
+      this.searchProvider.currentQuery = undefined;
       this.searchProvider.onSearchCanceled();
     }
     this.updateSearchMatchesCountAndCurrentMatchIndex(0, -1);
@@ -614,9 +609,7 @@ export class SearchableView extends VBox {
     }
 
     this.currentQuery = query;
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (this.searchProvider as any).currentQuery = query;
+    this.searchProvider.currentQuery = query;
 
     const searchConfig = this.currentSearchConfig();
     this.searchProvider.performSearch(searchConfig, shouldJump, jumpBackwards);
@@ -644,17 +637,17 @@ export class SearchableView extends VBox {
 
   private replace(): void {
     if (!this.replaceProvider) {
-      throw new Error('No \'replacable\' provided to SearchableView!');
+      throw new Error('No \'replaceable\' provided to SearchableView!');
     }
     const searchConfig = this.currentSearchConfig();
     this.replaceProvider.replaceSelectionWith(searchConfig, this.replaceInputElement.value);
-    delete this.currentQuery;
+    this.currentQuery = undefined;
     this.performSearch(true, true);
   }
 
   private replaceAll(): void {
     if (!this.replaceProvider) {
-      throw new Error('No \'replacable\' provided to SearchableView!');
+      throw new Error('No \'replaceable\' provided to SearchableView!');
     }
     const searchConfig = this.currentSearchConfig();
     this.replaceProvider.replaceAllWith(searchConfig, this.replaceInputElement.value);
@@ -666,9 +659,7 @@ export class SearchableView extends VBox {
       return;
     }
 
-    if (this.valueChangedTimeoutId) {
-      clearTimeout(this.valueChangedTimeoutId);
-    }
+    clearTimeout(this.valueChangedTimeoutId);
     const timeout = this.searchInputElement.value.length < 3 ? 200 : 0;
     this.valueChangedTimeoutId = window.setTimeout(this.onValueChanged.bind(this), timeout);
   }
@@ -677,7 +668,7 @@ export class SearchableView extends VBox {
     if (!this.searchIsVisible) {
       return;
     }
-    delete this.valueChangedTimeoutId;
+    this.valueChangedTimeoutId = undefined;
     this.performSearch(false, true);
   }
 }
@@ -685,6 +676,8 @@ export class SearchableView extends VBox {
 const searchableViewsByElement = new WeakMap<Element, SearchableView>();
 
 export interface Searchable {
+  currentQuery?: string;
+  currentSearchMatches?: number;
   onSearchCanceled(): void;
   // Called when the search toolbar is closed
   onSearchClosed?: () => void;

package/front_end/ui/legacy/TextPrompt.ts

@@ -41,7 +41,168 @@ import * as ARIAUtils from './ARIAUtils.js';
 import {SuggestBox, type SuggestBoxDelegate, type Suggestion} from './SuggestBox.js';
 import textPromptStyles from './textPrompt.css.js';
 import {Tooltip} from './Tooltip.js';
-import {ElementFocusRestorer} from './UIUtils.js';
+import {cloneCustomElement, ElementFocusRestorer} from './UIUtils.js';
+
+/**
+ * A custom element wrapper around TextPrompt that allows text-editing contents in-place.
+ *
+ * ## Usage ##
+ *
+ * ```
+ * <devtools-prompt>
+ *  <b>Structured</b> content
+ * </devtools-prompt>
+ *
+ * ```
+ *
+ * @property completionTimeout Sets the delay for showing the autocomplete suggestion box.
+ * @event commit Editing is done and the result was accepted.
+ * @event expand Editing was canceled.
+ * @event beforeautocomplete This is sent before the autocomplete suggestion box is triggered and before the <datalist>
+ *                           is read.
+ * @attribute editing Setting/removing this attribute starts/stops editing.
+ * @attribute completions Sets the `id` of the <datalist> containing the autocomplete options.
+ */
+export class TextPromptElement extends HTMLElement {
+  static readonly observedAttributes = ['editing', 'completions'];
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #entrypoint = this.#shadow.createChild('span');
+  readonly #slot = this.#entrypoint.createChild('slot');
+  readonly #textPrompt = new TextPrompt();
+  #completionTimeout: number|null = null;
+
+  constructor() {
+    super();
+    this.#textPrompt.initialize(this.#willAutoComplete.bind(this));
+  }
+
+  attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
+    if (oldValue === newValue || !this.isConnected) {
+      return;
+    }
+
+    switch (name) {
+      case 'editing':
+        if (newValue !== null && newValue !== 'false' && oldValue === null) {
+          this.#startEditing();
+        } else {
+          this.#stopEditing();
+        }
+        break;
+      case 'completions':
+        if (this.#textPrompt.isSuggestBoxVisible()) {
+          void this.#textPrompt.complete(/* force=*/ true);
+        }
+        break;
+    }
+  }
+
+  async #willAutoComplete(expression?: string, filter?: string, force?: boolean): Promise<Suggestion[]> {
+    if (!force) {
+      this.dispatchEvent(new TextPromptElement.BeforeAutoCompleteEvent({expression, filter}));
+    }
+
+    const listId = this.getAttribute('completions');
+    if (!listId) {
+      return [];
+    }
+
+    const datalist = this.getComponentRoot()?.querySelectorAll<HTMLOptionElement>(`datalist#${listId} > option`);
+    if (!datalist?.length) {
+      return [];
+    }
+
+    filter = filter?.toLowerCase();
+    return datalist.values()
+        .filter(option => option.textContent.startsWith(filter ?? ''))
+        .map(option => ({text: option.textContent}))
+        .toArray();
+  }
+
+  #startEditing(): void {
+    const placeholder = this.#entrypoint.createChild('span');
+    placeholder.textContent = this.#slot.deepInnerText();
+    this.#slot.remove();
+
+    const proxy = this.#textPrompt.attachAndStartEditing(placeholder, e => this.#done(e, /* commit=*/ true));
+    proxy.addEventListener('keydown', this.#editingValueKeyDown.bind(this));
+    placeholder.getComponentSelection()?.selectAllChildren(placeholder);
+  }
+
+  #stopEditing(): void {
+    this.#entrypoint.removeChildren();
+    this.#entrypoint.appendChild(this.#slot);
+    this.#textPrompt.detach();
+  }
+
+  connectedCallback(): void {
+    if (this.hasAttribute('editing')) {
+      this.attributeChangedCallback('editing', null, '');
+    }
+  }
+
+  #done(e: Event, commit: boolean): void {
+    const target = e.target as HTMLElement;
+    const text = target.textContent || '';
+    if (commit) {
+      this.dispatchEvent(new TextPromptElement.CommitEvent(text));
+    } else {
+      this.dispatchEvent(new TextPromptElement.CancelEvent());
+    }
+    e.consume();
+  }
+
+  #editingValueKeyDown(event: Event): void {
+    if (event.handled || !(event instanceof KeyboardEvent)) {
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      this.#done(event, /* commit=*/ true);
+    } else if (Platform.KeyboardUtilities.isEscKey(event)) {
+      this.#done(event, /* commit=*/ false);
+    }
+  }
+
+  set completionTimeout(timeout: number) {
+    this.#completionTimeout = timeout;
+    this.#textPrompt.setAutocompletionTimeout(timeout);
+  }
+
+  override cloneNode(): Node {
+    const clone = cloneCustomElement(this);
+    if (this.#completionTimeout !== null) {
+      clone.completionTimeout = this.#completionTimeout;
+    }
+    return clone;
+  }
+}
+
+export namespace TextPromptElement {
+  export class CommitEvent extends CustomEvent<string> {
+    constructor(detail: string) {
+      super('commit', {detail});
+    }
+  }
+  export class CancelEvent extends CustomEvent<string> {
+    constructor() {
+      super('cancel');
+    }
+  }
+  export class BeforeAutoCompleteEvent extends CustomEvent<{expression?: string, filter?: string}> {
+    constructor(detail: {expression?: string, filter?: string}) {
+      super('beforeautocomplete', {detail});
+    }
+  }
+}
+
+customElements.define('devtools-prompt', TextPromptElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-prompt': TextPromptElement;
+  }
+}
 
 export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements SuggestBoxDelegate {
   private proxyElement!: HTMLElement|undefined;
@@ -510,6 +671,10 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
 
   async complete(force?: boolean): Promise<void> {
     this.clearAutocompleteTimeout();
+    if (!this.element().isConnected) {
+      return;
+    }
+
     const selection = this.element().getComponentSelection();
     if (!selection || selection.rangeCount === 0) {
       return;