chrome-devtools-frontend 1.0.930993 → 1.0.932348

package/front_end/panels/animation/AnimationTimeline.ts

@@ -87,64 +87,64 @@ const playbackRates = new WeakMap<HTMLElement, number>();
 let animationTimelineInstance: AnimationTimeline;
 
 export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManager.SDKModelObserver<AnimationModel> {
-  private gridWrapper: HTMLElement;
-  private grid: Element;
-  private playbackRate: number;
-  private allPaused: boolean;
-  private animationsContainer: HTMLElement;
-  private playbackRateButtons!: HTMLElement[];
-  private previewContainer!: HTMLElement;
-  private timelineScrubber!: HTMLElement;
-  private currentTime!: HTMLElement;
-  private popoverHelper!: UI.PopoverHelper.PopoverHelper;
-  private clearButton!: UI.Toolbar.ToolbarButton;
-  private selectedGroup!: AnimationGroup|null;
-  private renderQueue!: AnimationUI[];
-  private defaultDuration: number;
-  private durationInternal: number;
-  private timelineControlsWidth: number;
-  private readonly nodesMap: Map<number, NodeUI>;
-  private uiAnimations: AnimationUI[];
-  private groupBuffer: AnimationGroup[];
-  private readonly previewMap: Map<AnimationGroup, AnimationGroupPreviewUI>;
-  private readonly symbol: symbol;
-  private readonly animationsMap: Map<string, AnimationImpl>;
-  private timelineScrubberLine?: HTMLElement;
-  private pauseButton?: UI.Toolbar.ToolbarToggle;
-  private controlButton?: UI.Toolbar.ToolbarToggle;
-  private controlState?: ControlState;
-  private redrawing?: boolean;
-  private cachedTimelineWidth?: number;
-  private cachedTimelineHeight?: number;
-  private scrubberPlayer?: Animation;
-  private gridOffsetLeft?: number;
-  private originalScrubberTime?: number|null;
-  private originalMousePosition?: number;
+  #gridWrapper: HTMLElement;
+  #grid: Element;
+  #playbackRate: number;
+  #allPaused: boolean;
+  #animationsContainer: HTMLElement;
+  #playbackRateButtons!: HTMLElement[];
+  #previewContainer!: HTMLElement;
+  #timelineScrubber!: HTMLElement;
+  #currentTime!: HTMLElement;
+  #popoverHelper!: UI.PopoverHelper.PopoverHelper;
+  #clearButton!: UI.Toolbar.ToolbarButton;
+  #selectedGroup!: AnimationGroup|null;
+  #renderQueue!: AnimationUI[];
+  #defaultDuration: number;
+  #durationInternal: number;
+  #timelineControlsWidth: number;
+  readonly #nodesMap: Map<number, NodeUI>;
+  #uiAnimations: AnimationUI[];
+  #groupBuffer: AnimationGroup[];
+  readonly #previewMap: Map<AnimationGroup, AnimationGroupPreviewUI>;
+  readonly #symbol: symbol;
+  readonly #animationsMap: Map<string, AnimationImpl>;
+  #timelineScrubberLine?: HTMLElement;
+  #pauseButton?: UI.Toolbar.ToolbarToggle;
+  #controlButton?: UI.Toolbar.ToolbarToggle;
+  #controlState?: ControlState;
+  #redrawing?: boolean;
+  #cachedTimelineWidth?: number;
+  #cachedTimelineHeight?: number;
+  #scrubberPlayer?: Animation;
+  #gridOffsetLeft?: number;
+  #originalScrubberTime?: number|null;
+  #originalMousePosition?: number;
 
   private constructor() {
     super(true);
 
     this.element.classList.add('animations-timeline');
 
-    this.gridWrapper = this.contentElement.createChild('div', 'grid-overflow-wrapper');
-    this.grid = UI.UIUtils.createSVGChild(this.gridWrapper, 'svg', 'animation-timeline-grid');
+    this.#gridWrapper = this.contentElement.createChild('div', 'grid-overflow-wrapper');
+    this.#grid = UI.UIUtils.createSVGChild(this.#gridWrapper, 'svg', 'animation-timeline-grid');
 
-    this.playbackRate = 1;
-    this.allPaused = false;
+    this.#playbackRate = 1;
+    this.#allPaused = false;
     this.createHeader();
-    this.animationsContainer = this.contentElement.createChild('div', 'animation-timeline-rows');
+    this.#animationsContainer = this.contentElement.createChild('div', 'animation-timeline-rows');
     const timelineHint = this.contentElement.createChild('div', 'animation-timeline-rows-hint');
     timelineHint.textContent = i18nString(UIStrings.selectAnEffectAboveToInspectAnd);
 
-    /** @const */ this.defaultDuration = 100;
-    this.durationInternal = this.defaultDuration;
-    /** @const */ this.timelineControlsWidth = 150;
-    this.nodesMap = new Map();
-    this.uiAnimations = [];
-    this.groupBuffer = [];
-    this.previewMap = new Map();
-    this.symbol = Symbol('animationTimeline');
-    this.animationsMap = new Map();
+    /** @const */ this.#defaultDuration = 100;
+    this.#durationInternal = this.#defaultDuration;
+    /** @const */ this.#timelineControlsWidth = 150;
+    this.#nodesMap = new Map();
+    this.#uiAnimations = [];
+    this.#groupBuffer = [];
+    this.#previewMap = new Map();
+    this.#symbol = Symbol('animationTimeline');
+    this.#animationsMap = new Map();
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DOMModel.DOMModel, SDK.DOMModel.Events.NodeRemoved, this.nodeRemoved, this);
     SDK.TargetManager.TargetManager.instance().observeModels(AnimationModel, this);
@@ -158,6 +158,18 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     return animationTimelineInstance;
   }
 
