Hide media player sidebar if no players are registered

Before: https://i.imgur.com/Jd8Io9y.png
After: https://i.imgur.com/jlkNhkw.png
Bug: 400383914
Change-Id: I770ee01489ecce9fb24e8f83e36db89ea45ad02c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6387322
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/media/MainView.test.ts

@@ -107,4 +107,24 @@ describeWithMockConnection('MediaMainView', () => {
     mainView.detach();
   });
 
+  it('shows a placeholder if all players are hidden after already selecting a player and showing its details', () => {
+    const model = target.model(Media.MediaModel.MediaModel);
+    assert.exists(model);
+
+    // Show main view, which will register event listeners on the model.
+    const mainView = new Media.MainView.MainView();
+    mainView.markAsRoot();
+    mainView.show(document.body);
+
+    model.dispatchEventToListeners(Media.MediaModel.Events.PLAYERS_CREATED, [PLAYER_ID]);
+    mainView.renderMainPanel(PLAYER_ID);
+    assert.isNull(mainView.contentElement.querySelector('.empty-state'));
+    mainView.markPlayerForDeletion(PLAYER_ID);
+
+    assert.deepEqual(mainView.contentElement.querySelector('.empty-state-header')?.textContent, 'No media player');
+    assert.deepEqual(
+        mainView.contentElement.querySelector('.empty-state-description span')?.textContent,
+        'On this page you can view and export media player details.');
+    mainView.detach();
+  });
 });

front_end/panels/media/MainView.ts

@@ -177,6 +177,7 @@ export class MainView extends UI.Panel.PanelWithSidebar implements SDK.TargetMan
 
     this.sidebar = new PlayerListView(this);
     this.sidebar.show(this.panelSidebarElement());
+    this.splitWidget().hideSidebar();
 
     this.#placeholder =
         new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noMediaPlayer), UIStrings.mediaPlayerDescription);
@@ -317,6 +318,9 @@ export class MainView extends UI.Panel.PanelWithSidebar implements SDK.TargetMan
   }
 
   private playersCreated(event: Common.EventTarget.EventTargetEvent<Protocol.Media.PlayerId[]>): void {
+    if (event.data.length > 0 && this.splitWidget().showMode() !== UI.SplitWidget.ShowMode.BOTH) {
+      this.splitWidget().showBoth();
+    }
     for (const playerID of event.data) {
       this.onPlayerCreated(playerID);
     }
@@ -331,6 +335,12 @@ export class MainView extends UI.Panel.PanelWithSidebar implements SDK.TargetMan
     if (this.detailPanels.size === 0) {
       this.#placeholder.header = i18nString(UIStrings.noMediaPlayer);
       this.#placeholder.text = i18nString(UIStrings.mediaPlayerDescription);
+      this.splitWidget().hideSidebar();
+      const mainWidget = this.splitWidget().mainWidget();
+      if (mainWidget) {
+        mainWidget.detachChildWidgets();
+      }
+      this.#placeholder.show(this.mainElement());
     }
   }