chrome-devtools-frontend 1.0.1672557 → 1.0.1674545

package/front_end/models/ai_assistance/AiSetting.ts

@@ -33,6 +33,7 @@ export class AiSetting<ValueT> extends Common.ObjectWrapper.ObjectWrapper<EventT
   readonly #settings: Common.Settings.Settings;
   readonly #boundOnSettingChanged = this.#onSettingChanged.bind(this);
   readonly #boundOnAidaAvailabilityChanged = this.#onAidaAvailabilityChanged.bind(this);
+  #isSubscribed = false;
 
   constructor(
       descriptor: Common.Settings.ConditionalSettingDescriptor<ValueT, DisabledReason[]>,
@@ -44,11 +45,56 @@ export class AiSetting<ValueT> extends Common.ObjectWrapper.ObjectWrapper<EventT
     this.#hostConfigTracker = hostConfigTracker;
     this.#settings = settings;
 
+    this.#tryResolveSetting();
+  }
+
+  override addEventListener<T extends keyof EventTypes>(
+      eventType: T,
+      listener: Common.EventTarget.EventListener<EventTypes, T>,
+      thisObject?: Object,
+      ): Common.EventTarget.EventDescriptor<EventTypes, T> {
+    const isFirst = !this.hasEventListeners(eventType);
+    const descriptor = super.addEventListener(eventType, listener, thisObject);
+    if (isFirst) {
+      this.#subscribe();
+    }
+    return descriptor;
+  }
+
+  override removeEventListener<T extends keyof EventTypes>(
+      eventType: T,
+      listener: Common.EventTarget.EventListener<EventTypes, T>,
+      thisObject?: Object,
+      ): void {
+    super.removeEventListener(eventType, listener, thisObject);
+    if (!this.hasEventListeners(eventType)) {
+      this.#unsubscribe();
+    }
+  }
+
+  #subscribe(): void {
+    if (this.#isSubscribed) {
+      return;
+    }
+    this.#tryResolveSetting();
+    this.#isSubscribed = true;
     this.#hostConfigTracker.addEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED,
         this.#boundOnAidaAvailabilityChanged,
     );
-    this.#tryResolveSetting();
+    this.#setting?.addChangeListener(this.#boundOnSettingChanged);
+  }
+
+  #unsubscribe(): void {
+    if (!this.#isSubscribed) {
+      return;
+    }
+    this.#isSubscribed = false;
+    this.#hostConfigTracker.removeEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED,
+        this.#boundOnAidaAvailabilityChanged,
+    );
+    this.#setting?.removeChangeListener(this.#boundOnSettingChanged);
   }
 
   #tryResolveSetting(): void {
@@ -56,12 +102,19 @@ export class AiSetting<ValueT> extends Common.ObjectWrapper.ObjectWrapper<EventT
                                                Common.Settings.ConditionalSettingDescriptor<unknown, DisabledReason[]>);
     if ('setting' in result) {
       if (this.#setting !== result.setting) {
-        if (this.#setting) {
+        if (this.#setting && this.#isSubscribed) {
           this.#setting.removeChangeListener(this.#boundOnSettingChanged);
         }
         this.#setting = result.setting as Common.Settings.Setting<ValueT>;
-        this.#setting.addChangeListener(this.#boundOnSettingChanged);
+        if (this.#isSubscribed) {
+          this.#setting.addChangeListener(this.#boundOnSettingChanged);
+        }
       }
+    } else if (this.#setting) {
+      if (this.#isSubscribed) {
+        this.#setting.removeChangeListener(this.#boundOnSettingChanged);
+      }
+      this.#setting = undefined;
     }
   }
 
@@ -87,6 +140,7 @@ export class AiSetting<ValueT> extends Common.ObjectWrapper.ObjectWrapper<EventT
     if (this.disabled || this.unavailable) {
       return undefined;
     }
+    this.#tryResolveSetting();
     return this.#setting?.get();
   }
 
@@ -94,9 +148,18 @@ export class AiSetting<ValueT> extends Common.ObjectWrapper.ObjectWrapper<EventT
     if (this.disabled || this.unavailable) {
       return;
     }
+    this.#tryResolveSetting();
     this.#setting?.set(value);
   }
 
+  get(): ValueT|undefined {
+    return this.getIfNotDisabled();
+  }
+
+  set(value: ValueT): void {
+    this.setIfNotDisabled(value);
+  }
+
   #onSettingChanged(): void {
     this.dispatchEventToListeners(Events.CHANGED);
   }

