chrome-devtools-frontend 1.0.944427 → 1.0.945677

package/front_end/ui/components/data_grid/DataGridController.ts

@@ -27,12 +27,12 @@ export interface DataGridControllerData {
 
 export class DataGridController extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-data-grid-controller`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
-  private hasRenderedAtLeastOnce = false;
-  private columns: readonly Column[] = [];
-  private rows: Row[] = [];
-  private contextMenus?: DataGridContextMenusConfiguration = undefined;
+  #hasRenderedAtLeastOnce = false;
+  #columns: readonly Column[] = [];
+  #rows: Row[] = [];
+  #contextMenus?: DataGridContextMenusConfiguration = undefined;
 
   /**
    * Because the controller will sort data in place (e.g. mutate it) when we get
@@ -40,41 +40,41 @@ export class DataGridController extends HTMLElement {
    * mutate the data we're given, but a copy of the data. If our `get data` is
    * called, we'll return the original, not the sorted data.
    */
-  private originalColumns: readonly Column[] = [];
-  private originalRows: Row[] = [];
+  #originalColumns: readonly Column[] = [];
+  #originalRows: Row[] = [];
 
-  private sortState: Readonly<SortState>|null = null;
-  private filters: readonly TextUtils.TextUtils.ParsedFilter[] = [];
+  #sortState: Readonly<SortState>|null = null;
+  #filters: readonly TextUtils.TextUtils.ParsedFilter[] = [];
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [dataGridControllerStyles];
+    this.#shadow.adoptedStyleSheets = [dataGridControllerStyles];
   }
 
   get data(): DataGridControllerData {
     return {
-      columns: this.originalColumns as Column[],
-      rows: this.originalRows as Row[],
-      filters: this.filters,
-      contextMenus: this.contextMenus,
+      columns: this.#originalColumns as Column[],
+      rows: this.#originalRows as Row[],
+      filters: this.#filters,
+      contextMenus: this.#contextMenus,
     };
   }
 
   set data(data: DataGridControllerData) {
-    this.originalColumns = data.columns;
-    this.originalRows = data.rows;
-    this.contextMenus = data.contextMenus;
-    this.filters = data.filters || [];
-    this.contextMenus = data.contextMenus;
+    this.#originalColumns = data.columns;
+    this.#originalRows = data.rows;
+    this.#contextMenus = data.contextMenus;
+    this.#filters = data.filters || [];
+    this.#contextMenus = data.contextMenus;
 
-    this.columns = [...this.originalColumns];
-    this.rows = this.cloneAndFilterRows(data.rows, this.filters);
+    this.#columns = [...this.#originalColumns];
+    this.#rows = this.cloneAndFilterRows(data.rows, this.#filters);
 
-    if (!this.hasRenderedAtLeastOnce && data.initialSort) {
-      this.sortState = data.initialSort;
+    if (!this.#hasRenderedAtLeastOnce && data.initialSort) {
+      this.#sortState = data.initialSort;
     }
 
-    if (this.sortState) {
-      this.sortRows(this.sortState);
+    if (this.#sortState) {
+      this.sortRows(this.#sortState);
     }
 
     this.render();
@@ -134,7 +134,7 @@ export class DataGridController extends HTMLElement {
   private sortRows(state: SortState): void {
     const {columnId, direction} = state;
 
-    this.rows.sort((row1, row2) => {
+    this.#rows.sort((row1, row2) => {
       const cell1 = getRowEntryForColumnId(row1, columnId);
       const cell2 = getRowEntryForColumnId(row2, columnId);
 
@@ -157,34 +157,34 @@ export class DataGridController extends HTMLElement {
   }
 
   private applySortOnColumn(column: Column): void {
-    if (this.sortState && this.sortState.columnId === column.id) {
-      const {columnId, direction} = this.sortState;
+    if (this.#sortState && this.#sortState.columnId === column.id) {
+      const {columnId, direction} = this.#sortState;
 
       /* When users sort, we go No Sort => ASC => DESC => No sort
        * So if the current direction is DESC, we clear the state.
        */
       if (direction === SortDirection.DESC) {
-        this.sortState = null;
+        this.#sortState = null;
       } else {
         /* The state is ASC, so toggle to DESC */
-        this.sortState = {
+        this.#sortState = {
           columnId,
           direction: SortDirection.DESC,
         };
       }
     } else {
       /* The column wasn't previously sorted, so we sort it in ASC order. */
-      this.sortState = {
+      this.#sortState = {
         columnId: column.id,
         direction: SortDirection.ASC,
       };
     }
 
-    if (this.sortState) {
-      this.sortRows(this.sortState);
+    if (this.#sortState) {
+      this.sortRows(this.#sortState);
     } else {
       // No sortstate = render the original rows.
-      this.rows = this.cloneAndFilterRows(this.originalRows, this.filters);
+      this.#rows = this.cloneAndFilterRows(this.#originalRows, this.#filters);
       this.render();
     }
   }
@@ -194,8 +194,8 @@ export class DataGridController extends HTMLElement {
   }
 
   private onContextMenuHeaderResetClick(): void {
-    this.sortState = null;
-    this.rows = [...this.originalRows];
+    this.#sortState = null;
+    this.#rows = [...this.#originalRows];
     this.render();
   }
 
@@ -204,20 +204,20 @@ export class DataGridController extends HTMLElement {
     // clang-format off
     LitHtml.render(LitHtml.html`
       <${DataGrid.litTagName} .data=${{
-          columns: this.columns,
-          rows: this.rows,
-          activeSort: this.sortState,
-          contextMenus: this.contextMenus,
+          columns: this.#columns,
+          rows: this.#rows,
+          activeSort: this.#sortState,
+          contextMenus: this.#contextMenus,
         } as DataGridData}
         @columnheaderclick=${this.onColumnHeaderClick}
         @contextmenucolumnsortclick=${this.onContextMenuColumnSortClick}
         @contextmenuheaderresetclick=${this.onContextMenuHeaderResetClick}
      ></${DataGrid.litTagName}>
-    `, this.shadow, {
+    `, this.#shadow, {
       host: this,
     });
     // clang-format on
