chrome-devtools-frontend 1.0.1515446 → 1.0.1515988

package/front_end/third_party/third-party-web/README.chromium

@@ -3,6 +3,7 @@ Short Name: third-party-web
 URL: https://github.com/patrickhulce/third-party-web
 Version: 0.26.2
 Revision: d60863a2ea913ed26ae0446296a0cb1cc6c71291
+Update Mechanism: Manual
 License: MIT
 License File: LICENSE
 Security Critical: no

package/front_end/third_party/vscode.web-custom-data/README.chromium

@@ -5,6 +5,7 @@ Version: 0.5.2
 License: MIT
 License File: package/LICENSE.md
 Revision: 79f0e53d9ade00eb00eda53016edb637a809ec1f
+Update Mechanism: Manual
 Security Critical: no
 Shipped: yes
 

package/front_end/third_party/wasmparser/README.chromium

@@ -3,6 +3,7 @@ Short Name: wasmparser
 URL: https://github.com/wasdk/wasmparser
 Version: 5.4.0
 Revision: e0a3281fdd678e6e3d5624b6d939bdf7c3d215ad
+Update Mechanism: Manual
 License: Apache-2.0
 License File: package/LICENSE
 Security Critical: no

package/front_end/third_party/web-vitals/README.chromium

@@ -5,6 +5,7 @@ Version: 4.2.4
 License: Apache-2.0
 License File: package/LICENSE
 Revision: 3d2b3dc8576cc003618952fa39902fab764a53e2
+Update Mechanism: Manual
 Security Critical: no
 Shipped: yes
 

package/front_end/ui/components/text_editor/config.ts

