[Memory] Release all animations before memory operations

This is a workaround to remove user facing issue of having detached
elements in the profiles because of the animations panel.

What happens is, we keep the animations for replay in the animations panel.
However, when a DOM node is removed; we still keep the
animation related to the DOM node in the animations panel and
this causes the node to be retained and show up in the memory
profiles as detached elements.

Fixed: 400635410
Change-Id: I686799c1069978fbb78250d88ae6459a5ee26572
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6406316
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>

Author: ergunsh

front_end/BUILD.gn

@@ -191,6 +191,7 @@ group("unittests") {
     "panels/network:unittests",
     "panels/network/components:unittests",
     "panels/performance_monitor:unittests",
+    "panels/profiler:unittests",
     "panels/protocol_monitor:unittests",
     "panels/recorder:unittests",
     "panels/recorder/components:unittests",

front_end/legacy_test_runner/heap_profiler_test_runner/heap_profiler_test_runner.js

@@ -777,7 +777,7 @@ HeapProfilerTestRunner.startSamplingHeapProfiler = async function() {
         resolve =>
             UI.Context.Context.instance().addFlavorChangeListener(SDK.HeapProfilerModel.HeapProfilerModel, resolve));
   }
-  Profiler.HeapProfileView.SamplingHeapProfileType.instance.startRecordingProfile();
+  await Profiler.HeapProfileView.SamplingHeapProfileType.instance.startRecordingProfile();
 };
 
 HeapProfilerTestRunner.stopSamplingHeapProfiler = function() {

front_end/panels/profiler/BUILD.gn

@@ -96,3 +96,18 @@ devtools_entrypoint("meta") {
 
   visibility = [ "../../entrypoints/*" ]
 }
+
+ts_library("unittests") {
+  testonly = true
+
+  sources = [
+    "HeapDetachedElementsView.test.ts",
+    "HeapProfileView.test.ts",
+    "HeapSnapshotView.test.ts",
+  ]
+
+  deps = [
+    ":bundle",
+    "../../testing",
+  ]
+}

front_end/panels/profiler/HeapDetachedElementsView.test.ts

@@ -0,0 +1,34 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as SDK from '../../core/sdk/sdk.js';
+import {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {expectCall} from '../../testing/ExpectStubCall.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+describeWithMockConnection('DetachedElementsProfileType', () => {
+  describe('buttonClicked', () => {
+    let releaseAllAnimationsStub: sinon.SinonStub;
+    let getDetachedDOMNodesStub: sinon.SinonStub;
+    beforeEach(() => {
+      const target = createTarget();
+      const heapProfilerModel = target.model(SDK.HeapProfilerModel.HeapProfilerModel);
+      UI.Context.Context.instance().setFlavor(SDK.HeapProfilerModel.HeapProfilerModel, heapProfilerModel);
+
+      releaseAllAnimationsStub =
+          sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'releaseAllAnimations').resolves();
+      getDetachedDOMNodesStub = sinon.stub(SDK.DOMModel.DOMModel.prototype, 'getDetachedDOMNodes').resolves([]);
+    });
+
+    it('releases all animations before `getDetachedDOMNodes` call', async () => {
+      // We need dynamic import here because statically importing the module requires locale vars to be initialized vars.
+      const Profiler = await import('./profiler.js');
+      Profiler.ProfileTypeRegistry.instance.detachedElementProfileType.buttonClicked();
+
+      assert.isTrue(releaseAllAnimationsStub.calledOnce, 'Expected release all animations to be called');
+      await expectCall(getDetachedDOMNodesStub);
+    });
+  });
+});

front_end/panels/profiler/HeapDetachedElementsView.ts

@@ -118,10 +118,15 @@ export class DetachedElementsProfileType extends
     const heapProfilerModel = UI.Context.Context.instance().flavor(SDK.HeapProfilerModel.HeapProfilerModel);
     const target = heapProfilerModel?.target();
     const domModel = target?.model(SDK.DOMModel.DOMModel);
-
     if (!heapProfilerModel || !target || !domModel) {
       return;
     }
+
+    const animationModel = target?.model(SDK.AnimationModel.AnimationModel);
+    if (animationModel) {
+      // TODO(b/406904348): Remove this once we correctly release animations on the backend.
+      await animationModel.releaseAllAnimations();
+    }
     const data = await domModel.getDetachedDOMNodes();
 
     const profile: DetachedElementsProfileHeader = new DetachedElementsProfileHeader(heapProfilerModel, this, data);

front_end/panels/profiler/HeapProfileView.test.ts

