chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -33,6 +33,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 import type * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
@@ -188,6 +189,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane<ShadowRoot> {
   private inlineStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration|null;
   private highlightMode: string;
   private computedStyle: Map<string, string>|null;
+  private boxModelInternal: Protocol.DOM.BoxModel|null = null;
   private isEditingMetrics?: boolean;
   private view: View;
 
@@ -200,6 +202,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane<ShadowRoot> {
     this.inlineStyle = null;
     this.highlightMode = '';
     this.computedStyle = null;
+    this.boxModelInternal = null;
     this.view = view;
   }
 
@@ -228,28 +231,27 @@ export class MetricsSidebarPane extends ElementsSidebarPane<ShadowRoot> {
       return await Promise.resolve();
     }
 
-    function callback(this: MetricsSidebarPane, style: Map<string, string>|null): void {
-      if (!style || this.node() !== node) {
-        this.computedStyle = null;
-        return;
-      }
-      this.computedStyle = style;
-      this.updateMetrics(style);
-    }
-
     if (!node.id) {
       return await Promise.resolve();
     }
 
-    const promises = [
-      cssModel.getComputedStyle(node.id).then(callback.bind(this)),
-      cssModel.getInlineStyles(node.id).then(inlineStyleResult => {
-        if (inlineStyleResult && this.node() === node) {
-          this.inlineStyle = inlineStyleResult.inlineStyle;
-        }
-      }),
-    ];
-    return await (Promise.all(promises) as unknown as Promise<void>);
+    const [style, boxModel, inlineStyleResult] = await Promise.all([
+      cssModel.getComputedStyle(node.id),
+      node.boxModel().catch(() => null),
+      cssModel.getInlineStyles(node.id),
+    ]);
+
+    if (!style || this.node() !== node) {
+      this.computedStyle = null;
+      this.boxModelInternal = null;
+      return;
+    }
+    this.computedStyle = style;
+    this.boxModelInternal = boxModel;
+    if (inlineStyleResult && this.node() === node) {
+      this.inlineStyle = inlineStyleResult.inlineStyle;
+    }
+    this.updateMetrics(style, 'all', boxModel);
   }
 
   override onCSSModelChanged(): void {
@@ -288,15 +290,66 @@ export class MetricsSidebarPane extends ElementsSidebarPane<ShadowRoot> {
       node.highlight(mode);
     } else {
       this.highlightMode = '';
-      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     }
 
     if (this.computedStyle) {
-      this.updateMetrics(this.computedStyle, mode);
+      this.updateMetrics(this.computedStyle, mode, this.boxModelInternal);
     }
   }
 