-    this.hasRenderedAtLeastOnce = true;
+    this.#hasRenderedAtLeastOnce = true;
   }
 }
 

package/front_end/ui/components/diff_view/DiffView.ts

@@ -267,21 +267,21 @@ export type DiffViewData = {
 export class DiffView extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-diff-view`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
   loaded: Promise<void>;
 
   constructor(data?: DiffViewData) {
     super();
-    this.shadow.adoptedStyleSheets = [diffViewStyles, CodeHighlighter.Style.default];
+    this.#shadow.adoptedStyleSheets = [diffViewStyles, CodeHighlighter.Style.default];
     if (data) {
-      this.loaded = DiffRenderer.render(data.diff, data.mimeType, this.shadow);
+      this.loaded = DiffRenderer.render(data.diff, data.mimeType, this.#shadow);
     } else {
       this.loaded = Promise.resolve();
     }
   }
 
   set data(data: DiffViewData) {
-    this.loaded = DiffRenderer.render(data.diff, data.mimeType, this.shadow);
+    this.loaded = DiffRenderer.render(data.diff, data.mimeType, this.#shadow);
   }
 }
 

package/front_end/ui/components/docs/button/basic.html

@@ -50,6 +50,9 @@
     </div>
     <div id="small-toolbar">
     </div>
+    <form onsubmit="event.preventDefault(); alert('submitted');" id="form">
+      <input name="field" placeholder="Enter smth" />
+    </form>
     <script type="module" src="./basic.js"></script>
   </body>
 </html>

package/front_end/ui/components/docs/button/basic.ts

@@ -42,6 +42,16 @@ forcedActive.innerText = 'Forced active';
 forcedActive.onclick = () => alert('clicked');
 appendButton(forcedActive);
 
+// Primary (forced spinner)
+const forcedSpinner = new Buttons.Button.Button();
+forcedSpinner.data = {
+  variant: Buttons.Button.Variant.PRIMARY,
+  spinner: true,
+};
+forcedSpinner.innerText = 'Forced spinner';
+forcedSpinner.onclick = () => alert('clicked');
+appendButton(forcedSpinner);
+
 // Secondary
 const secondaryButton = new Buttons.Button.Button();
 secondaryButton.innerText = 'Click me';
@@ -51,6 +61,16 @@ secondaryButton.data = {
 };
 appendButton(secondaryButton);
 
+// Secondary spinner
+const secondarySpinnerButton = new Buttons.Button.Button();
+secondarySpinnerButton.innerText = 'Click me';
+secondarySpinnerButton.onclick = () => alert('clicked');
+secondarySpinnerButton.data = {
+  variant: Buttons.Button.Variant.SECONDARY,
+  spinner: true,
+};
+appendButton(secondarySpinnerButton);
+
 // Primary
 const disabledPrimaryButtons = new Buttons.Button.Button();
 disabledPrimaryButtons.data = {
@@ -61,6 +81,17 @@ disabledPrimaryButtons.innerText = 'Cannot click me';
 disabledPrimaryButtons.onclick = () => alert('clicked');
 appendButton(disabledPrimaryButtons);
 
+// Primary spinner
+const disabledSpinnerPrimaryButtons = new Buttons.Button.Button();
+disabledSpinnerPrimaryButtons.data = {
+  variant: Buttons.Button.Variant.PRIMARY,
+  disabled: true,
+  spinner: true,
+};
+disabledSpinnerPrimaryButtons.innerText = 'Cannot click me';
+disabledSpinnerPrimaryButtons.onclick = () => alert('clicked');
+appendButton(disabledSpinnerPrimaryButtons);
+
 // Secondary
 const disabledSecondaryButton = new Buttons.Button.Button();
 disabledSecondaryButton.innerText = 'Cannot click me';
@@ -71,6 +102,17 @@ disabledSecondaryButton.data = {
 };
 appendButton(disabledSecondaryButton);
 
+// Secondary spinner
+const disabledSpinnerSecondaryButton = new Buttons.Button.Button();
+disabledSpinnerSecondaryButton.innerText = 'Cannot click me';
+disabledSpinnerSecondaryButton.onclick = () => alert('clicked');
+disabledSpinnerSecondaryButton.data = {
+  variant: Buttons.Button.Variant.SECONDARY,
+  disabled: true,
+  spinner: true,
+};
+appendButton(disabledSpinnerSecondaryButton);
+
 // Primary Icon
 const primaryIconButton = new Buttons.Button.Button();
 primaryIconButton.innerText = 'Click me';
@@ -201,3 +243,19 @@ for (let i = 0; i < 6; i++) {
     appendToSmallToolbar(sep);
   }
 }
+
+const submitButton = new Buttons.Button.Button();
+submitButton.data = {
+  variant: Buttons.Button.Variant.PRIMARY,
+  type: 'submit',
+};
+submitButton.innerText = 'Submit';
+document.querySelector('#form')?.append(submitButton);
+
+const resetButton = new Buttons.Button.Button();
+resetButton.data = {
+  variant: Buttons.Button.Variant.SECONDARY,
+  type: 'reset',
+};
+resetButton.innerText = 'Reset';
+document.querySelector('#form')?.append(resetButton);

package/front_end/ui/components/expandable_list/ExpandableList.ts

@@ -13,26 +13,26 @@ export interface ExpandableListData {
 export class ExpandableList extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-expandable-list`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private expanded = false;
-  private rows: LitHtml.TemplateResult[] = [];
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #expanded = false;
+  #rows: LitHtml.TemplateResult[] = [];
 
   set data(data: ExpandableListData) {
-    this.rows = data.rows;
+    this.#rows = data.rows;
     this.render();
   }
 
   private onArrowClick(): void {
-    this.expanded = !this.expanded;
+    this.#expanded = !this.#expanded;
     this.render();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [expandableListStyles];
+    this.#shadow.adoptedStyleSheets = [expandableListStyles];
   }
 
   private render(): void {
-    if (this.rows.length < 1) {
+    if (this.#rows.length < 1) {
       return;
     }
 
@@ -42,22 +42,22 @@ export class ExpandableList extends HTMLElement {
         LitHtml.html`
       <div class="expandable-list-container">
         <div>
-          ${this.rows.length > 1 ?
+          ${this.#rows.length > 1 ?
             LitHtml.html`
               <button @click=${(): void => this.onArrowClick()} class="arrow-icon-button">
-                <span class="arrow-icon ${this.expanded ? 'expanded' : ''}"></span>
+                <span class="arrow-icon ${this.#expanded ? 'expanded' : ''}"></span>
               </button>
             `
           : LitHtml.nothing}
         </div>
         <div class="expandable-list-items">
-          ${this.rows.filter((_, index) => (this.expanded || index === 0)).map(row => LitHtml.html`
+          ${this.#rows.filter((_, index) => (this.#expanded || index === 0)).map(row => LitHtml.html`
             ${row}
           `)}
         </div>
       </div>
     `,
-        this.shadow, {host: this});
+        this.#shadow, {host: this});
     // clang-format on
   }
 }

package/front_end/ui/components/icon_button/Icon.ts

@@ -29,52 +29,55 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 export class Icon extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-icon`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
-  private iconPath: Readonly<string> = '';
-  private color: Readonly<string> = 'rgb(110 110 110)';
-  private width: Readonly<string> = '100%';
-  private height: Readonly<string> = '100%';
-  private iconName?: Readonly<string>;
+  #iconPath: Readonly<string> = '';
+  #color: Readonly<string> = 'rgb(110 110 110)';
+  #width: Readonly<string> = '100%';
+  #height: Readonly<string> = '100%';
+  #iconName?: Readonly<string>;
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [iconStyles];
+    this.#shadow.adoptedStyleSheets = [iconStyles];
   }
 
   set data(data: IconData) {
     const {width, height} = data;
-    this.color = data.color;
-    this.width = isString(width) ? width : (isString(height) ? height : this.width);
-    this.height = isString(height) ? height : (isString(width) ? width : this.height);
+    this.#color = data.color;
+    this.#width = isString(width) ? width : (isString(height) ? height : this.#width);
+    this.#height = isString(height) ? height : (isString(width) ? width : this.#height);
     if ('iconPath' in data) {
-      this.iconPath = data.iconPath;
+      this.#iconPath = data.iconPath;
     } else {
-      this.iconPath = new URL(`../../../Images/${data.iconName}.svg`, import.meta.url).toString();
-      this.iconName = data.iconName;
+      this.#iconPath = new URL(`../../../Images/${data.iconName}.svg`, import.meta.url).toString();
+      this.#iconName = data.iconName;
     }
     this.render();
   }
 
   get data(): IconData {
     const commonData = {
-      color: this.color,
-      width: this.width,
-      height: this.height,
+      color: this.#color,
+      width: this.#width,
+      height: this.#height,
     };
-    if (this.iconName) {
+    if (this.#iconName) {
       return {
         ...commonData,
-        iconName: this.iconName,
+        iconName: this.#iconName,
       };
     }
     return {
       ...commonData,
-      iconPath: this.iconPath,
+      iconPath: this.#iconPath,
     };
   }
 
   private getStyles(): {[key: string]: string} {
-    const {iconPath, width, height, color} = this;
+    const iconPath = this.#iconPath;
+    const width = this.#width;
+    const height = this.#height;
+    const color = this.#color;
     const commonStyles = {
       width,
       height,
@@ -106,7 +109,7 @@ export class Icon extends HTMLElement {
       // clang-format off
       LitHtml.render(LitHtml.html`
         <div class="icon-basic" style=${LitHtml.Directives.styleMap(this.getStyles())}></div>
-      `, this.shadow, {host: this});
+      `, this.#shadow, {host: this});
       // clang-format on
     });
   }

