[Animations] Render a jump-to icon for animations in styles tab

Fixed: 349566091
Change-Id: Id8a96300c8e9a384ebfae98a1eddd8666548ac02
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5971493
Reviewed-by: Philip Pfaffe <[email protected]>
Reviewed-by: Changhao Han <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>

Author: ergunsh

front_end/core/common/Revealer.ts

@@ -46,6 +46,10 @@ const UIStrings = {
    * @description The UI destination when revealing loaded resources through the Developer Resources Panel
    */
   developerResourcesPanel: 'Developer Resources panel',
+  /**
+   * @description The UI destination when revealing loaded resources through the Animations panel
+   */
+  animationsPanel: 'Animations panel',
 };
 const str_ = i18n.i18n.registerUIStrings('core/common/Revealer.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -177,6 +181,7 @@ export const RevealerDestination = {
   APPLICATION_PANEL: i18nLazyString(UIStrings.applicationPanel),
   SOURCES_PANEL: i18nLazyString(UIStrings.sourcesPanel),
   MEMORY_INSPECTOR_PANEL: i18nLazyString(UIStrings.memoryInspectorPanel),
+  ANIMATIONS_PANEL: i18nLazyString(UIStrings.animationsPanel),
 };
 
 export type RevealerDestination = () => Platform.UIString.LocalizedString;

front_end/core/sdk/AnimationModel.test.ts

