chrome-devtools-frontend 1.0.1626840 → 1.0.1628368

package/front_end/core/common/VersionController.ts

@@ -17,7 +17,7 @@ export class VersionController {
   static readonly SYNCED_VERSION_SETTING_NAME = 'syncedInspectorVersion';
   static readonly LOCAL_VERSION_SETTING_NAME = 'localInspectorVersion';
 
-  static readonly CURRENT_VERSION = 44;
+  static readonly CURRENT_VERSION = 46;
 
   readonly #settings: Settings;
   readonly #globalVersionSetting: Setting<number>;
@@ -865,6 +865,38 @@ export class VersionController {
     }
   }
 
+  updateVersionFrom44To45(): void {
+    const timelineDebugModeExperimentEnabled =
+        Root.Runtime.experiments.getValueFromStorage('timeline-debug-mode' as Root.ExperimentNames.ExperimentName);
+    if (timelineDebugModeExperimentEnabled !== undefined) {
+      if (this.#settings.syncedStorage.has('timeline-debug-mode')) {
+        return;  // Already migrated
+      }
+      try {
+        const timelineDebugModeSetting = this.#settings.moduleSetting('timeline-debug-mode');
+        timelineDebugModeSetting.set(timelineDebugModeExperimentEnabled);
+      } catch {
+        // If the setting is not registered yet (e.g. in tests), skip.
+      }
+    }
+  }
+
+  updateVersionFrom45To46(): void {
+    const timelineInvalidationTrackingExperimentEnabled = Root.Runtime.experiments.getValueFromStorage(
+        'timeline-invalidation-tracking' as Root.ExperimentNames.ExperimentName);
+    if (timelineInvalidationTrackingExperimentEnabled !== undefined) {
+      if (this.#settings.syncedStorage.has('timeline-invalidation-tracking')) {
+        return;  // Already migrated
+      }
+      try {
+        const timelineInvalidationTrackingSetting = this.#settings.moduleSetting('timeline-invalidation-tracking');
+        timelineInvalidationTrackingSetting.set(timelineInvalidationTrackingExperimentEnabled);
+      } catch {
+        // If the setting is not registered yet (e.g. in tests), skip.
+      }
+    }
+  }
+
   /*
    * Any new migration should be added before this comment.
    *

package/front_end/core/host/UserMetrics.ts

@@ -764,10 +764,8 @@ export enum DevtoolsExperiments {
   /* eslint-disable @typescript-eslint/naming-convention */
   'capture-node-creation-stacks' = 1,
   'protocol-monitor' = 13,
-  'timeline-invalidation-tracking' = 26,
   'instrumentation-breakpoints' = 61,
   'use-source-map-scopes' = 76,
-  'timeline-debug-mode' = 93,
   'durable-messages' = 110,
   'jpeg-xl' = 111,
   /* eslint-enable @typescript-eslint/naming-convention */

package/front_end/core/root/ExperimentNames.ts

