chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -3,6 +3,7 @@
 // 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 Platform from '../../core/platform/platform.js';
 import * as TextUtils from '../../core/text_utils/text_utils.js';
@@ -14,7 +15,7 @@ import * as uiI18n from '../../ui/i18n/i18n.js';
 import {Icon, Link} from '../../ui/kit/kit.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html} from '../../ui/lit/lit.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelCommon from '../common/common.js';
 import * as Snippets from '../snippets/snippets.js';
@@ -23,6 +24,26 @@ import {SourcesView} from './SourcesView.js';
 import {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 const UIStrings = {
+  /**
+   * @description Text to open a file.
+   */
+  openFile: 'Open file',
+  /**
+   * @description Text to run commands.
+   */
+  runCommand: 'Run command',
+  /**
+   * @description Text in Sources view of the Sources panel.
+   */
+  workspaceDropInAFolderToSyncSources: 'To sync edits to the workspace, drop a folder with your sources here or',
+  /**
+   * @description Text in Sources view of the Sources panel.
+   */
+  selectFolder: 'Select folder',
+  /**
+   * @description Accessible label for Sources placeholder view actions list.
+   */
+  sourceViewActions: 'Source View Actions',
   /**
    * @description Text in Tabbed editor container of the Sources panel.
    * @example {file.js} PH1
@@ -60,26 +81,38 @@ export interface TabbedEditorContainerDelegate {
 
 let tabId = 0;
 
-export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  private readonly delegate: TabbedEditorContainerDelegate;
+export class TabbedEditorContainer extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) {
+  delegate!: TabbedEditorContainerDelegate;
   private readonly tabbedPane: UI.TabbedPane.TabbedPane;
   private tabIds: Map<Workspace.UISourceCode.UISourceCode, string>;
   private readonly files: Map<string, Workspace.UISourceCode.UISourceCode>;
-  private readonly previouslyViewedFilesSetting: Common.Settings.Setting<SerializedHistoryItem[]>;
-  private readonly history: History;
+  #previouslyViewedFilesSetting!: Common.Settings.Setting<SerializedHistoryItem[]>;
+  history!: History;
+  set previouslyViewedFilesSetting(setting: Common.Settings.Setting<SerializedHistoryItem[]>) {
+    this.#previouslyViewedFilesSetting = setting;
+    this.history = History.fromObject(this.#previouslyViewedFilesSetting.get());
+  }
+  get previouslyViewedFilesSetting(): Common.Settings.Setting<SerializedHistoryItem[]> {
+    return this.#previouslyViewedFilesSetting;
+  }
   private readonly uriToUISourceCode: Map<Platform.DevToolsPath.UrlString, Workspace.UISourceCode.UISourceCode>;
   private readonly idToUISourceCode: Map<string, Workspace.UISourceCode.UISourceCode>;
   #currentFile!: Workspace.UISourceCode.UISourceCode|null;
   private currentView!: UI.Widget.Widget|null;
   private scrollTimer?: number;
   private reentrantShow: boolean;
-  constructor(delegate: TabbedEditorContainerDelegate, setting: Common.Settings.Setting<SerializedHistoryItem[]>,
-              placeholderElement: Element, focusedPlaceholderElement?: Element, element?: HTMLElement) {
-    super();
-    this.delegate = delegate;
-
-    this.tabbedPane = new UI.TabbedPane.TabbedPane(element);
-    this.tabbedPane.setPlaceholderElement(placeholderElement, focusedPlaceholderElement);
+  constructor(element?: HTMLElement) {
+    super(element);
+
+    this.tabbedPane = new UI.TabbedPane.TabbedPane();
+    // eslint-disable-next-line @devtools/no-imperative-dom-api
+    this.tabbedPane.show(this.contentElement);
+    // eslint-disable-next-line @devtools/no-imperative-dom-api
+    const placeholderElement = document.createElement('div');
+    placeholderElement.classList.add('sources-placeholder');
+    this.tabbedPane.setPlaceholderElement(placeholderElement);
+    this.#renderPlaceholder(placeholderElement as HTMLElement);
     this.tabbedPane.setTabDelegate(new EditorContainerTabDelegate(this));
 
     this.tabbedPane.setCloseableTabs(true);
@@ -103,13 +136,15 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     this.tabIds = new Map();
     this.files = new Map();
 
-    this.previouslyViewedFilesSetting = setting;
-    this.history = History.fromObject(this.previouslyViewedFilesSetting.get());
     this.uriToUISourceCode = new Map();
     this.idToUISourceCode = new Map();
     this.reentrantShow = false;
   }
 
+  get tabbedPaneForTesting(): UI.TabbedPane.TabbedPane {
+    return this.tabbedPane;
+  }
+
   private onBindingCreated(event: Common.EventTarget.EventTargetEvent<Persistence.Persistence.PersistenceBinding>):
       void {
     const binding = event.data;
@@ -160,10 +195,6 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     this.updateFileTitle(binding.fileSystem);
   }
 
-  get view(): UI.Widget.Widget {
-    return this.tabbedPane;
-  }
-
   get visibleView(): UI.Widget.Widget|null {
     return this.tabbedPane.visibleView as UI.Widget.Widget | null;
   }
@@ -180,10 +211,6 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     return this.tabbedPane.rightToolbar();
   }
 
-  show(parentElement: Element): void {
-    this.tabbedPane.show(parentElement);
-  }
-
   showFile(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
     const binding = Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
     uiSourceCode = binding ? binding.fileSystem : uiSourceCode;
@@ -194,7 +221,8 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     // Otherwise, this event will fire as soon as the content has been set.
     if (frame?.currentSourceFrame()?.contentSet && this.#currentFile === uiSourceCode &&
         frame?.currentUISourceCode() === uiSourceCode) {
-      Common.EventTarget.fireEvent('source-file-loaded', uiSourceCode.displayName(true));
+      window.dispatchEvent(new CustomEvent('source-file-loaded',
+                                           {bubbles: true, cancelable: true, detail: uiSourceCode.displayName(true)}));
     } else {
       this.#showFile(uiSourceCode, true);
     }
@@ -212,6 +240,10 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     this.closeTabs(this.tabbedPane.tabIds());
   }
 
+  detachEditors(): void {
+    this.tabbedPane.detachChildWidgets();
+  }
+
   historyUISourceCodes(): Workspace.UISourceCode.UISourceCode[] {
     const result = [];
     for (const {url, resourceType} of this.history.keys()) {
@@ -690,6 +722,69 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     return 'tab-' + (tabId++) as Lowercase<string>;
   }
 
+  #renderPlaceholder(placeholderElement: HTMLElement): void {
+    const shortcuts = [
+      {actionId: 'quick-open.show', description: i18nString(UIStrings.openFile)},
+      {actionId: 'quick-open.show-command-menu', description: i18nString(UIStrings.runCommand)},
+    ];
+    const separator = Host.Platform.isMac() ? '\u2004' : ' + ';
+    const shortcutElements = shortcuts.map(shortcut => {
+      const shortcutKeys = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(shortcut.actionId);
+      if (!shortcutKeys?.[0]) {
+        return {
+          description: shortcut.description,
+          onClick: () => {},
+          keys: [],
+        };
+      }
+      const action = UI.ActionRegistry.ActionRegistry.instance().getAction(shortcut.actionId);
+      const keys = shortcutKeys[0].descriptors.flatMap(descriptor => descriptor.name.split(separator));
+      return {
+        description: shortcut.description,
+        onClick: () => {
+          void action.execute();
+        },
+        keys,
+      };
+    });
+
+    // clang-format off
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`
+    <div class="tabbed-pane-placeholder-row workspace">
+      <span class="icon-container">
+        <devtools-icon name="sync" class="sync-icon"></devtools-icon>
+      </span>
+      <span>
+        ${i18nString(UIStrings.workspaceDropInAFolderToSyncSources)}
+        <button @click=${this.#addFileSystemClicked.bind(this)}>${i18nString(UIStrings.selectFolder)}</button>
+      </span>
+    </div>
+    <div class="shortcuts-list tabbed-pane-placeholder-row" role="list"
+         aria-label=${i18nString(UIStrings.sourceViewActions)}>
+      ${shortcutElements.map(shortcut => !shortcut.keys.length
+          ? html`<div class="shortcut-line" role="listitem"></div>`
+          : html`<div class="shortcut-line" role="listitem">
+            <button @click=${shortcut.onClick}>${shortcut.description}</button>
+            <span class="shortcuts">
+              ${shortcut.keys.map(key => html`
+                <span class="keybinds-key"><span>${key}</span></span>
+              `)}
+            </span>
+          </div>`)}
+    </div>`, placeholderElement);
+    // clang-format on
+  }
+
+  async #addFileSystemClicked(): Promise<void> {
+    const result = await Persistence.IsolatedFileSystemManager.IsolatedFileSystemManager.instance().addFileSystem();
+    if (!result) {
+      return;
+    }
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.WorkspaceSelectFolder);
+    void UI.ViewManager.ViewManager.instance().showView('navigator-files');
+  }
+
   currentFile(): Workspace.UISourceCode.UISourceCode|null {
     return this.#currentFile || null;
   }

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -171,9 +171,8 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
     this.installMessageAndDecorationListeners();
     this.updateStyle();
     // Show pretty-print toggle if file type is formattable.
-    // For editable JavaScript files, the toggle is hidden because live edit fails on
-    // large whitespace changes. For non-JS files (JSON, CSS), the toggle can be shown
-    // because they don't have this issue (fixes issue 378870233).
+    // For editable JavaScript files, the toggle is hidden. For non-JS files (JSON, CSS), the toggle can be shown
+    // (fixes issue 378870233).
     const isFormattable = FormatterActions.FORMATTABLE_MEDIA_TYPES.includes(this.contentType);
     const isEditable = Persistence.Persistence.PersistenceImpl.instance().hasEditableContent(this.#uiSourceCode);
     // Check if the MIME type is JavaScript (not the resource type, which can be wrong for file system files)
@@ -231,11 +230,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
         Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().active()) {
       return true;
     }
-    // Because live edit fails on large whitespace changes, pretty printed scripts are not editable.
-    if (this.pretty && this.#uiSourceCode.contentType().hasScripts()) {
-      return false;
-    }
-    return this.#uiSourceCode.contentType() !== Common.ResourceType.resourceTypes.Document;
+    return this.#uiSourceCode.contentType().isStyleSheet();
   }
 
   private onNetworkPersistenceChanged(): void {
@@ -260,7 +255,8 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
       plugin.editorInitialized(this.textEditor);
     }
     this.#recordSourcesPanelOpenedMetrics();
-    Common.EventTarget.fireEvent('source-file-loaded', this.#uiSourceCode.displayName(true));
+    window.dispatchEvent(new CustomEvent(
+        'source-file-loaded', {bubbles: true, cancelable: true, detail: this.#uiSourceCode.displayName(true)}));
   }
 
   private createMessage(origin: Workspace.UISourceCode.Message): RowMessage {

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -195,8 +195,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                     class="watch-expression-error value"
                     title=${ifDefined(e.exceptionDetails?.exception?.description)}
                     >${i18nString(UIStrings.notAvailable)}</span>`
-                  : ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValueWithCustomSupport(
-                    e.result.object, Boolean(e.exceptionDetails), false /* showPreview */, input.linkifier)}
+                  : ObjectUI.ObjectPropertiesSection.renderPropertyValue(
+                    e.result.object, Boolean(e.exceptionDetails), false /* showPreview */, input.linkifier,
+                    false /* isSyntheticProperty */, undefined /* variableName */,
+                    undefined /* includeNullOrUndefined */, /* useCustomPreview */ true)}
             </div>
           </div>
         </devtools-prompt>

