chrome-devtools-frontend 1.0.951410 → 1.0.952713

package/front_end/panels/application/components/TrustTokensView.ts

@@ -48,22 +48,22 @@ interface TrustTokensDeleteButtonData {
 
 class TrustTokensDeleteButton extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-trust-tokens-delete-button`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private issuer: DataGrid.DataGridUtils.CellValue|null = null;
-  private deleteClickHandler: (issuerOrigin: string) => void = () => {};
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #issuer: DataGrid.DataGridUtils.CellValue|null = null;
+  #deleteClickHandler: (issuerOrigin: string) => void = () => {};
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [trustTokensViewDeleteButtonStyles];
+    this.#shadow.adoptedStyleSheets = [trustTokensViewDeleteButtonStyles];
   }
 
   set data(data: TrustTokensDeleteButtonData) {
-    this.issuer = data.issuer;
-    this.deleteClickHandler = data.deleteClickHandler;
-    this.render();
+    this.#issuer = data.issuer;
+    this.#deleteClickHandler = data.deleteClickHandler;
+    this.#render();
   }
 
-  private render(): void {
-    if (!this.issuer) {
+  #render(): void {
+    if (!this.#issuer) {
       return;
     }
     // clang-format off
@@ -71,14 +71,14 @@ class TrustTokensDeleteButton extends HTMLElement {
       <!-- Wrap the button in a container, otherwise we can't center it inside the column. -->
       <span class="button-container">
         <button class="delete-button"
-          title=${i18nString(UIStrings.deleteTrustTokens, {PH1: this.issuer as string})}
-          @click=${(): void => this.deleteClickHandler(this.issuer as string)}>
+          title=${i18nString(UIStrings.deleteTrustTokens, {PH1: this.#issuer as string})}
+          @click=${(): void => this.#deleteClickHandler(this.#issuer as string)}>
           <${IconButton.Icon.Icon.litTagName} .data=${
         {iconName: 'trash_bin_icon', color: 'var(--color-text-secondary)', width: '9px', height: '14px'} as
         IconButton.Icon.IconWithName}>
           </${IconButton.Icon.Icon.litTagName}>
         </button>
-      </span>`, this.shadow, {host: this});
+      </span>`, this.#shadow, {host: this});
     // clang-format on
   }
 }
@@ -90,22 +90,22 @@ export interface TrustTokensViewData {
 
 export class TrustTokensView extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-trust-tokens-storage-view`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private tokens: Protocol.Storage.TrustTokens[] = [];