@@ -12,6 +12,32 @@ import {
 
 import * as SDK from './sdk.js';
 
+function createAnimationPayload(payload: Partial<Protocol.Animation.Animation>): Protocol.Animation.Animation {
+  return {
+    id: '1',
+    name: 'animation-name',
+    pausedState: false,
+    playbackRate: 1,
+    startTime: 0,
+    currentTime: 0,
+    type: Protocol.Animation.AnimationType.CSSAnimation,
+    playState: 'running',
+    ...payload,
+    source: {
+      backendNodeId: 1 as Protocol.DOM.BackendNodeId,
+      delay: 0,
+      endDelay: 0,
+      iterationStart: 0,
+      iterations: 1,
+      duration: 100,
+      direction: 'forward',
+      fill: 'forwards',
+      easing: 'linear',
+      ...(payload.source ? payload.source : null),
+    },
+  };
+}
+
 describeWithMockConnection('AnimationModel', () => {
   afterEach(() => {
     clearAllMockConnectionResponseHandlers();
@@ -24,6 +50,59 @@ describeWithMockConnection('AnimationModel', () => {
     });
   });
 
+  describe('getAnimationGroupForAnimation', () => {
+    const NODE_ID = 1 as Protocol.DOM.NodeId;
+    beforeEach(() => {
+      const stubDOMNode = sinon.createStubInstance(SDK.DOMModel.DOMNode);
+      stubDOMNode.id = NODE_ID;
+      sinon.stub(SDK.AnimationModel.AnimationEffect.prototype, 'node').resolves(stubDOMNode);
+    });
+
+    it('should resolve the containing animation group if the animation with given name and node id exists in the group',
+       async () => {
+         const target = createTarget();
+         const model = new SDK.AnimationModel.AnimationModel(target);
+         const animationGroupStartedPromiseWithResolvers = Promise.withResolvers<void>();
+         model.addEventListener(SDK.AnimationModel.Events.AnimationGroupStarted, () => {
+           animationGroupStartedPromiseWithResolvers.resolve();
+         });
+         void model.animationStarted(createAnimationPayload({name: 'animation-name'}));
+         await animationGroupStartedPromiseWithResolvers.promise;
+
+         const receivedAnimationGroup = await model.getAnimationGroupForAnimation('animation-name', NODE_ID);
+         assert.isNotNull(receivedAnimationGroup);
+       });
+
+    it('should resolve null if there is no animations with matching name', async () => {
+      const target = createTarget();
+      const model = new SDK.AnimationModel.AnimationModel(target);
+      const animationGroupStartedPromiseWithResolvers = Promise.withResolvers<void>();
+      model.addEventListener(SDK.AnimationModel.Events.AnimationGroupStarted, () => {
+        animationGroupStartedPromiseWithResolvers.resolve();
+      });
+      void model.animationStarted(createAnimationPayload({name: 'animation-name'}));
+      await animationGroupStartedPromiseWithResolvers.promise;
+
+      const receivedAnimationGroup = await model.getAnimationGroupForAnimation('not-a-matching-name', NODE_ID);
+      assert.isNull(receivedAnimationGroup);
+    });
+
+    it('should resolve null if there is an animation with the same name but for a different node id', async () => {
+      const target = createTarget();
+      const model = new SDK.AnimationModel.AnimationModel(target);
+      const animationGroupStartedPromiseWithResolvers = Promise.withResolvers<void>();
+      model.addEventListener(SDK.AnimationModel.Events.AnimationGroupStarted, () => {
+        animationGroupStartedPromiseWithResolvers.resolve();
+      });
+      void model.animationStarted(createAnimationPayload({name: 'animation-name'}));
+      await animationGroupStartedPromiseWithResolvers.promise;
+
+      const receivedAnimationGroup =
+          await model.getAnimationGroupForAnimation('animation-name', 9999 as Protocol.DOM.NodeId);
+      assert.isNull(receivedAnimationGroup);
+    });
+  });
+
   describe('AnimationImpl', () => {
     it('setPayload should update values returned from the relevant value functions for time based animations',
        async () => {

front_end/core/sdk/AnimationModel.ts

@@ -339,6 +339,21 @@ export class AnimationModel extends SDKModel<EventTypes> {
     return 1;
   }
 
+  async getAnimationGroupForAnimation(name: string, nodeId: Protocol.DOM.NodeId): Promise<AnimationGroup|null> {
+    for (const animationGroup of this.animationGroups.values()) {
+      for (const animation of animationGroup.animations()) {
+        if (animation.name() === name) {
+          const animationNode = await animation.source().node();
+          if (animationNode?.id === nodeId) {
+            return animationGroup;
+          }
+        }
+      }
+    }
+
+    return null;
+  }
+
   animationCanceled(id: string): void {
     this.#pendingAnimations.delete(id);
   }

front_end/panels/animation/AnimationTimeline.ts

@@ -238,10 +238,27 @@ export class AnimationTimeline extends UI.Widget.VBox implements
         continue;
       }
 
-      this.addAnimationGroup(animationGroup);
+      void this.addAnimationGroup(animationGroup);
     }
   }
 
+  #showPanelInDrawer(): void {
+    const viewManager = UI.ViewManager.ViewManager.instance();
+    viewManager.moveView('animations', 'drawer-view', {
+      shouldSelectTab: true,
+      overrideSaving: true,
+    });
+  }
+
+  async revealAnimationGroup(animationGroup: SDK.AnimationModel.AnimationGroup): Promise<void> {
+    if (!this.#previewMap.has(animationGroup)) {
+      await this.addAnimationGroup(animationGroup);
+    }
+
+    this.#showPanelInDrawer();
+    return this.selectAnimationGroup(animationGroup);
+  }
+
   modelAdded(animationModel: SDK.AnimationModel.AnimationModel): void {
     if (this.isShowing()) {
       this.addEventListeners(animationModel);
@@ -537,7 +554,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
   }
 
   private animationGroupStarted({data}: Common.EventTarget.EventTargetEvent<SDK.AnimationModel.AnimationGroup>): void {
-    this.addAnimationGroup(data);
+    void this.addAnimationGroup(data);
   }
 
   scheduledRedrawAfterAnimationGroupUpdatedForTest(): void {
@@ -682,15 +699,15 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     this.previewsCreatedForTest();
   }
 
-  private addAnimationGroup(group: SDK.AnimationModel.AnimationGroup): void {
+  private addAnimationGroup(group: SDK.AnimationModel.AnimationGroup): Promise<void> {
     const previewGroup = this.#previewMap.get(group);
     if (previewGroup) {
       if (this.#selectedGroup === group) {
         this.syncScrubber();
       } else {
         previewGroup.replay();
       }
-      return;
+      return Promise.resolve();
     }
 
     this.#groupBuffer.sort((left, right) => left.startTime() - right.startTime());
@@ -715,7 +732,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     // Batch creating preview for arrivals happening closely together to ensure
     // stable UI sorting in the preview container.
     this.#collectedGroups.push(group);
-    void this.#createPreviewForCollectedGroupsThrottler.schedule(
+    return this.#createPreviewForCollectedGroupsThrottler.schedule(
         () => Promise.resolve(this.createPreviewForCollectedGroups()));
   }
 
@@ -1222,3 +1239,9 @@ export class StepTimingFunction {
     return null;
   }
 }
+
+export class AnimationGroupRevealer implements Common.Revealer.Revealer<SDK.AnimationModel.AnimationGroup> {
+  async reveal(animationGroup: SDK.AnimationModel.AnimationGroup): Promise<void> {
+    await AnimationTimeline.instance().revealAnimationGroup(animationGroup);
+  }
+}

front_end/panels/animation/animation-meta.ts

@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Animation from './animation.js';
@@ -41,3 +43,16 @@ UI.ViewManager.registerViewExtension({
     return Animation.AnimationTimeline.AnimationTimeline.instance();
   },
 });
+
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return [
+      SDK.AnimationModel.AnimationGroup,
+    ];
+  },
+  destination: Common.Revealer.RevealerDestination.SOURCES_PANEL,
+  async loadRevealer() {
+    const Animation = await loadAnimationModule();
+    return new Animation.AnimationTimeline.AnimationGroupRevealer();
+  },
+});

