chrome-devtools-frontend 1.0.1531367 → 1.0.1532884

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -8243,7 +8243,7 @@ export const NativeFunctions = [
   },
   {
     name: "softmax",
-    signatures: [["input","?options"],["input","axis","?options"]]
+    signatures: [["input","axis","?options"]]
   },
   {
     name: "softplus",

package/front_end/models/trace/extras/TraceTree.ts

@@ -397,6 +397,7 @@ export class BottomUpRootNode extends Node {
     const root = this;
     const startTime = this.startTime;
     const endTime = this.endTime;
+    const idStack: string[] = [];
     const nodeById = new Map<string, Node>();
     const selfTimeStack: number[] = [endTime - startTime];
     const firstNodeStack: boolean[] = [];
@@ -460,6 +461,13 @@ export class BottomUpRootNode extends Node {
       if (forceGroupIdCallback && eventGroupIdCallback) {
         id = `${id}-${eventGroupIdCallback(e)}`;
       }
+
+      idStack.push(id);
+
+      // For an event 'X' that contains another event 'X' (resolving to the same node
+      // id), we need to measure `totalTime` from the start of the outermost 'X' to
+      // its corresponding end. This logic ensures we don't double-count the duration
+      // of the inner event.
       const noNodeOnStack = !totalTimeById.has(id);
       if (noNodeOnStack) {
         totalTimeById.set(id, duration);
@@ -468,10 +476,11 @@ export class BottomUpRootNode extends Node {
     }
 
     function onEndEvent(event: Types.Events.Event): void {
-      let id = generateEventID(event);
-      if (forceGroupIdCallback && eventGroupIdCallback) {
-        id = `${id}-${eventGroupIdCallback(event)}`;
+      const id = idStack.pop();
+      if (!id) {
+        return;
       }
+
       let node = nodeById.get(id);
       if (!node) {
         node = new BottomUpNode(root, id, event, false, root);
@@ -484,6 +493,7 @@ export class BottomUpRootNode extends Node {
         node.totalTime += totalTimeById.get(id) || 0;
         totalTimeById.delete(id);
       }
+      // TODO: this may be wrong. See the skipped test in TraceTree.test.ts.
       if (firstNodeStack.length) {
         node.setHasChildren(true);
       }

package/front_end/models/trace/insights/ForcedReflow.ts

@@ -31,7 +31,7 @@ export const UIStrings = {
   /**
    * @description Title of a list to provide related stack trace data
    */
-  relatedStackTrace: 'Stack trace',
+  reflowCallFrames: 'Call frames that trigger reflow',
   /**
    * @description Text to describe the top time-consuming function call
    */

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -1091,7 +1091,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     // Node picker is using linkifier.
   }
 
-  handleAction(actionId: string, opts?: Record<string, unknown>): void {
+  #canExecuteQuery(): boolean {
+    const isBrandedBuild = Boolean(Root.Runtime.hostConfig.aidaAvailability?.enabled);
+    const isBlockedByAge = Boolean(Root.Runtime.hostConfig.aidaAvailability?.blockedByAge);
+    const isAidaAvailable = Boolean(this.#aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
+    const isUserOptedIn = Boolean(this.#aiAssistanceEnabledSetting?.getIfNotDisabled());
+
+    return isBrandedBuild && isAidaAvailable && isUserOptedIn && !isBlockedByAge;
+  }
+
+  async handleAction(actionId: string, opts?: Record<string, unknown>): Promise<void> {
     if (this.#isLoading && !opts?.['prompt']) {
       // If running some queries already, and this action doesn't contain a predefined prompt, focus the input with the abort
       // button and do nothing.
@@ -1160,13 +1169,17 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#updateConversationState({agent});
     const predefinedPrompt = opts?.['prompt'];
     if (predefinedPrompt && typeof predefinedPrompt === 'string') {
+      if (!this.#canExecuteQuery()) {
+        return;
+      }
+
       this.#imageInput = undefined;
       this.#isTextInputEmpty = true;
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
       if (this.#blockedByCrossOrigin) {
         this.#handleNewChatRequest();
       }
-      void this.#startConversation(predefinedPrompt);
+      await this.#startConversation(predefinedPrompt);
     } else {
       this.#viewOutput.chatView?.focusTextInput();
     }
@@ -1671,7 +1684,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
           }
 
           const widget = (await view.widget()) as AiAssistancePanel;
-          widget.handleAction(actionId, opts);
+          void widget.handleAction(actionId, opts);
         })();
         return true;
       }

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -115,51 +115,6 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
   }
 
   const showPlaceholder = !Boolean(input.mainText);
-  const renderFooter = (): Lit.LitTemplate => {
-    // clang-format off
-    return html`
-      <div class="tooltip-footer">
-        ${input.hasTellMeMoreButton ? html`
-          <devtools-button
-            title=${lockedString(UIStringsNotTranslate.tellMeMore)}
-            .jslogContext=${'insights-teaser-tell-me-more'},
-            .variant=${Buttons.Button.Variant.PRIMARY}
-            @click=${input.onTellMeMoreClick}
-          >
-            <devtools-icon class="lightbulb-icon" name="lightbulb-spark"></devtools-icon>
-            ${lockedString(UIStringsNotTranslate.tellMeMore)}
-          </devtools-button>
-        ` : Lit.nothing}
-        ${showPlaceholder ? Lit.nothing : html`
-          <devtools-button
-            .iconName=${'info'}
-            .variant=${Buttons.Button.Variant.ICON}
-            aria-details=${'teaser-info-tooltip-' + input.uuid}
-            aria-label=${lockedString(UIStringsNotTranslate.learnDataUsage)}
-          ></devtools-button>
-          <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich">
-            <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
-            <div class="learn-more">
-              <x-link
-                class="devtools-link"
-                title=${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}
-                href=${DATA_USAGE_URL}
-                jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
-              >${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}</x-link>
-            </div>
-          </devtools-tooltip>
-        `}
-        <devtools-checkbox
-          aria-label=${lockedString(UIStringsNotTranslate.dontShow)}
-          @change=${input.dontShowChanged}
-          jslog=${VisualLogging.toggle('explain.teaser.dont-show').track({ change: true })}>
-          ${lockedString(UIStringsNotTranslate.dontShow)}
-        </devtools-checkbox>
-      </div>
-    `;
-    // clang-format on
-  };
-
   // clang-format off
   render(html`
     <style>${consoleInsightTeaserStyles}</style>
@@ -185,7 +140,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
               class="loader"
               style="clip-path: url(${'#clipPath-' + input.uuid});"
             >
-              <svg width="100%" height="52">
+              <svg width="100%" height="58">
                 <defs>
                 <clipPath id=${'clipPath-' + input.uuid}>
                   <rect x="0" y="0" width="100%" height="12" rx="8"></rect>
@@ -197,10 +152,47 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
             </div>
           ` : html`
             <h2>${input.headerText}</h2>
-            <div>${input.mainText}</div>
+            <div class="main-text">${input.mainText}</div>
           `
         }
-        ${input.isError || input.isSlowGeneration || !showPlaceholder ? renderFooter() : Lit.nothing}
+        <div class="tooltip-footer">
+          ${input.hasTellMeMoreButton ? html`
+            <devtools-button
+              title=${lockedString(UIStringsNotTranslate.tellMeMore)}
+              .jslogContext=${'insights-teaser-tell-me-more'},
+              .variant=${Buttons.Button.Variant.PRIMARY}
+              @click=${input.onTellMeMoreClick}
+            >
+              <devtools-icon class="lightbulb-icon" name="lightbulb-spark"></devtools-icon>
+              ${lockedString(UIStringsNotTranslate.tellMeMore)}
+            </devtools-button>
+          ` : Lit.nothing}
+          ${showPlaceholder ? Lit.nothing : html`
+            <devtools-button
+              .iconName=${'info'}
+              .variant=${Buttons.Button.Variant.ICON}
+              aria-details=${'teaser-info-tooltip-' + input.uuid}
+              .accessibleLabel=${lockedString(UIStringsNotTranslate.learnDataUsage)}
+            ></devtools-button>
+            <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich">
+              <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
+              <div class="learn-more">
+                <x-link
+                  class="devtools-link"
+                  title=${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}
+                  href=${DATA_USAGE_URL}
+                  jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
+                >${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}</x-link>
+              </div>
+            </devtools-tooltip>
+          `}
+          <devtools-checkbox
+            aria-label=${lockedString(UIStringsNotTranslate.dontShow)}
+            @change=${input.dontShowChanged}
+            jslog=${VisualLogging.toggle('explain.teaser.dont-show').track({ change: true })}>
+            ${lockedString(UIStringsNotTranslate.dontShow)}
+          </devtools-checkbox>
+        </div>
       </div>
     </devtools-tooltip>
   `, target);

package/front_end/panels/console/consoleInsightTeaser.css

@@ -51,6 +51,19 @@
   h2 {
     font: var(--sys-typescale-body4-bold);
     margin: 0 0 var(--sys-size-3);
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .main-text {
+    line-clamp: 4;
+    -webkit-line-clamp: 4;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
 
   .lightbulb-icon {

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -328,7 +328,7 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.reportSelector.prepend(optionElement);
     this.refreshToolbarUI();
     this.renderReport(lighthouseResult);
-    this.newButton.element.focus();
+    (this.auditResultsElement.querySelector('.lh-topbar__url') as HTMLElement | null)?.focus();
   }
 
   private handleDrop(dataTransfer: DataTransfer): void {

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -60,7 +60,7 @@ export interface LighthouseRun {
 export class ProtocolService {
   private mainSessionId?: string;
   private rootTargetId?: string;
-  private parallelConnection?: ProtocolClient.InspectorBackend.Connection;
+  private parallelConnection?: ProtocolClient.ConnectionTransport.ConnectionTransport;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);
   private removeDialogHandler?: () => void;

package/front_end/panels/network/{BlockedURLsPane.ts → RequestConditionsDrawer.ts}

@@ -19,7 +19,7 @@ import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 
-import blockedURLsPaneStyles from './blockedURLsPane.css.js';
+import requestConditionsDrawerStyles from './requestConditionsDrawer.css.js';
 
 const {ref} = Directives;
 
@@ -28,6 +28,10 @@ const UIStrings = {
    * @description Text to enable blocking of network requests
    */
   enableNetworkRequestBlocking: 'Enable network request blocking',
+  /**
+   * @description Text to enable blocking of network requests
+   */
+  enableBlockingAndThrottling: 'Enable blocking and throttling',
   /**
    * @description Tooltip text that appears when hovering over the plus button in the Blocked URLs Pane of the Network panel
    */
@@ -36,15 +40,23 @@ const UIStrings = {
    * @description Accessible label for the button to add request blocking patterns in the network request blocking tool
    */
   addNetworkRequestBlockingPattern: 'Add network request blocking pattern',
+  /**
+   * @description Accessible label for the button to add request blocking patterns in the network request blocking tool
+   */
+  addPatternLabel: 'Add network request throttling or blocking pattern',
   /**
    * @description Text that shows in the network request blocking panel if no pattern has yet been added.
    */
   noNetworkRequestsBlocked: 'No blocked network requests',
+  /**
+   * @description Text that shows in the network request blocking panel if no pattern has yet been added.
+   */
+  noPattern: 'No request throttling or blocking patterns',
   /**
    * @description Text that shows  in the network request blocking panel if no pattern has yet been added.
    * @example {Add pattern} PH1
    */
-  addPatternToBlock: 'Add a pattern to block network requests by clicking on the "{PH1}" button.',
+  addPatternToBlock: 'Add a pattern by clicking on the "{PH1}" button.',
   /**
    * @description Text in Blocked URLs Pane of the Network panel
    * @example {4} PH1
@@ -57,7 +69,7 @@ const UIStrings = {
   /**
    * @description Text in Blocked URLs Pane of the Network panel
    */
-  textPatternToBlockMatchingURLPatterns: 'Text pattern to block matching requests; use URLPattern syntax.',
+  textEditPattern: 'Text pattern to block or throttle matching requests; use URLPattern syntax.',
   /**
    * @description Error text for empty list widget input in Request Blocking tool
    */
@@ -87,8 +99,16 @@ const UIStrings = {
    * @description Message to be announced for a when list item is removed from list widget
    */
   learnMore: 'Learn more',
+  /**
+   * @description Aria label on a button moving an entry up
+   */
+  increasePriority: 'Increase priority',
+  /**
+   * @description Aria label on a button moving an entry down
+   */
+  decreasePriority: 'Decrease priority',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/network/BlockedURLsPane.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/network/RequestConditionsDrawer.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const NETWORK_REQUEST_BLOCKING_EXPLANATION_URL =
@@ -106,23 +126,27 @@ interface ViewInput {
 }
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
+  const individualThrottlingEnabled = Boolean(Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled);
   render(
       // clang-format off
     html`
-    <style>${blockedURLsPaneStyles}</style>
+    <style>${RequestConditionsDrawer}</style>
     <devtools-toolbar jslog=${VisualLogging.toolbar()}>
       <devtools-checkbox
         ?checked=${input.enabled}
         @click=${input.toggleEnabled}
         .jslogContext=${'network.enable-request-blocking'}>
-        ${i18nString(UIStrings.enableNetworkRequestBlocking)}
+        ${individualThrottlingEnabled ? i18nString(UIStrings.enableBlockingAndThrottling)
+                                      : i18nString(UIStrings.enableNetworkRequestBlocking)}
       </devtools-checkbox>
       <div class="toolbar-divider"></div>
       <devtools-button ${bindToAction('network.add-network-request-blocking-pattern')}></devtools-button>
       <devtools-button ${bindToAction('network.remove-all-network-request-blocking-patterns')}></devtools-button>
     </devtools-toolbar>
     <div class=empty-state ${ref(e => input.list.setEmptyPlaceholder(e ?? null))}>
-      <span class=empty-state-header>${i18nString(UIStrings.noNetworkRequestsBlocked)}</span>
+      <span class=empty-state-header>${individualThrottlingEnabled
+                                       ? i18nString(UIStrings.noPattern)
+                                       : i18nString(UIStrings.noNetworkRequestsBlocked)}</span>
       <div class=empty-state-description>
         <span>${i18nString(UIStrings.addPatternToBlock, {PH1: i18nString(UIStrings.addPattern)})}</span>
         <x-link
@@ -137,7 +161,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         @click=${input.addPattern}
         class=add-button
         .jslogContext=${'network.add-network-request-blocking-pattern'}
-        aria-label=${i18nString(UIStrings.addNetworkRequestBlockingPattern)}
+        aria-label=${individualThrottlingEnabled ? i18nString(UIStrings.addPatternLabel)
+                                                 : i18nString(UIStrings.addNetworkRequestBlockingPattern)}
         .variant=${Buttons.Button.Variant.TONAL}>
           ${i18nString(UIStrings.addPattern)}
       </devtools-button>
@@ -158,7 +183,7 @@ function learnMore(): LitTemplate {
       </x-link>`;
 }
 
-export class BlockedURLsPane extends UI.Widget.VBox implements
+export class RequestConditionsDrawer extends UI.Widget.VBox implements
     UI.ListWidget.Delegate<SDK.NetworkManager.RequestCondition> {
   private manager: SDK.NetworkManager.MultitargetNetworkManager;
   private readonly list: UI.ListWidget.ListWidget<SDK.NetworkManager.RequestCondition>;
@@ -178,7 +203,7 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
         SDK.NetworkManager.MultitargetNetworkManager.Events.BLOCKED_PATTERNS_CHANGED, this.update, this);
 
     this.list = new UI.ListWidget.ListWidget(this);
-    this.list.registerRequiredCSS(blockedURLsPaneStyles);
+    this.list.registerRequiredCSS(requestConditionsDrawerStyles);
     this.list.element.classList.add('blocked-urls');
 
     this.editor = null;
@@ -236,6 +261,18 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
     const {enabled, originalOrUpgradedURLPattern, constructorStringOrWildcardURL, wildcardURL} = condition;
 
     if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
+      const moveUp = (e: Event): void => {
+        if (this.manager.requestConditions.conditionsEnabled) {
+          e.consume(true);
+          this.manager.requestConditions.increasePriority(condition);
+        }
+      };
+      const moveDown = (e: Event): void => {
+        if (this.manager.requestConditions.conditionsEnabled) {
+          e.consume(true);
+          this.manager.requestConditions.decreasePriority(condition);
+        }
+      };
       render(
           // clang-format off
         html`
@@ -245,17 +282,19 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
       ?checked=${enabled}
       ?disabled=${!editable || !originalOrUpgradedURLPattern}
       .jslog=${VisualLogging.toggle().track({ change: true })}>
-    <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-button
+      .iconName=${'arrow-down'}
+      .variant=${Buttons.Button.Variant.ICON}
+      .title=${i18nString(UIStrings.increasePriority)}
+      .jslogContext=${'increase-priority'}
+      @click=${moveDown}></devtools-button>
+    <devtools-button
+      .iconName=${'arrow-up'}
+      .variant=${Buttons.Button.Variant.ICON}
+      .title=${i18nString(UIStrings.decreasePriority)}
+      .jslogContext=${'decrease-priority'}
+      @click=${moveUp}>
+    </devtools-button>
     ${originalOrUpgradedURLPattern ? html`
       <devtools-tooltip variant=rich jslogcontext=url-pattern id=url-pattern-${index}>
         <div>hash: ${originalOrUpgradedURLPattern.hash}</div>
@@ -292,6 +331,17 @@ export class BlockedURLsPane 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.dBlocked, {PH1: count})}</div>`,
           // clang-format on
           element);
@@ -357,7 +407,7 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
     const titles = content.createChild('div', 'blocked-url-edit-row');
     const label = titles.createChild('div');
     if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
-      label.textContent = i18nString(UIStrings.textPatternToBlockMatchingURLPatterns);
+      label.textContent = i18nString(UIStrings.textEditPattern);
       label.append(UI.XLink.XLink.create(
           PATTERN_API_DOCS_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more'));
     } else {
@@ -446,30 +496,30 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
     }
   }
   override wasShown(): void {
-    UI.Context.Context.instance().setFlavor(BlockedURLsPane, this);
+    UI.Context.Context.instance().setFlavor(RequestConditionsDrawer, this);
     super.wasShown();
   }
 
   override willHide(): void {
     super.willHide();
-    UI.Context.Context.instance().setFlavor(BlockedURLsPane, null);
+    UI.Context.Context.instance().setFlavor(RequestConditionsDrawer, null);
   }
 }
 
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(context: UI.Context.Context, actionId: string): boolean {
-    const blockedURLsPane = context.flavor(BlockedURLsPane);
-    if (blockedURLsPane === null) {
+    const drawer = context.flavor(RequestConditionsDrawer);
+    if (drawer === null) {
       return false;
     }
     switch (actionId) {
       case 'network.add-network-request-blocking-pattern': {
-        blockedURLsPane.addPattern();
+        drawer.addPattern();
         return true;
       }
 
       case 'network.remove-all-network-request-blocking-patterns': {
-        blockedURLsPane.removeAllPatterns();
+        drawer.removeAllPatterns();
         return true;
       }
     }

package/front_end/panels/network/network-meta.ts

@@ -27,10 +27,18 @@ const UIStrings = {
    * @description Command for showing the 'Network request blocking' tool
    */
   showNetworkRequestBlocking: 'Show Network request blocking',
+  /**
+   * @description Command for showing the 'Network request blocking' tool
+   */
+  showRequestConditions: 'Show Request conditions',
   /**
    * @description Title of the 'Network request blocking' tool in the bottom drawer
    */
   networkRequestBlocking: 'Network request blocking',
+  /**
+   * @description Title of the 'Request conditions' tool in the bottom drawer
+   */
+  networkRequestConditions: 'Request conditions',
   /**
    * @description Command for showing the 'Network conditions' tool
    */
@@ -123,6 +131,14 @@ const UIStrings = {
    * @description Title of an action in the Network request blocking panel to clear all URL patterns.
    */
   removeAllNetworkRequestBlockingPatterns: 'Remove all network request blocking patterns',
+  /**
+   * @description Title of an action in the Network request blocking panel to add a new URL pattern to the blocklist.
+   */
+  addNetworkRequestBlockingOrThrottlingPattern: 'Add network request blocking or throttling pattern',
+  /**
+   * @description Title of an action in the Network request blocking panel to clear all URL patterns.
+   */
+  removeAllNetworkRequestBlockingOrThrottlingPatterns: 'Remove all network request blocking or throttling patterns',
   /**
    * @description Title of an action in the Network panel (and title of a setting in the Network category)
    *              that enables options in the UI to copy or export HAR (not translatable) with sensitive data.
@@ -142,6 +158,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/network-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let loadedNetworkModule: (typeof Network|undefined);
 
 const isNode = Root.Runtime.Runtime.isNode();
@@ -173,16 +190,20 @@ UI.ViewManager.registerViewExtension({
   },
 });
 
+const individualThrottlingEnabled = (): boolean =>
+    Boolean(Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled);
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.DRAWER_VIEW,
   id: 'network.blocked-urls',
-  commandPrompt: i18nLazyString(UIStrings.showNetworkRequestBlocking),
-  title: i18nLazyString(UIStrings.networkRequestBlocking),
+  commandPrompt: () => individualThrottlingEnabled() ? i18nString(UIStrings.showRequestConditions) :
+                                                       i18nString(UIStrings.showNetworkRequestBlocking),
+  title: () => individualThrottlingEnabled() ? i18nString(UIStrings.networkRequestConditions) :
+                                               i18nString(UIStrings.networkRequestBlocking),
   persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
   order: 60,
   async loadView() {
     const Network = await loadNetworkModule();
-    return new Network.BlockedURLsPane.BlockedURLsPane();
+    return new Network.RequestConditionsDrawer.RequestConditionsDrawer();
   },
 });
 
@@ -329,28 +350,31 @@ UI.ActionRegistration.registerActionExtension({
 UI.ActionRegistration.registerActionExtension({
   actionId: 'network.add-network-request-blocking-pattern',
   category: UI.ActionRegistration.ActionCategory.NETWORK,
-  title: i18nLazyString(UIStrings.addNetworkRequestBlockingPattern),
+  title: () => individualThrottlingEnabled() ? i18nString(UIStrings.addNetworkRequestBlockingOrThrottlingPattern) :
+                                               i18nString(UIStrings.addNetworkRequestBlockingPattern),
   iconClass: UI.ActionRegistration.IconClass.PLUS,
   contextTypes() {
-    return maybeRetrieveContextTypes(Network => [Network.BlockedURLsPane.BlockedURLsPane]);
+    return maybeRetrieveContextTypes(Network => [Network.RequestConditionsDrawer.RequestConditionsDrawer]);
   },
   async loadActionDelegate() {
     const Network = await loadNetworkModule();
-    return new Network.BlockedURLsPane.ActionDelegate();
+    return new Network.RequestConditionsDrawer.ActionDelegate();
   },
 });
 
 UI.ActionRegistration.registerActionExtension({
   actionId: 'network.remove-all-network-request-blocking-patterns',
   category: UI.ActionRegistration.ActionCategory.NETWORK,
-  title: i18nLazyString(UIStrings.removeAllNetworkRequestBlockingPatterns),
+  title: () => individualThrottlingEnabled() ?
+      i18nString(UIStrings.removeAllNetworkRequestBlockingOrThrottlingPatterns) :
+      i18nString(UIStrings.removeAllNetworkRequestBlockingPatterns),
   iconClass: UI.ActionRegistration.IconClass.CLEAR,
   contextTypes() {
-    return maybeRetrieveContextTypes(Network => [Network.BlockedURLsPane.BlockedURLsPane]);
+    return maybeRetrieveContextTypes(Network => [Network.RequestConditionsDrawer.RequestConditionsDrawer]);
   },
   async loadActionDelegate() {
     const Network = await loadNetworkModule();
-    return new Network.BlockedURLsPane.ActionDelegate();
+    return new Network.RequestConditionsDrawer.ActionDelegate();
   },
 });
 

package/front_end/panels/network/network.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import './BinaryResourceView.js';
-import './BlockedURLsPane.js';
+import './RequestConditionsDrawer.js';
 import './EventSourceMessagesView.js';
 import './NetworkConfigView.js';
 import './NetworkDataGridNode.js';
@@ -28,7 +28,6 @@ import './NetworkOverview.js';
 import './NetworkPanel.js';
 
 import * as BinaryResourceView from './BinaryResourceView.js';
-import * as BlockedURLsPane from './BlockedURLsPane.js';
 import * as EventSourceMessagesView from './EventSourceMessagesView.js';
 import * as NetworkConfigView from './NetworkConfigView.js';
 import * as NetworkDataGridNode from './NetworkDataGridNode.js';
@@ -41,6 +40,7 @@ import * as NetworkOverview from './NetworkOverview.js';
 import * as NetworkPanel from './NetworkPanel.js';
 import * as NetworkSearchScope from './NetworkSearchScope.js';
 import * as NetworkWaterfallColumn from './NetworkWaterfallColumn.js';
+import * as RequestConditionsDrawer from './RequestConditionsDrawer.js';
 import * as RequestCookiesView from './RequestCookiesView.js';
 import * as RequestHTMLView from './RequestHTMLView.js';
 import * as RequestInitiatorView from './RequestInitiatorView.js';
@@ -54,7 +54,6 @@ import * as SignedExchangeInfoView from './SignedExchangeInfoView.js';
 
 export {
   BinaryResourceView,
-  BlockedURLsPane,
   EventSourceMessagesView,
   NetworkConfigView,
   NetworkDataGridNode,
@@ -67,6 +66,7 @@ export {
   NetworkPanel,
   NetworkSearchScope,
   NetworkWaterfallColumn,
+  RequestConditionsDrawer,
   RequestCookiesView,
   RequestHTMLView,
   RequestInitiatorView,