Use scoped TargetManager API in media panel

Bug: 1417112
Change-Id: Iddb1e98627d784db1bc162f9a6090f0ca593e6d7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4345505
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Auto-Submit: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Danil Somsikov <dsv@chromium.org>

Author: danilsomsikov

front_end/panels/media/MainView.ts

@@ -64,7 +64,7 @@ class PlayerDataCollection implements TriggerHandler {
   }
 }
 
-class PlayerDataDownloadManager implements TriggerDispatcher {
+export class PlayerDataDownloadManager implements TriggerDispatcher {
   private readonly playerDataCollection: Map<string, PlayerDataCollection>;
   constructor() {
     this.playerDataCollection = new Map();
@@ -136,24 +136,23 @@ export class MainView extends UI.Panel.PanelWithSidebar implements SDK.TargetMan
   private readonly downloadStore: PlayerDataDownloadManager;
   private readonly sidebar: PlayerListView;
 
-  constructor() {
+  constructor(downloadStore: PlayerDataDownloadManager) {
     super('Media');
     this.detailPanels = new Map();
 
     this.deletedPlayers = new Set();
 
-    this.downloadStore = new PlayerDataDownloadManager();
+    this.downloadStore = downloadStore;
 
     this.sidebar = new PlayerListView(this);
     this.sidebar.show(this.panelSidebarElement());
 
-    SDK.TargetManager.TargetManager.instance().observeModels(MediaModel, this);
+    SDK.TargetManager.TargetManager.instance().observeModels(MediaModel, this, {scoped: true});
   }
 
-  static instance(opts = {forceNew: null}): MainView {
-    const {forceNew} = opts;
-    if (!mainViewInstance || forceNew) {
-      mainViewInstance = new MainView();
+  static instance(opts?: {forceNew: boolean, downloadStore?: PlayerDataDownloadManager}): MainView {
+    if (!mainViewInstance || opts?.forceNew) {
+      mainViewInstance = new MainView(opts?.downloadStore || new PlayerDataDownloadManager());
     }
 
     return mainViewInstance;
@@ -172,13 +171,13 @@ export class MainView extends UI.Panel.PanelWithSidebar implements SDK.TargetMan
 
   wasShown(): void {
     super.wasShown();
-    for (const model of SDK.TargetManager.TargetManager.instance().models(MediaModel)) {
+    for (const model of SDK.TargetManager.TargetManager.instance().models(MediaModel, {scoped: true})) {
       this.addEventListeners(model);
     }
   }
 
   willHide(): void {
-    for (const model of SDK.TargetManager.TargetManager.instance().models(MediaModel)) {
+    for (const model of SDK.TargetManager.TargetManager.instance().models(MediaModel, {scoped: true})) {
       this.removeEventListeners(model);
     }
   }

front_end/panels/media/TickingFlameChart.ts

@@ -16,7 +16,7 @@ function getGroupDefaultTextColor(): string {
   return ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
 }
 
-const DefaultStyle = {
+const DefaultStyle: () => PerfUI.FlameChart.GroupStyle = () => ({
   height: 20,
   padding: 2,
   collapsible: false,
@@ -28,7 +28,7 @@ const DefaultStyle = {
   shareHeaderLine: false,
   useFirstLineForOverview: false,
   useDecoratorsForOverview: false,
-};
+});
 
 export const HotColorScheme = ['#ffba08', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208'];
 export const ColdColorScheme = ['#7400b8', '#6930c3', '#5e60ce', '#5390d9', '#4ea8de', '#48bfe3', '#56cfe1', '#64dfdf'];
@@ -397,7 +397,7 @@ class TickingFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataP
         startLevel: this.maxLevel,
         expanded: true,
         selectable: false,
-        style: DefaultStyle,
+        style: DefaultStyle(),
         track: null,
       };
       this.timelineDataInternal.groups.push(newGroup);

front_end/ui/legacy/components/perf_ui/ChartViewport.ts

@@ -5,11 +5,14 @@
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
+import * as Coordinator from '../../../components/render_coordinator/render_coordinator.js';
 import * as UI from '../../legacy.js';
 
 import chartViewPortStyles from './chartViewport.css.legacy.js';
 import {MinimalTimeWindowMs} from './FlameChart.js';
 
+const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+
 export interface ChartViewportDelegate {
   windowChanged(startTime: number, endTime: number, animate: boolean): void;
   updateRangeSelection(startTime: number, endTime: number): void;
@@ -47,7 +50,6 @@ export class ChartViewport extends UI.Widget.VBox {
   private lastMouseOffsetX!: number;
   private minimumBoundary!: number;
   private totalTime!: number;
-  private updateTimerId?: number;
   private cancelWindowTimesAnimation?: (() => void)|null;
 
   constructor(delegate: ChartViewportDelegate) {
@@ -412,13 +414,10 @@ export class ChartViewport extends UI.Widget.VBox {
   }
 
   scheduleUpdate(): void {
-    if (this.updateTimerId || this.cancelWindowTimesAnimation) {
+    if (this.cancelWindowTimesAnimation) {
       return;
     }
-    this.updateTimerId = this.element.window().requestAnimationFrame(() => {
-      this.updateTimerId = 0;
-      this.update();
-    });
+    void coordinator.write(() => this.update());
   }
 
   private update(): void {

test/unittests/front_end/panels/media/BUILD.gn

@@ -6,7 +6,14 @@ import("../../../../../third_party/typescript/typescript.gni")
 
 ts_library("media") {
   testonly = true
-  sources = [ "TickingFlameChartHelpers_test.ts" ]
+  sources = [
+    "MainView_test.ts",
+    "TickingFlameChartHelpers_test.ts",
+  ]
 
-  deps = [ "../../../../../front_end/panels/media:bundle" ]
+  deps = [
+    "../../../../../front_end/core/sdk:bundle",
+    "../../../../../front_end/panels/media:bundle",
+    "../../helpers",
+  ]
 }

test/unittests/front_end/panels/media/MainView_test.ts

@@ -0,0 +1,62 @@
+// Copyright 2023 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 type * as Protocol from '../../../../../front_end/generated/protocol.js';
+import {assertNotNullOrUndefined} from '../../../../../front_end/core/platform/platform.js';
+import * as SDK from '../../../../../front_end/core/sdk/sdk.js';
+import * as Media from '../../../../../front_end/panels/media/media.js';
+import {createTarget} from '../../helpers/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../helpers/MockConnection.js';
+import * as Coordinator from '../../../../../front_end/ui/components/render_coordinator/render_coordinator.js';
+
+const {assert} = chai;
+
+const PLAYER_ID = 'PLAYER_ID' as Protocol.Media.PlayerId;
+
+describeWithMockConnection('MediaMainView', () => {
+  let target: SDK.Target.Target;
+
+  beforeEach(() => {
+    target = createTarget();
+    // window.onerror = msg => console.error('onerror: ' + msg + (new Error()).stack);
+  });
+
+  const testUiUpdate =
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (event: any, expectedMethod: keyof Media.MainView.PlayerDataDownloadManager, inScope: boolean) => async () => {
+        if (inScope) {
+          SDK.TargetManager.TargetManager.instance().setScopeTarget(target);
+        }
+        const downloadStore = new Media.MainView.PlayerDataDownloadManager();
+        const expectedCall = sinon.stub(downloadStore, expectedMethod).returns();
+        const mainView = Media.MainView.MainView.instance({forceNew: true, downloadStore});
+        mainView.markAsRoot();
+        mainView.show(document.body);
+        const model = target.model(Media.MediaModel.MediaModel);
+        assertNotNullOrUndefined(model);
+        model.dispatchEventToListeners(Media.MediaModel.Events.PlayersCreated, [PLAYER_ID]);
+        const field = [{name: 'kResolution', value: '{}', data: {}, stack: [], cause: []}];
+        const data = {playerId: PLAYER_ID, properties: field, events: field, messages: field, errors: field};
+        model.dispatchEventToListeners(event, data);
+        await new Promise(resolve => setTimeout(resolve, 0));
+        assert.strictEqual(expectedCall.called, inScope);
+        await Coordinator.RenderCoordinator.RenderCoordinator.instance().done();
+        mainView.detach();
+      };
+
+  it('reacts to properties on in scope event',
+     testUiUpdate(Media.MediaModel.Events.PlayerPropertiesChanged, 'onProperty', true));
+  it('does not react to properties on out of scope event',
+     testUiUpdate(Media.MediaModel.Events.PlayerPropertiesChanged, 'onProperty', false));
+  it('reacts to event on in scope event', testUiUpdate(Media.MediaModel.Events.PlayerEventsAdded, 'onEvent', true));
+  it('does not react to event on out of scope event',
+     testUiUpdate(Media.MediaModel.Events.PlayerEventsAdded, 'onEvent', false));
+  it('reacts to messages on in scope event',
+     testUiUpdate(Media.MediaModel.Events.PlayerMessagesLogged, 'onMessage', true));
+  it('does not react to messages on out of scope event',
+     testUiUpdate(Media.MediaModel.Events.PlayerMessagesLogged, 'onMessage', false));
+  it('reacts to error on in scope event', testUiUpdate(Media.MediaModel.Events.PlayerErrorsRaised, 'onError', true));
+  it('does not react to error on out of scope event',
+     testUiUpdate(Media.MediaModel.Events.PlayerErrorsRaised, 'onError', false));
+});