chrome-devtools-frontend 1.0.1512349 → 1.0.1513662

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;
     }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -349,10 +349,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   private gutterContainer: HTMLElement;
   private readonly decorationsElement: HTMLElement;
   private searchQuery: string|null;
-  private expandedChildrenLimitInternal: number;
+  #expandedChildrenLimit: number;
   private readonly decorationsThrottler: Common.Throttler.Throttler;
   private inClipboard: boolean;
-  private hoveredInternal: boolean;
+  #hovered: boolean;
   private editing: EditorHandles|null;
   private htmlEditElement?: HTMLElement;
   expandAllButtonElement: UI.TreeOutline.TreeElement|null;
@@ -386,11 +386,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.decorationsElement = this.gutterContainer.createChild('div', 'hidden');
 
     this.searchQuery = null;
-    this.expandedChildrenLimitInternal = InitialChildrenLimit;
+    this.#expandedChildrenLimit = InitialChildrenLimit;
     this.decorationsThrottler = new Common.Throttler.Throttler(100);
 
     this.inClipboard = false;
-    this.hoveredInternal = false;
+    this.#hovered = false;
 
     this.editing = null;
 
@@ -503,7 +503,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   highlightSearchResults(searchQuery: string): void {
     this.searchQuery = searchQuery;
     if (!this.editing) {
-      this.highlightSearchResultsInternal();
+      this.#highlightSearchResults();
     }
   }
 
