chrome-devtools-frontend 1.0.1512147 → 1.0.1513662

package/front_end/panels/console/ConsoleViewport.ts

@@ -45,7 +45,7 @@ export class ConsoleViewport {
   element: HTMLElement;
   private topGapElement: HTMLElement;
   private topGapElementActive: boolean;
-  private contentElementInternal: HTMLElement;
+  #contentElement: HTMLElement;
   private bottomGapElement: HTMLElement;
   private bottomGapElementActive: boolean;
   private provider: ConsoleViewportProvider;
@@ -63,7 +63,7 @@ export class ConsoleViewport {
     childList: boolean,
     subtree: boolean,
   };
-  private stickToBottomInternal: boolean;
+  #stickToBottom: boolean;
   private selectionIsBackward: boolean;
   private lastSelectedElement?: HTMLElement|null;
   private cachedProviderElements?: Array<ConsoleViewportElement|null>;
@@ -75,7 +75,7 @@ export class ConsoleViewport {
     this.topGapElement.style.height = '0px';
     this.topGapElement.style.color = 'transparent';
     this.topGapElementActive = false;
-    this.contentElementInternal = this.element.createChild('div');
+    this.#contentElement = this.element.createChild('div');
     this.bottomGapElement = this.element.createChild('div');
     this.bottomGapElement.style.height = '0px';
     this.bottomGapElement.style.color = 'transparent';
@@ -93,11 +93,11 @@ export class ConsoleViewport {
     this.element.addEventListener('scroll', this.onScroll.bind(this), false);
     this.element.addEventListener('copy', (this.onCopy.bind(this) as EventListener), false);
     this.element.addEventListener('dragstart', (this.onDragStart.bind(this) as (arg0: Event) => unknown), false);
-    this.contentElementInternal.addEventListener('focusin', (this.onFocusIn.bind(this) as EventListener), false);
-    this.contentElementInternal.addEventListener('focusout', (this.onFocusOut.bind(this) as EventListener), false);
-    this.contentElementInternal.addEventListener('keydown', (this.onKeyDown.bind(this) as EventListener), false);
+    this.#contentElement.addEventListener('focusin', (this.onFocusIn.bind(this) as EventListener), false);
+    this.#contentElement.addEventListener('focusout', (this.onFocusOut.bind(this) as EventListener), false);
+    this.#contentElement.addEventListener('keydown', (this.onKeyDown.bind(this) as EventListener), false);
     this.virtualSelectedIndex = -1;
-    this.contentElementInternal.tabIndex = -1;
+    this.#contentElement.tabIndex = -1;
 
     this.firstActiveIndex = -1;
     this.lastActiveIndex = -1;
@@ -113,18 +113,18 @@ export class ConsoleViewport {
     // if they change the scroll height.
     this.observer = new MutationObserver(this.refresh.bind(this));
     this.observerConfig = {childList: true, subtree: true};
-    this.stickToBottomInternal = false;
+    this.#stickToBottom = false;
     this.selectionIsBackward = false;
   }
 
   stickToBottom(): boolean {
-    return this.stickToBottomInternal;
+    return this.#stickToBottom;
   }
 
   setStickToBottom(value: boolean): void {
-    this.stickToBottomInternal = value;
-    if (this.stickToBottomInternal) {
-      this.observer.observe(this.contentElementInternal, this.observerConfig);
+    this.#stickToBottom = value;
+    if (this.#stickToBottom) {
+      this.observer.observe(this.#contentElement, this.observerConfig);
     } else {
       this.observer.disconnect();
     }
@@ -168,7 +168,7 @@ export class ConsoleViewport {
     let focusLastChild = false;
     // Make default selection when moving from external (e.g. prompt) to the container.
     if (this.virtualSelectedIndex === -1 && this.isOutsideViewport((event.relatedTarget as Element | null)) &&
-        event.target === this.contentElementInternal && this.itemCount) {
+        event.target === this.#contentElement && this.itemCount) {
       focusLastChild = true;
       this.virtualSelectedIndex = this.itemCount - 1;
 
@@ -187,7 +187,7 @@ export class ConsoleViewport {
   }
 
   private isOutsideViewport(element: Element|null): boolean {
-    return element !== null && !element.isSelfOrDescendant(this.contentElementInternal);
+    return element !== null && !element.isSelfOrDescendant(this.#contentElement);
   }
 
   private onDragStart(event: DragEvent): boolean {
@@ -242,7 +242,7 @@ export class ConsoleViewport {
     const selectedElement = this.renderedElementAt(this.virtualSelectedIndex);
     const changed = this.lastSelectedElement !== selectedElement;
     const containerHasFocus =
-        this.contentElementInternal === Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument);
+        this.#contentElement === Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument);
     if (this.lastSelectedElement && changed) {
       this.lastSelectedElement.classList.remove('console-selected');
     }
@@ -260,16 +260,16 @@ export class ConsoleViewport {
         selectedElement.focus({preventScroll: true});
       }
     }
-    if (this.itemCount && !this.contentElementInternal.hasFocus()) {
-      this.contentElementInternal.tabIndex = 0;
+    if (this.itemCount && !this.#contentElement.hasFocus()) {
+      this.#contentElement.tabIndex = 0;
     } else {
-      this.contentElementInternal.tabIndex = -1;
+      this.#contentElement.tabIndex = -1;
     }
     this.lastSelectedElement = selectedElement;
   }
 
   contentElement(): Element {
-    return this.contentElementInternal;
+    return this.#contentElement;
   }
 
   invalidate(): void {
@@ -462,8 +462,8 @@ export class ConsoleViewport {
   refresh(): void {
     this.observer.disconnect();
     this.innerRefresh();
-    if (this.stickToBottomInternal) {
-      this.observer.observe(this.contentElementInternal, this.observerConfig);
+    if (this.#stickToBottom) {
+      this.observer.observe(this.#contentElement, this.observerConfig);
     }
   }
 
@@ -477,7 +477,7 @@ export class ConsoleViewport {
         this.renderedItems[i].willHide();
       }
       this.renderedItems = [];
-      this.contentElementInternal.removeChildren();
+      this.#contentElement.removeChildren();
       this.topGapElement.style.height = '0px';
       this.bottomGapElement.style.height = '0px';
       this.firstActiveIndex = -1;
@@ -497,7 +497,7 @@ export class ConsoleViewport {
     // When the viewport is scrolled to the bottom, using the cumulative heights estimate is not
     // precise enough to determine next visible indices. This stickToBottom check avoids extra
     // calls to refresh in those cases.
-    if (this.stickToBottomInternal) {
+    if (this.#stickToBottom) {
       this.firstActiveIndex = Math.max(this.itemCount - Math.ceil(activeHeight / this.provider.minimumRowHeight()), 0);
       this.lastActiveIndex = this.itemCount - 1;
     } else {
@@ -520,16 +520,16 @@ export class ConsoleViewport {
       this.bottomGapElement.style.height = bottomGapHeight + 'px';
       this.topGapElementActive = Boolean(topGapHeight);
       this.bottomGapElementActive = Boolean(bottomGapHeight);
-      this.contentElementInternal.style.setProperty('height', '10000000px');
+      this.#contentElement.style.setProperty('height', '10000000px');
     }
 
     this.partialViewportUpdate(prepare.bind(this));
-    this.contentElementInternal.style.removeProperty('height');
+    this.#contentElement.style.removeProperty('height');
     // Should be the last call in the method as it might force layout.
     if (shouldRestoreSelection) {
       this.restoreSelection(selection);
     }
-    if (this.stickToBottomInternal) {
+    if (this.#stickToBottom) {
       this.element.scrollTop = 10000000;
     }
   }
@@ -555,7 +555,7 @@ export class ConsoleViewport {
     }
 
     const wasShown = [];
-    let anchor: (ChildNode|null) = this.contentElementInternal.firstChild;
+    let anchor: (ChildNode|null) = this.#contentElement.firstChild;
     for (const viewportElement of itemsToRender) {
       const element = viewportElement.element();
       if (element !== anchor) {
@@ -563,7 +563,7 @@ export class ConsoleViewport {
         if (shouldCallWasShown) {
           wasShown.push(viewportElement);
         }
-        this.contentElementInternal.insertBefore(element, anchor);
+        this.#contentElement.insertBefore(element, anchor);
       } else {
         anchor = anchor.nextSibling;
       }
@@ -574,7 +574,7 @@ export class ConsoleViewport {
     this.renderedItems = Array.from(itemsToRender);
 
     if (hadFocus) {
-      this.contentElementInternal.focus();
+      this.#contentElement.focus();
     }
     this.updateFocusedItem();
   }

package/front_end/panels/coverage/CoverageModel.ts

@@ -674,48 +674,48 @@ function locationCompare(a: string, b: string): number {
 }
 
 export class URLCoverageInfo extends Common.ObjectWrapper.ObjectWrapper<URLCoverageInfo.EventTypes> {
-  private readonly urlInternal: Platform.DevToolsPath.UrlString;
+  readonly #url: Platform.DevToolsPath.UrlString;
   private coverageInfoByLocation: Map<string, CoverageInfo>;
-  private sizeInternal: number;
-  private usedSizeInternal: number;
-  private typeInternal!: CoverageType;
-  private isContentScriptInternal: boolean;
+  #size: number;
+  #usedSize: number;
+  #type!: CoverageType;
+  #isContentScript: boolean;
   sourcesURLCoverageInfo = new Map<Platform.DevToolsPath.UrlString, SourceURLCoverageInfo>();
   sourceSegments: SourceSegment[]|undefined;
 
   constructor(url: Platform.DevToolsPath.UrlString) {
     super();
 
-    this.urlInternal = url;
+    this.#url = url;
     this.coverageInfoByLocation = new Map();
-    this.sizeInternal = 0;
-    this.usedSizeInternal = 0;
-    this.isContentScriptInternal = false;
+    this.#size = 0;
+    this.#usedSize = 0;
+    this.#isContentScript = false;
   }
 
   url(): Platform.DevToolsPath.UrlString {
-    return this.urlInternal;
+    return this.#url;
   }
 
   type(): CoverageType {
-    return this.typeInternal;
+    return this.#type;
   }
 
   size(): number {
-    return this.sizeInternal;
+    return this.#size;
   }
 
   usedSize(): number {
-    return this.usedSizeInternal;
+    return this.#usedSize;
   }
 
   unusedSize(): number {
-    return this.sizeInternal - this.usedSizeInternal;
+    return this.#size - this.#usedSize;
   }
 
   usedPercentage(): number {
     // Per convention, empty files are reported as 100 % uncovered
-    if (this.sizeInternal === 0) {
+    if (this.#size === 0) {
       return 0;
     }
     if (!this.unusedSize() || !this.size()) {
@@ -726,14 +726,14 @@ export class URLCoverageInfo extends Common.ObjectWrapper.ObjectWrapper<URLCover
 
   unusedPercentage(): number {
     // Per convention, empty files are reported as 100 % uncovered
-    if (this.sizeInternal === 0) {
+    if (this.#size === 0) {
       return 1;
     }
     return this.unusedSize() / this.size();
   }
 
   isContentScript(): boolean {
-    return this.isContentScriptInternal;
+    return this.#isContentScript;
   }
 
   entries(): IterableIterator<CoverageInfo> {
@@ -752,8 +752,8 @@ export class URLCoverageInfo extends Common.ObjectWrapper.ObjectWrapper<URLCover
   }
 
   addToSizes(usedSize: number, size: number): void {
-    this.usedSizeInternal += usedSize;
-    this.sizeInternal += size;
+    this.#usedSize += usedSize;
+    this.#size += size;
 
     if (usedSize !== 0 || size !== 0) {
       this.dispatchEventToListeners(URLCoverageInfo.Events.SizesChanged);
@@ -772,9 +772,9 @@ export class URLCoverageInfo extends Common.ObjectWrapper.ObjectWrapper<URLCover
 
     if ((type & CoverageType.JAVA_SCRIPT) && !this.coverageInfoByLocation.size &&
         contentProvider instanceof SDK.Script.Script) {
-      this.isContentScriptInternal = (contentProvider).isContentScript();
+      this.#isContentScript = (contentProvider).isContentScript();
     }
-    this.typeInternal |= type;
+    this.#type |= type;
 
     if (entry) {
       entry.addCoverageType(type);
@@ -783,7 +783,7 @@ export class URLCoverageInfo extends Common.ObjectWrapper.ObjectWrapper<URLCover
 
     if ((type & CoverageType.JAVA_SCRIPT) && !this.coverageInfoByLocation.size &&
         contentProvider instanceof SDK.Script.Script) {
-      this.isContentScriptInternal = (contentProvider).isContentScript();
+      this.#isContentScript = (contentProvider).isContentScript();
     }
 
     entry = new CoverageInfo(contentProvider, contentLength, lineOffset, columnOffset, type, this);

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -93,7 +93,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
     }
 
     const eventTarget = (event.target as HTMLElement);
-    let text: ''|string = (eventTarget.textContent as string);
+    let text = eventTarget.textContent;
     if (Platform.KeyboardUtilities.isEscKey(event)) {
       if (!Platform.StringUtilities.isWhitespace(text)) {
         event.consume(true);

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -11,8 +11,8 @@ import {ComputedStyleWidget} from './ComputedStyleWidget.js';
 import {StylesSidebarPane} from './StylesSidebarPane.js';
 
 export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  private nodeInternal: SDK.DOMModel.DOMNode|null;
-  private cssModelInternal: SDK.CSSModel.CSSModel|null;
+  #node: SDK.DOMModel.DOMNode|null;
+  #cssModel: SDK.CSSModel.CSSModel|null;
   private eventListeners: Common.EventTarget.EventDescriptor[];
   private frameResizedTimer?: number;
   private computedStylePromise?: Promise<ComputedStyle|null>;
@@ -20,9 +20,9 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
 
   constructor() {
     super();
-    this.cssModelInternal = null;
+    this.#cssModel = null;
     this.eventListeners = [];
-    this.nodeInternal = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
+    this.#node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
 
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.onNodeChanged, this);
     UI.Context.Context.instance().addFlavorChangeListener(
@@ -40,17 +40,17 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
   }
 
   node(): SDK.DOMModel.DOMNode|null {
-    return this.nodeInternal;
+    return this.#node;
   }
 
   cssModel(): SDK.CSSModel.CSSModel|null {
-    return this.cssModelInternal?.isEnabled() ? this.cssModelInternal : null;
+    return this.#cssModel?.isEnabled() ? this.#cssModel : null;
   }
 
   // This is a debounced method because the user might be navigated from Styles tab to Computed Style tab and vice versa.
   // For that case, we want to only run this function once.
   private evaluateTrackingComputedStyleUpdatesForNode = Common.Debouncer.debounce((): void => {
-    if (!this.nodeInternal) {
+    if (!this.#node) {
       // There isn't a node selected now, so let's stop tracking computed style updates for the previously tracked node.
       if (this.currentTrackedNodeId) {
         void this.cssModel()?.trackComputedStyleUpdatesForNode(undefined);
@@ -76,25 +76,25 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     // Either computed style widget or styles tab is visible
     // if the currently tracked node id is not the same as the selected node
     // let's start tracking the currently selected node.
-    if (this.currentTrackedNodeId !== this.nodeInternal.id) {
-      void this.cssModel()?.trackComputedStyleUpdatesForNode(this.nodeInternal.id);
-      this.currentTrackedNodeId = this.nodeInternal.id;
+    if (this.currentTrackedNodeId !== this.#node.id) {
+      void this.cssModel()?.trackComputedStyleUpdatesForNode(this.#node.id);
+      this.currentTrackedNodeId = this.#node.id;
     }
   }, 100);
 
   private onNodeChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
-    this.nodeInternal = event.data;
-    this.updateModel(this.nodeInternal ? this.nodeInternal.domModel().cssModel() : null);
+    this.#node = event.data;
+    this.updateModel(this.#node ? this.#node.domModel().cssModel() : null);
     this.onCSSModelChanged(null);
     this.evaluateTrackingComputedStyleUpdatesForNode();
   }
 
   private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
-    if (this.cssModelInternal === cssModel) {
+    if (this.#cssModel === cssModel) {
       return;
     }
     Common.EventTarget.removeEventListeners(this.eventListeners);
-    this.cssModelInternal = cssModel;
+    this.#cssModel = cssModel;
     const domModel = cssModel ? cssModel.domModel() : null;
     const resourceTreeModel = cssModel ? cssModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel) : null;
     if (cssModel && domModel && resourceTreeModel) {
@@ -123,7 +123,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     delete this.computedStylePromise;
     // If the event contains `nodeId` and that's not the same as this node's id
     // we don't emit the COMPUTED_STYLE_CHANGED event.
-    if (event?.data && 'nodeId' in event.data && event.data.nodeId !== this.nodeInternal?.id) {
+    if (event?.data && 'nodeId' in event.data && event.data.nodeId !== this.#node?.id) {
       return;
     }
 
@@ -133,9 +133,8 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
   private onDOMModelChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
     // Any attribute removal or modification can affect the styles of "related" nodes.
     const node = event.data;
-    if (!this.nodeInternal ||
-        this.nodeInternal !== node && node.parentNode !== this.nodeInternal.parentNode &&
-            !node.isAncestor(this.nodeInternal)) {
+    if (!this.#node ||
+        this.#node !== node && node.parentNode !== this.#node.parentNode && !node.isAncestor(this.#node)) {
       return;
     }
     this.onCSSModelChanged(null);

package/front_end/panels/elements/DOMPath.ts

@@ -17,7 +17,7 @@ export const cssPath = function(node: SDK.DOMModel.DOMNode, optimized?: boolean)
   }
 
   const steps = [];
-  let contextNode: (SDK.DOMModel.DOMNode|null) = (node as SDK.DOMModel.DOMNode | null);
+  let contextNode: SDK.DOMModel.DOMNode|null = node;
   while (contextNode) {
     const step = cssPathStep(contextNode, Boolean(optimized), contextNode === node);
     if (!step) {
@@ -176,7 +176,7 @@ export const xPath = function(node: SDK.DOMModel.DOMNode, optimized?: boolean):
   }
 
   const steps = [];
-  let contextNode: (SDK.DOMModel.DOMNode|null) = (node as SDK.DOMModel.DOMNode | null);
+  let contextNode: SDK.DOMModel.DOMNode|null = node;
   while (contextNode) {
     const step = xPathValue(contextNode, optimized);
     if (!step) {

package/front_end/panels/elements/ElementsPanel.ts

@@ -201,7 +201,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
                                                              SDK.TargetManager.SDKModelObserver<SDK.DOMModel.DOMModel>,
                                                              UI.View.ViewLocationResolver {
   private splitWidget: UI.SplitWidget.SplitWidget;
-  private readonly searchableViewInternal: UI.SearchableView.SearchableView;
+  readonly #searchableView: UI.SearchableView.SearchableView;
   private mainContainer: HTMLDivElement;
   private domTreeContainer: HTMLDivElement;
   private splitMode: SplitMode|null;
@@ -252,11 +252,11 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         UI.SplitWidget.Events.SIDEBAR_SIZE_CHANGED, this.updateTreeOutlineVisibleWidth.bind(this));
     this.splitWidget.show(this.element);
 
-    this.searchableViewInternal = new UI.SearchableView.SearchableView(this, null);
-    this.searchableViewInternal.setMinimalSearchQuerySize(0);
-    this.searchableViewInternal.setMinimumSize(25, 28);
-    this.searchableViewInternal.setPlaceholder(i18nString(UIStrings.findByStringSelectorOrXpath));
-    const stackElement = this.searchableViewInternal.element;
+    this.#searchableView = new UI.SearchableView.SearchableView(this, null);
+    this.#searchableView.setMinimalSearchQuerySize(0);
+    this.#searchableView.setMinimumSize(25, 28);
+    this.#searchableView.setPlaceholder(i18nString(UIStrings.findByStringSelectorOrXpath));
+    const stackElement = this.#searchableView.element;
 
     this.mainContainer = document.createElement('div');
     this.domTreeContainer = document.createElement('div');
@@ -271,7 +271,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     UI.ARIAUtils.markAsMain(this.domTreeContainer);
     UI.ARIAUtils.setLabel(this.domTreeContainer, i18nString(UIStrings.domTreeExplorer));
 
-    this.splitWidget.setMainWidget(this.searchableViewInternal);
+    this.splitWidget.setMainWidget(this.#searchableView);
     this.splitMode = null;
 
     this.mainContainer.id = 'main-content';
@@ -351,7 +351,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   private showDOMTree(): void {
-    this.splitWidget.setMainWidget(this.searchableViewInternal);
+    this.splitWidget.setMainWidget(this.#searchableView);
     const selectedNode = this.selectedDOMNode();
     if (!selectedNode) {
       return;
@@ -477,7 +477,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   override searchableView(): UI.SearchableView.SearchableView {
-    return this.searchableViewInternal;
+    return this.#searchableView;
   }
 
   override wasShown(): void {
@@ -560,7 +560,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   private documentUpdated(domModel: SDK.DOMModel.DOMModel): void {
-    this.searchableViewInternal.cancelSearch();
+    this.#searchableView.cancelSearch();
 
     if (!domModel.existingDocument()) {
       if (this.isShowing()) {
@@ -625,7 +625,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.searchConfig = undefined;
     this.hideSearchHighlights();
 
-    this.searchableViewInternal.updateSearchMatchesCount(0);
+    this.#searchableView.updateSearchMatchesCount(0);
 
     this.currentSearchResultIndex = -1;
     delete this.searchResults;
@@ -660,7 +660,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
           this.searchResults.push({domModel: domModels[i], index: j, node: undefined});
         }
       }
-      this.searchableViewInternal.updateSearchMatchesCount(this.searchResults.length);
+      this.#searchableView.updateSearchMatchesCount(this.searchResults.length);
       if (!this.searchResults.length) {
         return;
       }
@@ -725,7 +725,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
     const searchResult = searchResults[index];
 
-    this.searchableViewInternal.updateCurrentMatchIndex(index);
+    this.#searchableView.updateCurrentMatchIndex(index);
     if (searchResult.node === null) {
       return;
     }