front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -279,6 +279,96 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
                stylePropertyTreeElement.valueElement?.querySelectorAll('devtools-link-swatch');
            assert.strictEqual(animationNameSwatches?.length, 2);
          });
+
+      describe('jumping to animations panel', () => {
+        let domModel: SDK.DOMModel.DOMModel;
+        beforeEach(() => {
+          const target = createTarget();
+          const domModelBeforeAssertion = target.model(SDK.DOMModel.DOMModel);
+          assert.exists(domModelBeforeAssertion);
+          domModel = domModelBeforeAssertion;
+        });
+
+        afterEach(() => {
+          sinon.reset();
+        });
+
+        it('should render a jump-to icon when the animation with the given name exists for the node', async () => {
+          const stubAnimationGroup = sinon.createStubInstance(SDK.AnimationModel.AnimationGroup);
+          const getAnimationGroupForAnimationStub =
+              sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
+                  .resolves(stubAnimationGroup);
+          const domNode = SDK.DOMModel.DOMNode.create(domModel, null, false, {
+            nodeId: 1 as Protocol.DOM.NodeId,
+            backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+            nodeType: Node.ELEMENT_NODE,
+            nodeName: 'div',
+            localName: 'div',
+            nodeValue: '',
+          });
+          const stylePropertyTreeElement = getTreeElement('animation-name', 'first-keyframe, second-keyframe');
+          sinon.stub(stylePropertyTreeElement, 'node').returns(domNode);
+
+          stylePropertyTreeElement.updateTitle();
+          await Promise.all(getAnimationGroupForAnimationStub.returnValues);
+
+          const jumpToIcon =
+              stylePropertyTreeElement.valueElement?.querySelector('devtools-icon.open-in-animations-panel');
+          assert.exists(jumpToIcon);
+        });
+
+        it('should clicking on the jump-to icon reveal the resolved animation group', async () => {
+          const stubAnimationGroup = sinon.createStubInstance(SDK.AnimationModel.AnimationGroup);
+          const revealerSpy = sinon.spy(Common.Revealer.RevealerRegistry.instance(), 'reveal');
+          const getAnimationGroupForAnimationStub =
+              sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
+                  .resolves(stubAnimationGroup);
+          const domNode = SDK.DOMModel.DOMNode.create(domModel, null, false, {
+            nodeId: 1 as Protocol.DOM.NodeId,
+            backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+            nodeType: Node.ELEMENT_NODE,
+            nodeName: 'div',
+            localName: 'div',
+            nodeValue: '',
+          });
+          const stylePropertyTreeElement = getTreeElement('animation-name', 'first-keyframe, second-keyframe');
+          sinon.stub(stylePropertyTreeElement, 'node').returns(domNode);
+
+          stylePropertyTreeElement.updateTitle();
+          await Promise.all(getAnimationGroupForAnimationStub.returnValues);
+
+          const jumpToIcon =
+              stylePropertyTreeElement.valueElement?.querySelector('devtools-icon.open-in-animations-panel');
+          jumpToIcon?.dispatchEvent(new Event('mouseup'));
+          assert.isTrue(
+              revealerSpy.calledWith(stubAnimationGroup),
+              'Common.Revealer.reveal is not called for the animation group');
+        });
+
+        it('should not render a jump-to icon when the animation with the given name does not exist for the node',
+           async () => {
+             const getAnimationGroupForAnimationStub =
+                 sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
+                     .resolves(null);
+             const domNode = SDK.DOMModel.DOMNode.create(domModel, null, false, {
+               nodeId: 1 as Protocol.DOM.NodeId,
+               backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+               nodeType: Node.ELEMENT_NODE,
+               nodeName: 'div',
+               localName: 'div',
+               nodeValue: '',
+             });
+             const stylePropertyTreeElement = getTreeElement('animation-name', 'first-keyframe, second-keyframe');
+             sinon.stub(stylePropertyTreeElement, 'node').returns(domNode);
+
+             stylePropertyTreeElement.updateTitle();
+             await Promise.all(getAnimationGroupForAnimationStub.returnValues);
+
+             const jumpToIcon =
+                 stylePropertyTreeElement.valueElement?.querySelector('devtools-icon.open-in-animations-panel');
+             assert.notExists(jumpToIcon);
+           });
+      });
     });
   });
 

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -757,6 +757,33 @@ export class LinkableNameRenderer implements MatchRenderer<LinkableNameMatch> {
       jslogContext,
     };
 