package/front_end/panels/sources/sources-meta.ts

@@ -18,6 +18,26 @@ import * as SettingsUI from '../../ui/settings/settings.js';
 import type * as Sources from './sources.js';
 
 const UIStrings = {
+  /**
+   * @description Title of a setting under the Debugger category in Settings.
+   */
+  disableAsyncStackTraces: 'Disable async stack traces',
+  /**
+   * @description Title of a setting under the Debugger category that can be invoked through the Command Menu.
+   */
+  doNotCaptureAsyncStackTraces: 'Do not capture async stack traces',
+  /**
+   * @description Title of a setting under the Debugger category that can be invoked through the Command Menu.
+   */
+  captureAsyncStackTraces: 'Capture async stack traces',
+  /**
+   * @description Title of a setting under the Debugger category that can be invoked through the Command Menu.
+   */
+  disableJavascript: 'Disable JavaScript',
+  /**
+   * @description Title of a setting under the Debugger category that can be invoked through the Command Menu.
+   */
+  enableJavascript: 'Enable JavaScript',
   /**
    * @description Text for pausing the debugger on exceptions.
    */
@@ -1591,6 +1611,38 @@ SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.cssSourceMapsEnabledSe
   ],
 });
 
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.javaScriptDisabledSettingDescriptor, {
+  category: Common.Settings.SettingCategory.DEBUGGER,
+  title: i18nLazyString(UIStrings.disableJavascript),
+  order: 1,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.disableJavascript),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.enableJavascript),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.disableAsyncStackTracesSettingDescriptor, {
+  category: Common.Settings.SettingCategory.DEBUGGER,
+  title: i18nLazyString(UIStrings.disableAsyncStackTraces),
+  order: 2,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.doNotCaptureAsyncStackTraces),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.captureAsyncStackTraces),
+    },
+  ],
+});
+
 SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.pauseOnExceptionEnabledSettingDescriptor, {
   category: Common.Settings.SettingCategory.DEBUGGER,
   options: [

package/front_end/panels/timeline/TimelineController.ts

@@ -205,10 +205,6 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
   }
 
   async startRecording(options: RecordingOptions): Promise<void> {
-    function disabledByDefault(category: string): string {
-      return 'disabled-by-default-' + category;
-    }
-
     this.client.recordingStatus(i18nString(UIStrings.initializingTracing));
 
     // If we are doing "Reload & record", we first navigate the page to
@@ -220,51 +216,9 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
       await this.#navigateToAboutBlank();
     }
 
-    // The following categories are also used in other tools, but this panel
-    // offers the possibility of turning them off (see below).
-    // 'disabled-by-default-devtools.screenshot'
-    //   └ default: on, option: captureFilmStrip
-    // 'disabled-by-default-devtools.timeline.invalidationTracking'
-    //   └ default: off, experiment: timelineInvalidationTracking
-    // 'disabled-by-default-v8.cpu_profiler'
-    //   └ default: on, option: enableJSSampling
-    const categoriesArray = [
-      Common.Settings.Settings.instance().moduleSetting('timeline-show-all-events').get() ? '*' : '-*',
-      Trace.Types.Events.Categories.Console,
-      Trace.Types.Events.Categories.Loading,
-      Trace.Types.Events.Categories.UserTiming,
-      'devtools.timeline',
-      disabledByDefault('devtools.target-rundown'),
-      disabledByDefault('devtools.timeline.frame'),
-      disabledByDefault('devtools.timeline.stack'),
-      disabledByDefault('devtools.timeline'),
-      disabledByDefault('devtools.v8-source-rundown-sources'),
-      disabledByDefault('devtools.v8-source-rundown'),
-      disabledByDefault('layout_shift.debug'),
-      // Looking for disabled-by-default-v8.compile? We disabled it: crbug.com/414330508.
-      disabledByDefault('v8.inspector'),
-      disabledByDefault('v8.cpu_profiler.hires'),
-      disabledByDefault('lighthouse'),
-      'v8.execute',
-      'v8',
-      'cppgc',
-      'navigation,rail',
-    ];
-
-    if (options.enableJSSampling) {
-      categoriesArray.push(disabledByDefault('v8.cpu_profiler'));
-    }
-    if (Common.Settings.Settings.instance().moduleSetting('timeline-invalidation-tracking').get() as boolean) {
-      categoriesArray.push(disabledByDefault('devtools.timeline.invalidationTracking'));
-    }
-    if (options.capturePictures) {
-      categoriesArray.push(
-          disabledByDefault('devtools.timeline.layers'), disabledByDefault('devtools.timeline.picture'),
-          disabledByDefault('blink.graphics_context_annotations'));
-    }
+    const categoriesArray = this.#categoriesForRecording(options);
     const screenshotOptions: Tracing.TracingManager.TracingStartOptions = {};
     if (options.captureFilmStrip) {
-      categoriesArray.push(disabledByDefault('devtools.screenshot'));
       if (options.screenshotMaxSize !== undefined) {
         screenshotOptions.screenshotMaxSize = options.screenshotMaxSize;
       }
@@ -272,17 +226,12 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
         screenshotOptions.screenshotMaxCount = options.screenshotMaxCount;
       }
     }
