chrome-devtools-frontend 1.0.1539972 → 1.0.1541552

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/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/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);

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

package/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -92,7 +92,7 @@ hr.section-separator {
 
 .input-field:focus {
   border: 1px solid var(--sys-color-state-focus-ring);
-  outline-width: 0;
+  outline-style: none;
 }
 
 .add-container {

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -2008,7 +2008,7 @@ class ValueDecoration extends CodeMirror.WidgetType {
       } else {
         const propertyValue = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(
             value, /* wasThrown */ false, /* showPreview */ false);
-        nameValuePair.appendChild(propertyValue.element);
+        nameValuePair.appendChild(propertyValue);
       }
     }
     return widget;

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -498,7 +498,7 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       const propertyValue =
           ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValueWithCustomSupport(
               expressionValue, Boolean(exceptionDetails), false /* showPreview */, this.linkifier);
-      this.valueElement = propertyValue.element;
+      this.valueElement = propertyValue;
     }
     const separatorElement = document.createElement('span');
     separatorElement.classList.add('watch-expressions-separator');

package/front_end/panels/sources/breakpointsView.css

@@ -271,6 +271,6 @@
   .pause-on-uncaught-exceptions:focus,
   .pause-on-caught-exceptions:focus {
     background-color: var(--sys-color-tonal-container);
-    outline-width: 0;
+    outline-style: none;
   }
 }

package/front_end/panels/sources/sourcesPanel.css

@@ -28,8 +28,8 @@
  */
 
 .paused-message {
-  align-self: center;
-  width: fit-content;
+  display: flex;
+  justify-content: center;
 }
 
 .scripts-debug-toolbar {

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -622,10 +622,10 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     }
 
     const fieldMetricResultsByNavigationId = new Map<string, Trace.Insights.Common.CrUXFieldMetricResults|null>();
-    for (const [key, insightSet] of insights) {
-      if (insightSet.navigation) {
+    for (const insightSet of insights.values()) {
+      if (insightSet.navigation?.args.data?.navigationId) {
         fieldMetricResultsByNavigationId.set(
-            key,
+            insightSet.navigation.args.data.navigationId,
             Trace.Insights.Common.getFieldMetricsForInsightSet(
                 insightSet, metadata, CrUXManager.CrUXManager.instance().getSelectedScope()));
       }

package/front_end/panels/timeline/TimelinePanel.ts

@@ -3094,15 +3094,15 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         };
       }
 
-      const navigationId = Array.from(parsedTrace.insights.keys()).find(k => k !== 'NO_NAVIGATION');
-      if (!navigationId) {
+      const insightSetId = Array.from(parsedTrace.insights.keys()).find(k => k !== 'NO_NAVIGATION');
+      if (!insightSetId) {
         return {
           type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
           message: 'The trace was loaded successfully but no navigation was detected.',
         };
       }
 
-      const insightsForNav = parsedTrace.insights.get(navigationId);
+      const insightsForNav = parsedTrace.insights.get(insightSetId);
       if (!insightsForNav) {
         return {
           type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,