[RPP] Show throttling and device emulation in trace history dropdown

Also removes the duration and time.

https://i.imgur.com/k0otYyv.png

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

Author: Connor Clark

front_end/models/trace/extras/Metadata.test.ts

@@ -13,19 +13,30 @@ describeWithEnvironment('Trace Metadata', () => {
     sinon.stub(cpuThrottlingManager, 'getHardwareConcurrency').returns(Promise.resolve(1));
     sinon.stub(cpuThrottlingManager, 'cpuThrottlingRate').returns(2);
     const networkManager = SDK.NetworkManager.MultitargetNetworkManager.instance({forceNew: true});
+    sinon.stub(networkManager, 'isThrottling').returns(true);
     sinon.stub(networkManager, 'networkConditions').returns({
       title: 'Slow 3G',
       download: 1,
-      upload: 1,
-      latency: 1,
+      upload: 2,
+      latency: 3,
     });
     const metadata = await Trace.Extras.Metadata.forNewRecording(/* isCpuProfile= */ false);
     assert.deepEqual(metadata, {
       source: 'DevTools',
       startTime: undefined,
       cpuThrottling: 2,
       networkThrottling: 'Slow 3G',
+      networkThrottlingConditions: {
+        download: 1,
+        latency: 3,
+        upload: 2,
+        packetLoss: undefined,
+        packetQueueLength: undefined,
+        packetReordering: undefined,
+        targetLatency: undefined,
+      },
       dataOrigin: Trace.Types.File.DataOrigin.TRACE_EVENTS,
+      emulatedDeviceTitle: undefined,
       hardwareConcurrency: 1,
     });
   });