-    if (options.captureSelectorStats) {
-      categoriesArray.push(disabledByDefault('blink.debug'));
-      // enable invalidation nodes
-      categoriesArray.push(disabledByDefault('devtools.timeline.invalidationTracking'));
-    }
 
     await LiveMetrics.LiveMetrics.instance().disable();
 
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this.#onFrameNavigated,
-        this);
+    SDK.TargetManager.TargetManager.instance().addModelListener(SDK.ResourceTreeModel.ResourceTreeModel,
+                                                                SDK.ResourceTreeModel.Events.FrameNavigated,
+                                                                this.#onFrameNavigated, this);
 
     this.#navigationUrls = [];
     this.#fieldData = null;
@@ -311,9 +260,8 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
 
     const loadEvent = this.#navigateWithSDK(options.navigateToUrl);
     this.#statusChecker.add(i18nString(UIStrings.waitingForLoadEvent), loadEvent);
-    this.#statusChecker.add(
-        i18nString(UIStrings.waitingForLoadEventPlus5Seconds),
-        loadEvent.then(() => new Promise(resolve => setTimeout(resolve, 5000))));
+    this.#statusChecker.add(i18nString(UIStrings.waitingForLoadEventPlus5Seconds),
+                            loadEvent.then(() => new Promise(resolve => setTimeout(resolve, 5000))));
 
     this.#statusChecker.setListener(status => {
       if (status === null) {
@@ -352,9 +300,9 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
       this.tracingManager.stop();
     }
 
