Reveal throttling rules when clicking the throttle indicator

Bug: 40434685
Change-Id: I4ae42e4c801503b6ce61e7d7b6b7713754f36f0f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7122022
Commit-Queue: Philip Pfaffe <pfaffe@chromium.org>
Reviewed-by: Eric Leese <leese@chromium.org>

Author: pfaffe

front_end/core/common/Revealer.ts

@@ -26,6 +26,10 @@ const UIStrings = {
    * @description The UI destination when right clicking an item that can be revealed
    */
   networkPanel: 'Network panel',
+  /**
+   * @description The UI destination when right clicking an item that can be revealed
+   */
+  requestConditionsDrawer: 'Request conditions drawer',
   /**
    * @description The UI destination when right clicking an item that can be revealed
    */
@@ -181,6 +185,7 @@ export const RevealerDestination = {
   CHANGES_DRAWER: i18nLazyString(UIStrings.changesDrawer),
   ISSUES_VIEW: i18nLazyString(UIStrings.issuesView),
   NETWORK_PANEL: i18nLazyString(UIStrings.networkPanel),
+  REQUEST_CONDITIONS_DRAWER: i18nLazyString(UIStrings.requestConditionsDrawer),
   TIMELINE_PANEL: i18nLazyString(UIStrings.timelinePanel),
   APPLICATION_PANEL: i18nLazyString(UIStrings.applicationPanel),
   SOURCES_PANEL: i18nLazyString(UIStrings.sourcesPanel),

front_end/core/sdk/NetworkManager.ts

@@ -1939,11 +1939,13 @@ export class RequestConditions extends Common.ObjectWrapper.ObjectWrapper<Reques
     return this.#conditionsAppliedForTestPromise;
   }
 
-  conditionsForId(appliedNetworkConditionsId: string): {
-    conditions: Conditions,
-    urlPattern?: string,
-  }|undefined {
-    return this.#requestConditionsById.get(appliedNetworkConditionsId);
+  conditionsForId(appliedNetworkConditionsId: string): AppliedNetworkConditions|undefined {
+    const requestConditions = this.#requestConditionsById.get(appliedNetworkConditionsId);
+    if (!requestConditions) {
+      return undefined;
+    }
+    const {conditions, urlPattern} = requestConditions;
+    return new AppliedNetworkConditions(conditions, appliedNetworkConditionsId, urlPattern);
   }
 }
 
@@ -1958,6 +1960,12 @@ export namespace RequestConditions {
 
 let multiTargetNetworkManagerInstance: MultitargetNetworkManager|null;
 
+export class AppliedNetworkConditions {
+  constructor(
+      readonly conditions: Conditions, readonly appliedNetworkConditionsId: string, readonly urlPattern?: string) {
+  }
+}
+
 export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrapper<MultitargetNetworkManager.EventTypes>
     implements SDKModelObserver<NetworkManager> {
   #userAgentOverride = '';
@@ -2327,10 +2335,7 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
         }, allowRemoteFilePaths));
   }
 
