chrome-devtools-frontend 1.0.1512349 → 1.0.1513662

package/front_end/panels/lighthouse/LighthouseReportSelector.ts

@@ -23,26 +23,26 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class ReportSelector {
   private readonly renderNewLighthouseView: () => void;
   private newLighthouseItem: HTMLOptionElement;
-  private readonly comboBoxInternal: UI.Toolbar.ToolbarComboBox;
+  readonly #comboBox: UI.Toolbar.ToolbarComboBox;
   private readonly itemByOptionElement: Map<Element, Item>;
 
   constructor(renderNewLighthouseView: () => void) {
     this.renderNewLighthouseView = renderNewLighthouseView;
     this.newLighthouseItem = document.createElement('option');
-    this.comboBoxInternal = new UI.Toolbar.ToolbarComboBox(
+    this.#comboBox = new UI.Toolbar.ToolbarComboBox(
         this.handleChange.bind(this), i18nString(UIStrings.reports), 'lighthouse-report');
     this.itemByOptionElement = new Map();
     this.setEmptyState();
   }
 
   private setEmptyState(): void {
-    this.comboBoxInternal.removeOptions();
+    this.#comboBox.removeOptions();
 
-    this.comboBoxInternal.setEnabled(false);
+    this.#comboBox.setEnabled(false);
     this.newLighthouseItem = document.createElement('option');
     this.newLighthouseItem.label = i18nString(UIStrings.newReport);
-    this.comboBoxInternal.addOption(this.newLighthouseItem);
-    this.comboBoxInternal.select(this.newLighthouseItem);
+    this.#comboBox.addOption(this.newLighthouseItem);
+    this.#comboBox.select(this.newLighthouseItem);
   }
 
   private handleChange(_event: Event): void {
@@ -55,7 +55,7 @@ export class ReportSelector {
   }
 
   private selectedItem(): Item {
-    const option = this.comboBoxInternal.selectedOption();
+    const option = this.#comboBox.selectedOption();
     return this.itemByOptionElement.get(option as Element) as Item;
   }
 
@@ -64,22 +64,22 @@ export class ReportSelector {
   }
 
   comboBox(): UI.Toolbar.ToolbarComboBox {
-    return this.comboBoxInternal;
+    return this.#comboBox;
   }
 
   prepend(item: Item): void {
     const optionEl = item.optionElement();
-    const selectEl = this.comboBoxInternal.element;
+    const selectEl = this.#comboBox.element;
 
     this.itemByOptionElement.set(optionEl, item);
     selectEl.insertBefore(optionEl, selectEl.firstElementChild);
-    this.comboBoxInternal.setEnabled(true);
-    this.comboBoxInternal.select(optionEl);
+    this.#comboBox.setEnabled(true);
+    this.#comboBox.select(optionEl);
     item.select();
   }
 
   clearAll(): void {
-    for (const elem of this.comboBoxInternal.options()) {
+    for (const elem of this.#comboBox.options()) {
       if (elem === this.newLighthouseItem) {
         continue;
       }
@@ -92,7 +92,7 @@ export class ReportSelector {
   }
 
   selectNewReport(): void {
-    this.comboBoxInternal.select(this.newLighthouseItem);
+    this.#comboBox.select(this.newLighthouseItem);
   }
 }
 

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -57,7 +57,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class StartView extends UI.Widget.Widget {
   private controller: LighthouseController;
   private panel: LighthousePanel;
-  private readonly settingsToolbarInternal: UI.Toolbar.Toolbar;
+  readonly #settingsToolbar: UI.Toolbar.Toolbar;
   private startButton!: Buttons.Button.Button;
   private helpText?: Element;
   private warningText?: Element;
@@ -71,8 +71,8 @@ export class StartView extends UI.Widget.Widget {
 
     this.controller = controller;
     this.panel = panel;
-    this.settingsToolbarInternal = document.createElement('devtools-toolbar');
-    this.settingsToolbarInternal.classList.add('lighthouse-settings-toolbar');
+    this.#settingsToolbar = document.createElement('devtools-toolbar');
+    this.#settingsToolbar.classList.add('lighthouse-settings-toolbar');
     this.render();
   }
 
@@ -169,9 +169,9 @@ export class StartView extends UI.Widget.Widget {
   }
 
   private render(): void {
-    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear-storage', this.settingsToolbarInternal);
-    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.enable-sampling', this.settingsToolbarInternal);
-    this.populateRuntimeSettingAsToolbarDropdown('lighthouse.throttling', this.settingsToolbarInternal);
+    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear-storage', this.#settingsToolbar);
+    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.enable-sampling', this.#settingsToolbar);
+    this.populateRuntimeSettingAsToolbarDropdown('lighthouse.throttling', this.#settingsToolbar);
 
     const {mode} = this.controller.getFlags();
     this.populateStartButton(mode);
@@ -312,6 +312,6 @@ export class StartView extends UI.Widget.Widget {
   }
 
   settingsToolbar(): UI.Toolbar.Toolbar {
-    return this.settingsToolbarInternal;
+    return this.#settingsToolbar;
   }
 }

package/front_end/panels/media/PlayerMessagesView.ts

@@ -99,7 +99,7 @@ class MessageLevelSelector implements UI.SoftDropDown.Delegate<SelectableLevel>
   private readonly itemMap: Map<number, SelectableLevel>;
   private hiddenLevels: string[];
   private bitFieldValue: MessageLevelBitfield;
-  private readonly defaultTitleInternal: Common.UIString.LocalizedString;
+  readonly #defaultTitle: Common.UIString.LocalizedString;
   private readonly customTitle: Common.UIString.LocalizedString;
   private readonly allTitle: Common.UIString.LocalizedString;
   elementsForItems: WeakMap<SelectableLevel, HTMLElement>;
@@ -113,7 +113,7 @@ class MessageLevelSelector implements UI.SoftDropDown.Delegate<SelectableLevel>
 
     this.bitFieldValue = MessageLevelBitfield.DEFAULT;
 
-    this.defaultTitleInternal = i18nString(UIStrings.default);
+    this.#defaultTitle = i18nString(UIStrings.default);
     this.customTitle = i18nString(UIStrings.custom);
     this.allTitle = i18nString(UIStrings.all);
 
@@ -121,7 +121,7 @@ class MessageLevelSelector implements UI.SoftDropDown.Delegate<SelectableLevel>
   }
 
   defaultTitle(): Common.UIString.LocalizedString {
-    return this.defaultTitleInternal;
+    return this.#defaultTitle;
   }
 
   setDefault(dropdown: UI.SoftDropDown.SoftDropDown<SelectableLevel>): void {
@@ -130,7 +130,7 @@ class MessageLevelSelector implements UI.SoftDropDown.Delegate<SelectableLevel>
 
   populate(): void {
     this.items.insert(this.items.length, {
-      title: this.defaultTitleInternal,
+      title: this.#defaultTitle,
       overwrite: true,
       stringValue: '',
       value: MessageLevelBitfield.DEFAULT,
@@ -205,7 +205,7 @@ class MessageLevelSelector implements UI.SoftDropDown.Delegate<SelectableLevel>
     }
 
     if (this.bitFieldValue === MessageLevelBitfield.DEFAULT) {
-      return this.defaultTitleInternal;
+      return this.#defaultTitle;
     }
 
     if (this.bitFieldValue === MessageLevelBitfield.ALL) {

package/front_end/panels/media/TickingFlameChart.ts

@@ -65,10 +65,10 @@ export class Event {
   private readonly setComplete: (arg0: number) => void;
   private readonly updateMaxTime: (arg0: number) => void;
   private selfIndex: number;
-  private liveInternal: boolean;
+  #live: boolean;
   title: string;
-  private colorInternal: string;
-  private fontColorInternal: string;
+  #color: string;
+  #fontColor: string;
 
   constructor(
       timelineData: PerfUI.FlameChart.FlameChartTimelineData, eventHandlers: EventHandlers,
@@ -82,7 +82,7 @@ export class Event {
 
     // This is the index in the timelineData arrays we should be writing to.
     this.selfIndex = this.timelineData.entryLevels.length;
-    this.liveInternal = false;
+    this.#live = false;
 
     // Can't use the dict||or||default syntax, since NaN is a valid expected duration.
     const duration = eventProperties['duration'] === undefined ? 0 : eventProperties['duration'];
@@ -97,8 +97,8 @@ export class Event {
     }
 
     this.title = eventProperties['name'] || '';
-    this.colorInternal = eventProperties['color'] || HotColorScheme[0];
-    this.fontColorInternal = calculateFontColor(this.colorInternal);
+    this.#color = eventProperties['color'] || HotColorScheme[0];
+    this.#fontColor = calculateFontColor(this.#color);
   }
 
   /**
@@ -109,7 +109,7 @@ export class Event {
     htmlElement.createChild('br');
 
     const startTimeReadable = formatMillisecondsToSeconds(this.startTime, 2);
-    if (this.liveInternal) {
+    if (this.#live) {
       htmlElement.createChild('span').textContent = `Duration: ${startTimeReadable} - LIVE!`;
     } else if (!isNaN(this.duration)) {
       const durationReadable = formatMillisecondsToSeconds(this.duration + this.startTime, 2);
@@ -128,9 +128,9 @@ export class Event {
     // Setting end time to -1 signals that an event becomes live
     if (time === -1) {
       this.timelineData.entryTotalTimes[this.selfIndex] = this.setLive(this.selfIndex);
-      this.liveInternal = true;
+      this.#live = true;
     } else {
-      this.liveInternal = false;
+      this.#live = false;
       const duration = time - this.timelineData.entryStartTimes[this.selfIndex];
       this.timelineData.entryTotalTimes[this.selfIndex] = duration;
       this.setComplete(this.selfIndex);
@@ -147,16 +147,16 @@ export class Event {
   }
 
   set color(color: string) {
-    this.colorInternal = color;
-    this.fontColorInternal = calculateFontColor(this.colorInternal);
+    this.#color = color;
+    this.#fontColor = calculateFontColor(this.#color);
   }
 
   get color(): string {
-    return this.colorInternal;
+    return this.#color;
   }
 
   get fontColor(): string {
-    return this.fontColorInternal;
+    return this.#fontColor;
   }
 
   get startTime(): number {
@@ -169,14 +169,14 @@ export class Event {
   }
 
   get live(): boolean {
-    return this.liveInternal;
+    return this.#live;
   }
 }
 
 export class TickingFlameChart extends UI.Widget.VBox {
   private intervalTimer: number;
   private lastTimestamp: number;
-  private canTickInternal: boolean;
+  #canTick: boolean;
   private ticking: boolean;
   private isShown: boolean;
   private readonly bounds: Bounds;
@@ -192,7 +192,7 @@ export class TickingFlameChart extends UI.Widget.VBox {
     // set to update once per second _while the tab is active_
     this.intervalTimer = 0;
     this.lastTimestamp = 0;
-    this.canTickInternal = true;
+    this.#canTick = true;
     this.ticking = false;
     this.isShown = false;
 
@@ -289,13 +289,13 @@ export class TickingFlameChart extends UI.Widget.VBox {
 
   override wasShown(): void {
     this.isShown = true;
-    if (this.canTickInternal && !this.ticking) {
+    if (this.#canTick && !this.ticking) {
       this.start();
     }
   }
 
   set canTick(allowed: boolean) {
-    this.canTickInternal = allowed;
+    this.#canTick = allowed;
     if (this.ticking && !allowed) {
       this.stop();
     }
@@ -357,7 +357,7 @@ class TickingFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataP
   private bounds: Bounds;
   private readonly liveEvents: Set<number>;
   private eventMap: Map<number, Event>;
-  private readonly timelineDataInternal: PerfUI.FlameChart.FlameChartTimelineData;
+  readonly #timelineData: PerfUI.FlameChart.FlameChartTimelineData;
   private maxLevel: number;
 
   constructor(initialBounds: Bounds, updateMaxTime: (arg0: number) => void) {
@@ -375,7 +375,7 @@ class TickingFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataP
 
     // Contains the numerical indices. This is passed as a reference to the events
     // so that they can update it when they change.
-    this.timelineDataInternal = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
+    this.#timelineData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
 
     // The current sum of all group heights.
     this.maxLevel = 0;
@@ -389,7 +389,7 @@ class TickingFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataP
    * Add a group with |name| that can contain |depth| different tracks.
    */
   addGroup(name: Common.UIString.LocalizedString, depth: number): void {
-    if (this.timelineDataInternal.groups) {
+    if (this.#timelineData.groups) {
       const newGroup = {
         name,
         startLevel: this.maxLevel,
@@ -398,7 +398,7 @@ class TickingFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataP
         style: DefaultStyle(),
         track: null,
       };
-      this.timelineDataInternal.groups.push(newGroup);
+      this.#timelineData.groups.push(newGroup);
       ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
         newGroup.style.color = getGroupDefaultTextColor();
       });
@@ -416,7 +416,7 @@ class TickingFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataP
     }
 
     const event = new Event(
-        this.timelineDataInternal, {
+        this.#timelineData, {
           setLive: this.setLive.bind(this),
           setComplete: this.setComplete.bind(this),
           updateMaxTime: this.updateMaxTimeHandle,
@@ -449,7 +449,7 @@ class TickingFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataP
   }
 
   timelineData(): PerfUI.FlameChart.FlameChartTimelineData {
-    return this.timelineDataInternal;
+    return this.#timelineData;
   }
 
   /**

package/front_end/panels/media/TickingFlameChartHelpers.ts

@@ -13,39 +13,39 @@ export function formatMillisecondsToSeconds(ms: number, decimalPlaces: number):
  * kept in a separate file for unit testing.
  */
 export class Bounds {
-  private minInternal: number;
-  private maxInternal: number;
-  private lowInternal: number;
-  private highInternal: number;
+  #min: number;
+  #max: number;
+  #low: number;
+  #high: number;
   private readonly maxRange: number;
   private readonly minRange: number;
   constructor(initialLow: number, initialHigh: number, maxRange: number, minRange: number) {
-    this.minInternal = initialLow;
-    this.maxInternal = initialHigh;
-    this.lowInternal = this.minInternal;
-    this.highInternal = this.maxInternal;
+    this.#min = initialLow;
+    this.#max = initialHigh;
+    this.#low = this.#min;
+    this.#high = this.#max;
     this.maxRange = maxRange;
     this.minRange = minRange;
   }
 
   get low(): number {
-    return this.lowInternal;
+    return this.#low;
   }
 
   get high(): number {
-    return this.highInternal;
+    return this.#high;
   }
 
   get min(): number {
-    return this.minInternal;
+    return this.#min;
   }
 
   get max(): number {
-    return this.maxInternal;
+    return this.#max;
   }
 
   get range(): number {
-    return this.highInternal - this.lowInternal;
+    return this.#high - this.#low;
   }
 
   private reassertBounds(): void {
@@ -55,18 +55,18 @@ export class Bounds {
       if (this.range < this.minRange) {
         needsAdjustment = true;
         const delta = (this.minRange - this.range) / 2;
-        this.highInternal += delta;
-        this.lowInternal -= delta;
+        this.#high += delta;
+        this.#low -= delta;
       }
 
-      if (this.lowInternal < this.minInternal) {
+      if (this.#low < this.#min) {
         needsAdjustment = true;
-        this.lowInternal = this.minInternal;
+        this.#low = this.#min;
       }
 
-      if (this.highInternal > this.maxInternal) {
+      if (this.#high > this.#max) {
         needsAdjustment = true;
-        this.highInternal = this.maxInternal;
+        this.#high = this.#max;
       }
     }
   }
@@ -75,12 +75,12 @@ export class Bounds {
    * zoom out |amount| ticks at position [0, 1] along the current range of the timeline.
    */
   zoomOut(amount: number, position: number): void {
-    const range = this.highInternal - this.lowInternal;
+    const range = this.#high - this.#low;
     const growSize = range * Math.pow(1.1, amount) - range;
     const lowEnd = growSize * position;
     const highEnd = growSize - lowEnd;
-    this.lowInternal -= lowEnd;
-    this.highInternal += highEnd;
+    this.#low -= lowEnd;
+    this.#high += highEnd;
     this.reassertBounds();
   }
 
@@ -88,7 +88,7 @@ export class Bounds {
    * zoom in |amount| ticks at position [0, 1] along the current range of the timeline.
    */
   zoomIn(amount: number, position: number): void {
-    const range = this.highInternal - this.lowInternal;
+    const range = this.#high - this.#low;
     if (this.range <= this.minRange) {
       return;
     }
@@ -96,8 +96,8 @@ export class Bounds {
     const shrinkSize = range - range / Math.pow(1.1, amount);
     const lowEnd = shrinkSize * position;
     const highEnd = shrinkSize - lowEnd;
-    this.lowInternal += lowEnd;
-    this.highInternal -= highEnd;
+    this.#low += lowEnd;
+    this.#high -= highEnd;
     this.reassertBounds();
   }
 
@@ -105,13 +105,13 @@ export class Bounds {
    * Add Xms to the max value, and scroll the timeline forward if the end is in sight.
    */
   addMax(amount: number): void {
-    const range = this.highInternal - this.lowInternal;
-    const isAtHighEnd = this.highInternal === this.maxInternal;
-    const isZoomedOut = this.lowInternal === this.minInternal || range >= this.maxRange;
+    const range = this.#high - this.#low;
+    const isAtHighEnd = this.#high === this.#max;
+    const isZoomedOut = this.#low === this.#min || range >= this.maxRange;
 
-    this.maxInternal += amount;
+    this.#max += amount;
     if (isAtHighEnd && isZoomedOut) {
-      this.highInternal = this.maxInternal;
+      this.#high = this.#max;
     }
     this.reassertBounds();
   }
@@ -120,8 +120,8 @@ export class Bounds {
    * Attempt to push the maximum time up to |time| ms.
    */
   pushMaxAtLeastTo(time: number): boolean {
-    if (this.maxInternal < time) {
-      this.addMax(time - this.maxInternal);
+    if (this.#max < time) {
+      this.addMax(time - this.#max);
       return true;
     }
     return false;

package/front_end/panels/network/NetworkItemView.ts

@@ -288,7 +288,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     // the selected tab in the mean time. Show the previously selected tab in that
     // case instead, by simply doing nothing.
     if (this.#initialTab) {
-      this.selectTabInternal(this.#initialTab);
+      this.#selectTab(this.#initialTab);
       this.#initialTab = undefined;
     }
   }
@@ -349,7 +349,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     }
   }
 
-  private selectTabInternal(tabId: NetworkForward.UIRequestLocation.UIRequestTabs): void {
+  #selectTab(tabId: NetworkForward.UIRequestLocation.UIRequestTabs): void {
     if (!this.selectTab(tabId)) {
       // maybeAppendPayloadPanel might cause payload tab to appear asynchronously, so
       // it makes sense to retry on the next tick
@@ -373,12 +373,12 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   }
 
   async revealResponseBody(position: SourceFrame.SourceFrame.RevealPosition): Promise<void> {
-    this.selectTabInternal(NetworkForward.UIRequestLocation.UIRequestTabs.RESPONSE);
+    this.#selectTab(NetworkForward.UIRequestLocation.UIRequestTabs.RESPONSE);
     await this.#responseView?.revealPosition(position);
   }
 
   revealHeader(section: NetworkForward.UIRequestLocation.UIHeaderSection, header: string|undefined): void {
-    this.selectTabInternal(NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
+    this.#selectTab(NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
     this.#headersViewComponent?.revealHeader(section, header);
   }