chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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

@@ -17,22 +17,50 @@ import * as Components from './components.js';
 
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
+function renderLiveMetrics(): Components.LiveMetricsView.LiveMetricsView {
+  const root = document.createElement('div');
+  renderElementIntoDOM(root);
+
+  const widget = new UI.Widget.Widget();
+  widget.markAsRoot();
+  widget.show(root);
+
+  const view = new Components.LiveMetricsView.LiveMetricsView();
+  widget.contentElement.append(view);
+
+  return view;
+}
+
 function getFieldMetricValue(view: Element, metric: string): HTMLElement|null {
   const card = view.shadowRoot!.querySelector(`#${metric} devtools-metric-card`);
   return card!.shadowRoot!.querySelector('#field-value .metric-value');
 }
 
 function getEnvironmentRecs(view: Element): HTMLElement[] {
-  return Array.from(view.shadowRoot!.querySelectorAll<HTMLElement>('.environment-recs li'));
+  return Array.from(view.shadowRoot!.querySelectorAll<HTMLElement>('.environment-rec'));
 }
 
 function getInteractions(view: Element): HTMLElement[] {
-  const interactionsListEl = view.shadowRoot!.querySelector('.interactions-list');
+  const interactionsListEl = view.shadowRoot!.querySelector('.log[slot="interactions-log-content"]');
   return Array.from(interactionsListEl?.querySelectorAll('.interaction') || []) as HTMLElement[];
 }
 