package/front_end/models/bindings/CompilerScriptMapping.ts

@@ -193,7 +193,7 @@ export class CompilerScriptMapping implements DebuggerSourceMapping {
       return null;
     }
 
-    const entry = sourceMap.findEntry(lineNumber, columnNumber, rawLocation.inlineFrameIndex);
+    const entry = sourceMap.findEntry(lineNumber, columnNumber);
     if (!entry?.sourceURL) {
       return null;
     }

package/front_end/models/emulation/DeviceModeModel.ts

@@ -104,6 +104,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   #availableSize: Geometry.Size;
   #preferredSize: Geometry.Size;
   #initialized: boolean;
+  #autoFitScaleOnInitialize: boolean;
   #appliedDeviceSize: Geometry.Size;
   #appliedDeviceScaleFactor: number;
   #appliedUserAgentType: UA;
@@ -113,7 +114,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   #heightSetting: Common.Settings.Setting<number>;
   #uaSetting: Common.Settings.Setting<UA>;
   readonly #deviceScaleFactorSetting: Common.Settings.Setting<number>;
-  readonly #deviceOutlineSetting: Common.Settings.Setting<boolean>;
+
   readonly #toolbarControlsEnabledSetting: Common.Settings.Setting<boolean>;
   #type: Type;
   #device: EmulatedDevice|null;
@@ -143,6 +144,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#availableSize = new Geometry.Size(1, 1);
     this.#preferredSize = new Geometry.Size(1, 1);
     this.#initialized = false;
+    this.#autoFitScaleOnInitialize = false;
     this.#appliedDeviceSize = new Geometry.Size(1, 1);
     this.#appliedDeviceScaleFactor = globalThis.devicePixelRatio;
     this.#appliedUserAgentType = UA.DESKTOP;
@@ -178,9 +180,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#deviceScaleFactorSetting = this.#settings.createSetting('emulation.device-scale-factor', 0);
     this.#deviceScaleFactorSetting.addChangeListener(this.deviceScaleFactorSettingChanged, this);
 
-    this.#deviceOutlineSetting = this.#settings.moduleSetting('emulation.show-device-outline');
-    this.#deviceOutlineSetting.addChangeListener(this.deviceOutlineSettingChanged, this);
-
     this.#toolbarControlsEnabledSetting = this.#settings.createSetting('emulation.toolbar-controls-enabled', true,
                                                                        Common.Settings.SettingStorageType.SESSION);
 
@@ -311,10 +310,22 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.#scaleSetting;
   }
 
+  #updateFitScale(): void {
+    if (this.#type === Type.Device && this.#device && this.#mode) {
+      const orientation = this.#device.orientationByName(this.#mode.orientation);
+      this.#scaleSetting.set(
+          this.calculateFitScale(orientation.width, orientation.height, this.currentOutline(), this.currentInsets()));
+    }
+  }
+
   setAvailableSize(availableSize: Geometry.Size, preferredSize: Geometry.Size): void {
     this.#availableSize = availableSize;
     this.#preferredSize = preferredSize;
     this.#initialized = true;
+    if (this.#autoFitScaleOnInitialize) {
+      this.#autoFitScaleOnInitialize = false;
+      this.#updateFitScale();
+    }
     this.calculateAndEmulate(false);
   }
 
@@ -326,15 +337,19 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       console.assert(Boolean(device) && Boolean(mode), 'Must pass device and mode for device emulation');
       this.#mode = mode;
       this.#device = device;
