chrome-devtools-frontend 1.0.1530564 → 1.0.1532228

package/front_end/models/issues_manager/StylesheetLoadingIssue.ts

@@ -15,7 +15,8 @@ export const lateImportStylesheetLoadingCode = [
 
 export class StylesheetLoadingIssue extends Issue {
   #issueDetails: Protocol.Audits.StylesheetLoadingIssueDetails;
-  constructor(issueDetails: Protocol.Audits.StylesheetLoadingIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
+  constructor(
+      issueDetails: Protocol.Audits.StylesheetLoadingIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
     const code =
         `${Protocol.Audits.InspectorIssueCode.StylesheetLoadingIssue}::${issueDetails.styleSheetLoadingIssueReason}`;
     super(code, issuesModel);
@@ -67,8 +68,9 @@ export class StylesheetLoadingIssue extends Issue {
     return IssueKind.PAGE_ERROR;
   }
 
-  static fromInspectorIssue(issueModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):
-      StylesheetLoadingIssue[] {
+  static fromInspectorIssue(
+      issueModel: SDK.IssuesModel.IssuesModel|null,
+      inspectorIssue: Protocol.Audits.InspectorIssue): StylesheetLoadingIssue[] {
     const stylesheetLoadingDetails = inspectorIssue.details.stylesheetLoadingIssueDetails;
     if (!stylesheetLoadingDetails) {
       console.warn('Stylesheet loading issue without details received');

package/front_end/models/issues_manager/UnencodedDigestIssue.ts

@@ -29,7 +29,8 @@ const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined
 export class UnencodedDigestIssue extends Issue<string> {
   readonly #issueDetails: Protocol.Audits.UnencodedDigestIssueDetails;
 
-  constructor(issueDetails: Protocol.Audits.UnencodedDigestIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
+  constructor(
+      issueDetails: Protocol.Audits.UnencodedDigestIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
     super(
         {
           code: `${Protocol.Audits.InspectorIssueCode.UnencodedDigestIssue}::${issueDetails.error}`,
@@ -76,8 +77,9 @@ export class UnencodedDigestIssue extends Issue<string> {
     return this.details().request ? [this.details().request] : [];
   }
 
-  static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):
-      UnencodedDigestIssue[] {
+  static fromInspectorIssue(
+      issuesModel: SDK.IssuesModel.IssuesModel|null,
+      inspectorIssue: Protocol.Audits.InspectorIssue): UnencodedDigestIssue[] {
     const details = inspectorIssue.details.unencodedDigestIssueDetails;
     if (!details) {
       console.warn('Unencoded-Digest issue without details received.');

package/front_end/models/issues_manager/UserReidentificationIssue.ts

@@ -16,7 +16,7 @@ export class UserReidentificationIssue extends Issue {
   #issueDetails: Protocol.Audits.UserReidentificationIssueDetails;
 
   constructor(
-      issueDetails: Protocol.Audits.UserReidentificationIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
+      issueDetails: Protocol.Audits.UserReidentificationIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
     super('UserReidentificationIssue', issuesModel);
     this.#issueDetails = issueDetails;
   }
@@ -46,8 +46,9 @@ export class UserReidentificationIssue extends Issue {
     return IssueKind.IMPROVEMENT;
   }
 
-  static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):
-      UserReidentificationIssue[] {
+  static fromInspectorIssue(
+      issuesModel: SDK.IssuesModel.IssuesModel|null,
+      inspectorIssue: Protocol.Audits.InspectorIssue): UserReidentificationIssue[] {
     const userReidentificationIssueDetails = inspectorIssue.details.userReidentificationIssueDetails;
     if (!userReidentificationIssueDetails) {
       console.warn('User Reidentification issue without details received.');

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -6041,7 +6041,13 @@ export const NativeFunctions = [
   },
   {
     name: "waitUntil",
-    signatures: [["f"]]
+    signatures: [["f"]],
+    receivers: ["ExtendableEvent"]
+  },
+  {
+    name: "waitUntil",
+    signatures: [["promise"]],
+    receivers: ["ViewTransition"]
   },
   {
     name: "respondWith",
@@ -8237,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/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();
     }
@@ -1187,7 +1200,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
       contextMenu.defaultSection().appendCheckboxItem(title, () => {
         void this.#openHistoricConversation(conversation);
-      }, {checked: (this.#conversation === conversation)});
+      }, {checked: (this.#conversation === conversation), jslogContext: 'freestyler.history-item'});
     }
 
     const historyEmpty = contextMenu.defaultSection().items.length === 0;
@@ -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

@@ -61,6 +61,10 @@ const UIStringsNotTranslate = {
    * @description Header text during loading state while an AI summary is being generated
    */
   summarizing: 'Summarizing…',
+  /**
+   * @description Header text during longer lasting loading state while an AI summary is being generated
+   */
+  summarizingTakesABitLonger: 'Summarizing takes a bit longer…',
   /**
    * @description Label for an animation shown while an AI response is being generated
    */
@@ -77,6 +81,10 @@ const UIStringsNotTranslate = {
    * @description Aria-label for an infor-button triggering a tooltip with more info about data usage
    */
   learnDataUsage: 'Learn more about how your data is used',
+  /**
+   * @description Header text if there was an error during AI summary generation
+   */
+  summaryNotAvailable: 'Summary not available',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
@@ -84,6 +92,7 @@ const lockedString = i18n.i18n.lockedString;
 const CODE_SNIPPET_WARNING_URL = 'https://support.google.com/legal/answer/13505487';
 const DATA_USAGE_URL = 'https://developer.chrome.com/docs/devtools/ai-assistance/get-started#data-use';
 const EXPLAIN_TEASER_ACTION_ID = 'explain.console-message.teaser';
+const SLOW_GENERATION_CUTOFF_MILLISECONDS = 3500;
 
 interface ViewInput {
   onTellMeMoreClick: (event: Event) => void;
@@ -95,6 +104,8 @@ interface ViewInput {
   isInactive: boolean;
   dontShowChanged: (e: Event) => void;
   hasTellMeMoreButton: boolean;
+  isSlowGeneration: boolean;
+  isError: boolean;
 }
 
 export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
@@ -104,6 +115,51 @@ 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>
@@ -115,64 +171,36 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
       prefer-span-left
     >
       <div class="teaser-tooltip-container">
-        ${showPlaceholder ? html`
-          <h2>${lockedString(UIStringsNotTranslate.summarizing)}</h2>
-          <div
-            role="presentation"
-            aria-label=${lockedString(UIStringsNotTranslate.loading)}
-            class="loader"
-            style="clip-path: url(${'#clipPath-' + input.uuid});"
-          >
-            <svg width="100%" height="52">
-              <defs>
-              <clipPath id=${'clipPath-' + input.uuid}>
-                <rect x="0" y="0" width="100%" height="12" rx="8"></rect>
-                <rect x="0" y="20" width="100%" height="12" rx="8"></rect>
-                <rect x="0" y="40" width="100%" height="12" rx="8"></rect>
-              </clipPath>
-            </defs>
-            </svg>
-          </div>
-        ` : html`
-          <h2>${input.headerText}</h2>
-          <div>${input.mainText}</div>
-          <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}
-            <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>
-        `}
+        ${input.isError ? html`
+          <h2>${lockedString(UIStringsNotTranslate.summaryNotAvailable)}</h2>
+        ` :
+          showPlaceholder ? html`
+            <h2>${input.isSlowGeneration ?
+              lockedString(UIStringsNotTranslate.summarizingTakesABitLonger) :
+              lockedString(UIStringsNotTranslate.summarizing)
+            }</h2>
+            <div
+              role="presentation"
+              aria-label=${lockedString(UIStringsNotTranslate.loading)}
+              class="loader"
+              style="clip-path: url(${'#clipPath-' + input.uuid});"
+            >
+              <svg width="100%" height="52">
+                <defs>
+                <clipPath id=${'clipPath-' + input.uuid}>
+                  <rect x="0" y="0" width="100%" height="12" rx="8"></rect>
+                  <rect x="0" y="20" width="100%" height="12" rx="8"></rect>
+                  <rect x="0" y="40" width="100%" height="12" rx="8"></rect>
+                </clipPath>
+              </defs>
+              </svg>
+            </div>
+          ` : html`
+            <h2>${input.headerText}</h2>
+            <div>${input.mainText}</div>
+          `
+        }
+        ${input.isError || input.isSlowGeneration || !showPlaceholder ? renderFooter() : Lit.nothing}
       </div>
     </devtools-tooltip>
   `, target);
@@ -192,6 +220,9 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #consoleViewMessage: ConsoleViewMessage;
   #isInactive = false;
   #abortController: null|AbortController = null;
+  #isSlow = false;
+  #timeoutId: ReturnType<typeof setTimeout>|null = null;
+  #isError = false;
 
   constructor(uuid: string, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) {
     super(element);
@@ -285,6 +316,9 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       this.#abortController.abort();
     }
     this.#isGenerating = false;
+    if (this.#timeoutId) {
+      clearTimeout(this.#timeoutId);
+    }
   }
 
   setInactive(isInactive: boolean): void {
@@ -295,8 +329,14 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  #setSlow(): void {
+    this.#isSlow = true;
+    this.requestUpdate();
+  }
+
   async #generateTeaserText(): Promise<void> {
     this.#isGenerating = true;
+    this.#timeoutId = setTimeout(this.#setSlow.bind(this), SLOW_GENERATION_CUTOFF_MILLISECONDS);
     let teaserText = '';
     try {
       for await (const chunk of this.#getOnDeviceInsight()) {
@@ -306,12 +346,16 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       // Ignore `AbortError` errors, which are thrown on mouse leave.
       if (err.name !== 'AbortError') {
         console.error(err.name, err.message);
+        this.#isError = true;
       }
       this.#isGenerating = false;
+      clearTimeout(this.#timeoutId);
+      this.requestUpdate();
       return;
     }
 
-    // TODO(crbug.com/443618746): Add user-facing error message instead of staying in loading state
+    clearTimeout(this.#timeoutId);
+    this.#isGenerating = false;
     let responseObject = {
       header: null,
       explanation: null,
@@ -320,10 +364,15 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       responseObject = JSON.parse(teaserText);
     } catch (err) {
       console.error(err.name, err.message);
+      this.#isError = true;
+      this.requestUpdate();
+      return;
     }
     this.#headerText = responseObject.header || '';
     this.#mainText = responseObject.explanation || '';
-    this.#isGenerating = false;
+    if (!this.#headerText || !this.#mainText) {
+      this.#isError = true;
+    }
     this.requestUpdate();
   }
 
@@ -373,6 +422,8 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
               !Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get(),
           dontShowChanged: this.#dontShowChanged.bind(this),
           hasTellMeMoreButton: this.#hasTellMeMoreButton(),
+          isSlowGeneration: this.#isSlow,
+          isError: this.#isError,
         },
         undefined, this.contentElement);
   }

package/front_end/panels/console/ConsoleSidebar.ts

@@ -52,7 +52,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/console/ConsoleSidebar.ts', UIS
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html, nothing, Directives} = Lit;
 
-const enum GroupName {
+export const enum GroupName {
   CONSOLE_API = 'user message',
   ALL = 'message',
   ERROR = 'error',
@@ -112,7 +112,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   <ul role="group" hidden>
                     ${group.urlGroups.values().map(urlGroup => html`
                       <li
-                        ${Directives.ref(element => element && nodeFilterMap.set(element, group.filter))}
+                        ${Directives.ref(element => element && nodeFilterMap.set(element, urlGroup.filter))}
                         role="treeitem"
                         ?selected=${urlGroup.filter === input.selectedFilter}
                         title=${urlGroup.url ?? ''}>
@@ -126,7 +126,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       target);
 };
 
-class ConsoleFilterGroup {
+export class ConsoleFilterGroup {
   readonly urlGroups = new Map<string|null, {filter: ConsoleFilter, url: string|null, count: number}>();
   messageCount = 0;
   readonly name: GroupName;

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