chrome-devtools-frontend 1.0.1512349 → 1.0.1513662

package/front_end/core/sdk/TargetManager.ts

@@ -17,7 +17,7 @@ let targetManagerInstance: TargetManager|undefined;
 type ModelClass<T = SDKModel> = new (arg1: Target) => T;
 
 export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  #targetsInternal: Set<Target>;
+  #targets: Set<Target>;
   readonly #observers: Set<Observer>;
   /* eslint-disable @typescript-eslint/no-explicit-any */
   #modelListeners: Platform.MapUtilities.Multimap<string|symbol|number, {
@@ -30,19 +30,19 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   #scopedObservers: WeakSet<Observer|SDKModelObserver<any>>;
   /* eslint-enable @typescript-eslint/no-explicit-any */
   #isSuspended: boolean;
-  #browserTargetInternal: Target|null;
+  #browserTarget: Target|null;
   #scopeTarget: Target|null;
   #defaultScopeSet: boolean;
   readonly #scopeChangeListeners: Set<() => void>;
 
   private constructor() {
     super();
-    this.#targetsInternal = new Set();
+    this.#targets = new Set();
     this.#observers = new Set();
     this.#modelListeners = new Platform.MapUtilities.Multimap();
     this.#modelObservers = new Platform.MapUtilities.Multimap();
     this.#isSuspended = false;
-    this.#browserTargetInternal = null;
+    this.#browserTarget = null;
     this.#scopeTarget = null;
     this.#scopedObservers = new WeakSet();
     this.#defaultScopeSet = false;
@@ -82,7 +82,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     }
     this.#isSuspended = true;
     this.dispatchEventToListeners(Events.SUSPEND_STATE_CHANGED);
-    const suspendPromises = Array.from(this.#targetsInternal.values(), target => target.suspend(reason));
+    const suspendPromises = Array.from(this.#targets.values(), target => target.suspend(reason));
     await Promise.all(suspendPromises);
   }
 
@@ -92,7 +92,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     }
     this.#isSuspended = false;
     this.dispatchEventToListeners(Events.SUSPEND_STATE_CHANGED);