-      if (this.#initialized) {
-        const orientation = device.orientationByName(mode.orientation);
-        this.#scaleSetting.set(
-            scale ||
-            this.calculateFitScale(orientation.width, orientation.height, this.currentOutline(), this.currentInsets()));
+      if (scale !== undefined) {
+        this.#autoFitScaleOnInitialize = false;
+        this.#scaleSetting.set(scale);
+      } else if (this.#initialized) {
+        this.#autoFitScaleOnInitialize = false;
+        this.#updateFitScale();
+      } else {
+        this.#autoFitScaleOnInitialize = true;
       }
     } else {
       this.#device = null;
       this.#mode = null;
+      this.#autoFitScaleOnInitialize = false;
     }
 
     if (type !== Type.None) {
@@ -390,11 +405,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return (this.#device && this.#mode) ? this.#device.modeImage(this.#mode) : '';
   }
 
-  outlineImage(): string {
-    return (this.#device && this.#mode && this.#deviceOutlineSetting.get()) ? this.#device.outlineImage(this.#mode) :
-                                                                              '';
-  }
-
   canShowDeviceFrame(): boolean {
     return Boolean(this.#device && this.#mode && this.#device.outlineImage(this.#mode));
   }
@@ -471,10 +481,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.#deviceScaleFactorSetting;
   }
 
-  deviceOutlineSetting(): Common.Settings.Setting<boolean> {
-    return this.#deviceOutlineSetting;
-  }
-
   toolbarControlsEnabledSetting(): Common.Settings.Setting<boolean> {
     return this.#toolbarControlsEnabledSetting;
   }
@@ -590,10 +596,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.calculateAndEmulate(false);
   }
 
-  private deviceOutlineSettingChanged(): void {
-    this.calculateAndEmulate(false);
-  }
-
   private preferredScaledWidth(): number {
     return Math.floor(this.#preferredSize.width / (this.#scaleSetting.get() || 1));
   }
@@ -603,15 +605,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private currentOutline(): Insets {
-    let outline: Insets = new Insets(0, 0, 0, 0);
-    if (this.#type !== Type.Device || !this.#device || !this.#mode) {
-      return outline;
-    }
-    const orientation = this.#device.orientationByName(this.#mode.orientation);
-    if (this.#deviceOutlineSetting.get()) {
-      outline = orientation.outlineInsets || outline;
-    }
-    return outline;
+    return new Insets(0, 0, 0, 0);
   }
 
   private currentInsets(): Insets {
@@ -924,9 +918,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       }
       ctx.imageSmoothingEnabled = false;
 
-      if (this.outlineImage()) {
-        await this.paintImage(ctx, this.outlineImage(), outlineRect.relativeTo(outlineRect));
-      }
       if (this.screenImage()) {
         await this.paintImage(ctx, this.screenImage(), screenRect.relativeTo(outlineRect));
       }

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7810,6 +7810,10 @@ export const NativeFunctions = [
     name: "MediaStreamTrackEvent",
     signatures: [["type","eventInitDict"]]
   },
+  {
+    name: "setConstraints",
+    signatures: [["?constraints"]]
+  },
   {
     name: "webkitGetUserMedia",
     signatures: [["constraints","successCallback","errorCallback"]]
@@ -7818,10 +7822,6 @@ export const NativeFunctions = [
     name: "OverconstrainedError",
     signatures: [["constraint","?message"]]
   },
-  {
-    name: "setConstraints",
-    signatures: [["?constraints"]]
-  },
   {
     name: "appendEncodedChunks",
     signatures: [["chunks"]]

package/front_end/models/trace/ModelImpl.ts

@@ -51,6 +51,11 @@ export class Model extends EventTarget {
     this.#processor = new TraceProcessor(handlers, this.#config);
   }
 
+  updateConfiguration(config: Types.Configuration.Configuration): void {
+    this.#config = config;
+    this.#processor.updateConfiguration(config);
+  }
+
   /**
    * Parses an array of trace events into a structured object containing all the
    * information parsed by the trace handlers.

package/front_end/models/trace/Processor.ts

@@ -94,6 +94,11 @@ export class TraceProcessor extends EventTarget {
     }
   }
 
+  updateConfiguration(config: Types.Configuration.Configuration): void {
+    this.#modelConfiguration = config;
+    this.#passConfigToHandlers();
+  }
+
   /**
    * When the user passes in a set of handlers, we want to ensure that we have all
    * the required handlers. Handlers can depend on other handlers, so if the user

package/front_end/models/trace/handlers/LayoutShiftsHandler.ts

@@ -141,6 +141,11 @@ export function reset(): void {
   clsWindowID = -1;
 }
 
+let enableSoftNavigation = true;
+export function handleUserConfig(userConfig: Types.Configuration.Configuration): void {
+  enableSoftNavigation = userConfig.enableSoftNavigation;
+}
+
 export function handleEvent(event: Types.Events.Event): void {
   if (Types.Events.isLayoutShift(event) && !event.args.data?.had_recent_input) {
     layoutShiftEvents.push(event);
@@ -290,8 +295,9 @@ export async function finalize(): Promise<void> {
 
 async function buildLayoutShiftsClusters(): Promise<void> {
   const {navigationsByFrameId, mainFrameId, traceBounds, softNavigationsById} = metaHandlerData();
+  const softNavigations = enableSoftNavigation ? Array.from(softNavigationsById.values()) : [];
   const navigations: Types.Events.Event[] =
-      [...(navigationsByFrameId.get(mainFrameId) || []), ...softNavigationsById.values()].sort((a, b) => a.ts - b.ts);
+      [...(navigationsByFrameId.get(mainFrameId) || []), ...softNavigations].sort((a, b) => a.ts - b.ts);
   if (layoutShiftEvents.length === 0) {
     return;
   }

package/front_end/models/trace/handlers/MetaHandler.ts

@@ -8,7 +8,11 @@ import * as Types from '../types/types.js';
 
 import type {FinalizeOptions} from './types.js';
 
-let config: {showAllEvents: boolean};
+let config: Types.Configuration.Configuration = Types.Configuration.defaults();
+
+export function handleUserConfig(userConfig: Types.Configuration.Configuration): void {
+  config = userConfig;
+}
 
 // We track the renderer processes we see in each frame on the way through the trace.
 let rendererProcessesByFrameId: FrameProcessData = new Map();
@@ -328,7 +332,7 @@ export function handleEvent(event: Types.Events.Event): void {
     return;
   }
 
-  if (Types.Events.isSoftNavigationStart(event)) {
+  if (config.enableSoftNavigation && Types.Events.isSoftNavigationStart(event)) {
     softNavigationsById.set(event.args.context.performanceTimelineNavigationId, event);
   }
 
@@ -359,7 +363,7 @@ export function handleEvent(event: Types.Events.Event): void {
 }
 
 export async function finalize(options?: FinalizeOptions): Promise<void> {
-  config = {showAllEvents: Boolean(options?.showAllEvents)};
+  config.showAllEvents = Boolean(options?.showAllEvents);
 
   // We try to set the minimum time by finding the event with the smallest
   // timestamp. However, if we also got a timestamp from the
@@ -476,7 +480,7 @@ export async function finalize(options?: FinalizeOptions): Promise<void> {
 }
 
 export interface MetaHandlerData {
-  config: {showAllEvents: boolean};
+  config: Types.Configuration.Configuration;
   traceIsGeneric: boolean;
   traceBounds: Types.Timing.TraceWindowMicro;
   browserProcessId: Types.Events.ProcessID;

package/front_end/models/trace/handlers/PageLoadMetricsHandler.ts

@@ -53,6 +53,11 @@ export function reset(): void {
   metaCharsetCheckEventsArray = [];
 }
 
+let enableSoftNavigation = true;
+export function handleUserConfig(userConfig: Types.Configuration.Configuration): void {
+  enableSoftNavigation = userConfig.enableSoftNavigation;
+}
+
 let pageLoadEventsArray: Types.Events.PageLoadEvent[] = [];
 
 // Once we've found the LCP events in the trace we want to fetch their DOM Node
@@ -74,6 +79,12 @@ export function handleEvent(event: Types.Events.Event): void {
   if (!Types.Events.eventIsPageLoadEvent(event)) {
     return;
   }
+  if (!enableSoftNavigation &&
+      (Types.Events.isSoftNavigationStart(event) ||
+       event.name === Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION ||
+       Types.Events.isSoftFirstContentfulPaint(event))) {
+    return;
+  }
   pageLoadEventsArray.push(event);
 
   // A soft nav entry includes the Soft FCP details but we want to process both

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -594,7 +594,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #conversationSummary?: AiAssistanceModel.ConversationSummary.ConversationSummary;
   #viewOutput: PanelViewOutput = {};
   #serverSideLoggingEnabled = isAiAssistanceServerSideLoggingEnabled();
-  #aiAssistanceEnabledSetting: Common.Settings.Setting<boolean>|undefined;
+  #aiAssistanceEnabledSetting: AiAssistanceModel.AiSetting.AiSetting<boolean>;
   #changeManager = new AiAssistanceModel.ChangeManager.ChangeManager();
   #mutex = new Common.Mutex.Mutex();
 
@@ -860,13 +860,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.requestUpdate();
   }
 
-  #getAiAssistanceEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
-    try {
-      return Common.Settings.Settings.instance().moduleSetting('ai-assistance-enabled') as
-          Common.Settings.Setting<boolean>;
-    } catch {
-      return;
-    }
+  #getAiAssistanceEnabledSetting(): AiAssistanceModel.AiSetting.AiSetting<boolean> {
+    return new AiAssistanceModel.AiSetting.AiSetting(
+        AiAssistanceModel.AiUtils.aiAssistanceEnabledSettingDescriptor,
+        Host.AidaClient.HostConfigTracker.instance(),
+        Common.Settings.Settings.instance(),
+    );
   }
 
   static async instance(opts: {
@@ -1061,7 +1060,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
     AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().addEventListener(
         AiAssistanceModel.AiHistoryStorage.Events.HISTORY_DELETED, this.#onHistoryDeleted, this);
-    this.#aiAssistanceEnabledSetting?.addChangeListener(this.requestUpdate, this);
+    this.#aiAssistanceEnabledSetting.addEventListener(AiAssistanceModel.AiSetting.Events.CHANGED, this.requestUpdate,
+                                                      this);
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#handleAidaAvailabilityChange);
     const initialAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
@@ -1107,7 +1107,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     super.willHide();
     AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().removeEventListener(
         AiAssistanceModel.AiHistoryStorage.Events.HISTORY_DELETED, this.#onHistoryDeleted, this);
-    this.#aiAssistanceEnabledSetting?.removeChangeListener(this.requestUpdate, this);
+    this.#aiAssistanceEnabledSetting.removeEventListener(AiAssistanceModel.AiSetting.Events.CHANGED, this.requestUpdate,
+                                                         this);
     Host.AidaClient.HostConfigTracker.instance().removeEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#handleAidaAvailabilityChange);
     this.#toggleSearchElementAction?.removeEventListener(

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

@@ -4,9 +4,10 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
+import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as SettingUIRegistration from '../../ui/settings/settings.js';
 
 import type * as AiAssistance from './ai_assistance.js';
 
@@ -50,21 +51,6 @@ const UIStrings = {
    * @description Text of a context menu item to redirect to the Gemini panel with the current context.
    */
   debugWithGemini: 'Debug with Gemini',
-  /**
-   * @description Message shown to the user if the DevTools locale is not
-   * supported.
-   */
-  wrongLocale: 'To use this feature, set your language preference to English in DevTools settings.',
-  /**
-   * @description Message shown to the user if the user's region is not
-   * supported.
-   */
-  geoRestricted: 'This feature is unavailable in your region.',
-  /**
-   * @description Message shown to the user if the enterprise policy does
-   * not allow this feature.
-   */
-  policyRestricted: 'This setting is managed by your administrator.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/ai_assistance-meta.ts', UIStrings);
@@ -76,13 +62,6 @@ function i18nAiBrandedString(gemini: string, assistance: string) {
   return () => Root.Runtime.hostConfig.devToolsGeminiRebranding?.enabled ? i18nString(gemini) : i18nString(assistance);
 }
 
-const setting = 'ai-assistance-enabled';
-
-function isLocaleRestricted(): boolean {
-  const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-  return !devtoolsLocale.locale.startsWith('en-');
-}
-
 function isGeoRestricted(config?: Root.Runtime.HostConfig): boolean {
   return config?.aidaAvailability?.blockedByGeo === true;
 }
@@ -140,30 +119,9 @@ UI.ViewManager.registerViewExtension({
   },
 });
 
-Common.Settings.registerSettingExtension({
+SettingUIRegistration.SettingUIRegistration.register(AiAssistanceModel.AiUtils.aiAssistanceEnabledSettingDescriptor, {
   category: Common.Settings.SettingCategory.AI,
-  settingName: setting,
-  settingType: Common.Settings.SettingType.BOOLEAN,
   title: i18nAiBrandedString(UIStrings.enableGemini, UIStrings.enableAiAssistance),
-  defaultValue: false,
-  reloadRequired: false,
-  condition: isAnyFeatureAvailable,
-  disabledCondition: config => {
-    const reasons: Platform.UIString.LocalizedString[] = [];
-    if (isGeoRestricted(config)) {
-      reasons.push(i18nString(UIStrings.geoRestricted));
-    }
-    if (isPolicyRestricted(config)) {
-      reasons.push(i18nString(UIStrings.policyRestricted));
-    }
-    if (isLocaleRestricted()) {
-      reasons.push(i18nString(UIStrings.wrongLocale));
-    }
-    if (reasons.length > 0) {
-      return {disabled: true, reasons};
-    }
-    return {disabled: false};
-  },
 });
 
 UI.ActionRegistration.registerActionExtension({