[RPP] Use Live Metrics page/device scope options for trace view

Instead of doing URL (w/ fallback to origin) + "ALL" devices, utilize
the user configuration set on the Live Metrics view.

Bug: 368135130
Change-Id: I49042a2e4e77a1577ffccffc196d572fd0ceb770
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6217306
Auto-Submit: Connor Clark <[email protected]>
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Connor Clark <[email protected]>
Commit-Queue: Paul Irish <[email protected]>

Author: Connor Clark

front_end/models/crux-manager/CrUXManager.ts

@@ -29,6 +29,10 @@ export type FormFactor = 'DESKTOP'|'PHONE'|'TABLET';
 export type DeviceScope = FormFactor|'ALL';
 export type DeviceOption = DeviceScope|'AUTO';
 export type PageScope = 'url'|'origin';
+export interface Scope {
+  pageScope: PageScope;
+  deviceScope: DeviceScope;
+}
 export type ConnectionType = 'offline'|'slow-2G'|'2G'|'3G'|'4G';
 
 export interface CrUXRequest {
@@ -384,6 +388,10 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.fieldDeviceOption === 'AUTO' ? this.#getAutoDeviceScope() : this.fieldDeviceOption;
   }
 
+  getSelectedScope(): Scope {
+    return {pageScope: this.fieldPageScope, deviceScope: this.getSelectedDeviceScope()};
+  }
+
   getSelectedFieldResponse(): CrUXResponse|null|undefined {
     const pageScope = this.fieldPageScope;
     const deviceScope = this.getSelectedDeviceScope();

front_end/models/trace/insights/Common.ts

@@ -99,38 +99,45 @@ export interface CrUXFieldMetricResults {
   cls: CrUXFieldMetricNumberResult|null;
 }
 
-function getPageResult(cruxFieldData: CrUXManager.PageResult[], url: string, origin: string): CrUXManager.PageResult|
-    undefined {
+function getPageResult(
+    cruxFieldData: CrUXManager.PageResult[], url: string, origin: string,
+    scope: CrUXManager.Scope|null = null): CrUXManager.PageResult|undefined {
   return cruxFieldData.find(result => {
-    const key = (result['url-ALL'] || result['origin-ALL'])?.record.key;
+    const key = scope ? result[`${scope.pageScope}-${scope.deviceScope}`]?.record.key :
+                        (result['url-ALL'] || result['origin-ALL'])?.record.key;
     return (key?.url && key.url === url) || (key?.origin && key.origin === origin);
   });
 }
 
 function getMetricResult(
-    pageResult: CrUXManager.PageResult, name: CrUXManager.StandardMetricNames): CrUXFieldMetricNumberResult|null {
-  let value = pageResult['url-ALL']?.record.metrics[name]?.percentiles?.p75;
-  if (typeof value === 'string') {
-    value = Number(value);
-  }
-  if (typeof value === 'number' && Number.isFinite(value)) {
-    return {value, pageScope: 'url'};
-  }
-
-  value = pageResult['origin-ALL']?.record.metrics[name]?.percentiles?.p75;
-  if (typeof value === 'string') {
-    value = Number(value);
-  }
-  if (typeof value === 'number' && Number.isFinite(value)) {
-    return {value, pageScope: 'origin'};
+    pageResult: CrUXManager.PageResult, name: CrUXManager.StandardMetricNames,
+    scope: CrUXManager.Scope|null = null): CrUXFieldMetricNumberResult|null {
+  const scopes: Array<{pageScope: CrUXManager.PageScope, deviceScope: CrUXManager.DeviceScope}> = [];
+  if (scope) {
+    scopes.push(scope);
+  } else {
+    scopes.push({pageScope: 'url', deviceScope: 'ALL'});
+    scopes.push({pageScope: 'origin', deviceScope: 'ALL'});
+  }
+
+  for (const scope of scopes) {
+    const key = `${scope.pageScope}-${scope.deviceScope}` as const;
+    let value = pageResult[key]?.record.metrics[name]?.percentiles?.p75;
+    if (typeof value === 'string') {
+      value = Number(value);
+    }
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      return {value, pageScope: scope.pageScope};
+    }
   }
 
   return null;
 }
 
 function getMetricTimingResult(
-    pageResult: CrUXManager.PageResult, name: CrUXManager.StandardMetricNames): CrUXFieldMetricTimingResult|null {
-  const result = getMetricResult(pageResult, name);
+    pageResult: CrUXManager.PageResult, name: CrUXManager.StandardMetricNames,
+    scope: CrUXManager.Scope|null = null): CrUXFieldMetricTimingResult|null {
+  const result = getMetricResult(pageResult, name, scope);
   if (result) {
     const valueMs = result.value as Types.Timing.Milli;
     return {value: Helpers.Timing.milliToMicro(valueMs), pageScope: result.pageScope};
@@ -140,22 +147,23 @@ function getMetricTimingResult(
 }
 
 export function getFieldMetricsForInsightSet(
-    insightSet: InsightSet, metadata: Types.File.MetaData|null): CrUXFieldMetricResults|null {
+    insightSet: InsightSet, metadata: Types.File.MetaData|null,
+    scope: CrUXManager.Scope|null = null): CrUXFieldMetricResults|null {
   const cruxFieldData = metadata?.cruxFieldData;
   if (!cruxFieldData) {
     return null;
   }
 
-  const pageResult = getPageResult(cruxFieldData, insightSet.url.href, insightSet.url.origin);
+  const pageResult = getPageResult(cruxFieldData, insightSet.url.href, insightSet.url.origin, scope);
   if (!pageResult) {
     return null;
   }
 
   return {
-    fcp: getMetricTimingResult(pageResult, 'first_contentful_paint'),
-    lcp: getMetricTimingResult(pageResult, 'largest_contentful_paint'),
-    inp: getMetricTimingResult(pageResult, 'interaction_to_next_paint'),
-    cls: getMetricResult(pageResult, 'cumulative_layout_shift'),
+    fcp: getMetricTimingResult(pageResult, 'first_contentful_paint', scope),
+    lcp: getMetricTimingResult(pageResult, 'largest_contentful_paint', scope),
+    inp: getMetricTimingResult(pageResult, 'interaction_to_next_paint', scope),
+    cls: getMetricResult(pageResult, 'cumulative_layout_shift', scope),
   };
 }
 

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -8,6 +8,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -567,7 +568,9 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     for (const [key, insightSet] of this.#traceInsightSets) {
       if (insightSet.navigation) {
         fieldMetricResultsByNavigationId.set(
-            key, Trace.Insights.Common.getFieldMetricsForInsightSet(insightSet, this.#traceMetadata));
+            key,
+            Trace.Insights.Common.getFieldMetricsForInsightSet(
+                insightSet, this.#traceMetadata, CrUXManager.CrUXManager.instance().getSelectedScope()));
       }
     }
 

front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -5,6 +5,7 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
+import * as CrUXManager from '../../../models/crux-manager/crux-manager.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';
@@ -211,32 +212,17 @@ export class SidebarSingleInsightSet extends HTMLElement {
 
   #getFieldMetrics(insightSetKey: string): Omit<Trace.Insights.Common.CrUXFieldMetricResults, 'fcp'>|null {
     const insightSet = this.#data.insights?.get(insightSetKey);
-    const fieldMetricsResults =
-        insightSet && Trace.Insights.Common.getFieldMetricsForInsightSet(insightSet, this.#data.traceMetadata);
-    if (!fieldMetricsResults) {
+    if (!insightSet) {
       return null;
     }
 
-    let {lcp, inp, cls} = fieldMetricsResults;
-
-    // Only show field data from the Origin or URL datasets, but never a mix.
-    if (lcp?.pageScope === 'url' || inp?.pageScope === 'url' || cls?.pageScope === 'url') {
-      if (lcp?.pageScope === 'origin') {
-        lcp = null;
-      }
-      if (inp?.pageScope === 'origin') {
-        inp = null;
-      }
-      if (cls?.pageScope === 'origin') {
-        cls = null;
-      }
-    }
-
-    if (!(lcp || cls || inp)) {
+    const fieldMetricsResults = Trace.Insights.Common.getFieldMetricsForInsightSet(
+        insightSet, this.#data.traceMetadata, CrUXManager.CrUXManager.instance().getSelectedScope());
+    if (!fieldMetricsResults) {
       return null;
     }
 
-    return {lcp, cls, inp};
+    return fieldMetricsResults;
   }
 
   /**