chrome-devtools-frontend 1.0.1539972 → 1.0.1541169

package/front_end/models/trace/Processor.ts

@@ -431,9 +431,13 @@ export class TraceProcessor extends EventTarget {
   #computeInsightSet(data: Handlers.Types.HandlerData, context: Insights.Types.InsightSetContext): void {
     const logger = context.options.logger;
 
+    if (!this.#insights) {
+      this.#insights = new Map();
+    }
+
     let id, urlString, navigation;
     if (context.navigation) {
-      id = context.navigationId;
+      id = `NAVIGATION_${this.#insights.size}`;
       urlString = data.Meta.finalDisplayUrlByNavigationId.get(context.navigationId) ?? data.Meta.mainFrameURL;
       navigation = context.navigation;
     } else {
@@ -503,9 +507,6 @@ export class TraceProcessor extends EventTarget {
       bounds: context.bounds,
       model: insightSetModel,
     };
-    if (!this.#insights) {
-      this.#insights = new Map();
-    }
     this.#insights.set(insightSet.id, insightSet);
     this.sortInsightSet(insightSet, context.options.metadata ?? null);
   }

package/front_end/models/trace/insights/types.ts

@@ -110,7 +110,7 @@ export type PartialInsightModel<T> =
  * navigation (or the end of the trace).
  */
 export interface InsightSet {
-  /** If for a navigation, this is the navigationId. Else it is Trace.Types.Events.NO_NAVIGATION. */
+  /** If for a navigation, this is of the form "NAVIGATION_(index)". Else it is Trace.Types.Events.NO_NAVIGATION. */
   id: Types.Events.NavigationId;
   /** The URL to show in the accordion list. */
   url: URL;

package/front_end/models/trace/types/TraceEvents.ts

@@ -1001,7 +1001,7 @@ export const NO_NAVIGATION = 'NO_NAVIGATION';
  * portion of the trace for which we don't have any navigation event for (as it happeneded prior
  * to the trace start).
  */
-export type NavigationId = string|typeof NO_NAVIGATION;
+export type NavigationId = string;
 
 /**
  * This is a synthetic Layout shift cluster. The rawSourceEvent is the worst layout shift event

package/front_end/models/workspace/IgnoreListManager.ts

@@ -50,51 +50,49 @@ export interface IgnoreListGeneralRules {
 
 export class IgnoreListManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel> {
-  readonly #listeners: Set<() => void>;
-  readonly #isIgnoreListedURLCache: Map<string, boolean>;
-  readonly #contentScriptExecutionContexts: Set<string>;
+  readonly #settings: Common.Settings.Settings;
+  readonly #targetManager: SDK.TargetManager.TargetManager;
 
-  private constructor() {
+  readonly #listeners = new Set<() => void>();
+  readonly #isIgnoreListedURLCache = new Map<string, boolean>();
+  readonly #contentScriptExecutionContexts = new Set<string>();
+
+  private constructor(settings: Common.Settings.Settings, targetManager: SDK.TargetManager.TargetManager) {
     super();
+    this.#settings = settings;
+    this.#targetManager = targetManager;
 
-    SDK.TargetManager.TargetManager.instance().addModelListener(
+    this.#targetManager.addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.GlobalObjectCleared,
         this.clearCacheIfNeeded.bind(this), this);
-    SDK.TargetManager.TargetManager.instance().addModelListener(
+    this.#targetManager.addModelListener(
         SDK.RuntimeModel.RuntimeModel, SDK.RuntimeModel.Events.ExecutionContextCreated, this.onExecutionContextCreated,
         this, {scoped: true});
-    SDK.TargetManager.TargetManager.instance().addModelListener(
+    this.#targetManager.addModelListener(
         SDK.RuntimeModel.RuntimeModel, SDK.RuntimeModel.Events.ExecutionContextDestroyed,
         this.onExecutionContextDestroyed, this, {scoped: true});
-    Common.Settings.Settings.instance()
-        .moduleSetting('skip-stack-frames-pattern')
-        .addChangeListener(this.patternChanged.bind(this));
-    Common.Settings.Settings.instance()
-        .moduleSetting('skip-content-scripts')
-        .addChangeListener(this.patternChanged.bind(this));
-    Common.Settings.Settings.instance()
-        .moduleSetting('automatically-ignore-list-known-third-party-scripts')
-        .addChangeListener(this.patternChanged.bind(this));
-    Common.Settings.Settings.instance()
-        .moduleSetting('enable-ignore-listing')
+    this.#settings.moduleSetting('skip-stack-frames-pattern').addChangeListener(this.patternChanged.bind(this));
+    this.#settings.moduleSetting('skip-content-scripts').addChangeListener(this.patternChanged.bind(this));
+    this.#settings.moduleSetting('automatically-ignore-list-known-third-party-scripts')
         .addChangeListener(this.patternChanged.bind(this));
-    Common.Settings.Settings.instance()
-        .moduleSetting('skip-anonymous-scripts')
-        .addChangeListener(this.patternChanged.bind(this));
-
-    this.#listeners = new Set();
-    this.#isIgnoreListedURLCache = new Map();
-    this.#contentScriptExecutionContexts = new Set();
+    this.#settings.moduleSetting('enable-ignore-listing').addChangeListener(this.patternChanged.bind(this));
+    this.#settings.moduleSetting('skip-anonymous-scripts').addChangeListener(this.patternChanged.bind(this));
 
-    SDK.TargetManager.TargetManager.instance().observeModels(SDK.DebuggerModel.DebuggerModel, this);
+    this.#targetManager.observeModels(SDK.DebuggerModel.DebuggerModel, this);
   }
 
   static instance(opts: {
     forceNew: boolean|null,
-  } = {forceNew: null}): IgnoreListManager {
+    settings?: Common.Settings.Settings,
+    targetManager?: SDK.TargetManager.TargetManager,
+  } = {
+    forceNew: null,
+  }): IgnoreListManager {
     const {forceNew} = opts;
     if (!ignoreListManagerInstance || forceNew) {
-      ignoreListManagerInstance = new IgnoreListManager();
+      ignoreListManagerInstance = new IgnoreListManager(
+          opts.settings ?? Common.Settings.Settings.instance(),
+          opts.targetManager ?? SDK.TargetManager.TargetManager.instance());
     }
 
     return ignoreListManagerInstance;
@@ -135,8 +133,7 @@ export class IgnoreListManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     if (this.isContentScript(event.data)) {
       this.#contentScriptExecutionContexts.add(event.data.uniqueId);
       if (this.skipContentScripts) {
-        for (const debuggerModel of SDK.TargetManager.TargetManager.instance().models(
-                 SDK.DebuggerModel.DebuggerModel)) {
+        for (const debuggerModel of this.#targetManager.models(SDK.DebuggerModel.DebuggerModel)) {
           void this.updateIgnoredExecutionContexts(debuggerModel);
         }
       }
@@ -148,8 +145,7 @@ export class IgnoreListManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     if (this.isContentScript(event.data)) {
       this.#contentScriptExecutionContexts.delete(event.data.uniqueId);
       if (this.skipContentScripts) {
-        for (const debuggerModel of SDK.TargetManager.TargetManager.instance().models(
-                 SDK.DebuggerModel.DebuggerModel)) {
+        for (const debuggerModel of this.#targetManager.models(SDK.DebuggerModel.DebuggerModel)) {
           void this.updateIgnoredExecutionContexts(debuggerModel);
         }
       }
@@ -163,8 +159,7 @@ export class IgnoreListManager extends Common.ObjectWrapper.ObjectWrapper<EventT
   }
 
   private getSkipStackFramesPatternSetting(): Common.Settings.RegExpSetting {
-    return Common.Settings.Settings.instance().moduleSetting('skip-stack-frames-pattern') as
-        Common.Settings.RegExpSetting;
+    return this.#settings.moduleSetting('skip-stack-frames-pattern') as Common.Settings.RegExpSetting;
   }
 
   private setIgnoreListPatterns(debuggerModel: SDK.DebuggerModel.DebuggerModel): Promise<boolean> {
@@ -327,58 +322,57 @@ export class IgnoreListManager extends Common.ObjectWrapper.ObjectWrapper<EventT
   }
 
   get enableIgnoreListing(): boolean {
-    return Common.Settings.Settings.instance().moduleSetting('enable-ignore-listing').get();
+    return this.#settings.moduleSetting('enable-ignore-listing').get();
   }
 
   set enableIgnoreListing(value: boolean) {
-    Common.Settings.Settings.instance().moduleSetting('enable-ignore-listing').set(value);
+    this.#settings.moduleSetting('enable-ignore-listing').set(value);
   }
 
   get skipContentScripts(): boolean {
-    return this.enableIgnoreListing && Common.Settings.Settings.instance().moduleSetting('skip-content-scripts').get();
+    return this.enableIgnoreListing && this.#settings.moduleSetting('skip-content-scripts').get();
   }
 
   get skipAnonymousScripts(): boolean {
-    return this.enableIgnoreListing &&
-        Common.Settings.Settings.instance().moduleSetting('skip-anonymous-scripts').get();
+    return this.enableIgnoreListing && this.#settings.moduleSetting('skip-anonymous-scripts').get();
   }
 
   get automaticallyIgnoreListKnownThirdPartyScripts(): boolean {
     return this.enableIgnoreListing &&
-        Common.Settings.Settings.instance().moduleSetting('automatically-ignore-list-known-third-party-scripts').get();
+        this.#settings.moduleSetting('automatically-ignore-list-known-third-party-scripts').get();
   }
 
   ignoreListContentScripts(): void {
     if (!this.enableIgnoreListing) {
       this.enableIgnoreListing = true;
     }
-    Common.Settings.Settings.instance().moduleSetting('skip-content-scripts').set(true);
+    this.#settings.moduleSetting('skip-content-scripts').set(true);
   }
 
   unIgnoreListContentScripts(): void {
-    Common.Settings.Settings.instance().moduleSetting('skip-content-scripts').set(false);
+    this.#settings.moduleSetting('skip-content-scripts').set(false);
   }
 
   ignoreListAnonymousScripts(): void {
     if (!this.enableIgnoreListing) {
       this.enableIgnoreListing = true;
     }
-    Common.Settings.Settings.instance().moduleSetting('skip-anonymous-scripts').set(true);
+    this.#settings.moduleSetting('skip-anonymous-scripts').set(true);
   }
 
   unIgnoreListAnonymousScripts(): void {
-    Common.Settings.Settings.instance().moduleSetting('skip-anonymous-scripts').set(false);
+    this.#settings.moduleSetting('skip-anonymous-scripts').set(false);
   }
 
   ignoreListThirdParty(): void {
     if (!this.enableIgnoreListing) {
       this.enableIgnoreListing = true;
     }
-    Common.Settings.Settings.instance().moduleSetting('automatically-ignore-list-known-third-party-scripts').set(true);
+    this.#settings.moduleSetting('automatically-ignore-list-known-third-party-scripts').set(true);
   }
 
   unIgnoreListThirdParty(): void {
-    Common.Settings.Settings.instance().moduleSetting('automatically-ignore-list-known-third-party-scripts').set(false);
+    this.#settings.moduleSetting('automatically-ignore-list-known-third-party-scripts').set(false);
   }
 
   ignoreListURL(url: Platform.DevToolsPath.UrlString): void {
@@ -467,7 +461,7 @@ export class IgnoreListManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     this.#isIgnoreListedURLCache.clear();
 
     const promises: Array<Promise<unknown>> = [];
-    for (const debuggerModel of SDK.TargetManager.TargetManager.instance().models(SDK.DebuggerModel.DebuggerModel)) {
+    for (const debuggerModel of this.#targetManager.models(SDK.DebuggerModel.DebuggerModel)) {
       promises.push(this.setIgnoreListPatterns(debuggerModel));
       const sourceMapManager = debuggerModel.sourceMapManager();
       for (const script of debuggerModel.scripts()) {

package/front_end/models/workspace/workspace-meta.ts

@@ -0,0 +1,40 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../core/common/common.js';
+
+Common.Settings.registerSettingExtension({
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  settingName: 'skip-stack-frames-pattern',
+  settingType: Common.Settings.SettingType.REGEX,
+  defaultValue: '/node_modules/|^node:',
+});
+
+Common.Settings.registerSettingExtension({
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  settingName: 'skip-content-scripts',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
+Common.Settings.registerSettingExtension({
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  settingName: 'automatically-ignore-list-known-third-party-scripts',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
+Common.Settings.registerSettingExtension({
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  settingName: 'skip-anonymous-scripts',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
+Common.Settings.registerSettingExtension({
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  settingName: 'enable-ignore-listing',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});

package/front_end/panels/animation/AnimationTimeline.ts

@@ -219,6 +219,8 @@ const DEFAULT_TOOLBAR_VIEW: ToolbarView = (input: ToolbarViewInput, output: unde
 };
 // clang-format on
 
+const DEFAULT_DURATION = 100;
+
 let animationTimelineInstance: AnimationTimeline;
 export class AnimationTimeline extends UI.Widget.VBox implements
     SDK.TargetManager.SDKModelObserver<SDK.AnimationModel.AnimationModel> {
@@ -233,7 +235,6 @@ export class AnimationTimeline extends UI.Widget.VBox implements
   #clearButton!: UI.Toolbar.ToolbarButton;
   #selectedGroup!: SDK.AnimationModel.AnimationGroup|null;
   #renderQueue!: AnimationUI[];
-  #defaultDuration: number;
   #duration: number;
   #timelineControlsWidth: number;
   readonly #nodesMap: Map<number, NodeUI>;
@@ -297,8 +298,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
         i18nString(UIStrings.noEffectSelected), i18nString(UIStrings.selectAnEffectAboveToInspectAnd));
     noEffectSelectedPlaceholder.show(timelineHint);
 
-    /** @constant */ this.#defaultDuration = 100;
-    this.#duration = this.#defaultDuration;
+    this.#duration = DEFAULT_DURATION;
     this.#nodesMap = new Map();
     this.#uiAnimations = [];
     this.#groupBuffer = [];
@@ -614,7 +614,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     this.#nodesMap.clear();
     this.#animationsMap.clear();
     this.#animationsContainer.removeChildren();
-    this.#duration = this.#defaultDuration;
+    this.#duration = DEFAULT_DURATION;
     this.#timelineScrubber.classList.add('hidden');
     this.#gridHeader.classList.remove('scrubber-enabled');
     this.#selectedGroup = null;

package/front_end/panels/animation/AnimationUI.ts

@@ -32,10 +32,10 @@ const str_ = i18n.i18n.registerUIStrings('panels/animation/AnimationUI.ts', UISt
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 interface CachedElement {
-  group: HTMLElement|null;
-  animationLine: HTMLElement|null;
-  keyframePoints: Record<number, HTMLElement>;
-  keyframeRender: Record<number, HTMLElement>;
+  group: SVGElement|null;
+  animationLine: SVGElement|null;
+  keyframePoints: Record<number, SVGElement>;
+  keyframeRender: Record<number, SVGElement>;
 }
 
 export class AnimationUI {
@@ -43,15 +43,15 @@ export class AnimationUI {
   #timeline: AnimationTimeline;
   #keyframes?: SDK.AnimationModel.KeyframeStyle[];
   #nameElement: HTMLElement;
-  readonly #svg: Element;
-  #activeIntervalGroup: Element;
-  #cachedElements: CachedElement[];
-  #movementInMs: number;
-  #keyboardMovementRateMs: number;
+  readonly #svg: SVGElement;
+  #activeIntervalGroup: SVGGElement;
+  #cachedElements: CachedElement[] = [];
+  #movementInMs = 0;
+  #keyboardMovementRateMs = 50;
   #color: string;
   #node?: SDK.DOMModel.DOMNode|null;
-  #delayLine?: Element;
-  #endDelayLine?: Element;
+  #delayLine?: SVGLineElement;
+  #endDelayLine?: SVGLineElement;
   #tailGroup?: Element;
   #mouseEventType?: Events;
   #keyframeMoved?: number|null;
@@ -73,7 +73,7 @@ export class AnimationUI {
 
     this.#svg = UI.UIUtils.createSVGChild(parentElement, 'svg', 'animation-ui');
     this.#svg.setAttribute('height', Options.AnimationSVGHeight.toString());
-    (this.#svg as HTMLElement).style.marginLeft = '-' + Options.AnimationMargin + 'px';
+    this.#svg.style.marginLeft = '-' + Options.AnimationMargin + 'px';
     this.#svg.addEventListener('contextmenu', this.onContextMenu.bind(this));
     this.#activeIntervalGroup = UI.UIUtils.createSVGChild(this.#svg, 'g');
     this.#activeIntervalGroup.setAttribute('jslog', `${VisualLogging.animationClip().track({drag: true})}`);
@@ -86,10 +86,6 @@ export class AnimationUI {
           this.#activeIntervalGroup, this.keydownMove.bind(this, Events.ANIMATION_DRAG, null));
     }
 
-    this.#cachedElements = [];
-
-    this.#movementInMs = 0;
-    this.#keyboardMovementRateMs = 50;
     this.#color = AnimationUI.colorForAnimation(this.#animation);
   }
 
@@ -125,19 +121,19 @@ export class AnimationUI {
     this.#node = node;
   }
 
-  private createLine(parentElement: HTMLElement, className: string): Element {
+  private createLine(parentElement: SVGElement, className: string): SVGLineElement {
     const line = UI.UIUtils.createSVGChild(parentElement, 'line', className);
     line.setAttribute('x1', Options.AnimationMargin.toString());
     line.setAttribute('y1', Options.AnimationHeight.toString());
     line.setAttribute('y2', Options.AnimationHeight.toString());
-    (line as HTMLElement).style.stroke = this.#color;
+    line.style.stroke = this.#color;
     return line;
   }
 
-  private drawAnimationLine(iteration: number, parentElement: HTMLElement): void {
+  private drawAnimationLine(iteration: number, parentElement: SVGElement): void {
     const cache = this.#cachedElements[iteration];
     if (!cache.animationLine) {
-      cache.animationLine = (this.createLine(parentElement, 'animation-line') as HTMLElement);
+      cache.animationLine = this.createLine(parentElement, 'animation-line');
     }
     if (!cache.animationLine) {
       return;
@@ -147,7 +143,7 @@ export class AnimationUI {
         'x2', (this.duration() * this.#timeline.pixelTimeRatio() + Options.AnimationMargin).toFixed(2));
   }
 
-  private drawDelayLine(parentElement: HTMLElement): void {
+  private drawDelayLine(parentElement: SVGElement): void {
     if (!this.#delayLine || !this.#endDelayLine) {
       this.#delayLine = this.createLine(parentElement, 'animation-delay-line');
       this.#endDelayLine = this.createLine(parentElement, 'animation-delay-line');
@@ -164,7 +160,7 @@ export class AnimationUI {
         this.#timeline.width(),
         (this.delayOrStartTime() + this.duration() * this.#animation.source().iterations()) *
             this.#timeline.pixelTimeRatio());
-    (this.#endDelayLine as HTMLElement).style.transform = 'translateX(' + leftMargin.toFixed(2) + 'px)';
+    this.#endDelayLine.style.transform = 'translateX(' + leftMargin.toFixed(2) + 'px)';
     this.#endDelayLine.setAttribute('x1', margin.toString());
     this.#endDelayLine.setAttribute(
         'x2',
@@ -179,10 +175,8 @@ export class AnimationUI {
       return;
     }
 
-    const circle =
-        (UI.UIUtils.createSVGChild(
-             parentElement, 'circle', keyframeIndex <= 0 ? 'animation-endpoint' : 'animation-keyframe-point') as
-         HTMLElement);
+    const circle = UI.UIUtils.createSVGChild(
+        parentElement, 'circle', keyframeIndex <= 0 ? 'animation-endpoint' : 'animation-keyframe-point');
     circle.setAttribute('cx', x.toFixed(2));
     circle.setAttribute('cy', Options.AnimationHeight.toString());
     circle.style.stroke = this.#color;
@@ -221,10 +215,10 @@ export class AnimationUI {
   }
 
   private renderKeyframe(
-      iteration: number, keyframeIndex: number, parentElement: HTMLElement, leftDistance: number, width: number,
+      iteration: number, keyframeIndex: number, parentElement: SVGElement, leftDistance: number, width: number,
       easing: string): void {
-    function createStepLine(parentElement: HTMLElement, x: number, strokeColor: string): void {
-      const line = (UI.UIUtils.createSVGChild(parentElement, 'line') as HTMLElement);
+    function createStepLine(parentElement: SVGElement, x: number, strokeColor: string): void {
+      const line = UI.UIUtils.createSVGChild(parentElement, 'line');
       line.setAttribute('x1', x.toString());
       line.setAttribute('x2', x.toString());
       line.setAttribute('y1', Options.AnimationMargin.toString());
@@ -237,7 +231,7 @@ export class AnimationUI {
     if (!cache[keyframeIndex]) {
       const svg = bezier ? UI.UIUtils.createSVGChild(parentElement, 'path', 'animation-keyframe') :
                            UI.UIUtils.createSVGChild(parentElement, 'g', 'animation-keyframe-step');
-      cache[keyframeIndex] = (svg as HTMLElement);
+      cache[keyframeIndex] = svg;
     }
     const group = cache[keyframeIndex];
     group.tabIndex = 0;
@@ -269,14 +263,14 @@ export class AnimationUI {
     const maxWidth = this.#timeline.width() - Options.AnimationMargin;
 
     this.#svg.setAttribute('width', (maxWidth + 2 * Options.AnimationMargin).toFixed(2));
-    (this.#activeIntervalGroup as HTMLElement).style.transform =
+    this.#activeIntervalGroup.style.transform =
         'translateX(' + (this.delayOrStartTime() * this.#timeline.pixelTimeRatio()).toFixed(2) + 'px)';
 
     this.#nameElement.style.transform = 'translateX(' +
         (Math.max(this.delayOrStartTime(), 0) * this.#timeline.pixelTimeRatio() + Options.AnimationMargin).toFixed(2) +
         'px)';
     this.#nameElement.style.width = (this.duration() * this.#timeline.pixelTimeRatio()).toFixed(2) + 'px';
-    this.drawDelayLine((this.#svg as HTMLElement));
+    this.drawDelayLine(this.#svg);
 
     if (this.#animation.type() === 'CSSTransition') {
       this.renderTransition();
@@ -307,7 +301,7 @@ export class AnimationUI {
   }
 
   private renderTransition(): void {
-    const activeIntervalGroup = (this.#activeIntervalGroup as HTMLElement);
+    const activeIntervalGroup = this.#activeIntervalGroup;
     if (!this.#cachedElements[0]) {
       this.#cachedElements[0] = {animationLine: null, keyframePoints: {}, keyframeRender: {}, group: null};
     }
@@ -326,7 +320,7 @@ export class AnimationUI {
         animationLine: null,
         keyframePoints: {},
         keyframeRender: {},
-        group: (UI.UIUtils.createSVGChild(parentElement, 'g') as HTMLElement),
+        group: UI.UIUtils.createSVGChild(parentElement, 'g'),
       };
     }
     const group = this.#cachedElements[iteration].group;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -45,6 +45,7 @@ import type * as Elements from '../../models/elements/elements.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import type {DirectiveResult} from '../../third_party/lit/lib/directive.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
@@ -351,10 +352,13 @@ export function isOpeningTag(context: TagTypeContext): context is OpeningTagCont
 }
 
 export interface ViewInput {
+  showAdAdorner: boolean;
   adorners?: Set<Adorners.Adorner.Adorner>;
   nodeInfo?: DocumentFragment;
 
   onGutterClick: (e: Event) => void;
+  onAdornerAdded: (adorner: Adorners.Adorner.Adorner) => void;
+  onAdornerRemoved: (adorner: Adorners.Adorner.Adorner) => void;
 }
 
 export interface ViewOutput {
@@ -363,7 +367,23 @@ export interface ViewOutput {
   contentElement?: HTMLElement;
 }
 
+function adornerRef(input: ViewInput): DirectiveResult<typeof Lit.Directives.RefDirective> {
+  let adorner: Adorners.Adorner.Adorner|undefined;
+  return ref((el?: Element) => {
+    if (adorner) {
+      input.onAdornerRemoved(adorner);
+    }
+    adorner = el as Adorners.Adorner.Adorner;
+    if (adorner) {
+      input.onAdornerAdded(adorner);
+    }
+  });
+}
+
 export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
+  const adAdornerConfig =
+      ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD);
+  const hasAdorners = input.adorners || input.showAdAdorner;
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
@@ -372,8 +392,14 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         <devtools-icon name="dots-horizontal"></devtools-icon>
         <div class="hidden" ${ref(el => { output.decorationsElement = el as HTMLElement; })}></div>
       </div>
-      ${input.adorners ? html`<div class="adorner-container ${input.adorners.size === 0 ? 'hidden': ''}">
-        ${repeat(Array.from(input.adorners.values()).sort(adornerComparator), adorner => {
+      ${hasAdorners? html`<div class="adorner-container ${!hasAdorners ? 'hidden': ''}">
+        ${input.showAdAdorner ? html`<devtools-adorner
+          .data=${{name: adAdornerConfig.name, jslogContext: adAdornerConfig.name}}
+          aria-label=${i18nString(UIStrings.thisFrameWasIdentifiedAsAnAd)}
+          ${adornerRef(input)}>
+          <span>${adAdornerConfig.name}</span>
+        </devtools-adorner>` : nothing}
+        ${repeat(Array.from((input.adorners ?? new Set()).values()).sort(adornerComparator), adorner => {
           return adorner;
         })}
       </div>`: nothing}
@@ -442,13 +468,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       };
       void this.updateStyleAdorners();
 
-      if (node.isAdFrameNode()) {
-        const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-            ElementsComponents.AdornerManager.RegisteredAdorners.AD);
-        const adorner = this.adorn(config);
-        UI.Tooltip.Tooltip.install(adorner, i18nString(UIStrings.thisFrameWasIdentifiedAsAnAd));
-      }
-
       void this.updateScrollAdorner();
     }
     this.expandAllButtonElement = null;
@@ -533,8 +552,17 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     DEFAULT_VIEW(
         {
           adorners: !this.isClosingTag() ? this.#adorners : undefined,
+          showAdAdorner:
+              ElementsPanel.instance().isAdornerEnabled(ElementsComponents.AdornerManager.RegisteredAdorners.AD) &&
+              this.nodeInternal.isAdFrameNode(),
           nodeInfo: this.#nodeInfo,
           onGutterClick: this.showContextMenu.bind(this),
+          onAdornerAdded: adorner => {
+            ElementsPanel.instance().registerAdorner(adorner);
+          },
+          onAdornerRemoved: adorner => {
+            ElementsPanel.instance().deregisterAdorner(adorner);
+          },
         },
         this, this.listItemElement);
   }

package/front_end/panels/elements/LayoutPane.ts

@@ -312,7 +312,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             </div>
             <div class="checkbox-settings">
               ${input.booleanSettings.map(setting =>
-                  html`<devtools-checkbox
+                  html`<div><devtools-checkbox
                       data-boolean-setting="true"
                       class="checkbox-label"
                       title=${setting.title}
@@ -320,7 +320,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                       @change=${(e: Event) => input.onBooleanSettingChange(setting, e)}
                       jslog=${VisualLogging.toggle().track({click: true}).context(setting.name)}>
                     ${setting.title}
-                  </devtools-checkbox>`)}
+                  </devtools-checkbox></div>`)}
             </div>
           </div>
           ${input.gridElements ?

package/front_end/panels/elements/components/AdornerManager.ts

@@ -22,20 +22,20 @@ export interface RegisteredAdorner {
 }
 
 export enum RegisteredAdorners {
+  AD = 'ad',
+  CONTAINER = 'container',
+  FLEX = 'flex',
   GRID = 'grid',
-  SUBGRID = 'subgrid',
   MASONRY = 'masonry',
-  FLEX = 'flex',
-  AD = 'ad',
+  MEDIA = 'media',
+  POPOVER = 'popover',
+  REVEAL = 'reveal',
+  SCROLL = 'scroll',
   SCROLL_SNAP = 'scroll-snap',
-  STARTING_STYLE = 'starting-style',
-  CONTAINER = 'container',
   SLOT = 'slot',
+  STARTING_STYLE = 'starting-style',
+  SUBGRID = 'subgrid',
   TOP_LAYER = 'top-layer',
-  REVEAL = 'reveal',
-  MEDIA = 'media',
-  SCROLL = 'scroll',
-  POPOVER = 'popover',
 }
 
 /**

package/front_end/panels/elements/layoutPane.css

@@ -44,18 +44,14 @@
   }
 
   .checkbox-settings {
-    margin-top: 8px;
+    margin-top: var(--sys-size-5);
     display: grid;
     grid-template-columns: 1fr;
-    gap: 5px;
-  }
-
-  .checkbox-settings devtools-checkbox {
-    margin-bottom: 8px;
-  }
+    gap: var(--sys-size-4);
 
-  .checkbox-settings devtools-checkbox:last-child {
-    margin-bottom: 0;
+    > div {
+      display: flex;
+    }
   }
 
   devtools-checkbox {

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -315,7 +315,7 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
 
     const propertyValue = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(
         object, /* wasThrown */ false, /* showPreview */ false);
-    this.valueTitle = propertyValue.element;
+    this.valueTitle = propertyValue;
     title.appendChild(this.valueTitle);
 
     if (this.#eventListener.canRemove()) {