-  appliedRequestConditions(requestInternal: NetworkRequest): {
-    conditions: Conditions,
-    urlPattern?: string,
-  }|undefined {
+  appliedRequestConditions(requestInternal: NetworkRequest): AppliedNetworkConditions|undefined {
     if (!requestInternal.appliedNetworkConditionsId) {
       return undefined;
     }

front_end/panels/network/NetworkDataGridNode.ts

@@ -958,7 +958,7 @@ export class NetworkRequestNode extends NetworkNode {
     return this.requestInternal.resourceType() === Common.ResourceType.resourceTypes.Prefetch;
   }
 
-  throttlingConditions(): {conditions: SDK.NetworkManager.Conditions, urlPattern?: string}|undefined {
+  throttlingConditions(): SDK.NetworkManager.AppliedNetworkConditions|undefined {
     return SDK.NetworkManager.MultitargetNetworkManager.instance().appliedRequestConditions(this.requestInternal);
   }
 
@@ -1522,6 +1522,7 @@ export class NetworkRequestNode extends NetworkNode {
           throttlingConditions.conditions.title();
       const icon = IconButton.Icon.create('watch');
       icon.title = i18nString(UIStrings.wasThrottled, {PH1: throttlingConditionsTitle});
+      icon.addEventListener('click', () => void Common.Revealer.reveal(throttlingConditions));
       cell.append(icon);
     }
     if (this.requestInternal.duration > 0) {

front_end/panels/network/NetworkLogView.test.ts

@@ -1260,9 +1260,15 @@ Invoke-WebRequest -UseBasicParsing -Uri "url-header-und-content-overridden"`]);
 
     await assertScreenshot('network-log/throttled-request.png');
 
-    assert.deepEqual(
-        Array.from(container.querySelectorAll('devtools-icon')).map(e => e.title),
-        ['Other (throttled to 3G)', 'Request was throttled (3G)']);
+    await RenderCoordinator.done();
+    const icons = Array.from(container.querySelectorAll('devtools-icon'));
+    assert.deepEqual(icons.map(e => e.title), ['Other (throttled to 3G)', 'Request was throttled (3G)']);
+
+    const appliedConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().appliedRequestConditions(request);
+    assert.exists(appliedConditions);
+    const revealStub = sinon.stub(Common.Revealer.RevealerRegistry.instance(), 'reveal');
+    icons[1].click();
+    sinon.assert.calledOnceWithExactly(revealStub, appliedConditions, false);
   });
 });
 

front_end/panels/network/RequestConditionsDrawer.test.ts

@@ -8,8 +8,11 @@ import * as Protocol from '../../generated/protocol.js';
 import * as Logs from '../../models/logs/logs.js';
 import {assertScreenshot, dispatchClickEvent, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, registerNoopActions, updateHostConfig} from '../../testing/EnvironmentHelpers.js';
+import {expectCall} from '../../testing/ExpectStubCall.js';
 import {describeWithMockConnection, setMockConnectionResponseHandler} from '../../testing/MockConnection.js';
 import {createViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as PanelUtils from '../utils/utils.js';
 
 import * as Network from './network.js';
 
@@ -240,4 +243,27 @@ describeWithMockConnection('RequestConditionsDrawer', () => {
     sinon.assert.calledOnceWithExactly(increasePriority, condition);
     sinon.assert.calledOnceWithExactly(decreasePriority, condition);
   });
+
+  it('highlights conditions', async () => {
+    const requestConditionsDrawer = new Network.RequestConditionsDrawer.RequestConditionsDrawer();
+    UI.Context.Context.instance().setFlavor(
+        Network.RequestConditionsDrawer.RequestConditionsDrawer, requestConditionsDrawer);
+    const index = 0;
+    const urlPattern = 'http://example.com/*bar' as SDK.NetworkManager.URLPatternConstructorString;
+    const conditions = SDK.NetworkManager.RequestCondition.createFromSetting({
+      urlPattern,
+      enabled: true,
+      conditions: 'NO_THROTTLING' as SDK.NetworkManager.ThrottlingConditionKey,
+    });
+    conditions.ruleIds.add('abc');
+    SDK.NetworkManager.MultitargetNetworkManager.instance().requestConditions.add(conditions);
+    const item = requestConditionsDrawer.renderItem(conditions, /* editable=*/ true, index);
+    const viewShown = expectCall(sinon.stub(UI.ViewManager.ViewManager.instance(), 'showView').resolves());
+    const highlighted = expectCall(sinon.stub(PanelUtils.PanelUtils, 'highlightElement'));
+    void Network.RequestConditionsDrawer.RequestConditionsDrawer.reveal(
+        new SDK.NetworkManager.AppliedNetworkConditions(SDK.NetworkManager.NoThrottlingConditions, 'abc', urlPattern));
+
+    assert.deepEqual(['network.blocked-urls'], await viewShown);
+    assert.deepEqual([item], await highlighted);
+  });
 });

front_end/panels/network/RequestConditionsDrawer.ts

@@ -18,6 +18,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
+import * as PanelUtils from '../utils/utils.js';
 
 import requestConditionsDrawerStyles from './requestConditionsDrawer.css.js';
 
@@ -196,6 +197,7 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
   private blockedCountForUrl: Map<Platform.DevToolsPath.UrlString, number>;
   #throttledCount = new Map<string, number>();
   #view: View;
+  #listElements = new WeakMap<SDK.NetworkManager.RequestCondition, HTMLElement>();
 
   constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
     super(target, {
@@ -252,6 +254,7 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     const blockedCount = this.blockedRequestsCount(condition);
     const throttledCount = this.#throttledRequestsCount(condition);
     const element = document.createElement('div');
+    this.#listElements.set(condition, element);
     element.classList.add('blocked-url');
     const toggle = (e: Event): void => {
       if (editable) {
@@ -528,6 +531,20 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     super.willHide();
     UI.Context.Context.instance().setFlavor(RequestConditionsDrawer, null);
   }
+
+  static async reveal(appliedConditions: SDK.NetworkManager.AppliedNetworkConditions): Promise<void> {
+    await UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
+    const drawer = UI.Context.Context.instance().flavor(RequestConditionsDrawer);
+    if (!drawer) {
+      console.assert(!!drawer, 'Drawer not initialized');
+      return;
+    }
+    const conditions = drawer.manager.requestConditions.conditions.find(
+        condition => condition.ruleIds.has(appliedConditions.appliedNetworkConditionsId) &&
+            condition.constructorString && condition.constructorString === appliedConditions.urlPattern);
+    const element = (conditions && drawer.#listElements.get(conditions));
+    element && PanelUtils.PanelUtils.highlightElement(element);
+  }
 }
 
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
@@ -550,3 +567,12 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     return false;
   }
 }
+
+export class AppliedConditionsRevealer implements
+    Common.Revealer.Revealer<SDK.NetworkManager.AppliedNetworkConditions> {
+  async reveal(request: SDK.NetworkManager.AppliedNetworkConditions): Promise<void> {
+    if (request.urlPattern) {
+      await RequestConditionsDrawer.reveal(request);
+    }
+  }
+}

front_end/panels/network/RequestTimingView.test.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
@@ -176,13 +177,15 @@ describeWithLocale('ResourceTimingView', () => {
   });
 
   it('Timing table shows throttling indicator', async () => {
+    stubNoopSettings();
     const container = document.createElement('div');
     renderElementIntoDOM(container, {includeCommonStyles: true});
 
     const request = createNetworkRequest(
         Protocol.Network.ServiceWorkerRouterSource.Cache, Protocol.Network.ServiceWorkerRouterSource.Cache);
     const timeRanges = NetworkTimeCalculator.calculateRequestTimeRanges(request, 100);
 
+    const wasThrottled = new SDK.NetworkManager.AppliedNetworkConditions(SDK.NetworkManager.Slow3GConditions, '');
     const input: Parameters<typeof Network.RequestTimingView.DEFAULT_VIEW>[0] = {
       requestUnfinished: false,
       requestStartTime: 0,
@@ -193,11 +196,16 @@ describeWithLocale('ResourceTimingView', () => {
       timeRanges,
       calculator: new NetworkTimeCalculator.NetworkTimeCalculator(true),
       serverTimings: [],
-      wasThrottled: SDK.NetworkManager.Slow3GConditions,
-
+      wasThrottled
     };
 
     Network.RequestTimingView.DEFAULT_VIEW(input, {}, container);
     await assertScreenshot('network/request-timing-view-throttling.png');
+
+    const icon = container.querySelector<HTMLElement>('devtools-icon[name=watch]');
+    assert.exists(icon);
+    const revealStub = sinon.stub(Common.Revealer.RevealerRegistry.instance(), 'reveal');
+    icon.click();
+    sinon.assert.calledOnceWithExactly(revealStub, wasThrottled, false);
   });
 });

front_end/panels/network/RequestTimingView.ts

@@ -307,11 +307,16 @@ interface ViewInput {
   serverTimings: SDK.ServerTiming.ServerTiming[];
   fetchDetails?: UI.TreeOutline.TreeOutlineInShadow;
   routerDetails?: UI.TreeOutline.TreeOutlineInShadow;
-  wasThrottled?: SDK.NetworkManager.Conditions;
+  wasThrottled?: SDK.NetworkManager.AppliedNetworkConditions;
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
+  const revealThrottled = (): void => {
+    if (input.wasThrottled) {
+      void Common.Revealer.reveal(input.wasThrottled);
+    }
+  };
   const scale = 100 / (input.endTime - input.startTime);
   const isClickable = (range: NetworkTimeCalculator.RequestTimeRange): boolean =>
       range.name === 'serviceworker-respondwith' || range.name === 'serviceworker-routerevaluation';
@@ -376,11 +381,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     }
   };
 
-  const throttledRequestTitle = input.wasThrottled ?
-      i18nString(
-          UIStrings.wasThrottled,
-          {PH1: typeof input.wasThrottled.title === 'string' ? input.wasThrottled.title : input.wasThrottled.title()}) :
-      undefined;
+  const throttledRequestTitle = input.wasThrottled ? i18nString(UIStrings.wasThrottled, {
+    PH1: typeof input.wasThrottled.conditions.title === 'string' ? input.wasThrottled.conditions.title :
+                                                                   input.wasThrottled.conditions.title()
+  }) :
+                                                     undefined;
 
   const classes = classMap({
     ['network-timing-table']: true,
@@ -503,7 +508,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
            </x-link>
          <td></td>
          <td class=${input.wasThrottled ? 'throttled' : ''} title=${ifDefined(throttledRequestTitle)}>
-           ${input.wasThrottled ? html` <devtools-icon name=watch ></devtools-icon>` : nothing}
+           ${input.wasThrottled ? html` <devtools-icon name=watch @click=${revealThrottled}></devtools-icon>` : nothing}
            ${i18n.TimeUtilities.secondsToString(input.totalDuration, true)}
          </td>
        </tr>
@@ -578,7 +583,7 @@ export class RequestTimingView extends UI.Widget.VBox {
       requestUnfinished: false,
       fetchDetails: this.#fetchDetailsTree(),
       routerDetails: this.#routerDetailsTree(),
-      wasThrottled: conditions?.urlPattern ? conditions.conditions : undefined,
+      wasThrottled: conditions?.urlPattern ? conditions : undefined,
       timeRanges,
     };
     this.#view(input, {}, this.contentElement);

front_end/panels/network/network-meta.ts

@@ -521,3 +521,14 @@ Common.Revealer.registerRevealer({
     return new Network.NetworkPanel.NetworkLogWithFilterRevealer();
   },
 });
+
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return [SDK.NetworkManager.AppliedNetworkConditions];
+  },
+  destination: Common.Revealer.RevealerDestination.NETWORK_PANEL,
+  async loadRevealer() {
+    const Network = await loadNetworkModule();
+    return new Network.RequestConditionsDrawer.AppliedConditionsRevealer();
+  },
+});

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

@@ -15,10 +15,9 @@ describeWithMockConnection('NetworkRequestTooltip', () => {
     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',
-    });
+    sinon.stub(SDK.NetworkManager.MultitargetNetworkManager.instance(), 'appliedRequestConditions')
+        .returns(new SDK.NetworkManager.AppliedNetworkConditions(
+            SDK.NetworkManager.Slow3GConditions, '', 'https://example.com'));
     const tooltip = new TimelineComponents.NetworkRequestTooltip.NetworkRequestTooltip();
     renderElementIntoDOM(tooltip, {includeCommonStyles: true});
     const data: TimelineComponents.NetworkRequestTooltip.NetworkTooltipData = {