chrome-devtools-frontend 1.0.1543082 → 1.0.1544076

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

@@ -58,7 +58,7 @@ export const AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS = 200;
 const MAX_PREFIX_SUFFIX_LENGTH = 20_000;
 
 export class AiCodeCompletionProvider {
-  #aidaClient?: Host.AidaClient.AidaClient;
+  #aidaClient: Host.AidaClient.AidaClient = new Host.AidaClient.AidaClient();
   #aiCodeCompletion?: AiCodeCompletion.AiCodeCompletion.AiCodeCompletion;
   #aiCodeCompletionSetting = Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
   #aiCodeCompletionTeaserDismissedSetting =
@@ -71,7 +71,7 @@ export class AiCodeCompletionProvider {
 
   #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
 
-  constructor(aiCodeCompletionConfig: AiCodeCompletionConfig) {
+  private constructor(aiCodeCompletionConfig: AiCodeCompletionConfig) {
     const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
     if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionEnabled(devtoolsLocale.locale)) {
       throw new Error('AI code completion feature is not enabled.');
@@ -79,6 +79,10 @@ export class AiCodeCompletionProvider {
     this.#aiCodeCompletionConfig = aiCodeCompletionConfig;
   }
 
+  static createInstance(aiCodeCompletionConfig: AiCodeCompletionConfig): AiCodeCompletionProvider {
+    return new AiCodeCompletionProvider(aiCodeCompletionConfig);
+  }
+
   extension(): CodeMirror.Extension[] {
     return [
       CodeMirror.EditorView.updateListener.of(update => this.#triggerAiCodeCompletion(update)),
@@ -118,13 +122,12 @@ export class AiCodeCompletionProvider {
     this.#aiCodeCompletion?.clearCachedRequest();
   }
 
+  // TODO(b/445394511): Update setup and cleanup method so that config callbacks are not
+  // called twice.
   #setupAiCodeCompletion(): void {
     if (!this.#editor || !this.#aiCodeCompletionConfig) {
       return;
     }
-    if (!this.#aidaClient) {
-      this.#aidaClient = new Host.AidaClient.AidaClient();
-    }
     if (!this.#aiCodeCompletion) {
       this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
           {aidaClient: this.#aidaClient}, this.#aiCodeCompletionConfig.panel, undefined,

package/front_end/ui/i18n/i18n.ts

@@ -6,7 +6,9 @@
 
 import * as I18n from '../../core/i18n/i18n.js';
 import type * as ThirdPartyI18n from '../../third_party/i18n/i18n.js';
+import {Directives, html, type LitTemplate, nothing} from '../lit/lit.js';
 
+const {repeat} = Directives;
 /**
  * Returns a span element that may contains other DOM element as placeholders
  */
@@ -29,3 +31,17 @@ export function getFormatLocalizedString(
   }
   return element;
 }
+
+export function getFormatLocalizedStringTemplate(
+    registeredStrings: ThirdPartyI18n.LocalizedStringSet.RegisteredFileStrings, stringId: string,
+    placeholders: Record<string, Object>): LitTemplate {
+  const formatter = registeredStrings.getLocalizedStringSetFor(I18n.DevToolsLocale.DevToolsLocale.instance().locale)
+                        .getMessageFormatterFor(stringId);
+
+  return html`<span>${
+      repeat(
+          formatter.getAst(),
+          icuElement => icuElement.type === /* argumentElement */ 1 ? (placeholders[icuElement.value] ?? nothing) :
+              'value' in icuElement                                 ? String(icuElement.value) :
+                                                                      nothing)}</span>`;
+}

package/front_end/ui/legacy/ReportView.ts

@@ -13,11 +13,6 @@ import reportViewStyles from './reportView.css.js';
 import type {Toolbar} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {VBox} from './Widget.js';
-
-/**
- * @deprecated Please consider using the web component version of this widget
- *             (`ui/components/report_view/ReportView.ts`) for new code.
- */
 export class ReportView extends VBox {
   private readonly contentBox: HTMLElement;
   private headerElement: HTMLElement;

package/front_end/ui/legacy/TextPrompt.ts

@@ -57,50 +57,87 @@ import {cloneCustomElement, ElementFocusRestorer} from './UIUtils.js';
  *
  * @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 cancel 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.
+ * @attribute placeholder Sets a placeholder that's shown in place of the text contents when editing if the text is too
+ *            large.
  */
 export class TextPromptElement extends HTMLElement {
-  static readonly observedAttributes = ['editing', 'completions'];
+  static readonly observedAttributes = ['editing', 'completions', 'placeholder'];
   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;
+  #completionObserver = new MutationObserver(this.#onMutate.bind(this));
 
   constructor() {
     super();
     this.#textPrompt.initialize(this.#willAutoComplete.bind(this));
   }
 
+  #onMutate(changes: MutationRecord[]): void {
+    const listId = this.getAttribute('completions');
+    if (!listId) {
+      return;
+    }
+    const checkIfNodeIsInCompletionList = (node: Node): boolean => {
+      if (node instanceof HTMLDataListElement) {
+        return node.id === listId;
+      }
+      if (node instanceof HTMLOptionElement) {
+        return Boolean(node.parentElement && checkIfNodeIsInCompletionList(node.parentElement));
+      }
+      return false;
+    };
+    const affectsCompletionList = (change: MutationRecord): boolean =>
+        change.addedNodes.values().some(checkIfNodeIsInCompletionList) ||
+        change.removedNodes.values().some(checkIfNodeIsInCompletionList) ||
+        checkIfNodeIsInCompletionList(change.target);
+
+    if (changes.some(affectsCompletionList)) {
+      this.#updateCompletions();
+    }
+  }
+
   attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
-    if (oldValue === newValue || !this.isConnected) {
+    if (oldValue === newValue) {
       return;
     }
 
     switch (name) {
       case 'editing':
-        if (newValue !== null && newValue !== 'false' && oldValue === null) {
-          this.#startEditing();
-        } else {
-          this.#stopEditing();
+        if (this.isConnected) {
+          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);
+        if (this.getAttribute('completions')) {
+          this.#completionObserver.observe(this, {childList: true, subtree: true});
+          this.#updateCompletions();
+        } else {
+          this.#textPrompt.clearAutocomplete();
+          this.#completionObserver.disconnect();
         }
         break;
     }
   }
 
-  async #willAutoComplete(expression?: string, filter?: string, force?: boolean): Promise<Suggestion[]> {
-    if (!force) {
-      this.dispatchEvent(new TextPromptElement.BeforeAutoCompleteEvent({expression, filter}));
+  #updateCompletions(): void {
+    if (this.isConnected) {
+      void this.#textPrompt.complete(/* force=*/ true);
     }
+  }
+
+  async #willAutoComplete(expression: string, filter: string, force: boolean): Promise<Suggestion[]> {
+    this.dispatchEvent(new TextPromptElement.BeforeAutoCompleteEvent({expression, filter, force}));
 
     const listId = this.getAttribute('completions');
     if (!listId) {
@@ -112,16 +149,20 @@ export class TextPromptElement extends HTMLElement {
       return [];
     }
 
-    filter = filter?.toLowerCase();
     return datalist.values()
-        .filter(option => option.textContent.startsWith(filter ?? ''))
+        .filter(option => option.textContent.startsWith(filter.toLowerCase()))
         .map(option => ({text: option.textContent}))
         .toArray();
   }
 
   #startEditing(): void {
+    const truncatedTextPlaceholder = this.getAttribute('placeholder');
     const placeholder = this.#entrypoint.createChild('span');
-    placeholder.textContent = this.#slot.deepInnerText();
+    if (truncatedTextPlaceholder === null) {
+      placeholder.textContent = this.#slot.deepInnerText();
+    } else {
+      placeholder.setTextContentTruncatedIfNeeded(this.#slot.deepInnerText(), truncatedTextPlaceholder);
+    }
     this.#slot.remove();
 
     const proxy = this.#textPrompt.attachAndStartEditing(placeholder, e => this.#done(e, /* commit=*/ true));
@@ -189,8 +230,8 @@ export namespace TextPromptElement {
       super('cancel');
     }
   }
-  export class BeforeAutoCompleteEvent extends CustomEvent<{expression?: string, filter?: string}> {
-    constructor(detail: {expression?: string, filter?: string}) {
+  export class BeforeAutoCompleteEvent extends CustomEvent<{expression: string, filter: string, force: boolean}> {
+    constructor(detail: {expression: string, filter: string, force: boolean}) {
       super('beforeautocomplete', {detail});
     }
   }
@@ -215,7 +256,12 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   private completionRequestId: number;
   private ghostTextElement: HTMLSpanElement;
   private leftParenthesesIndices: number[];
-  private loadCompletions!: (this: null, arg1: string, arg2: string, arg3?: boolean|undefined) => Promise<Suggestion[]>;
+  private loadCompletions!: (
+      this: null,
+      arg1: string,
+      arg2: string,
+      arg3: boolean,
+      ) => Promise<Suggestion[]>;
   private completionStopCharacters!: string;
   private usesSuggestionBuilder!: boolean;
   #element?: Element;
@@ -251,7 +297,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   }
 
   initialize(
-      completions: (this: null, expression: string, filter: string, force?: boolean|undefined) => Promise<Suggestion[]>,
+      completions: (this: null, expression: string, filter: string, force: boolean) => Promise<Suggestion[]>,
       stopCharacters?: string, usesSuggestionBuilder?: boolean): void {
     this.loadCompletions = completions;
     this.completionStopCharacters = stopCharacters || ' =:[({;,!+-*/&|^<>.';

package/front_end/ui/legacy/UIUtils.ts

@@ -1923,7 +1923,7 @@ function updateWidgetfocusWidgetForNode(node: Node|null): void {
       break;
     }
 
-    parentWidget.defaultFocusedChild = widget;
+    parentWidget.setDefaultFocusedChild(widget);
     widget = parentWidget;
   }
 }

package/front_end/ui/legacy/Widget.ts

@@ -330,7 +330,6 @@ export interface WidgetOptions {
 export class Widget {
   readonly element: HTMLElement;
   contentElement: HTMLElement;
-  defaultFocusedChild: Widget|null = null;
   #shadowRoot: typeof Element.prototype.shadowRoot;
   #visible = false;
   #isRoot = false;
@@ -632,6 +631,10 @@ export class Widget {
         originalAppendChild.call(parentElement, this.element);
       }
     }
+    const focusedElementsCount = this.#parentWidget?.getDefaultFocusedElements?.()?.length ?? 0;
+    if (this.element.hasAttribute('autofocus') && focusedElementsCount > 1) {
+      this.element.removeAttribute('autofocus');
+    }
 
     if (!wasVisible && this.parentIsShowing()) {
       this.processWasShown();
@@ -707,9 +710,6 @@ export class Widget {
       const childIndex = this.#parentWidget.#children.indexOf(this);
       assert(childIndex >= 0, 'Attempt to remove non-child widget');
       this.#parentWidget.#children.splice(childIndex, 1);
-      if (this.#parentWidget.defaultFocusedChild === this) {
-        this.#parentWidget.defaultFocusedChild = null;
-      }
       this.#parentWidget.childWasDetached(this);
       this.#parentWidget = null;
     } else {
@@ -801,22 +801,48 @@ export class Widget {
 
   setDefaultFocusedChild(child: Widget): void {
     assert(child.#parentWidget === this, 'Attempt to set non-child widget as default focused.');
-    this.defaultFocusedChild = child;
+
+    const defaultFocusedElement = this.getDefaultFocusedElement();
+    if (defaultFocusedElement) {
+      defaultFocusedElement.removeAttribute('autofocus');
+    }
+    child.element.setAttribute('autofocus', '');
   }
 
-  getDefaultFocusedElement(): HTMLElement|null {
-    const autofocusElement = this.contentElement.hasAttribute('autofocus') ?
-        this.contentElement :
-        this.contentElement.querySelector<HTMLElement>('[autofocus]');
-    let widgetElement: Element|null = autofocusElement;
-    while (widgetElement) {
-      const widget = Widget.get(widgetElement);
-      if (widget) {
-        return widget === this ? autofocusElement : null;
+  getDefaultFocusedElements(): HTMLElement[] {
+    const autofocusElements = [...this.contentElement.querySelectorAll<HTMLElement>('[autofocus]')];
+    if (this.contentElement !== this.element) {
+      if (this.contentElement.hasAttribute('autofocus')) {
+        autofocusElements.push(this.contentElement);
+      }
+      if (autofocusElements.length === 0) {
+        autofocusElements.push(...this.element.querySelectorAll<HTMLElement>('[autofocus]'));
+      }
+    }
+    return autofocusElements.filter(autofocusElement => {
+      let widgetElement: Element|null = autofocusElement;
+      while (widgetElement) {
+        const widget = Widget.get(widgetElement);
+        if (widget) {
+          if (widgetElement === autofocusElement && widget.#parentWidget === this && widget.#visible) {
+            return true;
+          }
+          return widget === this;
+        }
+        widgetElement = widgetElement.parentElementOrShadowHost();
       }
-      widgetElement = widgetElement.parentElementOrShadowHost();
+      return false;
+    });
+  }
+
+  getDefaultFocusedElement(): HTMLElement|null {
+    const elements = this.getDefaultFocusedElements();
+    if (elements.length > 1) {
+      console.error(
+          'Multiple autofocus elements found', this.constructor.name,
+          ...elements.map(e => Platform.StringUtilities.trimMiddle(e.outerHTML, 250)));
     }
-    return null;
+    return elements[0] || null;
   }
 
   focus(): void {
@@ -825,20 +851,25 @@ export class Widget {
     }
     const autofocusElement = this.getDefaultFocusedElement();
     if (autofocusElement) {
-      autofocusElement.focus();
+      const widget = Widget.get(autofocusElement);
+      if (widget && widget !== this) {
+        widget.focus();
+      } else {
+        autofocusElement.focus();
+      }
       return;
     }
 
-    if (this.defaultFocusedChild && this.defaultFocusedChild.#visible) {
-      this.defaultFocusedChild.focus();
-    } else {
-      for (const child of this.#children) {
-        if (child.#visible) {
-          child.focus();
-          return;
-        }
+    for (const child of this.#children) {
+      if (child.#visible) {
+        child.focus();
+        return;
       }
     }
+
+    if (this.element === this.contentElement && this.element.hasAttribute('autofocus')) {
+      this.element.focus();
+    }
   }
 
   hasFocus(): boolean {

package/front_end/ui/legacy/XLink.ts

@@ -56,7 +56,6 @@ export class XLink extends XElement {
       if (this.#href) {
         openInNewTab(this.#href);
       }
-      this.dispatchEvent(new Event('x-link-invoke'));
     };
     this.onKeyDown = (event: KeyboardEvent) => {
       if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
@@ -65,7 +64,6 @@ export class XLink extends XElement {
           openInNewTab(this.#href);
         }
       }
-      this.dispatchEvent(new Event('x-link-invoke'));
     };
   }
 

package/front_end/ui/legacy/components/object_ui/JavaScriptREPL.ts

@@ -7,6 +7,7 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Formatter from '../../../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../../../models/source_map_scopes/source_map_scopes.js';
 import * as Acorn from '../../../../third_party/acorn/acorn.js';
+import {render} from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 
 import {RemoteObjectPreviewFormatter} from './RemoteObjectPreviewFormatter.js';
@@ -103,11 +104,14 @@ export class JavaScriptREPL {
     const formatter = new RemoteObjectPreviewFormatter();
     const {preview, type, subtype, className, description} = result.object;
     if (preview && type === 'object' && subtype !== 'node' && subtype !== 'trustedtype') {
-      formatter.appendObjectPreview(fragment, preview, false /* isEntry */);
+      /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
+      render(formatter.renderObjectPreview(preview), fragment);
     } else {
-      const nonObjectPreview = formatter.renderPropertyPreview(
-          type, subtype, className, Platform.StringUtilities.trimEndWithMaxLength(description || '', 400));
-      fragment.appendChild(nonObjectPreview);
+      /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
+      render(
+          formatter.renderPropertyPreview(
+              type, subtype, className, Platform.StringUtilities.trimEndWithMaxLength(description || '', 400)),
+          fragment);
     }
     return fragment;
   }

package/front_end/ui/legacy/components/object_ui/ObjectPopoverHelper.ts

@@ -8,6 +8,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Geometry from '../../../../models/geometry/geometry.js';
+import {render} from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 import * as Components from '../utils/utils.js';
 
@@ -65,7 +66,8 @@ export class ObjectPopoverHelper {
         const titleElement = popoverContentElement.createChild('div', 'object-popover-title');
         if (result.type === 'function') {
           titleElement.classList.add('source-code');
-          titleElement.appendChild(ObjectPropertiesSection.valueElementForFunctionDescription(result.description));
+          // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+          render(ObjectPropertiesSection.valueElementForFunctionDescription(result.description), titleElement);
         } else {
           titleElement.classList.add('monospace');
           titleElement.createChild('span').textContent = description;