chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/panels/settings/SettingsScreen.ts

@@ -18,6 +18,7 @@ import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
+import * as SettingUIRegistration from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {PanelUtils} from '../utils/utils.js';
 
@@ -254,24 +255,27 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
     ];
 
     // Some settings define their initial ordering.
-    const preRegisteredSettings = Common.Settings.Settings.instance().getRegisteredSettings().sort(
-        (firstSetting, secondSetting) => {
-          if (firstSetting.order && secondSetting.order) {
-            return (firstSetting.order - secondSetting.order);
-          }
-          if (firstSetting.order) {
-            return -1;
-          }
-          if (secondSetting.order) {
-            return 1;
-          }
-          return 0;
-        },
-    );
+    const preRegisteredSettings = Array.from(SettingUIRegistration.SettingUIRegistration.getRegisteredSettings())
+                                      .sort(
+                                          (firstSetting, secondSetting) => {
+                                            const firstOrder = firstSetting.uiDescriptor.order;
+                                            const secondOrder = secondSetting.uiDescriptor.order;
+                                            if (firstOrder !== undefined && secondOrder !== undefined) {
+                                              return (firstOrder - secondOrder);
+                                            }
+                                            if (firstOrder) {
+                                              return -1;
+                                            }
+                                            if (secondOrder) {
+                                              return 1;
+                                            }
+                                            return 0;
+                                          },
+                                      );
 
     for (const sectionCategory of explicitSectionOrder) {
-      const settingsForSection = preRegisteredSettings.filter(setting => setting.category === sectionCategory &&
-                                                                  GenericSettingsTab.isSettingVisible(setting));
+      const settingsForSection = preRegisteredSettings.filter(
+          setting => setting.uiDescriptor.category === sectionCategory && GenericSettingsTab.isSettingVisible(setting));
       this.createSectionElement(sectionCategory, settingsForSection);
     }
 
@@ -286,8 +290,8 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
     }
   }
 
-  static isSettingVisible(setting: Common.Settings.SettingRegistration): boolean {
-    return Boolean(setting.title?.()) && Boolean(setting.category);
+  static isSettingVisible(setting: SettingUIRegistration.SettingUIRegistration.RegisteredSettingUI): boolean {
+    return Boolean(setting.uiDescriptor.title?.()) && Boolean(setting.uiDescriptor.category);
   }
 
   override wasShown(): void {
@@ -322,7 +326,7 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
             });
   }
 
