chrome-devtools-frontend 1.0.1539728 → 1.0.1541169

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -18,7 +18,6 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import type {AggregatedIssue} from './IssueAggregator.js';
 import type {IssueView} from './IssueView.js';
 
 const UIStrings = {
@@ -65,7 +64,7 @@ export interface CreateRequestCellOptions {
  */
 export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
   readonly #parentView: IssueView;
-  protected issue: AggregatedIssue;
+  protected issue: IssuesManager.IssueAggregator.AggregatedIssue;
   protected affectedResourcesCountElement: HTMLElement;
   protected affectedResources: HTMLElement;
   #affectedResourcesCount: number;
@@ -73,7 +72,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
   #unresolvedFrameIds: Set<string>;
   protected requestResolver: Logs.RequestResolver.RequestResolver;
 
-  constructor(parent: IssueView, issue: AggregatedIssue, jslogContext: string) {
+  constructor(parent: IssueView, issue: IssuesManager.IssueAggregator.AggregatedIssue, jslogContext: string) {
     super(/* title */ undefined, /* expandable */ undefined, jslogContext);
     this.#parentView = parent;
     this.issue = issue;
@@ -91,7 +90,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
    * Sets the issue to take the resources from. Does not
    * trigger an update, the caller needs to do that explicitly.
    */
-  setIssue(issue: AggregatedIssue): void {
+  setIssue(issue: IssuesManager.IssueAggregator.AggregatedIssue): void {
     this.issue = issue;
   }
 

package/front_end/panels/issues/CorsIssueDetailsView.ts

@@ -11,7 +11,6 @@ import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 
 import {AffectedItem, AffectedResourcesView} from './AffectedResourcesView.js';
-import type {AggregatedIssue} from './IssueAggregator.js';
 import type {IssueView} from './IssueView.js';
 
 const UIStrings = {
@@ -128,7 +127,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/issues/CorsIssueDetailsView.ts'
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class CorsIssueDetailsView extends AffectedResourcesView {
-  constructor(parent: IssueView, issue: AggregatedIssue, jslogContext: string) {
+  constructor(parent: IssueView, issue: IssuesManager.IssueAggregator.AggregatedIssue, jslogContext: string) {
     super(parent, issue, jslogContext);
     this.affectedResourcesCountElement.classList.add('cors-issue-affected-resource-label');
   }

package/front_end/panels/issues/IssueView.ts

@@ -8,6 +8,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
+import type {AggregatedIssue} from '../../models/issues_manager/IssueAggregator.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
@@ -36,7 +37,6 @@ import * as Components from './components/components.js';
 import type {HiddenIssuesMenuData} from './components/HideIssuesMenu.js';
 import {CorsIssueDetailsView} from './CorsIssueDetailsView.js';
 import {GenericIssueDetailsView} from './GenericIssueDetailsView.js';
-import type {AggregatedIssue} from './IssueAggregator.js';
 
 const UIStrings = {
   /**

package/front_end/panels/issues/IssuesPane.ts

@@ -14,12 +14,6 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {HiddenIssuesRow} from './HiddenIssuesRow.js';
-import {
-  type AggregatedIssue,
-  type AggregationKey,
-  Events as IssueAggregatorEvents,
-  IssueAggregator,
-} from './IssueAggregator.js';
 import {getGroupIssuesByKindSetting, IssueKindView, issueKindViewSortPriority} from './IssueKindView.js';
 import issuesPaneStyles from './issuesPane.css.js';
 import issuesTreeStyles from './issuesTree.css.js';
@@ -181,14 +175,14 @@ export function getGroupIssuesByCategorySetting(): Common.Settings.Setting<boole
 
 export class IssuesPane extends UI.Widget.VBox {
   #categoryViews: Map<IssuesManager.Issue.IssueCategory, IssueCategoryView>;
-  #issueViews: Map<AggregationKey, IssueView>;
+  #issueViews: Map<IssuesManager.IssueAggregator.AggregationKey, IssueView>;
   #kindViews: Map<IssuesManager.Issue.IssueKind, IssueKindView>;
   #showThirdPartyCheckbox: UI.Toolbar.ToolbarSettingCheckbox|null;
   #issuesTree: UI.TreeOutline.TreeOutlineInShadow;
   #hiddenIssuesRow: HiddenIssuesRow;
   #noIssuesMessageDiv: UI.EmptyWidget.EmptyWidget;
   #issuesManager: IssuesManager.IssuesManager.IssuesManager;
-  #aggregator: IssueAggregator;
+  #aggregator: IssuesManager.IssueAggregator.IssueAggregator;
   #issueViewUpdatePromise: Promise<void> = Promise.resolve();
 
   constructor() {
@@ -222,9 +216,11 @@ export class IssuesPane extends UI.Widget.VBox {
     this.#noIssuesMessageDiv.show(this.contentElement);
 
     this.#issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
-    this.#aggregator = new IssueAggregator(this.#issuesManager);
-    this.#aggregator.addEventListener(IssueAggregatorEvents.AGGREGATED_ISSUE_UPDATED, this.#issueUpdated, this);
-    this.#aggregator.addEventListener(IssueAggregatorEvents.FULL_UPDATE_REQUIRED, this.#onFullUpdate, this);
+    this.#aggregator = new IssuesManager.IssueAggregator.IssueAggregator(this.#issuesManager);
+    this.#aggregator.addEventListener(
+        IssuesManager.IssueAggregator.Events.AGGREGATED_ISSUE_UPDATED, this.#issueUpdated, this);
+    this.#aggregator.addEventListener(
+        IssuesManager.IssueAggregator.Events.FULL_UPDATE_REQUIRED, this.#onFullUpdate, this);
     this.#hiddenIssuesRow.hidden = this.#issuesManager.numberOfHiddenIssues() === 0;
     this.#onFullUpdate();
     this.#issuesManager.addEventListener(
@@ -292,16 +288,16 @@ export class IssuesPane extends UI.Widget.VBox {
     return {toolbarContainer};
   }
 
-  #issueUpdated(event: Common.EventTarget.EventTargetEvent<AggregatedIssue>): void {
+  #issueUpdated(event: Common.EventTarget.EventTargetEvent<IssuesManager.IssueAggregator.AggregatedIssue>): void {
     this.#scheduleIssueViewUpdate(event.data);
   }
 
-  #scheduleIssueViewUpdate(issue: AggregatedIssue): void {
+  #scheduleIssueViewUpdate(issue: IssuesManager.IssueAggregator.AggregatedIssue): void {
     this.#issueViewUpdatePromise = this.#issueViewUpdatePromise.then(() => this.#updateIssueView(issue));
   }
 
   /** Don't call directly. Use `scheduleIssueViewUpdate` instead. */
-  async #updateIssueView(issue: AggregatedIssue): Promise<void> {
+  async #updateIssueView(issue: IssuesManager.IssueAggregator.AggregatedIssue): Promise<void> {
     let issueView = this.#issueViews.get(issue.aggregationKey());
     if (!issueView) {
       const description = issue.getDescription();
@@ -361,7 +357,8 @@ export class IssuesPane extends UI.Widget.VBox {
     }
   }
 
-  #getIssueViewParent(issue: AggregatedIssue): UI.TreeOutline.TreeOutline|UI.TreeOutline.TreeElement {
+  #getIssueViewParent(issue: IssuesManager.IssueAggregator.AggregatedIssue): UI.TreeOutline.TreeOutline
+      |UI.TreeOutline.TreeElement {
     if (issue.isHidden()) {
       return this.#hiddenIssuesRow;
     }

package/front_end/panels/issues/issues.ts

@@ -2,13 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as IssueAggregator from './IssueAggregator.js';
 import * as IssueRevealer from './IssueRevealer.js';
 import * as IssuesPane from './IssuesPane.js';
 import * as IssueView from './IssueView.js';
 
 export {
-  IssueAggregator,
   IssueRevealer,
   IssuesPane,
   IssueView,

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -95,14 +95,14 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
       throw new Error('Could not find the child target manager class for the root target');
     }
 
-    const router = rootTarget.router();
-    if (!router) {
+    const connection = rootTarget.router()?.connection;
+    if (!connection) {
       throw new Error('Expected root target to have a session router');
     }
 
     const rootTargetId = await rootChildTargetManager.getParentTargetId();
     const {sessionId} = await rootTarget.targetAgent().invoke_attachToTarget({targetId: rootTargetId, flatten: true});
-    this.connection = router;
+    this.connection = connection;
     this.connection.observe(this);
 
     // Lighthouse implements its own dialog handler like this, however its lifecycle ends when

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -318,9 +318,9 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
   appendApplicableItems(
       _event: Event, contextMenu: UI.ContextMenu.ContextMenu,
       target: ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement): void {
-    if (target.property.value?.isLinearMemoryInspectable()) {
+    if (target.property.object?.isLinearMemoryInspectable()) {
       const expression = target.path();
-      const object = target.property.value;
+      const object = target.property.object;
       contextMenu.debugSection().appendItem(
           i18nString(UIStrings.openInMemoryInspectorPanel),
           this.reveal.bind(this, new SDK.RemoteObject.LinearMemoryInspectable(object, expression)),

package/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) {

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -18,10 +18,12 @@ 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';
 
 const {ref} = Directives;
+const {widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -107,11 +109,11 @@ const UIStrings = {
   /**
    * @description Aria label on a button moving an entry up
    */
-  increasePriority: 'Increase priority',
+  increasePriority: 'Move up (higher patterns are checked first)',
   /**
    * @description Aria label on a button moving an entry down
    */
-  decreasePriority: 'Decrease priority',
+  decreasePriority: 'Move down (higher patterns are checked first)',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestConditionsDrawer.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -178,6 +180,109 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       target);
 };
 
+interface AffectedCountViewInput {
+  count: number;
+}
+type AffectedCountView = (input: AffectedCountViewInput, output: object, target: HTMLElement) => void;
+export const AFFECTED_COUNT_DEFAULT_VIEW: AffectedCountView = (input, output, target) => {
+  if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
+    render(html`${i18nString(UIStrings.dAffected, {PH1: input.count})}`, target);
+  } else {
+    render(html`${i18nString(UIStrings.dBlocked, {PH1: input.count})}`, target);
+  }
+};
+
+function matchesUrl(conditions: SDK.NetworkManager.RequestCondition, url: string): boolean {
+  function matchesPattern(pattern: string, url: string): boolean {
+    let pos = 0;
+    const parts = pattern.split('*');
+    for (let index = 0; index < parts.length; index++) {
+      const part = parts[index];
+      if (!part.length) {
+        continue;
+      }
+      pos = url.indexOf(part, pos);
+      if (pos === -1) {
+        return false;
+      }
+      pos += part.length;
+    }
+    return true;
+  }
+
+  return Boolean(
+      Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled ?
+          conditions.originalOrUpgradedURLPattern?.test(url) :
+          (conditions.wildcardURL && matchesPattern(conditions.wildcardURL, url)));
+}
+
+export class AffectedCountWidget extends UI.Widget.Widget {
+  readonly #view: AffectedCountView;
+  #condition?: SDK.NetworkManager.RequestCondition;
+  #drawer?: RequestConditionsDrawer;
+  constructor(target?: HTMLElement, view = AFFECTED_COUNT_DEFAULT_VIEW) {
+    super(target, {classes: ['blocked-url-count']});
+    this.#view = view;
+  }
+
+  get condition(): SDK.NetworkManager.RequestCondition|undefined {
+    return this.#condition;
+  }
+
+  set condition(conditions: SDK.NetworkManager.RequestCondition) {
+    this.#condition = conditions;
+    this.requestUpdate();
+  }
+
+  get drawer(): RequestConditionsDrawer|undefined {
+    return this.#drawer;
+  }
+
+  set drawer(drawer: RequestConditionsDrawer) {
+    this.#drawer = drawer;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    if (!this.#condition || !this.#drawer) {
+      return;
+    }
+
+    const count = !Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled || this.#condition.isBlocking ?
+        this.#drawer.blockedRequestsCount(this.#condition) :
+        this.#drawer.throttledRequestsCount(this.#condition);
+
+    this.#view({count}, {}, this.element);
+  }
+
+  override wasShown(): void {
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.NetworkManager.NetworkManager, SDK.NetworkManager.Events.RequestFinished, this.#onRequestFinished, this,
+        {scoped: true});
+    Logs.NetworkLog.NetworkLog.instance().addEventListener(Logs.NetworkLog.Events.Reset, this.requestUpdate, this);
+    super.wasShown();
+  }
+
+  override willHide(): void {
+    super.willHide();
+    SDK.TargetManager.TargetManager.instance().removeModelListener(
+        SDK.NetworkManager.NetworkManager, SDK.NetworkManager.Events.RequestFinished, this.#onRequestFinished, this);
+    Logs.NetworkLog.NetworkLog.instance().removeEventListener(Logs.NetworkLog.Events.Reset, this.requestUpdate, this);
+  }
+
+  #onRequestFinished(event: Common.EventTarget.EventTargetEvent<SDK.NetworkRequest.NetworkRequest>): void {
+    if (!this.#condition) {
+      return;
+    }
+
+    const request = event.data;
+    if ((request.appliedNetworkConditionsId && this.#condition.ruleIds.has(request.appliedNetworkConditionsId)) ||
+        (request.wasBlocked() && matchesUrl(this.#condition, request.url()))) {
+      this.requestUpdate();
+    }
+  }
+}
+
 function learnMore(): LitTemplate {
   return html`<x-link
         href=${NETWORK_REQUEST_BLOCKING_EXPLANATION_URL}
@@ -196,6 +301,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, {
@@ -249,9 +355,8 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
   }
 
   renderItem(condition: SDK.NetworkManager.RequestCondition, editable: boolean, index: number): Element {
-    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) {
@@ -338,20 +443,18 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
       aria-details=url-pattern-${index}>
         ${constructorStringOrWildcardURL}
     </div>
-   <devtools-widget
-      class=conditions-selector
-      ?disabled=${!editable}
-      .widgetConfig=${UI.Widget.widgetConfig(
-        MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelectorWidget, {
-          variant:
-            MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.Variant.INDIVIDUAL_REQUEST_CONDITIONS,
-          jslogContext: 'request-conditions',
-          onConditionsChanged,
-          currentConditions: condition.conditions,
-        })}></devtools-widget>
-    <div class=blocked-url-count>${i18nString(UIStrings.dAffected, {PH1: condition.isBlocking
-                                                                           ? blockedCount
-                                                                           : throttledCount})}</div>`,
+    <devtools-widget
+       class=conditions-selector
+       ?disabled=${!editable}
+       .widgetConfig=${UI.Widget.widgetConfig(
+         MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelectorWidget, {
+           variant:
+             MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.Variant.INDIVIDUAL_REQUEST_CONDITIONS,
+           jslogContext: 'request-conditions',
+           onConditionsChanged,
+           currentConditions: condition.conditions,
+         })}></devtools-widget>
+    <devtools-widget .widgetConfig=${widgetConfig(AffectedCountWidget, {condition, drawer: this})}></devtools-widget>`,
           // clang-format on
           element);
     } else {
@@ -365,7 +468,7 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
       ?disabled=${!editable}
       .jslog=${VisualLogging.toggle().track({ change: true })}>
     <div @click=${toggle} class=blocked-url-label>${wildcardURL}</div>
-    <div class=blocked-url-count>${i18nString(UIStrings.dBlocked, {PH1: blockedCount})}</div>`,
+    <devtools-widget .widgetConfig=${widgetConfig(AffectedCountWidget, {condition, drawer: this})}></devtools-widget>`,
           // clang-format on
           element);
     }
@@ -461,20 +564,17 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     this.requestUpdate();
   }
 
-  private blockedRequestsCount(condition: SDK.NetworkManager.RequestCondition): number {
+  blockedRequestsCount(condition: SDK.NetworkManager.RequestCondition): number {
     let result = 0;
     for (const blockedUrl of this.blockedCountForUrl.keys()) {
-      const match = Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled ?
-          condition.originalOrUpgradedURLPattern?.test(blockedUrl) :
-          (condition.wildcardURL && this.matches(condition.wildcardURL, blockedUrl));
-      if (match) {
+      if (matchesUrl(condition, blockedUrl)) {
         result += (this.blockedCountForUrl.get(blockedUrl) as number);
       }
     }
     return result;
   }
 
-  #throttledRequestsCount(condition: SDK.NetworkManager.RequestCondition): number {
+  throttledRequestsCount(condition: SDK.NetworkManager.RequestCondition): number {
     let result = 0;
     for (const ruleId of condition.ruleIds) {
       result += this.#throttledCount.get(ruleId) ?? 0;
@@ -482,27 +582,9 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     return result;
   }
 
-  private matches(pattern: string, url: string): boolean {
-    let pos = 0;
-    const parts = pattern.split('*');
-    for (let index = 0; index < parts.length; index++) {
-      const part = parts[index];
-      if (!part.length) {
-        continue;
-      }
-      pos = url.indexOf(part, pos);
-      if (pos === -1) {
-        return false;
-      }
-      pos += part.length;
-    }
-    return true;
-  }
-
   private onNetworkLogReset(_event: Common.EventTarget.EventTargetEvent<Logs.NetworkLog.ResetEvent>): void {
     this.blockedCountForUrl.clear();
     this.#throttledCount.clear();
-    this.update();
   }
 
   private onRequestFinished(event: Common.EventTarget.EventTargetEvent<SDK.NetworkRequest.NetworkRequest>): void {
@@ -515,10 +597,8 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
       const count = this.blockedCountForUrl.get(request.url()) || 0;
       this.blockedCountForUrl.set(request.url(), count + 1);
     }
-    if (request.appliedNetworkConditionsId || request.wasBlocked()) {
-      this.update();
-    }
   }
+
   override wasShown(): void {
     UI.Context.Context.instance().setFlavor(RequestConditionsDrawer, this);
     super.wasShown();
@@ -528,6 +608,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 +644,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);
+    }
+  }
+}

package/front_end/panels/network/RequestPayloadView.ts

@@ -435,7 +435,8 @@ export class RequestPayloadView extends UI.Widget.VBox {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private appendJSONPayloadParsed(rootListItem: Category, parsedObject: any, sourceText: string): void {
     const object = (SDK.RemoteObject.RemoteObject.fromLocalObject(parsedObject) as SDK.RemoteObject.LocalJSONObject);
-    const section = new ObjectUI.ObjectPropertiesSection.RootElement(object);
+    const section =
+        new ObjectUI.ObjectPropertiesSection.RootElement(new ObjectUI.ObjectPropertiesSection.ObjectTree(object));
     section.title = (object.description);
     section.expand();
     // `editable` is not a valid property for `ObjectUI.ObjectPropertiesSection.RootElement`. Only for

package/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);
@@ -608,7 +613,8 @@ export class RequestTimingView extends UI.Widget.VBox {
     const origRequest = Logs.NetworkLog.NetworkLog.instance().originalRequestForURL(this.#request.url());
     if (origRequest) {
       const requestObject = SDK.RemoteObject.RemoteObject.fromLocalObject(origRequest);
-      const requestTreeElement = new ObjectUI.ObjectPropertiesSection.RootElement(requestObject);
+      const requestTreeElement = new ObjectUI.ObjectPropertiesSection.RootElement(
+          new ObjectUI.ObjectPropertiesSection.ObjectTree(requestObject));
       requestTreeElement.title = i18nString(UIStrings.originalRequest);
       detailsView.appendChild(requestTreeElement);
     }
@@ -616,7 +622,8 @@ export class RequestTimingView extends UI.Widget.VBox {
     const response = Logs.NetworkLog.NetworkLog.instance().originalResponseForURL(this.#request.url());
     if (response) {
       const responseObject = SDK.RemoteObject.RemoteObject.fromLocalObject(response);
-      const responseTreeElement = new ObjectUI.ObjectPropertiesSection.RootElement(responseObject);
+      const responseTreeElement = new ObjectUI.ObjectPropertiesSection.RootElement(
+          new ObjectUI.ObjectPropertiesSection.ObjectTree(responseObject));
       responseTreeElement.title = i18nString(UIStrings.responseReceived);
       detailsView.appendChild(responseTreeElement);
     }

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -14,7 +14,6 @@ import * as Persistence from '../../../models/persistence/persistence.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
 import * as NetworkForward from '../../../panels/network/forward/forward.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
@@ -401,25 +400,33 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       }
     };
 
-    const addContextMenuListener = (el: Element): void => {
-      if (isShortened) {
-        el.addEventListener('contextmenu', onContextMenuOpen);
-      }
-    };
-
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <div class="row raw-headers-row" on-render=${ComponentHelpers.Directives.nodeRenderedCallback(addContextMenuListener)}>
-        <div class="raw-headers">${isShortened ? trimmed.substring(0, RAW_HEADER_CUTOFF) : trimmed}</div>
-        ${isShortened ? html`
-          <devtools-button
-            .size=${Buttons.Button.Size.SMALL}
-            .variant=${Buttons.Button.Variant.OUTLINED}
-            @click=${showMore}
-            jslog=${VisualLogging.action('raw-headers-show-more').track({click: true})}
-          >${i18nString(UIStrings.showMore)}</devtools-button>
-        ` : Lit.nothing}
+      <div
+        class="row raw-headers-row"
+        @contextmenu=${(event: Event) => {
+          if (isShortened) {
+            onContextMenuOpen(event);
+          }
+        }}
+      >
+        <div class="raw-headers">
+          ${isShortened ? trimmed.substring(0, RAW_HEADER_CUTOFF) : trimmed}
+        </div>
+        ${isShortened
+          ? html`
+              <devtools-button
+                .size=${Buttons.Button.Size.SMALL}
+                .variant=${Buttons.Button.Variant.OUTLINED}
+                @click=${showMore}
+                jslog=${VisualLogging.action('raw-headers-show-more').track({
+                  click: true,
+                })}
+                >${i18nString(UIStrings.showMore)}</devtools-button
+              >
+            `
+          : Lit.nothing}
       </div>
     `;
     // clang-format on

package/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();
+  },
+});