+  get previewMap(): Map<AnimationGroup, AnimationGroupPreviewUI> {
+    return this.#previewMap;
+  }
+
+  get uiAnimations(): AnimationUI[] {
+    return this.#uiAnimations;
+  }
+
+  get groupBuffer(): AnimationGroup[] {
+    return this.#groupBuffer;
+  }
+
   wasShown(): void {
     for (const animationModel of SDK.TargetManager.TargetManager.instance().models(AnimationModel)) {
       this.addEventListeners(animationModel);
@@ -170,8 +182,8 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
       this.removeEventListeners(animationModel);
     }
 
-    if (this.popoverHelper) {
-      this.popoverHelper.hidePopover();
+    if (this.#popoverHelper) {
+      this.#popoverHelper.hidePopover();
     }
   }
 
@@ -197,33 +209,33 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   }
 
   private nodeChanged(): void {
-    for (const nodeUI of this.nodesMap.values()) {
+    for (const nodeUI of this.#nodesMap.values()) {
       nodeUI.nodeChanged();
     }
   }
 
   private createScrubber(): HTMLElement {
-    this.timelineScrubber = document.createElement('div');
-    this.timelineScrubber.classList.add('animation-scrubber');
-    this.timelineScrubber.classList.add('hidden');
-    this.timelineScrubberLine = this.timelineScrubber.createChild('div', 'animation-scrubber-line');
-    this.timelineScrubberLine.createChild('div', 'animation-scrubber-head');
-    this.timelineScrubber.createChild('div', 'animation-time-overlay');
-    return this.timelineScrubber;
+    this.#timelineScrubber = document.createElement('div');
+    this.#timelineScrubber.classList.add('animation-scrubber');
+    this.#timelineScrubber.classList.add('hidden');
+    this.#timelineScrubberLine = this.#timelineScrubber.createChild('div', 'animation-scrubber-line');
+    this.#timelineScrubberLine.createChild('div', 'animation-scrubber-head');
+    this.#timelineScrubber.createChild('div', 'animation-time-overlay');
+    return this.#timelineScrubber;
   }
 
   private createHeader(): HTMLElement {
     const toolbarContainer = this.contentElement.createChild('div', 'animation-timeline-toolbar-container');
     const topToolbar = new UI.Toolbar.Toolbar('animation-timeline-toolbar', toolbarContainer);
-    this.clearButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearAll), 'largeicon-clear');
-    this.clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.reset.bind(this));
-    topToolbar.appendToolbarItem(this.clearButton);
+    this.#clearButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearAll), 'largeicon-clear');
+    this.#clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.reset.bind(this));
+    topToolbar.appendToolbarItem(this.#clearButton);
     topToolbar.appendSeparator();
 
-    this.pauseButton =
+    this.#pauseButton =
         new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.pauseAll), 'largeicon-pause', 'largeicon-resume');
