chrome-devtools-frontend 1.0.945329 → 1.0.945579

package/config/gni/devtools_grd_files.gni

@@ -45,6 +45,7 @@ grd_files_release_sources = [
   "front_end/Images/chromeRight.avif",
   "front_end/Images/chromeSelect.svg",
   "front_end/Images/chromeSelectDark.svg",
+  "front_end/Images/circled_exclamation_icon.svg",
   "front_end/Images/close-icon.svg",
   "front_end/Images/copy_icon.svg",
   "front_end/Images/cssoverview_icons_2x.avif",

package/config/gni/devtools_image_files.gni

@@ -56,6 +56,7 @@ devtools_svg_sources = [
   "chevrons.svg",
   "chromeSelect.svg",
   "chromeSelectDark.svg",
+  "circled_exclamation_icon.svg",
   "close-icon.svg",
   "copy_icon.svg",
   "dropdown_7x6_icon.svg",

package/front_end/Images/src/circled_exclamation_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 4.233 4.233" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.25 10.25h1.5v1.5h-1.5zm0-6h1.5v4.5h-1.5ZM7.992.5C3.853.5.5 3.86.5 8c0 4.14 3.353 7.5 7.492 7.5 4.148 0 7.508-3.36 7.508-7.5 0-4.14-3.36-7.5-7.508-7.5ZM8 14c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6z" transform="scale(.26458)" style="fill:#000"/>
+</svg>

package/front_end/core/sdk/CSSMetadata.ts

@@ -567,7 +567,6 @@ const extraPropertyValues = {
       'ui-monospace',
       'ui-rounded',
       '-webkit-body',
-      '-webkit-pictograph',
     ],
   },
   'zoom': {values: ['normal']},

package/front_end/generated/protocol.d.ts

@@ -10442,10 +10442,6 @@ declare namespace Protocol {
        * The fantasy font-family.
        */
       fantasy?: string;
-      /**
-       * The pictograph font-family.
-       */
-      pictograph?: string;
     }
 
     /**

package/front_end/models/emulation/EmulatedDevices.ts

@@ -502,14 +502,12 @@ export class EmulatedDevicesList extends Common.ObjectWrapper.ObjectWrapper<Even
   constructor() {
     super();
 
-    this.#standardSetting = Common.Settings.Settings.instance().createSetting(
-        'standardEmulatedDeviceList', [], Common.Settings.SettingStorageType.Synced);
+    this.#standardSetting = Common.Settings.Settings.instance().createSetting('standardEmulatedDeviceList', []);
     this.#standardInternal = new Set();
     this.listFromJSONV1(this.#standardSetting.get(), this.#standardInternal);
     this.updateStandardDevices();
 
-    this.#customSetting = Common.Settings.Settings.instance().createSetting(
-        'customEmulatedDeviceList', [], Common.Settings.SettingStorageType.Synced);
+    this.#customSetting = Common.Settings.Settings.instance().createSetting('customEmulatedDeviceList', []);
     this.#customInternal = new Set();
     if (!this.listFromJSONV1(this.#customSetting.get(), this.#customInternal)) {
       this.saveCustomDevices();

package/front_end/panels/application/BackForwardCacheView.ts

@@ -262,7 +262,14 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
 
   private renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult {
     return LitHtml.html`
-      <li>${explanation.reason} : ${
+      <li>
+      <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+      iconName: 'circled_exclamation_icon',
+      color: 'orange',
+      width: '16px',
+      height: '16px',
+    } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
+        ${explanation.reason} : ${
         (explanation.reason in NotRestoredReasonDescription) ?
             LitHtml.html`${NotRestoredReasonDescription[explanation.reason].name()}` :
             LitHtml.nothing} </li>

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -30,6 +30,8 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   private section?: StylePropertiesSection;
   private editorContainer: HTMLElement;
 
+  #triggerKey: string|undefined;
+
   constructor() {
     super(true);
     this.contentElement.tabIndex = 0;
@@ -71,6 +73,14 @@ export class StyleEditorWidget extends UI.Widget.VBox {
     this.editor?.addEventListener('propertydeselected', this.onPropertyDeselected);
   }
 
+  setTriggerKey(value: string): void {
+    this.#triggerKey = value;
+  }
+
+  getTriggerKey(): string|undefined {
+    return this.#triggerKey;
+  }
+
   unbindContext(): void {
     this.pane = undefined;
     this.section = undefined;
@@ -105,8 +115,8 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   }
 
   static createTriggerButton(
-      pane: StylesSidebarPane, section: StylePropertiesSection, editorClass: {new(): Editor},
-      buttonTitle: string): HTMLElement {
+      pane: StylesSidebarPane, section: StylePropertiesSection, editorClass: {new(): Editor}, buttonTitle: string,
+      triggerKey: string): HTMLElement {
     const triggerButton = createButton(buttonTitle);
 
     triggerButton.onclick = async(event): Promise<void> => {
@@ -115,6 +125,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
       const widget = StyleEditorWidget.instance();
       widget.setEditor(editorClass);
       widget.bindContext(pane, section);
+      widget.setTriggerKey(triggerKey);
       await widget.render();
       const scrollerElement = triggerButton.enclosingNodeOrSelfWithClass('style-panes-wrapper');
       const onScroll = (): void => {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -668,21 +668,17 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const section = this.section();
     if (this.valueElement && section && section.editable && this.property.name === 'display') {
       const propertyValue = this.property.trimmedValueWithoutImportant();
-      if (propertyValue === 'flex' || propertyValue === 'inline-flex') {
+      const isFlex = propertyValue === 'flex' || propertyValue === 'inline-flex';
+      const isGrid = propertyValue === 'grid' || propertyValue === 'inline-grid';
+      if (isFlex || isGrid) {
+        const key = `${section.getSectionIdx()}_${section.nextEditorTriggerButtonIdx}`;
         const button = StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, section, FlexboxEditor, i18nString(UIStrings.flexboxEditorButton));
+            this.parentPaneInternal, section, isFlex ? FlexboxEditor : GridEditor,
+            isFlex ? i18nString(UIStrings.flexboxEditorButton) : i18nString(UIStrings.gridEditorButton), key);
+        section.nextEditorTriggerButtonIdx++;
         this.listItemElement.appendChild(button);
         const helper = this.parentPaneInternal.swatchPopoverHelper();
-        if (helper.isShowing(StyleEditorWidget.instance())) {
-          helper.setAnchorElement(button);
-        }
-      }
-      if (propertyValue === 'grid' || propertyValue === 'inline-grid') {
-        const button = StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, section, GridEditor, i18nString(UIStrings.gridEditorButton));
-        this.listItemElement.appendChild(button);
-        const helper = this.parentPaneInternal.swatchPopoverHelper();
-        if (helper.isShowing(StyleEditorWidget.instance())) {
+        if (helper.isShowing(StyleEditorWidget.instance()) && StyleEditorWidget.instance().getTriggerKey() === key) {
           helper.setAnchorElement(button);
         }
       }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -832,6 +832,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.idleCallbackManager = new IdleCallbackManager();
 
     const blocks = [new SectionBlock(null)];
+    let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
     for (const style of matchedStyles.nodeStyles()) {
       const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
@@ -844,7 +845,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const lastBlock = blocks[blocks.length - 1];
       if (lastBlock) {
         this.idleCallbackManager.schedule(() => {
-          const section = new StylePropertiesSection(this, matchedStyles, style);
+          const section = new StylePropertiesSection(this, matchedStyles, style, sectionIdx);
+          sectionIdx++;
           lastBlock.sections.push(section);
         });
       }
@@ -860,7 +862,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createPseudoTypeBlock(pseudoType);
       for (const style of matchedStyles.pseudoStyles(pseudoType)) {
         this.idleCallbackManager.schedule(() => {
-          const section = new StylePropertiesSection(this, matchedStyles, style);
+          const section = new StylePropertiesSection(this, matchedStyles, style, sectionIdx);
+          sectionIdx++;
           block.sections.push(section);
         });
       }
@@ -871,7 +874,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createKeyframesBlock(keyframesRule.name().text);
       for (const keyframe of keyframesRule.keyframes()) {
         this.idleCallbackManager.schedule(() => {
-          block.sections.push(new KeyframePropertiesSection(this, matchedStyles, keyframe.style));
+          block.sections.push(new KeyframePropertiesSection(this, matchedStyles, keyframe.style, sectionIdx));
+          sectionIdx++;
         });
       }
       blocks.push(block);
@@ -917,7 +921,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const node = this.node();
     const blankSection = new BlankStylePropertiesSection(
         this, insertAfterSection.matchedStyles, node ? node.simpleSelector() : '', styleSheetId, ruleLocation,
-        insertAfterSection.style());
+        insertAfterSection.style(), 0);
 
     this.sectionsContainer.insertBefore(blankSection.element, insertAfterSection.element.nextSibling);
 
@@ -929,6 +933,13 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       block.sections.splice(index + 1, 0, blankSection);
       blankSection.startEditingSelector();
     }
+    let sectionIdx = 0;
+    for (const block of this.sectionBlocks) {
+      for (const section of block.sections) {
+        section.setSectionIdx(sectionIdx);
+        sectionIdx++;
+      }
+    }
   }
 
   removeSection(section: StylePropertiesSection): void {
@@ -1208,10 +1219,15 @@ export class StylePropertiesSection {
 
   private queryListElement: HTMLElement;
 
+  // Used to identify buttons that trigger a flexbox or grid editor.
+  nextEditorTriggerButtonIdx = 1;
+  private sectionIdx = 0;
+
   constructor(
       parentPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration) {
+      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
     this.parentPane = parentPane;
+    this.sectionIdx = sectionIdx;
     this.styleInternal = style;
     this.matchedStyles = matchedStyles;
     this.editable = Boolean(style.styleSheetId && style.range);
@@ -1344,6 +1360,15 @@ export class StylePropertiesSection {
     this.onpopulate();
   }
 
+  setSectionIdx(sectionIdx: number): void {
+    this.sectionIdx = sectionIdx;
+    this.onpopulate();
+  }
+
+  getSectionIdx(): number {
+    return this.sectionIdx;
+  }
+
   registerFontProperty(treeElement: StylePropertyTreeElement): void {
     if (this.fontEditorSectionManager) {
       this.fontEditorSectionManager.registerFontProperty(treeElement);
@@ -1935,6 +1960,7 @@ export class StylePropertiesSection {
 
   onpopulate(): void {
     this.parentPane.setActiveProperty(null);
+    this.nextEditorTriggerButtonIdx = 1;
     this.propertiesTreeOutline.removeChildren();
     const style = this.styleInternal;
     let count = 0;
@@ -2457,10 +2483,10 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, defaultSelectorText: string,
       styleSheetId: Protocol.CSS.StyleSheetId, ruleLocation: TextUtils.TextRange.TextRange,
-      insertAfterStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration) {
+      insertAfterStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
     const cssModel = (stylesPane.cssModel() as SDK.CSSModel.CSSModel);
     const rule = SDK.CSSRule.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText);
-    super(stylesPane, matchedStyles, rule.style);
+    super(stylesPane, matchedStyles, rule.style, sectionIdx);
     this.normal = false;
     this.ruleLocation = ruleLocation;
     this.styleSheetId = styleSheetId;
@@ -2564,8 +2590,8 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
 export class KeyframePropertiesSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration) {
-    super(stylesPane, matchedStyles, style);
+      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
+    super(stylesPane, matchedStyles, style, sectionIdx);
     this.selectorElement.className = 'keyframe-key';
   }
 

package/front_end/ui/components/adorners/Adorner.ts

@@ -19,18 +19,18 @@ export class Adorner extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-adorner`;
   name = '';
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private isToggle = false;
-  private ariaLabelDefault?: string;
-  private ariaLabelActive?: string;
-  private content?: HTMLElement;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #isToggle = false;
+  #ariaLabelDefault?: string;
+  #ariaLabelActive?: string;
+  #content?: HTMLElement;
 
   set data(data: AdornerData) {
     this.name = data.name;
     data.content.slot = 'content';
-    this.content?.remove();
+    this.#content?.remove();
     this.append(data.content);
-    this.content = data.content;
+    this.#content = data.content;
     this.render();
   }
 
@@ -38,7 +38,7 @@ export class Adorner extends HTMLElement {
     if (!this.getAttribute('aria-label')) {
       this.setAttribute('aria-label', this.name);
     }
-    this.shadow.adoptedStyleSheets = [adornerStyles];
+    this.#shadow.adoptedStyleSheets = [adornerStyles];
   }
 
   isActive(): boolean {
@@ -50,12 +50,12 @@ export class Adorner extends HTMLElement {
    * an active state; pass `false` to force-set an inactive state.
    */
   toggle(forceActiveState?: boolean): void {
-    if (!this.isToggle) {
+    if (!this.#isToggle) {
       return;
     }
     const shouldBecomeActive = forceActiveState === undefined ? !this.isActive() : forceActiveState;
     this.setAttribute('aria-pressed', Boolean(shouldBecomeActive).toString());
-    this.setAttribute('aria-label', (shouldBecomeActive ? this.ariaLabelActive : this.ariaLabelDefault) || this.name);
+    this.setAttribute('aria-label', (shouldBecomeActive ? this.#ariaLabelActive : this.#ariaLabelDefault) || this.name);
   }
 
   show(): void {
@@ -78,9 +78,9 @@ export class Adorner extends HTMLElement {
   }): void {
     const {isToggle = false, shouldPropagateOnKeydown = false, ariaLabelDefault, ariaLabelActive} = options;
 
-    this.isToggle = isToggle;
-    this.ariaLabelDefault = ariaLabelDefault;
-    this.ariaLabelActive = ariaLabelActive;
+    this.#isToggle = isToggle;
+    this.#ariaLabelDefault = ariaLabelDefault;
+    this.#ariaLabelActive = ariaLabelActive;
     this.setAttribute('aria-label', ariaLabelDefault);
 
     if (isToggle) {
@@ -111,7 +111,7 @@ export class Adorner extends HTMLElement {
     // clang-format off
     render(html`
       <slot name="content"></slot>
-    `, this.shadow, {
+    `, this.#shadow, {
       host: this,
     });
   }

package/front_end/ui/components/buttons/Button.ts

@@ -25,12 +25,16 @@ export const enum Size {
   MEDIUM = 'MEDIUM',
 }
 
+type ButtonType = 'button'|'submit'|'reset';
+
 interface ButtonState {
   iconUrl?: string;
   variant?: Variant;
   size?: Size;
   disabled: boolean;
   active: boolean;
+  type: ButtonType;
+  value?: string;
 }
 
 export type ButtonData = {
@@ -39,30 +43,46 @@ export type ButtonData = {
   size?: Size,
   disabled?: boolean,
   active?: boolean,
+  type?: ButtonType,
+  value?: string,
 }|{
   variant: Variant.PRIMARY | Variant.SECONDARY,
   iconUrl?: string,
   size?: Size,
   disabled?: boolean,
   active?: boolean,
+  type?: ButtonType,
+  value?: string,
 };
 
+interface ButtonElementInternals extends ElementInternals {
+  readonly form?: HTMLFormElement;
+  readonly validity: ValidityState;
+  readonly willValidate: boolean;
+  readonly validationMessage: string;
+  checkValidity(): void;
+  reportValidity(): void;
+}
+
 export class Button extends HTMLElement {
+  static formAssociated = true;
   static readonly litTagName = LitHtml.literal`devtools-button`;
-  private readonly shadow = this.attachShadow({mode: 'open', delegatesFocus: true});
-  private readonly boundRender = this.render.bind(this);
-  private readonly boundOnClick = this.onClick.bind(this);
-  private readonly props: ButtonState = {
+  readonly #shadow = this.attachShadow({mode: 'open', delegatesFocus: true});
+  readonly #boundRender = this.render.bind(this);
+  readonly #boundOnClick = this.onClick.bind(this);
+  readonly #props: ButtonState = {
     size: Size.MEDIUM,
     disabled: false,
     active: false,
+    type: 'button',
   };
-  private isEmpty = true;
+  #isEmpty = true;
+  #internals = this.attachInternals() as ButtonElementInternals;
 
   constructor() {
     super();
     this.setAttribute('role', 'presentation');
-    this.addEventListener('click', this.boundOnClick, true);
+    this.addEventListener('click', this.#boundOnClick, true);
   }
 
   /**
@@ -70,104 +90,158 @@ export class Button extends HTMLElement {
    * for increased type-safety.
    */
   set data(data: ButtonData) {
-    this.props.variant = data.variant;
-    this.props.iconUrl = data.iconUrl;
-    this.props.size = data.size || Size.MEDIUM;
-    this.props.active = Boolean(data.active);
+    this.#props.variant = data.variant;
+    this.#props.iconUrl = data.iconUrl;
+    this.#props.size = data.size || Size.MEDIUM;
+    this.#props.active = Boolean(data.active);
+    this.#props.type = data.type || 'button';
     this.setDisabledProperty(data.disabled || false);
-    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
   set iconUrl(iconUrl: string|undefined) {
-    this.props.iconUrl = iconUrl;
-    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+    this.#props.iconUrl = iconUrl;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
   set variant(variant: Variant) {
-    this.props.variant = variant;
-    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+    this.#props.variant = variant;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
   set size(size: Size) {
-    this.props.size = size;
-    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+    this.#props.size = size;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set type(type: ButtonType) {
+    this.#props.type = type;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
   set disabled(disabled: boolean) {
     this.setDisabledProperty(disabled);
-    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
   set active(active: boolean) {
-    this.props.active = active;
-    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+    this.#props.active = active;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
   private setDisabledProperty(disabled: boolean): void {
-    this.props.disabled = disabled;
+    this.#props.disabled = disabled;
     this.toggleAttribute('disabled', disabled);
   }
 
   focus(): void {
-    this.shadow.querySelector('button')?.focus();
+    this.#shadow.querySelector('button')?.focus();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [buttonStyles];
-    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+    this.#shadow.adoptedStyleSheets = [buttonStyles];
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
   private onClick(event: Event): void {
-    if (this.props.disabled) {
+    if (this.#props.disabled) {
       event.stopPropagation();
       event.preventDefault();
+      return;
+    }
+    if (this.form && this.#props.type === 'submit') {
+      event.preventDefault();
+      this.form.dispatchEvent(new SubmitEvent('submit', {
+        submitter: this,
+      }));
+    }
+    if (this.form && this.#props.type === 'reset') {
+      event.preventDefault();
+      this.form.reset();
     }
   }
 
   private onSlotChange(event: Event): void {
     const slot = event.target as HTMLSlotElement | undefined;
     const nodes = slot?.assignedNodes();
-    this.isEmpty = !nodes || !Boolean(nodes.length);
-    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+    this.#isEmpty = !nodes || !Boolean(nodes.length);
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
   private render(): void {
-    if (!this.props.variant) {
+    if (!this.#props.variant) {
       throw new Error('Button requires a variant to be defined');
     }
-    if (this.props.variant === Variant.TOOLBAR) {
-      if (!this.props.iconUrl) {
+    if (this.#props.variant === Variant.TOOLBAR) {
+      if (!this.#props.iconUrl) {
         throw new Error('Toolbar button requires an icon');
       }
-      if (!this.isEmpty) {
+      if (!this.#isEmpty) {
         throw new Error('Tooblar button does not accept children');
       }
     }
     const classes = {
-      primary: this.props.variant === Variant.PRIMARY,
-      secondary: this.props.variant === Variant.SECONDARY,
-      toolbar: this.props.variant === Variant.TOOLBAR,
-      'text-with-icon': Boolean(this.props.iconUrl) && !this.isEmpty,
-      'only-icon': Boolean(this.props.iconUrl) && this.isEmpty,
-      small: Boolean(this.props.size === Size.SMALL),
-      active: this.props.active,
+      primary: this.#props.variant === Variant.PRIMARY,
+      secondary: this.#props.variant === Variant.SECONDARY,
+      toolbar: this.#props.variant === Variant.TOOLBAR,
+      'text-with-icon': Boolean(this.#props.iconUrl) && !this.#isEmpty,
+      'only-icon': Boolean(this.#props.iconUrl) && this.#isEmpty,
+      small: Boolean(this.#props.size === Size.SMALL),
+      active: this.#props.active,
     };
     // clang-format off
     LitHtml.render(
       LitHtml.html`
-        <button .disabled=${this.props.disabled} class=${LitHtml.Directives.classMap(classes)}>
-          ${this.props.iconUrl ? LitHtml.html`<${IconButton.Icon.Icon.litTagName}
+        <button .disabled=${this.#props.disabled} class=${LitHtml.Directives.classMap(classes)}>
+          ${this.#props.iconUrl ? LitHtml.html`<${IconButton.Icon.Icon.litTagName}
             .data=${{
-              iconPath: this.props.iconUrl,
+              iconPath: this.#props.iconUrl,
               color: 'var(--color-background)',
             } as IconButton.Icon.IconData}
           >
           </${IconButton.Icon.Icon.litTagName}>` : ''}
           <slot @slotchange=${this.onSlotChange}></slot>
         </button>
-      `, this.shadow, {host: this});
+      `, this.#shadow, {host: this});
     // clang-format on
   }
+
+  // Based on https://web.dev/more-capable-form-controls/ to make custom elements form-friendly.
+  // Form controls usually expose a "value" property.
+  get value(): string {
+    return this.#props.value || '';
+  }
+  set value(value: string) {
+    this.#props.value = value;
+  }
+
+  // The following properties and methods aren't strictly required,
+  // but browser-level form controls provide them. Providing them helps
+  // ensure consistency with browser-provided controls.
+  get form(): HTMLFormElement|undefined {
+    return this.#internals.form;
+  }
+  get name(): string|null {
+    return this.getAttribute('name');
+  }
+  get type(): ButtonType {
+    return this.#props.type;
+  }
+  get validity(): ValidityState {
+    return this.#internals.validity;
+  }
+  get validationMessage(): string {
+    return this.#internals.validationMessage;
+  }
+  get willValidate(): boolean {
+    return this.#internals.willValidate;
+  }
+  checkValidity(): void {
+    return this.#internals.checkValidity();
+  }
+  reportValidity(): void {
+    return this.#internals.reportValidity();
+  }
 }
 
 ComponentHelpers.CustomElements.defineComponent('devtools-button', Button);