-  private getContentAreaWidthPx(style: Map<string, string>): string {
+  /**
+   * Checks whether the array represents a valid Protocol.DOM.Quad (8 coordinates: 4 corner points).
+   */
+  private isDOMQuad(quad?: number[]): boolean {
+    return Boolean(quad && quad.length === 8);
+  }
+
+  /**
+   * Calculates the rendered content box width from a DOM Quad.
+   * A Quad contains 8 numbers representing 4 corner points clockwise from top-left:
+   *   P0 (x=quad[0], y=quad[1]): Top-Left
+   *   P1 (x=quad[2], y=quad[3]): Top-Right
+   *   P2 (x=quad[4], y=quad[5]): Bottom-Right
+   *   P3 (x=quad[6], y=quad[7]): Bottom-Left
+   *
+   * Math.hypot(quad[2] - quad[0], quad[3] - quad[1]) is the distance from Top-Left to Top-Right (top edge).
+   * Math.hypot(quad[4] - quad[6], quad[5] - quad[7]) is the distance from Bottom-Left to Bottom-Right (bottom edge).
+   * Averaging the top and bottom edges gives the rendered width, which accounts for scrollbars and handles
+   * rotated or skewed elements.
+   */
+  private computeQuadWidth(quad: Protocol.DOM.Quad): number {
+    const topWidth = Math.hypot(quad[2] - quad[0], quad[3] - quad[1]);
+    const bottomWidth = Math.hypot(quad[4] - quad[6], quad[5] - quad[7]);
+    return (topWidth + bottomWidth) / 2;
+  }
+
+  /**
+   * Calculates the rendered content box height from a DOM Quad.
+   * Math.hypot(quad[6] - quad[0], quad[7] - quad[1]) is the distance from Top-Left to Bottom-Left (left edge).
+   * Math.hypot(quad[4] - quad[2], quad[5] - quad[3]) is the distance from Top-Right to Bottom-Right (right edge).
+   * Averaging the left and right edges gives the rendered height, which accounts for scrollbars and handles
+   * rotated or skewed elements.
+   */
+  private computeQuadHeight(quad: Protocol.DOM.Quad): number {
+    const leftHeight = Math.hypot(quad[6] - quad[0], quad[7] - quad[1]);
+    const rightHeight = Math.hypot(quad[4] - quad[2], quad[5] - quad[3]);
+    return (leftHeight + rightHeight) / 2;
+  }
+
+  /**
+   * Computes the content area width in pixels for display in the Box Model diagram.
+   * - Branch 1: If a DOM quad is available, we compute width directly
+   *   from the rendered quad. This accurately reflects the content box when scrollbars are present
+   *   (which getComputedStyle does not subtract).
+   * - Branch 2: Fallback to parsing the CSS 'width' property from getComputedStyle.
+   */
+  private getContentAreaWidthPx(style: Map<string, string>, boxModel?: Protocol.DOM.BoxModel|null): string {
+    if (boxModel && this.isDOMQuad(boxModel.content)) {
+      const width = this.computeQuadWidth(boxModel.content);
+      return Platform.NumberUtilities.toFixedIfFloating(width.toString());
+    }
+
     let width = style.get('width');
     if (!width) {
       return '';
@@ -313,7 +366,19 @@ export class MetricsSidebarPane extends ElementsSidebarPane<ShadowRoot> {
     return Platform.NumberUtilities.toFixedIfFloating(width);
   }
 
-  private getContentAreaHeightPx(style: Map<string, string>): string {
+  /**
+   * Computes the content area height in pixels for display in the Box Model diagram.
+   * - Branch 1: If a DOM quad is available, we compute height directly
+   *   from the rendered quad. This accurately reflects the content box when scrollbars are present
+   *   (which getComputedStyle does not subtract).
+   * - Branch 2: Fallback to parsing the CSS 'height' property from getComputedStyle.
+   */
+  private getContentAreaHeightPx(style: Map<string, string>, boxModel?: Protocol.DOM.BoxModel|null): string {
+    if (boxModel && this.isDOMQuad(boxModel.content)) {
+      const height = this.computeQuadHeight(boxModel.content);
+      return Platform.NumberUtilities.toFixedIfFloating(height.toString());
+    }
+
     let height = style.get('height');
     if (!height) {
       return '';
@@ -330,18 +395,19 @@ export class MetricsSidebarPane extends ElementsSidebarPane<ShadowRoot> {
     return Platform.NumberUtilities.toFixedIfFloating(height);
   }
 
-  private updateMetrics(style: Map<string, string>, highlightedMode = 'all'): void {
-    this.view(
-        {
-          style,
-          highlightedMode,
-          node: this.node(),
-          contentWidth: this.getContentAreaWidthPx(style),
-          contentHeight: this.getContentAreaHeightPx(style),
-          onHighlightNode: this.highlightDOMNode.bind(this),
-          onStartEditing: this.startEditing.bind(this),
-        },
-        undefined, this.contentElement);
+  private updateMetrics(style: Map<string, string>, highlightedMode = 'all',
+                        boxModel?: Protocol.DOM.BoxModel|null): void {
+    const boxModelToUse = boxModel ?? this.boxModelInternal;
+    this.view({
+      style,
+      highlightedMode,
+      node: this.node(),
+      contentWidth: this.getContentAreaWidthPx(style, boxModelToUse),
+      contentHeight: this.getContentAreaHeightPx(style, boxModelToUse),
+      onHighlightNode: this.highlightDOMNode.bind(this),
+      onStartEditing: this.startEditing.bind(this),
+    },
+              undefined, this.contentElement);
   }
 
   startEditing(targetElement: Element, box: string, styleProperty: string, computedStyle: Map<string, string>): void {

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -676,7 +676,7 @@ export class StylePropertiesSection {
     if (this.hoverTimer) {
       clearTimeout(this.hoverTimer);
     }
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
   }
 
   private onMouseEnterSelector(): void {
@@ -687,7 +687,7 @@ export class StylePropertiesSection {
   }
 
   highlight(mode: string|undefined = 'all'): void {
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     const node = this.stylesContainer.node();
     if (!node) {
       return;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1883,7 +1883,13 @@ export class BaseFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
     // To understand which argument was selected by the function, we evaluate the function as well as all the arguments
     // and compare the function result to the values of all its arguments. Evaluating the arguments eliminates nested
     // function calls and normalizes all units to px.
-    const values = match.args.map(arg => context.matchedResult.getComputedTextRange(arg[0], arg[arg.length - 1]));
+    const values = match.args.map(arg => {
+      const text = context.matchedResult.getComputedTextRange(arg[0], arg[arg.length - 1]);
+      // We wrap each argument in calc() so it becomes a valid standalone CSS value.
+      // Standalone arithmetic expressions like `48px - 40px` are syntax errors in the CSS grammar unless wrapped in calc().
+      // Without this wrapper, the browser's resolveValues() CDP command fails to parse and evaluate them.
+      return `calc(${text})`;
+    });
     values.unshift(context.matchedResult.getComputedText(match.node));
     const evaledArgs = await resolveValues(this.#stylesContainer, this.#propertyName, match, context, ...values);
     if (context.signal?.aborted) {
@@ -1944,7 +1950,7 @@ export class AnchorFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMa
       anchorNode?.highlight();
     };
     const onMouseLeave = (): void => {
-      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     };
 
     if (identifier) {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -719,7 +719,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   setActiveProperty(treeElement: StylePropertyTreeElement|null): void {
     if (this.isActivePropertyHighlighted) {
-      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     }
     this.isActivePropertyHighlighted = false;
 

package/front_end/panels/elements/components/AccessibilityTreeNode.ts

@@ -5,7 +5,8 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
-import * as Protocol from '../../../generated/protocol.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../../ui/lit/lit.js';
@@ -34,18 +35,6 @@ function truncateTextIfNeeded(text: string): string {
   return text;
 }
 
-function isPrintable(valueType: Protocol.Accessibility.AXValueType): boolean {
-  switch (valueType) {
-    case Protocol.Accessibility.AXValueType.Boolean:
-    case Protocol.Accessibility.AXValueType.BooleanOrUndefined:
-    case Protocol.Accessibility.AXValueType.String:
-    case Protocol.Accessibility.AXValueType.Number:
-      return true;
-    default:
-      return false;
-  }
-}
-
 export interface AccessibilityTreeNodeData {
   ignored: boolean;
   name: string;
@@ -75,11 +64,11 @@ export class AccessibilityTreeNode extends HTMLElement {
   async #render(): Promise<void> {
     const role = html`<span class='role-value'>${truncateTextIfNeeded(this.#role)}</span>`;
     const name = html`"<span class='attribute-value'>${this.#name}</span>"`;
-    const properties = this.#properties.map(
-        ({name, value}) => isPrintable(value.type) ?
-            html` <span class='attribute-name'>${name}</span>:&nbsp;<span class='attribute-value'>${
-                value.value}</span>` :
-            nothing);
+    const properties =
+        this.#properties.map(({name, value}) => SDK.AccessibilityModel.isPrintableType(value.type) ?
+                                 html` <span class='attribute-name'>${
+                                     name}</span>:&nbsp;<span class='attribute-value'>${value.value}</span>` :
+                                 nothing);
     const content =
         this.#ignored ? html`<span>${i18nString(UIStrings.ignored)}</span>` : html`${role}&nbsp;${name}${properties}`;
     await RenderCoordinator.write(`Accessibility node ${this.#id} render`, () => {

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -125,7 +125,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
   }
 
   #onCrumbMouseLeave(): void {
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
   }
 
   #onCrumbFocus(node: SDK.DOMModel.DOMNode): () => void {
@@ -133,7 +133,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
   }
 
   #onCrumbBlur(): void {
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
   }
 
   #engageResizeObserver(): void {

package/front_end/panels/elements/components/QueryContainer.ts

@@ -55,7 +55,7 @@ export class QueryContainer extends HTMLElement {
   }
 
   #onContainerLinkMouseLeave(): void {
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     this.#isContainerLinkHovered = false;
     this.#render();
   }

package/front_end/panels/issues/AffectedDirectivesView.ts

@@ -114,7 +114,7 @@ export class AffectedDirectivesView extends AffectedResourcesView {
       };
 
       const onElementRevealIconMouseLeave: (arg0?: Event|undefined) => void = () => {
-        SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+        SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
       };
 
       elementsPanelLinkComponent

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -205,7 +205,8 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
         void frame.highlight();
       }
     };
-    frameCell.onmouseleave = () => SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    frameCell.onmouseleave = () =>
+        SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     return frameCell;
   }
 

package/front_end/panels/layer_viewer/LayerViewHost.ts

@@ -191,6 +191,6 @@ export class LayerViewHost {
       node.highlightForTwoSeconds();
       return;
     }
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
   }
 }

package/front_end/panels/media/EventDisplayTable.ts

@@ -15,7 +15,7 @@ import type {PlayerEvent} from './MediaModel.js';
 
 const UIStrings = {
   /**
-   * @description Text for timestamps of items
+   * @description Text for timestamps of items.
    */
   timestamp: 'Timestamp',
   /**
@@ -23,7 +23,7 @@ const UIStrings = {
    */
   eventName: 'Event name',
   /**
-   * @description Text for the value of something
+   * @description Text for the value of something.
    */
   value: 'Value',
   /**

package/front_end/panels/media/EventTimelineView.ts

@@ -20,13 +20,13 @@ 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',
+  playbackStatus: 'Playback status',
   /**
-   * @description Title of the 'Buffering Status' button
+   * @description Title of the 'Buffering status' button.
    */
-  bufferingStatus: 'Buffering Status',
+  bufferingStatus: 'Buffering status',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/media/EventTimelineView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

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.',

package/front_end/panels/media/PlayerDetailView.ts

@@ -15,7 +15,7 @@ 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',
   /**
@@ -31,19 +31,19 @@ const UIStrings = {
    */
   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 Hover text for Timeline tab.
    */
   playerTimeline: 'Player timeline',
 } as const;

package/front_end/panels/media/PlayerListView.ts

@@ -28,7 +28,7 @@ const UIStrings = {
    */
   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',
   /**

package/front_end/panels/media/PlayerMessagesView.ts

@@ -17,31 +17,31 @@ import playerMessagesViewStyles from './playerMessagesView.css.js';
 
 const UIStrings = {
   /**
-   * @description A context menu item in the Console View of the Console panel
+   * @description A context menu item in the Console view of the Console panel.
    */
   default: 'Default',
   /**
-   * @description Text in Network Throttling Selector of the Network panel
+   * @description Text in Network throttling selector of the Network panel.
    */
   custom: 'Custom',
   /**
-   * @description Text for everything
+   * @description Text for everything.
    */
   all: 'All',
   /**
-   * @description Text for errors
+   * @description Text for errors.
    */
   error: 'Error',
   /**
-   * @description Text to indicate an item is a warning
+   * @description Text to indicate an item is a warning.
    */
   warning: 'Warning',
   /**
-   * @description Sdk console message message level info of level Labels in Console View of the Console panel
+   * @description Sdk console message level info in Console view of the Console panel.
    */
   info: 'Info',
   /**
-   * @description Debug log level
+   * @description Debug log level.
    */
   debug: 'Debug',
   /**
@@ -49,25 +49,25 @@ const UIStrings = {
    */
   logLevel: 'Log level:',
   /**
-   * @description Default text for user-text-entry for searching log messages.
+   * @description Default text for user text entry for searching log messages.
    */
   filterByLogMessages: 'Filter by log messages',
   /**
    * @description The label for the group name that this error belongs to.
    */
-  errorGroupLabel: 'Error Group:',
+  errorGroupLabel: 'Error group:',
   /**
    * @description The label for the numeric code associated with this error.
    */
-  errorCodeLabel: 'Error Code:',
+  errorCodeLabel: 'Error code:',
   /**
    * @description The label for extra data associated with an error.
    */
   errorDataLabel: 'Data:',
   /**
-   * @description The label for the stacktrace associated with the error.
+   * @description The label for the stack trace associated with the error.
    */
-  errorStackLabel: 'Stacktrace:',
+  errorStackLabel: 'Stack trace:',
   /**
    * @description The label for a root cause error associated with this error.
    */

package/front_end/panels/media/PlayerPropertiesView.ts

@@ -30,11 +30,11 @@ const UIStrings = {
    */
   decoder: 'Decoder',
   /**
-   * @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 Menu label for text tracks, it is followed by a number, like 'Text Track #1'
+   * @description Menu label for text tracks, it is followed by a number, like 'Text track #1'.
    */
   textTrack: 'Text track',
   /**
@@ -43,19 +43,19 @@ const UIStrings = {
    */
   noTextTracks: 'No text tracks',
   /**
-   * @description Media property giving the width x height of the video
+   * @description Media property giving the width x height of the video.
    */
   resolution: 'Resolution',
   /**
-   * @description Media property giving the file size of the media
+   * @description Media property giving the file size of the media.
    */
   fileSize: 'File size',
   /**
-   * @description Media property giving the media file bitrate
+   * @description Media property giving the media file bitrate.
    */
   bitrate: 'Bitrate',
   /**
-   * @description Text for the duration of something
+   * @description Text for the duration of something.
    */
   duration: 'Duration',
   /**
@@ -63,7 +63,7 @@ const UIStrings = {
    */
   startTime: 'Start time',
   /**
-   * @description Media property signaling whether the media is streaming
+   * @description Media property signaling whether the media is streaming.
    */
   streaming: 'Streaming',
   /**
@@ -71,19 +71,19 @@ const UIStrings = {
    */
   playbackFrameUrl: 'Playback frame URL',
   /**
-   * @description Media property giving the title of the frame where the media is embedded
+   * @description Media property giving the title of the frame where the media is embedded.
    */
   playbackFrameTitle: 'Playback frame title',
   /**
-   * @description Media property describing whether the file is single or cross origin in nature
+   * @description Media property describing whether the file is single or cross-origin in nature.
    */
   singleoriginPlayback: 'Single-origin playback',
   /**
-   * @description Media property describing support for range http headers
+   * @description Media property describing support for range HTTP headers.
    */
   rangeHeaderSupport: '`Range` header support',
   /**
-   * @description Media property giving the media file frame rate
+   * @description Media property giving the media file frame rate.
    */
   frameRate: 'Frame rate',
   /**
@@ -97,25 +97,25 @@ const UIStrings = {
    */
   videoFreezingScore: 'Video freezing score',
   /**
-   * @description Media property giving the name of the renderer being used
+   * @description Media property giving the name of the renderer being used.
    */
   rendererName: 'Renderer name',
 
   /**
-   * @description Media property giving the name of the decoder being used
+   * @description Media property giving the name of the decoder being used.
    */
   decoderName: 'Decoder name',
   /**
-   * @description There is no decoder
+   * @description There is no decoder.
    */
   noDecoder: 'No decoder',
   /**
-   * @description Media property signaling whether a hardware decoder is being used
+   * @description Media property signaling whether a hardware decoder is being used.
    */
   hardwareDecoder: 'Hardware decoder',
   /**
    * @description Media property signaling whether the content is encrypted. This is a noun phrase for
-   *a demultiplexer that does decryption.
+   * a demultiplexer that does decryption.
    */
   decryptingDemuxer: 'Decrypting demuxer',
 
@@ -132,7 +132,7 @@ const UIStrings = {
    */
   hardwareEncoder: 'Hardware encoder',
   /**
-   * @description Property for adaptive (HLS) playback which shows the start/end time of the loaded content buffer
+   * @description Property for adaptive (HLS) playback which shows the start/end time of the loaded content buffer.
    */
   hlsBufferedRanges: 'Buffered media ranges',
 } as const;