-    SDK.TargetManager.TargetManager.instance().removeModelListener(
-        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this.#onFrameNavigated,
-        this);
+    SDK.TargetManager.TargetManager.instance().removeModelListener(SDK.ResourceTreeModel.ResourceTreeModel,
+                                                                   SDK.ResourceTreeModel.Events.FrameNavigated,
+                                                                   this.#onFrameNavigated, this);
     SDK.TargetManager.TargetManager.instance().removeModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.Load, this.#onLoadEventFired, this);
 
@@ -475,6 +423,30 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
   eventsRetrievalProgress(progress: number): void {
     this.client.loadingProgress(progress);
   }
+
+  #categoriesForRecording(options: RecordingOptions): string[] {
+    const categoriesArray = [
+      Common.Settings.Settings.instance().moduleSetting('timeline-show-all-events').get() ? '*' : '-*',
+      ...Trace.Types.Events.DefaultCategories,
+    ];
+
+    if (options.enableJSSampling) {
+      categoriesArray.push(...Trace.Types.Events.OptionalCategories.JsSampling);
+    }
+    if (Common.Settings.Settings.instance().moduleSetting('timeline-invalidation-tracking').get() as boolean) {
+      categoriesArray.push(...Trace.Types.Events.OptionalCategories.InvalidationTracking);
+    }
+    if (options.capturePictures) {
+      categoriesArray.push(...Trace.Types.Events.OptionalCategories.AdvancedPaint);
+    }
+    if (options.captureFilmStrip) {
+      categoriesArray.push(...Trace.Types.Events.OptionalCategories.Screenshot);
+    }
+    if (options.captureSelectorStats) {
+      categoriesArray.push(...Trace.Types.Events.OptionalCategories.CssSelectorStats);
+    }
+    return categoriesArray;
+  }
 }
 
 export interface Client {
@@ -483,9 +455,9 @@ export interface Client {
   loadingStarted(): void;
   processingStarted(): void;
   loadingProgress(progress?: number): void;
-  loadingComplete(
-      collectedEvents: Trace.Types.Events.Event[], exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null,
-      metadata: Trace.Types.File.MetaData|null): Promise<void>;
+  loadingComplete(collectedEvents: Trace.Types.Events.Event[],
+                  exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null,
+                  metadata: Trace.Types.File.MetaData|null): Promise<void>;
   loadingCompleteForTest(): void;
 }
 export interface RecordingOptions {

package/front_end/panels/timeline/TimelinePanel.ts

@@ -58,6 +58,7 @@ import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
+import * as SettingUIRegistration from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 
@@ -1326,8 +1327,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         MobileThrottling.CPUThrottlingSelector.CPUThrottlingSelector.createForGlobalConditions(cpuThrottlingPane);
 
     this.settingsPane.append(SettingsUI.SettingsUI.createSettingCheckbox(
-        this.captureSelectorStatsSetting.title(), this.captureSelectorStatsSetting,
-        i18nString(UIStrings.capturesSelectorStats)));
+        SettingUIRegistration.SettingUIRegistration.resolve(this.captureSelectorStatsSetting.descriptor()).title,
+        this.captureSelectorStatsSetting, i18nString(UIStrings.capturesSelectorStats)));
 
     const networkThrottlingPane = this.settingsPane.createChild('div');
     networkThrottlingPane.append(i18nString(UIStrings.network));
