chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/ui/legacy/components/quick_open/HelpQuickOpen.ts

@@ -1,10 +1,10 @@
 // Copyright 2017 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 */
 
-import * as IconButton from '../../../components/icon_button/icon_button.js';
-import * as UI from '../../legacy.js';
+import '../../../kit/kit.js';
+
+import {html, type TemplateResult} from '../../../lit/lit.js';
 
 import {getRegisteredProviders, Provider, type ProviderRegistration, registerProvider} from './FilteredListWidget.js';
 import {QuickOpenImpl} from './QuickOpen.js';
@@ -44,18 +44,15 @@ export class HelpQuickOpen extends Provider {
     return -this.providers[itemIndex].prefix.length;
   }
 
-  override renderItem(itemIndex: number, _query: string, wrapperElement: Element): void {
+  override renderItem(itemIndex: number, _query: string): TemplateResult {
     const provider = this.providers[itemIndex];
-
-    const itemElement = wrapperElement.createChild('div');
-    const titleElement = itemElement.createChild('div');
-
-    const iconElement = new IconButton.Icon.Icon();
-    iconElement.name = provider.iconName;
-    iconElement.classList.add('large');
-    wrapperElement.insertBefore(iconElement, itemElement);
-
-    UI.UIUtils.createTextChild(titleElement, provider.title);
+    // clang-format off
+    return html`
+      <devtools-icon class="large" name=${provider.iconName}></devtools-icon>
+      <div>
+        <div>${provider.title}</div>
+      </div>`;
+    // clang-format on
   }
 
   override jslogContextAt(itemIndex: number): string {

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -2,7 +2,7 @@
 // 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 */
+/* eslint-disable @devtools/no-imperative-dom-api, @devtools/no-lit-render-outside-of-view */
 
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
@@ -16,9 +16,8 @@ import type * as StackTrace from '../../../../models/stack_trace/stack_trace.js'
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
-import type * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as UIHelpers from '../../../helpers/helpers.js';
-import {html, render} from '../../../lit/lit.js';
+import {html, type LitTemplate, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -558,13 +557,10 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     if (!decorator || !info.uiLocation) {
       return;
     }
-    if (info.icon?.parentElement) {
-      anchor.removeChild(info.icon);
-    }
     const icon = decorator.linkIcon(info.uiLocation.uiSourceCode);
-    if (icon) {
-      icon.style.setProperty('margin-right', '2px');
-      anchor.insertBefore(icon, anchor.firstChild);
+    if (icon && anchor instanceof HTMLElement && anchor.firstElementChild instanceof HTMLElement) {
+      anchor.firstElementChild?.style.setProperty('margin-left', '2px');
+      render(icon, anchor, {renderBefore: anchor.firstElementChild});
     }
     info.icon = icon;
   }
@@ -946,7 +942,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
 }
 
 export interface LinkDecorator extends Common.EventTarget.EventTarget<LinkDecorator.EventTypes> {
-  linkIcon(uiSourceCode: Workspace.UISourceCode.UISourceCode): IconButton.Icon.Icon|null;
+  linkIcon(uiSourceCode: Workspace.UISourceCode.UISourceCode): LitTemplate|null;
 }
 
 export namespace LinkDecorator {
@@ -1106,7 +1102,7 @@ export class ContentProviderContextMenuProvider implements
 }
 
 interface LinkInfo {
-  icon: IconButton.Icon.Icon|null;
+  icon: LitTemplate|null;
   enableDecorator: boolean;
   uiLocation: Workspace.UISourceCode.UILocation|null;
   liveLocation: Bindings.LiveLocation.LiveLocation|null;

package/front_end/ui/legacy/floaty.css

@@ -0,0 +1,77 @@
+/*
+ * 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.
+ */
+
+dialog {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  max-width: 400px;
+  min-width: 200px;
+  min-height: 100px;
+  max-height: 400px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  box-shadow: var(--drop-shadow);
+  background: var(--sys-color-tonal-container);
+  border-radius: var(--sys-shape-corner-medium-small);
+  border: none;
+  flex-direction: column;
+
+  header {
+    padding: var(--sys-size-6);
+
+    span {
+      font: var(--sys-typescale-headline5);
+    }
+
+    display: flex;
+    align-items: flex-start;
+
+    .close-button {
+      margin-left: auto;
+    }
+  }
+
+  section.body {
+    border-radius: var(--sys-shape-corner-medium-small);
+    background: var(--sys-color-surface);
+    height: 100%;
+    padding: var(--sys-size-6);
+  }
+
+  .floaty-contexts {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    li {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: var(--sys-size-2) var(--sys-size-3);
+      border-radius: var(--sys-shape-corner-extra-small);
+      border: 1px solid var(--sys-color-tonal-outline);
+      font: var(--sys-typescale-monospace-regular);
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      devtools-button {
+        margin-left: auto;
+      }
+    }
+  }
+
+  section.actions {
+    margin-top: var(--sys-size-7);
+  }
+}
+
+dialog[open] {
+  display: flex;
+}

package/front_end/ui/legacy/legacy.ts

@@ -15,6 +15,7 @@ import * as DropTarget from './DropTarget.js';
 import * as EmptyWidget from './EmptyWidget.js';
 import * as FilterBar from './FilterBar.js';
 import * as FilterSuggestionBuilder from './FilterSuggestionBuilder.js';
+import * as Floaty from './Floaty.js';
 import * as ForwardedInputEventHandler from './ForwardedInputEventHandler.js';
 import * as Fragment from './Fragment.js';
 import * as GlassPane from './GlassPane.js';
@@ -67,6 +68,7 @@ export {
   EmptyWidget,
   FilterBar,
   FilterSuggestionBuilder,
+  Floaty,
   ForwardedInputEventHandler,
   Fragment,
   GlassPane,

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -460,6 +460,7 @@ export const knownContextValues = new Set([
   'animations.playback-rate-100',
   'animations.playback-rate-25',
   'animations.remove-preview',
+  'annotation',
   'annotations-hidden',
   'another_id',
   'answer',
@@ -1921,6 +1922,8 @@ export const knownContextValues = new Set([
   'insights-deprecation-learn-more',
   'insights-deprecation-open-performance-panel',
   'insights-deprecation-send-feedback',
+  'insights-teaser-built-in-ai-documentation',
+  'insights-teaser-download-model',
   'insights-teaser-tell-me-more',
   'inspect',
   'inspect-prerendered-page',
@@ -2869,6 +2872,7 @@ export const knownContextValues = new Set([
   'performance.sidebar-toggle',
   'periodic-background-sync',
   'periodic-sync-tag',
+  'permission-element-elements',
   'persist-flame-config',
   'persistence-automatic-workspace-folders',
   'persistence-network-overrides-enabled',
@@ -3831,9 +3835,11 @@ export const knownContextValues = new Set([
   'timeline-tree-group-by',
   'timeline-trigger',
   'timeline-trigger-behavior',
+  'timeline-trigger-exit-range',
   'timeline-trigger-exit-range-end',
   'timeline-trigger-exit-range-start',
   'timeline-trigger-name',
+  'timeline-trigger-range',
   'timeline-trigger-range-end',
   'timeline-trigger-range-start',
   'timeline-trigger-source',

package/inspector_overlay/loadCSS.rollup.js

@@ -5,7 +5,8 @@
 // WARNING: don't use this rollup plugin outside of inspector_overlay.
 // See README for special constraints the overlay has.
 
-module.exports = function loadCSS() {
+// eslint-disable-next-line import/no-default-export
+export default function loadCSS() {
   return {
     name: 'loadCSS',
     /**
@@ -20,10 +21,10 @@ module.exports = function loadCSS() {
             style.replaceSync(${JSON.stringify(code)});
             export default style;
           `,
-          map: null
+          map: null,
         };
       }
       return;
-    }
+    },
   };
-};
+}

package/mcp/mcp.ts

@@ -47,6 +47,7 @@ export {
   IssuesManager
 } from '../front_end/models/issues_manager/IssuesManager.js';
 export * as MarkdownIssueDescription from '../front_end/models/issues_manager/MarkdownIssueDescription.js';
+export * as StackTrace from '../front_end/models/stack_trace/stack_trace.js';
 export * as TraceEngine from '../front_end/models/trace/trace.js';
 export * as Marked from '../front_end/third_party/marked/marked.js';
 

package/package.json

@@ -35,7 +35,7 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-terser": "0.4.4",
-    "@rollup/wasm-node": "4.53.2",
+    "@rollup/wasm-node": "4.21.0",
     "@stylistic/eslint-plugin": "5.5.0",
     "@types/chai": "4.3.15",
     "@types/codemirror": "5.60.17",
@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1549484"
+  "version": "1.0.1553956"
 }

package/front_end/panels/application/preloading/components/PreloadingMismatchedHeadersGrid.ts

@@ -1,99 +0,0 @@
-// Copyright 2023 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 '../../../../ui/legacy/components/data_grid/data_grid.js';
-
-import * as i18n from '../../../../core/i18n/i18n.js';
-import type * as SDK from '../../../../core/sdk/sdk.js';
-import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import type * as UI from '../../../../ui/legacy/legacy.js';
-import * as Lit from '../../../../ui/lit/lit.js';
-
-import preloadingGridStyles from './preloadingGrid.css.js';
-
-const UIStrings = {
-  /**
-   * @description The name of the HTTP request header.
-   */
-  headerName: 'Header name',
-  /**
-   * @description The value of the HTTP request header in initial navigation.
-   */
-  initialNavigationValue: 'Value in initial navigation',
-  /**
-   * @description The value of the HTTP request header in activation navigation.
-   */
-  activationNavigationValue: 'Value in activation navigation',
-  /**
-   * @description The string to indicate the value of the header is missing.
-   */
-  missing: '(missing)',
-} as const;
-const str_ = i18n.i18n.registerUIStrings(
-    'panels/application/preloading/components/PreloadingMismatchedHeadersGrid.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-const {render, html} = Lit;
-
-export class PreloadingMismatchedHeadersGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #data: SDK.PreloadingModel.PrerenderAttempt|SDK.PreloadingModel.PrerenderUntilScriptAttempt|null = null;
-  connectedCallback(): void {
-    this.#render();
-  }
-
-  set data(data: SDK.PreloadingModel.PrerenderAttempt|SDK.PreloadingModel.PrerenderUntilScriptAttempt) {
-    if (data.mismatchedHeaders === null) {
-      return;
-    }
-    this.#data = data;
-    this.#render();
-  }
-
-  #render(): void {
-    if (!this.#data?.mismatchedHeaders) {
-      return;
-    }
-
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-      render(html`
-        <style>${preloadingGridStyles}</style>
-        <div class="preloading-container">
-          <devtools-data-grid striped inline>
-            <table>
-              <tr>
-                <th id="header-name" weight="30" sortable>
-                  ${i18nString(UIStrings.headerName)}
-                </th>
-                <th id="initial-value" weight="30" sortable>
-                  ${i18nString(UIStrings.initialNavigationValue)}
-                </th>
-                <th id="activation-value" weight="30" sortable>
-                  ${i18nString(UIStrings.activationNavigationValue)}
-                </th>
-              </tr>
-              ${this.#data.mismatchedHeaders.map(mismatchedHeaders => html`
-                <tr>
-                  <td>${mismatchedHeaders.headerName}</td>
-                  <td>${mismatchedHeaders.initialValue ?? i18nString(UIStrings.missing)}</td>
-                  <td>${mismatchedHeaders.activationValue ?? i18nString(UIStrings.missing)}</td>
-                </tr>
-              `)}
-            </table>
-          </devtools-data-grid>
-        </div>
-      `, this.#shadow, {host: this});
-    // clang-format on
-  }
-}
-
-customElements.define('devtools-resources-preloading-mismatched-headers-grid', PreloadingMismatchedHeadersGrid);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-preloading-mismatched-headers-grid': PreloadingMismatchedHeadersGrid;
-  }
-}

package/front_end/panels/recorder/components/SelectButton.ts

@@ -1,304 +0,0 @@
-// Copyright 2023 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 '../../../ui/components/menus/menus.js';
-
-import * as Platform from '../../../core/platform/platform.js';
-import type {LocalizedString} from '../../../core/platform/UIString.js';
-import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import * as Models from '../models/models.js';
-import type * as Actions from '../recorder-actions/recorder-actions.js';
-
-import selectButtonStyles from './selectButton.css.js'; // Keep the import for the raw string
-
-const {html, Directives: {ifDefined, classMap}} = Lit;
-
-export const enum Variant {
-  PRIMARY = 'primary',
-  OUTLINED = 'outlined',
-}
-
-interface SelectMenuGroup {
-  name: string;
-  items: SelectButtonItem[];
-}
-
-interface SelectButtonProps {
-  /**
-   * Whether the button is disabled or not
-   * Defaults to false
-   */
-  disabled: boolean;
-  /**
-   * Current value of the button
-   * The same value must correspond to an item in the `items` array
-   */
-  value: string;
-  /**
-   * Items for the select menu of the button
-   * Selected item is shown in the button itself
-   */
-  items: SelectButtonItem[];
-  /**
-   * Groups for the select menu of the button.
-   */
-  buttonLabel: LocalizedString;
-  /**
-   * Groups for the select menu of the button.
-   */
-  groups: SelectMenuGroup[];
-  /**
-   * Similar to the button variant
-   */
-  variant: Variant;
-  /**
-   * Action that the button is linked to
-   */
-  action?: Actions.RecorderActions;
-}
-
-export interface SelectButtonItem {
-  /**
-   * Specifies the clicked item
-   */
-  value: string;
-  /**
-   * `icon` to be shown on the button
-   */
-  buttonIconName?: string;
-  /**
-   * Text to be shown in the select menu
-   */
-  label: () => string;
-  /**
-   * Text to be shown in the button when the item is selected for the button
-   */
-  buttonLabel?: () => string;
-}
-
-export class SelectButtonClickEvent extends Event {
-  static readonly eventName = 'selectbuttonclick';
-
-  constructor(public value?: string) {
-    super(SelectButtonClickEvent.eventName, {bubbles: true, composed: true});
-  }
-}
-
-export class SelectMenuSelectedEvent extends Event {
-  static readonly eventName = 'selectmenuselected';
-
-  constructor(public value: string) {
-    super(SelectMenuSelectedEvent.eventName, {bubbles: true, composed: true});
-  }
-}
-
-export class SelectButton extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #props: SelectButtonProps = {
-    disabled: false,
-    value: '',
-    items: [],
-    buttonLabel: '' as LocalizedString,
-    groups: [],
-    variant: Variant.PRIMARY,
-  };
-
-  connectedCallback(): void {
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  get disabled(): boolean {
-    return this.#props.disabled;
-  }
-
-  set disabled(disabled: boolean) {
-    this.#props.disabled = disabled;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  get items(): SelectButtonItem[] {
-    return this.#props.items;
-  }
-
-  set items(items: SelectButtonItem[]) {
-    this.#props.items = items;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  set buttonLabel(buttonLabel: LocalizedString) {
-    this.#props.buttonLabel = buttonLabel;
-  }
-
-  set groups(groups: SelectMenuGroup[]) {
-    this.#props.groups = groups;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  get value(): string {
-    return this.#props.value;
-  }
-
-  set value(value: string) {
-    this.#props.value = value;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  get variant(): Variant {
-    return this.#props.variant;
-  }
-
-  set variant(variant: Variant) {
-    this.#props.variant = variant;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  set action(value: Actions.RecorderActions) {
-    this.#props.action = value;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  #handleClick(ev: Event): void {
-    ev.stopPropagation();
-    this.dispatchEvent(new SelectButtonClickEvent(this.#props.value));
-  }
-
-  #handleSelectMenuSelect(
-      evt: Event,
-      ): void {
-    if (evt.target instanceof HTMLSelectElement) {
-      this.dispatchEvent(new SelectMenuSelectedEvent(evt.target.value as string));
-      void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-    }
-  }
-
-  #renderSelectItem(
-      item: SelectButtonItem,
-      selectedItem: SelectButtonItem,
-      ): Lit.TemplateResult {
-    const selected = item.value === selectedItem.value;
-    // clang-format off
-    return html`
-      <option
-      .title=${item.label()}
-      value=${item.value}
-      ?selected=${selected}
-      jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(item.value)).track({click: true})}
-      >${
-        (selected && item.buttonLabel) ? item.buttonLabel() : item.label()
-      }</option>
-    `;
-    // clang-format on
-  }
-
-  #renderSelectGroup(
-      group: SelectMenuGroup,
-      selectedItem: SelectButtonItem,
-      ): Lit.TemplateResult {
-    // clang-format off
-    return html`
-      <optgroup label=${group.name}>
-        ${group.items.map(item => this.#renderSelectItem(item, selectedItem))}
-      </optgroup>
-    `;
-    // clang-format on
-  }
-
-  #getTitle(label: string): string {
-    return this.#props.action ? Models.Tooltip.getTooltipForActions(label, this.#props.action) : '';
-  }
-
-  #render = (): void => {
-    const hasGroups = Boolean(this.#props.groups.length);
-    const items = hasGroups ? this.#props.groups.flatMap(group => group.items) : this.#props.items;
-    const selectedItem = items.find(item => item.value === this.#props.value) || items[0];
-    if (!selectedItem) {
-      return;
-    }
-
-    const classes = {
-      primary: this.#props.variant === Variant.PRIMARY,
-      secondary: this.#props.variant === Variant.OUTLINED,
-    };
-
-    const buttonVariant =
-        this.#props.variant === Variant.OUTLINED ? Buttons.Button.Variant.OUTLINED : Buttons.Button.Variant.PRIMARY;
-    const menuLabel = selectedItem.buttonLabel ? selectedItem.buttonLabel() : selectedItem.label();
-
-    // clang-format off
-    Lit.render(
-      html` <style>
-          ${UI.inspectorCommonStyles}
-        </style>
-        <style>
-          ${selectButtonStyles}
-        </style>
-        <div
-          class="select-button"
-          title=${ifDefined(this.#getTitle(menuLabel))}
-        >
-          <label>
-            ${this.#props.groups.length > 1
-              ? html`
-                  <div
-                    class="groups-label"
-                    >${this.#props.groups
-                      .map(group => {
-                        return group.name;
-                      })
-                      .join(' & ')}</div>`
-              : Lit.nothing}
-            <select
-              class=${classMap(classes)}
-              ?disabled=${this.#props.disabled}
-              jslog=${VisualLogging.dropDown('network-conditions').track({
-                change: true,
-              })}
-              @change=${this.#handleSelectMenuSelect}
-            >
-              ${hasGroups
-                ? this.#props.groups.map(group =>
-                    this.#renderSelectGroup(group, selectedItem),
-                  )
-                : this.#props.items.map(item =>
-                    this.#renderSelectItem(item, selectedItem),
-                  )}
-            </select>
-          </label>
-          ${selectedItem
-            ? html` <devtools-button
-                .disabled=${this.#props.disabled}
-                .variant=${buttonVariant}
-                .iconName=${selectedItem.buttonIconName}
-                @click=${this.#handleClick}
-              >
-                ${this.#props.buttonLabel}
-              </devtools-button>`
-            : ''}
-        </div>`,
-      this.#shadow,
-      { host: this },
-    );
-    // clang-format on
-  };
-}
-
-customElements.define(
-    'devtools-select-button',
-    SelectButton,
-);
-
-declare global {
-  interface HTMLElementEventMap {
-    selectbuttonclick: SelectButtonClickEvent;
-  }
-
-  interface HTMLElementTagNameMap {
-    'devtools-select-button': SelectButton;
-  }
-}

package/front_end/panels/recorder/controllers/controllers.ts

@@ -1,7 +0,0 @@
-// Copyright 2023 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 SelectorPicker from './SelectorPicker.js';
-
-export {SelectorPicker};