chrome-devtools-frontend 1.0.1550444 → 1.0.1553956

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

@@ -0,0 +1,182 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../../core/common/common.js';
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as AiCodeGeneration from '../../../models/ai_code_generation/ai_code_generation.js';
+import * as PanelCommon from '../../../panels/common/common.js';
+import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as VisualLogging from '../../visual_logging/visual_logging.js';
+
+import {AiCodeCompletionTeaserPlaceholder} from './AiCodeCompletionTeaserPlaceholder.js';
+import type {TextEditor} from './TextEditor.js';
+
+export enum AiCodeGenerationTeaserMode {
+  ACTIVE = 'active',
+  DISMISSED = 'dismissed',
+}
+
+export const setAiCodeGenerationTeaserMode = CodeMirror.StateEffect.define<AiCodeGenerationTeaserMode>();
+
+const aiCodeGenerationTeaserModeState = CodeMirror.StateField.define<AiCodeGenerationTeaserMode>({
+  create: () => AiCodeGenerationTeaserMode.ACTIVE,
+  update(value, tr) {
+    return tr.effects.find(effect => effect.is(setAiCodeGenerationTeaserMode))?.value ?? value;
+  },
+});
+
+export class AiCodeGenerationProvider {
+  #devtoolsLocale: string;
+  #aiCodeCompletionSetting = Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
+  #generationTeaserCompartment = new CodeMirror.Compartment();
+  #generationTeaser: PanelCommon.AiCodeGenerationTeaser;
+  #editor?: TextEditor;
+
+  #boundOnUpdateAiCodeGenerationState = this.#updateAiCodeGenerationState.bind(this);
+
+  private constructor() {
+    this.#devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance().locale;
+    if (!AiCodeGeneration.AiCodeGeneration.AiCodeGeneration.isAiCodeGenerationEnabled(this.#devtoolsLocale)) {
+      throw new Error('AI code generation feature is not enabled.');
+    }
+    this.#generationTeaser = new PanelCommon.AiCodeGenerationTeaser();
+  }
+
+  static createInstance(): AiCodeGenerationProvider {
+    return new AiCodeGenerationProvider();
+  }
+
+  extension(): CodeMirror.Extension[] {
+    return [
+      CodeMirror.EditorView.updateListener.of(update => this.activateTeaser(update)),
+      aiCodeGenerationTeaserModeState,
+      this.#generationTeaserCompartment.of([]),
+      CodeMirror.Prec.highest(CodeMirror.keymap.of(this.#editorKeymap())),
+    ];
+  }
+
+  dispose(): void {
+    this.#cleanupAiCodeGeneration();
+  }
+
+  editorInitialized(editor: TextEditor): void {
+    this.#editor = editor;
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnUpdateAiCodeGenerationState);
+    this.#aiCodeCompletionSetting.addChangeListener(this.#boundOnUpdateAiCodeGenerationState);
+    void this.#updateAiCodeGenerationState();
+  }
+
+  #setupAiCodeGeneration(): void {
+    this.#editor?.dispatch({
+      effects:
+          [this.#generationTeaserCompartment.reconfigure([aiCodeGenerationTeaserExtension(this.#generationTeaser)])],
+    });
+  }
+
+  #cleanupAiCodeGeneration(): void {
+    this.#editor?.dispatch({
+      effects: [this.#generationTeaserCompartment.reconfigure([])],
+    });
+  }
+
+  async #updateAiCodeGenerationState(): Promise<void> {
+    const aidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    const isAvailable = aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE;
+    const isEnabled = this.#aiCodeCompletionSetting.get();
+    if (isAvailable && isEnabled) {
+      this.#setupAiCodeGeneration();
+    } else {
+      this.#cleanupAiCodeGeneration();
+    }
+  }
+
+  #editorKeymap(): readonly CodeMirror.KeyBinding[] {
+    return [
+      {
+        key: 'Escape',
+        run: (): boolean => {
+          if (!this.#editor || !this.#generationTeaser.isShowing() || !this.#generationTeaser.loading) {
+            return false;
+          }
+          this.#editor.dispatch({effects: setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.DISMISSED)});
+          return true;
+        },
+      },
+      {
+        any: (_view: unknown, event: KeyboardEvent) => {
+          if (!this.#editor || !this.#generationTeaser.isShowing()) {
+            return false;
+          }
+          if (UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event)) {
+            if (event.key === 'i') {
+              event.consume(true);
+              void VisualLogging.logKeyDown(event.currentTarget, event, 'ai-code-generation.triggered');
+              this.#generationTeaser.loading = true;
+              return true;
+            }
+          }
+          return false;
+        }
+      }
+    ];
+  }
+
+  async activateTeaser(update: CodeMirror.ViewUpdate): Promise<void> {
+    const currentTeaserMode = update.state.field(aiCodeGenerationTeaserModeState);
+    if (currentTeaserMode === AiCodeGenerationTeaserMode.ACTIVE) {
+      return;
+    }
+    if (!update.docChanged && update.state.selection.main.head === update.startState.selection.main.head) {
+      return;
+    }
+    update.view.dispatch({effects: setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.ACTIVE)});
+  }
+}
+
+// TODO(b/445899453): Handle teaser's discovery mode
+function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTeaser): CodeMirror.Extension {
+  return CodeMirror.ViewPlugin.fromClass(class {
+    #teaserMode: AiCodeGenerationTeaserMode;
+
+    constructor(readonly view: CodeMirror.EditorView) {
+      this.#teaserMode = view.state.field(aiCodeGenerationTeaserModeState);
+    }
+
+    update(update: CodeMirror.ViewUpdate): void {
+      const currentTeaserMode = update.state.field(aiCodeGenerationTeaserModeState);
+      if (currentTeaserMode !== this.#teaserMode) {
+        this.#teaserMode = currentTeaserMode;
+      }
+      if (!update.docChanged && update.state.selection.main.head === update.startState.selection.main.head) {
+        return;
+      }
+      if (teaser.loading) {
+        teaser.loading = false;
+      }
+    }
+
+    get decorations(): CodeMirror.DecorationSet {
+      if (this.#teaserMode === AiCodeGenerationTeaserMode.DISMISSED) {
+        return CodeMirror.Decoration.none;
+      }
+      const cursorPosition = this.view.state.selection.main.head;
+      const line = this.view.state.doc.lineAt(cursorPosition);
+      // TODO(b/445899453): Detect all types of comments
+      const isComment = line.text.startsWith('//');
+      const isCursorAtEndOfLine = cursorPosition >= line.to;
+      if (!isComment || !isCursorAtEndOfLine) {
+        return CodeMirror.Decoration.none;
+      }
+      return CodeMirror.Decoration.set([
+        CodeMirror.Decoration.widget({widget: new AiCodeCompletionTeaserPlaceholder(teaser), side: 1})
+            .range(cursorPosition),
+      ]);
+    }
+  }, {
+    decorations: v => v.decorations,
+  });
+}

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

