chrome-devtools-frontend 1.0.950850 → 1.0.952284

package/front_end/panels/media/PlayerListView.ts

@@ -45,123 +45,196 @@ export interface PlayerStatusMapElement {
   playerTitleElement: HTMLElement|null;
 }
 
-export class PlayerEntryTreeElement extends UI.TreeOutline.TreeElement {
-  titleFromUrl: boolean;
-  private readonly playerStatus: PlayerStatus;
-  private readonly displayContainer: MainView;
-
-  constructor(playerStatus: PlayerStatus, displayContainer: MainView, playerID: string) {
-    super(playerStatus.playerTitle, false);
-    this.titleFromUrl = true;
-    this.playerStatus = playerStatus;
-    this.displayContainer = displayContainer;
-    this.setLeadingIcons([UI.Icon.Icon.create('largeicon-play-animation', 'media-player')]);
-    this.listItemElement.classList.add('player-entry-tree-element');
-    this.listItemElement.addEventListener('contextmenu', this.rightClickContextMenu.bind(this, playerID), false);
+export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher {
+  private readonly playerEntryFragments: Map<string, UI.Fragment.Fragment>;
+  private readonly playerEntriesWithHostnameFrameTitle: Set<string>;
+  private readonly mainContainer: MainView;
+  private currentlySelectedEntry: Element|null;
+
+  constructor(mainContainer: MainView) {
+    super(true);
+
+    this.playerEntryFragments = new Map();
+    this.playerEntriesWithHostnameFrameTitle = new Set();
+
+    // Container where new panels can be added based on clicks.
+    this.mainContainer = mainContainer;
+
+    this.currentlySelectedEntry = null;
+    this.contentElement.createChild('div', 'player-entry-header').textContent = i18nString(UIStrings.players);
   }
 
-  onselect(_selectedByUser?: boolean): boolean {
-    this.displayContainer.renderMainPanel(this.playerStatus.playerID);
-    return true;
+  private createPlayerListEntry(playerID: string): UI.Fragment.Fragment {
+    const entry = UI.Fragment.Fragment.build`
+    <div class="player-entry-row hbox">
+    <div class="player-entry-status-icon vbox">
+    <div $="icon" class="player-entry-status-icon-centering"></div>
+    </div>
+    <div $="frame-title" class="player-entry-frame-title">FrameTitle</div>
+    <div $="player-title" class="player-entry-player-title">PlayerTitle</div>
+    </div>
+    `;
+    const element = entry.element();
+
+    element.addEventListener('click', this.selectPlayer.bind(this, playerID, element));
+    element.addEventListener('contextmenu', this.rightClickPlayer.bind(this, playerID));
+
+    entry.$('icon').appendChild(UI.Icon.Icon.create('largeicon-pause-animation', 'media-player'));
+    return entry;
   }
 
-  private rightClickContextMenu(playerID: string, event: Event): boolean {
+  private selectPlayer(playerID: string, element: Element): void {
+    this.mainContainer.renderMainPanel(playerID);
+    if (this.currentlySelectedEntry !== null) {
+      this.currentlySelectedEntry.classList.remove('selected');
+    }
+    element.classList.add('selected');
+    this.currentlySelectedEntry = element;
+  }
+
+  private rightClickPlayer(playerID: string, event: Event): boolean {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    contextMenu.headerSection().appendItem(i18nString(UIStrings.hidePlayer), this.hidePlayer.bind(this, playerID));
-    contextMenu.headerSection().appendItem(i18nString(UIStrings.hideAllOthers), this.hideOthers.bind(this, playerID));
-    contextMenu.headerSection().appendItem(i18nString(UIStrings.savePlayerInfo), this.savePlayer.bind(this, playerID));
+    contextMenu.headerSection().appendItem(
+        i18nString(UIStrings.hidePlayer), this.mainContainer.markPlayerForDeletion.bind(this.mainContainer, playerID));
+    contextMenu.headerSection().appendItem(
+        i18nString(UIStrings.hideAllOthers),
+        this.mainContainer.markOtherPlayersForDeletion.bind(this.mainContainer, playerID));
+    contextMenu.headerSection().appendItem(
+        i18nString(UIStrings.savePlayerInfo), this.mainContainer.exportPlayerData.bind(this.mainContainer, playerID));
     contextMenu.show();
     return true;
   }
 
-  private hidePlayer(playerID: string): void {
-    this.displayContainer.markPlayerForDeletion(playerID);
-  }
+  private setMediaElementFrameTitle(playerID: string, frameTitle: string, isHostname: boolean): void {
+    // Only remove the title from the set if we arent 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)) {
+      if (!isHostname) {
+        this.playerEntriesWithHostnameFrameTitle.delete(playerID);
+      }
+    } else if (isHostname) {
+      return;
+    }
 
-  private savePlayer(playerID: string): void {
-    this.displayContainer.exportPlayerData(playerID);
+    if (!this.playerEntryFragments.has(playerID)) {
+      return;
+    }
+    const fragment = this.playerEntryFragments.get(playerID);
+    if (fragment === undefined || fragment.element() === undefined) {
+      return;
+    }
+    fragment.$('frame-title').textContent = frameTitle;
   }
 
-  private hideOthers(playerID: string): void {
-    this.displayContainer.markOtherPlayersForDeletion(playerID);
+  private setMediaElementPlayerTitle(playerID: string, playerTitle: string): void {
+    if (!this.playerEntryFragments.has(playerID)) {
+      return;
+    }
+    const fragment = this.playerEntryFragments.get(playerID);
+    if (fragment === undefined) {
+      return;
+    }
+    fragment.$('player-title').textContent = playerTitle;
   }
-}
 
-export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher {
-  private readonly playerStatuses: Map<string, PlayerEntryTreeElement>;
-  private readonly mainContainer: MainView;
-  private readonly sidebarTree: UI.TreeOutline.TreeOutlineInShadow;
-  private readonly playerList: UI.TreeOutline.TreeElement;
-
-  constructor(mainContainer: MainView) {
-    super(true);
-
-    this.playerStatuses = new Map();
-
-    // Container where new panels can be added based on clicks.
-    this.mainContainer = mainContainer;
+  private setMediaElementPlayerIcon(playerID: string, iconName: string): void {
+    if (!this.playerEntryFragments.has(playerID)) {
+      return;
+    }
+    const fragment = this.playerEntryFragments.get(playerID);
+    if (fragment === undefined) {
+      return;
+    }
+    const icon = fragment.$('icon');
+    if (icon === undefined) {
+      return;
+    }
+    icon.textContent = '';
+    icon.appendChild(UI.Icon.Icon.create(iconName, 'media-player'));
+  }
 
-    // The parent tree for storing sections
-    this.sidebarTree = new UI.TreeOutline.TreeOutlineInShadow();
-    this.contentElement.appendChild(this.sidebarTree.element);
+  private formatAndEvaluate(playerID: string, func: Function, candidate: string, min: number, max: number): void {
+    if (candidate.length <= min) {
+      return;
+    }
+    if (candidate.length >= max) {
+      candidate = candidate.substring(0, max - 3) + '...';
+    }
+    func.bind(this)(playerID, candidate);
+  }
 
-    // Players active in this tab.
-    this.playerList = this.addListSection(i18nString(UIStrings.players));
-    this.playerList.listItemElement.classList.add('player-entry-header');
+  addMediaElementItem(playerID: string): void {
+    const sidebarEntry = this.createPlayerListEntry(playerID);
+    this.contentElement.appendChild(sidebarEntry.element());
+    this.playerEntryFragments.set(playerID, sidebarEntry);
+    this.playerEntriesWithHostnameFrameTitle.add(playerID);
   }
 
   deletePlayer(playerID: string): void {
-    this.playerList.removeChild(this.playerStatuses.get(playerID) as UI.TreeOutline.TreeElement);
-    this.playerStatuses.delete(playerID);
+    if (!this.playerEntryFragments.has(playerID)) {
+      return;
+    }
+    const fragment = this.playerEntryFragments.get(playerID);
+    if (fragment === undefined || fragment.element() === undefined) {
+      return;
+    }
+    this.contentElement.removeChild(fragment.element());
+    this.playerEntryFragments.delete(playerID);
   }
 
-  private addListSection(title: string): UI.TreeOutline.TreeElement {
-    const treeElement = new UI.TreeOutline.TreeElement(title, true);
-    treeElement.listItemElement.classList.add('storage-group-list-item');
-    treeElement.setCollapsible(false);
-    treeElement.selectable = false;
-    this.sidebarTree.appendChild(treeElement);
-    return treeElement;
-  }
+  onEvent(playerID: string, event: PlayerEvent): void {
+    const parsed = JSON.parse(event.value);
+    const eventType = parsed.event;
+
+    // Load events provide the actual underlying URL for the video, which makes
+    // a great way to identify a specific video within a page that potentially
+    // may have many videos. MSE videos have a special blob:http(s) protocol
+    // that we'd like to keep mind of, so we do prepend blob:
+    if (eventType === 'kLoad') {
+      const url = parsed.url as string;
+      const videoName = url.substring(url.lastIndexOf('/') + 1);
+      this.formatAndEvaluate(playerID, this.setMediaElementPlayerTitle, videoName, 1, 20);
+      return;
+    }
 
-  addMediaElementItem(playerID: string): void {
-    const playerStatus = {playerTitle: playerID, playerID: playerID, exists: true, playing: false, titleEdited: false};
-    const playerElement = new PlayerEntryTreeElement(playerStatus, this.mainContainer, playerID);
-    this.playerStatuses.set(playerID, playerElement);
-    this.playerList.appendChild(playerElement);
-  }
+    if (eventType === 'kPlay') {
+      this.setMediaElementPlayerIcon(playerID, 'largeicon-play-animation');
+      return;
+    }
 
-  setMediaElementPlayerTitle(playerID: string, newTitle: string, isTitleExtractedFromUrl: boolean): void {
-    if (this.playerStatuses.has(playerID)) {
-      const sidebarEntry = this.playerStatuses.get(playerID);
-      if (sidebarEntry && (!isTitleExtractedFromUrl || sidebarEntry.titleFromUrl)) {
-        sidebarEntry.title = newTitle;
-        sidebarEntry.titleFromUrl = isTitleExtractedFromUrl;
-      }
+    if (eventType === 'kPause' || eventType === 'kEnded') {
+      this.setMediaElementPlayerIcon(playerID, 'largeicon-pause-animation');
+      return;
     }
-  }
 
-  setMediaElementPlayerIcon(playerID: string, iconName: string): void {
-    if (this.playerStatuses.has(playerID)) {
-      const sidebarEntry = this.playerStatuses.get(playerID);
-      if (!sidebarEntry) {
-        throw new Error('sidebarEntry is expected to not be null');
-      }
-      sidebarEntry.setLeadingIcons([UI.Icon.Icon.create(iconName, 'media-player')]);
+    if (eventType === 'kWebMediaPlayerDestroyed') {
+      this.setMediaElementPlayerIcon(playerID, 'smallicon-videoplayer-destroyed');
+      return;
     }
   }
 
   onProperty(playerID: string, property: Protocol.Media.PlayerProperty): void {
-    // Sometimes the title will be an empty string, since this is provided
-    // by the website. We don't want to swap title to an empty string.
-    if (property.name === PlayerPropertyKeys.FrameTitle && property.value) {
-      this.setMediaElementPlayerTitle(playerID, property.value as string, false);
+    // FrameUrl is always present, and we can generate a basic frame title from
+    // it by grabbing the hostname. It's not possible to generate a "good" player
+    // title from the FrameUrl though, since the page location itself might not
+    // have any relevance to the video being played, and would be shared by all
+    // videos on the page.
+    if (property.name === PlayerPropertyKeys.FrameUrl) {
+      const frameTitle = new URL(property.value).hostname;
+      this.formatAndEvaluate(playerID, this.setMediaElementFrameTitle, frameTitle, 1, 20);
+      return;
     }
 
-    // Url always has a value.
-    if (property.name === PlayerPropertyKeys.FrameUrl) {
-      const urlPathComponent = property.value.substring(property.value.lastIndexOf('/') + 1);
-      this.setMediaElementPlayerTitle(playerID, urlPathComponent, true);
+    // On the other hand, the page may set a title, which usually makes for a
+    // better frame title than a hostname. Unfortunately, its only "usually",
+    // 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.
+    if (property.name === PlayerPropertyKeys.FrameTitle && property.value) {
+      this.formatAndEvaluate(playerID, this.setMediaElementFrameTitle, property.value, 1, 20);
+      return;
     }
   }
 
@@ -173,18 +246,8 @@ export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher
     // TODO(tmathmeyer) show a message count number next to the player name.
   }
 
-  onEvent(playerID: string, event: PlayerEvent): void {
-    const eventType = JSON.parse(event.value).event;
-    if (eventType === 'kPlay') {
-      this.setMediaElementPlayerIcon(playerID, 'largeicon-play-animation');
-    } else if (eventType === 'kPause') {
-      this.setMediaElementPlayerIcon(playerID, 'largeicon-pause-animation');
-    } else if (eventType === 'kWebMediaPlayerDestroyed') {
-      this.setMediaElementPlayerIcon(playerID, 'smallicon-videoplayer-destroyed');
-    }
-  }
   wasShown(): void {
     super.wasShown();
-    this.sidebarTree.registerCSSFiles([playerListViewStyles]);
+    this.registerCSSFiles([playerListViewStyles]);
   }
 }

package/front_end/panels/media/PlayerMessagesView.ts

@@ -317,6 +317,7 @@ export class PlayerMessagesView extends UI.Widget.VBox {
         this.bodyPanel.createChild('div', 'media-messages-message-container media-message-' + message.level);
     UI.UIUtils.createTextChild(container, message.message);
   }
+
   wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([playerMessagesViewStyles]);

package/front_end/panels/media/TickingFlameChart.ts

@@ -12,8 +12,7 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import {Bounds, formatMillisecondsToSeconds} from './TickingFlameChartHelpers.js';
 
 const defaultFont = '11px ' + Host.Platform.fontFamily();
-const defaultColor =
-    ThemeSupport.ThemeSupport.instance().patchColorText('#444', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
+const defaultColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
 
 const DefaultStyle = {
   height: 20,

package/front_end/panels/media/playerListView.css

@@ -20,3 +20,61 @@ li.storage-group-list-item:not(:first-child) {
 li.storage-group-list-item::before {
   display: none;
 }
+
+.player-entry-row {
+  height: 26px;
+  min-height: 26px;
+  line-height: 26px;
+}
+
+.player-entry-status-icon {
+  width: 28px;
+  min-width: 28px;
+  height: 26px;
+  border-right: 1px solid var(--color-details-hairline);
+  overflow: hidden;
+}
+
+.player-entry-status-icon-centering {
+  margin: auto;
+  display: inherit;
+}
+
+.player-entry-frame-title {
+  height: 26px;
+  padding: 0 10px;
+  border-right: 1px solid var(--color-details-hairline);
+  overflow: hidden;
+}
+
+.player-entry-player-title {
+  height: 26px;
+  padding-left: 10px;
+  overflow: hidden;
+}
+
+.player-entry-row:nth-child(odd) {
+  background: var(--color-background-elevation-0);
+}
+
+.player-entry-row:hover {
+  cursor: pointer;
+  background: var(--color-background-hover-overlay);
+}
+
+.player-entry-row.selected {
+  background: var(--color-primary-variant);
+  color: var(--legacy-selection-fg-color);
+}
+
+.player-entry-row.selected .player-entry-status-icon-centering {
+  filter: invert(100);
+}
+
+.player-entry-header {
+  height: 27px;
+  line-height: 27px;
+  min-height: 27px;
+  padding-left: 10px;
+  border-bottom: 1px solid var(--color-details-hairline);
+}

package/front_end/panels/network/NetworkLogView.ts

@@ -2265,15 +2265,11 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   static getDCLEventColor(): string {
-    if (ThemeSupport.ThemeSupport.instance().themeName() === 'dark') {
-      return '#03A9F4';
-    }
-    return '#0867CB';
+    return ThemeSupport.ThemeSupport.instance().getComputedValue('--color-syntax-3');
   }
 
   static getLoadEventColor(): string {
-    return ThemeSupport.ThemeSupport.instance().patchColorText(
-        '#B31412', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
+    return ThemeSupport.ThemeSupport.instance().getComputedValue('--color-syntax-1');
   }
 }
 

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -209,7 +209,7 @@ export class NetworkLogViewColumns {
 
   private static convertToDataGridDescriptor(columnConfig: Descriptor): DataGrid.DataGrid.ColumnDescriptor {
     const title = columnConfig.title instanceof Function ? columnConfig.title() : columnConfig.title;
-    return /** @type {!DataGrid.DataGrid.ColumnDescriptor} */ {
+    return {
       id: columnConfig.id,
       title,
       sortable: columnConfig.sortable,

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -96,8 +96,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     this.styleForWaitingResourceType = resourceStyleTuple[0];
     this.styleForDownloadingResourceType = resourceStyleTuple[1];
 
-    const baseLineColor =
-        ThemeSupport.ThemeSupport.instance().patchColorText('#a5a5a5', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
+    const baseLineColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-disabled');
     this.wiskerStyle = {borderColor: baseLineColor, lineWidth: 1, fillStyle: undefined};
     this.hoverDetailsStyle = {fillStyle: baseLineColor, lineWidth: 1, borderColor: baseLineColor};
 
@@ -426,8 +425,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     this.drawLayers(context, useTimingBars);
 
     context.save();
-    context.fillStyle =
-        ThemeSupport.ThemeSupport.instance().patchColorText('#888', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
+    context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-disabled');
     for (const textData of this.textLayers) {
       context.fillText(textData.text, textData.x, textData.y);
     }

package/front_end/panels/network/components/RequestTrustTokensView.ts

@@ -88,30 +88,30 @@ const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestTrust
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class RequestTrustTokensView extends UI.Widget.VBox {
-  private readonly reportView = new RequestTrustTokensReport();
-  private readonly request: SDK.NetworkRequest.NetworkRequest;
+  readonly #reportView = new RequestTrustTokensReport();
+  readonly #request: SDK.NetworkRequest.NetworkRequest;
 
   constructor(request: SDK.NetworkRequest.NetworkRequest) {
     super();
-    this.request = request;
+    this.#request = request;
 
-    this.contentElement.appendChild(this.reportView);
+    this.contentElement.appendChild(this.#reportView);
   }
 
   wasShown(): void {
-    this.request.addEventListener(SDK.NetworkRequest.Events.TrustTokenResultAdded, this.refreshReportView, this);
+    this.#request.addEventListener(SDK.NetworkRequest.Events.TrustTokenResultAdded, this.#refreshReportView, this);
 
-    this.refreshReportView();
+    this.#refreshReportView();
   }
 
   willHide(): void {
-    this.request.removeEventListener(SDK.NetworkRequest.Events.TrustTokenResultAdded, this.refreshReportView, this);
+    this.#request.removeEventListener(SDK.NetworkRequest.Events.TrustTokenResultAdded, this.#refreshReportView, this);
   }
 
-  private refreshReportView(): void {
-    this.reportView.data = {
-      params: this.request.trustTokenParams(),
-      result: this.request.trustTokenOperationDoneEvent(),
+  #refreshReportView(): void {
+    this.#reportView.data = {
+      params: this.#request.trustTokenParams(),
+      result: this.#request.trustTokenOperationDoneEvent(),
     };
   }
 }
@@ -123,58 +123,58 @@ export interface RequestTrustTokensReportData {
 
 export class RequestTrustTokensReport extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-trust-token-report`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private trustTokenData?: Readonly<RequestTrustTokensReportData>;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #trustTokenData?: Readonly<RequestTrustTokensReportData>;
 
   set data(data: RequestTrustTokensReportData) {
-    this.trustTokenData = data;
-    this.render();
+    this.#trustTokenData = data;
+    this.#render();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [requestTrustTokensViewStyles];
+    this.#shadow.adoptedStyleSheets = [requestTrustTokensViewStyles];
   }
 
-  private render(): void {
-    if (!this.trustTokenData) {
+  #render(): void {
+    if (!this.#trustTokenData) {
       throw new Error('Trying to render a Trust Token report without providing data');
     }
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(LitHtml.html`<${ReportView.ReportView.Report.litTagName}>
-        ${this.renderParameterSection()}
-        ${this.renderResultSection()}
+        ${this.#renderParameterSection()}
+        ${this.#renderResultSection()}
       </${ReportView.ReportView.Report.litTagName}>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 
-  private renderParameterSection(): LitHtml.TemplateResult|{} {
-    if (!this.trustTokenData || !this.trustTokenData.params) {
+  #renderParameterSection(): LitHtml.TemplateResult|{} {
+    if (!this.#trustTokenData || !this.#trustTokenData.params) {
       return LitHtml.nothing;
     }
 
     return LitHtml.html`
       <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.parameters)}</${
         ReportView.ReportView.ReportSectionHeader.litTagName}>
-      ${renderRowWithCodeValue(i18nString(UIStrings.type), this.trustTokenData.params.type.toString())}
-      ${this.renderRefreshPolicy(this.trustTokenData.params)}
-      ${this.renderIssuers(this.trustTokenData.params)}
-      ${this.renderIssuerAndTopLevelOriginFromResult()}
+      ${renderRowWithCodeValue(i18nString(UIStrings.type), this.#trustTokenData.params.type.toString())}
+      ${this.#renderRefreshPolicy(this.#trustTokenData.params)}
+      ${this.#renderIssuers(this.#trustTokenData.params)}
+      ${this.#renderIssuerAndTopLevelOriginFromResult()}
       <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
         ReportView.ReportView.ReportSectionDivider.litTagName}>
     `;
   }
 
-  private renderRefreshPolicy(params: Protocol.Network.TrustTokenParams): LitHtml.TemplateResult|{} {
+  #renderRefreshPolicy(params: Protocol.Network.TrustTokenParams): LitHtml.TemplateResult|{} {
     if (params.type !== Protocol.Network.TrustTokenOperationType.Redemption) {
       return LitHtml.nothing;
     }
     return renderRowWithCodeValue(i18nString(UIStrings.refreshPolicy), params.refreshPolicy.toString());
   }
 
-  private renderIssuers(params: Protocol.Network.TrustTokenParams): LitHtml.TemplateResult|{} {
+  #renderIssuers(params: Protocol.Network.TrustTokenParams): LitHtml.TemplateResult|{} {
     if (!params.issuers || params.issuers.length === 0) {
       return LitHtml.nothing;
     }
@@ -193,18 +193,18 @@ export class RequestTrustTokensReport extends HTMLElement {
   // The issuer and top level origin are technically parameters but reported in the
   // result structure due to the timing when they are calculated in the backend.
   // Nonetheless, we show them as part of the parameter section.
-  private renderIssuerAndTopLevelOriginFromResult(): LitHtml.TemplateResult|{} {
-    if (!this.trustTokenData || !this.trustTokenData.result) {
+  #renderIssuerAndTopLevelOriginFromResult(): LitHtml.TemplateResult|{} {
+    if (!this.#trustTokenData || !this.#trustTokenData.result) {
       return LitHtml.nothing;
     }
 
     return LitHtml.html`
-      ${renderSimpleRowIfValuePresent(i18nString(UIStrings.topLevelOrigin), this.trustTokenData.result.topLevelOrigin)}
-      ${renderSimpleRowIfValuePresent(i18nString(UIStrings.issuer), this.trustTokenData.result.issuerOrigin)}`;
+      ${renderSimpleRowIfValuePresent(i18nString(UIStrings.topLevelOrigin), this.#trustTokenData.result.topLevelOrigin)}
+      ${renderSimpleRowIfValuePresent(i18nString(UIStrings.issuer), this.#trustTokenData.result.issuerOrigin)}`;
   }
 
-  private renderResultSection(): LitHtml.TemplateResult|{} {
-    if (!this.trustTokenData || !this.trustTokenData.result) {
+  #renderResultSection(): LitHtml.TemplateResult|{} {
+    if (!this.#trustTokenData || !this.#trustTokenData.result) {
       return LitHtml.nothing;
     }
     return LitHtml.html`
@@ -215,19 +215,19 @@ export class RequestTrustTokensReport extends HTMLElement {
       <${ReportView.ReportView.ReportValue.litTagName}>
         <span>
           <${IconButton.Icon.Icon.litTagName} class="status-icon"
-            .data=${getIconForStatusCode(this.trustTokenData.result.status) as IconButton.Icon.IconData}>
+            .data=${getIconForStatusCode(this.#trustTokenData.result.status) as IconButton.Icon.IconData}>
           </${IconButton.Icon.Icon.litTagName}>
-          <strong>${getSimplifiedStatusTextForStatusCode(this.trustTokenData.result.status)}</strong>
-          ${getDetailedTextForStatusCode(this.trustTokenData.result.status)}
+          <strong>${getSimplifiedStatusTextForStatusCode(this.#trustTokenData.result.status)}</strong>
+          ${getDetailedTextForStatusCode(this.#trustTokenData.result.status)}
         </span>
       </${ReportView.ReportView.ReportValue.litTagName}>
-      ${this.renderIssuedTokenCount(this.trustTokenData.result)}
+      ${this.#renderIssuedTokenCount(this.#trustTokenData.result)}
       <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
         ReportView.ReportView.ReportSectionDivider.litTagName}>
       `;
   }
 
-  private renderIssuedTokenCount(result: Protocol.Network.TrustTokenOperationDoneEvent): LitHtml.TemplateResult|{} {
+  #renderIssuedTokenCount(result: Protocol.Network.TrustTokenOperationDoneEvent): LitHtml.TemplateResult|{} {
     if (result.type !== Protocol.Network.TrustTokenOperationType.Issuance) {
       return LitHtml.nothing;
     }

package/front_end/panels/network/components/WebBundleInfoView.ts

@@ -39,21 +39,21 @@ export class WebBundleInfoView extends UI.Widget.VBox {
 
 export class WebBundleInfoElement extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-web-bundle-info`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private webBundleInfo: Readonly<SDK.NetworkRequest.WebBundleInfo>;
-  private webBundleName: Readonly<string>;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #webBundleInfo: Readonly<SDK.NetworkRequest.WebBundleInfo>;
+  #webBundleName: Readonly<string>;
   constructor(webBundleInfo: SDK.NetworkRequest.WebBundleInfo, webBundleName: string) {
     super();
-    this.webBundleInfo = webBundleInfo;
-    this.webBundleName = webBundleName;
+    this.#webBundleInfo = webBundleInfo;
+    this.#webBundleName = webBundleName;
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [webBundleInfoViewStyles];
+    this.#shadow.adoptedStyleSheets = [webBundleInfoViewStyles];
   }
 
   render(): void {
-    const rows = this.webBundleInfo.resourceUrls?.map(url => {
+    const rows = this.#webBundleInfo.resourceUrls?.map(url => {
       const mimeType = Common.ResourceType.ResourceType.mimeFromURL(url) || null;
       const resourceType = Common.ResourceType.ResourceType.fromMimeTypeOverride(mimeType) ||
           Common.ResourceType.ResourceType.fromMimeType(mimeType);
@@ -82,7 +82,7 @@ export class WebBundleInfoElement extends HTMLElement {
         <${IconButton.Icon.Icon.litTagName} class="icon"
           .data=${{color: '', iconName: 'resourceWebBundle', width: '16px'} as IconButton.Icon.IconData}>
         </${IconButton.Icon.Icon.litTagName}>
-        <span>${this.webBundleName}</span>
+        <span>${this.#webBundleName}</span>
         <x-link href="https://web.dev/web-bundles/#explaining-web-bundles">
           <${IconButton.Icon.Icon.litTagName} class="icon"
             .data=${
@@ -108,7 +108,7 @@ export class WebBundleInfoElement extends HTMLElement {
         } as DataGrid.DataGrid.DataGridData}>
         </${DataGrid.DataGrid.DataGrid.litTagName}>
       </div>`,
-        this.shadow);
+        this.#shadow);
   }
 }