@@ -7,10 +7,8 @@ export enum ExperimentName {
   CAPTURE_NODE_CREATION_STACKS = 'capture-node-creation-stacks',
 
   PROTOCOL_MONITOR = 'protocol-monitor',
-  TIMELINE_INVALIDATION_TRACKING = 'timeline-invalidation-tracking',
   INSTRUMENTATION_BREAKPOINTS = 'instrumentation-breakpoints',
   USE_SOURCE_MAP_SCOPES = 'use-source-map-scopes',
-  TIMELINE_DEBUG_MODE = 'timeline-debug-mode',
   DURABLE_MESSAGES = 'durable-messages',
   JPEG_XL = 'jpeg-xl',
   // Adding or removing an entry from this enum?

package/front_end/core/sdk/CSSContainerQuery.ts

@@ -15,6 +15,7 @@ export class CSSContainerQuery extends CSSQuery {
   logicalAxes?: Protocol.DOM.LogicalAxes;
   queriesScrollState?: boolean;
   queriesAnchored?: boolean;
+  textIsConditionText?: boolean;
 
   static parseContainerQueriesPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSContainerQuery[]):
       CSSContainerQuery[] {
@@ -27,7 +28,8 @@ export class CSSContainerQuery extends CSSQuery {
   }
 
   reinitialize(payload: Protocol.CSS.CSSContainerQuery): void {
-    this.text = payload.text;
+    this.textIsConditionText = !!payload.conditionText;
+    this.text = this.textIsConditionText ? payload.conditionText : payload.text;
     this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
     this.styleSheetId = payload.styleSheetId;
     this.name = payload.name;

package/front_end/core/sdk/CSSModel.ts

@@ -552,6 +552,29 @@ export class CSSModel extends SDKModel<EventTypes> {
     }
   }
 
+  async setContainerQueryConditionText(
+      styleSheetId: Protocol.DOM.StyleSheetId, range: TextUtils.TextRange.TextRange,
+      newContainerQueryConditionText: string): Promise<boolean> {
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleEdited);
+
+    try {
+      await this.ensureOriginalStyleSheetText(styleSheetId);
+      const {containerQuery} = await this.agent.invoke_setContainerQueryConditionText(
+          {styleSheetId, range, text: newContainerQueryConditionText});
+
+      if (!containerQuery) {
+        return false;
+      }
+      this.#domModel.markUndoableState();
+      const edit = new Edit(styleSheetId, range, newContainerQueryConditionText, containerQuery);
+      this.fireStyleSheetChanged(styleSheetId, edit);
+      return true;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }
+
   async setSupportsText(
       styleSheetId: Protocol.DOM.StyleSheetId, range: TextUtils.TextRange.TextRange,
       newSupportsText: string): Promise<boolean> {

package/front_end/entrypoints/formatter_worker/AcornTokenizer.ts

@@ -61,6 +61,7 @@ export class AcornTokenizer {
   }
 
   static identifier(token: TokenOrComment, identifier?: string): boolean {
+    // @ts-expect-error https://github.com/acornjs/acorn/issues/1285
     return token.type === Acorn.tokTypes.name && (!identifier || token.value === identifier);
   }
 
@@ -107,4 +108,4 @@ export class AcornTokenizer {
   }
 }
 
-export const ECMA_VERSION = 2022;
+export const ECMA_VERSION = 'latest';

package/front_end/entrypoints/formatter_worker/CSSFormatter.ts

@@ -18,17 +18,15 @@ export class CSSFormatter {
   #toOffset!: number;
   #fromOffset!: number;
   #lineEndings!: number[];
-  #lastLine: number;
+  #lastLine = -1;
   #state: {
     eatWhitespace?: boolean,
     seenProperty?: boolean,
     inPropertyValue?: boolean,
     afterClosingBrace?: boolean,
-  };
+  } = {};
   constructor(builder: FormattedContentBuilder) {
     this.#builder = builder;
-    this.#lastLine = -1;
-    this.#state = {};
   }
 
   format(text: string, lineEndings: number[], fromOffset: number, toOffset: number): void {

package/front_end/entrypoints/formatter_worker/ESTreeWalker.ts

@@ -91,7 +91,8 @@ const WALK_ORDER = {
   FunctionDeclaration: ['id', 'params', 'body'],
   FunctionExpression: ['id', 'params', 'body'],
   Identifier: [],
-  ImportDeclaration: ['specifiers', 'source'],
+  ImportDeclaration: ['specifiers', 'source', 'attributes'],
+  ImportAttribute: ['key', 'value'],
   ImportDefaultSpecifier: ['local'],
   ImportNamespaceSpecifier: ['local'],
   ImportSpecifier: ['imported', 'local'],
@@ -136,4 +137,4 @@ const WALK_ORDER = {
   WhileStatement: ['test', 'body'],
   WithStatement: ['object', 'body'],
   YieldExpression: ['argument'],
-};
+} as const;

package/front_end/entrypoints/formatter_worker/JavaScriptFormatter.ts

@@ -150,6 +150,13 @@ export class JavaScriptFormatter {
       }
       return 't';
     }
+    // @ts-expect-error not on the types
+    if (nodeType === 'ImportAttribute') {
+      if (AT.punctuator(token, ':')) {
+        return 'ts';
+      }
+      return 't';
+    }
     if (nodeType === 'ArrayExpression') {
       if (AT.punctuator(token, ',')) {
         return 'ts';
@@ -339,11 +346,17 @@ export class JavaScriptFormatter {
         return 'ts';
       }
       if (AT.punctuator(token, '}')) {
+        if (node.attributes.length > 0) {
+          return 't';
+        }
         return node.source ? 'ts' : 't';
       }
       if (AT.punctuator(token, '*')) {
         return 'sts';
       }
+      if (AT.keyword(token, 'with')) {
+        return 'sts';
+      }
       return 't';
     } else if (nodeType === 'MemberExpression') {
       if (node.object.type === 'Literal' && typeof (node.object.value) === 'number') {

package/front_end/entrypoints/formatter_worker/Substitute.ts

@@ -34,7 +34,7 @@ function computeSubstitution(expression: string, nameMap: Map<string, string|nul
     allowImportExportEverywhere: true,
     checkPrivateFields: false,
     ranges: false,
-  } as acorn.Options) as Acorn.ESTree.Node;
+  }) as Acorn.ESTree.Node;
   const scopeVariables = new ScopeVariableAnalysis(root, expression);
   scopeVariables.run();
   const freeVariables = scopeVariables.getFreeVariables();

package/front_end/entrypoints/main/MainImpl.ts

@@ -365,13 +365,6 @@ export class MainImpl {
     this.#migrateValueFromLegacyToHostExperiment(
         Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR, protocolMonitorExperiment);
 
-    // Timeline
-    Root.Runtime.experiments.register(
-        Root.ExperimentNames.ExperimentName.TIMELINE_INVALIDATION_TRACKING, 'Performance panel: invalidation tracking');
-    Root.Runtime.experiments.register(
-        Root.ExperimentNames.ExperimentName.TIMELINE_DEBUG_MODE,
-        'Performance panel: debug mode (trace event details, etc)');
-
     // Debugging
     Root.Runtime.experiments.register(
         Root.ExperimentNames.ExperimentName.INSTRUMENTATION_BREAKPOINTS, 'Instrumentation breakpoints');

package/front_end/generated/InspectorBackendCommands.ts

@@ -83,7 +83,7 @@ inspectorBackend.registerEnum("Audits.SharedDictionaryError", {UseErrorCrossOrig
 inspectorBackend.registerEnum("Audits.SRIMessageSignatureError", {MissingSignatureHeader: "MissingSignatureHeader", MissingSignatureInputHeader: "MissingSignatureInputHeader", InvalidSignatureHeader: "InvalidSignatureHeader", InvalidSignatureInputHeader: "InvalidSignatureInputHeader", SignatureHeaderValueIsNotByteSequence: "SignatureHeaderValueIsNotByteSequence", SignatureHeaderValueIsParameterized: "SignatureHeaderValueIsParameterized", SignatureHeaderValueIsIncorrectLength: "SignatureHeaderValueIsIncorrectLength", SignatureInputHeaderMissingLabel: "SignatureInputHeaderMissingLabel", SignatureInputHeaderValueNotInnerList: "SignatureInputHeaderValueNotInnerList", SignatureInputHeaderValueMissingComponents: "SignatureInputHeaderValueMissingComponents", SignatureInputHeaderInvalidComponentType: "SignatureInputHeaderInvalidComponentType", SignatureInputHeaderInvalidComponentName: "SignatureInputHeaderInvalidComponentName", SignatureInputHeaderInvalidHeaderComponentParameter: "SignatureInputHeaderInvalidHeaderComponentParameter", SignatureInputHeaderInvalidDerivedComponentParameter: "SignatureInputHeaderInvalidDerivedComponentParameter", SignatureInputHeaderKeyIdLength: "SignatureInputHeaderKeyIdLength", SignatureInputHeaderInvalidParameter: "SignatureInputHeaderInvalidParameter", SignatureInputHeaderMissingRequiredParameters: "SignatureInputHeaderMissingRequiredParameters", ValidationFailedSignatureExpired: "ValidationFailedSignatureExpired", ValidationFailedInvalidLength: "ValidationFailedInvalidLength", ValidationFailedSignatureMismatch: "ValidationFailedSignatureMismatch", ValidationFailedIntegrityMismatch: "ValidationFailedIntegrityMismatch"});
 inspectorBackend.registerEnum("Audits.UnencodedDigestError", {MalformedDictionary: "MalformedDictionary", UnknownAlgorithm: "UnknownAlgorithm", IncorrectDigestType: "IncorrectDigestType", IncorrectDigestLength: "IncorrectDigestLength"});
 inspectorBackend.registerEnum("Audits.ConnectionAllowlistError", {InvalidHeader: "InvalidHeader", MoreThanOneList: "MoreThanOneList", ItemNotInnerList: "ItemNotInnerList", InvalidAllowlistItemType: "InvalidAllowlistItemType", ReportingEndpointNotToken: "ReportingEndpointNotToken", InvalidUrlPattern: "InvalidUrlPattern"});
-inspectorBackend.registerEnum("Audits.GenericIssueErrorType", {FormLabelForNameError: "FormLabelForNameError", FormDuplicateIdForInputError: "FormDuplicateIdForInputError", FormInputWithNoLabelError: "FormInputWithNoLabelError", FormAutocompleteAttributeEmptyError: "FormAutocompleteAttributeEmptyError", FormEmptyIdAndNameAttributesForInputError: "FormEmptyIdAndNameAttributesForInputError", FormAriaLabelledByToNonExistingIdError: "FormAriaLabelledByToNonExistingIdError", FormInputAssignedAutocompleteValueToIdOrNameAttributeError: "FormInputAssignedAutocompleteValueToIdOrNameAttributeError", FormLabelHasNeitherForNorNestedInputError: "FormLabelHasNeitherForNorNestedInputError", FormLabelForMatchesNonExistingIdError: "FormLabelForMatchesNonExistingIdError", FormInputHasWrongButWellIntendedAutocompleteValueError: "FormInputHasWrongButWellIntendedAutocompleteValueError", ResponseWasBlockedByORB: "ResponseWasBlockedByORB", NavigationEntryMarkedSkippable: "NavigationEntryMarkedSkippable", AutofillAndManualTextPolicyControlledFeaturesInfo: "AutofillAndManualTextPolicyControlledFeaturesInfo", AutofillPolicyControlledFeatureInfo: "AutofillPolicyControlledFeatureInfo", ManualTextPolicyControlledFeatureInfo: "ManualTextPolicyControlledFeatureInfo", FormModelContextParameterMissingTitleAndDescription: "FormModelContextParameterMissingTitleAndDescription", FormModelContextMissingToolName: "FormModelContextMissingToolName", FormModelContextMissingToolDescription: "FormModelContextMissingToolDescription", FormModelContextRequiredParameterMissingName: "FormModelContextRequiredParameterMissingName", FormModelContextParameterMissingName: "FormModelContextParameterMissingName"});
+inspectorBackend.registerEnum("Audits.GenericIssueErrorType", {FormLabelForNameError: "FormLabelForNameError", FormDuplicateIdForInputError: "FormDuplicateIdForInputError", FormInputWithNoLabelError: "FormInputWithNoLabelError", FormAutocompleteAttributeEmptyError: "FormAutocompleteAttributeEmptyError", FormEmptyIdAndNameAttributesForInputError: "FormEmptyIdAndNameAttributesForInputError", FormAriaLabelledByToNonExistingIdError: "FormAriaLabelledByToNonExistingIdError", FormInputAssignedAutocompleteValueToIdOrNameAttributeError: "FormInputAssignedAutocompleteValueToIdOrNameAttributeError", FormLabelHasNeitherForNorNestedInputError: "FormLabelHasNeitherForNorNestedInputError", FormLabelForMatchesNonExistingIdError: "FormLabelForMatchesNonExistingIdError", FormInputHasWrongButWellIntendedAutocompleteValueError: "FormInputHasWrongButWellIntendedAutocompleteValueError", ResponseWasBlockedByORB: "ResponseWasBlockedByORB", NavigationEntryMarkedSkippable: "NavigationEntryMarkedSkippable", BackUINavigationWouldSkipAd: "BackUINavigationWouldSkipAd", AutofillAndManualTextPolicyControlledFeaturesInfo: "AutofillAndManualTextPolicyControlledFeaturesInfo", AutofillPolicyControlledFeatureInfo: "AutofillPolicyControlledFeatureInfo", ManualTextPolicyControlledFeatureInfo: "ManualTextPolicyControlledFeatureInfo", FormModelContextParameterMissingTitleAndDescription: "FormModelContextParameterMissingTitleAndDescription", FormModelContextMissingToolName: "FormModelContextMissingToolName", FormModelContextMissingToolDescription: "FormModelContextMissingToolDescription", FormModelContextRequiredParameterMissingName: "FormModelContextRequiredParameterMissingName", FormModelContextParameterMissingName: "FormModelContextParameterMissingName"});
 inspectorBackend.registerEnum("Audits.ClientHintIssueReason", {MetaTagAllowListInvalidOrigin: "MetaTagAllowListInvalidOrigin", MetaTagModifiedHTML: "MetaTagModifiedHTML"});
 inspectorBackend.registerEnum("Audits.FederatedAuthRequestIssueReason", {ShouldEmbargo: "ShouldEmbargo", TooManyRequests: "TooManyRequests", WellKnownHttpNotFound: "WellKnownHttpNotFound", WellKnownNoResponse: "WellKnownNoResponse", WellKnownInvalidResponse: "WellKnownInvalidResponse", WellKnownListEmpty: "WellKnownListEmpty", WellKnownInvalidContentType: "WellKnownInvalidContentType", ConfigNotInWellKnown: "ConfigNotInWellKnown", WellKnownTooBig: "WellKnownTooBig", ConfigHttpNotFound: "ConfigHttpNotFound", ConfigNoResponse: "ConfigNoResponse", ConfigInvalidResponse: "ConfigInvalidResponse", ConfigInvalidContentType: "ConfigInvalidContentType", IdpNotPotentiallyTrustworthy: "IdpNotPotentiallyTrustworthy", DisabledInSettings: "DisabledInSettings", DisabledInFlags: "DisabledInFlags", ErrorFetchingSignin: "ErrorFetchingSignin", InvalidSigninResponse: "InvalidSigninResponse", AccountsHttpNotFound: "AccountsHttpNotFound", AccountsNoResponse: "AccountsNoResponse", AccountsInvalidResponse: "AccountsInvalidResponse", AccountsListEmpty: "AccountsListEmpty", AccountsInvalidContentType: "AccountsInvalidContentType", IdTokenHttpNotFound: "IdTokenHttpNotFound", IdTokenNoResponse: "IdTokenNoResponse", IdTokenInvalidResponse: "IdTokenInvalidResponse", IdTokenIdpErrorResponse: "IdTokenIdpErrorResponse", IdTokenCrossSiteIdpErrorResponse: "IdTokenCrossSiteIdpErrorResponse", IdTokenInvalidRequest: "IdTokenInvalidRequest", IdTokenInvalidContentType: "IdTokenInvalidContentType", ErrorIdToken: "ErrorIdToken", Canceled: "Canceled", RpPageNotVisible: "RpPageNotVisible", SilentMediationFailure: "SilentMediationFailure", NotSignedInWithIdp: "NotSignedInWithIdp", MissingTransientUserActivation: "MissingTransientUserActivation", ReplacedByActiveMode: "ReplacedByActiveMode", RelyingPartyOriginIsOpaque: "RelyingPartyOriginIsOpaque", TypeNotMatching: "TypeNotMatching", UiDismissedNoEmbargo: "UiDismissedNoEmbargo", CorsError: "CorsError", SuppressedBySegmentationPlatform: "SuppressedBySegmentationPlatform"});
 inspectorBackend.registerEnum("Audits.FederatedAuthUserInfoRequestIssueReason", {NotSameOrigin: "NotSameOrigin", NotIframe: "NotIframe", NotPotentiallyTrustworthy: "NotPotentiallyTrustworthy", NoAPIPermission: "NoApiPermission", NotSignedInWithIdp: "NotSignedInWithIdp", NoAccountSharingPermission: "NoAccountSharingPermission", InvalidConfigOrWellKnown: "InvalidConfigOrWellKnown", InvalidAccountsResponse: "InvalidAccountsResponse", NoReturningUserFromFetchedAccounts: "NoReturningUserFromFetchedAccounts"});

package/front_end/generated/protocol.ts

@@ -1208,6 +1208,7 @@ export namespace Audits {
     FormInputHasWrongButWellIntendedAutocompleteValueError = 'FormInputHasWrongButWellIntendedAutocompleteValueError',
     ResponseWasBlockedByORB = 'ResponseWasBlockedByORB',
     NavigationEntryMarkedSkippable = 'NavigationEntryMarkedSkippable',
+    BackUINavigationWouldSkipAd = 'BackUINavigationWouldSkipAd',
     AutofillAndManualTextPolicyControlledFeaturesInfo = 'AutofillAndManualTextPolicyControlledFeaturesInfo',
     AutofillPolicyControlledFeatureInfo = 'AutofillPolicyControlledFeatureInfo',
     ManualTextPolicyControlledFeatureInfo = 'ManualTextPolicyControlledFeatureInfo',

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7664,6 +7664,10 @@ export const NativeFunctions = [
     name: "registerTool",
     signatures: [["tool","?options"]]
   },
+  {
+    name: "executeTool",
+    signatures: [["tool","input_arguments","?options"]]
+  },
   {
     name: "SnapEvent",
     signatures: [["type","?eventInitDict"]]

package/front_end/panels/common/common.ts

@@ -102,7 +102,7 @@ export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';
 export {GeminiRebrandPromoDialog} from './GeminiRebrandPromoDialog.js';
 export {AiCodeCompletionDisclaimer} from './AiCodeCompletionDisclaimer.js';
-export {AiCodeCompletionSummaryToolbar} from './AiCodeCompletionSummaryToolbar.js';
+export * as AiCodeCompletionSummaryToolbar from './AiCodeCompletionSummaryToolbar.js';
 export * from './BadgeNotification.js';
 export * as ExtensionPanel from './ExtensionPanel.js';
 export * as ExtensionServer from './ExtensionServer.js';

package/front_end/panels/console/ConsoleView.ts

@@ -351,7 +351,7 @@ export class ConsoleView extends UI.Widget.VBox implements
   #allCollapsed = false;
   aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
   private aiCodeCompletionSummaryToolbarContainer?: HTMLElement;
-  private aiCodeCompletionSummaryToolbar?: AiCodeCompletionSummaryToolbar;
+  private aiCodeCompletionSummaryToolbar?: AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar;
 
   constructor(viewportThrottlerTimeout: number) {
     super();
@@ -667,7 +667,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     if (this.aiCodeCompletionSummaryToolbar) {
       return;
     }
-    this.aiCodeCompletionSummaryToolbar = new AiCodeCompletionSummaryToolbar({
+    this.aiCodeCompletionSummaryToolbar = new AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar({
       citationsTooltipId: CITATIONS_TOOLTIP_ID,
       disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
       spinnerTooltipId: SPINNER_TOOLTIP_ID,

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -1021,7 +1021,7 @@ export class StylePropertiesSection {
     const containerQueryElement = new ElementsComponents.CSSQuery.CSSQuery();
     containerQueryElement.data = {
       queryPrefix: '@container',
-      queryName: containerQuery.name,
+      queryName: containerQuery.textIsConditionText ? undefined : containerQuery.name,
       queryText: containerQuery.text,
       onQueryTextClick,
       jslogContext: 'container-query',
@@ -1596,7 +1596,11 @@ export class StylePropertiesSection {
       const range = query.range as TextUtils.TextRange.TextRange;
       let success = false;
       if (query instanceof SDK.CSSContainerQuery.CSSContainerQuery) {
-        success = await cssModel.setContainerQueryText(query.styleSheetId, range, newContent);
+        if (query.textIsConditionText) {
+          success = await cssModel.setContainerQueryConditionText(query.styleSheetId, range, newContent);
+        } else {
+          success = await cssModel.setContainerQueryText(query.styleSheetId, range, newContent);
+        }
       } else if (query instanceof SDK.CSSSupports.CSSSupports) {
         success = await cssModel.setSupportsText(query.styleSheetId, range, newContent);
       } else if (query instanceof SDK.CSSScope.CSSScope) {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -229,7 +229,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
   aiCodeCompletionProvider?: StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider;
   #aiCodeCompletionSummaryToolbarContainer?: HTMLElement;
-  #aiCodeCompletionSummaryToolbar?: PanelsCommon.AiCodeCompletionSummaryToolbar;
+  #aiCodeCompletionSummaryToolbar?: PanelsCommon.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar;
 
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
     super(computedStyleModel, {delegatesFocus: true, useShadowDom: true, classes: ['flex-none']});
@@ -1581,12 +1581,13 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (this.#aiCodeCompletionSummaryToolbar) {
       return;
     }
-    this.#aiCodeCompletionSummaryToolbar = new PanelsCommon.AiCodeCompletionSummaryToolbar({
-      citationsTooltipId: CITATIONS_TOOLTIP_ID,
-      disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
-      spinnerTooltipId: SPINNER_TOOLTIP_ID,
-      panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
-    });
+    this.#aiCodeCompletionSummaryToolbar =
+        new PanelsCommon.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar({
+          citationsTooltipId: CITATIONS_TOOLTIP_ID,
+          disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
+          spinnerTooltipId: SPINNER_TOOLTIP_ID,
+          panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
+        });
     const containingPane = this.contentElement.enclosingNodeOrSelfWithClass('style-panes-wrapper') as HTMLElement;
     this.#aiCodeCompletionSummaryToolbarContainer =
         containingPane.createChild('div', 'ai-code-completion-summary-toolbar-container');

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -188,11 +188,11 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/emulation/DeviceModeToolbar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {ifDefined, styleMap} = Directives;
+const {ifDefined, live, styleMap} = Directives;
 const {widget} = UI.Widget;
 const {bindToSetting} = UI.UIUtils;
 
-export class DeviceModeToolbar {
+export class DeviceModeToolbar extends UI.Widget.Widget {
   private model: EmulationModel.DeviceModeModel.DeviceModeModel;
   private readonly showMediaInspectorSetting: Common.Settings.Setting<boolean>;
   private readonly showRulersSetting: Common.Settings.Setting<boolean>;
@@ -201,7 +201,6 @@ export class DeviceModeToolbar {
   private readonly showUserAgentTypeSetting: Common.Settings.Setting<boolean>;
   private autoAdjustScaleSetting: Common.Settings.Setting<boolean>;
   private readonly lastMode: Map<EmulationModel.EmulatedDevices.EmulatedDevice, EmulationModel.EmulatedDevices.Mode>;
-  readonly #element: HTMLDivElement;
   private readonly emulatedDevicesList: EmulationModel.EmulatedDevices.EmulatedDevicesList;
   private readonly persistenceSetting: Common.Settings.Setting<{device: string, orientation: string, mode: string}>;
   private mainToolbar: UI.Toolbar.Toolbar;
@@ -213,6 +212,7 @@ export class DeviceModeToolbar {
       model: EmulationModel.DeviceModeModel.DeviceModeModel,
       showMediaInspectorSetting: Common.Settings.Setting<boolean>,
       showRulersSetting: Common.Settings.Setting<boolean>) {
+    super();
     this.model = model;
     this.showMediaInspectorSetting = showMediaInspectorSetting;
     this.showRulersSetting = showRulersSetting;
@@ -220,21 +220,19 @@ export class DeviceModeToolbar {
     this.deviceOutlineSetting = this.model.deviceOutlineSetting();
     this.showDeviceScaleFactorSetting =
         Common.Settings.Settings.instance().createSetting('emulation.show-device-scale-factor', false);
-    this.showDeviceScaleFactorSetting.addChangeListener(this.update, this);
+    this.showDeviceScaleFactorSetting.addChangeListener(this.requestUpdate, this);
 
     this.showUserAgentTypeSetting =
         Common.Settings.Settings.instance().createSetting('emulation.show-user-agent-type', false);
-    this.showUserAgentTypeSetting.addChangeListener(this.update, this);
+    this.showUserAgentTypeSetting.addChangeListener(this.requestUpdate, this);
 
     this.autoAdjustScaleSetting =
         Common.Settings.Settings.instance().createSetting('emulation.auto-adjust-scale', true);
 
     this.lastMode = new Map();
 
-    this.#element = document.createElement('div');
-    this.#element.classList.add('device-mode-toolbar');
-    this.#element.setAttribute('jslog', `${VisualLogging.toolbar('device-mode').track({resize: true})}`);
-
+    this.contentElement.classList.add('device-mode-toolbar');
+    this.contentElement.setAttribute('jslog', VisualLogging.toolbar('device-mode').track({resize: true}).toString());
     this.mainToolbar = this.createMainToolbar();
     this.optionsToolbar = this.createOptionsToolbar();
 
@@ -247,13 +245,13 @@ export class DeviceModeToolbar {
     this.persistenceSetting = Common.Settings.Settings.instance().createSetting(
         'emulation.device-mode-value', {device: '', orientation: '', mode: ''});
 
-    this.model.toolbarControlsEnabledSetting().addChangeListener(this.update, this);
-    this.model.scaleSetting().addChangeListener(this.update, this);
-    this.model.uaSetting().addChangeListener(this.update, this);
-    this.model.deviceScaleFactorSetting().addChangeListener(this.update, this);
-    this.model.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.update, this);
+    this.model.toolbarControlsEnabledSetting().addChangeListener(this.requestUpdate, this);
+    this.model.scaleSetting().addChangeListener(this.requestUpdate, this);
+    this.model.uaSetting().addChangeListener(this.requestUpdate, this);
+    this.model.deviceScaleFactorSetting().addChangeListener(this.requestUpdate, this);
+    this.model.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.requestUpdate, this);
 
-    this.update();
+    this.requestUpdate();
   }
 
   private createEmptyToolbarElement(): HTMLDivElement {
@@ -292,7 +290,7 @@ export class DeviceModeToolbar {
   }
 
   private createMainToolbar(): UI.Toolbar.Toolbar {
-    const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
+    const mainToolbar = this.contentElement.createChild('devtools-toolbar', 'main-toolbar');
     return mainToolbar as UI.Toolbar.Toolbar;
   }
 
@@ -359,7 +357,7 @@ export class DeviceModeToolbar {
                 title=${i18nString(UIStrings.deviceType)}
                 aria-label=${i18nString(UIStrings.deviceType)}
                 @change=${this.onDeviceChange.bind(this)}
-                .value=${selectedDeviceOption === deviceModeOptions.responsive ? 'Responsive' : (selectedDeviceOption?.title || 'Responsive')}
+                .value=${live(selectedDeviceOption === deviceModeOptions.responsive ? 'Responsive' : (selectedDeviceOption?.title || 'Responsive'))}
                 jslog=${VisualLogging.dropDown().track({change: true}).context('device')}>
           <option value="Responsive" ?selected=${deviceModeOptions.responsive.selected} jslog=${VisualLogging.item(deviceModeOptions.responsive.jslogContext).track({click: true})}>
             ${deviceModeOptions.responsive.title}
@@ -485,7 +483,7 @@ export class DeviceModeToolbar {
   }
 
   private createOptionsToolbar(): UI.Toolbar.Toolbar {
-    const optionsToolbar = this.#element.createChild('devtools-toolbar', 'device-mode-toolbar-options');
+    const optionsToolbar = this.contentElement.createChild('devtools-toolbar', 'device-mode-toolbar-options');
     optionsToolbar.wrappable = true;
     optionsToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
     const moreOptionsButton = new UI.Toolbar.ToolbarMenuButton(
@@ -737,7 +735,7 @@ export class DeviceModeToolbar {
     const value = (event.target as HTMLSelectElement).value;
     if (value === 'Edit') {
       this.emulatedDevicesList.revealCustomSetting();
-      this.renderMainToolbar();
+      this.requestUpdate();
     } else if (value === 'Responsive') {
       this.switchToResponsive();
     } else {
@@ -751,7 +749,7 @@ export class DeviceModeToolbar {
   }
 
   private deviceListChanged(): void {
-    this.renderMainToolbar();
+    this.requestUpdate();
     const device = this.model.device();
     if (!device) {
       return;
@@ -875,11 +873,7 @@ export class DeviceModeToolbar {
     return `${(this.model.scale() * 100).toFixed(0)}`;
   }
 
-  element(): Element {
-    return this.#element;
-  }
-
-  update(): void {
+  override performUpdate(): void {
     const enabled = this.model.toolbarControlsEnabledSetting().get();
     this.mainToolbar.setEnabled(enabled);
     this.optionsToolbar.setEnabled(enabled);
@@ -942,7 +936,7 @@ export class DeviceModeToolbar {
       this.#measuringElement.style.pointerEvents = 'none';
       const dummyOption = document.createElement('option');
       this.#measuringElement.appendChild(dummyOption);
-      this.#element.appendChild(this.#measuringElement);
+      this.contentElement.appendChild(this.#measuringElement);
     }
 
     const dummyOption = this.#measuringElement.options[0];

package/front_end/panels/emulation/DeviceModeView.ts

@@ -124,7 +124,7 @@ export class DeviceModeView extends UI.Widget.VBox {
 
   private createUI(): void {
     this.toolbar = new DeviceModeToolbar(this.model, this.showMediaInspectorSetting, this.showRulersSetting);
-    this.contentElement.appendChild(this.toolbar.element());
+    this.toolbar.show(this.contentElement);
     this.contentClip = this.contentElement.createChild('div', 'device-mode-content-clip vbox');
     this.responsivePresetsContainer = this.contentClip.createChild('div', 'device-mode-presets-container');
     this.responsivePresetsContainer.setAttribute('jslog', `${VisualLogging.responsivePresets()}`);
@@ -358,7 +358,7 @@ export class DeviceModeView extends UI.Widget.VBox {
       this.cachedScale = this.model.scale();
     }
 
-    this.toolbar.update();
+    this.toolbar.requestUpdate();
     this.loadImage(this.screenImage, this.model.screenImage());
     this.loadImage(this.outlineImage, this.model.outlineImage());
     this.mediaInspector.setAxisTransform(this.model.scale());

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -269,11 +269,13 @@ export class HeapSnapshotGridNode extends
       const value = this.data[columnId];
       const percentColumn = columnId + '-percent';
       const percent = this.data[percentColumn];
+      const tooltipColumn = `${columnId}-tooltip`;
+      const tooltip = this.data[tooltipColumn];
       if (percent) {
         render(
             html`
           <div class="profile-multiple-values">
-            <span aria-hidden="true">${value}</span>
+            <span aria-hidden="true" title=${Directives.ifDefined(tooltip)}>${value}</span>
             <span class="percent-column" aria-hidden="true">${percent}</span>
           </div>`,
             cell);
@@ -283,7 +285,7 @@ export class HeapSnapshotGridNode extends
         render(
             html`
           <div>
-            <span>${value}</span>
+            <span title=${Directives.ifDefined(tooltip)}>${value}</span>
           </div>`,
             cell);
       }
@@ -560,6 +562,8 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
       retainedSize: i18n.ByteUtilities.formatBytesToKb(this.retainedSize),
       'shallowSize-percent': this.toPercentString(shallowSizePercent),
       'retainedSize-percent': this.toPercentString(retainedSizePercent),
+      'shallowSize-tooltip': i18n.ByteUtilities.bytesToString(this.shallowSize),
+      'retainedSize-tooltip': i18n.ByteUtilities.bytesToString(this.retainedSize),
     };
   }
 
@@ -580,8 +584,7 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
   }
 
   override createCell(columnId: string): HTMLElement {
-    const cell = columnId !== 'object' ? this.createValueCell(columnId) : this.createObjectCell();
-    return cell;
+    return columnId !== 'object' ? this.createValueCell(columnId) : this.createObjectCell();
   }
 
   createObjectCell(): HTMLElement {
@@ -1132,6 +1135,8 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
       retainedSize: i18n.ByteUtilities.formatBytesToKb(this.retainedSize),
       'shallowSize-percent': this.toPercentString(shallowSizePercent),
       'retainedSize-percent': this.toPercentString(retainedSizePercent),
+      'shallowSize-tooltip': i18n.ByteUtilities.bytesToString(this.shallowSize),
+      'retainedSize-tooltip': i18n.ByteUtilities.bytesToString(this.retainedSize),
     };
   }
 

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -23,7 +23,7 @@ export class AiCodeCompletionPlugin extends Plugin {
   #aiCodeCompletionDisclaimer?: PanelCommon.AiCodeCompletionDisclaimer;
   #aiCodeCompletionDisclaimerContainer = document.createElement('div');
   #aiCodeCompletionDisclaimerToolbarItem = new UI.Toolbar.ToolbarItem(this.#aiCodeCompletionDisclaimerContainer);
-  #aiCodeCompletionCitationsToolbar?: PanelCommon.AiCodeCompletionSummaryToolbar;
+  #aiCodeCompletionCitationsToolbar?: PanelCommon.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar;
   #aiCodeCompletionCitationsToolbarContainer = document.createElement('div');
   #aiCodeCompletionCitationsToolbarAttached = false;
   aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
@@ -113,11 +113,12 @@ export class AiCodeCompletionPlugin extends Plugin {
     if (this.#aiCodeCompletionCitationsToolbar) {
       return;
     }
-    this.#aiCodeCompletionCitationsToolbar = new PanelCommon.AiCodeCompletionSummaryToolbar({
-      citationsTooltipId: CITATIONS_TOOLTIP_ID,
-      hasTopBorder: true,
-      panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES
-    });
+    this.#aiCodeCompletionCitationsToolbar =
+        new PanelCommon.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar({
+          citationsTooltipId: CITATIONS_TOOLTIP_ID,
+          hasTopBorder: true,
+          panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES
+        });
     this.#aiCodeCompletionCitationsToolbar.show(this.#aiCodeCompletionCitationsToolbarContainer, undefined, true);
   }
 

package/front_end/panels/timeline/TimelineController.ts

@@ -5,7 +5,6 @@
 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 SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
@@ -254,7 +253,7 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
     if (options.enableJSSampling) {
       categoriesArray.push(disabledByDefault('v8.cpu_profiler'));
     }
-    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_INVALIDATION_TRACKING)) {
+    if (Common.Settings.Settings.instance().moduleSetting('timeline-invalidation-tracking').get() as boolean) {
       categoriesArray.push(disabledByDefault('devtools.timeline.invalidationTracking'));
     }
     if (options.capturePictures) {

package/front_end/panels/timeline/TimelinePanel.ts

@@ -740,7 +740,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   #instantiateNewModel(): Trace.TraceModel.Model {
     const config = Trace.Types.Configuration.defaults();
     config.showAllEvents = Common.Settings.Settings.instance().moduleSetting('timeline-show-all-events').get();
-    config.debugMode = Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_DEBUG_MODE);
+    config.debugMode = Common.Settings.Settings.instance().moduleSetting('timeline-debug-mode').get() as boolean;
 
     const traceEngineModel = Trace.TraceModel.Model.createWithAllHandlers(config);