chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/animation/AnimationTimeline.test.ts

@@ -12,6 +12,7 @@ import {
 } from '../../testing/EnvironmentHelpers.js';
 import {expectCall} from '../../testing/ExpectStubCall.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {createViewFunctionStub, type ViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
 import * as Elements from '../elements/elements.js';
 
 import * as Animation from './animation.js';
@@ -503,6 +504,7 @@ describeWithMockConnection('AnimationTimeline', () => {
     const waitForAnimationGroupSelectedPromise = new ManualPromise();
     const waitForScheduleRedrawAfterAnimationGroupUpdated = new ManualPromise();
 
+    let toolbarViewStub: ViewFunctionStub<typeof Animation.AnimationTimeline.AnimationTimeline>;
     let domModel: SDK.DOMModel.DOMModel;
     let animationModel: SDK.AnimationModel.AnimationModel;
     let contentDocument: SDK.DOMModel.DOMDocument;
@@ -510,7 +512,8 @@ describeWithMockConnection('AnimationTimeline', () => {
       stubbedAnimationDOMNode = stubAnimationDOMNode();
       stubAnimationGroup();
 
-      view = Animation.AnimationTimeline.AnimationTimeline.instance({forceNew: true});
+      toolbarViewStub = createViewFunctionStub(Animation.AnimationTimeline.AnimationTimeline);
+      view = new Animation.AnimationTimeline.AnimationTimeline(toolbarViewStub);
       view.markAsRoot();
       renderElementIntoDOM(view);
 
@@ -580,20 +583,10 @@ describeWithMockConnection('AnimationTimeline', () => {
     it('should disable global controls after a scroll driven animation is selected', async () => {
       const preview = await waitFor('.animation-buffer-preview', view.element.shadowRoot!) as HTMLElement;
       preview.click();
-      await waitForAnimationGroupSelectedPromise.wait();
-
-      const playbackRateButtons = [...view.element.shadowRoot!.querySelectorAll('.animation-playback-rate-button')];
-      assert.isTrue(
-          playbackRateButtons.every(button => button.getAttribute('disabled')),
-          'All the playback rate buttons are disabled');
 
-      const timelineToolbar = view.element.shadowRoot!.querySelector('.animation-timeline-toolbar')!;
-      const pauseAllButton = await waitFor('[aria-label=\'Pause all\']', timelineToolbar) as HTMLButtonElement;
-      assert.isTrue(pauseAllButton.disabled, 'Pause all button is disabled');
+      const toolbarViewInput = await toolbarViewStub.nextInput;
 
-      const controlsToolbar = view.element.shadowRoot!.querySelector('.animation-controls-toolbar')!;
-      const replayButton = await waitFor('[aria-label=\'Replay timeline\']', controlsToolbar) as HTMLButtonElement;
-      assert.isTrue(replayButton.disabled, 'Replay button is disabled');
+      assert.isTrue(toolbarViewInput.playbackRateButtonsDisabled);
       cancelAllPendingRaf();
     });
 

package/front_end/panels/animation/AnimationTimeline.ts

@@ -3,6 +3,9 @@
 // found in the LICENSE file.
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
+/* The following disable is needed until all the partial view functions are part of one view function */
+/* eslint-disable rulesdir/no-lit-render-outside-of-view */
+
 import '../../ui/legacy/legacy.js';
 
 import * as Common from '../../core/common/common.js';
@@ -11,92 +14,93 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {AnimationGroupPreviewUI} from './AnimationGroupPreviewUI.js';
-import {AnimationScreenshotPopover} from './AnimationScreenshotPopover.js';
 import animationTimelineStyles from './animationTimeline.css.js';
 import {AnimationUI} from './AnimationUI.js';
 
 const UIStrings = {
   /**
-   *@description Timeline hint text content in Animation Timeline of the Animation Inspector if no effect
+   * @description Timeline hint text content in Animation Timeline of the Animation Inspector if no effect
    * is shown.
    * Animation effects are the visual effects of an animation on the page.
    */
   noEffectSelected: 'No animation effect selected',
   /**
-   *@description Timeline hint text content in Animation Timeline of the Animation Inspector that instructs
+   * @description Timeline hint text content in Animation Timeline of the Animation Inspector that instructs
    * users to select an effect.
    * Animation effects are the visual effects of an animation on the page.
    */
   selectAnEffectAboveToInspectAnd: 'Select an effect above to inspect and modify',
   /**
-   *@description Text to clear everything
+   * @description Text to clear everything
    */
   clearAll: 'Clear all',
   /**
-   *@description Tooltip text that appears when hovering over largeicon pause button in Animation Timeline of the Animation Inspector
+   * @description Tooltip text that appears when hovering over largeicon pause button in Animation Timeline of the Animation Inspector
    */
   pauseAll: 'Pause all',
   /**
-   *@description Title of the playback rate button listbox
+   * @description Title of the playback rate button listbox
    */
   playbackRates: 'Playback rates',
   /**
-   *@description Text in Animation Timeline of the Animation Inspector
-   *@example {50} PH1
+   * @description Text in Animation Timeline of the Animation Inspector
+   * @example {50} PH1
    */
   playbackRatePlaceholder: '{PH1}%',
   /**
-   *@description Text of an item that pause the running task
+   * @description Text of an item that pause the running task
    */
   pause: 'Pause',
   /**
-   *@description Button title in Animation Timeline of the Animation Inspector
-   *@example {50%} PH1
+   * @description Button title in Animation Timeline of the Animation Inspector
+   * @example {50%} PH1
    */
   setSpeedToS: 'Set speed to {PH1}',
   /**
-   *@description Title of Animation Previews listbox
+   * @description Title of Animation Previews listbox
    */
   animationPreviews: 'Animation previews',
   /**
-   *@description Empty buffer hint text content in Animation Timeline of the Animation Inspector.
+   * @description Empty buffer hint text content in Animation Timeline of the Animation Inspector.
    */
   waitingForAnimations: 'Currently waiting for animations',
   /**
-   *@description Empty buffer hint text content in Animation Timeline of the Animation Inspector that explains the panel.
+   * @description Empty buffer hint text content in Animation Timeline of the Animation Inspector that explains the panel.
    */
   animationDescription: 'On this page you can inspect and modify animations.',
   /**
-   *@description Tooltip text that appears when hovering over largeicon replay animation button in Animation Timeline of the Animation Inspector
+   * @description Tooltip text that appears when hovering over largeicon replay animation button in Animation Timeline of the Animation Inspector
    */
   replayTimeline: 'Replay timeline',
   /**
-   *@description Text in Animation Timeline of the Animation Inspector
+   * @description Text in Animation Timeline of the Animation Inspector
    */
   resumeAll: 'Resume all',
   /**
-   *@description Title of control button in animation timeline of the animation inspector
+   * @description Title of control button in animation timeline of the animation inspector
    */
   playTimeline: 'Play timeline',
   /**
-   *@description Title of control button in animation timeline of the animation inspector
+   * @description Title of control button in animation timeline of the animation inspector
    */
   pauseTimeline: 'Pause timeline',
   /**
-   *@description Title of a specific Animation Preview
-   *@example {1} PH1
+   * @description Title of a specific Animation Preview
+   * @example {1} PH1
    */
   animationPreviewS: 'Animation Preview {PH1}',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/animation/AnimationTimeline.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const nodeUIsByNode = new WeakMap<SDK.DOMModel.DOMNode, NodeUI>();
 
-const playbackRates = new WeakMap<HTMLElement, number>();
+const {render, html, Directives: {classMap}} = Lit;
+const nodeUIsByNode = new WeakMap<SDK.DOMModel.DOMNode, NodeUI>();
 
 const MIN_TIMELINE_CONTROLS_WIDTH = 120;
 const DEFAULT_TIMELINE_CONTROLS_WIDTH = 150;
@@ -105,17 +109,124 @@ const MAX_TIMELINE_CONTROLS_WIDTH = 720;
 const ANIMATION_EXPLANATION_URL =
     'https://developer.chrome.com/docs/devtools/css/animations' as Platform.DevToolsPath.UrlString;
 
-let animationTimelineInstance: AnimationTimeline;
+interface ToolbarViewInput {
+  selectedPlaybackRate: number;
+  playbackRateButtonsDisabled: boolean;
+  allPaused: boolean;
+  onClearClick: () => void;
+  onTogglePauseAllClick: () => void;
+  onSetPlaybackRateClick: (playbackRate: number) => void;
+}
+
+type ToolbarView = (input: ToolbarViewInput, output: undefined, target: HTMLElement) => void;
+// clang-format off
+const DEFAULT_TOOLBAR_VIEW: ToolbarView = (input: ToolbarViewInput, output: undefined, target: HTMLElement): void => {
+  const renderPlaybackRateControl = (): Lit.LitTemplate => {
+    const focusNextPlaybackRateButton = (eventTarget: EventTarget|null, focusPrevious?: boolean): void => {
+      const currentPlaybackRateButton = (eventTarget as HTMLElement);
+      const currentPlaybackRate = Number(currentPlaybackRateButton.dataset.playbackRate);
+      if (Number.isNaN(currentPlaybackRate)) {
+        return;
+      }
+
+      const currentIndex = GlobalPlaybackRates.indexOf(currentPlaybackRate);
+      const nextIndex = focusPrevious ? currentIndex - 1 : currentIndex + 1;
+      if (nextIndex < 0 || nextIndex >= GlobalPlaybackRates.length) {
+        return;
+      }
+      const nextPlaybackRate = GlobalPlaybackRates[nextIndex];
+      const nextPlaybackRateButton = target.querySelector(`[data-playback-rate="${nextPlaybackRate}"]`) as HTMLButtonElement | undefined;
+      if (!nextPlaybackRateButton) {
+        return;
+      }
+
+      currentPlaybackRateButton.tabIndex = -1;
+      nextPlaybackRateButton.tabIndex = 0;
+      nextPlaybackRateButton.focus();
+    };
 
+    const handleKeyDown = (event: Event): void => {
+      const keyboardEvent = (event as KeyboardEvent);
+      switch (keyboardEvent.key) {
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          focusNextPlaybackRateButton(event.target, /* focusPrevious */ true);
+          break;
+        case 'ArrowRight':
+        case 'ArrowDown':
+          focusNextPlaybackRateButton(event.target);
+          break;
+      }
+    };
+
+    return html`
+      <div class="animation-playback-rate-control" role="listbox" aria-label=${i18nString(UIStrings.playbackRates)} @keydown=${handleKeyDown}>
+        ${GlobalPlaybackRates.map(playbackRate => {
+          const isSelected = input.selectedPlaybackRate === playbackRate;
+          const textContent = playbackRate ? i18nString(UIStrings.playbackRatePlaceholder, {PH1: playbackRate * 100}) : i18nString(UIStrings.pause);
+          return html`
+            <button class="animation-playback-rate-button" jslog=${VisualLogging.action().context(`animations.playback-rate-${playbackRate * 100}`).track({
+              click: true,
+              keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight',
+            })}
+            data-playback-rate=${playbackRate}
+            .disabled=${input.playbackRateButtonsDisabled}
+            class=${classMap({
+              'animation-playback-rate-button': true,
+              selected: isSelected,
+            })}
+            tabindex=${isSelected ? 0 : -1}
+            role="option"
+            title=${i18nString(UIStrings.setSpeedToS, {PH1: textContent})}
+            @click=${() => input.onSetPlaybackRateClick(playbackRate)}>
+            ${textContent}
+          </button>
+          `;
+        })}
+      </div>
+    `;
+  };
+  render(html`
+    <div class="animation-timeline-toolbar-container" role="toolbar" jslog=${VisualLogging.toolbar()}>
+      <devtools-toolbar class="animation-timeline-toolbar" role="presentation">
+        <devtools-button
+          title=${i18nString(UIStrings.clearAll)}
+          aria-label=${i18nString(UIStrings.clearAll)}
+          .iconName=${'clear'}
+          .jslogContext=${'animations.clear'}
+          .variant=${Buttons.Button.Variant.TOOLBAR}
+          @click=${input.onClearClick}>
+        </devtools-button>
+        <div class="toolbar-divider"></div>
+        <devtools-button
+          title=${i18nString(UIStrings.pauseAll)}
+          aria-label=${i18nString(UIStrings.pauseAll)}
+          jslog=${
+            /* Do not use `.jslogContext` here because we want this to be reported as Toggle */
+            VisualLogging.toggle().track({click: true}).context('animations.pause-resume-all')
+          }
+          .iconName=${'pause'}
+          .toggledIconName=${'resume'}
+          .variant=${Buttons.Button.Variant.ICON_TOGGLE}
+          .toggleType=${Buttons.Button.ToggleType.PRIMARY}
+          .toggled=${input.allPaused}
+          @click=${input.onTogglePauseAllClick}>
+        </devtools-button>
+      </devtools-toolbar>
+      ${renderPlaybackRateControl()}
+    </div>
+  `, target, {host: target});
+};
+// clang-format on
+
+let animationTimelineInstance: AnimationTimeline;
 export class AnimationTimeline extends UI.Widget.VBox implements
     SDK.TargetManager.SDKModelObserver<SDK.AnimationModel.AnimationModel> {
   #gridWrapper: HTMLElement;
   #grid: Element;
   #playbackRate: number;
   #allPaused: boolean;
-  #screenshotPopovers: AnimationScreenshotPopover[] = [];
   #animationsContainer: HTMLElement;
-  #playbackRateButtons!: HTMLElement[];
   #previewContainer!: HTMLElement;
   #timelineScrubber!: HTMLElement;
   #currentTime!: HTMLElement;
@@ -148,12 +259,20 @@ export class AnimationTimeline extends UI.Widget.VBox implements
   #createPreviewForCollectedGroupsThrottler = new Common.Throttler.Throttler(10);
   #animationGroupUpdatedThrottler = new Common.Throttler.Throttler(10);
 
-  private constructor() {
-    super(true);
+  /** Container & state for rendering `toolbarView` */
+  #toolbarViewContainer: HTMLElement;
+  #toolbarView: ToolbarView;
+  #playbackRateButtonsDisabled = false;
+
+  constructor(toolbarView: ToolbarView = DEFAULT_TOOLBAR_VIEW) {
+    super({
+      jslog: `${VisualLogging.panel('animations').track({resize: true})}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(animationTimelineStyles);
 
+    this.#toolbarView = toolbarView;
     this.element.classList.add('animations-timeline');
-    this.element.setAttribute('jslog', `${VisualLogging.panel('animations').track({resize: true})}`);
 
     this.#timelineControlsResizer = this.contentElement.createChild('div', 'timeline-controls-resizer');
 
@@ -163,6 +282,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     this.#playbackRate = 1;
     this.#allPaused = false;
     this.#animationGroupPausedBeforeScrub = false;
+    this.#toolbarViewContainer = this.contentElement.createChild('div');
     this.createHeader();
     this.#animationsContainer = this.contentElement.createChild('div', 'animation-timeline-rows');
     this.#animationsContainer.setAttribute('jslog', `${VisualLogging.section('animations')}`);
@@ -177,7 +297,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
         i18nString(UIStrings.noEffectSelected), i18nString(UIStrings.selectAnEffectAboveToInspectAnd));
     noEffectSelectedPlaceholder.show(timelineHint);
 
-    /** @const */ this.#defaultDuration = 100;
+    /** @constant */ this.#defaultDuration = 100;
     this.#durationInternal = this.#defaultDuration;
     this.#nodesMap = new Map();
     this.#uiAnimations = [];
@@ -196,6 +316,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.nodeChanged, this);
 
     this.#setupTimelineControlsResizer();
+    this.performToolbarViewUpdate();
   }
 
   static instance(opts?: {forceNew: boolean}): AnimationTimeline {
@@ -326,51 +447,35 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     return this.#timelineScrubber;
   }
 
-  private createHeader(): HTMLElement {
-    const toolbarContainer = this.contentElement.createChild('div', 'animation-timeline-toolbar-container');
-    toolbarContainer.setAttribute('jslog', `${VisualLogging.toolbar()}`);
-    toolbarContainer.role = 'toolbar';
-    const topToolbar = toolbarContainer.createChild('devtools-toolbar', 'animation-timeline-toolbar');
-    topToolbar.role = 'presentation';
-    this.#clearButton =
-        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearAll), 'clear', undefined, 'animations.clear');
-    this.#clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
-      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AnimationGroupsCleared);
-      this.reset();
-    });
-    topToolbar.appendToolbarItem(this.#clearButton);
-    topToolbar.appendSeparator();
+  private performToolbarViewUpdate(): void {
+    this.#toolbarView(
+        {
+          selectedPlaybackRate: this.#playbackRate,
+          playbackRateButtonsDisabled: this.#playbackRateButtonsDisabled,
+          allPaused: this.#allPaused,
+          onClearClick: () => {
+            Host.userMetrics.actionTaken(Host.UserMetrics.Action.AnimationGroupsCleared);
+            this.reset();
+          },
+          onTogglePauseAllClick: () => {
+            this.#allPaused = !this.#allPaused;
+            Host.userMetrics.actionTaken(
+                this.#allPaused ? Host.UserMetrics.Action.AnimationsPaused : Host.UserMetrics.Action.AnimationsResumed,
+            );
+            this.setPlaybackRate(this.#playbackRate);
+            if (this.#pauseButton) {
+              this.#pauseButton.setTitle(
+                  this.#allPaused ? i18nString(UIStrings.resumeAll) : i18nString(UIStrings.pauseAll));
+            }
+          },
+          onSetPlaybackRateClick: (playbackRate: number) => {
+            this.setPlaybackRate(playbackRate);
+          }
+        },
+        undefined, this.#toolbarViewContainer);
+  }
 
-    this.#pauseButton =
-        new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.pauseAll), 'pause', 'resume', 'animations.pause-resume-all');
-    this.#pauseButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
-      this.togglePauseAll();
-    });
-    topToolbar.appendToolbarItem(this.#pauseButton);
-
-    const playbackRateControl = toolbarContainer.createChild('div', 'animation-playback-rate-control');
-    playbackRateControl.addEventListener('keydown', this.handlePlaybackRateControlKeyDown.bind(this));
-    UI.ARIAUtils.markAsListBox(playbackRateControl);
-    UI.ARIAUtils.setLabel(playbackRateControl, i18nString(UIStrings.playbackRates));
-
-    this.#playbackRateButtons = [];
-    for (const playbackRate of GlobalPlaybackRates) {
-      const button = playbackRateControl.createChild('button', 'animation-playback-rate-button');
-      button.textContent = playbackRate ? i18nString(UIStrings.playbackRatePlaceholder, {PH1: playbackRate * 100}) :
-                                          i18nString(UIStrings.pause);
-      button.setAttribute(
-          'jslog', `${VisualLogging.action().context(`animations.playback-rate-${playbackRate * 100}`).track({
-            click: true,
-            keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight',
-          })}`);
-      playbackRates.set(button, playbackRate);
-      button.addEventListener('click', this.setPlaybackRate.bind(this, playbackRate));
-      UI.ARIAUtils.markAsOption(button);
-      UI.Tooltip.Tooltip.install(button, i18nString(UIStrings.setSpeedToS, {PH1: button.textContent}));
-      button.tabIndex = -1;
-      this.#playbackRateButtons.push(button);
-    }
-    this.updatePlaybackControls();
+  private createHeader(): HTMLElement {
     this.#previewContainer = this.contentElement.createChild('div', 'animation-timeline-buffer');
     this.#previewContainer.setAttribute('jslog', `${VisualLogging.section('film-strip')}`);
     UI.ARIAUtils.markAsListBox(this.#previewContainer);
@@ -400,46 +505,6 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     return container;
   }
 
-  private handlePlaybackRateControlKeyDown(event: Event): void {
-    const keyboardEvent = (event as KeyboardEvent);
-    switch (keyboardEvent.key) {
-      case 'ArrowLeft':
-      case 'ArrowUp':
-        this.focusNextPlaybackRateButton(event.target, /* focusPrevious */ true);
-        break;
-      case 'ArrowRight':
-      case 'ArrowDown':
-        this.focusNextPlaybackRateButton(event.target);
-        break;
-    }
-  }
-
-  private focusNextPlaybackRateButton(target: EventTarget|null, focusPrevious?: boolean): void {
-    const button = (target as HTMLElement);
-    const currentIndex = this.#playbackRateButtons.indexOf(button);
-    const nextIndex = focusPrevious ? currentIndex - 1 : currentIndex + 1;
-    if (nextIndex < 0 || nextIndex >= this.#playbackRateButtons.length) {
-      return;
-    }
-    const nextButton = this.#playbackRateButtons[nextIndex];
-    nextButton.tabIndex = 0;
-    nextButton.focus();
-    if (target) {
-      (target as HTMLElement).tabIndex = -1;
-    }
-  }
-
-  private togglePauseAll(): void {
-    this.#allPaused = !this.#allPaused;
-    Host.userMetrics.actionTaken(
-        this.#allPaused ? Host.UserMetrics.Action.AnimationsPaused : Host.UserMetrics.Action.AnimationsResumed,
-    );
-    this.setPlaybackRate(this.#playbackRate);
-    if (this.#pauseButton) {
-      this.#pauseButton.setTitle(this.#allPaused ? i18nString(UIStrings.resumeAll) : i18nString(UIStrings.pauseAll));
-    }
-  }
-
   private setPlaybackRate(playbackRate: number): void {
     if (playbackRate !== this.#playbackRate) {
       Host.userMetrics.animationPlaybackRateChanged(
@@ -459,15 +524,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
       this.#scrubberPlayer.playbackRate = this.effectivePlaybackRate();
     }
 
-    this.updatePlaybackControls();
-  }
-
-  private updatePlaybackControls(): void {
-    for (const button of this.#playbackRateButtons) {
-      const selected = this.#playbackRate === playbackRates.get(button);
-      button.classList.toggle('selected', selected);
-      button.tabIndex = selected ? 0 : -1;
-    }
+    this.performToolbarViewUpdate();
   }
 
   private controlButtonToggle(): void {
@@ -631,26 +688,10 @@ export class AnimationTimeline extends UI.Widget.VBox implements
 
   private clearPreviews(): void {
     this.#previewMap.clear();
-    this.#screenshotPopovers.forEach(popover => {
-      popover.detach();
-    });
     this.#previewContainer.removeChildren();
-    this.#screenshotPopovers = [];
   }
 
   private createPreview(group: SDK.AnimationModel.AnimationGroup): void {
-    const screenshotsContainer = document.createElement('div');
-    screenshotsContainer.classList.add('screenshots-container', 'no-screenshots');
-    screenshotsContainer.createChild('span', 'screenshot-arrow');
-    // After the view is shown on hover, position it if it is out of bounds.
-    screenshotsContainer.addEventListener('animationend', () => {
-      const {right, left, width} = screenshotsContainer.getBoundingClientRect();
-      // Render to the left if it is not getting out of bounds when rendered on the left.
-      if (right > window.innerWidth && (left - width) >= 0) {
-        screenshotsContainer.classList.add('to-the-left');
-      }
-    });
-
     const preview = new AnimationGroupPreviewUI({
       animationGroup: group,
       label: i18nString(UIStrings.animationPreviewS, {PH1: this.#groupBuffer.length + 1}),
@@ -660,28 +701,6 @@ export class AnimationTimeline extends UI.Widget.VBox implements
       onSelectAnimationGroup: () => {
         void this.selectAnimationGroup(group);
       },
-      // Screenshot popover is created only once.
-      // Then, its visibility is controlled via CSS `:hover`.
-      onCreateScreenshotPopover: () => {
-        const screenshots = group.screenshots();
-        if (!screenshots.length) {
-          return;
-        }
-
-        screenshotsContainer.classList.remove('no-screenshots');
-        const createAndShowScreenshotPopover = (): void => {
-          const screenshotPopover = new AnimationScreenshotPopover(screenshots);
-          // This is needed for clearing out the widgets
-          this.#screenshotPopovers.push(screenshotPopover);
-          screenshotPopover.show(screenshotsContainer);
-        };
-
-        if (!screenshots[0].complete) {
-          screenshots[0].onload = createAndShowScreenshotPopover;
-        } else {
-          createAndShowScreenshotPopover();
-        }
-      },
       onFocusNextGroup: () => {
         this.focusNextGroup(group);
       },
@@ -694,7 +713,6 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     previewUiContainer.classList.add('preview-ui-container');
     preview.markAsRoot();
     preview.show(previewUiContainer);
-    previewUiContainer.appendChild(screenshotsContainer);
 
     this.#groupBuffer.push(group);
     this.#previewMap.set(group, preview);
@@ -878,22 +896,18 @@ export class AnimationTimeline extends UI.Widget.VBox implements
       this.setDuration(scrollRange);
       this.setCurrentTimeText(scrollOffset);
       this.setTimelineScrubberPosition(scrollOffset);
-
-      this.#playbackRateButtons.forEach(button => {
-        button.setAttribute('disabled', 'true');
-      });
-
       if (this.#pauseButton) {
         this.#pauseButton.setEnabled(false);
       }
+      this.#playbackRateButtonsDisabled = true;
+      this.performToolbarViewUpdate();
     } else {
       this.setDuration(group.finiteDuration());
-      this.#playbackRateButtons.forEach(button => {
-        button.removeAttribute('disabled');
-      });
       if (this.#pauseButton) {
         this.#pauseButton.setEnabled(true);
       }
+      this.#playbackRateButtonsDisabled = false;
+      this.performToolbarViewUpdate();
     }
 
     // Wait for all animations to be added and nodes to be resolved

package/front_end/panels/animation/AnimationUI.ts

@@ -14,16 +14,16 @@ import {type AnimationTimeline, StepTimingFunction} from './AnimationTimeline.js
 
 const UIStrings = {
   /**
-   *@description Title of the first and last points of an animation
+   * @description Title of the first and last points of an animation
    */
   animationEndpointSlider: 'Animation Endpoint slider',
   /**
-   *@description Title of an Animation Keyframe point
+   * @description Title of an Animation Keyframe point
    */
   animationKeyframeSlider: 'Animation Keyframe slider',
   /**
-   *@description Title of an animation keyframe group
-   *@example {anilogo} PH1
+   * @description Title of an animation keyframe group
+   * @example {anilogo} PH1
    */
   sSlider: '{PH1} slider',
 } as const;

package/front_end/panels/animation/animation.ts

@@ -3,13 +3,11 @@
 // found in the LICENSE file.
 
 import * as AnimationGroupPreviewUI from './AnimationGroupPreviewUI.js';
-import * as AnimationScreenshotPopover from './AnimationScreenshotPopover.js';
 import * as AnimationTimeline from './AnimationTimeline.js';
 import * as AnimationUI from './AnimationUI.js';
 
 export {
   AnimationGroupPreviewUI,
-  AnimationScreenshotPopover,
   AnimationTimeline,
   AnimationUI,
 };