chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/ui/components/request_link_icon/RequestLinkIcon.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';

package/front_end/ui/components/settings/SettingDeprecationWarning.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../icon_button/icon_button.js';
+import '../../kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as Lit from '../../lit/lit.js';

package/front_end/ui/components/snackbars/Snackbars.docs.ts

@@ -6,7 +6,6 @@ import {Snackbar} from './snackbars.js';
 
 export function render(container: HTMLElement) {
   const onActionClick = (): void => {
-    // eslint-disable-next-line no-console
     console.log('Action button clicked!');
   };
 

package/front_end/ui/components/survey_link/SurveyLink.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../icon_button/icon_button.js';
+import '../../kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import type * as Host from '../../../core/host/host.js';

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

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import type * as PanelCommon from '../../../panels/common/common.js';
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
+import type * as UI from '../../../ui/legacy/legacy.js';
 
 export function flattenRect(rect: DOMRect, left: boolean): {
   left: number,
@@ -16,8 +16,17 @@ export function flattenRect(rect: DOMRect, left: boolean): {
   return {left: x, right: x, top: rect.top, bottom: rect.bottom};
 }
 
+// TODO(b/462393094): Rename this to be a generic accessible placeholder
+/**
+ * A CodeMirror WidgetType that displays a UI.Widget.Widget as a placeholder.
+ *
+ * This custom placeholder implementation is used in place of the default
+ * CodeMirror placeholder to provide better accessibility. Specifically,
+ * it ensures that screen readers can properly announce the content within
+ * the encapsulated widget.
+ */
 export class AiCodeCompletionTeaserPlaceholder extends CM.WidgetType {
-  constructor(readonly teaser: PanelCommon.AiCodeCompletionTeaser) {
+  constructor(readonly teaser: UI.Widget.Widget) {
     super();
   }
 
@@ -64,7 +73,7 @@ export class AiCodeCompletionTeaserPlaceholder extends CM.WidgetType {
   }
 }
 
-export function aiCodeCompletionTeaserPlaceholder(teaser: PanelCommon.AiCodeCompletionTeaser): CM.Extension {
+export function aiCodeCompletionTeaserPlaceholder(teaser: UI.Widget.Widget): CM.Extension {
   const plugin = CM.ViewPlugin.fromClass(class {
     placeholder: CM.DecorationSet;
 

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/config.ts

@@ -8,10 +8,10 @@ import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
+import {Icon} from '../../kit/kit.js';
 import * as UI from '../../legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
-import * as Icon from '../icon_button/icon_button.js';
 
 import {editorTheme} from './theme.js';
 
@@ -200,7 +200,7 @@ export const codeFolding = DynamicSetting.bool('text-editor-code-folding', [
   CM.foldGutter({
     markerDOM(open: boolean): HTMLElement {
       const iconName = open ? 'triangle-down' : 'triangle-right';
-      const icon = new Icon.Icon.Icon();
+      const icon = new Icon();
       icon.setAttribute('class', open ? 'cm-foldGutterElement' : 'cm-foldGutterElement cm-foldGutterElement-folded');
       icon.setAttribute('jslog', `${VisualLogging.expand().track({click: true})}`);
       icon.name = iconName;

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/cards/Card.docs.ts

@@ -0,0 +1,43 @@
+// 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): void {
+  Lit.render(
+      html`
+        <style>
+          devtools-card {
+            margin: 1em;
+          }
+          .content {
+            padding: 1em;
+          }
+          span {
+            align-self: center;
+          }
+        </style>
+        <h2>Basic card with heading</h2>
+        <devtools-card heading="Simple card">
+          <div class="content">This is a simple card.</div>
+        </devtools-card>
+
+        <h2>Card without a heading</h2>
+        <devtools-card>
+          <div class="content">This is a card without a heading.</div>
+        </devtools-card>
+
+        <h2>Card with rich heading</h2>
+        <devtools-card heading="Card with rich heading">
+          <span slot="heading-prefix">Slotted heading prefix</span>
+          <span slot="heading-suffix">Slotted heading suffix</span>
+          <div class="content">This is a card with a rich heading.</div>
+        </devtools-card>
+        `,
+      container);
+}

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

@@ -0,0 +1,34 @@
+// Copyright 2020 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): void {
+  Lit.render(
+      html`
+        <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/{components/icon_button → kit/icons}/Icon.ts

@@ -1,7 +1,7 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api, @devtools/enforce-custom-element-definitions-location */
+/* eslint-disable @devtools/no-imperative-dom-api */
 
 import '../../../Images/Images.js';
 
@@ -35,8 +35,8 @@ export type IconData = IconWithName|{
  *
  * ```js
  * // Instantiate programmatically via the `create()` helper:
- * const icon = IconButton.Icon.create('bin');
- * const iconWithClassName = IconButton.Icon.create('bin', 'delete-icon');
+ * const icon = createIcon('bin');
+ * const iconWithClassName = createIcon('bin', 'delete-icon');
  *
  * // Use within a template:
  * Lit.html`
@@ -167,7 +167,7 @@ export class Icon extends HTMLElement {
  * @param className optional CSS class name(s) to put onto the element.
  * @returns the newly created `Icon` instance.
  */
-export const create = (name: string, className?: string): Icon => {
+export const createIcon = (name: string, className?: string): Icon => {
   const icon = new Icon();
   icon.name = name;
   if (className !== undefined) {

package/front_end/ui/kit/kit.ts

@@ -3,3 +3,5 @@
 // found in the LICENSE file.
 
 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];