chrome-devtools-frontend 1.0.1603822 → 1.0.1604514

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -21,8 +21,6 @@ import * as EmulationModel from '../../../models/emulation/emulation.js';
 import * as LiveMetrics from '../../../models/live-metrics/live-metrics.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as Settings from '../../../ui/components/settings/settings.js';
@@ -40,7 +38,7 @@ import metricValueStyles from './metricValueStyles.css.js';
 import {CLS_THRESHOLDS, INP_THRESHOLDS, renderMetricValue} from './Utils.js';
 
 const {html, nothing} = Lit;
-const {widget} = UI.Widget;
+const {widget, widgetRef} = UI.Widget;
 
 type DeviceOption = CrUXManager.DeviceScope|'AUTO';
 
@@ -305,9 +303,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/LiveMetricsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-
+export class LiveMetricsView extends UI.Widget.Widget {
   isNode = Root.Runtime.Runtime.isNode();
 
   #lcpValue?: LiveMetrics.LcpValue;
@@ -328,8 +324,8 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   #listIsScrolling = false;
   #deviceModeModel = EmulationModel.DeviceModeModel.DeviceModeModel.tryInstance();
 
-  constructor() {
-    super();
+  constructor(element?: HTMLElement) {
+    super(element, {useShadowDom: true});
 
     this.#toggleRecordAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.toggle-recording');
     this.#recordReloadAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.record-reload');
@@ -346,14 +342,14 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     const hasNewInteraction = this.#interactions.size < event.data.interactions.size;
     this.#interactions = new Map(event.data.interactions);
 
-    const renderPromise = ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
 
     if (hasNewInteraction && this.#interactionsListEl) {
-      this.#keepScrolledToBottom(renderPromise, this.#interactionsListEl);
+      this.#keepScrolledToBottom(this.updateComplete, this.#interactionsListEl);
     }
 
     if (hasNewLS && this.#layoutShiftsListEl) {
-      this.#keepScrolledToBottom(renderPromise, this.#layoutShiftsListEl);
+      this.#keepScrolledToBottom(this.updateComplete, this.#layoutShiftsListEl);
     }
   }
 
@@ -384,21 +380,22 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   }
 
   #onFieldDataChanged(): void {
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
   #onEmulationChanged(): void {
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
   async #refreshFieldDataForCurrentPage(): Promise<void> {
     if (!this.isNode) {
       await this.#cruxManager.refresh();
     }
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
-  connectedCallback(): void {
+  override wasShown(): void {
+    super.wasShown();
     const liveMetrics = LiveMetrics.LiveMetrics.instance();
     liveMetrics.addEventListener(LiveMetrics.Events.STATUS, this.#onMetricStatus, this);
 
@@ -417,10 +414,11 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     this.#inpValue = liveMetrics.inpValue;
     this.#interactions = liveMetrics.interactions;
     this.#layoutShifts = liveMetrics.layoutShifts;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
-  disconnectedCallback(): void {
+  override willHide(): void {
+    super.willHide();
     LiveMetrics.LiveMetrics.instance().removeEventListener(LiveMetrics.Events.STATUS, this.#onMetricStatus, this);
 
     const cruxManager = CrUXManager.CrUXManager.instance();
@@ -683,7 +681,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     } else {
       this.#cruxManager.fieldPageScope = 'origin';
     }
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
   #renderPageScopeSetting(): Lit.LitTemplate {
@@ -768,7 +766,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
   #onDeviceOptionMenuItemSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
     this.#cruxManager.fieldDeviceOption = event.itemValue as DeviceOption;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
   #renderDeviceScopeSetting(): Lit.LitTemplate {
@@ -922,23 +920,21 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         class="logs-section"
         aria-label=${i18nString(UIStrings.eventLogs)}
       >
-        <devtools-live-metrics-logs
-          ${Lit.Directives.ref(el => {
-            if (el instanceof HTMLElement) {
-              this.#logsEl = el as LiveMetricsLogs;
-            }
+        <devtools-widget ${widget(LiveMetricsLogs)}
+          ${widgetRef(LiveMetricsLogs, widget => {
+            this.#logsEl = widget;
           })}
         >
           ${this.#renderInteractionsLog()}
           ${this.#renderLayoutShiftsLog()}
-        </devtools-live-metrics-logs>
+        </devtools-widget>
       </section>
     `;
     // clang-format on
   }
 
   async #revealInteraction(interaction: LiveMetrics.Interaction): Promise<void> {
-    const interactionEl = this.#shadow.getElementById(interaction.interactionId);
+    const interactionEl = this.contentElement.querySelector<HTMLElement>('#' + CSS.escape(interaction.interactionId));
     if (!interactionEl || !this.#logsEl) {
       return;
     }
@@ -1052,7 +1048,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
     const layoutShiftEls: HTMLElement[] = [];
     for (const shiftId of clusterIds) {
-      const layoutShiftEl = this.#shadow.getElementById(shiftId);
+      const layoutShiftEl = this.contentElement.querySelector<HTMLElement>('#' + CSS.escape(shiftId));
       if (layoutShiftEl) {
         layoutShiftEls.push(layoutShiftEl);
       }
@@ -1136,9 +1132,9 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     `;
   }
 
-  #render = (): void => {
+  override performUpdate(): void {
     if (this.isNode) {
-      Lit.render(this.#renderNodeView(), this.#shadow, {host: this});
+      Lit.render(this.#renderNodeView(), this.contentElement, {host: this});
       return;
     }
 
@@ -1205,33 +1201,25 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </div>
       </div>
     `;
-    Lit.render(output, this.#shadow, {host: this});
-  };
+    Lit.render(output, this.contentElement, {host: this});
+  }
   // clang-format on
 }
 
-class LiveMetricsLogs extends UI.Widget.WidgetElement<UI.Widget.Widget> {
-  #tabbedPane?: UI.TabbedPane.TabbedPane;
-
-  constructor() {
-    super();
-    this.style.display = 'contents';
-  }
+class LiveMetricsLogs extends UI.Widget.Widget {
+  #tabbedPane: UI.TabbedPane.TabbedPane;
 
   /**
    * Returns `true` if selecting the tab was successful.
    */
   selectTab(tabId: string): boolean {
-    if (!this.#tabbedPane) {
-      return false;
-    }
     return this.#tabbedPane.selectTab(tabId);
   }
 
   #clearCurrentLog(): void {
     const liveMetrics = LiveMetrics.LiveMetrics.instance();
 
-    switch (this.#tabbedPane?.selectedTabId) {
+    switch (this.#tabbedPane.selectedTabId) {
       case 'interactions':
         liveMetrics.clearInteractions();
         break;
@@ -1240,16 +1228,12 @@ class LiveMetricsLogs extends UI.Widget.WidgetElement<UI.Widget.Widget> {
         break;
     }
   }
-
-  override createWidget(): UI.Widget.Widget {
-    // We need a generic widget with a shadow DOM as the container widget so that we can take advantage
-    // of web component slots. Passing `this` into the container widget will make `this` the root element
-    // of that widget.
-    //
+  constructor(element: HTMLElement) {
+    super(element, {useShadowDom: true});
+    this.element.style.display = 'contents';
     // Any children of the root element `this` will be matched to the slots defined within the container
     // widget's shadow DOM.
-    const containerWidget = new UI.Widget.Widget(this, {useShadowDom: true});
-    containerWidget.contentElement.style.display = 'contents';
+    this.contentElement.style.display = 'contents';
 
     this.#tabbedPane = new UI.TabbedPane.TabbedPane();
 
@@ -1273,18 +1257,6 @@ class LiveMetricsLogs extends UI.Widget.WidgetElement<UI.Widget.Widget> {
         i18nString(UIStrings.clearCurrentLog), 'clear', undefined, 'timeline.landing.clear-log');
     clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#clearCurrentLog, this);
     this.#tabbedPane.rightToolbar().appendToolbarItem(clearButton);
-    this.#tabbedPane.show(containerWidget.contentElement);
-
-    return containerWidget;
-  }
-}
-
-customElements.define('devtools-live-metrics-view', LiveMetricsView);
-customElements.define('devtools-live-metrics-logs', LiveMetricsLogs);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-live-metrics-view': LiveMetricsView;
-    'devtools-live-metrics-logs': LiveMetricsLogs;
+    this.#tabbedPane.show(this.contentElement);
   }
 }

package/front_end/panels/timeline/components/liveMetricsView.css

@@ -37,6 +37,10 @@
   flex-direction: column;
 }
 
+.live-metrics > * {
+  flex-shrink: 0;
+}
+
 .next-steps {
   flex: 0 0 336px;
   box-sizing: border-box;

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 0eb4855bda702feaaa8b899336664f97e3df88b8
+Revision: c9e49d7cdbbc11a6a70bb2573f5a18cb23c1789b
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1603822"
+  "version": "1.0.1604514"
 }