@@ -0,0 +1,34 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as SDK from '../../core/sdk/sdk.js';
+import {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {expectCall} from '../../testing/ExpectStubCall.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+describeWithMockConnection('SamplingHeapProfileTypeBase', () => {
+  describe('buttonClicked', () => {
+    let releaseAllAnimationsStub: sinon.SinonStub;
+    beforeEach(() => {
+      const target = createTarget();
+      const heapProfilerModel = target.model(SDK.HeapProfilerModel.HeapProfilerModel);
+      UI.Context.Context.instance().setFlavor(SDK.HeapProfilerModel.HeapProfilerModel, heapProfilerModel);
+
+      releaseAllAnimationsStub =
+          sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'releaseAllAnimations').resolves();
+    });
+
+    it('releases all animations before `startSampling` call', async () => {
+      // We need dynamic import here because statically importing the module requires locale vars to be initialized vars.
+      const Profiler = await import('./profiler.js');
+      const startSamplingStub =
+          sinon.stub(Profiler.ProfileTypeRegistry.instance.samplingHeapProfileType, 'startSampling');
+      Profiler.ProfileTypeRegistry.instance.samplingHeapProfileType.buttonClicked();
+
+      assert.isTrue(releaseAllAnimationsStub.calledOnce, 'Expected release all animations to be called');
+      await expectCall(startSamplingStub);
+    });
+  });
+});

front_end/panels/profiler/HeapProfileView.ts

@@ -263,12 +263,12 @@ export class SamplingHeapProfileTypeBase extends
     if (this.recording) {
       void this.stopRecordingProfile();
     } else {
-      this.startRecordingProfile();
+      void this.startRecordingProfile();
     }
     return this.recording;
   }
 
-  startRecordingProfile(): void {
+  async startRecordingProfile(): Promise<void> {
     const heapProfilerModel = UI.Context.Context.instance().flavor(SDK.HeapProfilerModel.HeapProfilerModel);
     if (this.profileBeingRecorded() || !heapProfilerModel) {
       return;
@@ -282,6 +282,12 @@ export class SamplingHeapProfileTypeBase extends
     UI.InspectorView.InspectorView.instance().setPanelWarnings('heap-profiler', warnings);
 
     this.recording = true;
+    const target = heapProfilerModel.target();
+    const animationModel = target.model(SDK.AnimationModel.AnimationModel);
+    if (animationModel) {
+      // TODO(b/406904348): Remove this once we correctly release animations on the backend.
+      await animationModel.releaseAllAnimations();
+    }
     this.startSampling();
   }
 

front_end/panels/profiler/HeapSnapshotView.test.ts

@@ -0,0 +1,35 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as SDK from '../../core/sdk/sdk.js';
+import {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {expectCall} from '../../testing/ExpectStubCall.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+describeWithMockConnection('TrackingHeapSnapshotProfileType', () => {
+  describe('buttonClicked', () => {
+    let releaseAllAnimationsStub: sinon.SinonStub;
+    let startTrackingHeapObjectsStub: sinon.SinonStub;
+    beforeEach(() => {
+      const target = createTarget();
+      const heapProfilerModel = target.model(SDK.HeapProfilerModel.HeapProfilerModel);
+      UI.Context.Context.instance().setFlavor(SDK.HeapProfilerModel.HeapProfilerModel, heapProfilerModel);
+
+      releaseAllAnimationsStub =
+          sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'releaseAllAnimations').resolves();
+      startTrackingHeapObjectsStub =
+          sinon.stub(SDK.HeapProfilerModel.HeapProfilerModel.prototype, 'startTrackingHeapObjects').resolves();
+    });
+
+    it('releases all animations before `startTrackingHeapObjects` call', async () => {
+      // We need dynamic import here because statically importing the module requires locale vars to be initialized vars.
+      const Profiler = await import('./profiler.js');
+      Profiler.ProfileTypeRegistry.instance.trackingHeapSnapshotProfileType.buttonClicked();
+
+      assert.isTrue(releaseAllAnimationsStub.calledOnce, 'Expected release all animations to be called');
+      await expectCall(startTrackingHeapObjectsStub);
+    });
+  });
+});

front_end/panels/profiler/HeapSnapshotView.ts

@@ -1526,14 +1526,20 @@ export class TrackingHeapSnapshotProfileType extends
     return this.toggleRecording();
   }
 
-  startRecordingProfile(): void {
+  async startRecordingProfile(): Promise<void> {
     if (this.profileBeingRecorded()) {
       return;
     }
     const heapProfilerModel = this.addNewProfile();
     if (!heapProfilerModel) {
       return;
     }
+
+    const animationModel = heapProfilerModel.target().model(SDK.AnimationModel.AnimationModel);
+    if (animationModel) {
+      // TODO(b/406904348): Remove this once we correctly release animations on the backend.
+      await animationModel.releaseAllAnimations();
+    }
     void heapProfilerModel.startTrackingHeapObjects(this.recordAllocationStacksSettingInternal.get());
   }
 
@@ -1593,7 +1599,7 @@ export class TrackingHeapSnapshotProfileType extends
     if (this.recording) {
       void this.stopRecordingProfile();
     } else {
-      this.startRecordingProfile();
+      void this.startRecordingProfile();
     }
     return this.recording;
   }