@@ -132,7 +132,6 @@ function moveCompletionSelectionIfNotConservative(
     if (CM.completionStatus(view.state) !== 'active') {
       return false;
     }
-    view.dispatch({effects: setAiAutoCompleteSuggestion.of(null)});
     if (view.state.field(conservativeCompletion, false)) {
       view.dispatch({effects: disableConservativeCompletion.of(null)});
       announceSelectedCompletionInfo(view);
@@ -149,7 +148,6 @@ function moveCompletionSelectionBackwardWrapper(): ((view: CM.EditorView) => boo
     if (CM.completionStatus(view.state) !== 'active') {
       return false;
     }
-    view.dispatch({effects: setAiAutoCompleteSuggestion.of(null)});
     CM.moveCompletionSelection(false)(view);
     announceSelectedCompletionInfo(view);
     return true;
@@ -523,11 +521,11 @@ export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggesti
     const {head} = tr.state.selection.main;
 
     // If a change happened before the position from which suggestion was generated, set to null.
-    if (tr.changes.touchesRange(0, from - 1) || head < from) {
+    if (head < from) {
       return null;
     }
 
-    // Check if what's typed is a prefix of the suggestion.
+    // Check if what's typed after the AI suggestion is a prefix of the AI suggestion.
     const typedText = tr.state.doc.sliceString(from, head);
     return value.text.startsWith(typedText) ? value : null;
   },
@@ -539,6 +537,11 @@ export function hasActiveAiSuggestion(state: CM.EditorState): boolean {
 
 export function acceptAiAutoCompleteSuggestion(view: CM.EditorView):
     {accepted: boolean, suggestion?: ActiveSuggestion} {
+  const selectedCompletion = CM.selectedCompletion(view.state);
+  if (selectedCompletion) {
+    return {accepted: false};
+  }
+
   const suggestion = view.state.field(aiAutoCompleteSuggestionState);
   if (!suggestion) {
     return {accepted: false};
@@ -568,23 +571,70 @@ export const aiAutoCompleteSuggestion: CM.Extension = [
         decorations: CM.DecorationSet = CM.Decoration.none;
 
         update(update: CM.ViewUpdate): void {
+          // Hide decorations if there is no active AI suggestion.
           const activeSuggestion = update.state.field(aiAutoCompleteSuggestionState);
-          const {head, empty} = update.state.selection.main;
-          let hint = '';
-          if (activeSuggestion && empty && head >= activeSuggestion.from) {
-            const {text, from} = activeSuggestion;
-            const typedText = update.state.doc.sliceString(from, head);
-            if (text.startsWith(typedText)) {
-              hint = text.slice(typedText.length);
-            }
+          if (!activeSuggestion) {
+            this.decorations = CM.Decoration.none;
+            return;
           }
 
-          if (!hint) {
+          // Hide AI suggestion while the user is interacting with the traditional
+          // autocomplete menu to avoid conflicting suggestions.
+          if (CM.completionStatus(update.view.state) === 'pending') {
             this.decorations = CM.Decoration.none;
-          } else {
-            this.decorations =
-                CM.Decoration.set([CM.Decoration.widget({widget: new CompletionHint(hint), side: 1}).range(head)]);
+            return;
           }
+
+          // Hide AI suggestion if the user has selected an item from the
+          // traditional autocomplete menu that is not the first one.
+          const selectedCompletionIndex = CM.selectedCompletionIndex(update.state);
+          if (selectedCompletionIndex && selectedCompletionIndex > 0) {
+            this.decorations = CM.Decoration.none;
+            return;
+          }
+
+          const {head} = update.state.selection.main;
+          const selectedCompletion = CM.selectedCompletion(update.state);
+          const additionallyTypedText = update.state.doc.sliceString(activeSuggestion.from, head);
+          // The user might have typed text after the suggestion is triggered.
+          // If the suggestion no longer starts with the typed text, hide it.
+          if (!activeSuggestion.text.startsWith(additionallyTypedText)) {
+            this.decorations = CM.Decoration.none;
+            return;
+          }
+
+          let ghostText = activeSuggestion.text.slice(additionallyTypedText.length);
+          if (selectedCompletion) {
+            // If the user typed the full selected completion, then we don't check for overlap.
+            // (e.g. the user wrote `flex`, traditional suggestion is `flex` and the AI autocompletion is
+            // `;\njustify-content: center`. Then, we want to show the AI completion)
+            const endsWithCompleteSelectedCompletion =
+                update.state.doc.sliceString(head - selectedCompletion.label.length, head) === selectedCompletion.label;
+            // If a traditional autocomplete menu is shown, the AI suggestion is only
+            // shown if it builds upon the currently selected item. If there is no
+            // overlap, we hide the AI suggestion. For example, for the text `console`
+            // if the traditional autocomplete suggests `log` and the AI
+            // suggests `warn`, there is no overlap and the AI suggestion is hidden.
+            if (!endsWithCompleteSelectedCompletion &&
+                !TextUtils.TextUtils.getOverlap(selectedCompletion.label, ghostText)) {
+              this.decorations = CM.Decoration.none;
+              return;
+            }
+          }
+
+          // When `conservativeCompletion` is disabled in Console, the editor shows a ghost
+          // text for the first item in the traditional autocomplete menu and this ghost text
+          // is reflected in `currentHint`. In this case, we need to remove
+          // the overlapping part from our AI suggestion's ghost text to avoid
+          // showing a double suggestion.
+          const currentMenuHint = update.view.plugin(showCompletionHint)?.currentHint;
+          const conservativeCompletionEnabled = update.state.field(conservativeCompletion, false);
+          if (!conservativeCompletionEnabled && currentMenuHint) {
+            ghostText = ghostText.slice(currentMenuHint.length);
+          }
+
+          this.decorations =
+              CM.Decoration.set([CM.Decoration.widget({widget: new CompletionHint(ghostText), side: 1}).range(head)]);
         }
       },
       {decorations: p => p.decorations}),

package/front_end/ui/components/tooltips/Tooltip.ts

@@ -162,12 +162,14 @@ export interface TooltipProperties {
  * @property variant - reflects the `"variant"` attribute.
  * @property padding - reflects the `"padding"` attribute.
  * @property useClick - reflects the `"click"` attribute.
+ * @property verticalDistanceIncrease - reflexts the `"vertical-distance-increase"` attribute.
  * @attribute id - Id of the tooltip. Used for searching an anchor element with aria-describedby.
  * @attribute hover-delay - Hover length in ms before the tooltip is shown and hidden.
  * @attribute variant - Variant of the tooltip, `"simple"` for strings only, inverted background,
  *                 `"rich"` for interactive content, background according to theme's surface.
  * @attribute padding - Which padding to use, defaults to `"small"`. Use `"large"` for richer content.
  * @attribute use-click - If present, the tooltip will be shown on click instead of on hover.
+ * @attribute vertical-distance-increase - The tooltip is moved vertically this many pixels further away from its anchor.
  * @attribute use-hotkey - If present, the tooltip will be shown on hover but not when receiving focus.
  *                    Requires a hotkey to open when fosed (Alt-down). When `"use-click"` is present
  *                    as well, use-click takes precedence.
@@ -244,6 +246,14 @@ export class Tooltip extends HTMLElement {
     this.#updateJslog();
   }
 
+  get verticalDistanceIncrease(): number {
+    return this.hasAttribute('vertical-distance-increase') ? Number(this.getAttribute('vertical-distance-increase')) :
+                                                             0;
+  }
+  set verticalDistanceIncrease(increase: number) {
+    this.setAttribute('vertical-distance-increase', increase.toString());
+  }
+
   get anchor(): HTMLElement|null {
     return this.#anchor;
   }
@@ -387,7 +397,13 @@ export class Tooltip extends HTMLElement {
         proposedRectForRichTooltip({inspectorViewRect, anchorRect, currentPopoverRect}) :
         proposedRectForSimpleTooltip({inspectorViewRect, anchorRect, currentPopoverRect});
     this.style.left = `${proposedPopoverRect.left}px`;
-    this.style.top = `${proposedPopoverRect.top}px`;
+
+    // If the tooltip is above its anchor, we need to decrease the tooltip's
+    // y-coordinate to increase the distance between tooltip and anchor.
+    // If the tooltip is below its anchor, we add to the tooltip's y-coord.
+    const actualVerticalOffset =
+        anchorRect.top < proposedPopoverRect.top ? this.verticalDistanceIncrease : -this.verticalDistanceIncrease;
+    this.style.top = `${proposedPopoverRect.top + actualVerticalOffset}px`;
     this.style.visibility = 'visible';
     requestAnimationFrame(this.#positionPopover);
   };

package/front_end/ui/legacy/ContextMenu.ts

@@ -743,7 +743,7 @@ export class ContextMenu extends SubMenu {
 
     this.pendingTargets = [];
 
-    this.innerShow();
+    this.#show();
   }
 
   /**
@@ -780,7 +780,7 @@ export class ContextMenu extends SubMenu {
     }
   }
 
-  private innerShow(): void {
+  #show(): void {
     if (!this.eventTarget) {
       return;
     }

package/front_end/ui/legacy/GlassPane.ts

@@ -28,6 +28,7 @@ export class GlassPane {
   constructor(jslog?: string) {
     this.#widget = new Widget({jslog, useShadowDom: true});
     this.#widget.markAsRoot();
+    this.#widget.onDetach = this.#onDetach.bind(this);
     this.element = this.#widget.element;
     this.contentElement = this.#widget.contentElement;
 
@@ -124,15 +125,18 @@ export class GlassPane {
     if (!this.isShowing()) {
       return;
     }
-    panes.delete(this);
-    this.element.ownerDocument.body.removeEventListener('mousedown', this.onMouseDownBound, true);
-    this.element.ownerDocument.body.removeEventListener('pointerdown', this.onMouseDownBound, true);
     this.#widget.detach();
     if (this.#onHideCallback) {
       this.#onHideCallback();
     }
   }
 
+  #onDetach(): void {
+    panes.delete(this);
+    this.element.ownerDocument.body.removeEventListener('mousedown', this.onMouseDownBound, true);
+    this.element.ownerDocument.body.removeEventListener('pointerdown', this.onMouseDownBound, true);
+  }
+
   private onMouseDown(event: Event): void {
     if (!this.onClickOutsideCallback) {
       return;

package/front_end/ui/legacy/ProgressIndicator.ts

@@ -12,7 +12,7 @@ export class ProgressIndicator extends HTMLElement implements Common.Progress.Pr
   readonly #contentElement: Element;
   #labelElement: Element;
   #progressElement: HTMLProgressElement;
-  readonly #stopButton?: Element;
+  #stopButton?: Element;
   #isCanceled = false;
   #worked = 0;
   #isDone = false;
@@ -25,53 +25,65 @@ export class ProgressIndicator extends HTMLElement implements Common.Progress.Pr
     this.#labelElement = this.#contentElement.createChild('div', 'title');
     this.#progressElement = this.#contentElement.createChild('progress');
     this.#progressElement.value = 0;
+  }
 
+  connectedCallback(): void {
+    this.classList.add('progress-indicator');
     // By default we show the stop button, but this can be controlled by
     // using the 'no-stop-button' attribute on the element.
     if (!this.hasAttribute('no-stop-button')) {
       this.#stopButton = this.#contentElement.createChild('button', 'progress-indicator-shadow-stop-button');
-      this.#stopButton.addEventListener('click', this.cancel.bind(this));
+      this.#stopButton.addEventListener('click', () => {
+        this.canceled = true;
+      });
     }
   }
 
-  connectedCallback(): void {
-    this.classList.add('progress-indicator');
-  }
-
-  done(): void {
-    if (this.#isDone) {
+  set done(done: boolean) {
+    if (this.#isDone === done) {
       return;
     }
-    this.#isDone = true;
-    this.remove();
+    this.#isDone = done;
+    if (done) {
+      this.remove();
+    }
   }
 
-  cancel(): void {
-    this.#isCanceled = true;
+  get done(): boolean {
+    return this.#isDone;
   }
 
-  isCanceled(): boolean {
+  set canceled(value: boolean) {
+    this.#isCanceled = value;
+  }
+
+  get canceled(): boolean {
     return this.#isCanceled;
   }
 
-  setTitle(title: string): void {
+  override set title(title: string) {
     this.#labelElement.textContent = title;
   }
 
-  setTotalWork(totalWork: number): void {
+  override get title(): string {
+    return this.#labelElement.textContent ?? '';
+  }
+
+  set totalWork(totalWork: number) {
     this.#progressElement.max = totalWork;
   }
 
-  setWorked(worked: number, title?: string): void {
+  get totalWork(): number {
+    return this.#progressElement.max;
+  }
+
+  set worked(worked: number) {
     this.#worked = worked;
     this.#progressElement.value = worked;
-    if (title) {
-      this.setTitle(title);
-    }
   }
 
-  incrementWorked(worked?: number): void {
-    this.setWorked(this.#worked + (worked || 1));
+  get worked(): number {
+    return this.#worked;
   }
 }
 

package/front_end/ui/legacy/TabbedPane.ts

@@ -242,7 +242,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
     const focused = this.hasFocus();
     for (let i = 0; i < ids.length; ++i) {
-      this.innerCloseTab(ids[i], userGesture);
+      this.#closeTab(ids[i], userGesture);
     }
     this.requestUpdate();
     if (this.tabsHistory.length) {
@@ -253,7 +253,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
   }
 
-  private innerCloseTab(id: string, userGesture?: boolean): true|undefined {
+  #closeTab(id: string, userGesture?: boolean): true|undefined {
     const tab = this.tabsById.get(id);
     if (!tab) {
       return;

package/front_end/ui/legacy/Treeoutline.ts

@@ -1618,8 +1618,8 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
 
 /**
  * A tree element that can be used as progressive enhancement over a <ul> element. A `template` IDL attribute allows
- * additionally to insert the <ul> into a <template>, avoiding rendering anything into light DOM. The <ul> itself will
- * be cloned into shadow DOM and rendered there.
+ * additionally to insert the <ul> into a <template>, avoiding rendering anything into light DOM, which is recommended.
+ * The <ul> itself will be cloned into shadow DOM and rendered there.
  *
  * ## Usage ##
  *
@@ -1663,12 +1663,17 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
  *
  * ## Event Handling ##
  *
+ * This section is only relevant if NOT using the `template`.
+ *
  * Since config elements are cloned into the shadow DOM, it's not possible to directly attach event listeners to the
- * children of config elements. Instead, the `HTMLElementWithLightDOMTemplate.on` directive should be used as a wrapper:
+ * children of config elements. Instead, the `UI.UIUtils.InterceptBindingDirective` directive needs to be used as a
+ * wrapper:
  * ```
- * <li role="treeitem">
+ * const on = Lit.Directive.directive(UI.UIUtils.InterceptBindingDirective);
+ *
+ * html`<li role="treeitem">
  *   <button @click=${on(clickHandler)}>click me</button>
- * </li>
+ * </li>`
  * ```
  *
  * @property template Define the tree contents

package/front_end/ui/legacy/UIUtils.ts

@@ -2181,17 +2181,15 @@ export function bindToAction(actionName: string): ReturnType<typeof Directives.r
   });
 }
 
-class InterceptBindingDirective extends Lit.Directive.Directive {
-  static readonly #interceptedBindings = new WeakMap<Element, Map<string, (e: Event) => void>>();
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+type BindingEventListener = (arg: any) => any;
+export class InterceptBindingDirective extends Lit.Directive.Directive {
+  static readonly #interceptedBindings = new WeakMap<Element, Map<string, BindingEventListener>>();
 
-  constructor(part: Lit.Directive.PartInfo) {
-    super(part);
+  override update(part: Lit.Directive.Part, [listener]: [BindingEventListener]): unknown {
     if (part.type !== Lit.Directive.PartType.EVENT) {
-      throw new Error('This directive is for event bindings only');
+      return listener;
     }
-  }
-
-  override update(part: Lit.Directive.EventPart, [listener]: [(e: Event) => void]): undefined {
     let eventListeners = InterceptBindingDirective.#interceptedBindings.get(part.element);
     if (!eventListeners) {
       eventListeners = new Map();
@@ -2202,7 +2200,8 @@ class InterceptBindingDirective extends Lit.Directive.Directive {
     return this.render(listener);
   }
 
-  render(_listener: (e: Event) => void): undefined {
+  /* eslint-disable-next-line @typescript-eslint/no-unsafe-function-type */
+  render(_listener: Function): undefined {
     return undefined;
   }
 
@@ -2218,7 +2217,6 @@ class InterceptBindingDirective extends Lit.Directive.Directive {
 }
 
 export class HTMLElementWithLightDOMTemplate extends HTMLElement {
-  static readonly on = Lit.Directive.directive(InterceptBindingDirective);
   readonly #mutationObserver = new MutationObserver(this.#onChange.bind(this));
   #contentTemplate: HTMLTemplateElement|null = null;
 
@@ -2238,6 +2236,39 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
     return clone;
   }
 
+  private static patchLitTemplate(template: Lit.LitTemplate): void {
+    const wrapper = Lit.Directive.directive(InterceptBindingDirective);
+    if (template === Lit.nothing) {
+      return;
+    }
+    template.values = template.values.map(patchValue);
+
+    function isLitTemplate(value: unknown): value is Lit.TemplateResult<1> {
+      return Boolean(
+          typeof value === 'object' && value && '_$litType$' in value && 'strings' in value && 'values' in value &&
+          value['_$litType$'] === 1);
+    }
+
+    function patchValue(value: unknown): unknown {
+      if (typeof value === 'function') {
+        try {
+          return wrapper(value);
+        } catch {
+          return value;
+        }
+      }
+      if (isLitTemplate(value)) {
+        HTMLElementWithLightDOMTemplate.patchLitTemplate(value);
+        return value;
+      }
+      if (Array.isArray(value)) {
+        return value.map(patchValue);
+      }
+
+      return value;
+    }
+  }
+
   set template(template: Lit.LitTemplate) {
     if (!this.#contentTemplate) {
       this.removeChildren();
@@ -2246,6 +2277,7 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
       this.#mutationObserver.observe(
           this.#contentTemplate.content, {childList: true, attributes: true, subtree: true, characterData: true});
     }
+    HTMLElementWithLightDOMTemplate.patchLitTemplate(template);
     // eslint-disable-next-line rulesdir/no-lit-render-outside-of-view
     render(template, this.#contentTemplate.content);
   }

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -493,7 +493,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
       const positionFraction = (sliderPosition - hueAlphaLeft) / this.hueAlphaWidth;
       const newHue = 1 - positionFraction;
       hsva[0] = Platform.NumberUtilities.clamp(newHue, 0, 1);
-      this.innerSetColor(hsva, '', undefined /* colorName */, undefined, ChangeSource.Other);
+      this.#setColor(hsva, '', undefined /* colorName */, undefined, ChangeSource.Other);
       const color = getColorFromHsva(this.gamut, hsva);
       const colorValues = color.as(Common.Color.Format.HSL).canonicalHSLA();
       UI.ARIAUtils.setValueNow(this.hueElement, colorValues[0]);
@@ -506,7 +506,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
       const positionFraction = (sliderPosition - hueAlphaLeft) / this.hueAlphaWidth;
       const newAlpha = Math.round(positionFraction * 100) / 100;
       hsva[3] = Platform.NumberUtilities.clamp(newAlpha, 0, 1);
-      this.innerSetColor(hsva, '', undefined /* colorName */, undefined, ChangeSource.Other);
+      this.#setColor(hsva, '', undefined /* colorName */, undefined, ChangeSource.Other);
       const color = getColorFromHsva(this.gamut, hsva);
       const colorValues = color.as(Common.Color.Format.HSL).canonicalHSLA();
       UI.ARIAUtils.setValueText(this.alphaElement, colorValues[3]);
@@ -518,7 +518,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
       this.colorOffset = this.colorElement.getBoundingClientRect();
       hsva[1] = Platform.NumberUtilities.clamp((colorPosition.x - this.colorOffset.left) / this.dragWidth, 0, 1);
       hsva[2] = Platform.NumberUtilities.clamp(1 - (colorPosition.y - this.colorOffset.top) / this.dragHeight, 0, 1);
-      this.innerSetColor(hsva, '', undefined /* colorName */, undefined, ChangeSource.Other);
+      this.#setColor(hsva, '', undefined /* colorName */, undefined, ChangeSource.Other);
     }
 
     function getUpdatedColorPosition(dragElement: Element, event: Event): {
@@ -959,7 +959,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
       const colorName = palette.colorNames[colorIndex];
       const color = Common.Color.parse(colorText);
       if (color) {
-        this.innerSetColor(
+        this.#setColor(
             color, colorText, colorName, palette.matchUserFormat ? this.colorFormat : color.format(),
             ChangeSource.Other);
       }
@@ -991,7 +991,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     if (event instanceof MouseEvent || Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
       const color = Common.Color.parse(shade);
       if (color) {
-        this.innerSetColor(color, shade, shade, color.format(), ChangeSource.Other);
+        this.#setColor(color, shade, shade, color.format(), ChangeSource.Other);
       }
       // Continue bubbling so that the color picker will close and submit the selected color.
       return;
@@ -1063,14 +1063,14 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
   }
 
   setColor(color: Common.Color.Color): void {
-    this.innerSetColor(color, '', undefined /* colorName */, color.format(), ChangeSource.Model);
+    this.#setColor(color, '', undefined /* colorName */, color.format(), ChangeSource.Model);
     const colorValues = color.as(Common.Color.Format.HSL).canonicalHSLA();
     UI.ARIAUtils.setValueNow(this.hueElement, colorValues[0]);
     UI.ARIAUtils.setValueText(this.alphaElement, colorValues[3]);
   }
 
   private colorSelected(color: Common.Color.Legacy): void {
-    this.innerSetColor(color, '', undefined /* colorName */, undefined /* colorFormat */, ChangeSource.Other);
+    this.#setColor(color, '', undefined /* colorName */, undefined /* colorFormat */, ChangeSource.Other);
   }
 
   get color(): Common.Color.Color {
@@ -1081,7 +1081,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     return getColorFromHsva(this.gamut, this.hsv);
   }
 
-  private innerSetColor(
+  #setColor(
       colorOrHsv: Common.Color.Color|Common.ColorUtils.Color4D|undefined, colorString: string|undefined,
       colorName: string|undefined, colorFormat: Common.Color.Format|undefined, changeSource: string): void {
     // It is important to do `undefined` check here since we want to update the
@@ -1289,7 +1289,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     const contextMenu = new FormatPickerContextMenu(this.color);
     this.isFormatPickerShown = true;
     await contextMenu.show(event, newColor => {
-      this.innerSetColor(newColor, undefined, undefined, newColor.format(), ChangeSource.Other);
+      this.#setColor(newColor, undefined, undefined, newColor.format(), ChangeSource.Other);
     });
     this.isFormatPickerShown = false;
   }
@@ -1306,7 +1306,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     if (!color) {
       return;
     }
-    this.innerSetColor(color, text, undefined /* colorName */, undefined /* colorFormat */, ChangeSource.Other);
+    this.#setColor(color, text, undefined /* colorName */, undefined /* colorFormat */, ChangeSource.Other);
     event.preventDefault();
   }
 
@@ -1360,7 +1360,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
       return;
     }
 
-    this.innerSetColor(color, undefined, undefined /* colorName */, colorFormat, ChangeSource.Input);
+    this.#setColor(color, undefined, undefined /* colorName */, colorFormat, ChangeSource.Input);
   }
 
   override wasShown(): void {
@@ -1369,7 +1369,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     this.dragWidth = this.colorElement.offsetWidth;
     this.dragHeight = this.colorElement.offsetHeight;
     this.colorDragElementHeight = this.colorDragElement.offsetHeight / 2;
-    this.innerSetColor(undefined, undefined, undefined /* colorName */, undefined, ChangeSource.Model);
+    this.#setColor(undefined, undefined, undefined /* colorName */, undefined, ChangeSource.Model);
     // When flag is turned on, eye dropper is not turned on by default.
     // This is because the global change of the cursor into a dropper will disturb the user.
     if (!IS_NATIVE_EYE_DROPPER_AVAILABLE) {
@@ -1426,7 +1426,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
         const hexColor = await eyeDropper.open({signal: this.eyeDropperAbortController.signal});
         const color = Common.Color.parse(hexColor.sRGBHex);
 
-        this.innerSetColor(color ?? undefined, '', undefined /* colorName */, undefined, ChangeSource.Other);
+        this.#setColor(color ?? undefined, '', undefined /* colorName */, undefined, ChangeSource.Other);
       } catch (error) {
         if (error.name !== 'AbortError') {
           console.error(error);
@@ -1445,7 +1445,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
   }: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.EyeDropperPickedColorEvent>): void {
     const rgba = [rgbColor.r, rgbColor.g, rgbColor.b, (rgbColor.a / 2.55 | 0) / 100];
     const color = Common.Color.Legacy.fromRGBA(rgba);
-    this.innerSetColor(color, '', undefined /* colorName */, undefined, ChangeSource.Other);
+    this.#setColor(color, '', undefined /* colorName */, undefined, ChangeSource.Other);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
   }
 }

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -212,7 +212,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.columns = {};
     this.visibleColumnsArray = columnsArray;
 
-    columnsArray.forEach(column => this.innerAddColumn(column));
+    columnsArray.forEach(column => this.#addColumn(column));
 
     this.cellClass = null;
 
@@ -409,12 +409,12 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     UI.ARIAUtils.LiveAnnouncer.alert(accessibleText);
   }
 
-  private innerAddColumn(column: ColumnDescriptor, position?: number): void {
+  #addColumn(column: ColumnDescriptor, position?: number): void {
     column.defaultWeight = column.weight;
 
     const columnId = column.id;
     if (columnId in this.columns) {
-      this.innerRemoveColumn(columnId);
+      this.#removeColumn(columnId);
     }
 
     if (position === undefined) {
@@ -472,10 +472,10 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   addColumn(column: ColumnDescriptor, position?: number): void {
-    this.innerAddColumn(column, position);
+    this.#addColumn(column, position);
   }
 
-  private innerRemoveColumn(columnId: string): void {
+  #removeColumn(columnId: string): void {
     const column = this.columns[columnId];
     if (!column) {
       return;
@@ -491,7 +491,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   removeColumn(columnId: string): void {
-    this.innerRemoveColumn(columnId);
+    this.#removeColumn(columnId);
   }
 
   setCellClass(cellClass: string): void {