+    if (match.propertyName === LinkableNameProperties.ANIMATION ||
+        match.propertyName === LinkableNameProperties.ANIMATION_NAME) {
+      const el = document.createElement('span');
+      el.appendChild(swatch);
+
+      const node = this.#treeElement.node();
+      if (node) {
+        const animationModel = node.domModel().target().model(SDK.AnimationModel.AnimationModel);
+        void animationModel?.getAnimationGroupForAnimation(match.text, node.id).then(maybeAnimationGroup => {
+          if (!maybeAnimationGroup) {
+            return;
+          }
+
+          const icon = IconButton.Icon.create('open-externally', 'open-in-animations-panel');
+          icon.setAttribute('jslog', `${VisualLogging.link('open-in-animations-panel').track({click: true})}`);
+          icon.setAttribute('role', 'button');
+          icon.addEventListener('mouseup', ev => {
+            ev.consume(true);
+
+            void Common.Revealer.reveal(maybeAnimationGroup);
+          });
+          el.insertBefore(icon, swatch);
+        });
+      }
+      return [el];
+    }
+
     return [swatch];
   }
 

front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -275,3 +275,16 @@ devtools-css-angle,
 devtools-css-length {
   display: inline-block;
 }
+
+devtools-icon.open-in-animations-panel {
+  position: relative;
+  transform: scale(0.7);
+  margin: -5px -2px -3px -4px;
+  user-select: none;
+  color: var(--icon-default);
+  cursor: default;
+
+  &:hover {
+    color: var(--icon-default-hover);
+  }
+}

front_end/ui/visual_logging/KnownContextValues.ts

@@ -2167,6 +2167,7 @@ export const knownContextValues = new Set([
   'opacity',
   'open-ai-settings',
   'open-folder',
+  'open-in-animations-panel',
   'open-in-containing-folder',
   'open-in-new-tab',
   'open-link-handler',