[GM3Restyling] Update animations panel empty states

Before: https://imgur.com/a/A6eCZFD
After: https://imgur.com/a/Fx2Ib6W
Bug: 325443331
Change-Id: I990fd9d69399779d9ffc5a4a5a14c5d7a4b1d181
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6254938
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/panels/animation/AnimationTimeline.test.ts

@@ -676,3 +676,55 @@ describeWithMockConnection('AnimationTimeline', () => {
     });
   });
 });
+
+describeWithMockConnection('AnimationTimeline', () => {
+  it('shows placeholder showing that the panel is waiting for animations', () => {
+    const view = Animation.AnimationTimeline.AnimationTimeline.instance();
+    const placeholder = view.contentElement.querySelector('.animation-timeline-buffer-hint');
+    assert.exists(placeholder);
+
+    // Render into document in order to see the computed styles.
+    view.markAsRoot();
+    view.show(document.body);
+    assert.deepEqual(window.getComputedStyle(placeholder).display, 'flex');
+
+    assert.deepEqual(placeholder.querySelector('.empty-state-header')?.textContent, 'Currently waiting for animations');
+    assert.deepEqual(
+        placeholder.querySelector('.empty-state-description span')?.textContent,
+        'On this page you can inspect and modify animations.');
+
+    view.detach();
+  });
+
+  it('shows placeholder if no animation has been selected', async () => {
+    const target = createTarget();
+    const model = target.model(SDK.AnimationModel.AnimationModel);
+    assert.exists(model);
+
+    const dummyGroups = new Map<string, SDK.AnimationModel.AnimationGroup>();
+    sinon.stub(model!, 'animationGroups').value(dummyGroups);
+    dummyGroups.set('dummy', new SDK.AnimationModel.AnimationGroup(model, 'dummy', []));
+
+    // Render into document in order to update the shown empty state.
+    const view = Animation.AnimationTimeline.AnimationTimeline.instance();
+    view.markAsRoot();
+    view.show(document.body);
+
+    const previewUpdatePromise = new ManualPromise();
+    sinon.stub(view, 'previewsCreatedForTest').callsFake(() => {
+      previewUpdatePromise.resolve();
+    });
+
+    await previewUpdatePromise.wait();
+    const placeholder = view.contentElement.querySelector('.animation-timeline-rows-hint');
+    assert.exists(placeholder);
+
+    assert.deepEqual(window.getComputedStyle(placeholder).display, 'flex');
+    assert.deepEqual(placeholder.querySelector('.empty-state-header')?.textContent, 'No animation effect selected');
+    assert.deepEqual(
+        placeholder.querySelector('.empty-state-description span')?.textContent,
+        'Select an effect above to inspect and modify');
+
+    view.detach();
+  });
+});

front_end/panels/animation/AnimationTimeline.ts

@@ -20,9 +20,17 @@ import {AnimationUI} from './AnimationUI.js';
 
 const UIStrings = {
   /**
-   *@description Timeline hint text content in Animation Timeline of the Animation Inspector
+   *@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.
    */
-  selectAnEffectAboveToInspectAnd: 'Select an effect above to inspect and modify.',
+  noEffectSelected: 'No animation effect selected',
+  /**
+   *@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
    */
@@ -54,9 +62,13 @@ const UIStrings = {
    */
   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.
    */
-  waitingForAnimations: 'Waiting for animations...',
+  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
    */
@@ -89,6 +101,9 @@ const MIN_TIMELINE_CONTROLS_WIDTH = 120;
 const DEFAULT_TIMELINE_CONTROLS_WIDTH = 150;
 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;
 
 export class AnimationTimeline extends UI.Widget.VBox implements
@@ -150,8 +165,16 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     this.createHeader();
     this.#animationsContainer = this.contentElement.createChild('div', 'animation-timeline-rows');
     this.#animationsContainer.setAttribute('jslog', `${VisualLogging.section('animations')}`);
+    const emptyBufferHint = this.contentElement.createChild('div', 'animation-timeline-buffer-hint');
+    const noAnimationsPlaceholder = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.waitingForAnimations), i18nString(UIStrings.animationDescription));
+    noAnimationsPlaceholder.appendLink(ANIMATION_EXPLANATION_URL);
+    noAnimationsPlaceholder.show(emptyBufferHint);
+
     const timelineHint = this.contentElement.createChild('div', 'animation-timeline-rows-hint');
-    timelineHint.textContent = i18nString(UIStrings.selectAnEffectAboveToInspectAnd);
+    const noEffectSelectedPlaceholder = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.noEffectSelected), i18nString(UIStrings.selectAnEffectAboveToInspectAnd));
+    noEffectSelectedPlaceholder.show(timelineHint);
 
     /** @const */ this.#defaultDuration = 100;
     this.#durationInternal = this.#defaultDuration;
@@ -351,8 +374,6 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     this.#previewContainer.setAttribute('jslog', `${VisualLogging.section('film-strip')}`);
     UI.ARIAUtils.markAsListBox(this.#previewContainer);
     UI.ARIAUtils.setLabel(this.#previewContainer, i18nString(UIStrings.animationPreviews));
-    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');

front_end/panels/animation/animationTimeline.css

@@ -144,28 +144,19 @@ circle.animation-keyframe-point:active {
   cursor: pointer;
 }
 
-.animation-timeline-buffer,
-.animation-timeline-buffer-hint {
+.animation-timeline-buffer
+ {
   height: 48px;
   flex: 0 0 auto;
   border-bottom: 1px solid var(--sys-color-divider);
   display: flex;
   padding: 0 2px;
 }
 
-.animation-timeline-buffer:empty,
 .animation-timeline-buffer-hint {
   display: none;
 }
 
-.animation-timeline-buffer:empty ~ .animation-timeline-buffer-hint {
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  z-index: 101;
-  display: flex;
-}
-
 .animation-time-overlay {
   background-color: var(--sys-color-on-surface);
   opacity: 5%;
@@ -352,7 +343,8 @@ text.animation-timeline-grid-label {
 }
 
 .animation-timeline-rows,
-.animation-timeline-rows-hint {
+.animation-timeline-rows-hint,
+.animation-timeline-buffer-hint {
   flex-grow: 1;
   overflow: hidden auto;
   z-index: 1;
@@ -366,7 +358,12 @@ text.animation-timeline-grid-label {
   flex-grow: 0;
 }
 
-.animation-timeline-buffer:not(:empty) ~ .animation-timeline-rows:empty ~ .animation-timeline-rows-hint {
+.animation-timeline-rows:empty {
+  display: none;
+}
+
+.animation-timeline-buffer:not(:empty) ~ .animation-timeline-rows:empty ~.animation-timeline-buffer-hint:not(:empty) ~ .animation-timeline-rows-hint,
+.animation-timeline-buffer:empty ~ .animation-timeline-buffer-hint {
   font-size: 14px;
   display: flex;
   align-items: center;