chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

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

@@ -37,7 +37,7 @@ function getFieldMetricValue(view: Element, metric: string): HTMLElement|null {
 }
 
 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[] {
@@ -86,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;
@@ -148,6 +144,10 @@ function createMockFieldData() {
   };
 }
 
+function createInteractionsMap(interactions: LiveMetrics.Interaction[]): LiveMetrics.InteractionMap {
+  return new Map(interactions.map(interaction => [interaction.interactionId, interaction]));
+}
+
 describeWithMockConnection('LiveMetricsView', () => {
   const mockHandleAction = sinon.stub();
 
@@ -198,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();
@@ -211,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/);
 
@@ -221,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/);
 
@@ -230,6 +264,67 @@ 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 () => {
@@ -242,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();
@@ -283,7 +396,7 @@ describeWithMockConnection('LiveMetricsView', () => {
         value: 0.11,
         clusterShiftIds: ['layout-shift-1-2', 'layout-shift-1-3'],
       },
-      interactions: [],
+      interactions: new Map(),
       layoutShifts: [
         {score: 0.05, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-1'},
         {score: 0.1, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-2'},
@@ -315,7 +428,7 @@ describeWithMockConnection('LiveMetricsView', () => {
         value: 0.11,
         clusterShiftIds: [],
       },
-      interactions: [],
+      interactions: new Map(),
       layoutShifts: [
         {score: 0.05, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-1'},
         {score: 0.1, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-2'},
@@ -334,7 +447,7 @@ describeWithMockConnection('LiveMetricsView', () => {
         value: 0.11,
         clusterShiftIds: ['layout-shift-2-0'],
       },
-      interactions: [],
+      interactions: new Map(),
       layoutShifts: [
         {score: 0.05, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-1'},
         {score: 0.1, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-2'},
@@ -356,12 +469,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();
@@ -393,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();
@@ -421,12 +561,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: [
         {score: 0.1, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-1'},
       ],
@@ -460,12 +618,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: [
         {score: 0.1, affectedNodes: [], uniqueLayoutShiftId: 'layout-shift-1-1'},
       ],
@@ -552,12 +728,8 @@ 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 () => {
@@ -587,12 +759,8 @@ 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 () => {
@@ -609,17 +777,14 @@ 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 () => {
@@ -766,7 +931,7 @@ describeWithMockConnection('LiveMetricsView', () => {
 
         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/);
       });
 
@@ -779,8 +944,8 @@ describeWithMockConnection('LiveMetricsView', () => {
         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 () => {
@@ -795,9 +960,8 @@ describeWithMockConnection('LiveMetricsView', () => {
         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 () => {
@@ -812,8 +976,8 @@ describeWithMockConnection('LiveMetricsView', () => {
         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');
       });
     });
 
@@ -826,8 +990,7 @@ describeWithMockConnection('LiveMetricsView', () => {
         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/);
       });
 
@@ -845,8 +1008,7 @@ describeWithMockConnection('LiveMetricsView', () => {
         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/);
       });
 
@@ -864,8 +1026,8 @@ describeWithMockConnection('LiveMetricsView', () => {
         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/);
       });
     });
   });