-    this.pauseButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.togglePauseAll.bind(this));
-    topToolbar.appendToolbarItem(this.pauseButton);
+    this.#pauseButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.togglePauseAll.bind(this));
+    topToolbar.appendToolbarItem(this.#pauseButton);
 
     const playbackRateControl = toolbarContainer.createChild('div', 'animation-playback-rate-control');
     playbackRateControl.addEventListener('keydown', this.handlePlaybackRateControlKeyDown.bind(this));
@@ -231,7 +243,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     UI.ARIAUtils.setAccessibleName(playbackRateControl, i18nString(UIStrings.playbackRates));
 
     /** @type {!Array<!HTMLElement>} */
-    this.playbackRateButtons = [];
+    this.#playbackRateButtons = [];
     for (const playbackRate of GlobalPlaybackRates) {
       const button = (playbackRateControl.createChild('button', 'animation-playback-rate-button') as HTMLElement);
       button.textContent = playbackRate ? i18nString(UIStrings.playbackRatePlaceholder, {PH1: playbackRate * 100}) :
@@ -241,41 +253,41 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
       UI.ARIAUtils.markAsOption(button);
       UI.Tooltip.Tooltip.install(button, i18nString(UIStrings.setSpeedToS, {PH1: button.textContent}));
       button.tabIndex = -1;
-      this.playbackRateButtons.push(button);
+      this.#playbackRateButtons.push(button);
     }
     this.updatePlaybackControls();
-    this.previewContainer = (this.contentElement.createChild('div', 'animation-timeline-buffer') as HTMLElement);
-    UI.ARIAUtils.markAsListBox(this.previewContainer);
-    UI.ARIAUtils.setAccessibleName(this.previewContainer, i18nString(UIStrings.animationPreviews));
-    this.popoverHelper = new UI.PopoverHelper.PopoverHelper(this.previewContainer, this.getPopoverRequest.bind(this));
-    this.popoverHelper.setDisableOnClick(true);
-    this.popoverHelper.setTimeout(0);
+    this.#previewContainer = (this.contentElement.createChild('div', 'animation-timeline-buffer') as HTMLElement);
+    UI.ARIAUtils.markAsListBox(this.#previewContainer);
+    UI.ARIAUtils.setAccessibleName(this.#previewContainer, i18nString(UIStrings.animationPreviews));
+    this.#popoverHelper = new UI.PopoverHelper.PopoverHelper(this.#previewContainer, this.getPopoverRequest.bind(this));
+    this.#popoverHelper.setDisableOnClick(true);
+    this.#popoverHelper.setTimeout(0);
     const emptyBufferHint = this.contentElement.createChild('div', 'animation-timeline-buffer-hint');
     emptyBufferHint.textContent = i18nString(UIStrings.waitingForAnimations);
     const container = this.contentElement.createChild('div', 'animation-timeline-header');
     const controls = container.createChild('div', 'animation-controls');
-    this.currentTime = (controls.createChild('div', 'animation-timeline-current-time monospace') as HTMLElement);
+    this.#currentTime = (controls.createChild('div', 'animation-timeline-current-time monospace') as HTMLElement);
 
     const toolbar = new UI.Toolbar.Toolbar('animation-controls-toolbar', controls);
-    this.controlButton =
+    this.#controlButton =
         new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.replayTimeline), 'largeicon-replay-animation');
-    this.controlState = ControlState.Replay;
-    this.controlButton.setToggled(true);
-    this.controlButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.controlButtonToggle.bind(this));
-    toolbar.appendToolbarItem(this.controlButton);
+    this.#controlState = ControlState.Replay;
+    this.#controlButton.setToggled(true);
+    this.#controlButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.controlButtonToggle.bind(this));
+    toolbar.appendToolbarItem(this.#controlButton);
 
     const gridHeader = container.createChild('div', 'animation-grid-header');
     UI.UIUtils.installDragHandle(
         gridHeader, this.repositionScrubber.bind(this), this.scrubberDragMove.bind(this),
         this.scrubberDragEnd.bind(this), 'text');
-    this.gridWrapper.appendChild(this.createScrubber());
+    this.#gridWrapper.appendChild(this.createScrubber());
 
-    if (this.timelineScrubberLine) {
+    if (this.#timelineScrubberLine) {
       UI.UIUtils.installDragHandle(
-          this.timelineScrubberLine, this.scrubberDragStart.bind(this), this.scrubberDragMove.bind(this),
+          this.#timelineScrubberLine, this.scrubberDragStart.bind(this), this.scrubberDragMove.bind(this),
           this.scrubberDragEnd.bind(this), 'col-resize');
     }
-    this.currentTime.textContent = '';
+    this.#currentTime.textContent = '';
 
     return container;
   }
@@ -296,12 +308,12 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
 
   private focusNextPlaybackRateButton(target: EventTarget|null, focusPrevious?: boolean): void {
     const button = (target as HTMLElement);
-    const currentIndex = this.playbackRateButtons.indexOf(button);
+    const currentIndex = this.#playbackRateButtons.indexOf(button);
     const nextIndex = focusPrevious ? currentIndex - 1 : currentIndex + 1;
-    if (nextIndex < 0 || nextIndex >= this.playbackRateButtons.length) {
+    if (nextIndex < 0 || nextIndex >= this.#playbackRateButtons.length) {
       return;
     }
-    const nextButton = this.playbackRateButtons[nextIndex];
+    const nextButton = this.#playbackRateButtons[nextIndex];
     nextButton.tabIndex = 0;
     nextButton.focus();
     if (target) {
@@ -311,7 +323,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
 
   private getPopoverRequest(event: Event): UI.PopoverHelper.PopoverRequest|null {
     const element = (event.target as HTMLElement);
-    if (!element || !element.isDescendant(this.previewContainer)) {
+    if (!element || !element.isDescendant(this.#previewContainer)) {
       return null;
     }
 
@@ -319,7 +331,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
       box: element.boxInWindow(),
       show: (popover: UI.GlassPane.GlassPane): Promise<boolean> => {
         let animGroup;
-        for (const [group, previewUI] of this.previewMap) {
+        for (const [group, previewUI] of this.#previewMap) {
           if (previewUI.element === element.parentElement) {
             animGroup = group;
           }
@@ -354,41 +366,41 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   }
 
   private togglePauseAll(): void {
-    this.allPaused = !this.allPaused;
-    if (this.pauseButton) {
-      this.pauseButton.setToggled(this.allPaused);
+    this.#allPaused = !this.#allPaused;
+    if (this.#pauseButton) {
+      this.#pauseButton.setToggled(this.#allPaused);
     }
-    this.setPlaybackRate(this.playbackRate);
-    if (this.pauseButton) {
-      this.pauseButton.setTitle(this.allPaused ? i18nString(UIStrings.resumeAll) : i18nString(UIStrings.pauseAll));
+    this.setPlaybackRate(this.#playbackRate);
+    if (this.#pauseButton) {
+      this.#pauseButton.setTitle(this.#allPaused ? i18nString(UIStrings.resumeAll) : i18nString(UIStrings.pauseAll));
     }
   }
 
   private setPlaybackRate(playbackRate: number): void {
-    this.playbackRate = playbackRate;
+    this.#playbackRate = playbackRate;
     for (const animationModel of SDK.TargetManager.TargetManager.instance().models(AnimationModel)) {
-      animationModel.setPlaybackRate(this.allPaused ? 0 : this.playbackRate);
+      animationModel.setPlaybackRate(this.#allPaused ? 0 : this.#playbackRate);
     }
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AnimationsPlaybackRateChanged);
-    if (this.scrubberPlayer) {
-      this.scrubberPlayer.playbackRate = this.effectivePlaybackRate();
+    if (this.#scrubberPlayer) {
+      this.#scrubberPlayer.playbackRate = this.effectivePlaybackRate();
     }
 
     this.updatePlaybackControls();
   }
 
   private updatePlaybackControls(): void {
-    for (const button of this.playbackRateButtons) {
-      const selected = this.playbackRate === playbackRates.get(button);
+    for (const button of this.#playbackRateButtons) {
+      const selected = this.#playbackRate === playbackRates.get(button);
       button.classList.toggle('selected', selected);
       button.tabIndex = selected ? 0 : -1;
     }
   }
 
   private controlButtonToggle(): void {
-    if (this.controlState === ControlState.Play) {
+    if (this.#controlState === ControlState.Play) {
       this.togglePause(false);
-    } else if (this.controlState === ControlState.Replay) {
+    } else if (this.#controlState === ControlState.Replay) {
       this.replay();
     } else {
       this.togglePause(true);
@@ -396,42 +408,42 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   }
 
   private updateControlButton(): void {
-    if (!this.controlButton) {
+    if (!this.#controlButton) {
       return;
     }
 
-    this.controlButton.setEnabled(Boolean(this.selectedGroup));
-    if (this.selectedGroup && this.selectedGroup.paused()) {
-      this.controlState = ControlState.Play;
-      this.controlButton.setToggled(true);
-      this.controlButton.setTitle(i18nString(UIStrings.playTimeline));
-      this.controlButton.setGlyph('largeicon-play-animation');
+    this.#controlButton.setEnabled(Boolean(this.#selectedGroup));
+    if (this.#selectedGroup && this.#selectedGroup.paused()) {
+      this.#controlState = ControlState.Play;
+      this.#controlButton.setToggled(true);
+      this.#controlButton.setTitle(i18nString(UIStrings.playTimeline));
+      this.#controlButton.setGlyph('largeicon-play-animation');
     } else if (
-        !this.scrubberPlayer || !this.scrubberPlayer.currentTime ||
-        this.scrubberPlayer.currentTime >= this.duration()) {
-      this.controlState = ControlState.Replay;
-      this.controlButton.setToggled(true);
-      this.controlButton.setTitle(i18nString(UIStrings.replayTimeline));
-      this.controlButton.setGlyph('largeicon-replay-animation');
+        !this.#scrubberPlayer || !this.#scrubberPlayer.currentTime ||
+        this.#scrubberPlayer.currentTime >= this.duration()) {
+      this.#controlState = ControlState.Replay;
+      this.#controlButton.setToggled(true);
+      this.#controlButton.setTitle(i18nString(UIStrings.replayTimeline));
+      this.#controlButton.setGlyph('largeicon-replay-animation');
     } else {
-      this.controlState = ControlState.Pause;
-      this.controlButton.setToggled(false);
-      this.controlButton.setTitle(i18nString(UIStrings.pauseTimeline));
-      this.controlButton.setGlyph('largeicon-pause-animation');
+      this.#controlState = ControlState.Pause;
+      this.#controlButton.setToggled(false);
+      this.#controlButton.setTitle(i18nString(UIStrings.pauseTimeline));
+      this.#controlButton.setGlyph('largeicon-pause-animation');
     }
   }
 
   private effectivePlaybackRate(): number {
-    return (this.allPaused || (this.selectedGroup && this.selectedGroup.paused())) ? 0 : this.playbackRate;
+    return (this.#allPaused || (this.#selectedGroup && this.#selectedGroup.paused())) ? 0 : this.#playbackRate;
   }
 
   private togglePause(pause: boolean): void {
-    if (this.scrubberPlayer) {
-      this.scrubberPlayer.playbackRate = this.effectivePlaybackRate();
+    if (this.#scrubberPlayer) {
+      this.#scrubberPlayer.playbackRate = this.effectivePlaybackRate();
     }
-    if (this.selectedGroup) {
-      this.selectedGroup.togglePause(pause);
-      const preview = this.previewMap.get(this.selectedGroup);
+    if (this.#selectedGroup) {
+      this.#selectedGroup.togglePause(pause);
+      const preview = this.#previewMap.get(this.#selectedGroup);
       if (preview) {
         preview.element.classList.toggle('paused', pause);
       }
@@ -440,54 +452,54 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   }
 
   private replay(): void {
-    if (!this.selectedGroup) {
+    if (!this.#selectedGroup) {
       return;
     }
-    this.selectedGroup.seekTo(0);
+    this.#selectedGroup.seekTo(0);
     this.animateTime(0);
     this.updateControlButton();
   }
 
   duration(): number {
-    return this.durationInternal;
+    return this.#durationInternal;
   }
 
   setDuration(duration: number): void {
-    this.durationInternal = duration;
+    this.#durationInternal = duration;
     this.scheduleRedraw();
   }
 
   private clearTimeline(): void {
-    this.uiAnimations = [];
-    this.nodesMap.clear();
-    this.animationsMap.clear();
-    this.animationsContainer.removeChildren();
-    this.durationInternal = this.defaultDuration;
-    this.timelineScrubber.classList.add('hidden');
-    this.selectedGroup = null;
-    if (this.scrubberPlayer) {
-      this.scrubberPlayer.cancel();
-    }
-    delete this.scrubberPlayer;
-    this.currentTime.textContent = '';
+    this.#uiAnimations = [];
+    this.#nodesMap.clear();
+    this.#animationsMap.clear();
+    this.#animationsContainer.removeChildren();
+    this.#durationInternal = this.#defaultDuration;
+    this.#timelineScrubber.classList.add('hidden');
+    this.#selectedGroup = null;
+    if (this.#scrubberPlayer) {
+      this.#scrubberPlayer.cancel();
+    }
+    this.#scrubberPlayer = undefined;
+    this.#currentTime.textContent = '';
     this.updateControlButton();
   }
 
   private reset(): void {
     this.clearTimeline();
-    if (this.allPaused) {
+    if (this.#allPaused) {
       this.togglePauseAll();
     } else {
-      this.setPlaybackRate(this.playbackRate);
+      this.setPlaybackRate(this.#playbackRate);
     }
 
-    for (const group of this.groupBuffer) {
+    for (const group of this.#groupBuffer) {
       group.release();
     }
-    this.groupBuffer = [];
-    this.previewMap.clear();
-    this.previewContainer.removeChildren();
-    this.popoverHelper.hidePopover();
+    this.#groupBuffer = [];
+    this.#previewMap.clear();
+    this.#previewContainer.removeChildren();
+    this.#popoverHelper.hidePopover();
     this.renderGrid();
   }
 
@@ -503,46 +515,46 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
       return left.startTime() > right.startTime() ? 1 : -1;
     }
 
-    const previewGroup = this.previewMap.get(group);
+    const previewGroup = this.#previewMap.get(group);
     if (previewGroup) {
-      if (this.selectedGroup === group) {
+      if (this.#selectedGroup === group) {
         this.syncScrubber();
       } else {
         previewGroup.replay();
       }
       return;
     }
-    this.groupBuffer.sort(startTimeComparator);
+    this.#groupBuffer.sort(startTimeComparator);
     // Discard oldest groups from buffer if necessary
     const groupsToDiscard = [];
     const bufferSize = this.width() / 50;
-    while (this.groupBuffer.length > bufferSize) {
-      const toDiscard = this.groupBuffer.splice(this.groupBuffer[0] === this.selectedGroup ? 1 : 0, 1);
+    while (this.#groupBuffer.length > bufferSize) {
+      const toDiscard = this.#groupBuffer.splice(this.#groupBuffer[0] === this.#selectedGroup ? 1 : 0, 1);
       groupsToDiscard.push(toDiscard[0]);
     }
     for (const g of groupsToDiscard) {
-      const discardGroup = this.previewMap.get(g);
+      const discardGroup = this.#previewMap.get(g);
       if (!discardGroup) {
         continue;
       }
       discardGroup.element.remove();
-      this.previewMap.delete(g);
+      this.#previewMap.delete(g);
       g.release();
     }
     // Generate preview
     const preview = new AnimationGroupPreviewUI(group);
-    this.groupBuffer.push(group);
-    this.previewMap.set(group, preview);
-    this.previewContainer.appendChild(preview.element);
+    this.#groupBuffer.push(group);
+    this.#previewMap.set(group, preview);
+    this.#previewContainer.appendChild(preview.element);
     preview.removeButton().addEventListener('click', this.removeAnimationGroup.bind(this, group));
     preview.element.addEventListener('click', this.selectAnimationGroup.bind(this, group));
     preview.element.addEventListener('keydown', this.handleAnimationGroupKeyDown.bind(this, group));
     UI.ARIAUtils.setAccessibleName(
-        preview.element, i18nString(UIStrings.animationPreviewS, {PH1: this.groupBuffer.indexOf(group) + 1}));
+        preview.element, i18nString(UIStrings.animationPreviewS, {PH1: this.#groupBuffer.indexOf(group) + 1}));
     UI.ARIAUtils.markAsOption(preview.element);
 
-    if (this.previewMap.size === 1) {
-      const preview = this.previewMap.get(this.groupBuffer[0]);
+    if (this.#previewMap.size === 1) {
+      const preview = this.#previewMap.get(this.#groupBuffer[0]);
       if (preview) {
         preview.element.tabIndex = 0;
       }
@@ -570,12 +582,12 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   }
 
   private focusNextGroup(group: AnimationGroup, target: EventTarget|null, focusPrevious?: boolean): void {
-    const currentGroupIndex = this.groupBuffer.indexOf(group);
+    const currentGroupIndex = this.#groupBuffer.indexOf(group);
     const nextIndex = focusPrevious ? currentGroupIndex - 1 : currentGroupIndex + 1;
-    if (nextIndex < 0 || nextIndex >= this.groupBuffer.length) {
+    if (nextIndex < 0 || nextIndex >= this.#groupBuffer.length) {
       return;
     }
-    const preview = this.previewMap.get(this.groupBuffer[nextIndex]);
+    const preview = this.#previewMap.get(this.#groupBuffer[nextIndex]);
     if (preview) {
       preview.element.tabIndex = 0;
       preview.element.focus();
@@ -587,30 +599,30 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   }
 
   private removeAnimationGroup(group: AnimationGroup, event: Event): void {
-    const currentGroupIndex = this.groupBuffer.indexOf(group);
+    const currentGroupIndex = this.#groupBuffer.indexOf(group);
 
-    Platform.ArrayUtilities.removeElement(this.groupBuffer, group);
-    const previewGroup = this.previewMap.get(group);
+    Platform.ArrayUtilities.removeElement(this.#groupBuffer, group);
+    const previewGroup = this.#previewMap.get(group);
     if (previewGroup) {
       previewGroup.element.remove();
     }
-    this.previewMap.delete(group);
+    this.#previewMap.delete(group);
     group.release();
     event.consume(true);
 
-    if (this.selectedGroup === group) {
+    if (this.#selectedGroup === group) {
       this.clearTimeline();
       this.renderGrid();
     }
 
-    const groupLength = this.groupBuffer.length;
+    const groupLength = this.#groupBuffer.length;
     if (groupLength === 0) {
-      (this.clearButton.element as HTMLElement).focus();
+      (this.#clearButton.element as HTMLElement).focus();
       return;
     }
-    const nextGroup = currentGroupIndex >= this.groupBuffer.length ?
-        this.previewMap.get(this.groupBuffer[this.groupBuffer.length - 1]) :
-        this.previewMap.get(this.groupBuffer[currentGroupIndex]);
+    const nextGroup = currentGroupIndex >= this.#groupBuffer.length ?
+        this.#previewMap.get(this.#groupBuffer[this.#groupBuffer.length - 1]) :
+        this.#previewMap.get(this.#groupBuffer[currentGroupIndex]);
 
     if (nextGroup) {
       nextGroup.element.tabIndex = 0;
@@ -620,23 +632,23 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
 
   private selectAnimationGroup(group: AnimationGroup): void {
     function applySelectionClass(this: AnimationTimeline, ui: AnimationGroupPreviewUI, group: AnimationGroup): void {
-      ui.element.classList.toggle('selected', this.selectedGroup === group);
+      ui.element.classList.toggle('selected', this.#selectedGroup === group);
     }
 
-    if (this.selectedGroup === group) {
+    if (this.#selectedGroup === group) {
       this.togglePause(false);
       this.replay();
       return;
     }
     this.clearTimeline();
-    this.selectedGroup = group;
-    this.previewMap.forEach(applySelectionClass, this);
+    this.#selectedGroup = group;
+    this.#previewMap.forEach(applySelectionClass, this);
     this.setDuration(Math.max(500, group.finiteDuration() + 100));
     for (const anim of group.animations()) {
       this.addAnimation(anim);
     }
     this.scheduleRedraw();
-    this.timelineScrubber.classList.remove('hidden');
+    this.#timelineScrubber.classList.remove('hidden');
     this.togglePause(false);
     this.replay();
   }
@@ -650,17 +662,17 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
       }
     }
 
-    let nodeUI = this.nodesMap.get(animation.source().backendNodeId());
+    let nodeUI = this.#nodesMap.get(animation.source().backendNodeId());
     if (!nodeUI) {
       nodeUI = new NodeUI(animation.source());
-      this.animationsContainer.appendChild(nodeUI.element);
-      this.nodesMap.set(animation.source().backendNodeId(), nodeUI);
+      this.#animationsContainer.appendChild(nodeUI.element);
+      this.#nodesMap.set(animation.source().backendNodeId(), nodeUI);
     }
     const nodeRow = nodeUI.createNewRow();
     const uiAnimation = new AnimationUI(animation, this, nodeRow);
     animation.source().deferredNode().resolve(nodeResolved.bind(this));
-    this.uiAnimations.push(uiAnimation);
-    this.animationsMap.set(animation.id(), animation);
+    this.#uiAnimations.push(uiAnimation);
+    this.#animationsMap.set(animation.id(), animation);
   }
 
   private nodeRemoved(
@@ -675,17 +687,17 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   private renderGrid(): void {
     /** @const */ const gridSize = 250;
     const gridWidth = (this.width() + 10).toString();
-    const gridHeight = ((this.cachedTimelineHeight || 0) + 30).toString();
-
-    this.gridWrapper.style.width = gridWidth + 'px';
-    this.gridWrapper.style.height = gridHeight.toString() + 'px';
-    this.grid.setAttribute('width', gridWidth);
-    this.grid.setAttribute('height', gridHeight.toString());
-    this.grid.setAttribute('shape-rendering', 'crispEdges');
-    this.grid.removeChildren();
+    const gridHeight = ((this.#cachedTimelineHeight || 0) + 30).toString();
+
+    this.#gridWrapper.style.width = gridWidth + 'px';
+    this.#gridWrapper.style.height = gridHeight.toString() + 'px';
+    this.#grid.setAttribute('width', gridWidth);
+    this.#grid.setAttribute('height', gridHeight.toString());
+    this.#grid.setAttribute('shape-rendering', 'crispEdges');
+    this.#grid.removeChildren();
     let lastDraw: number|undefined = undefined;
     for (let time = 0; time < this.duration(); time += gridSize) {
-      const line = UI.UIUtils.createSVGChild(this.grid, 'rect', 'animation-timeline-grid-line');
+      const line = UI.UIUtils.createSVGChild(this.#grid, 'rect', 'animation-timeline-grid-line');
       line.setAttribute('x', (time * this.pixelMsRatio() + 10).toString());
       line.setAttribute('y', '23');
       line.setAttribute('height', '100%');
@@ -695,7 +707,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
       const gridWidth = time * this.pixelMsRatio();
       if (lastDraw === undefined || gridWidth - lastDraw > 50) {
         lastDraw = gridWidth;
-        const label = UI.UIUtils.createSVGChild(this.grid, 'text', 'animation-timeline-grid-label');
+        const label = UI.UIUtils.createSVGChild(this.#grid, 'text', 'animation-timeline-grid-label');
         label.textContent = i18n.TimeUtilities.millisToString(time);
         label.setAttribute('x', (gridWidth + 10).toString());
         label.setAttribute('y', '16');
@@ -704,44 +716,44 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   }
 
   scheduleRedraw(): void {
-    this.renderQueue = [];
-    for (const ui of this.uiAnimations) {
-      this.renderQueue.push(ui);
+    this.#renderQueue = [];
+    for (const ui of this.#uiAnimations) {
+      this.#renderQueue.push(ui);
     }
-    if (this.redrawing) {
+    if (this.#redrawing) {
       return;
     }
-    this.redrawing = true;
+    this.#redrawing = true;
     this.renderGrid();
-    this.animationsContainer.window().requestAnimationFrame(this.render.bind(this));
+    this.#animationsContainer.window().requestAnimationFrame(this.render.bind(this));
   }
 
   private render(timestamp?: number): void {
-    while (this.renderQueue.length && (!timestamp || window.performance.now() - timestamp < 50)) {
-      const animationUI = this.renderQueue.shift();
+    while (this.#renderQueue.length && (!timestamp || window.performance.now() - timestamp < 50)) {
+      const animationUI = this.#renderQueue.shift();
       if (animationUI) {
         animationUI.redraw();
       }
     }
-    if (this.renderQueue.length) {
-      this.animationsContainer.window().requestAnimationFrame(this.render.bind(this));
+    if (this.#renderQueue.length) {
+      this.#animationsContainer.window().requestAnimationFrame(this.render.bind(this));
     } else {
-      delete this.redrawing;
+      this.#redrawing = undefined;
     }
   }
 
   onResize(): void {
-    this.cachedTimelineWidth = Math.max(0, this.animationsContainer.offsetWidth - this.timelineControlsWidth) || 0;
-    this.cachedTimelineHeight = this.animationsContainer.offsetHeight;
+    this.#cachedTimelineWidth = Math.max(0, this.#animationsContainer.offsetWidth - this.#timelineControlsWidth) || 0;
+    this.#cachedTimelineHeight = this.#animationsContainer.offsetHeight;
     this.scheduleRedraw();
-    if (this.scrubberPlayer) {
+    if (this.#scrubberPlayer) {
       this.syncScrubber();
     }
-    delete this.gridOffsetLeft;
+    this.#gridOffsetLeft = undefined;
   }
 
   width(): number {
-    return this.cachedTimelineWidth || 0;
+    return this.#cachedTimelineWidth || 0;
   }
 
   private resizeWindow(animation: AnimationImpl): boolean {
@@ -750,31 +762,33 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     // This shows at most 3 iterations
     const duration = animation.source().duration() * Math.min(2, animation.source().iterations());
     const requiredDuration = animation.source().delay() + duration + animation.source().endDelay();
-    if (requiredDuration > this.durationInternal) {
+    if (requiredDuration > this.#durationInternal) {
       resized = true;
-      this.durationInternal = requiredDuration + 200;
+      this.#durationInternal = requiredDuration + 200;
     }
     return resized;
   }
 
   private syncScrubber(): void {
-    if (!this.selectedGroup) {
+    if (!this.#selectedGroup) {
       return;
     }
-    this.selectedGroup.currentTimePromise().then(this.animateTime.bind(this)).then(this.updateControlButton.bind(this));
+    this.#selectedGroup.currentTimePromise()
+        .then(this.animateTime.bind(this))
+        .then(this.updateControlButton.bind(this));
   }
 
   private animateTime(currentTime: number): void {
-    if (this.scrubberPlayer) {
-      this.scrubberPlayer.cancel();
+    if (this.#scrubberPlayer) {
+      this.#scrubberPlayer.cancel();
     }
 
-    this.scrubberPlayer = this.timelineScrubber.animate(
+    this.#scrubberPlayer = this.#timelineScrubber.animate(
         [{transform: 'translateX(0px)'}, {transform: 'translateX(' + this.width() + 'px)'}],
         {duration: this.duration(), fill: 'forwards'});
-    this.scrubberPlayer.playbackRate = this.effectivePlaybackRate();
-    this.scrubberPlayer.onfinish = this.updateControlButton.bind(this);
-    this.scrubberPlayer.currentTime = currentTime;
+    this.#scrubberPlayer.playbackRate = this.effectivePlaybackRate();
+    this.#scrubberPlayer.onfinish = this.updateControlButton.bind(this);
+    this.#scrubberPlayer.currentTime = currentTime;
     this.element.window().requestAnimationFrame(this.updateScrubber.bind(this));
   }
 
@@ -783,50 +797,50 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   }
 
   private updateScrubber(_timestamp: number): void {
-    if (!this.scrubberPlayer) {
+    if (!this.#scrubberPlayer) {
       return;
     }
-    this.currentTime.textContent = i18n.TimeUtilities.millisToString(this.scrubberPlayer.currentTime || 0);
-    if (this.scrubberPlayer.playState.toString() === 'pending' || this.scrubberPlayer.playState === 'running') {
+    this.#currentTime.textContent = i18n.TimeUtilities.millisToString(this.#scrubberPlayer.currentTime || 0);
+    if (this.#scrubberPlayer.playState.toString() === 'pending' || this.#scrubberPlayer.playState === 'running') {
       this.element.window().requestAnimationFrame(this.updateScrubber.bind(this));
-    } else if (this.scrubberPlayer.playState === 'finished') {
-      this.currentTime.textContent = '';
+    } else if (this.#scrubberPlayer.playState === 'finished') {
+      this.#currentTime.textContent = '';
     }
   }
 
   private repositionScrubber(event: Event): boolean {
-    if (!this.selectedGroup) {
+    if (!this.#selectedGroup) {
       return false;
     }
 
     // Seek to current mouse position.
-    if (!this.gridOffsetLeft) {
-      this.gridOffsetLeft = this.grid.totalOffsetLeft() + 10;
+    if (!this.#gridOffsetLeft) {
+      this.#gridOffsetLeft = this.#grid.totalOffsetLeft() + 10;
     }
 
     const {x} = (event as any);  // eslint-disable-line @typescript-eslint/no-explicit-any
-    const seekTime = Math.max(0, x - this.gridOffsetLeft) / this.pixelMsRatio();
-    this.selectedGroup.seekTo(seekTime);
+    const seekTime = Math.max(0, x - this.#gridOffsetLeft) / this.pixelMsRatio();
+    this.#selectedGroup.seekTo(seekTime);
     this.togglePause(true);
     this.animateTime(seekTime);
 
     // Interface with scrubber drag.
-    this.originalScrubberTime = seekTime;
-    this.originalMousePosition = x;
+    this.#originalScrubberTime = seekTime;
+    this.#originalMousePosition = x;
     return true;
   }
 
   private scrubberDragStart(event: Event): boolean {
-    if (!this.scrubberPlayer || !this.selectedGroup) {
+    if (!this.#scrubberPlayer || !this.#selectedGroup) {
       return false;
     }
 
-    this.originalScrubberTime = this.scrubberPlayer.currentTime;
-    this.timelineScrubber.classList.remove('animation-timeline-end');
-    this.scrubberPlayer.pause();
+    this.#originalScrubberTime = this.#scrubberPlayer.currentTime;
+    this.#timelineScrubber.classList.remove('animation-timeline-end');
+    this.#scrubberPlayer.pause();
 
     const {x} = (event as any);  // eslint-disable-line @typescript-eslint/no-explicit-any
-    this.originalMousePosition = x;
+    this.#originalMousePosition = x;
 
     this.togglePause(true);
     return true;
@@ -834,26 +848,26 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
 
   private scrubberDragMove(event: Event): void {
     const {x} = (event as any);  // eslint-disable-line @typescript-eslint/no-explicit-any
-    const delta = x - (this.originalMousePosition || 0);
+    const delta = x - (this.#originalMousePosition || 0);
     const currentTime =
-        Math.max(0, Math.min((this.originalScrubberTime || 0) + delta / this.pixelMsRatio(), this.duration()));
-    if (this.scrubberPlayer) {
-      this.scrubberPlayer.currentTime = currentTime;
+        Math.max(0, Math.min((this.#originalScrubberTime || 0) + delta / this.pixelMsRatio(), this.duration()));
+    if (this.#scrubberPlayer) {
+      this.#scrubberPlayer.currentTime = currentTime;
     }
-    this.currentTime.textContent = i18n.TimeUtilities.millisToString(Math.round(currentTime));
+    this.#currentTime.textContent = i18n.TimeUtilities.millisToString(Math.round(currentTime));
 
-    if (this.selectedGroup) {
-      this.selectedGroup.seekTo(currentTime);
+    if (this.#selectedGroup) {
+      this.#selectedGroup.seekTo(currentTime);
     }
   }
 
   private scrubberDragEnd(_event: Event): void {
-    if (this.scrubberPlayer) {
-      const currentTime = Math.max(0, this.scrubberPlayer.currentTime || 0);
-      this.scrubberPlayer.play();
-      this.scrubberPlayer.currentTime = currentTime;
+    if (this.#scrubberPlayer) {
+      const currentTime = Math.max(0, this.#scrubberPlayer.currentTime || 0);
+      this.#scrubberPlayer.play();
+      this.#scrubberPlayer.currentTime = currentTime;
     }
-    this.currentTime.window().requestAnimationFrame(this.updateScrubber.bind(this));
+    this.#currentTime.window().requestAnimationFrame(this.updateScrubber.bind(this));
   }
 }
 
@@ -867,44 +881,44 @@ const enum ControlState {
 
 export class NodeUI {
   element: HTMLDivElement;
-  private readonly description: HTMLElement;
-  private readonly timelineElement: HTMLElement;
-  private node?: SDK.DOMModel.DOMNode|null;
+  readonly #description: HTMLElement;
+  readonly #timelineElement: HTMLElement;
+  #node?: SDK.DOMModel.DOMNode|null;
 
   constructor(_animationEffect: AnimationEffect) {
     this.element = document.createElement('div');
     this.element.classList.add('animation-node-row');
-    this.description = this.element.createChild('div', 'animation-node-description');
-    this.timelineElement = this.element.createChild('div', 'animation-node-timeline');
-    UI.ARIAUtils.markAsApplication(this.timelineElement);
+    this.#description = this.element.createChild('div', 'animation-node-description');
+    this.#timelineElement = this.element.createChild('div', 'animation-node-timeline');
+    UI.ARIAUtils.markAsApplication(this.#timelineElement);
   }
 
   nodeResolved(node: SDK.DOMModel.DOMNode|null): void {
     if (!node) {
-      UI.UIUtils.createTextChild(this.description, '<node>');
+      UI.UIUtils.createTextChild(this.#description, '<node>');
       return;
     }
-    this.node = node;
+    this.#node = node;
     this.nodeChanged();
-    Common.Linkifier.Linkifier.linkify(node).then(link => this.description.appendChild(link));
+    Common.Linkifier.Linkifier.linkify(node).then(link => this.#description.appendChild(link));
     if (!node.ownerDocument) {
       this.nodeRemoved();
     }
   }
 
   createNewRow(): Element {
-    return this.timelineElement.createChild('div', 'animation-timeline-row');
+    return this.#timelineElement.createChild('div', 'animation-timeline-row');
   }
 
   nodeRemoved(): void {
     this.element.classList.add('animation-node-removed');
-    this.node = null;
+    this.#node = null;
   }
 
   nodeChanged(): void {
     let animationNodeSelected = false;
-    if (this.node) {
-      animationNodeSelected = (this.node === UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
+    if (this.#node) {
+      animationNodeSelected = (this.#node === UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
     }
 
     this.element.classList.toggle('animation-node-selected', animationNodeSelected);