chrome-devtools-frontend 1.0.1529904 → 1.0.1531367

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -6,14 +6,14 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Badges from '../../models/badges/badges.js';
+import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ThrottlingManager} from './ThrottlingManager.js';
-import {type NetworkThrottlingConditionsGroup, ThrottlingPresets} from './ThrottlingPresets.js';
+import type {NetworkThrottlingConditionsGroup} from './ThrottlingPresets.js';
 
-const {render, html, Directives} = Lit;
+const {render, html, Directives, nothing} = Lit;
 
 const UIStrings = {
   /**
@@ -28,6 +28,10 @@ const UIStrings = {
    * @description Text in Network Throttling Selector of the Network panel
    */
   custom: 'Custom',
+  /**
+   * @description  Title for a network throttling group containing the request blocking option
+   */
+  blockingGroup: 'Blocking',
   /**
    *@description Text with two placeholders separated by a colon
    *@example {Node removed} PH1
@@ -54,26 +58,28 @@ const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/NetworkThrott
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 interface ViewInput {
-  recommendedConditions: SDK.NetworkManager.Conditions|null;
-  selectedConditions: SDK.NetworkManager.Conditions;
+  recommendedConditions: SDK.NetworkManager.ThrottlingConditions|null;
+  selectedConditions: SDK.NetworkManager.ThrottlingConditions|undefined;
   throttlingGroups: NetworkThrottlingConditionsGroup[];
   customConditionsGroup: NetworkThrottlingConditionsGroup;
-  jslogContext: string;
-  title: string;
-  onSelect: (conditions: SDK.NetworkManager.Conditions) => void;
+  jslogContext: string|undefined;
+  title: string|undefined;
+  onSelect: (conditions: SDK.NetworkManager.ThrottlingConditions) => void;
   onAddCustomConditions: () => void;
 }
 export type ViewFunction = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: ViewFunction = (input, output, target) => {
   // The title is usually an i18nLazyString except for custom values that are stored in the local storage in the form of a string.
-  const title = (conditions: SDK.NetworkManager.Conditions): string =>
+  const title = (conditions: SDK.NetworkManager.ThrottlingConditions): string =>
       typeof conditions.title === 'function' ? conditions.title() : conditions.title;
-  const jslog = (group: NetworkThrottlingConditionsGroup, condition: SDK.NetworkManager.Conditions): string =>
-      `${VisualLogging.item(Platform.StringUtilities.toKebabCase(condition.i18nTitleKey || title(condition))).track({
-        click: true
-      })}`;
-  const optionsMap = new WeakMap<HTMLOptionElement, SDK.NetworkManager.Conditions>();
+  const jslog = (group: NetworkThrottlingConditionsGroup, condition: SDK.NetworkManager.ThrottlingConditions): string =>
+      `${
+          VisualLogging
+              .item(Platform.StringUtilities.toKebabCase(
+                  ('i18nTitleKey' in condition && condition.i18nTitleKey) || title(condition)))
+              .track({click: true})}`;
+  const optionsMap = new WeakMap<HTMLOptionElement, SDK.NetworkManager.ThrottlingConditions>();
   let selectedConditions = input.selectedConditions;
   function onSelect(event: Event): void {
     const element = (event.target as HTMLSelectElement | null);
@@ -87,7 +93,9 @@ export const DEFAULT_VIEW: ViewFunction = (input, output, target) => {
     if (option === element.options[element.options.length - 1]) {
       input.onAddCustomConditions();
       event.consume(true);
-      element.value = title(selectedConditions);
+      if (selectedConditions) {
+        element.value = title(selectedConditions);
+      }
     } else {
       const conditions = optionsMap.get(option);
       if (conditions) {
@@ -96,10 +104,11 @@ export const DEFAULT_VIEW: ViewFunction = (input, output, target) => {
       }
     }
   }
+
   render(
       // clang-format off
     html`<select
-      aria-label=${input.title}
+      aria-label=${input.title ?? nothing}
       jslog=${VisualLogging.dropDown().track({change: true}).context(input.jslogContext)}
       @change=${onSelect}>
           ${input.throttlingGroups.map(
@@ -108,7 +117,9 @@ export const DEFAULT_VIEW: ViewFunction = (input, output, target) => {
             label=${group.title}>
             ${group.items.map(condition => html`<option
               ${Directives.ref(option => option && optionsMap.set(option as HTMLOptionElement, condition))}
-              ?selected=${SDK.NetworkManager.networkConditionsEqual(condition, selectedConditions)}
+              ?selected=${selectedConditions ?
+                  SDK.NetworkManager.networkConditionsEqual(condition, selectedConditions) :
+                  (group === input.throttlingGroups[0])}
               value=${title(condition)}
               aria-label=${i18nString(UIStrings.sS, {PH1: group.title, PH2: title(condition)})}
               jslog=${jslog(group, condition)}>
@@ -120,7 +131,7 @@ export const DEFAULT_VIEW: ViewFunction = (input, output, target) => {
         <optgroup label=${input.customConditionsGroup.title}>
           ${input.customConditionsGroup.items.map(condition => html`<option
               ${Directives.ref(option => option && optionsMap.set(option as HTMLOptionElement, condition))}
-              ?selected=${SDK.NetworkManager.networkConditionsEqual(condition, selectedConditions)}
+              ?selected=${selectedConditions && SDK.NetworkManager.networkConditionsEqual(condition, selectedConditions)}
               value=${title(condition)}
               aria-label=${i18nString(UIStrings.sS, {PH1: input.customConditionsGroup.title, PH2: title(condition)})}
               jslog=${VisualLogging.item('custom-network-throttling-item').track({click: true})}>
@@ -144,25 +155,29 @@ export const enum Events {
 }
 
 export interface EventTypes {
-  [Events.CONDITIONS_CHANGED]: SDK.NetworkManager.Conditions;
+  [Events.CONDITIONS_CHANGED]: SDK.NetworkManager.ThrottlingConditions;
 }
 
 export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #recommendedConditions: SDK.NetworkManager.Conditions|null = null;
   readonly #element: HTMLElement;
-  readonly #jslogContext: string;
-  #currentConditions: SDK.NetworkManager.Conditions;
-  readonly #title: string;
+  #jslogContext?: string;
+  #currentConditions: SDK.NetworkManager.ThrottlingConditions|undefined;
+  readonly #title?: string;
   readonly #view: ViewFunction;
+  #variant: NetworkThrottlingSelect.Variant = NetworkThrottlingSelect.Variant.GLOBAL_CONDITIONS;
 
   static createForGlobalConditions(element: HTMLElement, title: string): NetworkThrottlingSelect {
     ThrottlingManager.instance();  // Instantiate the throttling manager to connect network manager with the setting
-    const select = new NetworkThrottlingSelect(
-        element, title, SDK.NetworkManager.activeNetworkThrottlingKeySetting().name,
-        SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions());
+    const select = new NetworkThrottlingSelect(element, {
+      title,
+      jslogContext: SDK.NetworkManager.activeNetworkThrottlingKeySetting().name,
+      currentConditions: SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions()
+    });
     select.addEventListener(
         Events.CONDITIONS_CHANGED,
-        ev => SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(ev.data));
+        ev => !('block' in ev.data) &&
+            SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(ev.data));
     SDK.NetworkManager.MultitargetNetworkManager.instance().addEventListener(
         SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, () => {
           select.currentConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
@@ -171,29 +186,57 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
   }
 
   constructor(
-      element: HTMLElement, title: string, jslogContext: string, currentConditions: SDK.NetworkManager.Conditions,
+      element: HTMLElement, options: {
+        title?: string,
+        jslogContext?: string,
+        currentConditions?: SDK.NetworkManager.Conditions,
+        includeBlocking?: true,
+      } = {},
       view = DEFAULT_VIEW) {
     super();
     SDK.NetworkManager.customUserNetworkConditionsSetting().addChangeListener(this.#performUpdate, this);
     this.#element = element;
-    this.#jslogContext = jslogContext;
-    this.#currentConditions = currentConditions;
-    this.#title = title;
+    this.#jslogContext = options.jslogContext;
+    this.#currentConditions = options.currentConditions;
+    this.#title = options.title;
     this.#view = view;
 
     this.#performUpdate();
   }
 
+  get recommendedConditions(): SDK.NetworkManager.Conditions|null {
+    return this.#recommendedConditions;
+  }
   set recommendedConditions(recommendedConditions: SDK.NetworkManager.Conditions|null) {
     this.#recommendedConditions = recommendedConditions;
     this.#performUpdate();
   }
 
-  set currentConditions(currentConditions: SDK.NetworkManager.Conditions) {
+  get currentConditions(): SDK.NetworkManager.ThrottlingConditions|undefined {
+    return this.#currentConditions;
+  }
+  set currentConditions(currentConditions: SDK.NetworkManager.ThrottlingConditions|undefined) {
     this.#currentConditions = currentConditions;
     this.#performUpdate();
   }
 
+  get jslogContext(): string|undefined {
+    return this.#jslogContext;
+  }
+  set jslogContext(jslogContext: string|undefined) {
+    this.#jslogContext = jslogContext;
+    this.#performUpdate();
+  }
+
+  get variant(): NetworkThrottlingSelect.Variant {
+    return this.#variant;
+  }
+  set variant(variant: NetworkThrottlingSelect.Variant) {
+    this.#variant = variant;
+    this.#performUpdate();
+  }
+
+  // FIXME Should use requestUpdate once we merge this with the widget
   #performUpdate(): void {
     const customNetworkConditionsSetting = SDK.NetworkManager.customUserNetworkConditionsSetting();
     const customNetworkConditions = customNetworkConditionsSetting.get();
@@ -201,16 +244,41 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
       void Common.Revealer.reveal(SDK.NetworkManager.customUserNetworkConditionsSetting());
     };
 
-    const onSelect = (conditions: SDK.NetworkManager.Conditions): void => {
+    const onSelect = (conditions: SDK.NetworkManager.ThrottlingConditions): void => {
       this.dispatchEventToListeners(Events.CONDITIONS_CHANGED, conditions);
-      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.NETWORK_SPEED_THROTTLED);
     };
 
-    const throttlingGroups = [
-      {title: i18nString(UIStrings.disabled), items: [SDK.NetworkManager.NoThrottlingConditions]},
-      {title: i18nString(UIStrings.presets), items: ThrottlingPresets.networkPresets},
-    ];
+    const throttlingGroups: NetworkThrottlingConditionsGroup[] = [];
+
+    switch (this.#variant) {
+      case NetworkThrottlingSelect.Variant.GLOBAL_CONDITIONS:
+        throttlingGroups.push(
+            {title: i18nString(UIStrings.disabled), items: [SDK.NetworkManager.NoThrottlingConditions]}, {
+              title: i18nString(UIStrings.presets),
+              items: [
+                SDK.NetworkManager.Fast4GConditions,
+                SDK.NetworkManager.Slow4GConditions,
+                SDK.NetworkManager.Slow3GConditions,
+                SDK.NetworkManager.OfflineConditions,
+              ]
+            });
+        break;
+      case NetworkThrottlingSelect.Variant.INDIVIDUAL_REQUEST_CONDITIONS:
+        throttlingGroups.push(
+            {title: i18nString(UIStrings.blockingGroup), items: [SDK.NetworkManager.BlockingConditions]},
+            {
+              title: i18nString(UIStrings.presets),
+              items: [
+                SDK.NetworkManager.Fast4GConditions,
+                SDK.NetworkManager.Slow4GConditions,
+                SDK.NetworkManager.Slow3GConditions,
+              ]
+            },
+        );
+        break;
+    }
     const customConditionsGroup = {title: i18nString(UIStrings.custom), items: customNetworkConditions};
+
     const viewInput: ViewInput = {
       recommendedConditions: this.#recommendedConditions,
       selectedConditions: this.#currentConditions,
@@ -224,3 +292,35 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
     this.#view(viewInput, {}, this.#element);
   }
 }
+export namespace NetworkThrottlingSelect {
+  export const enum Variant {
+    GLOBAL_CONDITIONS = 'global-conditions',
+    INDIVIDUAL_REQUEST_CONDITIONS = 'individual-request-conditions',
+  }
+}
+
+export class NetworkThrottlingSelectorWidget extends UI.Widget.VBox {
+  #select: NetworkThrottlingSelect;
+  #conditionsChangedHandler?: ((conditions: SDK.NetworkManager.ThrottlingConditions) => void);
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#select = new NetworkThrottlingSelect(this.contentElement, {}, view);
+    this.#select.addEventListener(Events.CONDITIONS_CHANGED, ({data}) => this.#conditionsChangedHandler?.(data));
+  }
+
+  set variant(variant: NetworkThrottlingSelect.Variant) {
+    this.#select.variant = variant;
+  }
+
+  set jslogContext(context: string) {
+    this.#select.jslogContext = context;
+  }
+
+  set currentConditions(currentConditions: SDK.NetworkManager.ThrottlingConditions|undefined) {
+    this.#select.currentConditions = currentConditions;
+  }
+
+  set onConditionsChanged(handler: (conditions: SDK.NetworkManager.ThrottlingConditions) => void) {
+    this.#conditionsChangedHandler = handler;
+  }
+}

package/front_end/panels/mobile_throttling/ThrottlingPresets.ts

@@ -167,7 +167,7 @@ export interface Conditions {
 
 export interface NetworkThrottlingConditionsGroup {
   title: string;
-  items: SDK.NetworkManager.Conditions[];
+  items: SDK.NetworkManager.ThrottlingConditions[];
 }
 
 export interface MobileThrottlingConditionsGroup {

package/front_end/panels/network/BlockedURLsPane.ts

@@ -17,6 +17,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 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 blockedURLsPaneStyles from './blockedURLsPane.css.js';
 
@@ -192,7 +193,7 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
   }
 
   override performUpdate(): void {
-    const enabled = this.manager.blockingEnabled();
+    const enabled = this.manager.requestConditions.conditionsEnabled;
     this.list.element.classList.toggle('blocking-disabled', !enabled && Boolean(this.manager.requestConditions.count));
 
     const input: ViewInput = {
@@ -205,9 +206,11 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
   }
 
   addPattern(): void {
-    this.manager.setBlockingEnabled(true);
+    this.manager.requestConditions.conditionsEnabled = true;
     this.list.addNewItem(
-        0, new SDK.NetworkManager.RequestCondition({url: Platform.DevToolsPath.EmptyUrlString, enabled: true}));
+        0,
+        SDK.NetworkManager.RequestCondition.createFromSetting(
+            {url: Platform.DevToolsPath.EmptyUrlString, enabled: true}));
   }
 
   removeAllPatterns(): void {
@@ -224,6 +227,11 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
         condition.enabled = !condition.enabled;
       }
     };
+    const onConditionsChanged = (conditions: SDK.NetworkManager.ThrottlingConditions): void => {
+      if (editable) {
+        condition.conditions = conditions;
+      }
+    };
 
     const {enabled, originalOrUpgradedURLPattern, constructorStringOrWildcardURL, wildcardURL} = condition;
 
@@ -237,6 +245,17 @@ 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>
     ${originalOrUpgradedURLPattern ? html`
       <devtools-tooltip variant=rich jslogcontext=url-pattern id=url-pattern-${index}>
         <div>hash: ${originalOrUpgradedURLPattern.hash}</div>
@@ -267,7 +286,12 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
             : i18nString(UIStrings.patternFailedToParse)}
         ${learnMore()}
       </devtools-tooltip>`: nothing}
-    <div @click=${toggle} class=blocked-url-label aria-details=url-pattern-${index}>${constructorStringOrWildcardURL}</div>
+    <div
+      @click=${toggle}
+      class=blocked-url-label
+      aria-details=url-pattern-${index}>
+        ${constructorStringOrWildcardURL}
+    </div>
     <div class=blocked-url-count>${i18nString(UIStrings.dBlocked, {PH1: count})}</div>`,
           // clang-format on
           element);
@@ -290,7 +314,7 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
   }
 
   private toggleEnabled(): void {
-    this.manager.setBlockingEnabled(!this.manager.blockingEnabled());
+    this.manager.requestConditions.conditionsEnabled = !this.manager.requestConditions.conditionsEnabled;
     this.update();
   }
 
@@ -368,7 +392,7 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
   }
 
   update(): void {
-    const enabled = this.manager.blockingEnabled();
+    const enabled = this.manager.requestConditions.conditionsEnabled;
     this.list.clear();
     for (const pattern of this.manager.requestConditions.conditions) {
       if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled || pattern.wildcardURL) {

package/front_end/panels/network/NetworkLogView.ts

@@ -432,6 +432,27 @@ const UIStrings = {
    * @description A context menu item in the Network Log View of the Network panel
    */
   clearBrowserCookies: 'Clear browser cookies',
+  /**
+   * @description A context menu item in the Network Log View of the Network panel
+   */
+  throttleRequests: 'Throttle requests',
+  /**
+   * @description A context menu item in the Network Log View of the Network panel
+   */
+  throttleRequestUrl: 'Throttle request URL',
+  /**
+   * @description A context menu item in the Network Log View of the Network panel
+   * @example {example.com} PH1
+   */
+  unthrottleS: 'Stop throttling {PH1}',
+  /**
+   * @description A context menu item in the Network Log View of the Network panel
+   */
+  throttleRequestDomain: 'Throttle request domain',
+  /**
+   * @description A context menu item in the Network Log View of the Network panel
+   */
+  blockRequests: 'Block requests',
   /**
    * @description A context menu item in the Network Log View of the Network panel
    */
@@ -1849,43 +1870,124 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       const maxBlockedURLLength = 20;
       const manager = SDK.NetworkManager.MultitargetNetworkManager.instance();
 
-      function addBlockedURL(url: string): void {
-        manager.requestConditions.add(
-            new SDK.NetworkManager.RequestCondition({enabled: true, url: url as Platform.DevToolsPath.UrlString}));
-        manager.setBlockingEnabled(true);
-        void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
-      }
+      if (!Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
+        function addBlockedURL(url: string): void {
+          manager.requestConditions.add(SDK.NetworkManager.RequestCondition.createFromSetting(
+              {enabled: true, url: url as Platform.DevToolsPath.UrlString}));
+          manager.requestConditions.conditionsEnabled = true;
+          void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
+        }
 
-      function removeBlockedURL(url: string): void {
-        const entry = manager.requestConditions.findCondition(url);
-        if (entry) {
-          manager.requestConditions.delete(entry);
+        function removeBlockedURL(url: string): void {
+          const entry = manager.requestConditions.findCondition(url);
+          if (entry) {
+            manager.requestConditions.delete(entry);
+          }
+          void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
         }
-        void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
-      }
 
-      const urlWithoutScheme = request.parsedURL.urlWithoutScheme();
-      if (urlWithoutScheme && !manager.requestConditions.has(urlWithoutScheme)) {
-        contextMenu.debugSection().appendItem(
-            i18nString(UIStrings.blockRequestUrl), addBlockedURL.bind(null, urlWithoutScheme),
-            {jslogContext: 'block-request-url'});
-      } else if (urlWithoutScheme) {
-        const croppedURL = Platform.StringUtilities.trimMiddle(urlWithoutScheme, maxBlockedURLLength);
-        contextMenu.debugSection().appendItem(
-            i18nString(UIStrings.unblockS, {PH1: croppedURL}), removeBlockedURL.bind(null, urlWithoutScheme),
-            {jslogContext: 'unblock'});
-      }
+        const urlWithoutScheme = request.parsedURL.urlWithoutScheme();
+        if (urlWithoutScheme && !manager.requestConditions.has(urlWithoutScheme)) {
+          contextMenu.debugSection().appendItem(
+              i18nString(UIStrings.blockRequestUrl), addBlockedURL.bind(null, urlWithoutScheme),
+              {jslogContext: 'block-request-url'});
+        } else if (urlWithoutScheme) {
+          const croppedURL = Platform.StringUtilities.trimMiddle(urlWithoutScheme, maxBlockedURLLength);
+          contextMenu.debugSection().appendItem(
+              i18nString(UIStrings.unblockS, {PH1: croppedURL}), removeBlockedURL.bind(null, urlWithoutScheme),
+              {jslogContext: 'unblock'});
+        }
 
-      const domain = request.parsedURL.domain();
-      if (domain && !manager.requestConditions.has(domain)) {
-        contextMenu.debugSection().appendItem(
-            i18nString(UIStrings.blockRequestDomain), addBlockedURL.bind(null, domain),
-            {jslogContext: 'block-request-domain'});
-      } else if (domain) {
-        const croppedDomain = Platform.StringUtilities.trimMiddle(domain, maxBlockedURLLength);
-        contextMenu.debugSection().appendItem(
-            i18nString(UIStrings.unblockS, {PH1: croppedDomain}), removeBlockedURL.bind(null, domain),
-            {jslogContext: 'unblock'});
+        const domain = request.parsedURL.domain();
+        if (domain && !manager.requestConditions.has(domain)) {
+          contextMenu.debugSection().appendItem(
+              i18nString(UIStrings.blockRequestDomain), addBlockedURL.bind(null, domain),
+              {jslogContext: 'block-request-domain'});
+        } else if (domain) {
+          const croppedDomain = Platform.StringUtilities.trimMiddle(domain, maxBlockedURLLength);
+          contextMenu.debugSection().appendItem(
+              i18nString(UIStrings.unblockS, {PH1: croppedDomain}), removeBlockedURL.bind(null, domain),
+              {jslogContext: 'unblock'});
+        }
+      } else {
+        function removeRequestCondition(pattern: SDK.NetworkManager.RequestURLPattern): void {
+          const entry = manager.requestConditions.findCondition(pattern.constructorString);
+          if (entry) {
+            manager.requestConditions.delete(entry);
+            void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
+          }
+        }
+
+        function addRequestCondition(
+            pattern: SDK.NetworkManager.RequestURLPattern,
+            conditions: SDK.NetworkManager.ThrottlingConditions,
+            ): void {
+          const entry = manager.requestConditions.findCondition(pattern.constructorString);
+          if (entry) {
+            entry.conditions = conditions;
+          } else {
+            manager.requestConditions.add(SDK.NetworkManager.RequestCondition.create(pattern, conditions));
+          }
+          manager.requestConditions.conditionsEnabled = true;
+          void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
+        }
+
+        const blockingMenu =
+            contextMenu.debugSection().appendSubMenuItem(i18nString(UIStrings.blockRequests), /* disabled=*/ true);
+        const throttlingMenu =
+            contextMenu.debugSection().appendSubMenuItem(i18nString(UIStrings.throttleRequests), /* disabled=*/ true);
+
+        const urlWithoutScheme = request.parsedURL.urlWithoutScheme();
+        const urlPattern = urlWithoutScheme &&
+            SDK.NetworkManager.RequestURLPattern.create(
+                `*://${urlWithoutScheme}` as SDK.NetworkManager.URLPatternConstructorString);
+        if (urlPattern) {
+          throttlingMenu.setEnabled(true);
+          blockingMenu.setEnabled(true);
+          const existingConditions = manager.requestConditions.findCondition(urlPattern.constructorString);
+          const isBlocking = existingConditions?.conditions === SDK.NetworkManager.BlockingConditions;
+          const isThrottling = existingConditions &&
+              existingConditions.conditions !== SDK.NetworkManager.BlockingConditions &&
+              existingConditions.conditions !== SDK.NetworkManager.NoThrottlingConditions;
+          blockingMenu.debugSection().appendItem(
+              isBlocking ? i18nString(UIStrings.unblockS, {PH1: urlPattern.constructorString}) :
+                           i18nString(UIStrings.blockRequestUrl),
+              () => isBlocking ? removeRequestCondition(urlPattern) :
+                                 addRequestCondition(urlPattern, SDK.NetworkManager.BlockingConditions),
+              {jslogContext: 'block-request-url'});
+          throttlingMenu.debugSection().appendItem(
+              isThrottling ? i18nString(UIStrings.unthrottleS, {PH1: urlPattern.constructorString}) :
+                             i18nString(UIStrings.throttleRequestUrl),
+              () => isThrottling ? removeRequestCondition(urlPattern) :
+                                   addRequestCondition(urlPattern, SDK.NetworkManager.Slow3GConditions),
+              {jslogContext: 'throttle-request-url'});
+        }
+
+        const domain = request.parsedURL.domain();
+        const domainPattern = domain &&
+            SDK.NetworkManager.RequestURLPattern.create(
+                `*://${domain}` as SDK.NetworkManager.URLPatternConstructorString);
+        if (domainPattern) {
+          throttlingMenu.setEnabled(true);
+          blockingMenu.setEnabled(true);
+          const existingConditions = manager.requestConditions.findCondition(domainPattern.constructorString);
+          const isBlocking = existingConditions?.conditions === SDK.NetworkManager.BlockingConditions;
+          const isThrottling = existingConditions &&
+              existingConditions.conditions !== SDK.NetworkManager.BlockingConditions &&
+              existingConditions.conditions !== SDK.NetworkManager.NoThrottlingConditions;
+          blockingMenu.debugSection().appendItem(
+              isBlocking ? i18nString(UIStrings.unblockS, {PH1: domainPattern.constructorString}) :
+                           i18nString(UIStrings.blockRequestDomain),
+              () => isBlocking ? removeRequestCondition(domainPattern) :
+                                 addRequestCondition(domainPattern, SDK.NetworkManager.BlockingConditions),
+              {jslogContext: 'block-request-domain'});
+          throttlingMenu.debugSection().appendItem(
+              isThrottling ? i18nString(UIStrings.unthrottleS, {PH1: domainPattern.constructorString}) :
+                             i18nString(UIStrings.throttleRequestDomain),
+              () => isThrottling ? removeRequestCondition(domainPattern) :
+                                   addRequestCondition(domainPattern, SDK.NetworkManager.Slow3GConditions),
+              {jslogContext: 'throttle-request-domain'});
+        }
       }
 
       if (SDK.NetworkManager.NetworkManager.canReplayRequest(request)) {

package/front_end/panels/network/blockedURLsPane.css

@@ -74,3 +74,8 @@
   text-align: inherit;
   height: 22px;
 }
+
+.conditions-selector {
+  max-width: 120px;
+  margin: var(--sys-size-3);
+}

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -154,7 +154,7 @@ export class AiCodeCompletionPlugin extends Plugin {
           if (this.#aiCodeCompletion && this.#editor && TextEditor.Config.hasActiveAiSuggestion(this.#editor.state)) {
             const {accepted, suggestion} = TextEditor.Config.acceptAiAutoCompleteSuggestion(this.#editor.editor);
             if (accepted) {
-              if (suggestion?.rpcGlobalId && suggestion?.sampleId) {
+              if (suggestion?.rpcGlobalId) {
                 this.#aiCodeCompletion?.registerUserAcceptance(suggestion.rpcGlobalId, suggestion.sampleId);
               }
               this.#onAiCodeCompletionSuggestionAccepted();

package/front_end/panels/sources/SourcesPanel.ts

@@ -1212,6 +1212,11 @@ export class SourcesPanel extends UI.Panel.Panel implements
       this.sidebarPaneView.detach();
     }
 
+    if (Root.Runtime.Runtime.isTraceApp()) {
+      this.splitWidget.hideSidebar();
+      return;
+    }
+
     this.splitWidget.setVertical(!vertically);
     this.splitWidget.element.classList.toggle('sources-split-view-vertical', vertically);