chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -51,7 +51,7 @@ import {
   StylesSidebarPane,
 } from './StylesSidebarPane.js';
 
-const {html, nothing, render, Directives: {classMap}} = Lit;
+const {html, nothing, render, Directives: {classMap, ifDefined}} = Lit;
 const ASTUtils = SDK.CSSPropertyParser.ASTUtils;
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;
@@ -381,6 +381,104 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
   }
 }
 
+// clang-format off
+export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.AttributeMatch) {
+  // clang-format on
+  readonly #stylesPane: StylesSidebarPane;
+  readonly #treeElement: StylePropertyTreeElement|null;
+  readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
+  readonly #computedStyles: Map<string, string>;
+  constructor(
+      stylesPane: StylesSidebarPane, treeElement: StylePropertyTreeElement|null,
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>) {
+    super();
+    this.#treeElement = treeElement;
+    this.#stylesPane = stylesPane;
+    this.#matchedStyles = matchedStyles;
+    this.#computedStyles = computedStyles;
+  }
+
+  override render(match: SDK.CSSPropertyParserMatchers.AttributeMatch, context: RenderingContext): Node[] {
+    if (this.#treeElement?.property.ownerStyle.parentRule instanceof SDK.CSSRule.CSSFunctionRule) {
+      return Renderer.render(ASTUtils.children(match.node), context).nodes;
+    }
+
+    const rawValue = match.rawAttributeValue();
+    const attributeValue = match.resolveAttributeValue();
+    const fromFallback = attributeValue === null;
+    const attributeMissing = rawValue === null;
+    const typeError = fromFallback && !attributeMissing;
+    const attributeClass = attributeMissing ? 'inactive' : '';
+    const typeClass = typeError ? 'inactive' : '';
+    const fallbackClass = fromFallback ? '' : 'inactive';
+    const computedValue = attributeValue ?? match.fallbackValue();
+    const varSwatch = document.createElement('span');
+
+    const substitution = context.tracing?.substitution({match, context});
+    if (substitution) {
+      // TODO(b/441945435): If we combine these conditions, we can, when no fallback is
+      // specified but the type check fails, render a series of substitutions
+      // which may help debug why the type check failed. However, we can't
+      // distinguish ordinary type mismatch from cycles, and we need a way
+      // to handle cycles. And we may want UI for showing the substitutions
+      // anyway, even when a fallback is specified.
+      if (fromFallback) {
+        if (match.fallback) {
+          return Renderer.render(match.fallback, substitution.renderingContext(context)).nodes;
+        }
+      } else if (match.substitutionText !== null) {
+        const matching = SDK.CSSPropertyParser.matchDeclaration(
+            '--property', match.substitutionText,
+            this.#matchedStyles.propertyMatchers(match.style, this.#computedStyles));
+        return Renderer
+            .renderValueNodes(
+                {name: '--property', value: match.substitutionText}, matching,
+                getPropertyRenderers(
+                    '--property', match.style, this.#stylesPane, this.#matchedStyles, null, this.#computedStyles),
+                substitution)
+            .nodes;
+      }
+    }
+
+    const renderedFallback = match.fallback ? Renderer.render(match.fallback, context) : undefined;
+
+    const attrCall =
+        this.#treeElement?.getTracingTooltip('attr', match.node, this.#matchedStyles, this.#computedStyles, context);
+    const tooltipId = attributeMissing ? undefined : this.#treeElement?.getTooltipId('custom-attribute');
+    // clang-format off
+    render(html`
+        <span data-title=${computedValue || ''}
+              jslog=${VisualLogging.link('css-variable').track({click: true, hover: true})}
+        >${attrCall ?? 'attr'}(<span class=${attributeClass} aria-details=${ifDefined(tooltipId)}>${match.name}</span>${
+            match.type ? html` <span class=${typeClass}>${match.type}</span>` : nothing
+        }${renderedFallback ? html`, <span class=${fallbackClass}>${renderedFallback.nodes}</span>` : nothing
+        })</span>${tooltipId ? html`
+          <devtools-tooltip
+            id=${tooltipId}
+            variant=rich
+            jslogContext=elements.css-var
+          >${JSON.stringify(rawValue)}</devtools-tooltip>` : ''}`, varSwatch);
+    // clang-format on
+
+    const color = computedValue && Common.Color.parse(computedValue);
+    if (!color) {
+      return [varSwatch];
+    }
+
+    const colorSwatch = new ColorRenderer(this.#stylesPane, this.#treeElement).renderColorSwatch(color, varSwatch);
+    context.addControl('color', colorSwatch);
+
+    if (fromFallback) {
+      renderedFallback?.cssControls.get('color')?.forEach(
+          innerSwatch => innerSwatch.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName, ev => {
+            colorSwatch.setColor(ev.data.color);
+          }));
+    }
+
+    return [colorSwatch, varSwatch];
+  }
+}
+
 // clang-format off
 export class LinearGradientRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.LinearGradientMatch) {
   // clang-format on
@@ -636,7 +734,7 @@ export class LightDarkColorRenderer extends rendererBase(SDK.CSSPropertyParserMa
     const {cssControls: lightControls} = Renderer.renderInto(match.light, context, light);
     const {cssControls: darkControls} = Renderer.renderInto(match.dark, context, dark);
 
-    if (context.matchedResult.hasUnresolvedVars(match.node)) {
+    if (context.matchedResult.hasUnresolvedSubstitutions(match.node)) {
       return [content];
     }
 
@@ -770,7 +868,7 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     const color1Controls = color1.cssControls.get('color') ?? [];
     const color2Controls = color2.cssControls.get('color') ?? [];
 
-    if (context.matchedResult.hasUnresolvedVars(match.node) || color1Controls.length !== 1 ||
+    if (context.matchedResult.hasUnresolvedSubstitutions(match.node) || color1Controls.length !== 1 ||
         color2Controls.length !== 1) {
       return [contentChild];
     }
@@ -1295,7 +1393,7 @@ export class ShadowRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.S
         }
         const matches = SDK.CSSPropertyParser.BottomUpTreeMatching.walkExcludingSuccessors(
             computedValueAst, [new SDK.CSSPropertyParserMatchers.ColorMatcher()]);
-        if (matches.hasUnresolvedVars(matches.ast.tree)) {
+        if (matches.hasUnresolvedSubstitutions(matches.ast.tree)) {
           return null;
         }
         queue.unshift(
@@ -1775,6 +1873,7 @@ export function getPropertyRenderers(
     new AutoBaseRenderer(computedStyles),
     new BinOpRenderer(),
     new RelativeColorChannelRenderer(treeElement),
+    new AttributeRenderer(stylesPane, treeElement, matchedStyles, computedStyles),
   ];
 }
 
@@ -2139,16 +2238,19 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  // Resolves a CSS expression to its computed value with `var()` calls updated.
-  // Still returns the string even when a `var()` call is not resolved.
+  // Resolves a CSS expression to its computed value with `var()` and `attr()` calls updated.
+  // Still returns the string even when a `var()` or `attr()` call is not resolved.
   #computeCSSExpression(style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, text: string): string|null {
     const ast = SDK.CSSPropertyParser.tokenizeDeclaration('--unused', text);
     if (!ast) {
       return null;
     }
 
-    const matching: SDK.CSSPropertyParser.BottomUpTreeMatching = SDK.CSSPropertyParser.BottomUpTreeMatching.walk(
-        ast, [new SDK.CSSPropertyParserMatchers.VariableMatcher(this.matchedStylesInternal, style)]);
+    const matching: SDK.CSSPropertyParser.BottomUpTreeMatching = SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [
+      new SDK.CSSPropertyParserMatchers.VariableMatcher(this.matchedStylesInternal, style),
+      new SDK.CSSPropertyParserMatchers.AttributeMatcher(this.matchedStylesInternal, style),
+      new SDK.CSSPropertyParserMatchers.EnvFunctionMatcher(this.matchedStylesInternal),
+    ]);
 
     const decl = SDK.CSSPropertyParser.ASTUtils.siblings(SDK.CSSPropertyParser.ASTUtils.declValue(matching.ast.tree));
     return decl.length > 0 ? matching.getComputedTextRange(decl[0], decl[decl.length - 1]) : '';
@@ -2456,7 +2558,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
           propertyName, this.computedStyles || undefined, this.parentsComputedStyles || undefined,
           localName?.toLowerCase(), fontFaces);
       if (hint) {
-        Host.userMetrics.cssHintShown(validator.getMetricType());
         const wrapper = document.createElement('span');
         wrapper.classList.add('hint-wrapper');
         const hintIcon = new IconButton.Icon.Icon();

package/front_end/panels/emulation/DeviceModeView.ts

@@ -9,6 +9,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -84,7 +85,7 @@ export class DeviceModeView extends UI.Widget.VBox {
     x: number,
     y: number,
   }|null;
-  private resizeStart?: UI.Geometry.Size;
+  private resizeStart?: Geometry.Size;
   private cachedCssScreenRect?: EmulationModel.DeviceModeModel.Rect;
   private cachedCssVisiblePageRect?: EmulationModel.DeviceModeModel.Rect;
   private cachedOutlineRect?: EmulationModel.DeviceModeModel.Rect;
@@ -214,7 +215,7 @@ export class DeviceModeView extends UI.Widget.VBox {
   private onResizeStart(): void {
     this.slowPositionStart = null;
     const rect = this.model.screenRect();
-    this.resizeStart = new UI.Geometry.Size(rect.width, rect.height);
+    this.resizeStart = new Geometry.Size(rect.width, rect.height);
   }
 
   private onResizeUpdate(widthFactor: number, heightFactor: number, event: {
@@ -400,7 +401,7 @@ export class DeviceModeView extends UI.Widget.VBox {
     const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
     const rect = element.getBoundingClientRect();
     const availableSize =
-        new UI.Geometry.Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1));
+        new Geometry.Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1));
     this.model.setAvailableSize(availableSize, availableSize);
   }
 
@@ -408,8 +409,8 @@ export class DeviceModeView extends UI.Widget.VBox {
     const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
     const rect = this.contentArea.getBoundingClientRect();
     const availableSize =
-        new UI.Geometry.Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1));
-    const preferredSize = new UI.Geometry.Size(
+        new Geometry.Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1));
+    const preferredSize = new Geometry.Size(
         Math.max((rect.width - 2 * (this.handleWidth || 0)) * zoomFactor, 1),
         Math.max((rect.height - (this.handleHeight || 0)) * zoomFactor, 1));
     this.model.setAvailableSize(availableSize, preferredSize);

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -35,6 +35,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -364,7 +365,7 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
 
     let bounds;
     for (let i = 0; i < this.rects.length; ++i) {
-      bounds = UI.Geometry.boundsForTransformedPoints(scaleAndRotationMatrix, this.rects[i].vertices, bounds);
+      bounds = Geometry.boundsForTransformedPoints(scaleAndRotationMatrix, this.rects[i].vertices, bounds);
     }
 
     if (bounds) {
@@ -1222,12 +1223,12 @@ export class Rectangle {
     // Vertices of the quad with transform matrix applied
     const points = [];
     for (i = 0; i < 4; ++i) {
-      points[i] = UI.Geometry.multiplyVectorByMatrixAndNormalize(
-          new UI.Geometry.Vector(this.vertices[i * 3], this.vertices[i * 3 + 1], this.vertices[i * 3 + 2]), matrix);
+      points[i] = Geometry.multiplyVectorByMatrixAndNormalize(
+          new Geometry.Vector(this.vertices[i * 3], this.vertices[i * 3 + 1], this.vertices[i * 3 + 2]), matrix);
     }
     // Calculating quad plane normal
-    const normal = UI.Geometry.crossProduct(
-        UI.Geometry.subtract(points[1], points[0]), UI.Geometry.subtract(points[2], points[1]));
+    const normal =
+        Geometry.crossProduct(Geometry.subtract(points[1], points[0]), Geometry.subtract(points[2], points[1]));
     // General form of the equation of the quad plane: A * x + B * y + C * z + D = 0
     const A = normal.x;
     const B = normal.y;
@@ -1236,14 +1237,13 @@ export class Rectangle {
     // Finding t from the equation
     const t = -(D + A * x0 + B * y0) / C;
     // Point of the intersection
-    const pt = new UI.Geometry.Vector(x0, y0, t);
+    const pt = new Geometry.Vector(x0, y0, t);
     // Vectors from the intersection point to vertices of the quad
-    const tVects = points.map(UI.Geometry.subtract.bind(null, pt));
+    const tVects = points.map(Geometry.subtract.bind(null, pt));
     // Intersection point lies inside of the polygon if scalar products of normal of the plane and
     // cross products of successive tVects are all nonstrictly above or all nonstrictly below zero
     for (i = 0; i < tVects.length; ++i) {
-      const product =
-          UI.Geometry.scalarProduct(normal, UI.Geometry.crossProduct(tVects[i], tVects[(i + 1) % tVects.length]));
+      const product = Geometry.scalarProduct(normal, Geometry.crossProduct(tVects[i], tVects[(i + 1) % tVects.length]));
       if (product < 0) {
         return undefined;
       }

package/front_end/panels/layers/LayerTreeModel.ts

@@ -32,7 +32,7 @@ import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as UI from '../../ui/legacy/legacy.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 
 export class LayerTreeModel extends SDK.SDKModel.SDKModel<EventTypes> {
   readonly layerTreeAgent: ProtocolProxyApi.LayerTreeApi;
@@ -405,10 +405,10 @@ export class AgentLayer implements SDK.LayerTreeBase.Layer {
 
     if (this.layerPayload.transform) {
       const transformMatrix = this.matrixFromArray(this.layerPayload.transform);
-      const anchorVector = new UI.Geometry.Vector(
+      const anchorVector = new Geometry.Vector(
           this.layerPayload.width * this.anchorPoint()[0], this.layerPayload.height * this.anchorPoint()[1],
           this.anchorPoint()[2]);
-      const anchorPoint = UI.Geometry.multiplyVectorByMatrixAndNormalize(anchorVector, matrix);
+      const anchorPoint = Geometry.multiplyVectorByMatrixAndNormalize(anchorVector, matrix);
       const anchorMatrix = new WebKitCSSMatrix().translate(-anchorPoint.x, -anchorPoint.y, -anchorPoint.z);
       matrix = anchorMatrix.inverse().multiply(transformMatrix.multiply(anchorMatrix.multiply(matrix)));
     }
@@ -426,8 +426,8 @@ export class AgentLayer implements SDK.LayerTreeBase.Layer {
     this.quadInternal = [];
     const vertices = this.createVertexArrayForRect(this.layerPayload.width, this.layerPayload.height);
     for (let i = 0; i < 4; ++i) {
-      const point = UI.Geometry.multiplyVectorByMatrixAndNormalize(
-          new UI.Geometry.Vector(vertices[i * 3], vertices[i * 3 + 1], vertices[i * 3 + 2]), matrix);
+      const point = Geometry.multiplyVectorByMatrixAndNormalize(
+          new Geometry.Vector(vertices[i * 3], vertices[i * 3 + 1], vertices[i * 3 + 2]), matrix);
       this.quadInternal.push(point.x, point.y);
     }
 

package/front_end/panels/lighthouse/LighthouseStatusView.ts

@@ -5,6 +5,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import type * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -217,7 +218,7 @@ export class StatusView {
 
     this.dialog.setDefaultFocusedElement(cancelButton);
     this.dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
-    this.dialog.setMaxContentSize(new UI.Geometry.Size(500, 400));
+    this.dialog.setMaxContentSize(new Geometry.Size(500, 400));
   }
 
   private reset(): void {

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/media/MainView.ts

@@ -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);
   }
 
-  playerCreated({player: {playerId}}: Protocol.Media.PlayerCreatedEvent): void {
-    this.dispatchEventToListeners(Events.PLAYERS_CREATED, [playerId]);
+  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/PlayerListView.ts

@@ -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) {

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -82,11 +82,11 @@ const UIStrings = {
   /**
    * @description Text to indicate Save-Data override is set to Enabled.
    */
-  saveDataOn: '\'Save-Data\': force on',
+  saveDataOn: '\'Save-Data\': on',
   /**
    * @description Text to indicate Save-Data override is set to Disabled.
    */
-  saveDataOff: '\'Save-Data\': force off',
+  saveDataOff: '\'Save-Data\': off',
   /**
    * @description Tooltip text for an select element that overrides navigator.connection.saveData on the page
    */

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -45,6 +45,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as HAR from '../../models/har/har.js';
 import * as Logs from '../../models/logs/logs.js';
+import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
@@ -55,8 +56,6 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {render} from '../../ui/lit/lit.js';
 import {PanelUtils} from '../utils/utils.js';
 
-import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
-
 const UIStrings = {
   /**
    * @description Text in Network Data Grid Node of the Network panel
@@ -380,9 +379,9 @@ export interface NetworkLogViewInterface extends Common.EventTarget.EventTarget<
   addFilmStripFrames(times: number[]): void;
   selectFilmStripFrame(time: number): void;
   clearFilmStripFrame(): void;
-  timeCalculator(): NetworkTimeCalculator;
-  calculator(): NetworkTimeCalculator;
-  setCalculator(x: NetworkTimeCalculator): void;
+  timeCalculator(): NetworkTimeCalculator.NetworkTimeCalculator;
+  calculator(): NetworkTimeCalculator.NetworkTimeCalculator;
+  setCalculator(x: NetworkTimeCalculator.NetworkTimeCalculator): void;
   flatNodesList(): NetworkNode[];
   updateNodeBackground(): void;
   updateNodeSelectedClass(isSelected: boolean): void;

package/front_end/panels/network/NetworkItemView.ts

@@ -34,6 +34,7 @@ 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 SDK from '../../core/sdk/sdk.js';
+import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
@@ -43,7 +44,6 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as NetworkComponents from './components/components.js';
 import {EventSourceMessagesView} from './EventSourceMessagesView.js';
-import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import {RequestCookiesView} from './RequestCookiesView.js';
 import {RequestInitiatorView} from './RequestInitiatorView.js';
 import {RequestPayloadView} from './RequestPayloadView.js';
@@ -168,7 +168,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   readonly #firstTab: NetworkForward.UIRequestLocation.UIRequestTabs;
 
   constructor(
-      request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator,
+      request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator.NetworkTimeCalculator,
       initialTab?: NetworkForward.UIRequestLocation.UIRequestTabs) {
     super();
     this.#request = request;

package/front_end/panels/network/NetworkLogView.ts

@@ -45,6 +45,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as HAR from '../../models/har/har.js';
 import * as Logs from '../../models/logs/logs.js';
+import * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
@@ -70,12 +71,6 @@ import {
 import {NetworkFrameGrouper} from './NetworkFrameGrouper.js';
 import networkLogViewStyles from './networkLogView.css.js';
 import {NetworkLogViewColumns} from './NetworkLogViewColumns.js';
-import {
-  NetworkTimeBoundary,
-  type NetworkTimeCalculator,
-  NetworkTransferDurationCalculator,
-  NetworkTransferTimeCalculator,
-} from './NetworkTimeCalculator.js';
 
 const UIStrings = {
   /**
@@ -518,9 +513,9 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   private readonly progressBarContainer: Element;
   private readonly networkLogLargeRowsSetting: Common.Settings.Setting<boolean>;
   private rowHeightInternal: number;
-  private readonly timeCalculatorInternal: NetworkTransferTimeCalculator;
-  private readonly durationCalculator: NetworkTransferDurationCalculator;
-  private calculatorInternal: NetworkTransferTimeCalculator;
+  private readonly timeCalculatorInternal: NetworkTimeCalculator.NetworkTransferTimeCalculator;
+  private readonly durationCalculator: NetworkTimeCalculator.NetworkTimeCalculator;
+  private calculatorInternal: NetworkTimeCalculator.NetworkTimeCalculator;
   private readonly columnsInternal: NetworkLogViewColumns;
   private staleRequests: Set<SDK.NetworkRequest.NetworkRequest>;
   private mainRequestLoadTime: number;
@@ -587,8 +582,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.rowHeightInternal = 0;
     updateRowHeight.call(this);
 
-    this.timeCalculatorInternal = new NetworkTransferTimeCalculator();
-    this.durationCalculator = new NetworkTransferDurationCalculator();
+    this.timeCalculatorInternal = new NetworkTimeCalculator.NetworkTransferTimeCalculator();
+    this.durationCalculator = new NetworkTimeCalculator.NetworkTransferDurationCalculator();
     this.calculatorInternal = this.timeCalculatorInternal;
 
     this.columnsInternal = new NetworkLogViewColumns(
@@ -1023,7 +1018,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       this.timeCalculatorInternal.setWindow(null);
     } else {
       this.timeFilter = NetworkLogView.requestTimeFilter.bind(null, start, end);
-      this.timeCalculatorInternal.setWindow(new NetworkTimeBoundary(start, end));
+      this.timeCalculatorInternal.setWindow(new NetworkTimeCalculator.NetworkTimeBoundary(start, end));
     }
     this.filterRequests();
   }
@@ -1335,15 +1330,15 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     }
   }
 
-  timeCalculator(): NetworkTimeCalculator {
+  timeCalculator(): NetworkTimeCalculator.NetworkTransferTimeCalculator {
     return this.timeCalculatorInternal;
   }
 
-  calculator(): NetworkTimeCalculator {
+  calculator(): NetworkTimeCalculator.NetworkTimeCalculator {
     return this.calculatorInternal;
   }
 
-  setCalculator(x: NetworkTimeCalculator): void {
+  setCalculator(x: NetworkTimeCalculator.NetworkTimeCalculator): void {
     if (!x || this.calculatorInternal === x) {
       return;
     }