@@ -4,6 +4,7 @@
 
 export * as AiCodeCompletionProvider from './AiCodeCompletionProvider.js';
 export * as AiCodeCompletionTeaserPlaceholder from './AiCodeCompletionTeaserPlaceholder.js';
+export * as AiCodeGenerationProvider from './AiCodeGenerationProvider.js';
 export * as AutocompleteHistory from './AutocompleteHistory.js';
 export * as Config from './config.js';
 export * as ExecutionPositionHighlighter from './ExecutionPositionHighlighter.js';

package/front_end/ui/helpers/OpenInNewTab.ts

@@ -58,7 +58,11 @@ import * as SDK from '../../core/sdk/sdk.js';
  * @see https://en.wikipedia.org/wiki/UTM_parameters
  */
 export function openInNewTab(url: URL|string): void {
-  url = new URL(`${url}`);
+  url = new URL(url);
+  if (Common.ParsedURL.schemeIs(url, 'javascript:')) {
+    return;
+  }
+
   // Navigating to a chrome:// link via a normal anchor doesn't work, so we "navigate"
   // there using CDP.
   if (Common.ParsedURL.schemeIs(url, 'chrome:')) {

package/front_end/ui/i18n/i18n.ts

@@ -14,7 +14,7 @@ const {repeat} = Directives;
  */
 export function getFormatLocalizedString(
     registeredStrings: ThirdPartyI18n.LocalizedStringSet.RegisteredFileStrings, stringId: string,
-    placeholders: Record<string, Object>): HTMLSpanElement {
+    placeholders: Record<string, Node|string>): HTMLSpanElement {
   const formatter = registeredStrings.getLocalizedStringSetFor(I18n.DevToolsLocale.DevToolsLocale.instance().locale)
                         .getMessageFormatterFor(stringId);
 
@@ -23,7 +23,7 @@ export function getFormatLocalizedString(
     if (icuElement.type === /* argumentElement */ 1) {
       const placeholderValue = placeholders[icuElement.value];
       if (placeholderValue) {
-        element.append(placeholderValue as Node | string);
+        element.append(placeholderValue);
       }
     } else if ('value' in icuElement) {
       element.append(String(icuElement.value));
@@ -34,14 +34,14 @@ export function getFormatLocalizedString(
 
 export function getFormatLocalizedStringTemplate(
     registeredStrings: ThirdPartyI18n.LocalizedStringSet.RegisteredFileStrings, stringId: string,
-    placeholders: Record<string, Object>): LitTemplate {
+    placeholders: Record<string, Node|string|LitTemplate>): 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>`;
+  return html`<span>${repeat(formatter.getAst(), icuElement => {
+    if (icuElement.type === /* argumentElement */ 1) {
+      return placeholders[icuElement.value] ?? nothing;
+    }
+    return 'value' in icuElement ? String(icuElement.value) : nothing;
+  })}</span>`;
 }

package/front_end/ui/kit/icons/Icon.docs.ts

@@ -2,76 +2,33 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../kit.js';
+
 import * as Lit from '../../lit/lit.js';
-import {createIcon} from '../kit.js';
 
 const {html} = Lit;
 
 export function render(container: HTMLElement): void {
-  const iconTable = document.createElement('table');
-  const header = document.createElement('tr');
-  const th1 = document.createElement('th');
-  th1.textContent = 'Icon description';
-  header.appendChild(th1);
-  const th2 = document.createElement('th');
-  th2.textContent = 'Icon';
-  header.appendChild(th2);
-  iconTable.appendChild(header);
-
-  container.appendChild(iconTable);
-
-  const row1 = document.createElement('tr');
-  const iconDescription1 = document.createElement('td');
-  iconDescription1.textContent = 'Programmatically created with default size and color';
-  row1.appendChild(iconDescription1);
-
-  const icon = createIcon('select-element');
-  const icon1 = document.createElement('td');
-  icon1.appendChild(icon);
-  row1.appendChild(icon1);
-
-  iconTable.appendChild(row1);
-
-  const row2 = document.createElement('tr');
-  const iconDescription2 = document.createElement('td');
-  iconDescription2.textContent = 'Programmatically created with custom size and color';
-  row2.appendChild(iconDescription2);
-
-  const otherIcon = createIcon('issue-exclamation-filled');
-  otherIcon.classList.toggle('custom-size-and-color');
-  const icon2 = document.createElement('td');
-  icon2.appendChild(otherIcon);
-  row2.appendChild(icon2);
-
-  iconTable.appendChild(row2);
-
-  const row3 = document.createElement('tr');
-  const iconDescription3 = document.createElement('td');
-  iconDescription3.textContent = 'Created through html template with default size and color';
-  row3.appendChild(iconDescription3);
-
-  const icon3 = document.createElement('td');
-  Lit.render(
-      html`
-          <devtools-icon name="select-element"></devtools-icon>
-        `,
-      icon3);
-  row3.appendChild(icon3);
-
-  iconTable.appendChild(row3);
-
-  const row4 = document.createElement('tr');
-  const iconDescription4 = document.createElement('td');
-  iconDescription4.textContent = 'Created through html template with custom size and color';
-  row4.appendChild(iconDescription4);
-
-  const icon4 = document.createElement('td');
   Lit.render(
       html`
-          <devtools-icon name="select-element" class="custom-color small"></devtools-icon>
-        `,
-      icon4);
-  row4.appendChild(icon4);
-
-  iconTable.appendChild(row4);
+        <table>
+          <tr>
+            <th>Icon description</th>
+            <th>Icon</th>
+          </tr>
+          <tr>
+            <td>Created through html template with default size and color</td>
+            <td>
+              <devtools-icon name="select-element"></devtools-icon>
+            </td>
+          </tr>
+          <tr>
+            <td>Created through html template with custom size and color</td>
+            <td>
+              <devtools-icon name="select-element" class="custom-color small"></devtools-icon>
+            </td>
+          </tr>
+        </table>
+      `,
+      container);
 }

package/front_end/ui/kit/kit.ts

@@ -4,3 +4,4 @@
 
 export * from './cards/Card.js';
 export * from './icons/Icon.js';
+export * from './link/Link.js';

package/front_end/ui/kit/link/Link.docs.ts

@@ -0,0 +1,15 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../kit.js';
+
+import * as Lit from '../../lit/lit.js';
+
+const {html} = Lit;
+
+export function render(container: HTMLElement) {
+  // We should stop the click as we have the wiring only in a
+  // full DevTools env
+  Lit.render(html`<devtools-link @click=${(ev: Event) => ev.consume()}>I am a link</devtools-link>`, container);
+}

package/front_end/ui/kit/link/Link.ts

@@ -0,0 +1,151 @@
+// Copyright 2025 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-lit-render-outside-of-view */
+
+import * as Platform from '../../../core/platform/platform.js';
+import * as UIHelpers from '../../helpers/helpers.js';
+import {html, render} from '../../lit/lit.js';
+import * as VisualLogging from '../../visual_logging/visual_logging.js';
+
+import linkStyles from './link.css.js';
+
+/**
+ * A simple icon component to handle external links.
+ * Handles both normal links `https://example.com`
+ * and chrome links `chrome://flags`.
+ *
+ * html`
+ *   <devtools-link href=""></devtools-link>
+ * `;
+ * ```
+ *
+ * @property href - The href to the place the link wants to navigate
+ * @property jslogContext - The `"jslogcontext"` attribute is reflected as a property.
+ *
+ * @attribute href - The href to the place the link wants to navigate
+ * @attribute jslogcontext -
+ * The context for the `jslog` attribute. A `jslog`
+ * attribute is generated automatically with the
+ * provided context.
+ */
+export class Link extends HTMLElement {
+  readonly #shadow = this.attachShadow({mode: 'open'});
+
+  static readonly observedAttributes = ['href', 'jslogcontext'];
+
+  connectedCallback(): void {
+    if (!this.hasAttribute('tabindex')) {
+      this.setAttribute('tabindex', '0');
+    }
+    this.#setDefaultTitle();
+
+    this.setAttribute('role', 'link');
+    this.setAttribute('target', '_blank');
+
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKeyDown);
+    this.#render();
+  }
+
+  disconnectedCallback(): void {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKeyDown);
+  }
+
+  #handleOpeningLink(event: Event): void {
+    const href = this.href as Platform.DevToolsPath.UrlString | undefined;
+    if (!href) {
+      return;
+    }
+
+    UIHelpers.openInNewTab(href);
+
+    event.consume();
+  }
+
+  get href(): string|null {
+    return this.getAttribute('href');
+  }
+
+  set href(href: Platform.DevToolsPath.UrlString) {
+    this.setAttribute('href', href);
+  }
+
+  get jslogContext(): string|null {
+    return this.getAttribute('jslogcontext');
+  }
+
+  set jslogContext(jslogContext: string) {
+    this.setAttribute('jslogcontext', jslogContext);
+  }
+
+  #onJslogContextChange(): void {
+    const href = this.href;
+    if (!href) {
+      throw new Error('`href` is a required attribute.');
+    }
+    const urlForContext = new URL(href);
+    urlForContext.search = '';
+    const jslogContext = Platform.StringUtilities.toKebabCase(
+        this.jslogContext ?? urlForContext.toString(),
+    );
+    const jslog = VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context(jslogContext);
+    this.setAttribute('jslog', jslog.toString());
+  }
+
+  #setDefaultTitle(): void {
+    if (!this.hasAttribute('title') && this.href) {
+      this.setAttribute('title', this.href);
+    }
+  }
+
+  attributeChangedCallback(
+      name: string,
+      oldValue: string|null,
+      newValue: string|null,
+      ): void {
+    if (oldValue !== newValue) {
+      return;
+    }
+    if (name === 'jslogcontext') {
+      return this.#onJslogContextChange();
+    }
+
+    if (name === 'href') {
+      this.#setDefaultTitle();
+    }
+
+    this.#render();
+  }
+
+  #onClick = (event: Event): void => {
+    this.#handleOpeningLink(event);
+  };
+
+  #onKeyDown = (event: KeyboardEvent): void => {
+    if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
+      this.#handleOpeningLink(event);
+    }
+  };
+
+  #render(): void {
+    // clang-format off
+    render(
+      html`<style>
+          ${linkStyles}
+        </style><slot></slot>`,
+      this.#shadow,
+      { host: this },
+    );
+    // clang-format on
+  }
+}
+
+customElements.define('devtools-link', Link);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-link': Link;
+  }
+}

package/front_end/ui/kit/link/link.css

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  display: inline-block;
+  cursor: pointer;
+  text-decoration: underline;
+  color: var(--text-link);
+}
+
+@media (forced-colors: active) {
+  :host {
+    background: Highlight;
+    color: HighlightText;
+  }
+}
+
+:host(:focus-visible) {
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  outline-offset: 2px;
+  /* stylelint-disable-next-line declaration-no-important */
+  outline-style: solid !important;
+  border-radius: var(--sys-shape-corner-extra-small);
+}

package/front_end/ui/legacy/EmptyWidget.ts

@@ -89,6 +89,12 @@ export class EmptyWidget extends VBox {
     this.performUpdate();
   }
 
+  set extraElements(elements: HTMLElement[]) {
+    this.#extraElements = elements;
+    this.#firstUpdate = false;
+    this.requestUpdate();
+  }
+
   override performUpdate(): void {
     if (this.#firstUpdate) {
       this.#extraElements = [...this.element.children];