chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -4,6 +4,7 @@
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -105,7 +106,7 @@ export class TimespanView extends UI.Dialog.Dialog {
     dialogRoot.appendChild(fragment.element());
 
     this.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
-    this.setMaxContentSize(new UI.Geometry.Size(500, 400));
+    this.setMaxContentSize(new Geometry.Size(500, 400));
     this.reset();
   }
 

package/front_end/panels/lighthouse/lighthouse-meta.ts

@@ -9,7 +9,7 @@ import type * as Lighthouse from './lighthouse.js';
 
 const UIStrings = {
   /**
-   *@description Command for showing the 'Lighthouse' tool
+   * @description Command for showing the 'Lighthouse' tool
    */
   showLighthouse: 'Show `Lighthouse`',
 } as const;

package/front_end/panels/lighthouse/lighthousePanel.css

@@ -31,10 +31,19 @@ button.view-trace {
 
 .lighthouse-settings-pane {
   flex: none;
+  background-color: var(--sys-color-cdt-base-container);
+  border-bottom: 1px solid var(--sys-color-divider);
 }
 
 .lighthouse-settings-pane devtools-toolbar {
   flex: 1 1;
+  flex-wrap: wrap;
+}
+
+select.lighthouse-report {
+  min-width: 140px;
+  /* Up to 180px wide, but if window is very small ensure dropdown arrow is visible */
+  max-width: min(180px, calc(100% - 30px));
 }
 
 .lighthouse-toolbar-container {

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -14,11 +14,11 @@ import {Events as LmiEvents, LinearMemoryInspectorPane} from './LinearMemoryInsp
 
 const UIStrings = {
   /**
-   *@description Error message that shows up in the console if a buffer to be opened in the linear memory inspector cannot be found.
+   * @description Error message that shows up in the console if a buffer to be opened in the linear memory inspector cannot be found.
    */
   couldNotOpenLinearMemory: 'Could not open linear memory inspector: failed locating buffer.',
   /**
-   *@description A context menu item in the Scope View of the Sources Panel
+   * @description A context menu item in the Scope View of the Sources Panel
    */
   openInMemoryInspectorPanel: 'Open in Memory inspector panel',
 } as const;

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -14,17 +14,17 @@ import {type LazyUint8Array, LinearMemoryInspectorController} from './LinearMemo
 
 const UIStrings = {
   /**
-   *@description Label in the Linear Memory inspector tool that serves as a placeholder if no inspections are open (i.e. nothing to see here).
+   * @description Label in the Linear Memory inspector tool that serves as a placeholder if no inspections are open (i.e. nothing to see here).
    *             Inspection hereby refers to viewing, navigating and understanding the memory through this tool.
    */
   noOpenInspections: 'No open inspections',
   /**
-   *@description Label in the Linear Memory inspector tool that serves as a placeholder if no inspections are open (i.e. nothing to see here).
+   * @description Label in the Linear Memory inspector tool that serves as a placeholder if no inspections are open (i.e. nothing to see here).
    *             Inspection hereby refers to viewing, navigating and understanding the memory through this tool.
    */
   memoryInspectorExplanation: 'On this page you can inspect binary data.',
   /**
-   *@description Label in the Linear Memory inspector tool for a link.
+   * @description Label in the Linear Memory inspector tool for a link.
    */
   learnMore: 'Learn more',
 } as const;
@@ -40,8 +40,7 @@ export class LinearMemoryInspectorPane extends Common.ObjectWrapper.eventMixin<E
   readonly #tabbedPane: UI.TabbedPane.TabbedPane;
 
   constructor() {
-    super(false);
-    this.element.setAttribute('jslog', `${VisualLogging.panel('linear-memory-inspector').track({resize: true})}`);
+    super({jslog: `${VisualLogging.panel('linear-memory-inspector').track({resize: true})}`});
     this.#tabbedPane = new UI.TabbedPane.TabbedPane();
     this.#tabbedPane.setPlaceholderElement(this.createPlaceholder());
     this.#tabbedPane.setCloseableTabs(true);
@@ -131,7 +130,7 @@ export class LinearMemoryInspectorView extends UI.Widget.VBox {
 
   constructor(
       memoryWrapper: LazyUint8Array, address: number|undefined = 0, tabId: string, hideValueInspector?: boolean) {
-    super(false);
+    super();
 
     if (address < 0 || address >= memoryWrapper.length()) {
       throw new Error('Requested address is out of bounds.');

package/front_end/panels/linear_memory_inspector/components/LinearMemoryHighlightChipList.ts

@@ -14,14 +14,14 @@ import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 
 const UIStrings = {
   /**
-   *@description Tooltip text that appears when hovering over an inspected variable's button in the Linear Memory Highlight Chip List.
-  Clicking the button changes the displayed slice of computer memory in the Linear Memory inspector to contain the inspected variable's bytes.
+   * @description Tooltip text that appears when hovering over an inspected variable's button in the Linear Memory Highlight Chip List.
+   * Clicking the button changes the displayed slice of computer memory in the Linear Memory inspector to contain the inspected variable's bytes.
    */
   jumpToAddress: 'Jump to this memory',
   /**
-   *@description Tooltip text that appears when hovering over an inspected variable's delete button in the Linear Memory Highlight Chip List.
-   Clicking the delete button stops highlighting the variable's memory in the Linear Memory inspector.
-   'Memory' is a slice of bytes in the computer memory.
+   * @description Tooltip text that appears when hovering over an inspected variable's delete button in the Linear Memory Highlight Chip List.
+   * Clicking the delete button stops highlighting the variable's memory in the Linear Memory inspector.
+   * 'Memory' is a slice of bytes in the computer memory.
    */
   deleteHighlight: 'Stop highlighting this memory',
 } as const;
@@ -108,11 +108,7 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
           <button class="delete-highlight-button" title=${i18nString(UIStrings.deleteHighlight)}
               jslog=${VisualLogging.action('linear-memory-inspector.delete-highlight').track({click:true})}
               @click=${():void => this.#onDeleteHighlightClick(highlightInfo)}>
-            <devtools-icon .data=${{
-              iconName: 'cross',
-              color: 'var(--icon-default-hover)',
-              width: '16px',
-              }}>
+            <devtools-icon name="cross" class="medium">
             </devtools-icon>
           </button>
         </div>

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -35,9 +35,9 @@ import {
 
 const UIStrings = {
   /**
-   *@description Tooltip text that appears when hovering over an invalid address in the address line in the Linear memory inspector
-   *@example {0x00000000} PH1
-   *@example {0x00400000} PH2
+   * @description Tooltip text that appears when hovering over an invalid address in the address line in the Linear memory inspector
+   * @example {0x00000000} PH1
+   * @example {0x00400000} PH2
    */
   addressHasToBeANumberBetweenSAnd: 'Address has to be a number between {PH1} and {PH2}',
 } as const;

package/front_end/panels/linear_memory_inspector/components/LinearMemoryNavigator.ts

@@ -14,27 +14,27 @@ import linearMemoryNavigatorStyles from './linearMemoryNavigator.css.js';
 
 const UIStrings = {
   /**
-   *@description Tooltip text that appears when hovering over a valid memory address (e.g. 0x0) in the address line in the Linear memory inspector.
+   * @description Tooltip text that appears when hovering over a valid memory address (e.g. 0x0) in the address line in the Linear memory inspector.
    */
   enterAddress: 'Enter address',
   /**
-   *@description Tooltip text that appears when hovering over the button to go back in history in the Linear Memory Navigator
+   * @description Tooltip text that appears when hovering over the button to go back in history in the Linear Memory Navigator
    */
   goBackInAddressHistory: 'Go back in address history',
   /**
-   *@description Tooltip text that appears when hovering over the button to go forward in history in the Linear Memory Navigator
+   * @description Tooltip text that appears when hovering over the button to go forward in history in the Linear Memory Navigator
    */
   goForwardInAddressHistory: 'Go forward in address history',
   /**
-   *@description Tooltip text that appears when hovering over the page back icon in the Linear Memory Navigator
+   * @description Tooltip text that appears when hovering over the page back icon in the Linear Memory Navigator
    */
   previousPage: 'Previous page',
   /**
-   *@description Tooltip text that appears when hovering over the next page icon in the Linear Memory Navigator
+   * @description Tooltip text that appears when hovering over the next page icon in the Linear Memory Navigator
    */
   nextPage: 'Next page',
   /**
-   *@description Text to refresh the page
+   * @description Text to refresh the page
    */
   refresh: 'Refresh',
 } as const;

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -20,12 +20,12 @@ import type {TypeToggleEvent} from './ValueInterpreterSettings.js';
 
 const UIStrings = {
   /**
-   *@description Tooltip text that appears when hovering over the gear button to open and close settings in the Linear memory inspector. These settings
+   * @description Tooltip text that appears when hovering over the gear button to open and close settings in the Linear memory inspector. These settings
    *             allow the user to change the value type to view, such as 32-bit Integer, or 32-bit Float.
    */
   toggleValueTypeSettings: 'Toggle value type settings',
   /**
-   *@description Tooltip text that appears when hovering over the 'Little Endian' or 'Big Endian' setting in the Linear memory inspector.
+   * @description Tooltip text that appears when hovering over the 'Little Endian' or 'Big Endian' setting in the Linear memory inspector.
    */
   changeEndianness: 'Change `Endianness`',
 } as const;

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -26,24 +26,24 @@ import {
 
 const UIStrings = {
   /**
-   *@description Tooltip text that appears when hovering over an unsigned interpretation of the memory under the Value Interpreter
+   * @description Tooltip text that appears when hovering over an unsigned interpretation of the memory under the Value Interpreter
    */
   unsignedValue: '`Unsigned` value',
   /**
-   *@description Tooltip text that appears when hovering over the element to change value type modes of under the Value Interpreter. Value type modes
+   * @description Tooltip text that appears when hovering over the element to change value type modes of under the Value Interpreter. Value type modes
    *             are different ways of viewing a certain value, e.g.: 10 (decimal) can be 0xa in hexadecimal mode, or 12 in octal mode.
    */
   changeValueTypeMode: 'Change mode',
   /**
-   *@description Tooltip text that appears when hovering over a signed interpretation of the memory under the Value Interpreter
+   * @description Tooltip text that appears when hovering over a signed interpretation of the memory under the Value Interpreter
    */
   signedValue: '`Signed` value',
   /**
-   *@description Tooltip text that appears when hovering over a 'jump-to-address' button that is next to a pointer (32-bit or 64-bit) under the Value Interpreter
+   * @description Tooltip text that appears when hovering over a 'jump-to-address' button that is next to a pointer (32-bit or 64-bit) under the Value Interpreter
    */
   jumpToPointer: 'Jump to address',
   /**
-   *@description Tooltip text that appears when hovering over a 'jump-to-address' button that is next to a pointer (32-bit or 64-bit) with an invalid address under the Value Interpreter.
+   * @description Tooltip text that appears when hovering over a 'jump-to-address' button that is next to a pointer (32-bit or 64-bit) with an invalid address under the Value Interpreter.
    */
   addressOutOfRange: 'Address out of memory range',
 
@@ -154,8 +154,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
               <button class="jump-to-button" data-jump="true" title=${buttonTitle} ?disabled=${jumpDisabled}
                 jslog=${VisualLogging.action('linear-memory-inspector.jump-to-address').track({click: true})}
                 @click=${this.#onJumpToAddressClicked.bind(this, Number(address))}>
-                <devtools-icon .data=${
-                  {iconName: 'open-externally', color: iconColor, width: '16px'}}>
+                <devtools-icon name="open-externally" class="medium" style="color: ${iconColor}">
                 </devtools-icon>
               </button>`}
         </div>

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplayUtils.ts

@@ -7,7 +7,7 @@ import * as Platform from '../../../core/platform/platform.js';
 
 const UIStrings = {
   /**
-   *@description Text that is shown in the LinearMemoryInspector if a value could not be correctly formatted
+   * @description Text that is shown in the LinearMemoryInspector if a value could not be correctly formatted
    *             for the requested mode (e.g. we do not floats to be represented as hexadecimal numbers).
    *             Abbreviation stands for 'not applicable'.
    */

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterSettings.ts

@@ -17,7 +17,7 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Name of a group of selectable value types that do not fall under integer and floating point value types, e.g. Pointer32. The group appears name appears under the Value Interpreter Settings.
+   * @description Name of a group of selectable value types that do not fall under integer and floating point value types, e.g. Pointer32. The group appears name appears under the Value Interpreter Settings.
    */
   otherGroup: 'Other',
 } as const;

package/front_end/panels/linear_memory_inspector/linear_memory_inspector-meta.ts

@@ -12,11 +12,11 @@ import type * as LinearMemoryInspector from './linear_memory_inspector.js';
 
 const UIStrings = {
   /**
-   *@description Title of the Linear Memory inspector tool
+   * @description Title of the Linear Memory inspector tool
    */
   memoryInspector: 'Memory inspector',
   /**
-   *@description Command for showing the 'Memory inspector' tool
+   * @description Command for showing the 'Memory inspector' tool
    */
   showMemoryInspector: 'Show Memory inspector',
 } as const;

package/front_end/panels/media/EventDisplayTable.ts

@@ -14,19 +14,19 @@ import type {PlayerEvent} from './MediaModel.js';
 
 const UIStrings = {
   /**
-   *@description Text for timestamps of items
+   * @description Text for timestamps of items
    */
   timestamp: 'Timestamp',
   /**
-   *@description The column header for event names.
+   * @description The column header for event names.
    */
   eventName: 'Event name',
   /**
-   *@description Text for the value of something
+   * @description Text for the value of something
    */
   value: 'Value',
   /**
-   *@description The accessible name of a table that displays information about events that occurred
+   * @description The accessible name of a table that displays information about events that occurred
    * while a video/media player was present on the page.
    */
   eventDisplay: 'Event display',
@@ -76,11 +76,9 @@ export class PlayerEventsView extends UI.Widget.VBox {
   private firstEventTime: number;
 
   constructor() {
-    super();
+    super({jslog: `${VisualLogging.pane('events')}`});
     this.registerRequiredCSS(eventDisplayTableStyles);
 
-    this.element.setAttribute('jslog', `${VisualLogging.pane('events')}`);
-
     // Set up element styles.
 
     this.contentElement.classList.add('event-display-table-contents-table-container');

package/front_end/panels/media/EventTimelineView.ts

@@ -20,11 +20,11 @@ const NO_NORMALIZED_TIMESTAMP = -1.5;
 
 const UIStrings = {
   /**
-   *@description Title of the 'Playback Status' button
+   * @description Title of the 'Playback Status' button
    */
   playbackStatus: 'Playback Status',
   /**
-   *@description Title of the 'Buffering Status' button
+   * @description Title of the 'Buffering Status' button
    */
   bufferingStatus: 'Buffering Status',
 } as const;
@@ -63,7 +63,7 @@ export class PlayerEventsTimeline extends TickingFlameChart {
 
   /**
    * Playback events are {kPlay, kPause, kSuspended, kEnded, and kWebMediaPlayerDestroyed}
-   * once destroyed, a player cannot recieve more events of any kind.
+   * once destroyed, a player cannot receive more events of any kind.
    */
   private onPlaybackEvent(event: PlayerEvent, normalizedTime: number): void {
     switch (event.event) {
@@ -83,7 +83,7 @@ export class PlayerEventsTimeline extends TickingFlameChart {
 
       case 'kPause':
         // Don't change ticking state - the player is still active even during
-        // video pause. It may recieve buffering events, seeks, etc.
+        // video pause. It may receive buffering events, seeks, etc.
         this.ensureNoPreviousPlaybackEvent(normalizedTime);
 
         // Disabled until Closure is gone.

package/front_end/panels/media/MainView.ts

@@ -16,22 +16,22 @@ import {PlayerListView} from './PlayerListView.js';
 
 const UIStrings = {
   /**
-   *@description Text to show if no media player has been selected
+   * @description Text to show if no media player has been selected
    * A media player can be an audio and video source of a page.
    */
   noPlayerDetailsSelected: 'No media player selected',
   /**
-   *@description Text to instruct the user on how to view media player details
+   * @description Text to instruct the user on how to view media player details
    * A media player can be an audio and video source of a page.
    */
   selectToViewDetails: 'Select a media player to inspect its details.',
   /**
-   *@description Text to show if no player can be shown
+   * @description Text to show if no player can be shown
    * A media player can be an audio and video source of a page.
    */
   noMediaPlayer: 'No media player',
   /**
-   *@description Text to explain this panel
+   * @description Text to explain this panel
    * A media player can be an audio and video source of a page.
    */
   mediaPlayerDescription: 'On this page you can view and export media player details.',
@@ -165,12 +165,20 @@ export class MainView extends UI.Panel.PanelWithSidebar implements SDK.TargetMan
   private deletedPlayers: Set<string>;
   private readonly downloadStore: PlayerDataDownloadManager;
   private readonly sidebar: PlayerListView;
-
+  #playerIdsToPlayers: Map<string, Protocol.Media.Player>;
+  #domNodeIdsToPlayerIds: Map<Protocol.DOM.BackendNodeId, string>;
   #placeholder: UI.EmptyWidget.EmptyWidget;
+  readonly #initialPlayersLoadedPromise: Promise<void>;
+  #initialPlayersLoadedPromiseResolve: () => void = () => {};
 
   constructor(downloadStore: PlayerDataDownloadManager = new PlayerDataDownloadManager()) {
     super('media');
     this.detailPanels = new Map();
+    this.#playerIdsToPlayers = new Map();
+    this.#domNodeIdsToPlayerIds = new Map();
+    this.#initialPlayersLoadedPromise = new Promise(resolve => {
+      this.#initialPlayersLoadedPromiseResolve = resolve;
+    });
 
     this.deletedPlayers = new Set();
 
@@ -228,7 +236,7 @@ export class MainView extends UI.Panel.PanelWithSidebar implements SDK.TargetMan
     mediaModel.addEventListener(Events.PLAYER_EVENTS_ADDED, this.eventsAdded, this);
     mediaModel.addEventListener(Events.PLAYER_MESSAGES_LOGGED, this.messagesLogged, this);
     mediaModel.addEventListener(Events.PLAYER_ERRORS_RAISED, this.errorsRaised, this);
-    mediaModel.addEventListener(Events.PLAYERS_CREATED, this.playersCreated, this);
+    mediaModel.addEventListener(Events.PLAYER_CREATED, this.playerCreated, this);
   }
 
   private removeEventListeners(mediaModel: MediaModel): void {
@@ -236,18 +244,7 @@ export class MainView extends UI.Panel.PanelWithSidebar implements SDK.TargetMan
     mediaModel.removeEventListener(Events.PLAYER_EVENTS_ADDED, this.eventsAdded, this);
     mediaModel.removeEventListener(Events.PLAYER_MESSAGES_LOGGED, this.messagesLogged, this);
     mediaModel.removeEventListener(Events.PLAYER_ERRORS_RAISED, this.errorsRaised, this);
-    mediaModel.removeEventListener(Events.PLAYERS_CREATED, this.playersCreated, this);
-  }
-
-  private onPlayerCreated(playerID: string): void {
-    this.sidebar.addMediaElementItem(playerID);
-    this.detailPanels.set(playerID, new PlayerDetailView());
-    this.downloadStore.addPlayer(playerID);
-
-    if (this.detailPanels.size === 1) {
-      this.#placeholder.header = i18nString(UIStrings.noPlayerDetailsSelected);
-      this.#placeholder.text = i18nString(UIStrings.selectToViewDetails);
-    }
+    mediaModel.removeEventListener(Events.PLAYER_CREATED, this.playerCreated, this);
   }
 
   private propertiesChanged(event: Common.EventTarget.EventTargetEvent<Protocol.Media.PlayerPropertiesChangedEvent>):
@@ -318,19 +315,52 @@ export class MainView extends UI.Panel.PanelWithSidebar implements SDK.TargetMan
     this.detailPanels.get(playerID)?.onEvent(event);
   }
 
-  private playersCreated(event: Common.EventTarget.EventTargetEvent<Protocol.Media.PlayerId[]>): void {
-    if (event.data.length > 0 && this.splitWidget().showMode() !== UI.SplitWidget.ShowMode.BOTH) {
+  selectPlayerByDOMNodeId(domNodeId: Protocol.DOM.BackendNodeId): void {
+    const playerId = this.#domNodeIdsToPlayerIds.get(domNodeId);
+    if (!playerId) {
+      return;
+    }
+    const player = this.#playerIdsToPlayers.get(playerId);
+    if (player) {
+      this.sidebar.selectPlayerById(player.playerId);
+    }
+  }
+
+  waitForInitialPlayers(): Promise<void> {
+    return this.#initialPlayersLoadedPromise;
+  }
+
+  private playerCreated(event: Common.EventTarget.EventTargetEvent<Protocol.Media.Player>): void {
+    const player = event.data;
+    this.#playerIdsToPlayers.set(player.playerId, player);
+    if (player.domNodeId) {
+      this.#domNodeIdsToPlayerIds.set(player.domNodeId, player.playerId);
+    }
+
+    if (this.splitWidget().showMode() !== UI.SplitWidget.ShowMode.BOTH) {
       this.splitWidget().showBoth();
     }
-    for (const playerID of event.data) {
-      this.onPlayerCreated(playerID);
+    this.sidebar.addMediaElementItem(player.playerId);
+    this.detailPanels.set(player.playerId, new PlayerDetailView());
+    this.downloadStore.addPlayer(player.playerId);
+
+    if (this.detailPanels.size === 1) {
+      this.#placeholder.header = i18nString(UIStrings.noPlayerDetailsSelected);
+      this.#placeholder.text = i18nString(UIStrings.selectToViewDetails);
     }
+
+    this.#initialPlayersLoadedPromiseResolve();
   }
 
   markPlayerForDeletion(playerID: string): void {
     // TODO(tmathmeyer): send this to chromium to save the storage space there too.
     this.deletedPlayers.add(playerID);
     this.detailPanels.delete(playerID);
+    const player = this.#playerIdsToPlayers.get(playerID);
+    if (player?.domNodeId) {
+      this.#domNodeIdsToPlayerIds.delete(player.domNodeId);
+    }
+    this.#playerIdsToPlayers.delete(playerID);
     this.sidebar.deletePlayer(playerID);
     this.downloadStore.deletePlayer(playerID);
     if (this.detailPanels.size === 0) {

package/front_end/panels/media/MediaModel.ts

@@ -17,7 +17,7 @@ export const enum Events {
   PLAYER_EVENTS_ADDED = 'PlayerEventsAdded',
   PLAYER_MESSAGES_LOGGED = 'PlayerMessagesLogged',
   PLAYER_ERRORS_RAISED = 'PlayerErrorsRaised',
-  PLAYERS_CREATED = 'PlayersCreated',
+  PLAYER_CREATED = 'PlayerCreated',
 }
 
 export interface EventTypes {
@@ -25,7 +25,7 @@ export interface EventTypes {
   [Events.PLAYER_EVENTS_ADDED]: Protocol.Media.PlayerEventsAddedEvent;
   [Events.PLAYER_MESSAGES_LOGGED]: Protocol.Media.PlayerMessagesLoggedEvent;
   [Events.PLAYER_ERRORS_RAISED]: Protocol.Media.PlayerErrorsRaisedEvent;
-  [Events.PLAYERS_CREATED]: Protocol.Media.PlayerId[];
+  [Events.PLAYER_CREATED]: Protocol.Media.Player;
 }
 
 export class MediaModel extends SDK.SDKModel.SDKModel<EventTypes> implements ProtocolProxyApi.MediaDispatcher {
@@ -69,8 +69,8 @@ export class MediaModel extends SDK.SDKModel.SDKModel<EventTypes> implements Pro
     this.dispatchEventToListeners(Events.PLAYER_ERRORS_RAISED, event);
   }
 
-  playersCreated({players}: Protocol.Media.PlayersCreatedEvent): void {
-    this.dispatchEventToListeners(Events.PLAYERS_CREATED, players);
+  playerCreated({player}: Protocol.Media.PlayerCreatedEvent): void {
+    this.dispatchEventToListeners(Events.PLAYER_CREATED, player);
   }
 }
 SDK.SDKModel.SDKModel.register(MediaModel, {capabilities: SDK.Target.Capability.MEDIA, autostart: false});

package/front_end/panels/media/PlayerDetailView.ts

@@ -15,35 +15,35 @@ import {PlayerPropertiesView} from './PlayerPropertiesView.js';
 
 const UIStrings = {
   /**
-   *@description Title of the 'Properties' tool in the sidebar of the elements tool
+   * @description Title of the 'Properties' tool in the sidebar of the elements tool
    */
   properties: 'Properties',
   /**
-   *@description Button text for viewing properties.
+   * @description Button text for viewing properties.
    */
   playerProperties: 'Player properties',
   /**
-   *@description Button text for viewing events.
+   * @description Button text for viewing events.
    */
   events: 'Events',
   /**
-   *@description Hover text for the Events button.
+   * @description Hover text for the Events button.
    */
   playerEvents: 'Player events',
   /**
-   *@description Text in Network Item View of the Network panel
+   * @description Text in Network Item View of the Network panel
    */
   messages: 'Messages',
   /**
-   *@description Column header for messages view.
+   * @description Column header for messages view.
    */
   playerMessages: 'Player messages',
   /**
-   *@description Title for the timeline tab.
+   * @description Title for the timeline tab.
    */
   timeline: 'Timeline',
   /**
-   *@description Hovertext for Timeline tab.
+   * @description Hovertext for Timeline tab.
    */
   playerTimeline: 'Player timeline',
 } as const;

package/front_end/panels/media/PlayerListView.ts

@@ -16,19 +16,19 @@ import {PlayerPropertyKeys} from './PlayerPropertiesView.js';
 
 const UIStrings = {
   /**
-   *@description A right-click context menu entry which when clicked causes the menu entry for that player to be removed.
+   * @description A right-click context menu entry which when clicked causes the menu entry for that player to be removed.
    */
   hidePlayer: 'Hide player',
   /**
-   *@description A right-click context menu entry which should keep the element selected, while hiding all other entries.
+   * @description A right-click context menu entry which should keep the element selected, while hiding all other entries.
    */
   hideAllOthers: 'Hide all others',
   /**
-   *@description Context menu entry which downloads the json dump when clicked
+   * @description Context menu entry which downloads the json dump when clicked
    */
   savePlayerInfo: 'Save player info',
   /**
-   *@description Side-panel entry title text for the players section.
+   * @description Side-panel entry title text for the players section.
    */
   players: 'Players',
 } as const;
@@ -53,7 +53,7 @@ export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher
   private currentlySelectedEntry: Element|null;
 
   constructor(mainContainer: MainView) {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(playerListViewStyles);
 
     this.playerEntryFragments = new Map();
@@ -85,6 +85,13 @@ export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher
     return entry;
   }
 
+  selectPlayerById(playerID: string): void {
+    const fragment = this.playerEntryFragments.get(playerID);
+    if (fragment) {
+      this.selectPlayer(playerID, fragment.element());
+    }
+  }
+
   private selectPlayer(playerID: string, element: Element): void {
     this.mainContainer.renderMainPanel(playerID);
     if (this.currentlySelectedEntry !== null) {
@@ -113,7 +120,7 @@ export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher
   }
 
   private setMediaElementFrameTitle(playerID: string, frameTitle: string, isHostname: boolean): void {
-    // Only remove the title from the set if we arent setting a hostname title.
+    // Only remove the title from the set if we aren't setting a hostname title.
     // Otherwise, if it has a non-hostname title, and the requested new title is
     // a hostname, just drop it.
     if (this.playerEntriesWithHostnameFrameTitle.has(playerID)) {
@@ -167,7 +174,7 @@ export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher
       return;
     }
     if (candidate.length >= max) {
-      candidate = candidate.substring(0, max - 3) + '...';
+      candidate = candidate.substring(0, max - 1) + '…';
     }
     func.bind(this)(playerID, candidate);
   }
@@ -239,7 +246,7 @@ export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher
     // since the site is free to set the title to _anything_, it might just be
     // junk, or it might be super long. If it's empty, or 1 character, It's
     // preferable to just drop it. Titles longer than 20 will have the first
-    // 17 characters kept and an elipsis appended.
+    // 17 characters kept and an ellipsis appended.
     if (property.name === PlayerPropertyKeys.FRAME_TITLE && property.value) {
       this.formatAndEvaluate(playerID, this.setMediaElementFrameTitle, property.value, 1, 20);
       return;