-function getClearInteractionsButton(view: Element): HTMLElementTagNameMap['devtools-button']|null {
-  return view.shadowRoot!.querySelector('.interactions-clear') as HTMLElementTagNameMap['devtools-button'] | null;
+function getLayoutShifts(view: Element): HTMLElement[] {
+  const interactionsListEl = view.shadowRoot!.querySelector('.log[slot="layout-shifts-log-content"]');
+  return Array.from(interactionsListEl?.querySelectorAll('.layout-shift') || []) as HTMLElement[];
+}
+
+function selectVisibleLog(view: Element, logId: string): void {
+  view.shadowRoot!.querySelector('devtools-live-metrics-logs')!.shadowRoot!.querySelector('.tabbed-pane')!.shadowRoot!
+      .getElementById(`tab-${logId}`)
+      ?.dispatchEvent(
+          new MouseEvent('mousedown', {bubbles: true}),
+      );
+}
+
+function getClearLogButton(view: Element): HTMLElementTagNameMap['devtools-button'] {
+  return view.shadowRoot!.querySelector('devtools-live-metrics-logs')!.shadowRoot!.querySelector('.tabbed-pane')!
+      .shadowRoot!.querySelector('.toolbar')!.shadowRoot!.querySelector('devtools-button')!;
 }
 
 function selectDeviceOption(view: Element, deviceOption: string): void {
@@ -58,10 +86,6 @@ function getFieldMessage(view: Element): HTMLElement|null {
   return view.shadowRoot!.querySelector('#field-setup .field-data-message');
 }
 
-function getDataDescriptions(view: Element): HTMLElement {
-  return view.shadowRoot!.querySelector('.data-descriptions') as HTMLElement;
-}
-
 function getLiveMetricsTitle(view: Element): HTMLElement {
   // There may be multiple, but this should always be the first one.
   return view.shadowRoot!.querySelector('.live-metrics > .section-title') as HTMLElement;
@@ -71,6 +95,10 @@ function getInpInteractionLink(view: Element): HTMLElement|null {
   return view.shadowRoot!.querySelector<HTMLElement>('#inp .related-info button');
 }
 
+function getClsClusterLink(view: Element): HTMLElement|null {
+  return view.shadowRoot!.querySelector<HTMLElement>('#cls .related-info button');
+}
+
 function createMockFieldData() {
   return {
     record: {
@@ -116,15 +144,16 @@ function createMockFieldData() {
   };
 }
 
+function createInteractionsMap(interactions: LiveMetrics.Interaction[]): LiveMetrics.InteractionMap {
+  return new Map(interactions.map(interaction => [interaction.interactionId, interaction]));
+}
+
 describeWithMockConnection('LiveMetricsView', () => {
   const mockHandleAction = sinon.stub();
-  let mockReveal = sinon.stub();
 
   beforeEach(async () => {
     mockHandleAction.reset();
 
-    mockReveal = sinon.stub(Common.Revealer.RevealerRegistry.instance(), 'reveal');
-
     UI.ActionRegistration.registerActionExtension({
       actionId: 'timeline.toggle-recording',
       category: UI.ActionRegistration.ActionCategory.PERFORMANCE,
@@ -160,9 +189,8 @@ describeWithMockConnection('LiveMetricsView', () => {
   });
 
   it('should show interactions', async () => {
-    const view = new Components.LiveMetricsView.LiveMetricsView();
-    renderElementIntoDOM(view);
-    LiveMetrics.LiveMetrics.instance().dispatchEventToListeners(LiveMetrics.Events.STATUS, {
+    const view = renderLiveMetrics();
+    LiveMetrics.LiveMetrics.instance().setStatusForTesting({
       inp: {
         value: 500,
         phases: {
@@ -170,12 +198,30 @@ describeWithMockConnection('LiveMetricsView', () => {
           processingDuration: 300,
           presentationDelay: 100,
         },
-        uniqueInteractionId: 'interaction-1-1',
+        interactionId: 'interaction-1-1',
       },
-      interactions: [
-        {duration: 500, interactionType: 'pointer', uniqueInteractionId: 'interaction-1-1'},
-        {duration: 30, interactionType: 'keyboard', uniqueInteractionId: 'interaction-1-2'},
-      ],
+      interactions: createInteractionsMap([
+        {
+          duration: 500,
+          startTime: 0,
+          nextPaintTime: 500,
+          interactionType: 'pointer',
+          interactionId: 'interaction-1-1',
+          eventNames: ['pointerup'],
+          phases: {inputDelay: 100, processingDuration: 300, presentationDelay: 100},
+          longAnimationFrameTimings: [],
+        },
+        {
+          duration: 30,
+          startTime: 0,
+          nextPaintTime: 30,
+          interactionType: 'keyboard',
+          interactionId: 'interaction-1-2',
+          eventNames: ['keyup'],
+          phases: {inputDelay: 10, processingDuration: 10, presentationDelay: 10},
+          longAnimationFrameTimings: [],
+        },
+      ]),
       layoutShifts: [],
     });
     await coordinator.done();
@@ -183,6 +229,13 @@ describeWithMockConnection('LiveMetricsView', () => {
     const interactionsEls = getInteractions(view);
     assert.lengthOf(interactionsEls, 2);
 
+    // Click each interaction so we can test the expandable details.
+    for (const interactionEl of interactionsEls) {
+      interactionEl.querySelector('summary')!.click();
+    }
+
+    await coordinator.done();
+
     const typeEl1 = interactionsEls[0].querySelector('.interaction-type') as HTMLDivElement;
     assert.match(typeEl1.textContent!, /pointer/);
 
@@ -193,6 +246,15 @@ describeWithMockConnection('LiveMetricsView', () => {
     assert.strictEqual(durationEl1.textContent, '500 ms');
     assert.strictEqual(durationEl1.className, 'metric-value needs-improvement dim');
 
+    const phases1 =
+        Array.from(interactionsEls[0].querySelectorAll<HTMLElement>('.phase-table-row:not(.phase-table-header-row)'))
+            .map(el => el.innerText);
+    assert.deepStrictEqual(phases1, [
+      'Input delay\n100',
+      'Processing duration\n300',
+      'Presentation delay\n100',
+    ]);
+
     const typeEl2 = interactionsEls[1].querySelector('.interaction-type') as HTMLDivElement;
     assert.match(typeEl2.textContent!, /keyboard/);
 
@@ -202,12 +264,72 @@ describeWithMockConnection('LiveMetricsView', () => {
     const durationEl2 = interactionsEls[1].querySelector('.interaction-duration .metric-value') as HTMLDivElement;
     assert.strictEqual(durationEl2.textContent, '30 ms');
     assert.strictEqual(durationEl2.className, 'metric-value good dim');
+
+    const phases2 =
+        Array.from(interactionsEls[1].querySelectorAll<HTMLElement>('.phase-table-row:not(.phase-table-header-row)'))
+            .map(el => el.innerText);
+    assert.deepStrictEqual(phases2, [
+      'Input delay\n10',
+      'Processing duration\n10',
+      'Presentation delay\n10',
+    ]);
+  });
+
+  it('should show button to log script details to console', async () => {
+    const view = renderLiveMetrics();
+    LiveMetrics.LiveMetrics.instance().setStatusForTesting({
+      inp: {
+        value: 500,
+        phases: {
+          inputDelay: 100,
+          processingDuration: 300,
+          presentationDelay: 100,
+        },
+        interactionId: 'interaction-1-1',
+      },
+      interactions: createInteractionsMap([
+        {
+          duration: 500,
+          startTime: 0,
+          nextPaintTime: 500,
+          interactionType: 'pointer',
+          interactionId: 'interaction-1-1',
+          eventNames: ['pointerup'],
+          phases: {inputDelay: 100, processingDuration: 300, presentationDelay: 100},
+          longAnimationFrameTimings: [{
+            renderStart: 0,
+            duration: 0,
+            scripts: [],
+          }],
+        },
+        {
+          duration: 30,
+          startTime: 0,
+          nextPaintTime: 30,
+          interactionType: 'keyboard',
+          interactionId: 'interaction-1-2',
+          eventNames: ['keyup'],
+          phases: {inputDelay: 10, processingDuration: 10, presentationDelay: 10},
+          longAnimationFrameTimings: [],
+        },
+      ]),
+      layoutShifts: [],
+    });
+    await coordinator.done();
+
+    const interactions = getInteractions(view);
+    assert.lengthOf(interactions, 2);
+
+    assert(
+        interactions[0].querySelector('.log-extra-details-button'), 'First interaction should have log details button');
+    assert(
+        !interactions[1].querySelector('.log-extra-details-button'),
+        'Second interaction should not have log details button');
   });
 
   it('should show help icon for interaction that is longer than INP', async () => {
-    const view = new Components.LiveMetricsView.LiveMetricsView();
-    renderElementIntoDOM(view);
-    LiveMetrics.LiveMetrics.instance().dispatchEventToListeners(LiveMetrics.Events.STATUS, {
+    const view = renderLiveMetrics();
+    LiveMetrics.LiveMetrics.instance().setStatusForTesting({
       inp: {
         value: 50,
         phases: {
@@ -215,12 +337,30 @@ describeWithMockConnection('LiveMetricsView', () => {
           processingDuration: 30,
           presentationDelay: 10,
         },
-        uniqueInteractionId: 'interaction-1-2',
+        interactionId: 'interaction-1-2',
       },
-      interactions: [
-        {duration: 50, interactionType: 'keyboard', uniqueInteractionId: 'interaction-1-1'},
-        {duration: 500, interactionType: 'pointer', uniqueInteractionId: 'interaction-1-2'},
-      ],
+      interactions: createInteractionsMap([
+        {
+          duration: 50,
+          startTime: 0,
+          nextPaintTime: 50,
+          interactionType: 'keyboard',
+          interactionId: 'interaction-1-1',
+          eventNames: ['keyup'],
+          phases: {inputDelay: 10, processingDuration: 30, presentationDelay: 10},
+          longAnimationFrameTimings: [],
+        },
+        {
+          duration: 500,
+          startTime: 0,
+          nextPaintTime: 500,
+          interactionType: 'pointer',
+          interactionId: 'interaction-1-2',
+          eventNames: ['pointerup'],
+          phases: {inputDelay: 100, processingDuration: 300, presentationDelay: 100},
+          longAnimationFrameTimings: [],
+        },
+      ]),
       layoutShifts: [],
     });
     await coordinator.done();
@@ -249,10 +389,79 @@ describeWithMockConnection('LiveMetricsView', () => {
     assert.strictEqual(durationEl2!.className, 'metric-value needs-improvement dim');
   });
 
+  it('should reveal CLS cluster when link clicked', async () => {
+    const view = renderLiveMetrics();
+    LiveMetrics.LiveMetrics.instance().setStatusForTesting({
+      cls: {
+        value: 0.11,
+        clusterShiftIds: ['layout-shift-1-2', 'layout-shift-1-3'],
+      },
+      interactions: new Map(),
+      layoutShifts: [
+        {score: 0.05, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-1'},
+        {score: 0.1, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-2'},
+        {score: 0.01, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-3'},
+      ],
+    });
+    await coordinator.done();
+
+    selectVisibleLog(view, 'interactions');
+
+    await coordinator.done();
+
+    const firstClusterShift = getLayoutShifts(view).find(el => el.id === 'layout-shift-1-2')!;
+    assert.isFalse(firstClusterShift.checkVisibility());
+    assert.isFalse(firstClusterShift.hasFocus());
+
+    getClsClusterLink(view)!.click();
+
+    await coordinator.done();
+
+    assert.isTrue(firstClusterShift.checkVisibility());
+    assert.isTrue(firstClusterShift.hasFocus());
+  });
+
+  it('should hide CLS cluster link if there is no defined cluster', async () => {
+    const view = renderLiveMetrics();
+    LiveMetrics.LiveMetrics.instance().setStatusForTesting({
+      cls: {
+        value: 0.11,
+        clusterShiftIds: [],
+      },
+      interactions: new Map(),
+      layoutShifts: [
+        {score: 0.05, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-1'},
+        {score: 0.1, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-2'},
+        {score: 0.01, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-3'},
+      ],
+    });
+    await coordinator.done();
+
+    assert.isNull(getClsClusterLink(view));
+  });
+
+  it('should hide CLS cluster link if there are no matching shifts', async () => {
+    const view = renderLiveMetrics();
+    LiveMetrics.LiveMetrics.instance().setStatusForTesting({
+      cls: {
+        value: 0.11,
+        clusterShiftIds: ['layout-shift-2-0'],
+      },
+      interactions: new Map(),
+      layoutShifts: [
+        {score: 0.05, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-1'},
+        {score: 0.1, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-2'},
+        {score: 0.01, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-3'},
+      ],
+    });
+    await coordinator.done();
+
+    assert.isNull(getClsClusterLink(view));
+  });
+
   it('should reveal INP interaction when link clicked', async () => {
-    const view = new Components.LiveMetricsView.LiveMetricsView();
-    renderElementIntoDOM(view);
-    LiveMetrics.LiveMetrics.instance().dispatchEventToListeners(LiveMetrics.Events.STATUS, {
+    const view = renderLiveMetrics();
+    LiveMetrics.LiveMetrics.instance().setStatusForTesting({
       inp: {
         value: 500,
         phases: {
@@ -260,34 +469,54 @@ describeWithMockConnection('LiveMetricsView', () => {
           processingDuration: 300,
           presentationDelay: 100,
         },
-        uniqueInteractionId: 'interaction-1-1',
+        interactionId: 'interaction-1-1',
       },
-      interactions: [
-        {duration: 500, interactionType: 'pointer', uniqueInteractionId: 'interaction-1-1'},
-        {duration: 30, interactionType: 'keyboard', uniqueInteractionId: 'interaction-1-2'},
-      ],
+      interactions: createInteractionsMap([
+        {
+          duration: 500,
+          startTime: 0,
+          nextPaintTime: 500,
+          interactionType: 'pointer',
+          interactionId: 'interaction-1-1',
+          eventNames: ['pointerup'],
+          phases: {inputDelay: 100, processingDuration: 300, presentationDelay: 100},
+          longAnimationFrameTimings: [],
+        },
+        {
+          duration: 30,
+          startTime: 0,
+          nextPaintTime: 30,
+          interactionType: 'keyboard',
+          interactionId: 'interaction-1-2',
+          eventNames: ['keyup'],
+          phases: {inputDelay: 10, processingDuration: 10, presentationDelay: 10},
+          longAnimationFrameTimings: [],
+        },
+      ]),
       layoutShifts: [],
     });
     await coordinator.done();
 
+    selectVisibleLog(view, 'layout-shifts');
+
+    await coordinator.done();
+
+    const inpInteractionEl = getInteractions(view).find(el => el.id === 'interaction-1-1')!;
+    assert.isFalse(inpInteractionEl.checkVisibility());
+    assert.isFalse(inpInteractionEl.hasFocus());
+
     const inpInteractionLink = getInpInteractionLink(view);
     inpInteractionLink!.click();
 
     await coordinator.done();
 
-    assert(mockReveal.calledWithExactly(
-        {
-          duration: 500,
-          interactionType: 'pointer',
-          uniqueInteractionId: 'interaction-1-1',
-        },
-        false));
+    assert.isTrue(inpInteractionEl.checkVisibility());
+    assert.isTrue(inpInteractionEl.hasFocus());
   });
 
   it('should hide INP link if no matching interaction', async () => {
-    const view = new Components.LiveMetricsView.LiveMetricsView();
-    renderElementIntoDOM(view);
-    LiveMetrics.LiveMetrics.instance().dispatchEventToListeners(LiveMetrics.Events.STATUS, {
+    const view = renderLiveMetrics();
+    LiveMetrics.LiveMetrics.instance().setStatusForTesting({
       inp: {
         value: 500,
         phases: {
@@ -295,11 +524,20 @@ describeWithMockConnection('LiveMetricsView', () => {
           processingDuration: 300,
           presentationDelay: 100,
         },
-        uniqueInteractionId: 'interaction-1-1',
+        interactionId: 'interaction-1-1',
       },
-      interactions: [
-        {duration: 30, interactionType: 'keyboard', uniqueInteractionId: 'interaction-1-2'},
-      ],
+      interactions: createInteractionsMap([
+        {
+          duration: 30,
+          startTime: 0,
+          nextPaintTime: 30,
+          interactionType: 'keyboard',
+          interactionId: 'interaction-1-2',
+          eventNames: ['keyup'],
+          phases: {inputDelay: 10, processingDuration: 10, presentationDelay: 10},
+          longAnimationFrameTimings: [],
+        },
+      ]),
       layoutShifts: [],
     });
     await coordinator.done();
@@ -309,14 +547,13 @@ describeWithMockConnection('LiveMetricsView', () => {
   });
 
   it('clear interactions log button should work', async () => {
-    const view = new Components.LiveMetricsView.LiveMetricsView();
-    renderElementIntoDOM(view);
+    const view = renderLiveMetrics();
     await coordinator.done();
 
-    assert.isNull(getClearInteractionsButton(view));
     assert.lengthOf(getInteractions(view), 0);
+    assert.lengthOf(getLayoutShifts(view), 0);
 
-    LiveMetrics.LiveMetrics.instance().dispatchEventToListeners(LiveMetrics.Events.STATUS, {
+    LiveMetrics.LiveMetrics.instance().setStatusForTesting({
       inp: {
         value: 50,
         phases: {
@@ -324,30 +561,111 @@ describeWithMockConnection('LiveMetricsView', () => {
           processingDuration: 30,
           presentationDelay: 10,
         },
-        uniqueInteractionId: 'interaction-1-2',
+        interactionId: 'interaction-1-2',
       },
-      interactions: [
-        {duration: 50, interactionType: 'keyboard', uniqueInteractionId: 'interaction-1-1'},
-        {duration: 500, interactionType: 'pointer', uniqueInteractionId: 'interaction-1-2'},
+      interactions: createInteractionsMap([
+        {
+          duration: 50,
+          startTime: 0,
+          nextPaintTime: 50,
+          interactionType: 'keyboard',
+          interactionId: 'interaction-1-1',
+          eventNames: ['keyup'],
+          phases: {inputDelay: 10, processingDuration: 30, presentationDelay: 10},
+          longAnimationFrameTimings: [],
+        },
+        {
+          duration: 500,
+          startTime: 0,
+          nextPaintTime: 500,
+          interactionType: 'pointer',
+          interactionId: 'interaction-1-2',
+          eventNames: ['pointerup'],
+          phases: {inputDelay: 100, processingDuration: 300, presentationDelay: 100},
+          longAnimationFrameTimings: [],
+        },
+      ]),
+      layoutShifts: [
+        {score: 0.1, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-1'},
       ],
-      layoutShifts: [],
     });
     await coordinator.done();
 
     assert.lengthOf(getInteractions(view), 2);
+    assert.lengthOf(getLayoutShifts(view), 1);
 
-    const interactionsButton = getClearInteractionsButton(view);
-    interactionsButton!.click();
+    const clearLogButton = getClearLogButton(view);
+    clearLogButton!.click();
 
     await coordinator.done();
 
-    assert.isNull(getClearInteractionsButton(view));
     assert.lengthOf(getInteractions(view), 0);
+    assert.lengthOf(getLayoutShifts(view), 1);
+  });
+
+  it('clear layout shifts log button should work', async () => {
+    const view = renderLiveMetrics();
+    await coordinator.done();
+
+    assert.lengthOf(getInteractions(view), 0);
+    assert.lengthOf(getLayoutShifts(view), 0);
+
+    LiveMetrics.LiveMetrics.instance().setStatusForTesting({
+      inp: {
+        value: 50,
+        phases: {
+          inputDelay: 10,
+          processingDuration: 30,
+          presentationDelay: 10,
+        },
+        interactionId: 'interaction-1-2',
+      },
+      interactions: createInteractionsMap([
+        {
+          duration: 50,
+          startTime: 0,
+          nextPaintTime: 50,
+          interactionType: 'keyboard',
+          interactionId: 'interaction-1-1',
+          eventNames: ['keyup'],
+          phases: {inputDelay: 10, processingDuration: 30, presentationDelay: 10},
+          longAnimationFrameTimings: [],
+        },
+        {
+          duration: 500,
+          startTime: 0,
+          nextPaintTime: 500,
+          interactionType: 'pointer',
+          interactionId: 'interaction-1-2',
+          eventNames: ['pointerup'],
+          phases: {inputDelay: 100, processingDuration: 300, presentationDelay: 100},
+          longAnimationFrameTimings: [],
+        },
+      ]),
+      layoutShifts: [
+        {score: 0.1, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-1'},
+      ],
+    });
+    await coordinator.done();
+
+    assert.lengthOf(getInteractions(view), 2);
+    assert.lengthOf(getLayoutShifts(view), 1);
+
+    selectVisibleLog(view, 'layout-shifts');
+
+    await coordinator.done();
+
+    const clearLogButton = getClearLogButton(view);
+    clearLogButton!.click();
+
+    await coordinator.done();
+
+    assert.lengthOf(getInteractions(view), 2);
+    assert.lengthOf(getLayoutShifts(view), 0);
   });
 
   it('record action button should work', async () => {
-    const view = new Components.LiveMetricsView.LiveMetricsView();
-    renderElementIntoDOM(view);
+    const view = renderLiveMetrics();
     await coordinator.done();
 
     const recordButton =
@@ -360,8 +678,7 @@ describeWithMockConnection('LiveMetricsView', () => {
   });
 
   it('record page load button should work', async () => {
-    const view = new Components.LiveMetricsView.LiveMetricsView();
-    renderElementIntoDOM(view);
+    const view = renderLiveMetrics();
     await coordinator.done();
 
     const recordButton =
@@ -401,8 +718,7 @@ describeWithMockConnection('LiveMetricsView', () => {
 
       mockFieldData['url-ALL'] = createMockFieldData();
 
-      const view = new Components.LiveMetricsView.LiveMetricsView();
-      renderElementIntoDOM(view);
+      const view = renderLiveMetrics();
 
       await coordinator.done();
 
@@ -412,17 +728,12 @@ describeWithMockConnection('LiveMetricsView', () => {
       const fieldMessage = getFieldMessage(view);
       assert.match(fieldMessage!.innerText, /See how your local metrics compare/);
 
-      const dataDescriptions = getDataDescriptions(view);
-      assert.match(dataDescriptions.innerText, /local metrics/);
-      assert.notMatch(dataDescriptions.innerText, /field data/);
-
       const title = getLiveMetricsTitle(view);
-      assert.strictEqual(title.innerText, 'Local metrics');
+      assert.strictEqual(title.innerText, 'Local metrics ');
     });
 
     it('should show when crux is enabled', async () => {
-      const view = new Components.LiveMetricsView.LiveMetricsView();
-      renderElementIntoDOM(view);
+      const view = renderLiveMetrics();
 
       await coordinator.done();
 
@@ -448,17 +759,12 @@ describeWithMockConnection('LiveMetricsView', () => {
       // We expect it to say something like Jan 1 - Jan 29 2024.
       assert.match(fieldMessage!.innerText, /Jan.+2024/);
 
-      const dataDescriptions = getDataDescriptions(view);
-      assert.match(dataDescriptions.innerText, /local metrics/);
-      assert.match(dataDescriptions.innerText, /field data/);
-
       const title = getLiveMetricsTitle(view);
-      assert.strictEqual(title.innerText, 'Local and field metrics');
+      assert.strictEqual(title.innerText, 'Local and field metrics ');
     });
 
     it('should show empty values when crux is enabled but there is no field data', async () => {
-      const view = new Components.LiveMetricsView.LiveMetricsView();
-      renderElementIntoDOM(view);
+      const view = renderLiveMetrics();
 
       await coordinator.done();
 
@@ -471,24 +777,20 @@ describeWithMockConnection('LiveMetricsView', () => {
       await coordinator.done();
 
       const envRecs = getEnvironmentRecs(view);
-      assert.lengthOf(envRecs, 0);
+      assert.strictEqual(envRecs[0].textContent, 'Not enough data');
+      assert.strictEqual(envRecs[1].textContent, 'Not enough data');
 
       const fieldMessage = getFieldMessage(view);
-      assert.isNull(fieldMessage);
-
-      const dataDescriptions = getDataDescriptions(view);
-      assert.match(dataDescriptions.innerText, /local metrics/);
-      assert.match(dataDescriptions.innerText, /field data/);
+      assert.match(fieldMessage!.textContent!, /Not enough data/);
 
       const title = getLiveMetricsTitle(view);
-      assert.strictEqual(title.innerText, 'Local and field metrics');
+      assert.strictEqual(title.innerText, 'Local and field metrics ');
     });
 
     it('should make initial request on render when crux is enabled', async () => {
       mockFieldData['url-ALL'] = createMockFieldData();
 
-      const view = new Components.LiveMetricsView.LiveMetricsView();
-      renderElementIntoDOM(view);
+      const view = renderLiveMetrics();
 
       await coordinator.done();
 
@@ -499,8 +801,7 @@ describeWithMockConnection('LiveMetricsView', () => {
     it('should be removed once crux is disabled', async () => {
       mockFieldData['url-ALL'] = createMockFieldData();
 
-      const view = new Components.LiveMetricsView.LiveMetricsView();
-      renderElementIntoDOM(view);
+      const view = renderLiveMetrics();
 
       await coordinator.done();
 
@@ -521,8 +822,7 @@ describeWithMockConnection('LiveMetricsView', () => {
       mockFieldData['origin-ALL'] = createMockFieldData();
       mockFieldData['origin-ALL'].record.metrics.largest_contentful_paint!.percentiles!.p75 = 2000;
 
-      const view = new Components.LiveMetricsView.LiveMetricsView();
-      renderElementIntoDOM(view);
+      const view = renderLiveMetrics();
 
       await coordinator.done();
 
@@ -543,8 +843,7 @@ describeWithMockConnection('LiveMetricsView', () => {
       mockFieldData['url-PHONE'] = createMockFieldData();
       mockFieldData['url-PHONE'].record.metrics.largest_contentful_paint!.percentiles!.p75 = 2000;
 
-      const view = new Components.LiveMetricsView.LiveMetricsView();
-      renderElementIntoDOM(view);
+      const view = renderLiveMetrics();
 
       await coordinator.done();
 
@@ -567,8 +866,7 @@ describeWithMockConnection('LiveMetricsView', () => {
       mockFieldData['url-PHONE'] = createMockFieldData();
       mockFieldData['url-PHONE'].record.metrics.largest_contentful_paint!.percentiles!.p75 = 2000;
 
-      const view = new Components.LiveMetricsView.LiveMetricsView();
-      renderElementIntoDOM(view);
+      const view = renderLiveMetrics();
 
       await coordinator.done();
 
@@ -596,8 +894,7 @@ describeWithMockConnection('LiveMetricsView', () => {
       mockFieldData['url-ALL'] = createMockFieldData();
       mockFieldData['url-ALL'].record.metrics.largest_contentful_paint!.percentiles!.p75 = 2000;
 
-      const view = new Components.LiveMetricsView.LiveMetricsView();
-      renderElementIntoDOM(view);
+      const view = renderLiveMetrics();
 
       await coordinator.done();
 
@@ -628,14 +925,13 @@ describeWithMockConnection('LiveMetricsView', () => {
         // So we should expect the recommended preset to be "Slow 4G".
         mockFieldData['url-ALL'].record.metrics.round_trip_time!.percentiles!.p75 = 165;
 
-        const view = new Components.LiveMetricsView.LiveMetricsView();
-        renderElementIntoDOM(view);
+        const view = renderLiveMetrics();
 
         await coordinator.done();
 
         const envRecs = getEnvironmentRecs(view);
         assert.lengthOf(envRecs, 2);
-        assert.match(envRecs[0].textContent!, /60%.*desktop/);
+        assert.strictEqual(envRecs[0].textContent, '30% mobile, 60% desktop');
         assert.match(envRecs[1].textContent!, /Slow 4G/);
       });
 
@@ -643,14 +939,13 @@ describeWithMockConnection('LiveMetricsView', () => {
         mockFieldData['url-ALL'] = createMockFieldData();
         mockFieldData['url-ALL'].record.metrics.round_trip_time = undefined;
 
-        const view = new Components.LiveMetricsView.LiveMetricsView();
-        renderElementIntoDOM(view);
+        const view = renderLiveMetrics();
 
         await coordinator.done();
 
         const envRecs = getEnvironmentRecs(view);
-        assert.lengthOf(envRecs, 1);
-        assert.match(envRecs[0].textContent!, /60%.*desktop/);
+        assert.strictEqual(envRecs[0].textContent, '30% mobile, 60% desktop');
+        assert.strictEqual(envRecs[1].textContent, 'Not enough data');
       });
 
       it('should suggest no throttling for very low latency', async () => {
@@ -660,15 +955,13 @@ describeWithMockConnection('LiveMetricsView', () => {
         // but that preset should be ignored.
         mockFieldData['url-ALL'].record.metrics.round_trip_time!.percentiles!.p75 = 1;
 
-        const view = new Components.LiveMetricsView.LiveMetricsView();
-        renderElementIntoDOM(view);
+        const view = renderLiveMetrics();
 
         await coordinator.done();
 
         const envRecs = getEnvironmentRecs(view);
-        assert.lengthOf(envRecs, 2);
-        assert.match(envRecs[0].textContent!, /60%.*desktop/);
-        assert.match(envRecs[1].textContent!, /no throttling/);
+        assert.strictEqual(envRecs[0].textContent, '30% mobile, 60% desktop');
+        assert.match(envRecs[1].textContent!, /too fast to simulate with throttling/);
       });
 
       it('should ignore presets that are generally too far off', async () => {
@@ -678,14 +971,13 @@ describeWithMockConnection('LiveMetricsView', () => {
         // still too far away in general.
         mockFieldData['url-ALL'].record.metrics.round_trip_time!.percentiles!.p75 = 10_000;
 
-        const view = new Components.LiveMetricsView.LiveMetricsView();
-        renderElementIntoDOM(view);
+        const view = renderLiveMetrics();
 
         await coordinator.done();
 
         const envRecs = getEnvironmentRecs(view);
-        assert.lengthOf(envRecs, 1);
-        assert.match(envRecs[0].textContent!, /60%.*desktop/);
+        assert.strictEqual(envRecs[0].textContent, '30% mobile, 60% desktop');
+        assert.strictEqual(envRecs[1].textContent, 'Not enough data');
       });
     });
 
@@ -693,14 +985,12 @@ describeWithMockConnection('LiveMetricsView', () => {
       it('should recommend desktop if it is the majority', async () => {
         mockFieldData['url-ALL'] = createMockFieldData();
 
-        const view = new Components.LiveMetricsView.LiveMetricsView();
-        renderElementIntoDOM(view);
+        const view = renderLiveMetrics();
 
         await coordinator.done();
 
         const envRecs = getEnvironmentRecs(view);
-        assert.lengthOf(envRecs, 2);
-        assert.match(envRecs[0].textContent!, /60%.*desktop/);
+        assert.strictEqual(envRecs[0].textContent, '30% mobile, 60% desktop');
         assert.match(envRecs[1].textContent!, /Slow 4G/);
       });
 
@@ -713,14 +1003,12 @@ describeWithMockConnection('LiveMetricsView', () => {
           tablet: 0.1,
         };
 
-        const view = new Components.LiveMetricsView.LiveMetricsView();
-        renderElementIntoDOM(view);
+        const view = renderLiveMetrics();
 
         await coordinator.done();
 
         const envRecs = getEnvironmentRecs(view);
-        assert.lengthOf(envRecs, 2);
-        assert.match(envRecs[0].textContent!, /80%.*mobile/);
+        assert.strictEqual(envRecs[0].textContent, '80% mobile, 10% desktop');
         assert.match(envRecs[1].textContent!, /Slow 4G/);
       });
 
@@ -733,14 +1021,13 @@ describeWithMockConnection('LiveMetricsView', () => {
           tablet: 0.02,
         };
 
-        const view = new Components.LiveMetricsView.LiveMetricsView();
-        renderElementIntoDOM(view);
+        const view = renderLiveMetrics();
 
         await coordinator.done();
 
         const envRecs = getEnvironmentRecs(view);
-        assert.lengthOf(envRecs, 1);
-        assert.match(envRecs[0].textContent!, /Slow 4G/);
+        assert.strictEqual(envRecs[0].textContent, '49% mobile, 49% desktop');
+        assert.match(envRecs[1].textContent!, /Slow 4G/);
       });
     });
   });