chrome-devtools-frontend 1.0.1535712 → 1.0.1536371

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

@@ -167,6 +167,7 @@ const proposedRectForSimpleTooltip =
 
 export type TooltipVariant = 'simple'|'rich';
 export type PaddingMode = 'small'|'large';
+export type TooltipTrigger = 'hover'|'click'|'both';
 
 export interface TooltipProperties {
   id: string;
@@ -174,6 +175,7 @@ export interface TooltipProperties {
   padding?: PaddingMode;
   anchor?: HTMLElement;
   jslogContext?: string;
+  trigger?: TooltipTrigger;
 }
 
 /**
@@ -182,7 +184,7 @@ export interface TooltipProperties {
  * @property hoverDelay - reflects the `"hover-delay"` attribute.
  * @property variant - reflects the `"variant"` attribute.
  * @property padding - reflects the `"padding"` attribute.
- * @property useClick - reflects the `"click"` attribute.
+ * @property trigger - reflects the `"trigger"` 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.
@@ -190,17 +192,19 @@ export interface TooltipProperties {
  * @attribute variant - Variant of the tooltip, `"simple"` for strings only, inverted background,
  *                 `"rich"` for interactive content, background according to theme's surface.
  * @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 trigger - Specifies which action triggers the tooltip. `"hover"` is the default. `"click"` means the
+ *                 tooltip will be shown on click instead of hover. `"both"` means both hover and click trigger the
+ *                 tooltip.
  * @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.
+ *                  Requires a hotkey to open when fosed (Alt-down). When `"trigger"` is present
+ *                  as well, `"trigger"` takes precedence.
  */
 export class Tooltip extends HTMLElement {
-  static readonly observedAttributes = ['id', 'variant', 'jslogcontext'];
+  static readonly observedAttributes = ['id', 'variant', 'jslogcontext', 'trigger'];
   static lastOpenedTooltipId: string|null = null;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -231,16 +235,20 @@ export class Tooltip extends HTMLElement {
     }
   }
 
-  get useClick(): boolean {
-    return this.hasAttribute('use-click') ?? false;
-  }
-  set useClick(useClick: boolean) {
-    if (useClick) {
-      this.setAttribute('use-click', '');
-    } else {
-      this.removeAttribute('use-click');
+  get trigger(): TooltipTrigger {
+    switch (this.getAttribute('trigger')) {
+      case 'click':
+        return 'click';
+      case 'both':
+        return 'both';
+      case 'hover':
+      default:
+        return 'hover';
     }
   }
+  set trigger(trigger: TooltipTrigger) {
+    this.setAttribute('trigger', trigger);
+  }
 
   get hoverDelay(): number {
     return this.hasAttribute('hover-delay') ? Number(this.getAttribute('hover-delay')) : 300;
@@ -297,7 +305,7 @@ export class Tooltip extends HTMLElement {
 
   constructor(properties?: TooltipProperties) {
     super();
-    const {id, variant, padding, jslogContext, anchor} = properties ?? {};
+    const {id, variant, padding, jslogContext, anchor, trigger} = properties ?? {};
     if (id) {
       this.id = id;
     }
@@ -317,6 +325,9 @@ export class Tooltip extends HTMLElement {
       }
       this.#anchor = anchor;
     }
+    if (trigger) {
+      this.trigger = trigger;
+    }
   }
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
@@ -463,7 +474,7 @@ export class Tooltip extends HTMLElement {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'tooltip');
     }
-    this.setAttribute('popover', this.useClick ? 'auto' : 'manual');
+    this.setAttribute('popover', this.trigger === 'hover' ? 'manual' : 'auto');
     this.#updateJslog();
   }
 
@@ -474,6 +485,9 @@ export class Tooltip extends HTMLElement {
   #setClosing = (event: Event): void => {
     if ((event as ToggleEvent).newState === 'closed') {
       this.#closing = true;
+      if (this.#timeout) {
+        window.clearTimeout(this.#timeout);
+      }
     }
   };
 
@@ -521,9 +535,10 @@ export class Tooltip extends HTMLElement {
       // as we always want to support ESC to close.
       this.#anchor.addEventListener('keydown', this.#keyDown);
 
-      if (this.useClick) {
+      if (this.trigger === 'click' || this.trigger === 'both') {
         this.#anchor.addEventListener('click', this.toggle);
-      } else {
+      }
+      if (this.trigger === 'hover' || this.trigger === 'both') {
         this.#anchor.addEventListener('mouseenter', this.showTooltip);
         if (!this.useHotkey) {
           this.#anchor.addEventListener('focus', this.showTooltip);

package/front_end/ui/i18n/i18n.ts

@@ -0,0 +1,31 @@
+// 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-imperative-dom-api */
+
+import * as I18n from '../../core/i18n/i18n.js';
+import type * as ThirdPartyI18n from '../../third_party/i18n/i18n.js';
+
+/**
+ * Returns a span element that may contains other DOM element as placeholders
+ */
+export function getFormatLocalizedString(
+    registeredStrings: ThirdPartyI18n.LocalizedStringSet.RegisteredFileStrings, stringId: string,
+    placeholders: Record<string, Object>): HTMLSpanElement {
+  const formatter = registeredStrings.getLocalizedStringSetFor(I18n.DevToolsLocale.DevToolsLocale.instance().locale)
+                        .getMessageFormatterFor(stringId);
+
+  const element = document.createElement('span');
+  for (const icuElement of formatter.getAst()) {
+    if (icuElement.type === /* argumentElement */ 1) {
+      const placeholderValue = placeholders[icuElement.value];
+      if (placeholderValue) {
+        element.append(placeholderValue as Node | string);
+      }
+    } else if ('value' in icuElement) {
+      element.append(String(icuElement.value));
+    }
+  }
+  return element;
+}

package/front_end/ui/legacy/SoftDropDown.ts

@@ -38,7 +38,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
   private list: ListControl<T>;
   private rowHeight: number;
   private width: number;
-  private listWasShowing200msAgo: boolean;
 
   constructor(model: ListModel<T>, delegate: Delegate<T>, jslogContext?: string) {
     this.delegate = delegate;
@@ -79,9 +78,8 @@ export class SoftDropDown<T> implements ListDelegate<T> {
         'jslog',
         `${VisualLogging.menu().parent('mapped').track({resize: true, keydown: 'ArrowUp|ArrowDown|PageUp|PageDown'})}`);
 
-    this.listWasShowing200msAgo = false;
     this.element.addEventListener('mousedown', event => {
-      if (this.listWasShowing200msAgo) {
+      if (this.glassPane.isShowing()) {
         this.hide(event);
       } else if (!this.element.disabled) {
         this.show(event);
@@ -96,9 +94,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
         return;
       }
 
-      if (!this.listWasShowing200msAgo) {
-        return;
-      }
       this.selectHighlightedItem();
       if (event.target instanceof Element && event.target?.parentElement) {
         // hide() will consume the mouseup event and click won't be triggered
@@ -122,9 +117,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
       this.list.selectItem(this.selectedItem);
     }
     event.consume(true);
-    window.setTimeout(() => {
-      this.listWasShowing200msAgo = true;
-    }, 200);
   }
 
   private updateGlasspaneSize(): void {
@@ -134,9 +126,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
   }
 
   private hide(event: Event): void {
-    window.setTimeout(() => {
-      this.listWasShowing200msAgo = false;
-    }, 200);
     this.glassPane.hide();
     this.list.selectItem(null);
     ARIAUtils.setExpanded(this.element, false);

package/front_end/ui/legacy/ViewManager.ts

@@ -164,14 +164,12 @@ export interface EventTypes {
 }
 
 export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  readonly views: Map<string, View>;
-  private readonly locationNameByViewId: Map<string, string>;
+  readonly views = new Map<string, View>();
+  private readonly locationNameByViewId = new Map<string, string>();
   private readonly locationOverrideSetting: Common.Settings.Setting<Record<string, string>>;
 
   private constructor() {
     super();
-    this.views = new Map();
-    this.locationNameByViewId = new Map();
 
     // Read override setting for location
     this.locationOverrideSetting = Common.Settings.Settings.instance().createSetting('views-location-override', {});

package/front_end/ui/legacy/Widget.ts

@@ -125,6 +125,14 @@ export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
     widget.show(this.parentElement as HTMLElement, undefined, /* suppressOrphanWidgetError= */ true);
   }
 
+  disconnectedCallback(): void {
+    const widget = Widget.get(this);
+    if (widget) {
+      widget.setHideOnDetach();
+      widget.detach();
+    }
+  }
+
   override appendChild<T extends Node>(child: T): T {
     if (child instanceof HTMLElement && child.tagName !== 'STYLE') {
       Widget.getOrCreateWidget(child).show(this);
@@ -264,7 +272,6 @@ export class Widget {
   #notificationDepth = 0;
   #invalidationsSuspended = 0;
   #parentWidget: Widget|null = null;
-  #defaultFocusedElement?: Element|null;
   #cachedConstraints?: Geometry.Constraints;
   #constraints?: Geometry.Constraints;
   #invalidationsRequested?: boolean;
@@ -724,7 +731,13 @@ export class Widget {
   }
 
   setDefaultFocusedElement(element: Element|null): void {
-    this.#defaultFocusedElement = element;
+    const defaultFocusedElement = this.getDefaultFocusedElement();
+    if (defaultFocusedElement) {
+      defaultFocusedElement.removeAttribute('autofocus');
+    }
+    if (element) {
+      element.setAttribute('autofocus', '');
+    }
   }
 
   setDefaultFocusedChild(child: Widget): void {
@@ -732,21 +745,28 @@ export class Widget {
     this.defaultFocusedChild = child;
   }
 
-  focus(): void {
-    if (!this.isShowing()) {
-      return;
+  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;
+      }
+      widgetElement = widgetElement.parentElementOrShadowHost();
     }
+    return null;
+  }
 
-    if (this.#shadowRoot?.delegatesFocus && this.contentElement.querySelector('[autofocus]')) {
-      this.element.focus();
+  focus(): void {
+    if (!this.isShowing()) {
       return;
     }
-
-    const element = (this.#defaultFocusedElement as HTMLElement | null);
-    if (element) {
-      if (!element.hasFocus()) {
-        element.focus();
-      }
+    const autofocusElement = this.getDefaultFocusedElement();
+    if (autofocusElement) {
+      autofocusElement.focus();
       return;
     }
 
@@ -759,10 +779,6 @@ export class Widget {
           return;
         }
       }
-      let child = this.contentElement.traverseNextNode(this.contentElement);
-      while (child) {
-        child = child.traverseNextNode(this.contentElement);
-      }
     }
   }
 

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

@@ -35,6 +35,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 TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as uiI18n from '../../../../ui/i18n/i18n.js';
 import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as TextEditor from '../../../components/text_editor/text_editor.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
@@ -438,7 +439,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       wrapperElement.classList.add('error');
       wrapperElement.classList.add('value');
       wrapperElement.appendChild(
-          i18n.i18n.getFormatLocalizedString(str_, UIStrings.exceptionS, {PH1: propertyValue.element}));
+          uiI18n.getFormatLocalizedString(str_, UIStrings.exceptionS, {PH1: propertyValue.element}));
       propertyValue.element = wrapperElement;
     }
     propertyValue.element.classList.add('value');

package/front_end/ui/legacy/legacy.ts

@@ -42,7 +42,6 @@ import * as SuggestBox from './SuggestBox.js';
 import * as TabbedPane from './TabbedPane.js';
 import * as TargetCrashedScreen from './TargetCrashedScreen.js';
 import * as TextPrompt from './TextPrompt.js';
-import * as ThrottledWidget from './ThrottledWidget.js';
 import * as Toolbar from './Toolbar.js';
 import * as Tooltip from './Tooltip.js';
 import * as TreeOutline from './Treeoutline.js';
@@ -95,7 +94,6 @@ export {
   TabbedPane,
   TargetCrashedScreen,
   TextPrompt,
-  ThrottledWidget,
   Toolbar,
   Tooltip,
   TreeOutline,

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -849,6 +849,7 @@ export const knownContextValues = new Set([
   'console-group-similar-false',
   'console-history-autocomplete',
   'console-history-autocomplete-false',
+  'console-insight-teaser',
   'console-insight-teasers-enabled',
   'console-insights',
   'console-insights-enabled',
@@ -3162,6 +3163,7 @@ export const knownContextValues = new Set([
   'row-rule-color',
   'row-rule-outset',
   'row-rule-style',
+  'row-rule-visibility-items',
   'row-rule-width',
   'rp-id',
   'rpId',
@@ -3686,6 +3688,7 @@ export const knownContextValues = new Set([
   'targets',
   'task-duration',
   'te',
+  'teaser-info-tooltip',
   'terms-of-service',
   'terms-of-service-accepted',
   'terms-of-service.console-insights',

package/mcp/mcp.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+export * as I18n from '../front_end/core/i18n/i18n.js';
 export {ConnectionTransport} from '../front_end/core/protocol_client/ConnectionTransport.js';
 export {
   PerformanceInsightFormatter

package/package.json

@@ -102,5 +102,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1535712"
+  "version": "1.0.1536371"
 }

package/front_end/ui/components/docs/recorder_create_recording_view/basic.html

@@ -1,20 +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.
--->
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>Recorder: CreateRecordingView</title>
-</head>
-
-<body>
-  <div id="container"></div>
-  <script src="./basic.js" type="module"></script>
-</body>
-
-</html>

package/front_end/ui/components/docs/recorder_create_recording_view/basic.ts

@@ -1,27 +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 ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
-import * as RecorderComponents from '../../../../panels/recorder/components/components.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-async function initializeGlobalActions(): Promise<void> {
-  const UI = await import('../../../../../front_end/ui/legacy/legacy.js');
-  const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
-  UI.ShortcutRegistry.ShortcutRegistry.instance({
-    forceNew: true,
-    actionRegistry,
-  });
-}
-
-await initializeGlobalActions();
-
-const component1 = new RecorderComponents.CreateRecordingView.CreateRecordingView();
-document.getElementById('container')?.appendChild(component1);
-
-const component2 = new RecorderComponents.CreateRecordingView.CreateRecordingView();
-document.getElementById('container')?.appendChild(component2);
-component2.shadowRoot?.querySelector('devtools-control-button')?.click();

package/front_end/ui/legacy/ThrottledWidget.ts

@@ -1,48 +0,0 @@
-// Copyright 2014 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 {VBox} from './Widget.js';
-
-export class ThrottledWidget extends VBox {
-  private readonly updateThrottler: Common.Throttler.Throttler;
-  private updateWhenVisible: boolean;
-  protected lastUpdatePromise: Promise<void> = Promise.resolve();
-
-  constructor(useShadowDom?: boolean, timeout?: number) {
-    super({useShadowDom});
-    this.updateThrottler = new Common.Throttler.Throttler(timeout === undefined ? 100 : timeout);
-    this.updateWhenVisible = false;
-  }
-
-  protected doUpdate(): Promise<void> {
-    return Promise.resolve();
-  }
-
-  update(): void {
-    this.updateWhenVisible = !this.isShowing();
-    if (this.updateWhenVisible) {
-      return;
-    }
-    this.lastUpdatePromise = this.updateThrottler.schedule(() => {
-      if (this.isShowing()) {
-        return this.doUpdate();
-      }
-      this.updateWhenVisible = true;
-      return Promise.resolve();
-    });
-  }
-
-  override get updateComplete(): Promise<boolean> {
-    return this.updateThrottler.processCompleted?.then(result => Boolean(result)) || Promise.resolve(false);
-  }
-
-  override wasShown(): void {
-    super.wasShown();
-    if (this.updateWhenVisible) {
-      this.update();
-    }
-  }
-}