@@ -36,6 +47,7 @@ describeWithEnvironment('Trace Metadata', () => {
     sinon.stub(cpuThrottlingManager, 'getHardwareConcurrency').returns(Promise.resolve(1));
     sinon.stub(cpuThrottlingManager, 'cpuThrottlingRate').returns(2);
     const networkManager = SDK.NetworkManager.MultitargetNetworkManager.instance({forceNew: true});
+    sinon.stub(networkManager, 'isThrottling').returns(true);
     sinon.stub(networkManager, 'networkConditions').returns({
       title: () => 'Slow 3G',
       download: 1,
@@ -48,6 +60,16 @@ describeWithEnvironment('Trace Metadata', () => {
       startTime: undefined,
       cpuThrottling: 2,
       networkThrottling: 'Slow 3G',
+      networkThrottlingConditions: {
+        download: 1,
+        latency: 1,
+        upload: 1,
+        packetLoss: undefined,
+        packetQueueLength: undefined,
+        packetReordering: undefined,
+        targetLatency: undefined,
+      },
+      emulatedDeviceTitle: undefined,
       dataOrigin: Trace.Types.File.DataOrigin.TRACE_EVENTS,
       hardwareConcurrency: 1,
     });
@@ -59,6 +81,7 @@ describeWithEnvironment('Trace Metadata', () => {
     const getHardwareConcurrencyStub = sinon.stub(cpuThrottlingManager, 'getHardwareConcurrency');
     sinon.stub(cpuThrottlingManager, 'cpuThrottlingRate').returns(2);
     const networkManager = SDK.NetworkManager.MultitargetNetworkManager.instance({forceNew: true});
+    sinon.stub(networkManager, 'isThrottling').returns(true);
     sinon.stub(networkManager, 'networkConditions').returns({
       title: () => 'Slow 3G',
       download: 1,
@@ -71,7 +94,17 @@ describeWithEnvironment('Trace Metadata', () => {
       startTime: undefined,
       cpuThrottling: 2,
       networkThrottling: 'Slow 3G',
+      networkThrottlingConditions: {
+        download: 1,
+        latency: 1,
+        upload: 1,
+        packetLoss: undefined,
+        packetQueueLength: undefined,
+        packetReordering: undefined,
+        targetLatency: undefined,
+      },
       dataOrigin: Trace.Types.File.DataOrigin.TRACE_EVENTS,
+      emulatedDeviceTitle: undefined,
       hardwareConcurrency: undefined,
     });
     assert.strictEqual(getHardwareConcurrencyStub.callCount, 0);

front_end/models/trace/extras/Metadata.ts

@@ -5,7 +5,8 @@
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Types from '../types/types.js';
 
-export async function forNewRecording(isCpuProfile: boolean, recordStartTime?: number): Promise<Types.File.MetaData> {
+export async function forNewRecording(
+    isCpuProfile: boolean, recordStartTime?: number, emulatedDeviceTitle?: string): Promise<Types.File.MetaData> {
   try {
     if (isCpuProfile) {
       // For CPU profile, only specify data origin
@@ -36,15 +37,33 @@ export async function forNewRecording(isCpuProfile: boolean, recordStartTime?: n
     const hardwareConcurrency =
         cpuThrottlingManager.hasPrimaryPageTargetSet() ? await getConcurrencyOrTimeout() : undefined;
     const cpuThrottling = SDK.CPUThrottlingManager.CPUThrottlingManager.instance().cpuThrottlingRate();
-    const networkConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
-    const networkTitle =
-        typeof networkConditions.title === 'function' ? networkConditions.title() : networkConditions.title;
+    const networkConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().isThrottling() ?
+        SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions() :
+        undefined;
+
+    let networkThrottlingConditions;
+    let networkTitle;
+    if (networkConditions) {
+      networkThrottlingConditions = {
+        download: networkConditions.download,
+        upload: networkConditions.upload,
+        latency: networkConditions.latency,
+        packetLoss: networkConditions.packetLoss,
+        packetQueueLength: networkConditions.packetQueueLength,
+        packetReordering: networkConditions.packetReordering,
+        targetLatency: networkConditions.targetLatency,
+      };
+      networkTitle =
+          typeof networkConditions.title === 'function' ? networkConditions.title() : networkConditions.title;
+    }
 
     return {
       source: 'DevTools',
       startTime: recordStartTime ? new Date(recordStartTime).toJSON() : undefined,  // ISO-8601 timestamp
-      cpuThrottling,
+      emulatedDeviceTitle,
+      cpuThrottling: cpuThrottling !== 1 ? cpuThrottling : undefined,
       networkThrottling: networkTitle,
+      networkThrottlingConditions,
       hardwareConcurrency,
       dataOrigin: Types.File.DataOrigin.TRACE_EVENTS,
     };

front_end/models/trace/types/BUILD.gn

@@ -16,7 +16,10 @@ devtools_module("types") {
     "TraceEvents.ts",
   ]
 
-  deps = [ "../../../generated" ]
+  deps = [
+    "../../../core/sdk:bundle",
+    "../../../generated",
+  ]
 }
 
 devtools_entrypoint("bundle") {

front_end/models/trace/types/File.ts

@@ -1,6 +1,8 @@
 // Copyright 2023 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+
+import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 
 import type {TraceWindowMicroSeconds} from './Timing.js';
@@ -177,7 +179,12 @@ export interface Modifications {
 export interface MetaData {
   source?: 'DevTools';
   startTime?: string;
+  emulatedDeviceTitle?: string;
+  // Only set if network throttling is active.
   networkThrottling?: string;
+  // Only set if network throttling is active.
+  networkThrottlingConditions?: Omit<SDK.NetworkManager.Conditions, 'title'>;
+  // Only set if CPU throttling is active.
   cpuThrottling?: number;
   hardwareConcurrency?: number;
   dataOrigin?: DataOrigin;

front_end/panels/timeline/TimelineHistoryManager.test.ts

@@ -22,11 +22,12 @@ describeWithEnvironment('TimelineHistoryManager', function() {
   afterEach(() => {
     UI.ActionRegistry.ActionRegistry.reset();
     Root.Runtime.experiments.disableForTest(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS);
+    historyManager.cancelIfShowing();
   });
 
   it('shows the dropdown including a landing page link if the observations experiment is enabled', async function() {
     Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS);
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     historyManager.addRecording(
         {
           data: {
@@ -35,7 +36,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
           },
           filmStripForPreview: null,
           parsedTrace,
-          startTime: null,
+          metadata,
         },
     );
 
@@ -48,7 +49,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
     const menuItemText = Array.from(dropdown.querySelectorAll<HTMLDivElement>('[role="menuitem"]'), elem => {
       return elem.innerText.replaceAll('\n', '');
     });
-    assert.deepEqual(menuItemText, ['Live metrics', 'web.dev5.39 s']);
+    assert.deepEqual(menuItemText, ['Live metrics', 'web.dev1× slowdown, No throttling']);
 
     // Cancel the dropdown, which also resolves the show() promise, meaning we
     // don't leak it into other tests.
@@ -57,7 +58,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
   });
 
   it('does not show if observations experiment is disabled + the user has not imported 2 traces', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     historyManager.addRecording(
         {
           data: {
@@ -66,7 +67,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
           },
           filmStripForPreview: null,
           parsedTrace,
-          startTime: null,
+          metadata,
         },
     );
 
@@ -79,7 +80,8 @@ describeWithEnvironment('TimelineHistoryManager', function() {
   });
 
   it('does not show the landing page link if the observations experiment is disabled', async function() {
-    const {parsedTrace: parsedTrace1} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {parsedTrace: parsedTrace1, metadata: metadata1} =
+        await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     historyManager.addRecording(
         {
           data: {
@@ -88,10 +90,11 @@ describeWithEnvironment('TimelineHistoryManager', function() {
           },
           filmStripForPreview: null,
           parsedTrace: parsedTrace1,
-          startTime: null,
+          metadata: metadata1,
         },
     );
-    const {parsedTrace: parsedTrace2} = await TraceLoader.traceEngine(this, 'timings-track.json.gz');
+    const {parsedTrace: parsedTrace2, metadata: metadata2} =
+        await TraceLoader.traceEngine(this, 'timings-track.json.gz');
     historyManager.addRecording(
         {
           data: {
@@ -100,7 +103,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
           },
           filmStripForPreview: null,
           parsedTrace: parsedTrace2,
-          startTime: null,
+          metadata: metadata2,
         },
     );
 
@@ -114,8 +117,8 @@ describeWithEnvironment('TimelineHistoryManager', function() {
       return elem.innerText.replaceAll('\n', '');
     });
     assert.deepEqual(menuItemText, [
-      'localhost3.16 s',
-      'web.dev5.39 s',
+      'localhost',
+      'web.dev1× slowdown, No throttling',
     ]);
 
     // Cancel the dropdown, which also resolves the show() promise, meaning we
@@ -126,7 +129,8 @@ describeWithEnvironment('TimelineHistoryManager', function() {
 
   it('can select from multiple parsed data objects', async function() {
     // Add two parsed data objects to the history manager.
-    const {parsedTrace: trace1Data} = await TraceLoader.traceEngine(this, 'slow-interaction-button-click.json.gz');
+    const {parsedTrace: trace1Data, metadata: metadata1} =
+        await TraceLoader.traceEngine(this, 'slow-interaction-button-click.json.gz');
     historyManager.addRecording(
         {
           data: {
@@ -135,19 +139,20 @@ describeWithEnvironment('TimelineHistoryManager', function() {
           },
           filmStripForPreview: null,
           parsedTrace: trace1Data,
-          startTime: null,
+          metadata: metadata1,
         },
     );
 
-    const {parsedTrace: trace2Data} = await TraceLoader.traceEngine(this, 'slow-interaction-keydown.json.gz');
+    const {parsedTrace: trace2Data, metadata: metadata2} =
+        await TraceLoader.traceEngine(this, 'slow-interaction-keydown.json.gz');
     historyManager.addRecording({
       data: {
         parsedTraceIndex: 2,
         type: 'TRACE_INDEX',
       },
       filmStripForPreview: null,
       parsedTrace: trace2Data,
-      startTime: null,
+      metadata: metadata2,
     });
 
     // Make sure the correct model is returned when