-    const resumePromises = Array.from(this.#targetsInternal.values(), target => target.resume());
+    const resumePromises = Array.from(this.#targets.values(), target => target.resume());
     await Promise.all(resumePromises);
   }
 
@@ -102,7 +102,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
 
   models<T extends SDKModel>(modelClass: ModelClass<T>, opts?: {scoped: boolean}): T[] {
     const result = [];
-    for (const target of this.#targetsInternal) {
+    for (const target of this.#targets) {
       if (opts?.scoped && !this.isInScope(target)) {
         continue;
       }
@@ -194,7 +194,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     if (opts?.scoped) {
       this.#scopedObservers.add(targetObserver);
     }
-    for (const target of this.#targetsInternal) {
+    for (const target of this.#targets) {
       if (!opts?.scoped || this.isInScope(target)) {
         targetObserver.targetAdded(target);
       }
@@ -217,7 +217,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
       void target.pageAgent().invoke_waitForDebugger();
     }
     target.createModels(new Set(this.#modelObservers.keysArray()));
-    this.#targetsInternal.add(target);
+    this.#targets.add(target);
 
     const inScope = this.isInScope(target);
     // Iterate over a copy. #observers might be modified during iteration.
@@ -250,12 +250,12 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   }
 
   removeTarget(target: Target): void {
-    if (!this.#targetsInternal.has(target)) {
+    if (!this.#targets.has(target)) {
       return;
     }
 
     const inScope = this.isInScope(target);
-    this.#targetsInternal.delete(target);
+    this.#targets.delete(target);
     for (const modelClass of target.models().keys()) {
       const model = target.models().get(modelClass);
       assertNotNullOrUndefined(model);
@@ -280,7 +280,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   }
 
   targets(): Target[] {
-    return [...this.#targetsInternal];
+    return [...this.#targets];
   }
 
   targetById(id: string): Target|null {
@@ -289,10 +289,10 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   }
 
   rootTarget(): Target|null {
-    if (this.#targetsInternal.size === 0) {
+    if (this.#targets.size === 0) {
       return null;
     }
-    return this.#targetsInternal.values().next().value ?? null;
+    return this.#targets.values().next().value ?? null;
   }
 
   primaryPageTarget(): Target|null {
@@ -307,25 +307,25 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   }
 
   browserTarget(): Target|null {
-    return this.#browserTargetInternal;
+    return this.#browserTarget;
   }
 
   async maybeAttachInitialTarget(): Promise<boolean> {
     if (!Boolean(Root.Runtime.Runtime.queryParam('browserConnection'))) {
       return false;
     }
-    if (!this.#browserTargetInternal) {
-      this.#browserTargetInternal = new Target(
+    if (!this.#browserTarget) {
+      this.#browserTarget = new Target(
           this, /* #id*/ 'main', /* #name*/ 'browser', TargetType.BROWSER, /* #parentTarget*/ null,
           /* #sessionId */ '', /* suspended*/ false, /* #connection*/ null, /* targetInfo*/ undefined);
-      this.#browserTargetInternal.createModels(new Set(this.#modelObservers.keysArray()));
+      this.#browserTarget.createModels(new Set(this.#modelObservers.keysArray()));
     }
     const targetId =
         await Host.InspectorFrontendHost.InspectorFrontendHostInstance.initialTargetId() as Protocol.Target.TargetID;
     // Do not await for Target.autoAttachRelated to return, as it goes throguh the renderer and we don't want to block early
     // at front-end initialization if a renderer is stuck. The rest of #target discovery and auto-attach process should happen
     // asynchronously upon Target.attachedToTarget.
-    void this.#browserTargetInternal.targetAgent().invoke_autoAttachRelated({
+    void this.#browserTarget.targetAgent().invoke_autoAttachRelated({
       targetId,
       waitForDebuggerOnStart: true,
     });
@@ -333,7 +333,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   }
 
   clearAllTargetsForTest(): void {
-    this.#targetsInternal.clear();
+    this.#targets.clear();
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/front_end/entrypoints/formatter_worker/AcornTokenizer.ts

@@ -35,8 +35,8 @@ export type TokenOrComment = Acorn.Token|Acorn.Comment;
  */
 export class AcornTokenizer {
   #textCursor: TextUtils.TextCursor.TextCursor;
-  #tokenLineStartInternal: number;
-  #tokenLineEndInternal: number;
+  #tokenLineStart: number;
+  #tokenLineEnd: number;
   #tokens: Array<Acorn.Comment|Acorn.Token>;
   #idx = 0;
 
@@ -44,8 +44,8 @@ export class AcornTokenizer {
     this.#tokens = tokens;
     const contentLineEndings = Platform.StringUtilities.findLineEndingIndexes(content);
     this.#textCursor = new TextUtils.TextCursor.TextCursor(contentLineEndings);
-    this.#tokenLineStartInternal = 0;
-    this.#tokenLineEndInternal = 0;
+    this.#tokenLineStart = 0;
+    this.#tokenLineEnd = 0;
   }
 
   static punctuator(token: Acorn.Token, values?: string): boolean {
@@ -83,10 +83,10 @@ export class AcornTokenizer {
     }
 
     this.#textCursor.advance(token.start);
-    this.#tokenLineStartInternal = this.#textCursor.lineNumber();
+    this.#tokenLineStart = this.#textCursor.lineNumber();
 
     this.#textCursor.advance(token.end);
-    this.#tokenLineEndInternal = this.#textCursor.lineNumber();
+    this.#tokenLineEnd = this.#textCursor.lineNumber();
     return token;
   }
 
@@ -99,11 +99,11 @@ export class AcornTokenizer {
   }
 
   tokenLineStart(): number {
-    return this.#tokenLineStartInternal;
+    return this.#tokenLineStart;
   }
 
   tokenLineEnd(): number {
-    return this.#tokenLineEndInternal;
+    return this.#tokenLineEnd;
   }
 }
 

package/front_end/entrypoints/formatter_worker/HTMLFormatter.ts

@@ -229,7 +229,7 @@ function hasTokenInSet(tokenTypes: Set<string>, type: string): boolean {
 
 export class HTMLModel {
   #state: ParseState = ParseState.INITIAL;
-  readonly #documentInternal: FormatterElement;
+  readonly #document: FormatterElement;
   #stack: FormatterElement[];
   readonly #tokens: Token[] = [];
   #tokenIndex = 0;
@@ -241,11 +241,11 @@ export class HTMLModel {
   #tagEndOffset?: number|null;
 
   constructor(text: string) {
-    this.#documentInternal = new FormatterElement('document');
-    this.#documentInternal.openTag = new Tag('document', 0, 0, new Map(), true, false);
-    this.#documentInternal.closeTag = new Tag('document', text.length, text.length, new Map(), false, false);
+    this.#document = new FormatterElement('document');
+    this.#document.openTag = new Tag('document', 0, 0, new Map(), true, false);
+    this.#document.closeTag = new Tag('document', text.length, text.length, new Map(), false, false);
 
-    this.#stack = [this.#documentInternal];
+    this.#stack = [this.#document];
 
     this.#build(text);
   }
@@ -432,7 +432,7 @@ export class HTMLModel {
       const topElement = this.#stack[this.#stack.length - 1];
       if (topElement) {
         const tagSet = AutoClosingTags.get(topElement.name);
-        if (topElement !== this.#documentInternal && topElement.openTag?.selfClosingTag) {
+        if (topElement !== this.#document && topElement.openTag?.selfClosingTag) {
           this.#popElement(autocloseTag(topElement, topElement.openTag.endOffset));
         } else if (tagSet?.has(tag.name)) {
           this.#popElement(autocloseTag(topElement, tag.startOffset));
@@ -485,7 +485,7 @@ export class HTMLModel {
   }
 
   document(): FormatterElement {
-    return this.#documentInternal;
+    return this.#document;
   }
 }
 

package/front_end/entrypoints/heap_snapshot_worker/AllocationProfile.ts

@@ -237,7 +237,7 @@ export class BottomUpAllocationNode {
   liveCount: number;
   liveSize: number;
   traceTopIds: number[];
-  readonly #callersInternal: BottomUpAllocationNode[];
+  readonly #callers: BottomUpAllocationNode[];
   constructor(functionInfo: FunctionAllocationInfo) {
     this.functionInfo = functionInfo;
     this.allocationCount = 0;
@@ -247,14 +247,14 @@ export class BottomUpAllocationNode {
 
     this.traceTopIds = [];
 
-    this.#callersInternal = [];
+    this.#callers = [];
   }
 
   addCaller(traceNode: TopDownAllocationNode): BottomUpAllocationNode {
     const functionInfo = traceNode.functionInfo;
     let result;
-    for (let i = 0; i < this.#callersInternal.length; i++) {
-      const caller = this.#callersInternal[i];
+    for (let i = 0; i < this.#callers.length; i++) {
+      const caller = this.#callers[i];
       if (caller.functionInfo === functionInfo) {
         result = caller;
         break;
@@ -262,17 +262,17 @@ export class BottomUpAllocationNode {
     }
     if (!result) {
       result = new BottomUpAllocationNode(functionInfo);
-      this.#callersInternal.push(result);
+      this.#callers.push(result);
     }
     return result;
   }
 
   callers(): BottomUpAllocationNode[] {
-    return this.#callersInternal;
+    return this.#callers;
   }
 
   hasCallers(): boolean {
-    return this.#callersInternal.length > 0;
+    return this.#callers.length > 0;
   }
 }
 

package/front_end/entrypoints/heap_snapshot_worker/HeapSnapshot.ts

@@ -197,7 +197,7 @@ export class HeapSnapshotEdgeIterator implements HeapSnapshotItemIterator {
 
 export class HeapSnapshotRetainerEdge implements HeapSnapshotItem {
   protected snapshot: HeapSnapshot;
-  #retainerIndexInternal!: number;
+  #retainerIndex!: number;
   #globalEdgeIndex!: number;
   #retainingNodeIndex?: number;
   #edgeInstance?: JSHeapSnapshotEdge|null;
@@ -224,7 +224,7 @@ export class HeapSnapshotRetainerEdge implements HeapSnapshotItem {
   }
 
   node(): HeapSnapshotNode {
-    return this.nodeInternal();
+    return this.#node();
   }
 
   nodeIndex(): number {
@@ -236,11 +236,11 @@ export class HeapSnapshotRetainerEdge implements HeapSnapshotItem {
   }
 
   retainerIndex(): number {
-    return this.#retainerIndexInternal;
+    return this.#retainerIndex;
   }
 
   setRetainerIndex(retainerIndex: number): void {
-    if (retainerIndex === this.#retainerIndexInternal) {
+    if (retainerIndex === this.#retainerIndex) {
       return;
     }
 
@@ -248,7 +248,7 @@ export class HeapSnapshotRetainerEdge implements HeapSnapshotItem {
       throw new Error('Snapshot does not contain retaining edges or retaining nodes');
     }
 
-    this.#retainerIndexInternal = retainerIndex;
+    this.#retainerIndex = retainerIndex;
     this.#globalEdgeIndex = this.snapshot.retainingEdges[retainerIndex];
     this.#retainingNodeIndex = this.snapshot.retainingNodes[retainerIndex];
     this.#edgeInstance = null;
@@ -259,7 +259,7 @@ export class HeapSnapshotRetainerEdge implements HeapSnapshotItem {
     this.setRetainerIndex(edgeIndex);
   }
 
-  private nodeInternal(): HeapSnapshotNode {
+  #node(): HeapSnapshotNode {
     if (!this.#nodeInstance) {
       this.#nodeInstance = this.snapshot.createNode(this.#retainingNodeIndex);
     }
@@ -278,7 +278,7 @@ export class HeapSnapshotRetainerEdge implements HeapSnapshotItem {
   }
 
   itemIndex(): number {
-    return this.#retainerIndexInternal;
+    return this.#retainerIndex;
   }
 
   serialize(): HeapSnapshotModel.HeapSnapshotModel.Edge {
@@ -893,7 +893,7 @@ export abstract class HeapSnapshot {
   readonly #noDistance = -5;
   rootNodeIndexInternal = 0;
   #snapshotDiffs: Record<string, Record<string, HeapSnapshotModel.HeapSnapshotModel.Diff>> = {};
-  #aggregatesForDiffInternal?: {
+  #aggregatesForDiff?: {
     interfaceDefinitions: string,
     aggregates: Record<string, HeapSnapshotModel.HeapSnapshotModel.AggregateForDiff>,
   };
@@ -1446,7 +1446,7 @@ export abstract class HeapSnapshot {
       // for class keys.
       aggregates = Object.create(null);
       for (const [classKey, aggregate] of aggregatesMap.entries()) {
-        const newKey = this.classKeyFromClassKeyInternal(classKey);
+        const newKey = this.#classKeyFromClassKey(classKey);
         aggregates[newKey] = aggregate;
       }
       if (key) {
@@ -1483,8 +1483,8 @@ export abstract class HeapSnapshot {
 
   aggregatesForDiff(interfaceDefinitions: string):
       Record<string, HeapSnapshotModel.HeapSnapshotModel.AggregateForDiff> {
-    if (this.#aggregatesForDiffInternal?.interfaceDefinitions === interfaceDefinitions) {
-      return this.#aggregatesForDiffInternal.aggregates;
+    if (this.#aggregatesForDiff?.interfaceDefinitions === interfaceDefinitions) {
+      return this.#aggregatesForDiff.aggregates;
     }
 
     // Temporarily apply the interface definitions from the other snapshot.
@@ -1509,7 +1509,7 @@ export abstract class HeapSnapshot {
       result[classKey] = {name: node.className(), indexes, ids, selfSizes};
     }
 
-    this.#aggregatesForDiffInternal = {interfaceDefinitions, aggregates: result};
+    this.#aggregatesForDiff = {interfaceDefinitions, aggregates: result};
     return result;
   }
 
@@ -2702,14 +2702,14 @@ export abstract class HeapSnapshot {
   // Converts an internal class key, suitable for categorizing within this
   // snapshot, to a public class key, which can be used in comparisons
   // between multiple snapshots.
-  classKeyFromClassKeyInternal(key: string|number): string {
+  #classKeyFromClassKey(key: string|number): string {
     return typeof key === 'number' ? (',' + this.strings[key]) : key;
   }
 
   nodeClassKey(snapshotObjectId: number): string|null {
     const node = this.nodeForSnapshotObjectId(snapshotObjectId);
     if (node) {
-      return this.classKeyFromClassKeyInternal(node.classKeyInternal());
+      return this.#classKeyFromClassKey(node.classKeyInternal());
     }
     return null;
   }
@@ -2921,7 +2921,7 @@ export interface HeapSnapshotHeader {
 export abstract class HeapSnapshotItemProvider {
   protected readonly iterator: HeapSnapshotItemIterator;
   readonly #indexProvider: HeapSnapshotItemIndexProvider;
-  readonly #isEmptyInternal: boolean;
+  readonly #isEmpty: boolean;
   protected iterationOrder: number[]|null;
   protected currentComparator: HeapSnapshotModel.HeapSnapshotModel.ComparatorConfig|null;
   #sortedPrefixLength: number;
@@ -2929,7 +2929,7 @@ export abstract class HeapSnapshotItemProvider {
   constructor(iterator: HeapSnapshotItemIterator, indexProvider: HeapSnapshotItemIndexProvider) {
     this.iterator = iterator;
     this.#indexProvider = indexProvider;
-    this.#isEmptyInternal = !iterator.hasNext();
+    this.#isEmpty = !iterator.hasNext();
     this.iterationOrder = null;
     this.currentComparator = null;
     this.#sortedPrefixLength = 0;
@@ -2947,7 +2947,7 @@ export abstract class HeapSnapshotItemProvider {
   }
 
   isEmpty(): boolean {
-    return this.#isEmptyInternal;
+    return this.#isEmpty;
   }
 
   serializeItemsRange(begin: number, end: number): HeapSnapshotModel.HeapSnapshotModel.ItemsRange {
@@ -3849,10 +3849,10 @@ export class JSHeapSnapshotEdge extends HeapSnapshotEdge {
 
   override hasStringName(): boolean {
     if (!this.isShortcut()) {
-      return this.hasStringNameInternal();
+      return this.#hasStringName();
     }
     // @ts-expect-error parseInt is successful against numbers.
-    return isNaN(parseInt(this.nameInternal(), 10));
+    return isNaN(parseInt(this.#name(), 10));
   }
 
   isElement(): boolean {
@@ -3880,7 +3880,7 @@ export class JSHeapSnapshotEdge extends HeapSnapshotEdge {
   }
 
   override name(): string {
-    const name = this.nameInternal();
+    const name = this.#name();
     if (!this.isShortcut()) {
       return String(name);
     }
@@ -3913,14 +3913,14 @@ export class JSHeapSnapshotEdge extends HeapSnapshotEdge {
     return '?' + name + '?';
   }
 
-  private hasStringNameInternal(): boolean {
+  #hasStringName(): boolean {
     const type = this.rawType();
     const snapshot = this.snapshot;
     return type !== snapshot.edgeElementType && type !== snapshot.edgeHiddenType;
   }
 
-  private nameInternal(): string|number {
-    return this.hasStringNameInternal() ? this.snapshot.strings[this.nameOrIndex()] : this.nameOrIndex();
+  #name(): string|number {
+    return this.#hasStringName() ? this.snapshot.strings[this.nameOrIndex()] : this.nameOrIndex();
   }
 
   private nameOrIndex(): number {
@@ -3932,7 +3932,7 @@ export class JSHeapSnapshotEdge extends HeapSnapshotEdge {
   }
 
   override nameIndex(): number {
-    if (!this.hasStringNameInternal()) {
+    if (!this.#hasStringName()) {
       throw new Error('Edge does not have string name');
     }
     return this.nameOrIndex();

package/front_end/entrypoints/main/GlobalAiButton.ts

@@ -158,9 +158,9 @@ export class GlobalAiButton extends UI.Widget.Widget {
 
     const hasExplicitUserPreference =
         UI.InspectorView.InspectorView.instance().isUserExplicitlyUpdatedDrawerOrientation();
-    const isVerticalDrawerExperimentEnabled =
-        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.VERTICAL_DRAWER);
-    if (isVerticalDrawerExperimentEnabled && !hasExplicitUserPreference) {
+    const isVerticalDrawerFeatureEnabled =
+        Boolean(Root.Runtime.hostConfig.devToolsFlexibleLayout?.verticalDrawerEnabled);
+    if (isVerticalDrawerFeatureEnabled && !hasExplicitUserPreference) {
       // This mimics what we're doing while showing the drawer via `ESC`.
       // There is a bug where opening the sidebar directly for the first time,
       // and triggering a drawer rotation without calling `showDrawer({focus: true})` makes the drawer disappear.

package/front_end/entrypoints/main/MainImpl.ts

@@ -43,6 +43,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as AutofillManager from '../../models/autofill_manager/autofill_manager.js';
+import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
 import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
@@ -53,6 +54,7 @@ import * as Logs from '../../models/logs/logs.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as ProjectSettings from '../../models/project_settings/project_settings.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import type * as PanelCommon from '../../panels/common/common.js';
 import * as Snippets from '../../panels/snippets/snippets.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbar from '../../ui/components/snackbars/snackbars.js';
@@ -122,6 +124,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('entrypoints/main/MainImpl.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+let loadedPanelCommonModule: typeof PanelCommon|undefined;
 export class MainImpl {
   #readyForTestPromise = Promise.withResolvers<void>();
 
@@ -296,7 +299,6 @@ export class MainImpl {
     Root.Runtime.experiments.register('sampling-heap-profiler-timeline', 'Sampling heap profiler timeline', true);
     Root.Runtime.experiments.register(
         'show-option-tp-expose-internals-in-heap-snapshot', 'Show option to expose internals in heap snapshots');
-    Root.Runtime.experiments.register('vertical-drawer', 'Enable vertical drawer configuration');
 
     // Timeline
     Root.Runtime.experiments.register(
@@ -341,11 +343,6 @@ export class MainImpl {
     // New cookie features.
     Root.Runtime.experiments.register('experimental-cookie-features', 'Enable experimental cookie features');
 
-    // Highlights a violating node or attribute by rendering a squiggly line under it and adding a tooltip linking to the issues panel.
-    Root.Runtime.experiments.register(
-        Root.Runtime.ExperimentName.HIGHLIGHT_ERRORS_ELEMENTS_PANEL,
-        'Highlights a violating node or attribute in the Elements panel DOM tree');
-
     // Change grouping of sources panel to use Authored/Deployed trees
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING, 'Group sources into authored and deployed trees',
@@ -364,7 +361,6 @@ export class MainImpl {
 
     Root.Runtime.experiments.enableExperimentsByDefault([
       Root.Runtime.ExperimentName.FULL_ACCESSIBILITY_TREE,
-      Root.Runtime.ExperimentName.HIGHLIGHT_ERRORS_ELEMENTS_PANEL,
       ...(Root.Runtime.Runtime.queryParam('isChromeForTesting') ? ['protocol-monitor'] : []),
     ]);
 
@@ -521,9 +517,15 @@ export class MainImpl {
     UI.ShortcutRegistry.ShortcutRegistry.instance({forceNew: true, actionRegistry: actionRegistryInstance});
     this.#registerMessageSinkListener();
 
-    // Initialize `GDPClient` for Google Developer Program integration
+    // Initialize `GDPClient` and `UserBadges` for Google Developer Program integration
     if (Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled) {
       void Host.GdpClient.GdpClient.instance().initialize();
+      void Badges.UserBadges.instance().initialize();
+      Badges.UserBadges.instance().addEventListener(Badges.Events.BADGE_TRIGGERED, async ev => {
+        loadedPanelCommonModule ??= await import('../../panels/common/common.js') as typeof PanelCommon;
+        const badgeNotification = new loadedPanelCommonModule.BadgeNotification();
+        void badgeNotification.present(ev.data);
+      });
     }
 
     MainImpl.timeEnd('Main._createAppUI');
@@ -790,13 +792,13 @@ export class SearchActionDelegate implements UI.ActionRegistration.ActionDelegat
 let mainMenuItemInstance: MainMenuItem;
 
 export class MainMenuItem implements UI.Toolbar.Provider {
-  readonly #itemInternal: UI.Toolbar.ToolbarMenuButton;
+  readonly #item: UI.Toolbar.ToolbarMenuButton;
   constructor() {
-    this.#itemInternal = new UI.Toolbar.ToolbarMenuButton(
+    this.#item = new UI.Toolbar.ToolbarMenuButton(
         this.#handleContextMenu.bind(this), /* isIconDropdown */ true, /* useSoftMenu */ true, 'main-menu',
         'dots-vertical');
-    this.#itemInternal.element.classList.add('main-menu');
-    this.#itemInternal.setTitle(i18nString(UIStrings.customizeAndControlDevtools));
+    this.#item.element.classList.add('main-menu');
+    this.#item.setTitle(i18nString(UIStrings.customizeAndControlDevtools));
   }
 
   static instance(opts: {
@@ -811,7 +813,7 @@ export class MainMenuItem implements UI.Toolbar.Provider {
   }
 
   item(): UI.Toolbar.ToolbarItem|null {
-    return this.#itemInternal;
+    return this.#item;
   }
 
   #handleContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
@@ -900,7 +902,7 @@ export class MainMenuItem implements UI.Toolbar.Provider {
       contextMenu.headerSection().appendCustomItem(dockItemElement, 'dock-side');
     }
 
-    const button = this.#itemInternal.element;
+    const button = this.#item.element;
 
     function setDockSide(side: UI.DockController.DockState): void {
       void dockController.once(UI.DockController.Events.AFTER_DOCK_SIDE_CHANGED).then(() => button.focus());

package/front_end/entrypoints/main/main-meta.ts

@@ -6,7 +6,6 @@ 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 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 * as Workspace from '../../models/workspace/workspace.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -296,7 +295,7 @@ UI.ActionRegistration.registerActionExtension({
       shortcut: 'Shift+Esc',
     },
   ],
-  experiment: Root.Runtime.ExperimentName.VERTICAL_DRAWER,
+  condition: config => Boolean(config?.devToolsFlexibleLayout?.verticalDrawerEnabled)
 });
 
 UI.ActionRegistration.registerActionExtension({