Add throttling indications in the performance panel

Fixed: 444371867
Change-Id: Idd510e1bc78a19310cbc9464704e25198eecabd0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7079393
Reviewed-by: Eric Leese <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>

Author: pfaffe

front_end/panels/timeline/components/BUILD.gn

@@ -125,6 +125,7 @@ devtools_ui_module("unittests") {
     "LiveMetricsView.test.ts",
     "MetricCard.test.ts",
     "NetworkRequestDetails.test.ts",
+    "NetworkRequestTooltip.test.ts",
     "NetworkThrottlingSelector.test.ts",
     "OriginMap.test.ts",
     "RelatedInsightChips.test.ts",

front_end/panels/timeline/components/NetworkRequestTooltip.test.ts

@@ -0,0 +1,43 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as SDK from '../../../core/sdk/sdk.js';
+import * as Protocol from '../../../generated/protocol.js';
+import * as Trace from '../../../models/trace/trace.js';
+import {assertScreenshot, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
+import {describeWithMockConnection} from '../../../testing/MockConnection.js';
+
+import * as TimelineComponents from './components.js';
+
+describeWithMockConnection('NetworkRequestTooltip', () => {
+  it('shows a throttling indicator', async () => {
+    const networkRequest = sinon.createStubInstance(SDK.NetworkRequest.NetworkRequest);
+    sinon.stub(SDK.TraceObject.RevealableNetworkRequest, 'create')
+        .returns(new SDK.TraceObject.RevealableNetworkRequest(networkRequest));
+    sinon.stub(SDK.NetworkManager.MultitargetNetworkManager.instance(), 'appliedRequestConditions').returns({
+      conditions: SDK.NetworkManager.Slow3GConditions,
+      urlPattern: 'https://example.com',
+    });
+    const tooltip = new TimelineComponents.NetworkRequestTooltip.NetworkRequestTooltip();
+    renderElementIntoDOM(tooltip, {includeCommonStyles: true});
+    const data: TimelineComponents.NetworkRequestTooltip.NetworkTooltipData = {
+      networkRequest: {
+        ts: 0,
+        dur: 120,
+        args: {
+          data: {
+            syntheticData: {sendStartTime: 100},
+            url: 'https://example.com',
+            mimeType: Protocol.Network.ResourceType.Document,
+            redirects: []
+          }
+        }
+      } as unknown as Trace.Types.Events.SyntheticNetworkRequest,
+      entityMapper: sinon.createStubInstance(Trace.EntityMapper.EntityMapper),
+    };
+    tooltip.data = data;
+
+    await assertScreenshot('timeline/network-request-tooltip-throttling.png');
+  });
+});

front_end/panels/timeline/components/NetworkRequestTooltip.ts

@@ -7,6 +7,7 @@ import '../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Lit from '../../../ui/lit/lit.js';
@@ -15,7 +16,7 @@ import * as TimelineUtils from '../utils/utils.js';
 import networkRequestTooltipStyles from './networkRequestTooltip.css.js';
 import {colorForNetworkRequest, networkResourceCategory} from './Utils.js';
 
-const {html} = Lit;
+const {html, nothing, Directives: {classMap, ifDefined}} = Lit;
 
 const MAX_URL_LENGTH = 60;
 
@@ -52,6 +53,11 @@ const UIStrings = {
    * @description Text to refer to the list of redirects.
    */
   redirects: 'Redirects',
+  /**
+   * @description Cell title in Network Data Grid Node of the Network panel
+   * @example {Fast 4G} PH1
+   */
+  wasThrottled: 'Request was throttled ({PH1})',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/NetworkRequestTooltip.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -106,6 +112,16 @@ export class NetworkRequestTooltip extends HTMLElement {
       backgroundColor: color,
     };
 
+    const sdkNetworkRequest = SDK.TraceObject.RevealableNetworkRequest.create(networkRequest);
+    const wasThrottled = sdkNetworkRequest &&
+        SDK.NetworkManager.MultitargetNetworkManager.instance().appliedRequestConditions(
+            sdkNetworkRequest.networkRequest);
+    const throttledTitle = wasThrottled ? i18nString(UIStrings.wasThrottled, {
+      PH1: typeof wasThrottled.conditions.title === 'string' ? wasThrottled.conditions.title :
+                                                               wasThrottled.conditions.title()
+    }) :
+                                          undefined;
+
     // The outside spans are transparent with a border on the outside edge.
     // The inside spans are 1px tall rectangles, vertically centered, with background color.
     //                   |
@@ -114,9 +130,20 @@ export class NetworkRequestTooltip extends HTMLElement {
     const leftWhisker = html`<span class="whisker-left"> <span class="horizontal"></span> </span>`;
     const rightWhisker = html`<span class="whisker-right"> <span class="horizontal"></span> </span>`;
 
+    const classes = classMap({
+      ['timings-row timings-row--duration']: true,
+      throttled: Boolean(wasThrottled?.urlPattern),
+    });
     return html`
-      <div class="timings-row timings-row--duration">
-        <span class="indicator"></span>
+      <div
+        class=${classes}
+        title=${ifDefined(throttledTitle)}>
+        ${
+        wasThrottled?.urlPattern ? html`<devtools-icon
+          class=indicator
+          name=watch
+          ></devtools-icon>` :
+                                   html`<span class="indicator"></span>`}
         ${i18nString(UIStrings.duration)}
          <span class="time"> ${i18n.TimeUtilities.formatMicroSecondsTime(networkRequest.dur)} </span>
       </div>
@@ -173,6 +200,11 @@ export class NetworkRequestTooltip extends HTMLElement {
 
     const redirectsHtml = NetworkRequestTooltip.renderRedirects(this.#data.networkRequest);
 
+    const sdkNetworkRequest = SDK.TraceObject.RevealableNetworkRequest.create(this.#data.networkRequest);
+    const wasThrottled = sdkNetworkRequest &&
+        SDK.NetworkManager.MultitargetNetworkManager.instance().appliedRequestConditions(
+            sdkNetworkRequest.networkRequest);
+
     // clang-format off
     const output = html`
       <style>${networkRequestTooltipStyles}</style>
@@ -186,6 +218,13 @@ export class NetworkRequestTooltip extends HTMLElement {
           </span>${networkResourceCategory(this.#data.networkRequest)}
         </div>
         <div class="priority-row">${i18nString(UIStrings.priority)}: ${NetworkRequestTooltip.renderPriorityValue(this.#data.networkRequest)}</div>
+        ${wasThrottled ? html`
+        <div class="throttled-row">
+          ${i18nString(UIStrings.wasThrottled, {
+            PH1: typeof wasThrottled.conditions.title === 'string' ? wasThrottled.conditions.title :
+              wasThrottled.conditions.title()
+          })}
+        </div>` : nothing}
         ${Trace.Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(this.#data.networkRequest) ?
           html`<div class="render-blocking"> ${i18nString(UIStrings.renderBlocking)} </div>` :  Lit.nothing
         }

front_end/panels/timeline/components/networkRequestTooltip.css

@@ -22,6 +22,11 @@
     margin-left: 15px;
   }
 
+  .throttled-row {
+    margin-left: 15px;
+    color: var(--sys-color-yellow);
+  }
+
   .network-category-chip {
     box-sizing: border-box;
     width: 10px;
@@ -62,6 +67,16 @@
     box-sizing: border-box;
   }
 
+  devtools-icon.indicator {
+    vertical-align: middle;
+    height: 12px;
+    width: 12px;
+    margin-right: 4px;
+    color: var(--sys-color-yellow);
+    border: none;
+  }
+
+
   .whisker-left {
     align-self: center;
     display: inline-flex;
@@ -104,6 +119,10 @@
     .time {
       font-weight: var(--ref-typeface-weight-medium);
     }
+
+    &.throttled {
+      color: var(--sys-color-yellow);
+    }
   }
 
   .redirects-row {