@@ -1337,17 +1338,18 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     );
 
     this.settingsPane.append(SettingsUI.SettingsUI.createSettingCheckbox(
-        this.captureLayersAndPicturesSetting.title(), this.captureLayersAndPicturesSetting,
-        i18nString(UIStrings.capturesAdvancedPaint)));
+        SettingUIRegistration.SettingUIRegistration.resolve(this.captureLayersAndPicturesSetting.descriptor()).title,
+        this.captureLayersAndPicturesSetting, i18nString(UIStrings.capturesAdvancedPaint)));
 
     this.settingsPane.append(SettingsUI.SettingsUI.createSettingCheckbox(
-        this.disableCaptureJSProfileSetting.title(), this.disableCaptureJSProfileSetting,
-        i18nString(UIStrings.disablesJavascriptSampling)));
+        SettingUIRegistration.SettingUIRegistration.resolve(this.disableCaptureJSProfileSetting.descriptor()).title,
+        this.disableCaptureJSProfileSetting, i18nString(UIStrings.disablesJavascriptSampling)));
 
     const screenshotPresetSelect = new UI.Toolbar.ToolbarComboBox(
         () =>
             this.screenshotCaptureModeSetting.set((screenshotPresetSelect.selectedOption() as HTMLOptionElement).value),
-        this.screenshotCaptureModeSetting.title(), '', 'screenshot-capture-mode');
+        SettingUIRegistration.SettingUIRegistration.resolve(this.screenshotCaptureModeSetting.descriptor()).title, '',
+        'screenshot-capture-mode');
     let selectedScreenshotPresetIndex = 0;
     for (let i = 0; i < SCREENSHOT_CAPTURE_PRESETS.length; ++i) {
       const preset = SCREENSHOT_CAPTURE_PRESETS[i];
@@ -1359,7 +1361,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
     screenshotPresetSelect.setSelectedIndex(selectedScreenshotPresetIndex);
     const screenshotPresetPane = this.settingsPane.createChild('div');
-    screenshotPresetPane.append(this.screenshotCaptureModeSetting.title());
+    screenshotPresetPane.append(
+        SettingUIRegistration.SettingUIRegistration.resolve(this.screenshotCaptureModeSetting.descriptor()).title);
     screenshotPresetPane.append(screenshotPresetSelect.element);
     // Surface the dropdown only when the "Screenshots" checkbox is on, since the
     // preset only affects the screenshots captured during the recording.

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -61,6 +61,7 @@ import * as LegacyComponents from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import {html, render} from '../../ui/lit/lit.js';
+import * as SettingUIRegistration from '../../ui/settings/settings.js';
 import * as PanelsCommon from '../common/common.js';
 
 import {getDurationString} from './AppenderUtils.js';
@@ -1278,10 +1279,12 @@ export class TimelineUIUtils {
         contentHelper.appendTextRow(i18nString(UIStrings.elementsAffected), unsafeEventArgs['elementCount']);
 
         const selectorStatsSetting =
-            Common.Settings.Settings.instance().createSetting('timeline-capture-selector-stats', false);
+            Common.Settings.Settings.instance().moduleSetting('timeline-capture-selector-stats');
         if (!selectorStatsSetting.get()) {
           const note = document.createElement('span');
-          note.textContent = i18nString(UIStrings.sSelectorStatsInfo, {PH1: selectorStatsSetting.title()});
+          note.textContent = i18nString(UIStrings.sSelectorStatsInfo, {
+            PH1: SettingUIRegistration.SettingUIRegistration.resolve(selectorStatsSetting.descriptor()).title,
+          });
           contentHelper.appendElementRow(i18nString(UIStrings.selectorStatsTitle), note);
         }
 

package/front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -14,13 +14,13 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as Root from '../../../../core/root/root.js';
 import * as AiAssistanceModels from '../../../../models/ai_assistance/ai_assistance.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
+import * as Dialogs from '../../../../ui/components/dialogs/dialogs.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as UIHelpers from '../../../../ui/helpers/helpers.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../../../ui/legacy/theme_support/theme_support.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
-import * as PanelCommon from '../../../common/common.js';
 
 import entryLabelOverlayStyles from './entryLabelOverlay.css.js';
 
@@ -568,7 +568,7 @@ export class EntryLabelOverlay extends HTMLElement {
    */
   async #showUserAiFirstRunDialog(): Promise<boolean> {
     this.dispatchEvent(new LabelAnnotationsConsentDialogVisibilityChange(true));
-    const userConsented = await PanelCommon.FreDialog.show({
+    const userConsented = await Dialogs.FreDialog.FreDialog.show({
       ariaLabel: i18nString(UIStrings.freDialog),
       header: {iconName: 'pen-spark', text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
       reminderItems: [

package/front_end/panels/timeline/timelinePanel.css

@@ -151,16 +151,6 @@
   justify-content: space-between;
 }
 
-#memory-graphs-container .timeline-memory-header::after {
-  content: "";
-  /* stylelint-disable-next-line custom-property-pattern */
-  background-image: var(--image-file-toolbarResizerVertical);
-  background-repeat: no-repeat;
-  background-position: right center, center;
-  flex: 20px 0 0;
-  margin: 0 4px;
-}
-
 .timeline-memory-toolbar {
   flex-shrink: 1;
 }

package/front_end/panels/utils/utils.ts

@@ -21,35 +21,35 @@ const {ref, styleMap, ifDefined} = Directives;
 
 const UIStrings = {
   /**
-   * @description Tooltip to explain the resource's overridden status
+   * @description Tooltip to explain the resource's overridden status.
    */
   requestContentHeadersOverridden: 'Both request content and headers are overridden',
   /**
-   * @description Tooltip to explain the resource's overridden status
+   * @description Tooltip to explain the resource's overridden status.
    */
   requestContentOverridden: 'Request content is overridden',
   /**
-   * @description Tooltip to explain the resource's overridden status
+   * @description Tooltip to explain the resource's overridden status.
    */
   requestHeadersOverridden: 'Request headers are overridden',
   /**
-   * @description Tooltip to explain why the request has warning icon
+   * @description Tooltip to explain why the request has a warning icon.
    */
   thirdPartyPhaseout:
       'Cookies for this request are blocked either because of Chrome flags or browser configuration. Learn more in the Issues panel.',
   /**
-   * @description Tooltip to explain that a request was throttled
+   * @description Tooltip to explain that a request was throttled.
    * @example {Image} PH1
    * @example {3G} PH2
    */
   resourceTypeWithThrottling: '{PH1} (throttled to {PH2})',
   /**
-   * @description Tooltip for a failed request
+   * @description Tooltip for a failed request.
    * @example {Document} PH1
    */
   requestFailed: '{PH1} request failed',
   /**
-   * @description Tooltip for a failed request
+   * @description Tooltip for a failed prefetch request.
    * @example {Document} PH1
    */
   prefetchFailed: '{PH1} prefetch request failed',