-  private deleteClickHandler: (issuerOrigin: string) => void = () => {};
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #tokens: Protocol.Storage.TrustTokens[] = [];
+  #deleteClickHandler: (issuerOrigin: string) => void = () => {};
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [trustTokensViewStyles];
-    this.render();
+    this.#shadow.adoptedStyleSheets = [trustTokensViewStyles];
+    this.#render();
   }
 
   set data(data: TrustTokensViewData) {
-    this.tokens = data.tokens;
-    this.deleteClickHandler = data.deleteClickHandler;
-    this.render();
+    this.#tokens = data.tokens;
+    this.#deleteClickHandler = data.deleteClickHandler;
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // clang-format off
     LitHtml.render(LitHtml.html`
       <div>
@@ -116,14 +116,14 @@ export class TrustTokensView extends HTMLElement {
             {iconName: 'ic_info_black_18dp', color: 'var(--color-link)', width: '14px'} as
             IconButton.Icon.IconWithName}>
         </${IconButton.Icon.Icon.litTagName}>
-        ${this.renderGridOrNoDataMessage()}
+        ${this.#renderGridOrNoDataMessage()}
       </div>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 
-  private renderGridOrNoDataMessage(): LitHtml.TemplateResult {
-    if (this.tokens.length === 0) {
+  #renderGridOrNoDataMessage(): LitHtml.TemplateResult {
+    if (this.#tokens.length === 0) {
       return LitHtml.html`<div class="no-tt-message">${i18nString(UIStrings.noTrustTokensStored)}</div>`;
     }
 
@@ -154,7 +154,7 @@ export class TrustTokensView extends HTMLElement {
           sortable: false,
         },
       ],
-      rows: this.buildRowsFromTokens(),
+      rows: this.#buildRowsFromTokens(),
       initialSort: {
         columnId: 'issuer',
         direction: DataGrid.DataGridUtils.SortDirection.ASC,
@@ -168,14 +168,14 @@ export class TrustTokensView extends HTMLElement {
     `;
   }
 
-  private buildRowsFromTokens(): DataGrid.DataGridUtils.Row[] {
-    const tokens = this.tokens.filter(token => token.count > 0);
+  #buildRowsFromTokens(): DataGrid.DataGridUtils.Row[] {
+    const tokens = this.#tokens.filter(token => token.count > 0);
     return tokens.map(token => ({
                         cells: [
                           {
                             columnId: 'delete-button',
                             value: removeTrailingSlash(token.issuerOrigin),
-                            renderer: this.deleteButtonRendererForDataGridCell.bind(this),
+                            renderer: this.#deleteButtonRendererForDataGridCell.bind(this),
                           },
                           {columnId: 'issuer', value: removeTrailingSlash(token.issuerOrigin)},
                           {columnId: 'count', value: token.count},
@@ -183,10 +183,10 @@ export class TrustTokensView extends HTMLElement {
                       }));
   }
 
-  private deleteButtonRendererForDataGridCell(issuer: DataGrid.DataGridUtils.CellValue): LitHtml.TemplateResult {
+  #deleteButtonRendererForDataGridCell(issuer: DataGrid.DataGridUtils.CellValue): LitHtml.TemplateResult {
     // clang-format off
     return LitHtml.html`<${TrustTokensDeleteButton.litTagName}
-     .data=${{issuer, deleteClickHandler: this.deleteClickHandler} as TrustTokensDeleteButtonData}
+     .data=${{issuer, deleteClickHandler: this.#deleteClickHandler} as TrustTokensDeleteButtonData}
     ></${TrustTokensDeleteButton.litTagName}>`;
     // clang-format on
   }

package/front_end/panels/console/ConsoleView.ts

@@ -1283,7 +1283,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     this.searchCanceled();
     this.searchableViewInternal.updateSearchMatchesCount(0);
 
-    this.searchRegex = searchConfig.toSearchRegex(true);
+    this.searchRegex = searchConfig.toSearchRegex(true).regex;
 
     this.regexMatchRanges = [];
     this.currentMatchRangeIndex = -1;

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -49,7 +49,6 @@ import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import type {Chrome} from '../../../extension-api/ExtensionAPI.js'; // eslint-disable-line rulesdir/es_modules_import
@@ -1006,11 +1005,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         wrapper.style.setProperty('max-width', '100%');
         wrapper.appendChild(lineFragment);
         applyCurrentStyle(wrapper);
-        for (const child of wrapper.children) {
-          if (child.classList.contains('devtools-link') && child instanceof HTMLElement) {
-            this.applyForcedVisibleStyle(child);
-          }
-        }
+
         a.appendChild(wrapper);
         if (i < lines.length - 1) {
           a.appendChild(document.createElement('br'));
@@ -1032,25 +1027,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return Platform.StringUtilities.format(format, parameters, formatters, formattedResult, append.bind(this));
   }
 
-  private applyForcedVisibleStyle(element: HTMLElement): void {
-    element.style.setProperty('-webkit-text-stroke', '0', 'important');
-    element.style.setProperty('text-decoration', 'underline', 'important');
-
-    const themedColor = ThemeSupport.ThemeSupport.instance().patchColorText(
-        'rgb(33%, 33%, 33%)', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
-    element.style.setProperty('color', themedColor, 'important');
-
-    let backgroundColor = 'hsl(0, 0%, 100%)';
-    if (this.message.level === Protocol.Log.LogEntryLevel.Error) {
-      backgroundColor = 'hsl(0, 100%, 97%)';
-    } else if (this.message.level === Protocol.Log.LogEntryLevel.Warning || this.shouldRenderAsWarning()) {
-      backgroundColor = 'hsl(50, 100%, 95%)';
-    }
-    const themedBackgroundColor = ThemeSupport.ThemeSupport.instance().patchColorText(
-        backgroundColor, ThemeSupport.ThemeSupport.ColorUsage.Background);
-    element.style.setProperty('background-color', themedBackgroundColor, 'important');
-  }
-
   matchesFilterRegex(regexObject: RegExp): boolean {
     regexObject.lastIndex = 0;
     const contentElement = this.contentElement();

package/front_end/panels/console/consoleView.css

@@ -49,6 +49,7 @@
   --override-focused-message-background-color: hsl(214deg 19% 20%);
   --override-console-warning-background-color: hsl(50deg 100% 10%);
   --override-console-warning-text-color: hsl(39deg 89% 55%);
+  --override-console-link-color: var(--color-background-inverted);
 }
 
 .console-toolbar-container {
@@ -460,6 +461,10 @@
   height: 0;
 }
 
+.-theme-with-dark-background #console-messages .console-message-text .devtools-link {
+  color: var(--override-console-link-color);
+}
+
 @media (forced-colors: active) {
   .console-message-expand-icon,
   .console-warning-level [is="ui-icon"].icon-mask.expand-group-icon {

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -271,11 +271,11 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     this.#sideBar.addItem(i18nString(UIStrings.mediaQueries), 'media-queries');
     this.#sideBar.select('summary');
 
-    this.#sideBar.addEventListener(SidebarEvents.ItemSelected, this.sideBarItemSelected, this);
-    this.#sideBar.addEventListener(SidebarEvents.Reset, this.sideBarReset, this);
-    this.#controller.addEventListener(CSSOverViewControllerEvents.Reset, this.reset, this);
-    this.#controller.addEventListener(CSSOverViewControllerEvents.PopulateNodes, this.createElementsView, this);
-    this.#resultsContainer.element.addEventListener('click', this.onClick.bind(this));
+    this.#sideBar.addEventListener(SidebarEvents.ItemSelected, this.#sideBarItemSelected, this);
+    this.#sideBar.addEventListener(SidebarEvents.Reset, this.#sideBarReset, this);
+    this.#controller.addEventListener(CSSOverViewControllerEvents.Reset, this.#reset, this);
+    this.#controller.addEventListener(CSSOverViewControllerEvents.PopulateNodes, this.#createElementsView, this);
+    this.#resultsContainer.element.addEventListener('click', this.#onClick.bind(this));
 
     this.#data = null;
   }
@@ -298,7 +298,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     this.#domModel = domModel;
   }
 
-  private sideBarItemSelected(event: Common.EventTarget.EventTargetEvent<string>): void {
+  #sideBarItemSelected(event: Common.EventTarget.EventTargetEvent<string>): void {
     const {data} = event;
     const section = (this.#fragment as UI.Fragment.Fragment).$(data);
     if (!section) {
@@ -308,11 +308,11 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     section.scrollIntoView();
   }
 
-  private sideBarReset(): void {
+  #sideBarReset(): void {
     this.#controller.dispatchEventToListeners(CSSOverViewControllerEvents.Reset);
   }
 
-  private reset(): void {
+  #reset(): void {
     this.#resultsContainer.element.removeChildren();
     this.#mainContainer.setSidebarMinimized(true);
     this.#elementContainer.closeTabs();
@@ -321,7 +321,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     this.#sideBar.select('summary');
   }
 
-  private onClick(evt: Event): void {
+  #onClick(evt: Event): void {
     if (!evt.target) {
       return;
     }
@@ -453,19 +453,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     this.#mainContainer.setSidebarMinimized(false);
   }
 
-  private onMouseOver(evt: Event): void {
-    // Traverse the event path on the grid to find the nearest element with a backend node ID attached. Use
-    // that for the highlighting.
-    const node = (evt.composedPath() as HTMLElement[]).find(el => el.dataset && el.dataset.backendNodeId);
-    if (!node) {
-      return;
-    }
-
-    const backendNodeId = Number(node.dataset.backendNodeId);
-    this.#controller.dispatchEventToListeners(CSSOverViewControllerEvents.RequestNodeHighlight, backendNodeId);
-  }
-
-  private async render(data: OverviewData): Promise<void> {
+  async #render(data: OverviewData): Promise<void> {
     if (!data || !('backgroundColors' in data) || !('textColors' in data)) {
       return;
     }
@@ -485,10 +473,10 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     } = this.#data;
 
     // Convert rgb values from the computed styles to either undefined or HEX(A) strings.
-    const sortedBackgroundColors = this.sortColorsByLuminance(backgroundColors);
-    const sortedTextColors = this.sortColorsByLuminance(textColors);
-    const sortedFillColors = this.sortColorsByLuminance(fillColors);
-    const sortedBorderColors = this.sortColorsByLuminance(borderColors);
+    const sortedBackgroundColors = this.#sortColorsByLuminance(backgroundColors);
+    const sortedTextColors = this.#sortColorsByLuminance(textColors);
+    const sortedFillColors = this.#sortColorsByLuminance(fillColors);
+    const sortedBorderColors = this.#sortColorsByLuminance(borderColors);
 
     this.#fragment = UI.Fragment.Fragment.build`
     <div class="vbox overview-completed-view">
@@ -549,44 +537,44 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
       PH1: sortedBackgroundColors.length,
     })}</h2>
         <ul>
-          ${sortedBackgroundColors.map(this.colorsToFragment.bind(this, 'background'))}
+          ${sortedBackgroundColors.map(this.#colorsToFragment.bind(this, 'background'))}
         </ul>
 
         <h2>${i18nString(UIStrings.textColorsS, {
       PH1: sortedTextColors.length,
     })}</h2>
         <ul>
-          ${sortedTextColors.map(this.colorsToFragment.bind(this, 'text'))}
+          ${sortedTextColors.map(this.#colorsToFragment.bind(this, 'text'))}
         </ul>
 
-        ${textColorContrastIssues.size > 0 ? this.contrastIssuesToFragment(textColorContrastIssues) : ''}
+        ${textColorContrastIssues.size > 0 ? this.#contrastIssuesToFragment(textColorContrastIssues) : ''}
 
         <h2>${i18nString(UIStrings.fillColorsS, {
       PH1: sortedFillColors.length,
     })}</h2>
         <ul>
-          ${sortedFillColors.map(this.colorsToFragment.bind(this, 'fill'))}
+          ${sortedFillColors.map(this.#colorsToFragment.bind(this, 'fill'))}
         </ul>
 
         <h2>${i18nString(UIStrings.borderColorsS, {
       PH1: sortedBorderColors.length,
     })}</h2>
         <ul>
-          ${sortedBorderColors.map(this.colorsToFragment.bind(this, 'border'))}
+          ${sortedBorderColors.map(this.#colorsToFragment.bind(this, 'border'))}
         </ul>
       </div>
 
       <div $="font-info" class="results-section font-info">
         <h1>${i18nString(UIStrings.fontInfo)}</h1>
         ${
-        fontInfo.size > 0 ? this.fontInfoToFragment(fontInfo) :
+        fontInfo.size > 0 ? this.#fontInfoToFragment(fontInfo) :
                             UI.Fragment.Fragment.build`<div>${i18nString(UIStrings.thereAreNoFonts)}</div>`}
       </div>
 
       <div $="unused-declarations" class="results-section unused-declarations">
         <h1>${i18nString(UIStrings.unusedDeclarations)}</h1>
         ${
-        unusedDeclarations.size > 0 ? this.groupToFragment(unusedDeclarations, 'unused-declarations', 'declaration') :
+        unusedDeclarations.size > 0 ? this.#groupToFragment(unusedDeclarations, 'unused-declarations', 'declaration') :
                                       UI.Fragment.Fragment.build`<div class="horizontally-padded">${
                                           i18nString(UIStrings.thereAreNoUnusedDeclarations)}</div>`}
       </div>
@@ -594,7 +582,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
       <div $="media-queries" class="results-section media-queries">
         <h1>${i18nString(UIStrings.mediaQueries)}</h1>
         ${
-        mediaQueries.size > 0 ? this.groupToFragment(mediaQueries, 'media-queries', 'text') :
+        mediaQueries.size > 0 ? this.#groupToFragment(mediaQueries, 'media-queries', 'text') :
                                 UI.Fragment.Fragment.build`<div class="horizontally-padded">${
                                     i18nString(UIStrings.thereAreNoMediaQueries)}</div>`}
       </div>
@@ -603,7 +591,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     this.#resultsContainer.element.appendChild(this.#fragment.element());
   }
 
-  private createElementsView(evt: Common.EventTarget.EventTargetEvent<{payload: PopulateNodesEvent}>): void {
+  #createElementsView(evt: Common.EventTarget.EventTargetEvent<{payload: PopulateNodesEvent}>): void {
     const {payload} = evt.data;
 
     let id = '';
@@ -659,17 +647,17 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     this.#elementContainer.appendTab(id, tabTitle, view, true);
   }
 
-  private fontInfoToFragment(fontInfo: Map<string, Map<string, Map<string, number[]>>>): UI.Fragment.Fragment {
+  #fontInfoToFragment(fontInfo: Map<string, Map<string, Map<string, number[]>>>): UI.Fragment.Fragment {
     const fonts = Array.from(fontInfo.entries());
     return UI.Fragment.Fragment.build`
   ${fonts.map(([font, fontMetrics]) => {
       return UI.Fragment.Fragment.build`<section class="font-family"><h2>${font}</h2> ${
-          this.fontMetricsToFragment(font, fontMetrics)}</section>`;
+          this.#fontMetricsToFragment(font, fontMetrics)}</section>`;
     })}
   `;
   }
 
-  private fontMetricsToFragment(font: string, fontMetrics: Map<string, Map<string, number[]>>): UI.Fragment.Fragment {
+  #fontMetricsToFragment(font: string, fontMetrics: Map<string, Map<string, number[]>>): UI.Fragment.Fragment {
     const fontMetricInfo = Array.from(fontMetrics.entries());
 
     return UI.Fragment.Fragment.build`
@@ -679,13 +667,13 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
       return UI.Fragment.Fragment.build`
   <div>
   <h3>${label}</h3>
-  ${this.groupToFragment(values, 'font-info', 'value', sanitizedPath)}
+  ${this.#groupToFragment(values, 'font-info', 'value', sanitizedPath)}
   </div>`;
     })}
   </div>`;
   }
 
-  private groupToFragment(
+  #groupToFragment(
       items: Map<string, (number | UnusedDeclaration | Protocol.CSS.CSSMedia)[]>, type: string, dataLabel: string,
       path: string = ''): UI.Fragment.Fragment {
     // Sort by number of items descending.
@@ -715,18 +703,18 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     </ul>`;
   }
 
-  private contrastIssuesToFragment(issues: Map<string, ContrastIssue[]>): UI.Fragment.Fragment {
+  #contrastIssuesToFragment(issues: Map<string, ContrastIssue[]>): UI.Fragment.Fragment {
     return UI.Fragment.Fragment.build`
   <h2>${i18nString(UIStrings.contrastIssuesS, {
       PH1: issues.size,
     })}</h2>
   <ul>
-  ${[...issues.entries()].map(([key, value]) => this.contrastIssueToFragment(key, value))}
+  ${[...issues.entries()].map(([key, value]) => this.#contrastIssueToFragment(key, value))}
   </ul>
   `;
   }
 
-  private contrastIssueToFragment(key: string, issues: ContrastIssue[]): UI.Fragment.Fragment {
+  #contrastIssueToFragment(key: string, issues: ContrastIssue[]): UI.Fragment.Fragment {
     console.assert(issues.length > 0);
 
     let minContrastIssue: ContrastIssue = issues[0];
@@ -797,7 +785,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     return blockFragment;
   }
 
-  private colorsToFragment(section: string, color: string): UI.Fragment.Fragment|undefined {
+  #colorsToFragment(section: string, color: string): UI.Fragment.Fragment|undefined {
     const blockFragment = UI.Fragment.Fragment.build`<li>
       <button data-type="color" data-color="${color}" data-section="${section}" class="block" $="color"></button>
       <div class="block-title">${color}</div>
@@ -815,7 +803,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     return blockFragment;
   }
 
-  private sortColorsByLuminance(srcColors: Map<string, Set<number>>): string[] {
+  #sortColorsByLuminance(srcColors: Map<string, Set<number>>): string[] {
     return Array.from(srcColors.keys()).sort((colA, colB) => {
       const colorA = Common.Color.Color.parse(colA);
       const colorB = Common.Color.Color.parse(colB);
@@ -827,7 +815,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
   }
 
   setOverviewData(data: OverviewData): void {
-    this.render(data);
+    this.#render(data);
   }
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -967,14 +955,15 @@ export class ElementDetailsView extends UI.Widget.Widget {
       refreshCallback: undefined,
     });
     this.#elementGrid.element.classList.add('element-grid');
-    this.#elementGrid.element.addEventListener('mouseover', this.onMouseOver.bind(this));
+    this.#elementGrid.element.addEventListener('mouseover', this.#onMouseOver.bind(this));
     this.#elementGrid.setStriped(true);
-    this.#elementGrid.addEventListener(DataGrid.DataGrid.Events.SortingChanged, this.sortMediaQueryDataGrid.bind(this));
+    this.#elementGrid.addEventListener(
+        DataGrid.DataGrid.Events.SortingChanged, this.#sortMediaQueryDataGrid.bind(this));
 
     this.#elementGrid.asWidget().show(this.element);
   }
 
-  private sortMediaQueryDataGrid(): void {
+  #sortMediaQueryDataGrid(): void {
     const sortColumnId = this.#elementGrid.sortColumnId();
     if (!sortColumnId) {
       return;
@@ -984,7 +973,7 @@ export class ElementDetailsView extends UI.Widget.Widget {
     this.#elementGrid.sortNodes(comparator, !this.#elementGrid.isSortOrderAscending());
   }
 
-  private onMouseOver(evt: Event): void {
+  #onMouseOver(evt: Event): void {
     // Traverse the event path on the grid to find the nearest element with a backend node ID attached. Use
     // that for the highlighting.
     const node = (evt.composedPath() as HTMLElement[]).find(el => el.dataset && el.dataset.backendNodeId);
@@ -1093,7 +1082,7 @@ export class ElementNode extends DataGrid.SortableDataGrid.SortableDataGridNode<
       const cell = this.createTD(columnId);
 
       if (this.data.range) {
-        const link = this.linkifyRuleLocation(
+        const link = this.#linkifyRuleLocation(
             this.#cssModel, this.#linkifier, this.data.styleSheetId,
             TextUtils.TextRange.TextRange.fromObject(this.data.range));
 
@@ -1153,7 +1142,7 @@ export class ElementNode extends DataGrid.SortableDataGrid.SortableDataGridNode<
     return super.createCell(columnId);
   }
 
-  private linkifyRuleLocation(
+  #linkifyRuleLocation(
       cssModel: SDK.CSSModel.CSSModel, linkifier: Components.Linkifier.Linkifier,
       styleSheetId: Protocol.CSS.StyleSheetId, ruleLocation: TextUtils.TextRange.TextRange): Element|undefined {
     const styleSheetHeader = cssModel.styleSheetHeaderForId(styleSheetId);

package/front_end/panels/css_overview/CSSOverviewController.ts

@@ -16,10 +16,10 @@ export class OverviewController extends Common.ObjectWrapper.ObjectWrapper<Event
 
     this.currentUrl = SDK.TargetManager.TargetManager.instance().inspectedURL();
     SDK.TargetManager.TargetManager.instance().addEventListener(
-        SDK.TargetManager.Events.InspectedURLChanged, this.checkUrlAndResetIfChanged, this);
+        SDK.TargetManager.Events.InspectedURLChanged, this.#checkUrlAndResetIfChanged, this);
   }
 
-  private checkUrlAndResetIfChanged(): void {
+  #checkUrlAndResetIfChanged(): void {
     if (this.currentUrl === SDK.TargetManager.TargetManager.instance().inspectedURL()) {
       return;
     }

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -55,13 +55,13 @@ export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManage
 
     this.#controller.addEventListener(Events.RequestOverviewStart, _event => {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.CaptureCssOverviewClicked);
-      this.startOverview();
+      this.#startOverview();
     }, this);
-    this.#controller.addEventListener(Events.OverviewCompleted, this.overviewCompleted, this);
-    this.#controller.addEventListener(Events.Reset, this.reset, this);
-    this.#controller.addEventListener(Events.RequestNodeHighlight, this.requestNodeHighlight, this);
+    this.#controller.addEventListener(Events.OverviewCompleted, this.#overviewCompleted, this);
+    this.#controller.addEventListener(Events.Reset, this.#reset, this);
+    this.#controller.addEventListener(Events.RequestNodeHighlight, this.#requestNodeHighlight, this);
 
-    this.reset();
+    this.#reset();
   }
 
   static instance(): CSSOverviewPanel {
@@ -84,14 +84,14 @@ export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManage
   targetRemoved(): void {
   }
 
-  private getModel(): CSSOverviewModel {
+  #getModel(): CSSOverviewModel {
     if (!this.#model) {
       throw new Error('Did not retrieve model information yet.');
     }
     return this.#model;
   }
 
-  private reset(): void {
+  #reset(): void {
     this.#backgroundColors = new Map();
     this.#textColors = new Map();
     this.#fillColors = new Map();
@@ -117,14 +117,14 @@ export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManage
       },
     };
     this.#textColorContrastIssues = new Map();
-    this.renderInitialView();
+    this.#renderInitialView();
   }
 
-  private requestNodeHighlight(evt: Common.EventTarget.EventTargetEvent<number>): void {
-    this.getModel().highlightNode((evt.data as Protocol.DOM.BackendNodeId));
+  #requestNodeHighlight(evt: Common.EventTarget.EventTargetEvent<number>): void {
+    this.#getModel().highlightNode((evt.data as Protocol.DOM.BackendNodeId));
   }
 
-  private renderInitialView(): void {
+  #renderInitialView(): void {
     this.#processingView.hideWidget();
     this.#completedView.hideWidget();
 
@@ -132,14 +132,14 @@ export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManage
     this.#startView.show();
   }
 
-  private renderOverviewStartedView(): void {
+  #renderOverviewStartedView(): void {
     this.#startView.hide();
     this.#completedView.hideWidget();
 
     this.#processingView.show(this.contentElement);
   }
 
-  private renderOverviewCompletedView(): void {
+  #renderOverviewCompletedView(): void {
     this.#startView.hide();
     this.#processingView.hideWidget();
 
@@ -158,10 +158,10 @@ export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManage
     });
   }
 
-  private async startOverview(): Promise<void> {
-    this.renderOverviewStartedView();
+  async #startOverview(): Promise<void> {
+    this.#renderOverviewStartedView();
 
-    const model = this.getModel();
+    const model = this.#getModel();
     const [globalStyleStats, { elementCount, backgroundColors, textColors, textColorContrastIssues, fillColors, borderColors, fontInfo, unusedDeclarations }, mediaQueries] = await Promise.all([
       model.getGlobalStylesheetStats(),
       model.getNodeStyleStats(),
@@ -211,17 +211,8 @@ export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManage
     this.#controller.dispatchEventToListeners(Events.OverviewCompleted);
   }
 
-  private getStyleValue(styles: Protocol.CSS.CSSComputedStyleProperty[], name: string): string|undefined {
-    const item = styles.filter(style => style.name === name);
-    if (!item.length) {
-      return;
-    }
-
-    return item[0].value;
-  }
-
-  private overviewCompleted(): void {
-    this.renderOverviewCompletedView();
+  #overviewCompleted(): void {
+    this.#renderOverviewCompletedView();
   }
   wasShown(): void {
     super.wasShown();

package/front_end/panels/css_overview/CSSOverviewProcessingView.ts

@@ -25,10 +25,10 @@ export class CSSOverviewProcessingView extends UI.Widget.Widget {
     super();
 
     this.#controller = controller;
-    this.render();
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     const cancelButton = UI.UIUtils.createTextButton(
         i18nString(UIStrings.cancel), () => this.#controller.dispatchEventToListeners(Events.RequestOverviewCancel), '',
         true /* primary */);