@@ -521,11 +521,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   get hovered(): boolean {
-    return this.hoveredInternal;
+    return this.#hovered;
   }
 
   set hovered(isHovered: boolean) {
-    if (this.hoveredInternal === isHovered) {
+    if (this.#hovered === isHovered) {
       return;
     }
 
@@ -536,7 +536,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       delete this.aiButtonContainer;
     }
 
-    this.hoveredInternal = isHovered;
+    this.#hovered = isHovered;
 
     if (this.listItemElement) {
       if (isHovered) {
@@ -603,11 +603,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   expandedChildrenLimit(): number {
-    return this.expandedChildrenLimitInternal;
+    return this.#expandedChildrenLimit;
   }
 
   setExpandedChildrenLimit(expandedChildrenLimit: number): void {
-    this.expandedChildrenLimitInternal = expandedChildrenLimit;
+    this.#expandedChildrenLimit = expandedChildrenLimit;
   }
 
   createSlotLink(nodeShortcut: SDK.DOMModel.DOMNodeShortcut|null): void {
@@ -691,7 +691,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   override onattach(): void {
-    if (this.hoveredInternal) {
+    if (this.#hovered) {
       this.createSelection();
       this.listItemElement.classList.add('hovered');
     }
@@ -1752,7 +1752,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       this.#applyIssueStyleAndTooltip(issue);
     }
 
-    this.highlightSearchResultsInternal();
+    this.#highlightSearchResults();
   }
 
   private computeLeftIndent(): number {
@@ -1780,10 +1780,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    void this.decorationsThrottler.schedule(this.updateDecorationsInternal.bind(this));
+    void this.decorationsThrottler.schedule(this.#updateDecorations.bind(this));
   }
 
-  private updateDecorationsInternal(): Promise<void> {
+  #updateDecorations(): Promise<void> {
     if (!this.treeOutline) {
       return Promise.resolve();
     }
@@ -2121,7 +2121,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const node = this.nodeInternal;
     const titleDOM = document.createDocumentFragment();
     const updateSearchHighlight = (): void => {
-      this.highlightSearchResultsInternal();
+      this.#highlightSearchResults();
     };
 
     switch (node.nodeType()) {
@@ -2387,7 +2387,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(lines.join('\n'));
   }
 
-  private highlightSearchResultsInternal(): void {
+  #highlightSearchResults(): void {
     this.hideSearchHighlights();
 
     if (!this.searchQuery) {
@@ -2509,10 +2509,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   private updateAdorners(context: OpeningTagContext): void {
-    void context.adornersThrottler.schedule(this.updateAdornersInternal.bind(null, context));
+    void context.adornersThrottler.schedule(this.#updateAdorners.bind(null, context));
   }
 
-  private updateAdornersInternal(context: OpeningTagContext): Promise<void> {
+  #updateAdorners(context: OpeningTagContext): Promise<void> {
     const adornerContainer = context.adornerContainer;
     if (!adornerContainer) {
       return Promise.resolve();

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -36,7 +36,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Elements from '../../models/elements/elements.js';
@@ -466,10 +465,8 @@ export class ElementsTreeOutline extends
   constructor(omitRootDOMNode?: boolean, selectEnabled?: boolean, hideGutter?: boolean) {
     super();
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HIGHLIGHT_ERRORS_ELEMENTS_PANEL)) {
-      this.#issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
-      this.#issuesManager.addEventListener(IssuesManager.IssuesManager.Events.ISSUE_ADDED, this.#onIssueAdded, this);
-    }
+    this.#issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
+    this.#issuesManager.addEventListener(IssuesManager.IssuesManager.Events.ISSUE_ADDED, this.#onIssueAdded, this);
 
     this.treeElementByNode = new WeakMap();
     const shadowContainer = document.createElement('div');
@@ -541,48 +538,46 @@ export class ElementsTreeOutline extends
     this.showHTMLCommentsSetting = Common.Settings.Settings.instance().moduleSetting('show-html-comments');
     this.showHTMLCommentsSetting.addChangeListener(this.onShowHTMLCommentsChange.bind(this));
     this.setUseLightSelectionColor(true);
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HIGHLIGHT_ERRORS_ELEMENTS_PANEL)) {
-      // TODO(changhaohan): refactor the popover to use tooltip component.
-      this.#popupHelper = new UI.PopoverHelper.PopoverHelper(this.elementInternal, event => {
-        const hoveredNode = event.composedPath()[0] as Element;
-        if (!hoveredNode?.matches('.violating-element')) {
-          return null;
-        }
+    // TODO(changhaohan): refactor the popover to use tooltip component.
+    this.#popupHelper = new UI.PopoverHelper.PopoverHelper(this.elementInternal, event => {
+      const hoveredNode = event.composedPath()[0] as Element;
+      if (!hoveredNode?.matches('.violating-element')) {
+        return null;
+      }
 
-        const issues = this.#nodeElementToIssues.get(hoveredNode);
-        if (!issues) {
-          return null;
-        }
+      const issues = this.#nodeElementToIssues.get(hoveredNode);
+      if (!issues) {
+        return null;
+      }
 
-        return {
-          box: hoveredNode.boxInWindow(),
-          show: async (popover: UI.GlassPane.GlassPane) => {
-            popover.setIgnoreLeftMargin(true);
-            // clang-format off
-            render(html`
-              <div class="squiggles-content">
-                ${issues.map(issue => {
-                  const elementIssueDetails = getElementIssueDetails(issue);
-                  if (!elementIssueDetails) {
-                    // This shouldn't happen, but add this if check to pass ts check.
-                    return nothing;
-                  }
-                  const issueKindIconName = IssueCounter.IssueCounter.getIssueKindIconName(issue.getKind());
-                  const openIssueEvent = (): Promise<void> => Common.Revealer.reveal(issue);
-                  return html`
-                    <div class="squiggles-content-item">
-                    <devtools-icon .name=${issueKindIconName} @click=${openIssueEvent}></devtools-icon>
-                    <x-link class="link" @click=${openIssueEvent}>${i18nString(UIStrings.viewIssue)}</x-link>
-                    <span>${elementIssueDetails.tooltip}</span>
-                    </div>`;})}
-              </div>`, popover.contentElement);
-            // clang-format on
-            return true;
-          },
-        };
-      }, 'elements.issue');
-      this.#popupHelper.setTimeout(300);
-    }
+      return {
+        box: hoveredNode.boxInWindow(),
+        show: async (popover: UI.GlassPane.GlassPane) => {
+          popover.setIgnoreLeftMargin(true);
+          // clang-format off
+          render(html`
+            <div class="squiggles-content">
+              ${issues.map(issue => {
+                const elementIssueDetails = getElementIssueDetails(issue);
+                if (!elementIssueDetails) {
+                  // This shouldn't happen, but add this if check to pass ts check.
+                  return nothing;
+                }
+                const issueKindIconName = IssueCounter.IssueCounter.getIssueKindIconName(issue.getKind());
+                const openIssueEvent = (): Promise<void> => Common.Revealer.reveal(issue);
+                return html`
+                  <div class="squiggles-content-item">
+                  <devtools-icon .name=${issueKindIconName} @click=${openIssueEvent}></devtools-icon>
+                  <x-link class="link" @click=${openIssueEvent}>${i18nString(UIStrings.viewIssue)}</x-link>
+                  <span>${elementIssueDetails.tooltip}</span>
+                  </div>`;})}
+            </div>`, popover.contentElement);
+          // clang-format on
+          return true;
+        },
+      };
+    }, 'elements.issue');
+    this.#popupHelper.setTimeout(300);
   }
 
   static forDOMModel(domModel: SDK.DOMModel.DOMModel): ElementsTreeOutline|null {
@@ -1527,9 +1522,7 @@ export class ElementsTreeOutline extends
     this.reset();
     if (domModel.existingDocument()) {
       this.rootDOMNode = domModel.existingDocument();
-      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HIGHLIGHT_ERRORS_ELEMENTS_PANEL)) {
-        this.#addAllElementIssues();
-      }
+      this.#addAllElementIssues();
     }
   }
 

package/front_end/panels/elements/ShortcutTreeElement.ts

@@ -56,7 +56,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
   private readonly nodeShortcut: SDK.DOMModel.DOMNodeShortcut;
-  private hoveredInternal?: boolean;
+  #hovered?: boolean;
   constructor(nodeShortcut: SDK.DOMModel.DOMNodeShortcut) {
     super('');
     this.listItemElement.createChild('div', 'selection fill');
@@ -107,14 +107,14 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   get hovered(): boolean {
-    return Boolean(this.hoveredInternal);
+    return Boolean(this.#hovered);
   }
 
   set hovered(x: boolean) {
-    if (this.hoveredInternal === x) {
+    if (this.#hovered === x) {
       return;
     }
-    this.hoveredInternal = x;
+    this.#hovered = x;
     this.listItemElement.classList.toggle('hovered', x);
   }
 

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -148,7 +148,7 @@ export class StylePropertiesSection {
   navigable: boolean|null|undefined;
   protected readonly selectorRefElement: HTMLElement;
   private hoverableSelectorsMode: boolean;
-  private isHiddenInternal: boolean;
+  #isHidden: boolean;
   protected customPopulateCallback: () => void;
 
   nestingLevel = 0;
@@ -317,7 +317,7 @@ export class StylePropertiesSection {
       this.propertiesTreeOutline.element.classList.add('read-only');
     }
     this.hoverableSelectorsMode = false;
-    this.isHiddenInternal = false;
+    this.#isHidden = false;
     this.markSelectorMatches();
     this.onpopulate();
   }
@@ -1132,7 +1132,7 @@ export class StylePropertiesSection {
 
     const regex = this.parentPane.filterRegex();
     const hideRule = !hasMatchingChild && regex !== null && !regex.test(this.element.deepTextContent());
-    this.isHiddenInternal = hideRule;
+    this.#isHidden = hideRule;
     this.element.classList.toggle('hidden', hideRule);
     if (!hideRule && this.styleInternal.parentRule) {
       this.markSelectorHighlights();
@@ -1141,7 +1141,7 @@ export class StylePropertiesSection {
   }
 
   isHidden(): boolean {
-    return this.isHiddenInternal;
+    return this.#isHidden;
   }
 
   markSelectorMatches(): void {