chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/ui/legacy/components/perf_ui/ChartViewport.ts

@@ -30,7 +30,7 @@ export interface Config {
 }
 
 export class ChartViewport extends UI.Widget.VBox {
-  private readonly delegate: ChartViewportDelegate;
+  readonly delegate: ChartViewportDelegate;
   viewportElement: HTMLElement;
   #alwaysShowVerticalScroll: boolean;
   private rangeSelectionEnabled: boolean;
@@ -40,7 +40,7 @@ export class ChartViewport extends UI.Widget.VBox {
   private cursorElement: HTMLElement;
   #isDragging!: boolean;
   private totalHeight!: number;
-  private offsetHeight!: number;
+  offsetHeight!: number;
   private scrollTop!: number;
   private rangeSelectionStart: number|null;
   private rangeSelectionEnd: number|null;
@@ -49,7 +49,7 @@ export class ChartViewport extends UI.Widget.VBox {
   private dragStartScrollTop!: number;
   private visibleLeftTime!: number;
   private visibleRightTime!: number;
-  private offsetWidth!: number;
+  offsetWidth!: number;
   private targetLeftTime!: number;
   private targetRightTime!: number;
   private selectionOffsetShiftX!: number;
@@ -156,7 +156,7 @@ export class ChartViewport extends UI.Widget.VBox {
     this.updateContentElementSize();
   }
 
-  private updateContentElementSize(): void {
+  updateContentElementSize(): void {
     let offsetWidth: number = this.vScrollElement.offsetLeft;
     if (!offsetWidth) {
       offsetWidth = this.contentElement.offsetWidth;

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -12,6 +12,7 @@ import type * as NetworkTimeCalculator from '../../../../models/network_time_cal
 import * as Trace from '../../../../models/trace/trace.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as Buttons from '../../../components/buttons/buttons.js';
+import {html, render, type TemplateResult} from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
@@ -40,7 +41,7 @@ const UIStrings = {
    * @example {Main thread} PH2
    *
    */
-  eventSelectedFromGroup: 'Selected a {PH1} event within {PH2}. Press "enter" to focus this event.',
+  eventSelectedFromGroup: 'Selected a {PH1} event within {PH2}. Press enter to focus this event.',
   /**
    * @description Aria accessible name in Flame Chart of the Performance panel
    */
@@ -160,7 +161,7 @@ export const enum HoverType {
 export const enum GroupCollapsibleState {
   ALWAYS = 0,
   NEVER = 1,
-  IF_MULTI_ROW = 2
+  IF_MULTI_ROW = 2,
 }
 
 export interface FlameChartDelegate {
@@ -285,7 +286,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private lastMouseOffsetX: number;
   private selectedGroupIndex: number;
   private keyboardFocusedGroup: number;
-  private offsetWidth!: number;
+  offsetWidth!: number;
   private offsetHeight!: number;
   private dragStartX!: number;
   private dragStartY!: number;
@@ -922,9 +923,9 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     };
   }
 
-  updatePopoverContents(popoverElement: Element): void {
-    this.popoverElement.removeChildren();
-    this.popoverElement.appendChild(popoverElement);
+  updatePopoverContents(popoverElement: Element|TemplateResult): void {
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`${popoverElement}`, this.popoverElement);
     // Must update the offset AFTER the new content has been added.
     this.updatePopoverOffset();
     this.lastPopoverState.entryIndex = -1;
@@ -4379,7 +4380,7 @@ export interface FlameChartDataProvider {
    */
   timelineData(rebuild?: boolean): FlameChartTimelineData|null;
 
-  preparePopoverElement(entryIndex: number): Element|null;
+  preparePopoverElement(entryIndex: number): Element|TemplateResult|null;
 
   preparePopoverForCollapsedArrow?(entryIndex: number): Element|null;
 

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

@@ -11,6 +11,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as Diff from '../../../../third_party/diff/diff.js';
 import {html, nothing, type TemplateResult} from '../../../lit/lit.js';
+import * as SettingsUI from '../../../settings/settings.js';
 import * as UI from '../../legacy.js';
 
 import {FilteredListWidget, Provider, registerProvider} from './FilteredListWidget.js';
@@ -93,14 +94,15 @@ export class CommandMenu {
         featurePromotionId);
   }
 
-  static createSettingCommand<V>(setting: Common.Settings.Setting<V>, title: Common.UIString.LocalizedString, value: V):
-      Command {
-    const category = setting.category();
+  static createSettingCommand<V>(setting: Common.Settings.Setting<V>, title: Common.UIString.LocalizedString, value: V,
+                                 settingUIDescriptor?: SettingsUI.SettingUIRegistration.SettingUIDescriptor): Command {
+    const uiDescriptor = settingUIDescriptor ?? SettingsUI.SettingUIRegistration.maybeResolve(setting.descriptor());
+    const category = uiDescriptor?.category ?? setting.category();
     if (!category) {
       throw new Error(`Creating '${title}' setting command failed. Setting has no category.`);
     }
-    const tags = setting.tags() || '';
-    const reloadRequired = Boolean(setting.reloadRequired());
+    const tags = uiDescriptor?.tags?.map(tag => tag()).join('\0') ?? setting.tags() ?? '';
+    const reloadRequired = Boolean(uiDescriptor?.reloadRequired ?? setting.reloadRequired());
 
     return CommandMenu.createCommand({
       category: Common.Settings.getLocalizedSettingsCategory(category),
@@ -220,15 +222,16 @@ export class CommandMenu {
       this.#commands.push(CommandMenu.createRevealViewCommand(options));
     }
     // Populate allowlisted settings.
-    const settingsRegistrations = Common.Settings.Settings.instance().getRegisteredSettings();
-    for (const settingRegistration of settingsRegistrations) {
-      const options = settingRegistration.options;
-      if (!options || !settingRegistration.category) {
+    const settingsRegistrations = SettingsUI.SettingUIRegistration.getRegisteredSettings();
+    for (const registeredSettingUI of settingsRegistrations) {
+      const options = registeredSettingUI.uiDescriptor.options;
+      if (!options || !registeredSettingUI.uiDescriptor.category) {
         continue;
       }
+      const setting = Common.Settings.Settings.instance().resolve(registeredSettingUI.descriptor);
       for (const pair of options) {
-        const setting = Common.Settings.Settings.instance().moduleSetting(settingRegistration.settingName);
-        this.#commands.push(CommandMenu.createSettingCommand(setting, pair.title(), pair.value));
+        this.#commands.push(
+            CommandMenu.createSettingCommand(setting, pair.title(), pair.value, registeredSettingUI.uiDescriptor));
       }
     }
   }

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

@@ -9,7 +9,7 @@ import {
   FilteredListWidget,
   getRegisteredProviders,
   type Provider,
-  type ProviderRegistration
+  type ProviderRegistration,
 } from './FilteredListWidget.js';
 
 const UIStrings = {

package/front_end/ui/legacy/components/settings_ui/SettingsUI.ts

@@ -11,6 +11,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import {Directives, html, nothing, render, type TemplateResult} from '../../../../ui/lit/lit.js';
 import type * as Settings from '../../../components/settings/settings.js';
+import * as SettingUIRegistration from '../../../settings/settings.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -42,9 +43,16 @@ export function createSettingCheckbox(
 }
 
 export function renderSettingSelect(setting: Common.Settings.Setting<unknown>, subtitle?: string): TemplateResult {
-  const name = setting.title();
-  const options = setting.options();
-  const requiresReload = setting.reloadRequired();
+  const uiDescriptor = SettingUIRegistration.SettingUIRegistration.maybeResolve(setting.descriptor());
+  const name = uiDescriptor?.title?.() ?? setting.title();
+  const options = uiDescriptor?.options?.map(opt => ({
+                                               value: opt.value,
+                                               title: opt.title(),
+                                               text: typeof opt.text === 'function' ? opt.text() : opt.text,
+                                               raw: opt.raw,
+                                             })) ??
+      setting.options();
+  const requiresReload = Boolean(uiDescriptor?.reloadRequired ?? setting.reloadRequired());
   const {deprecation} = setting;
   const controlId = UI.ARIAUtils.nextId('labelledControl');
   const reloadWarningRef = createRef<HTMLParagraphElement>();
@@ -109,13 +117,15 @@ export const renderControlForSetting = function(
   switch (setting.type()) {
     case Common.Settings.SettingType.BOOLEAN: {
       const onchange = (): void => {
-        if (setting.reloadRequired()) {
+        const uiDescriptor = SettingUIRegistration.SettingUIRegistration.maybeResolve(setting.descriptor());
+        const requiresReload = Boolean(uiDescriptor?.reloadRequired ?? setting.reloadRequired());
+        if (requiresReload) {
           UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
               i18nString(UIStrings.settingsChangedReloadDevTools));
         }
       };
       return html`<setting-checkbox .data=${{
-        setting: setting as Common.Settings.Setting<boolean>
+        setting: setting as Common.Settings.Setting<boolean>,
       } as Settings.SettingCheckbox.SettingCheckboxData} @change=${onchange}></setting-checkbox>`;
     }
     case Common.Settings.SettingType.ENUM: {

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -73,7 +73,7 @@ const UIStrings = {
    * @example {allow pasting} PH1
    */
   doNotPaste:
-      'Don’t paste code you do not understand or have not reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Please type “{PH1}” below to allow pasting.',
+      'Don’t paste code you do not understand or have not reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Please type "{PH1}" below to allow pasting.',
   /**
    * @description Text a user needs to type in order to confirm that they are aware of the danger of pasting code into the DevTools console.
    */
@@ -82,13 +82,13 @@ const UIStrings = {
    * @description Input box placeholder which instructs the user to type 'allow pasting' into the input box. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
    * @example {allow pasting} PH1
    */
-  typeAllowPasting: 'Type “{PH1}”',
+  typeAllowPasting: 'Type "{PH1}"',
   /**
    * @description Error message shown when the user tries to open a file that contains non-readable data. "Editor" refers to
    * a text editor.
    */
   binaryContentError:
-      'Editor can’t show binary data. Use the "Response" tab in the "Network" panel to inspect this resource.',
+      'Editor can’t show binary data. Use the Response tab in the Network panel to inspect this resource.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/SourceFrame.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -320,7 +320,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       header: i18nString(UIStrings.doYouTrustThisCode),
       message: i18nString(UIStrings.doNotPaste, {PH1: i18nString(UIStrings.allowPasting)}),
       typePhrase: i18nString(UIStrings.allowPasting),
-      inputPlaceholder: i18nString(UIStrings.typeAllowPasting, {PH1: i18nString(UIStrings.allowPasting)})
+      inputPlaceholder: i18nString(UIStrings.typeAllowPasting, {PH1: i18nString(UIStrings.allowPasting)}),
     });
     if (allowPasting) {
       this.selfXssWarningDisabledSetting.set(true);

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

@@ -91,7 +91,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
   }
 
   #onWorkingCopyChangedOrCommitted({
-    data: {uiSourceCode}
+    data: {uiSourceCode},
   }: Common.EventTarget.EventTargetEvent<{uiSourceCode: Workspace.UISourceCode.UISourceCode}>): void {
     const anchors = anchorsByUISourceCode.get(uiSourceCode);
     if (!anchors) {
@@ -875,6 +875,10 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     LinkHandlerSettingUI.instance().update();
   }
 
+  static isRegisteredLinkHandlerScheme(scheme: string): boolean {
+    return linkHandlers.values().some(r => r.scheme === scheme);
+  }
+
   // The primary filter implementation for the openResourceHandlers. Returns false
   // if the handler is NOT supposed to handle the `url`. Usually, this happens if
   // a handler has registered for a particular `scheme` and the scheme for that url

package/front_end/ui/lit/render.ts

@@ -97,7 +97,7 @@ export function render(template: unknown, container: HTMLElement|DocumentFragmen
             if (currentListener && 'handleEvent' in currentListener) {
               return currentListener.handleEvent(event);
             }
-          }
+          },
         };
         listenersMap.set(name, newEntry);
         host.addEventListener(name, newEntry.wrapper);

package/front_end/ui/settings/SettingUIRegistration.ts

@@ -91,13 +91,18 @@ export function getRegisteredSettings(): readonly RegisteredSettingUI[] {
   return Array.from(combined.values());
 }
 
-export function resolve(settingDescriptor: Common.Settings.SettingDescriptor<unknown>): SettingUIDescriptor {
+export function maybeResolve(settingDescriptor: Common.Settings.SettingDescriptor<unknown>): SettingUIDescriptor|null {
   const settingUI = registeredSettings.get(settingDescriptor.name) ??
       getRegisteredSettings().find(registered => registered.descriptor.name === settingDescriptor.name);
-  if (!settingUI) {
+  return settingUI?.uiDescriptor ?? null;
+}
+
+export function resolve(settingDescriptor: Common.Settings.SettingDescriptor<unknown>): SettingUIDescriptor {
+  const uiDescriptor = maybeResolve(settingDescriptor);
+  if (!uiDescriptor) {
     throw new Error(`No UI descriptor registered for setting '${settingDescriptor.name}'`);
   }
-  return settingUI.uiDescriptor;
+  return uiDescriptor;
 }
 
 export function resetSettings(): void {

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -2308,6 +2308,7 @@ export const knownContextValues = new Set([
   'layers-3d-view',
   'layers-details',
   'layers-show-internal-layers',
+  'layers-tree',
   'layers.3d-center',
   'layers.3d-pan',
   'layers.3d-rotate',
@@ -4097,6 +4098,13 @@ export const knownContextValues = new Set([
   'timeline-save-as-gz',
   'timeline-scope',
   'timeline-screenshot-capture-mode',
+  'timeline-screenshot-capture-mode-100-11250',
+  'timeline-screenshot-capture-mode-1000-100',
+  'timeline-screenshot-capture-mode-250-1800',
+  'timeline-screenshot-capture-mode-500-450',
+  'timeline-screenshot-capture-mode-auto',
+  'timeline-screenshot-capture-mode-manual',
+  'timeline-screenshot-capture-mode-off',
   'timeline-settings-pane',
   'timeline-settings-toggle',
   'timeline-show-all-events',

package/front_end/ui/visual_logging/LoggingEvents.ts

@@ -43,7 +43,7 @@ export const logResize = (loggable: Loggable, size: DOMRect): void => {
   const resizeEvent: Host.InspectorFrontendHostAPI.ResizeEvent = {
     veid: loggingState.veid,
     width: Math.round(loggingState.size.width),
-    height: Math.round(loggingState.size.height)
+    height: Math.round(loggingState.size.height),
   };
   Host.InspectorFrontendHost.InspectorFrontendHostInstance.recordResize(resizeEvent);
   processEventForDebugging('Resize', loggingState, {width: Math.round(size.width), height: Math.round(size.height)});

package/inspector_overlay/main.ts

@@ -11,7 +11,7 @@ import greenDevAnchorsStyle from './tool_green_dev_anchors.css';
 import {
   type GreenDevAnchorsDispatchMessage,
   GreenDevAnchorsOverlay,
-  type GreenDevAnchorsToolMessage
+  type GreenDevAnchorsToolMessage,
 } from './tool_green_dev_anchors.js';
 // @ts-expect-error Importing CSS is handled in Rollup.
 import highlightGridStyle from './tool_grid.css';

package/mcp/mcp.ts

@@ -9,6 +9,7 @@ import '../front_end/core/sdk/sdk-meta.js';
 import '../front_end/models/workspace/workspace-meta.js';
 import '../front_end/models/persistence/persistence-meta.js';
 import '../front_end/models/logs/logs-meta.js';
+import '../front_end/models/badges/badges-meta.js';
 
 /**
  * IMPORTANT! Make sure that any class that is exported here has related unit
@@ -31,10 +32,10 @@ export * as Foundation from '../front_end/foundation/foundation.js';
 export * as Protocol from '../front_end/generated/protocol.js';
 export * as NetworkRequestFormatter from '../front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.js';
 export {
-  PerformanceInsightFormatter
+  PerformanceInsightFormatter,
 } from '../front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.js';
 export {
-  PerformanceTraceFormatter
+  PerformanceTraceFormatter,
 } from '../front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.js';
 export {AgentFocus} from '../front_end/models/ai_assistance/performance/AIContext.js';
 export {DebuggerWorkspaceBinding} from '../front_end/models/bindings/DebuggerWorkspaceBinding.js';
@@ -45,14 +46,14 @@ export {Issue} from '../front_end/models/issues_manager/Issue.js';
 export {
   AggregatedIssue,
   Events as IssueAggregatorEvents,
-  IssueAggregator
+  IssueAggregator,
 } from '../front_end/models/issues_manager/IssueAggregator.js';
 export {
   createIssuesFromProtocolIssue,
   Events as IssuesManagerEvents,
   type EventTypes as IssuesManagerEventTypes,
   isIssueCodeSupported,
-  IssuesManager
+  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';

package/package.json

@@ -37,7 +37,7 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-terser": "1.0.0",
-    "@stylistic/eslint-plugin": "5.5.0",
+    "@stylistic/eslint-plugin": "5.10.0",
     "@types/chai": "5.2.3",
     "@types/codemirror": "5.60.17",
     "@types/emscripten": "1.39.4",
@@ -49,20 +49,20 @@
     "@types/webidl2": "24.4.3",
     "@types/yargs": "17.0.35",
     "@types/yargs-unparser": "2.0.3",
-    "@typescript-eslint/rule-tester": "8.58.0",
-    "@typescript-eslint/utils": "8.58.0",
+    "@typescript-eslint/rule-tester": "8.64.0",
+    "@typescript-eslint/utils": "8.64.0",
     "@web/rollup-plugin-import-meta-assets": "2.3.3",
     "chai": "6.2.2",
     "cssnano": "7.1.2",
     "cssnano-preset-lite": "4.0.4",
     "esbuild": "0.25.1",
-    "eslint": "9.39.1",
-    "eslint-plugin-eslint-plugin": "7.2.0",
+    "eslint": "9.39.5",
+    "eslint-plugin-eslint-plugin": "7.4.2",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jsdoc": "61.2.1",
-    "eslint-plugin-lit": "2.1.1",
+    "eslint-plugin-jsdoc": "63.0.13",
+    "eslint-plugin-lit": "2.3.1",
     "eslint-plugin-mocha": "10.5.0",
-    "globals": "16.5.0",
+    "globals": "17.7.0",
     "js-rouge": "3.2.0",
     "js-yaml": "4.1.1",
     "karma": "6.4.4",
@@ -81,16 +81,16 @@
     "rollup-plugin-sourcemaps2": "0.5.4",
     "sinon": "22.0.0",
     "source-map-support": "0.5.21",
-    "stylelint": "16.25.0",
-    "stylelint-config-standard": "39.0.1",
-    "svgo": "3.3.3",
+    "stylelint": "17.14.0",
+    "stylelint-config-standard": "40.0.0",
+    "svgo": "4.0.2",
     "terser": "5.48.0",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.2",
-    "typescript-eslint": "8.58.0",
+    "typescript-eslint": "8.64.0",
     "uuid": "14.0.0",
     "webidl2": "24.5.0",
     "yargs": "17.7.2"
   },
-  "version": "1.0.1664496"
+  "version": "1.0.1665921"
 }