chrome-devtools-frontend 1.0.944427 → 1.0.945677

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

@@ -25,12 +25,17 @@ export const enum Size {
   MEDIUM = 'MEDIUM',
 }
 
+type ButtonType = 'button'|'submit'|'reset';
+
 interface ButtonState {
   iconUrl?: string;
   variant?: Variant;
   size?: Size;
   disabled: boolean;
   active: boolean;
+  spinner?: boolean;
+  type: ButtonType;
+  value?: string;
 }
 
 export type ButtonData = {
@@ -39,30 +44,49 @@ export type ButtonData = {
   size?: Size,
   disabled?: boolean,
   active?: boolean,
+  spinner?: boolean,
+  type?: ButtonType,
+  value?: string,
 }|{
   variant: Variant.PRIMARY | Variant.SECONDARY,
   iconUrl?: string,
   size?: Size,
   disabled?: boolean,
   active?: boolean,
+  spinner?: 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,
+    spinner: 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 +94,171 @@ 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.spinner = Boolean(data.spinner);
+    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);
+  }
+
+  set spinner(spinner: boolean) {
+    this.#props.spinner = spinner;
+    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,
+    };
+    const spinnerClasses = {
+      primary: this.#props.variant === Variant.PRIMARY,
+      secondary: this.#props.variant === Variant.SECONDARY,
+      disabled: Boolean(this.#props.disabled),
+      'spinner-component': true,
     };
     // 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}>` : ''}
+          ${this.#props.spinner ? LitHtml.html`<span class=${LitHtml.Directives.classMap(spinnerClasses)}></span>` : ''}
           <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);

package/front_end/ui/components/buttons/button.css

@@ -201,3 +201,34 @@ button.primary:disabled devtools-icon {
 button.secondary:disabled devtools-icon {
   --icon-color: var(--color-text-disabled);
 }
+
+.spinner-component.secondary {
+  border: 2px solid var(--color-primary);
+  border-right-color: transparent;
+}
+
+.spinner-component.disabled {
+  border: 2px solid var(--color-text-disabled);
+  border-right-color: transparent;
+}
+
+.spinner-component {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  border: 2px solid var(--color-background);
+  animation: spinner-animation 1s linear infinite;
+  border-right-color: transparent;
+  margin-right: 6px;
+}
+
+@keyframes spinner-animation {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}