package/front_end/ui/components/icon_button/IconButton.ts

@@ -29,69 +29,69 @@ export interface IconButtonData {
 
 export class IconButton extends HTMLElement {
   static readonly litTagName = LitHtml.literal`icon-button`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private clickHandler: undefined|(() => void) = undefined;
-  private groups: IconWithTextData[] = [];
-  private compact: boolean = false;
-  private leadingText: string = '';
-  private trailingText: string = '';
-  private accessibleName: string|undefined;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #clickHandler: undefined|(() => void) = undefined;
+  #groups: IconWithTextData[] = [];
+  #compact: boolean = false;
+  #leadingText: string = '';
+  #trailingText: string = '';
+  #accessibleName: string|undefined;
 
   set data(data: IconButtonData) {
-    this.groups = data.groups.map(group => ({...group}));  // Ensure we make a deep copy.
-    this.clickHandler = data.clickHandler;
-    this.trailingText = data.trailingText ?? '';
-    this.leadingText = data.leadingText ?? '';
-    this.accessibleName = data.accessibleName;
-    this.compact = Boolean(data.compact);
+    this.#groups = data.groups.map(group => ({...group}));  // Ensure we make a deep copy.
+    this.#clickHandler = data.clickHandler;
+    this.#trailingText = data.trailingText ?? '';
+    this.#leadingText = data.leadingText ?? '';
+    this.#accessibleName = data.accessibleName;
+    this.#compact = Boolean(data.compact);
     this.render();
   }
 
   get data(): IconButtonData {
     return {
-      groups: this.groups.map(group => ({...group})),  // Ensure we make a deep copy.
-      accessibleName: this.accessibleName,
-      clickHandler: this.clickHandler,
-      leadingText: this.leadingText,
-      trailingText: this.trailingText,
-      compact: this.compact,
+      groups: this.#groups.map(group => ({...group})),  // Ensure we make a deep copy.
+      accessibleName: this.#accessibleName,
+      clickHandler: this.#clickHandler,
+      leadingText: this.#leadingText,
+      trailingText: this.#trailingText,
+      compact: this.#compact,
     };
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [iconButtonStyles];
+    this.#shadow.adoptedStyleSheets = [iconButtonStyles];
   }
 
   private onClickHandler(event: Event): void {
-    if (this.clickHandler) {
+    if (this.#clickHandler) {
       event.preventDefault();
-      this.clickHandler();
+      this.#clickHandler();
     }
   }
 
   private render(): void {
     const buttonClasses = LitHtml.Directives.classMap({
       'icon-button': true,
-      'with-click-handler': Boolean(this.clickHandler),
-      'compact': this.compact,
+      'with-click-handler': Boolean(this.#clickHandler),
+      'compact': this.#compact,
     });
-    const filteredGroups = this.groups.filter(counter => counter.text !== undefined)
-                               .filter((_, index) => this.compact ? index === 0 : true);
+    const filteredGroups = this.#groups.filter(counter => counter.text !== undefined)
+                               .filter((_, index) => this.#compact ? index === 0 : true);
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(LitHtml.html`
-      <button class="${buttonClasses}" @click=${this.onClickHandler} aria-label="${LitHtml.Directives.ifDefined(this.accessibleName)}">
-      ${(!this.compact && this.leadingText) ? LitHtml.html`<span class="icon-button-title">${this.leadingText}</span>` : LitHtml.nothing}
+      <button class="${buttonClasses}" @click=${this.onClickHandler} aria-label="${LitHtml.Directives.ifDefined(this.#accessibleName)}">
+      ${(!this.#compact && this.#leadingText) ? LitHtml.html`<span class="icon-button-title">${this.#leadingText}</span>` : LitHtml.nothing}
       ${filteredGroups.map(counter =>
       LitHtml.html`
       <${Icon.litTagName} class="status-icon"
       .data=${{iconName: counter.iconName, color: counter.iconColor || '', width: counter.iconWidth || '1.5ex', height: counter.iconHeight || '1.5ex'} as IconData}>
       </${Icon.litTagName}>
-      ${this.compact ? LitHtml.html`<!-- Force line-height for this element --><span>&#8203;</span>` : LitHtml.nothing}
+      ${this.#compact ? LitHtml.html`<!-- Force line-height for this element --><span>&#8203;</span>` : LitHtml.nothing}
       <span class="icon-button-title">${counter.text}</span>
       </button>`)}
-      ${(!this.compact && this.trailingText) ? LitHtml.html`<span class="icon-button-title">${this.trailingText}</span>` : LitHtml.nothing}
-    `, this.shadow, { host: this});
+      ${(!this.#compact && this.#trailingText) ? LitHtml.html`<span class="icon-button-title">${this.#trailingText}</span>` : LitHtml.nothing}
+    `, this.#shadow, { host: this});
     // clang-format on
   }
 }