chrome-devtools-frontend 1.0.1539728 → 1.0.1541169

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/ai_assistance/PatchWidget.ts

@@ -310,11 +310,13 @@ const DEFAULT_VIEW: View =
         const iconName = input.projectType === SelectedProjectType.AUTOMATIC_DISCONNECTED ? 'folder-off' : input.projectType === SelectedProjectType.AUTOMATIC_CONNECTED ? 'folder-asterisk' : 'folder';
         return html`
         <div class="footer">
-          ${input.projectName ? html`
+          ${
+            input.projectName ? html`
             <div class="change-workspace" jslog=${VisualLogging.section('patch-widget.workspace')}>
                 <devtools-icon .name=${iconName}></devtools-icon>
                 <span class="folder-name" title=${input.projectPath}>${input.projectName}</span>
-              ${input.onChangeWorkspaceClick ? html`
+              ${
+                                    input.onChangeWorkspaceClick ? html`
                 <devtools-button
                   @click=${input.onChangeWorkspaceClick}
                   .jslogContext=${'change-workspace'}
@@ -323,18 +325,24 @@ const DEFAULT_VIEW: View =
                   .disabled=${input.patchSuggestionState === PatchSuggestionState.LOADING}
                   ${Directives.ref(output.changeRef)}
                 >${lockedString(UIStringsNotTranslate.change)}</devtools-button>
-              ` : nothing}
+              ` :
+                                                                   nothing}
             </div>
-          ` : nothing}
+          ` :
+                                nothing}
           <div class="apply-to-workspace-container" aria-live="polite">
-            ${input.patchSuggestionState === PatchSuggestionState.LOADING ? html`
-              <div class="loading-text-container" jslog=${VisualLogging.section('patch-widget.apply-to-workspace-loading')}>
+            ${
+            input.patchSuggestionState === PatchSuggestionState.LOADING ?
+                html`
+              <div class="loading-text-container" jslog=${
+                    VisualLogging.section('patch-widget.apply-to-workspace-loading')}>
                 <devtools-spinner></devtools-spinner>
                 <span>
                   ${lockedString(UIStringsNotTranslate.applyingToWorkspace)}
                 </span>
               </div>
-            ` : html`
+            ` :
+                html`
                 <devtools-button
                 @click=${input.onApplyToWorkspace}
                 .jslogContext=${'patch-widget.apply-to-workspace'}
@@ -342,12 +350,14 @@ const DEFAULT_VIEW: View =
                 ${lockedString(UIStringsNotTranslate.applyToWorkspace)}
               </devtools-button>
             `}
-            ${input.patchSuggestionState === PatchSuggestionState.LOADING ? html`<devtools-button
+            ${
+            input.patchSuggestionState === PatchSuggestionState.LOADING ? html`<devtools-button
               @click=${input.onCancel}
               .jslogContext=${'cancel'}
               .variant=${Buttons.Button.Variant.OUTLINED}>
               ${lockedString(UIStringsNotTranslate.cancel)}
-            </devtools-button>` : nothing}
+            </devtools-button>` :
+                                                                          nothing}
             <devtools-button
               aria-details="info-tooltip"
               .jslogContext=${'patch-widget.info-tooltip-trigger'}
@@ -356,7 +366,7 @@ const DEFAULT_VIEW: View =
             ></devtools-button>
             <devtools-tooltip
                 id="info-tooltip"
-                variant=${'rich'}
+                variant="rich"
               >
              <div class="info-tooltip-container">
                ${input.applyToWorkspaceTooltipText}
@@ -364,8 +374,8 @@ const DEFAULT_VIEW: View =
                  class="link tooltip-link"
                  role="link"
                  jslog=${VisualLogging.link('open-ai-settings').track({
-                   click: true,
-                 })}
+          click: true,
+        })}
                  @click=${input.onLearnMoreTooltipClick}
                >${lockedString(UIStringsNotTranslate.learnMore)}</button>
              </div>

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -1510,7 +1510,7 @@ function renderDisclamerTooltip(id: string, disclaimerText: string): Lit.Templat
   return html`
     <devtools-tooltip
       id=${id}
-      variant=${'rich'}
+      variant="rich"
     >
       <div class="info-tooltip-container">
         ${disclaimerText}

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/common/AiCodeCompletionDisclaimer.ts

@@ -88,8 +88,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
           aria-describedby=${input.spinnerTooltipId}></devtools-spinner>
           <devtools-tooltip
               id=${input.spinnerTooltipId}
-              variant=${'rich'}
-              jslogContext=${'ai-code-completion-spinner-tooltip'}>
+              variant="rich"
+              jslogContext="ai-code-completion-spinner-tooltip">
           <div class="disclaimer-tooltip-container"><div class="tooltip-text">
             ${lockedString(UIStringsNotTranslate.tooltipTextForSpinner)}
           </div></div></devtools-tooltip>
@@ -108,8 +108,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
           >${lockedString(UIStringsNotTranslate.relevantData)}</span>${lockedString(UIStringsNotTranslate.isSentToGoogle)}
           <devtools-tooltip
               id=${input.disclaimerTooltipId}
-              variant=${'rich'}
-              jslogContext=${'ai-code-completion-disclaimer'}
+              variant="rich"
+              jslogContext="ai-code-completion-disclaimer"
               ${Directives.ref(el => {
                 if (el instanceof HTMLElement) {
                   output.hideTooltip = () => {

package/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -79,8 +79,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, _output, target) => {
                 </span>
                 <devtools-tooltip
                     id=${input.citationsTooltipId}
-                    variant=${'rich'}
-                    jslogContext=${'ai-code-completion-citations'}
+                    variant="rich"
+                    jslogContext="ai-code-completion-citations"
                 ><div class="citations-tooltip-container">
                     ${Directives.repeat(input.citations, citation => html`<x-link
                         tabIndex="0"

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);
   }