chrome-devtools-frontend 1.0.1539972 → 1.0.1541552

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()) {