chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

package/front_end/ui/legacy/TabbedPane.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-imperative-dom-api, @devtools/no-lit-render-outside-of-view */
 
 import './Toolbar.js';
 
@@ -12,6 +12,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import {type LitTemplate, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {createIcon, Icon} from '../kit/kit.js';
 
@@ -67,15 +68,30 @@ const UIStrings = {
    */
   moveTabLeft: 'Move left',
 } as const;
+
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/TabbedPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface TabInfo {
+  id: string;
+  title: string;
+  view: Widget;
+  tabTooltip?: string;
+  isCloseable?: boolean;
+  previewFeature?: boolean;
+  index?: number;
+  jslogContext?: string;
+  enabled?: boolean;
+  selected?: boolean;
+}
+
 export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof VBox>(VBox) {
   readonly #headerElement: HTMLElement;
   private readonly headerContentsElement: HTMLElement;
   tabSlider: HTMLDivElement;
   readonly tabsElement: HTMLElement;
   readonly #contentElement: HTMLElement;
-  private tabs: TabbedPaneTab[];
+  #tabs: TabbedPaneTab[];
   private readonly tabsHistory: TabbedPaneTab[];
   tabsById: Map<string, TabbedPaneTab>;
   private currentTabLocked: boolean;
@@ -115,7 +131,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.tabsElement.addEventListener('keydown', this.keyDown.bind(this), false);
     this.#contentElement = this.contentElement.createChild('div', 'tabbed-pane-content');
     this.#contentElement.createChild('slot');
-    this.tabs = [];
+    this.#tabs = [];
     this.tabsHistory = [];
     this.tabsById = new Map();
     this.currentTabLocked = false;
@@ -129,7 +145,11 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
     if (Annotations.AnnotationRepository.annotationsEnabled()) {
       Annotations.AnnotationRepository.instance().addEventListener(
-          Annotations.Events.ANNOTATION_ADDED, this.#onAnnotationAdded, this);
+          Annotations.Events.ANNOTATION_ADDED, this.#onUpdateAnnotations, this);
+      Annotations.AnnotationRepository.instance().addEventListener(
+          Annotations.Events.ANNOTATION_DELETED, this.#onUpdateAnnotations, this);
+      Annotations.AnnotationRepository.instance().addEventListener(
+          Annotations.Events.ALL_ANNOTATIONS_DELETED, this.#onUpdateAnnotations, this);
     }
   }
 
@@ -151,15 +171,15 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   tabIds(): string[] {
-    return this.tabs.map(tab => tab.id);
+    return this.#tabs.map(tab => tab.id);
   }
 
   tabIndex(tabId: string): number {
-    return this.tabs.findIndex(tab => tab.id === tabId);
+    return this.#tabs.findIndex(tab => tab.id === tabId);
   }
 
   tabViews(): Widget[] {
-    return this.tabs.map(tab => tab.view);
+    return this.#tabs.map(tab => tab.view);
   }
 
   tabView(tabId: string): Widget|null {
@@ -210,7 +230,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   setTabDelegate(delegate: TabbedPaneTabDelegate): void {
-    const tabs = this.tabs.slice();
+    const tabs = this.#tabs.slice();
     for (let i = 0; i < tabs.length; ++i) {
       tabs[i].setDelegate(delegate);
     }
@@ -230,9 +250,9 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     tab.tabElement.setAttribute(
         'jslog', `${VisualLogging.panelTabHeader().track({click: true, drag: true}).context(tab.jslogContext)}`);
     if (index !== undefined) {
-      this.tabs.splice(index, 0, tab);
+      this.#tabs.splice(index, 0, tab);
     } else {
-      this.tabs.push(tab);
+      this.#tabs.push(tab);
     }
     this.tabsHistory.push(tab);
     if (this.tabsHistory[0] === tab && this.isShowing()) {
@@ -278,7 +298,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.tabsById.delete(id);
 
     this.tabsHistory.splice(this.tabsHistory.indexOf(tab), 1);
-    this.tabs.splice(this.tabs.indexOf(tab), 1);
+    this.#tabs.splice(this.#tabs.indexOf(tab), 1);
     if (tab.shown) {
       this.hideTabElement(tab);
     }
@@ -294,9 +314,9 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   otherTabs(id: string): string[] {
     const result = [];
-    for (let i = 0; i < this.tabs.length; ++i) {
-      if (this.tabs[i].id !== id) {
-        result.push(this.tabs[i].id);
+    for (let i = 0; i < this.#tabs.length; ++i) {
+      if (this.#tabs[i].id !== id) {
+        result.push(this.#tabs[i].id);
       }
     }
     return result;
@@ -304,7 +324,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   tabsToTheRight(id: string): string[] {
     let index = -1;
-    for (let i = 0; i < this.tabs.length; ++i) {
+    for (let i = 0; i < this.#tabs.length; ++i) {
       if (this.tabs[i].id === id) {
         index = i;
         break;
@@ -313,7 +333,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     if (index === -1) {
       return [];
     }
-    return this.tabs.slice(index + 1).map(function(tab) {
+    return this.#tabs.slice(index + 1).map(function(tab) {
       return tab.id;
     });
   }
@@ -368,19 +388,19 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   selectNextTab(): void {
-    const index = this.tabs.indexOf((this.currentTab as TabbedPaneTab));
-    const nextIndex = Platform.NumberUtilities.mod(index + 1, this.tabs.length);
-    this.selectTab(this.tabs[nextIndex].id, true);
+    const index = this.#tabs.indexOf((this.currentTab as TabbedPaneTab));
+    const nextIndex = Platform.NumberUtilities.mod(index + 1, this.#tabs.length);
+    this.selectTab(this.#tabs[nextIndex].id, true);
   }
 
   selectPrevTab(): void {
-    const index = this.tabs.indexOf((this.currentTab as TabbedPaneTab));
-    const nextIndex = Platform.NumberUtilities.mod(index - 1, this.tabs.length);
-    this.selectTab(this.tabs[nextIndex].id, true);
+    const index = this.#tabs.indexOf((this.currentTab as TabbedPaneTab));
+    const nextIndex = Platform.NumberUtilities.mod(index - 1, this.#tabs.length);
+    this.selectTab(this.#tabs[nextIndex].id, true);
   }
 
   getTabIndex(id: string): number {
-    const index = this.tabs.indexOf((this.tabsById.get(id) as TabbedPaneTab));
+    const index = this.#tabs.indexOf((this.tabsById.get(id) as TabbedPaneTab));
     return index;
   }
 
@@ -411,7 +431,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.requestUpdate();
   }
 
-  setTrailingTabIcon(id: string, icon: Icon|null): void {
+  setTrailingTabIcon(id: string, icon: Icon|LitTemplate|null): void {
     const tab = this.tabsById.get(id);
     if (!tab) {
       return;
@@ -419,7 +439,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     tab.setSuffixElement(icon);
   }
 
-  setSuffixElement(id: string, suffixElement: HTMLElement|null): void {
+  setSuffixElement(id: string, suffixElement: HTMLElement|LitTemplate|null): void {
     const tab = this.tabsById.get(id);
     if (!tab) {
       return;
@@ -460,8 +480,8 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   private clearMeasuredWidths(): void {
-    for (let i = 0; i < this.tabs.length; ++i) {
-      delete this.tabs[i].measuredWidth;
+    for (let i = 0; i < this.#tabs.length; ++i) {
+      delete this.#tabs[i].measuredWidth;
     }
   }
 
@@ -499,6 +519,59 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.resumeInvalidations();
   }
 
+  get tabs(): TabInfo[] {
+    return this.#tabs.map(tab => ({
+                            id: tab.id,
+                            title: tab.title,
+                            view: tab.view,
+                            tabTooltip: tab.tooltip,
+                            isCloseable: tab.closeable,
+                            previewFeature: tab.previewFeature,
+                            index: this.#tabs.indexOf(tab),
+                            jslogContext: tab.jslogContext,
+                            enabled: this.tabIsEnabled(tab.id),
+                            selected: this.currentTab?.id === tab.id,
+                          }));
+  }
+
+  set tabs(tabs: TabInfo[]) {
+    const newIds = new Set(tabs.map(tab => tab.id));
+    for (const id of this.tabsById.keys()) {
+      if (!newIds.has(id)) {
+        this.#closeTab(id);
+      }
+    }
+    let index = 0;
+    for (const tab of tabs) {
+      const existingTab = this.tabsById.get(tab.id);
+      if (existingTab) {
+        this.changeTabView(tab.id, tab.view);
+        this.changeTabTitle(tab.id, tab.title, tab.tabTooltip);
+        if (tab.isCloseable !== undefined) {
+          existingTab.closeable = tab.isCloseable;
+        }
+        if (tab.previewFeature !== undefined) {
+          existingTab.previewFeature = tab.previewFeature;
+        }
+        const currentIndex = this.#tabs.indexOf(existingTab);
+        if (currentIndex !== index) {
+          this.insertBefore(existingTab, index);
+        }
+      } else {
+        this.appendTab(
+            tab.id, tab.title, tab.view, tab.tabTooltip, /* userGesture=*/ false, tab.isCloseable, tab.previewFeature,
+            index, tab.jslogContext);
+      }
+      if (tab.enabled !== undefined) {
+        this.setTabEnabled(tab.id, tab.enabled);
+      }
+      if (tab.selected) {
+        this.selectTab(tab.id);
+      }
+      ++index;
+    }
+  }
+
   override onResize(): void {
     if (this.currentDevicePixelRatio !== window.devicePixelRatio) {
       // Force recalculation of all tab widths on a DPI change
@@ -589,8 +662,8 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
           break;
       }
 
-      const showTabAnnotationIcon = annotations.getAnnotationsByType(primaryType).length > 0 ||
-          annotations.getAnnotationsByType(secondaryType).length > 0;
+      const showTabAnnotationIcon = annotations.getAnnotationDataByType(primaryType).length > 0 ||
+          annotations.getAnnotationDataByType(secondaryType).length > 0;
       this.setTabAnnotationIcon(tab.id, showTabAnnotationIcon);
     }
   }
@@ -600,7 +673,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       return;
     }
 
-    if (!this.tabs.length) {
+    if (!this.#tabs.length) {
       this.#contentElement.classList.add('has-no-tabs');
       if (this.placeholderElement && !this.placeholderContainerElement) {
         this.placeholderContainerElement = this.#contentElement.createChild('div', 'tabbed-pane-placeholder fill');
@@ -697,7 +770,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
         ARIAUtils.setExpanded(this.dropDownButton, false);
       },
     });
-    for (const tab of this.tabs) {
+    for (const tab of this.#tabs) {
       if (tab.shown) {
         continue;
       }
@@ -729,7 +802,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   private numberOfTabsShown(): number {
     let numTabsShown = 0;
-    for (const tab of this.tabs) {
+    for (const tab of this.#tabs) {
       if (tab.shown) {
         numTabsShown++;
       }
@@ -739,26 +812,26 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   private updateTabsDropDown(): void {
     const tabsToShowIndexes =
-        this.tabsToShowIndexes(this.tabs, this.tabsHistory, this.totalWidth(), this.measuredDropDownButtonWidth || 0);
+        this.tabsToShowIndexes(this.#tabs, this.tabsHistory, this.totalWidth(), this.measuredDropDownButtonWidth || 0);
     if (this.lastSelectedOverflowTab && this.numberOfTabsShown() !== tabsToShowIndexes.length) {
       delete this.lastSelectedOverflowTab;
       this.updateTabsDropDown();
       return;
     }
 
-    for (let i = 0; i < this.tabs.length; ++i) {
-      if (this.tabs[i].shown && tabsToShowIndexes.indexOf(i) === -1) {
-        this.hideTabElement(this.tabs[i]);
+    for (let i = 0; i < this.#tabs.length; ++i) {
+      if (this.#tabs[i].shown && tabsToShowIndexes.indexOf(i) === -1) {
+        this.hideTabElement(this.#tabs[i]);
       }
     }
     for (let i = 0; i < tabsToShowIndexes.length; ++i) {
-      const tab = this.tabs[tabsToShowIndexes[i]];
+      const tab = this.#tabs[tabsToShowIndexes[i]];
       if (!tab.shown) {
         this.showTabElement(i, tab);
       }
     }
 
-    this.maybeShowDropDown(tabsToShowIndexes.length !== this.tabs.length);
+    this.maybeShowDropDown(tabsToShowIndexes.length !== this.#tabs.length);
   }
 
   private maybeShowDropDown(hasMoreTabs: boolean): void {
@@ -786,7 +859,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
         this.shrinkableTabs ? this.calculateMaxWidth(measuredWidths.slice(), this.totalWidth()) : Number.MAX_VALUE;
 
     let i = 0;
-    for (const tab of this.tabs) {
+    for (const tab of this.#tabs) {
       tab.setWidth(this.verticalTabLayout ? -1 : Math.min(maxWidth, measuredWidths[i++]));
     }
   }
@@ -795,7 +868,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     // Add all elements to measure into this.tabsElement
     this.tabsElement.style.setProperty('width', '2000px');
     const measuringTabElements = new Map<HTMLElement, TabbedPaneTab>();
-    for (const tab of this.tabs) {
+    for (const tab of this.#tabs) {
       if (typeof tab.measuredWidth === 'number') {
         continue;
       }
@@ -817,7 +890,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
     // Combine the results.
     const measuredWidths = [];
-    for (const tab of this.tabs) {
+    for (const tab of this.#tabs) {
       measuredWidths.push(tab.measuredWidth || 0);
     }
     this.tabsElement.style.removeProperty('width');
@@ -917,9 +990,9 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       return;
     }
     let left = 0;
-    for (let i = 0; i < this.tabs.length && this.currentTab !== this.tabs[i]; i++) {
-      if (this.tabs[i].shown) {
-        left += this.tabs[i].measuredWidth || 0;
+    for (let i = 0; i < this.#tabs.length && this.currentTab !== this.#tabs[i]; i++) {
+      if (this.#tabs[i].shown) {
+        left += this.#tabs[i].measuredWidth || 0;
       }
     }
     const sliderWidth = this.currentTab.shown ? this.currentTab.measuredWidth : this.dropDownButton.offsetWidth;
@@ -946,12 +1019,12 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   insertBefore(tab: TabbedPaneTab, index: number): void {
     this.tabsElement.insertBefore(tab.tabElement, this.tabsElement.childNodes[index]);
-    const oldIndex = this.tabs.indexOf(tab);
-    this.tabs.splice(oldIndex, 1);
+    const oldIndex = this.#tabs.indexOf(tab);
+    this.#tabs.splice(oldIndex, 1);
     if (oldIndex < index) {
       --index;
     }
-    this.tabs.splice(index, 0, tab);
+    this.#tabs.splice(index, 0, tab);
 
     const eventData: EventData = {prevTabId: undefined, tabId: tab.id, view: tab.view, isUserGesture: undefined};
     this.dispatchEventToListeners(Events.TabOrderChanged, eventData);
@@ -987,7 +1060,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
   }
 
-  #onAnnotationAdded(): void {
+  #onUpdateAnnotations(): void {
     this.updateTabAnnotationIcons();
   }
 
@@ -1026,7 +1099,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       this.dropDownButton.click();
       return;
     }
-    const tab = this.tabs.find(tab => tab.tabElement === nextTabElement);
+    const tab = this.#tabs.find(tab => tab.tabElement === nextTabElement);
     if (tab) {
       this.selectTab(tab.id, true);
     }
@@ -1071,7 +1144,8 @@ export class TabbedPaneTab {
   measuredWidth!: number|undefined;
   #tabElement!: HTMLElement|undefined;
   private icon: Icon|null = null;
-  private suffixElement: HTMLElement|null = null;
+  private suffixElement: HTMLElement|LitTemplate|null = null;
+
   #width?: number;
   private delegate?: TabbedPaneTabDelegate;
   private titleElement?: HTMLElement;
@@ -1129,11 +1203,21 @@ export class TabbedPaneTab {
     if (!this.#tabElement) {
       return;
     }
-    const iconElement = this.#tabElement.querySelector('.ai-icon');
+    const iconElement = this.#tabElement.querySelector('.spark');
     if (iconVisible) {
       if (!iconElement) {
-        const closeButton = this.#tabElement.querySelector('.close-button');
-        this.#tabElement.insertBefore(this.createTabAnnotationIcon(), closeButton);
+        const spark = this.createTabAnnotationIcon();
+        this.#tabElement.appendChild(spark);
+
+        const parentRect = this.#tabElement.parentElement?.getBoundingClientRect();
+        if (!parentRect) {
+          return;
+        }
+        const containerRect = this.tabElement.getBoundingClientRect();
+        const iconWidth = spark.getBoundingClientRect().width;
+        // Position the icon so that its right edge is at the container's right edge.
+        const x = containerRect.x - parentRect.x + containerRect.width - iconWidth;
+        (spark as HTMLElement).style.left = `${x}px`;
       }
     } else {
       iconElement?.remove();
@@ -1155,7 +1239,7 @@ export class TabbedPaneTab {
     delete this.measuredWidth;
   }
 
-  setSuffixElement(suffixElement: HTMLElement|null): void {
+  setSuffixElement(suffixElement: HTMLElement|LitTemplate|null): void {
     this.suffixElement = suffixElement;
     if (this.#tabElement && this.titleElement) {
       this.createSuffixElement(this.#tabElement, this.titleElement, false);
@@ -1244,8 +1328,12 @@ export class TabbedPaneTab {
 
     const suffixElementContainer = document.createElement('span');
     suffixElementContainer.classList.add('tabbed-pane-header-tab-suffix-element');
-    const suffixElement = measuring ? this.suffixElement.cloneNode() : this.suffixElement;
-    suffixElementContainer.appendChild(suffixElement);
+    if (this.suffixElement instanceof HTMLElement) {
+      const suffixElement = measuring ? this.suffixElement.cloneNode() : this.suffixElement;
+      suffixElementContainer.appendChild(suffixElement);
+    } else {
+      render(this.suffixElement, suffixElementContainer);
+    }
     titleElement.insertAdjacentElement('afterend', suffixElementContainer);
     tabSuffixElements.set(tabElement, suffixElementContainer);
   }
@@ -1315,17 +1403,14 @@ export class TabbedPaneTab {
     return tabElement as HTMLElement;
   }
 
-  private createTabAnnotationIcon(): HTMLDivElement {
-    // TODO(finnur): Replace the ai-icon with the squiggly svg once it becomes available.
-    const iconContainer = document.createElement('div');
-    iconContainer.classList.add('ai-icon');
+  private createTabAnnotationIcon(): Icon {
     const tabAnnotationIcon = new Icon();
-    tabAnnotationIcon.name = 'smart-assistant';
+    tabAnnotationIcon.name = 'spark';
     tabAnnotationIcon.classList.add('small');
-    iconContainer.appendChild(tabAnnotationIcon);
-    iconContainer.setAttribute('title', i18nString(UIStrings.panelContainsAnnotation));
-    iconContainer.setAttribute('aria-label', i18nString(UIStrings.panelContainsAnnotation));
-    return iconContainer;
+    tabAnnotationIcon.classList.add('spark');
+    tabAnnotationIcon.setAttribute('title', i18nString(UIStrings.panelContainsAnnotation));
+    tabAnnotationIcon.setAttribute('aria-label', i18nString(UIStrings.panelContainsAnnotation));
+    return tabAnnotationIcon;
   }
 
   private createCloseIconButton(): Buttons.Button.Button {

package/front_end/ui/legacy/Widget.ts

@@ -998,9 +998,7 @@ export class Widget {
    * assert.isTrue(widget.someDataLoaded);
    * ```
    *
-   * @returns a promise that resolves to a `boolean` when the widget has finished
-   *          updating, the value is `true` if there are no more pending updates,
-   *          and `false` if the update cycle triggered another update.
+   * @returns a promise that resolves when the widget has finished updating.
    */
   get updateComplete(): Promise<void> {
     return this.#updateComplete;

package/front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -208,7 +208,7 @@ export class CookiesTable extends UI.Widget.VBox {
                id="cookies-table"
                striped
                ?inline=${input.renderInline}
-               @create=${input.onCreate}
+               @create=${(e: CustomEvent<CookieData>) => input.onCreate(e.detail)}
                @refresh=${input.onRefresh}
                @deselect=${() => input.onSelect(undefined)}
           >

package/front_end/ui/legacy/components/inline_editor/ColorSwatch.ts

@@ -53,58 +53,62 @@ export class ClickEvent extends Event {
 }
 
 export class ColorSwatch extends HTMLElement {
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private tooltip: string = i18nString(UIStrings.shiftclickToChangeColorFormat);
-  private color: Common.Color.Color|null = null;
-  private readonly = false;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #tooltip: string = i18nString(UIStrings.shiftclickToChangeColorFormat);
+  #color: Common.Color.Color|null = null;
+  #readonly = false;
 
   constructor(tooltip?: string) {
     super();
     if (tooltip) {
-      this.tooltip = tooltip;
+      this.#tooltip = tooltip;
     }
     this.tabIndex = -1;
-    this.addEventListener('keydown', e => this.onActivate(e));
+    this.addEventListener('keydown', e => this.#onActivate(e));
   }
 
   static isColorSwatch(element: Element): element is ColorSwatch {
     return element.localName === 'devtools-color-swatch';
   }
 
-  setReadonly(readonly: boolean): void {
-    if (this.readonly === readonly) {
+  get readonly(): boolean {
+    return this.#readonly;
+  }
+
+  set readonly(readonly: boolean) {
+    if (this.#readonly === readonly) {
       return;
     }
 
-    this.readonly = readonly;
-    if (this.color) {
-      this.renderColor(this.color);
+    this.#readonly = readonly;
+    if (this.#color) {
+      this.color = this.#color;
     }
   }
 
-  getColor(): Common.Color.Color|null {
-    return this.color;
+  get color(): Common.Color.Color|null {
+    return this.#color;
   }
 
   get anchorBox(): AnchorBox|null {
-    const swatch = this.shadow.querySelector('.color-swatch');
+    const swatch = this.#shadow.querySelector('.color-swatch');
     return swatch ? swatch.boxInWindow() : null;
   }
 
   getText(): string|undefined {
-    return this.color?.getAuthoredText() ?? this.color?.asString();
+    return this.#color?.getAuthoredText() ?? this.#color?.asString();
   }
 
   /**
    * Render this swatch given a color object or text to be parsed as a color.
    * @param color The color object or string to use for this swatch.
    */
-  renderColor(color: Common.Color.Color): void {
-    this.color = color;
+  set color(color: Common.Color.Color) {
+    this.#color = color;
 
     const colorSwatchClasses = Lit.Directives.classMap({
       'color-swatch': true,
-      readonly: this.readonly,
+      readonly: this.#readonly,
     });
 
     // Disabled until https://crbug.com/1079231 is fixed.
@@ -116,19 +120,20 @@ export class ColorSwatch extends HTMLElement {
     Lit.render(
       html`<style>${colorSwatchStyles}</style><span
           class=${colorSwatchClasses}
-          title=${this.tooltip}><span
+          title=${this.#tooltip}><span
             class="color-swatch-inner"
             style="background-color: ${color.asString()};"
             jslog=${VisualLogging.showStyleEditor('color').track({click: true})}
-            @click=${this.onActivate}
-            @mousedown=${this.consume}
-            @dblclick=${this.consume}></span></span>`,
-      this.shadow, {host: this});
+            @click=${this.#onActivate}
+            @mousedown=${this.#consume}
+            @dblclick=${this.#consume}></span></span>`,
+      this.#shadow, {host: this});
     // clang-format on
+    this.dispatchEvent(new ColorChangedEvent(color));
   }
 
-  private onActivate(e: KeyboardEvent|MouseEvent): void {
-    if (this.readonly) {
+  #onActivate(e: KeyboardEvent|MouseEvent): void {
+    if (this.#readonly) {
       return;
     }
 
@@ -139,29 +144,24 @@ export class ColorSwatch extends HTMLElement {
 
     if (e.shiftKey) {
       e.stopPropagation();
-      this.showFormatPicker(e);
+      this.#showFormatPicker(e);
       return;
     }
 
     this.dispatchEvent(new ClickEvent());
-    this.consume(e);
+    this.#consume(e);
   }
 
-  private consume(e: Event): void {
+  #consume(e: Event): void {
     e.stopPropagation();
   }
 
-  setColor(color: Common.Color.Color): void {
-    this.renderColor(color);
-    this.dispatchEvent(new ColorChangedEvent(color));
-  }
-
-  private showFormatPicker(e: Event): void {
-    if (!this.color) {
+  #showFormatPicker(e: Event): void {
+    if (!this.#color) {
       return;
     }
 
-    const contextMenu = new ColorPicker.FormatPickerContextMenu.FormatPickerContextMenu(this.color);
+    const contextMenu = new ColorPicker.FormatPickerContextMenu.FormatPickerContextMenu(this.#color);
     void contextMenu.show(e, color => {
       this.dispatchEvent(new ColorFormatChangedEvent(color));
     });