chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/panels/lighthouse/lighthouse-meta.ts

@@ -10,9 +10,49 @@ import * as Lighthouse from './lighthouse.js';
 
 const UIStrings = {
   /**
-   * @description Command for showing the 'Lighthouse' tool
+   * @description Command for showing the Lighthouse panel.
    */
   showLighthouse: 'Show `Lighthouse`',
+  /**
+   * @description Title of Lighthouse performance category setting.
+   */
+  performance: 'Performance',
+  /**
+   * @description Title of Lighthouse accessibility category setting.
+   */
+  accessibility: 'Accessibility',
+  /**
+   * @description Title of Lighthouse best practices category setting.
+   */
+  bestPractices: 'Best practices',
+  /**
+   * @description Title of Lighthouse SEO category setting.
+   */
+  seo: 'SEO',
+  /**
+   * @description Title of Lighthouse agentic browsing category setting.
+   */
+  agenticBrowsing: 'Agentic browsing',
+  /**
+   * @description Title of Lighthouse device type setting.
+   */
+  device: 'Apply mobile emulation',
+  /**
+   * @description Title of Lighthouse mode setting.
+   */
+  mode: 'Lighthouse mode',
+  /**
+   * @description Title of Lighthouse throttling setting.
+   */
+  throttling: 'Throttling method',
+  /**
+   * @description Title of Lighthouse clear storage setting.
+   */
+  clearStorage: 'Clear storage',
+  /**
+   * @description Title of Lighthouse JavaScript sampling setting.
+   */
+  enableSampling: 'Enable JS sampling',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/lighthouse-meta.ts', UIStrings);
@@ -55,3 +95,93 @@ Common.Revealer.registerRevealer({
     return new Lighthouse.LighthousePanel.ReportRevealer();
   },
 });
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.performance),
+  settingName: 'lighthouse.cat-perf',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.accessibility),
+  settingName: 'lighthouse.cat-a11y',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.bestPractices),
+  settingName: 'lighthouse.cat-best-practices',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.seo),
+  settingName: 'lighthouse.cat-seo',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.agenticBrowsing),
+  settingName: 'lighthouse.cat-agentic-browsing',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.device),
+  settingName: 'lighthouse.device-type',
+  settingType: Common.Settings.SettingType.ENUM,
+  defaultValue: 'mobile',
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.mode),
+  settingName: 'lighthouse.mode',
+  settingType: Common.Settings.SettingType.ENUM,
+  defaultValue: 'navigation',
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.throttling),
+  settingName: 'lighthouse.throttling',
+  settingType: Common.Settings.SettingType.ENUM,
+  defaultValue: 'simulate',
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.clearStorage),
+  settingName: 'lighthouse.clear-storage',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.enableSampling),
+  settingName: 'lighthouse.enable-sampling',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});

package/front_end/panels/media/EventDisplayTable.ts

@@ -1,18 +1,20 @@
 // Copyright 2019 The Chromium Authors
 // 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 */
 
-import type * as Common from '../../core/common/common.js';
+import '../../ui/legacy/components/data_grid/data_grid.js';
+
 import * as i18n from '../../core/i18n/i18n.js';
-import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import eventDisplayTableStyles from './eventDisplayTable.css.js';
 import type {PlayerEvent} from './MediaModel.js';
 