-  private createExtensionSection(settings: Common.Settings.SettingRegistration[]): void {
+  private createExtensionSection(settings: SettingUIRegistration.SettingUIRegistration.RegisteredSettingUI[]): void {
     const sectionName = Common.Settings.SettingCategory.EXTENSIONS;
     const settingUI = Components.Linkifier.LinkHandlerSettingUI.instance();
     const element = settingUI.settingElement();
@@ -330,7 +334,7 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
   }
 
   private createSectionElement(category: Common.Settings.SettingCategory,
-                               settings: Common.Settings.SettingRegistration[]): void {
+                               settings: SettingUIRegistration.SettingUIRegistration.RegisteredSettingUI[]): void {
     // Always create the EXTENSIONS section and append the link handling control.
     if (category === Common.Settings.SettingCategory.EXTENSIONS) {
       this.createExtensionSection(settings);
@@ -345,11 +349,12 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
   }
 
   private createStandardSectionElement(category: Common.Settings.SettingCategory,
-                                       settings: Common.Settings.SettingRegistration[], content?: Element): void {
+                                       settings: SettingUIRegistration.SettingUIRegistration.RegisteredSettingUI[],
+                                       content?: Element): void {
     const uiSectionName = Common.Settings.getLocalizedSettingsCategory(category);
     const sectionElement = document.createElement('div');
     for (const settingRegistration of settings) {
-      const setting = Common.Settings.Settings.instance().moduleSetting(settingRegistration.settingName);
+      const setting = Common.Settings.Settings.instance().resolve(settingRegistration.descriptor);
       const settingControl = SettingsUI.SettingsUI.createControlForSetting(setting);
       if (settingControl) {
         this.settingToControl.set(setting, settingControl);
@@ -552,11 +557,11 @@ export class Revealer implements
       return;
     }
 
-    for (const settingRegistration of Common.Settings.Settings.instance().getRegisteredSettings()) {
+    for (const settingRegistration of SettingUIRegistration.SettingUIRegistration.getRegisteredSettings()) {
       if (!GenericSettingsTab.isSettingVisible(settingRegistration)) {
         continue;
       }
-      if (settingRegistration.settingName === object.name) {
+      if (settingRegistration.descriptor.name === object.name) {
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
         await SettingsScreen.showSettingsScreen();
         const genericSettingsTab = context.flavor(GenericSettingsTab);

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -236,7 +236,7 @@ const DEFAULT_METADATA = {
   architecture: '',
   model: '',
   mobile: false,
-  formFactors: []
+  formFactors: [],
 };
 
 export const ALL_PROTOCOL_FORM_FACTORS: string[] = [
@@ -797,7 +797,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
             .checked=${isChecked}
             value=${ffValue}
             jslog=${VisualLogging.toggle(Platform.StringUtilities.toKebabCase(ffValue)).track({
-        click: true
+        click: true,
       })}
             @change=${
           (e: Event) => this.#handleFormFactorCheckboxChange(ffValue, (e.target as HTMLInputElement).checked)}

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -43,7 +43,7 @@ export class AiCodeCompletionPlugin extends Plugin {
           included_reason: Host.AidaClient.Reason.RELATED_FILE,
         }] :
                                                                             undefined,
-        inferenceLanguage: this.#getInferenceLanguage()
+        inferenceLanguage: this.#getInferenceLanguage(),
       },
       generationContext: {
         additionalPreambleContext: this.uiSourceCode.url().startsWith('snippet://') ?
@@ -81,7 +81,7 @@ export class AiCodeCompletionPlugin extends Plugin {
     this.#aiCodeCompletionProvider.editorInitialized(editor);
     this.#editor.editor.dispatch({
       effects: TextEditor.AiCodeCompletionProvider.setAiCodeCompletionTeaserMode.of(
-          TextEditor.AiCodeCompletionProvider.AiCodeCompletionTeaserMode.ON)
+          TextEditor.AiCodeCompletionProvider.AiCodeCompletionTeaserMode.ON),
     });
   }
 
@@ -117,7 +117,7 @@ export class AiCodeCompletionPlugin extends Plugin {
         new PanelCommon.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar({
           citationsTooltipId: CITATIONS_TOOLTIP_ID,
           hasTopBorder: true,
-          panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES
+          panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES,
         });
     this.#aiCodeCompletionCitationsToolbar.show(this.#aiCodeCompletionCitationsToolbarContainer, undefined, true);
   }
@@ -126,7 +126,7 @@ export class AiCodeCompletionPlugin extends Plugin {
     if (this.#editor) {
       this.#editor.dispatch({
         effects: SourceFrame.SourceFrame.addSourceFrameInfobar.of(
-            {element: this.#aiCodeCompletionCitationsToolbarContainer, order: 100})
+            {element: this.#aiCodeCompletionCitationsToolbarContainer, order: 100}),
       });
       this.#aiCodeCompletionCitationsToolbarAttached = true;
     }
@@ -137,7 +137,7 @@ export class AiCodeCompletionPlugin extends Plugin {
     if (this.#editor) {
       this.#editor.dispatch({
         effects: SourceFrame.SourceFrame.removeSourceFrameInfobar.of(
-            {element: this.#aiCodeCompletionCitationsToolbarContainer})
+            {element: this.#aiCodeCompletionCitationsToolbarContainer}),
       });
       this.#aiCodeCompletionCitationsToolbarAttached = false;
     }

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -229,7 +229,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
       },
       set editor(editor) {
         that.#editor = editor;
-      }
+      },
     };
     this.#view(input, output, this.contentElement);
   }
@@ -279,7 +279,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
         run: () => {
           this.finishEditing(false, '');
           return true;
-        }
+        },
       },
     ];
 

package/front_end/panels/sources/BreakpointsView.ts

@@ -575,7 +575,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                           .checked=${group.breakpointItems.some(item => item.status === BreakpointStatus.ENABLED)}
                           @change=${input.groupCheckboxToggled.bind(undefined, group)}
                           tabindex=-1
-                          jslog=${VisualLogging.toggle('breakpoint-group').track({change: true,})}>
+                          jslog=${VisualLogging.toggle('breakpoint-group').track({change: true})}>
                   </span>
                   <span class='group-header-title' title=${group.url}>
                     ${group.name}

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -562,12 +562,12 @@ export function convertMissingDebugInfo(
     case StackTrace.StackTrace.MissingDebugInfoType.PARTIAL_INFO:
       return {
         details: i18nString(UIStrings.debugSymbolsIncomplete, {PH1: functionName ?? ''}),
-        resources: missingDebugInfo.missingDebugFiles
+        resources: missingDebugInfo.missingDebugFiles,
       };
     case StackTrace.StackTrace.MissingDebugInfoType.NO_INFO:
       return {
         details: i18nString(UIStrings.failedToLoadDebugSymbolsForFunction, {PH1: functionName ?? ''}),
-        resources: []
+        resources: [],
       };
   }
 }

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -173,8 +173,8 @@ const DEFAULT_VIEW = (input: ViewInput|null, _output: undefined, target: Documen
     </div>`, target, {
         container: {
           attributes: {jslog: `${VisualLogging.dialog('debugger-paused')}`},
-          classes: ['paused-message', 'flex-none']
-        }
+          classes: ['paused-message', 'flex-none'],
+        },
       });
   // clang-format on
 };

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -133,7 +133,7 @@ const UIStrings = {
    * @example {http://site.com/lib.js.map} PH1
    * @example {HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME} PH2
    */
-  errorLoading: 'Error loading url {PH1}: {PH2}',
+  errorLoading: 'Error loading URL {PH1}: {PH2}',
   /**
    * @description Error message that is displayed in UI when a file needed for debugging information for a call frame is missing
    * @example {src/myapp.debug.wasm.dwp} PH1
@@ -403,25 +403,25 @@ export class DebuggerPlugin extends Plugin {
       Workspace.IgnoreListManager.IgnoreListManager.instance().unIgnoreListUISourceCode(uiSourceCode);
     }
 
-    const infobar = new UI.Infobar.Infobar(
-        UI.Infobar.Type.WARNING, i18nString(UIStrings.thisScriptIsOnTheDebuggersIgnore),
-        [
-          {
-            text: i18nString(UIStrings.configure),
-            delegate:
-                UI.ViewManager.ViewManager.instance().showView.bind(UI.ViewManager.ViewManager.instance(), 'blackbox'),
-            dismiss: false,
-            jslogContext: 'configure',
-          },
-          {
-            text: i18nString(UIStrings.removeFromIgnoreList),
-            delegate: unIgnoreList,
-            buttonVariant: Buttons.Button.Variant.TONAL,
-            dismiss: true,
-            jslogContext: 'remove-from-ignore-list',
-          }
-        ],
-        undefined, 'script-on-ignore-list');
+    const infobar =
+        new UI.Infobar.Infobar(UI.Infobar.Type.WARNING, i18nString(UIStrings.thisScriptIsOnTheDebuggersIgnore),
+                               [
+                                 {
+                                   text: i18nString(UIStrings.configure),
+                                   delegate: UI.ViewManager.ViewManager.instance().showView.bind(
+                                       UI.ViewManager.ViewManager.instance(), 'blackbox'),
+                                   dismiss: false,
+                                   jslogContext: 'configure',
+                                 },
+                                 {
+                                   text: i18nString(UIStrings.removeFromIgnoreList),
+                                   delegate: unIgnoreList,
+                                   buttonVariant: Buttons.Button.Variant.TONAL,
+                                   dismiss: true,
+                                   jslogContext: 'remove-from-ignore-list',
+                                 },
+                               ],
+                               undefined, 'script-on-ignore-list');
     this.ignoreListInfobar = infobar;
     infobar.setCloseCallback(() => this.removeInfobar(this.ignoreListInfobar));
 
@@ -694,7 +694,8 @@ export class DebuggerPlugin extends Plugin {
       show: async (popover: UI.GlassPane.GlassPane) => {
         let resolvedText = '';
         if (selectedCallFrame.script.isJavaScript()) {
-          const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(selectedCallFrame);
+          const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(
+              selectedCallFrame, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance());
           try {
             resolvedText =
                 await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptSubstitute(evaluationText, nameMap);
@@ -2147,7 +2148,9 @@ export async function computeScopeMappings(
       break;
     }
 
-    const {properties} = await SourceMapScopes.NamesResolver.resolveScopeInObject(scope).getAllProperties(false, false);
+    const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+    const {properties} = await SourceMapScopes.NamesResolver.resolveScopeInObject(scope, debuggerWorkspaceBinding)
+                             .getAllProperties(false, false);
     if (!properties || properties.length > MAX_PROPERTIES_IN_SCOPE_FOR_VALUE_DECORATIONS) {
       break;
     }

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -32,6 +32,7 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
@@ -214,7 +215,8 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     this.#linkifier.reset();
 
     if (callFrame) {
-      const scopeChainModel = new SourceMapScopes.ScopeChainModel.ScopeChainModel(callFrame.sdkFrame);
+      const scopeChainModel = new SourceMapScopes.ScopeChainModel.ScopeChainModel(
+          callFrame.sdkFrame, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance());
       this.#scopeChainModel = scopeChainModel;
       this.#scopeChainModel.addEventListener(SourceMapScopes.ScopeChainModel.Events.SCOPE_CHAIN_UPDATED, event => {
         if (this.#scopeChainModel === scopeChainModel) {

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -38,6 +38,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 type * as Protocol from '../../generated/protocol.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as StackTrace from '../../models/stack_trace/stack_trace.js';
@@ -234,10 +235,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           classes: ['watch-expressions'],
           attributes: {
             jslog: `${VisualLogging.section('sources.watch')}`,
-            'aria-label': i18nString(UIStrings.addWatchExpression)
+            'aria-label': i18nString(UIStrings.addWatchExpression),
           },
-          listeners: {contextmenu: onContextMenu.bind(undefined, undefined)}
-        }
+          listeners: {contextmenu: onContextMenu.bind(undefined, undefined)},
+        },
       });
 };
 
@@ -395,7 +396,7 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements UI.Ac
           await e.result?.populateChildrenIfNeeded();
           this.requestUpdate();
         }
-      }
+      },
     },
                {}, this.contentElement);
   }
@@ -490,7 +491,8 @@ export class WatchExpression {
 
     const callFrame = executionContext.debuggerModel.selectedCallFrame();
     if (callFrame?.script.isJavaScript()) {
-      const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(callFrame);
+      const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(
+          callFrame, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance());
       try {
         expression =
             await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptSubstitute(expression, nameMap);

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

@@ -1812,7 +1812,7 @@ Common.Settings.registerSettingExtension({
   ],
   learnMore: {
     tooltip: i18nLazyString(UIStrings.wasmAutoSteppingInfo),
-  }
+  },
 });
 
 UI.ViewManager.registerLocationResolver({

package/front_end/panels/timeline/CountersGraph.ts

@@ -413,8 +413,7 @@ export class CounterUI {
     this.counter = counter;
     this.formatter = formatter;
 
-    this.setting = Common.Settings.Settings.instance().createSetting('timeline-counters-graph-' + settingsKey, true);
-    this.setting.setTitle(title);
+    this.setting = Common.Settings.Settings.instance().moduleSetting('timeline-counters-graph-' + settingsKey);
     this.filter = new UI.Toolbar.ToolbarSettingCheckbox(this.setting, title);
     const parsedColor = Common.Color.parse(graphColor);
     if (parsedColor) {

package/front_end/panels/timeline/ExtensionTrackAppender.ts

@@ -77,7 +77,7 @@ export class ExtensionTrackAppender implements TrackAppender {
       shareHeaderLine: false,
       padding: 2,
       nestingLevel: 1,
-      collapsible: PerfUI.FlameChart.GroupCollapsibleState.ALWAYS
+      collapsible: PerfUI.FlameChart.GroupCollapsibleState.ALWAYS,
     });
     const group = buildTrackHeader(
         VisualLoggingTrackName.EXTENSION, trackStartLevel, headerTitle, style,

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -35,7 +35,7 @@ import {
   BottomUpTimelineTreeView,
   CallTreeTimelineTreeView,
   TimelineStackView,
-  TimelineTreeView
+  TimelineTreeView,
 } from './TimelineTreeView.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';
 import {TracingFrameLayerTree} from './TracingLayerTree.js';
@@ -326,7 +326,7 @@ export class TimelineDetailsPane extends
       view.model = {
         selectedEvents: data.selectedEvents,
         parsedTrace: data.parsedTrace,
-        entityMapper: data.entityMapper
+        entityMapper: data.entityMapper,
       };
     }
     this.#summaryContent.requestUpdate();

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -156,7 +156,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       useFirstLineForOverview: true,
       nestingLevel: 1,
       collapsible: PerfUI.FlameChart.GroupCollapsibleState.NEVER,
-      itemsHeight: 150
+      itemsHeight: 150,
     });
 
     ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
@@ -1409,7 +1409,7 @@ export const InstantEventVisibleDurationMs = Trace.Types.Timing.Milli(0.001);
 export const enum Events {
   DATA_CHANGED = 'DataChanged',
   FLAME_CHART_ITEM_HOVERED = 'FlameChartItemHovered',
-  ENTRY_LABEL_ANNOTATION_ADDED = 'EntryLabelAnnotationAdded'
+  ENTRY_LABEL_ANNOTATION_ADDED = 'EntryLabelAnnotationAdded',
 }
 
 export interface EventTypes {

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -41,7 +41,7 @@ import {
   selectionIsEvent,
   selectionIsRange,
   selectionsEqual,
-  type TimelineSelection
+  type TimelineSelection,
 } from './TimelineSelection.js';
 import {AggregatedTimelineTreeView, TimelineTreeView} from './TimelineTreeView.js';
 import type {TimelineMarkerStyle} from './TimelineUIUtils.js';
@@ -244,7 +244,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       selectedElementOutline: false,
       tooltipElement: this.#tooltipElement,
       useOverlaysForCursorRuler: true,
-      canvasVELogContext: 'timeline.flamechart.main'
+      canvasVELogContext: 'timeline.flamechart.main',
     });
     this.mainFlameChart.alwaysShowVerticalScroll();
     this.mainFlameChart.enableRuler(false);
@@ -262,7 +262,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       selectedElementOutline: false,
       tooltipElement: this.#tooltipElement,
       useOverlaysForCursorRuler: true,
-      canvasVELogContext: 'timeline.flamechart.network'
+      canvasVELogContext: 'timeline.flamechart.network',
     });
     this.networkFlameChart.alwaysShowVerticalScroll();
     this.networkFlameChart.addEventListener(PerfUI.FlameChart.Events.LATEST_DRAW_DIMENSIONS, dimensions => {
@@ -505,7 +505,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       mainChartIndices: [],
       networkChartIndices: [],
       inclusive: opts.inclusive,
-      outline: opts.outline
+      outline: opts.outline,
     };
     this.#flameChartDimmers.push(dimmer);
     return dimmer;

package/front_end/panels/timeline/TimelinePaintProfilerView.ts

@@ -233,7 +233,7 @@ export const DEFAULT_VIEW = (input: TimelinePaintImageViewInput, output: undefin
       <img src=${input.imageURL} display=${input.imageContainerHidden ? 'none' : 'block'} ${ref(imageElementRef)}>
       <div style=${Lit.Directives.styleMap({
         display: input.maskElementHidden ? 'none' : 'block',
-        ...input.maskElementStyle,})}>
+        ...input.maskElementStyle})}>
       </div>
     </div>
   </div>`,