+const {widget} = UI.Widget;
+const {repeat} = Directives;
 const UIStrings = {
   /**
    * @description Text for timestamps of items.
@@ -34,92 +36,75 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/media/EventDisplayTable.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export interface EventDisplayColumnConfig {
-  id: string;
-  title: string;
-  sortable: boolean;
-  weight?: number;
+export interface EventDisplayRow {
+  displayTimestamp: string;
+  event: string;
+  value: Record<string, unknown>;
 }
 
-export const enum MediaEventColumnKeys {
-  TIMESTAMP = 'displayTimestamp',
-  EVENT = 'event',
-  VALUE = 'value',
+export interface PlayerEventsViewInput {
+  parsedEvents: EventDisplayRow[];
 }
 
-export class EventNode extends DataGrid.DataGrid.DataGridNode<EventNode> {
-  private expandableElement: SourceFrame.JSONView.JSONView|null;
-
-  constructor(event: PlayerEvent) {
-    super(event, false);
-    this.expandableElement = null;
-  }
-
-  override createCell(columnId: string): HTMLElement {
-    const cell = this.createTD(columnId);
-    const cellData = this.data[columnId] as string;
-    if (columnId === MediaEventColumnKeys.VALUE) {
-      const enclosed = cell.createChild('div', 'event-display-table-contents-json-wrapper');
-      this.expandableElement =
-          new SourceFrame.JSONView.JSONView(new SourceFrame.JSONView.ParsedJSON(cellData, '', ''), true);
-      this.expandableElement.markAsRoot();
-      this.expandableElement.show(enclosed);
-    } else {
-      cell.classList.add('event-display-table-basic-text-table-entry');
-      UI.UIUtils.createTextChild(cell, cellData);
-    }
-    return cell;
-  }
-}
+export type View = (input: PlayerEventsViewInput, output: void, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+      <style>${eventDisplayTableStyles}</style>
+      <devtools-data-grid row-height='auto' autoscroll striped name=${i18nString(UIStrings.eventDisplay)}
+        class="event-display-table-contents-table-container no-border-top-datagrid"
+        .template=${html`
+          <style>${eventDisplayTableStyles}</style>
+          <table>
+            <thead>
+              <tr>
+                <th id="display-timestamp" weight="1">${i18nString(UIStrings.timestamp)}</th>
+                <th id="event" weight="2">${i18nString(UIStrings.eventName)}</th>
+                <th id="value" weight="7">${i18nString(UIStrings.value)}</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${repeat(input.parsedEvents, event => event, event => html`
+                <tr>
+                  <td class="event-display-table-basic-text-table-entry">${event.displayTimestamp}</td>
+                  <td class="event-display-table-basic-text-table-entry">${event.event}</td>
+                  <td class="event-display-table-contents-json-wrapper">
+                    ${widget(el => new SourceFrame.JSONView.JSONView(new SourceFrame.JSONView.ParsedJSON(event.value, '', ''), true, el))}
+                  </td>
+                </tr>
+              `)}
+            </tbody>
+          </table>
+        `}>
+      </devtools-data-grid>
+    `,
+         // clang-format on
+         target);
+};
 
 export class PlayerEventsView extends UI.Widget.VBox {
-  private readonly dataGrid: DataGrid.DataGrid.DataGridImpl<EventNode>;
   private firstEventTime: number;
+  #view: View;
+  #parsedEvents: EventDisplayRow[] = [];
 
-  constructor() {
+  constructor(view: View = DEFAULT_VIEW) {
     super({jslog: `${VisualLogging.pane('events')}`});
-    this.registerRequiredCSS(eventDisplayTableStyles);
-
-    // Set up element styles.
-
-    this.contentElement.classList.add('event-display-table-contents-table-container');
-
-    this.dataGrid = this.createDataGrid([
-      {
-        id: MediaEventColumnKeys.TIMESTAMP,
-        title: i18nString(UIStrings.timestamp),
-        weight: 1,
-        sortable: false,
-      },
-      {id: MediaEventColumnKeys.EVENT, title: i18nString(UIStrings.eventName), weight: 2, sortable: false},
-      {
-        id: MediaEventColumnKeys.VALUE,
-        title: i18nString(UIStrings.value),
-        weight: 7,
-        sortable: false,
-      },
-    ]);
-
+    this.#view = view;
     this.firstEventTime = 0;
-    this.dataGrid.setStriped(true);
-    this.dataGrid.asWidget().show(this.contentElement);
+    this.requestUpdate();
   }
 
-  private createDataGrid(headers: EventDisplayColumnConfig[]): DataGrid.DataGrid.DataGridImpl<EventNode> {
-    const gridColumnDescs = [];
-    for (const headerDesc of headers) {
-      gridColumnDescs.push(PlayerEventsView.convertToGridDescriptor(headerDesc));
-    }
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
 
-    // TODO(tmathmeyer) SortableDataGrid doesn't play nice with nested JSON
-    // renderers, since they can change size, and this breaks the visible
-    // element computation in ViewportDataGrid.
-    const datagrid = new DataGrid.DataGrid.DataGridImpl({
-      displayName: i18nString(UIStrings.eventDisplay),
-      columns: gridColumnDescs,
-    });
-    datagrid.asWidget().contentElement.classList.add('no-border-top-datagrid');
-    return datagrid;
+  override performUpdate(): void {
+    const viewInput = {
+      parsedEvents: this.#parsedEvents,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 
   onEvent(event: PlayerEvent): void {
@@ -133,14 +118,12 @@ export class PlayerEventsView extends UI.Widget.VBox {
       const json = JSON.parse(stringified);
       event.event = json.event;
       delete json['event'];
-      event.value = json;
-      const node = new EventNode(event);
-      const scroll = this.dataGrid.scrollContainer;
-      const isAtBottom = scroll.scrollTop === (scroll.scrollHeight - scroll.offsetHeight);
-      this.dataGrid.rootNode().appendChild(node as DataGrid.DataGrid.DataGridNode<EventNode>);
-      if (isAtBottom) {
-        scroll.scrollTop = scroll.scrollHeight;
-      }
+      this.#parsedEvents.push({
+        displayTimestamp: event.displayTimestamp,
+        event: event.event,
+        value: json,
+      });
+      this.requestUpdate();
     } catch {
       // If this is a legacy message event, ignore it for now until they
       // are handled.
@@ -153,14 +136,4 @@ export class PlayerEventsView extends UI.Widget.VBox {
     }
     return event;
   }
-
-  private static convertToGridDescriptor(columnConfig: EventDisplayColumnConfig): DataGrid.DataGrid.ColumnDescriptor {
-    return {
-      id: columnConfig.id,
-      title: columnConfig.title as Common.UIString.LocalizedString,
-      sortable: columnConfig.sortable,
-      weight: columnConfig.weight || 0,
-      sort: DataGrid.DataGrid.Order.Ascending,
-    };
-  }
 }

package/front_end/panels/media/PlayerListView.ts

@@ -97,7 +97,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
       })}
       </div>
     `,
-    target
+    target,
   );
   // clang-format on
 };

package/front_end/panels/media/eventDisplayTable.css

@@ -4,19 +4,24 @@
  * found in the LICENSE file.
  */
 
-.no-border-top-datagrid > .data-grid {
+devtools-data-grid.no-border-top-datagrid {
   /* make sure there is no top border, it ruins the menu view */
   border-top: 0;
 }
 
-.event-display-table-contents-table-container > .widget > .data-grid {
+devtools-data-grid.event-display-table-contents-table-container {
   height: 100%;
 }
 
-.data-grid .event-display-table-basic-text-table-entry {
+.event-display-table-basic-text-table-entry {
   line-height: 26px;
 }
 
-.event-display-table-contents-json-wrapper > .json-view {
+.event-display-table-contents-json-wrapper > devtools-widget.json-view {
   overflow: visible;
 }
+
+.data-grid > .data-container > table.data {
+  height: auto;
+  table-layout: auto;
+}

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -151,9 +151,9 @@ export const DEFAULT_VIEW: ViewFunction = (input, output, target) => {
           attributes: {
             disabled: input.disabled,
             'aria-label': input.title,
-            jslog: `${VisualLogging.dropDown(input.jslogContext).track({change: true})}`
-          }
-        }
+            jslog: `${VisualLogging.dropDown(input.jslogContext).track({change: true})}`,
+          },
+        },
       });
 };
 
@@ -321,7 +321,7 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<Eve
                 SDK.NetworkManager.Slow4GConditions,
                 SDK.NetworkManager.Slow3GConditions,
                 SDK.NetworkManager.OfflineConditions,
-              ]
+              ],
             });
         break;
       case NetworkThrottlingSelect.Variant.INDIVIDUAL_REQUEST_CONDITIONS:
@@ -333,7 +333,7 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<Eve
                 SDK.NetworkManager.Fast4GConditions,
                 SDK.NetworkManager.Slow4GConditions,
                 SDK.NetworkManager.Slow3GConditions,
-              ]
+              ],
             },
         );
         break;

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -562,7 +562,7 @@ export class ThrottlingSettingsTab extends UI.Widget.VBox implements
       upload: -1,
       latency: 0,
       packetLoss: 0,
-      packetReordering: false
+      packetReordering: false,
     });
   }