chrome-devtools-frontend 1.0.1526630 → 1.0.1529186

package/front_end/panels/network/BlockedURLsPane.ts

@@ -1,21 +1,27 @@
 // Copyright 2015 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
 import '../../ui/legacy/legacy.js';
+import '../../ui/components/tooltips/tooltips.js';
 
 import type * 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 Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
 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 blockedURLsPaneStyles from './blockedURLsPane.css.js';
 
+const {ref} = Directives;
+
 const UIStrings = {
   /**
    * @description Text to enable blocking of network requests
@@ -47,6 +53,10 @@ const UIStrings = {
    * @description Text in Blocked URLs Pane of the Network panel
    */
   textPatternToBlockMatching: 'Text pattern to block matching requests; use * for wildcard',
+  /**
+   * @description Text in Blocked URLs Pane of the Network panel
+   */
+  textPatternToBlockMatchingURLPatterns: 'Text pattern to block matching requests; use URLPattern syntax.',
   /**
    * @description Error text for empty list widget input in Request Blocking tool
    */
@@ -55,6 +65,19 @@ const UIStrings = {
    * @description Error text for duplicate list widget input in Request Blocking tool
    */
   patternAlreadyExists: 'Pattern already exists.',
+  /**
+   * @description Tooltip message when a pattern failed to parse as a URLPattern
+   */
+  patternFailedToParse: 'This pattern failed to parse as a URLPattern',
+  /**
+   * @description Tooltip message when a pattern failed to parse as a URLPattern because it contains RegExp groups
+   */
+  patternFailedWithRegExpGroups: 'RegExp groups are not allowed',
+  /**
+   * @description Tooltip message when a pattern was converted to a URLPattern
+   * @example {example.com} PH1
+   */
+  patternWasUpgraded: 'This pattern was upgraded from "{PH1}"',
   /**
    * @description Message to be announced for a when list item is removed from list widget
    */
@@ -69,46 +92,94 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const NETWORK_REQUEST_BLOCKING_EXPLANATION_URL =
     'https://developer.chrome.com/docs/devtools/network-request-blocking' as Platform.DevToolsPath.UrlString;
+const PATTERN_API_DOCS_URL =
+    'https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API' as Platform.DevToolsPath.UrlString;
+
+const {bindToAction} = UI.UIUtils;
+
+interface ViewInput {
+  list: UI.ListWidget.ListWidget<SDK.NetworkManager.RequestCondition>;
+  enabled: boolean;
+  toggleEnabled: () => void;
+  addPattern: () => void;
+}
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  render(
+      // clang-format off
+    html`
+    <style>${blockedURLsPaneStyles}</style>
+    <devtools-toolbar jslog=${VisualLogging.toolbar()}>
+      <devtools-checkbox
+        ?checked=${input.enabled}
+        @click=${input.toggleEnabled}
+        .jslogContext=${'network.enable-request-blocking'}>
+        ${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>
+      <div class=empty-state-description>
+        <span>${i18nString(UIStrings.addPatternToBlock, {PH1: i18nString(UIStrings.addPattern)})}</span>
+        <x-link
+          href=${NETWORK_REQUEST_BLOCKING_EXPLANATION_URL}
+          tabindex=0
+          class=devtools-link
+          jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('learn-more')}>
+            ${i18nString(UIStrings.learnMore)}
+        </x-link>
+      </div>
+      <devtools-button
+        @click=${input.addPattern}
+        class=add-button
+        .jslogContext=${'network.add-network-request-blocking-pattern'}
+        aria-label=${i18nString(UIStrings.addNetworkRequestBlockingPattern)}
+        .variant=${Buttons.Button.Variant.TONAL}>
+          ${i18nString(UIStrings.addPattern)}
+      </devtools-button>
+    </div>
+    <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox)}>${input.list.element}</devtools-widget>
+    `,
+      // clang-format on
+      target);
+};
+
+function learnMore(): LitTemplate {
+  return html`<x-link
+        href=${NETWORK_REQUEST_BLOCKING_EXPLANATION_URL}
+        tabindex=0
+        class=devtools-link
+        jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}>
+          ${i18nString(UIStrings.learnMore)}
+      </x-link>`;
+}
 
 export class BlockedURLsPane extends UI.Widget.VBox implements
-    UI.ListWidget.Delegate<SDK.NetworkManager.BlockedPattern> {
+    UI.ListWidget.Delegate<SDK.NetworkManager.RequestCondition> {
   private manager: SDK.NetworkManager.MultitargetNetworkManager;
-  private readonly toolbar: UI.Toolbar.Toolbar;
-  private readonly enabledCheckbox: UI.Toolbar.ToolbarCheckbox;
-  private readonly list: UI.ListWidget.ListWidget<SDK.NetworkManager.BlockedPattern>;
-  private editor: UI.ListWidget.Editor<SDK.NetworkManager.BlockedPattern>|null;
-  private blockedCountForUrl: Map<string, number>;
-
-  constructor() {
-    super({
+  private readonly list: UI.ListWidget.ListWidget<SDK.NetworkManager.RequestCondition>;
+  private editor: UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition>|null;
+  private blockedCountForUrl: Map<Platform.DevToolsPath.UrlString, number>;
+  #view: View;
+
+  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+    super(target, {
       jslog: `${VisualLogging.panel('network.blocked-urls').track({resize: true})}`,
       useShadowDom: true,
     });
-    this.registerRequiredCSS(blockedURLsPaneStyles);
+    this.#view = view;
 
     this.manager = SDK.NetworkManager.MultitargetNetworkManager.instance();
     this.manager.addEventListener(
         SDK.NetworkManager.MultitargetNetworkManager.Events.BLOCKED_PATTERNS_CHANGED, this.update, this);
 
-    this.toolbar = this.contentElement.createChild('devtools-toolbar');
-    this.enabledCheckbox = new UI.Toolbar.ToolbarCheckbox(
-        i18nString(UIStrings.enableNetworkRequestBlocking), undefined, this.toggleEnabled.bind(this),
-        'network.enable-request-blocking');
-    this.toolbar.appendToolbarItem(this.enabledCheckbox);
-    this.toolbar.appendSeparator();
-    this.toolbar.appendToolbarItem(
-        UI.Toolbar.Toolbar.createActionButton('network.add-network-request-blocking-pattern'));
-    this.toolbar.appendToolbarItem(
-        UI.Toolbar.Toolbar.createActionButton('network.remove-all-network-request-blocking-patterns'));
-    this.toolbar.setAttribute('jslog', `${VisualLogging.toolbar()}`);
-
     this.list = new UI.ListWidget.ListWidget(this);
     this.list.registerRequiredCSS(blockedURLsPaneStyles);
     this.list.element.classList.add('blocked-urls');
 
-    this.list.setEmptyPlaceholder(this.createEmptyPlaceholder());
-    this.list.show(this.contentElement);
-
     this.editor = null;
 
     this.blockedCountForUrl = new Map();
@@ -120,118 +191,177 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
     Logs.NetworkLog.NetworkLog.instance().addEventListener(Logs.NetworkLog.Events.Reset, this.onNetworkLogReset, this);
   }
 
-  private createEmptyPlaceholder(): Element {
-    const placeholder = this.contentElement.createChild('div', 'empty-state');
-    placeholder.createChild('span', 'empty-state-header').textContent = i18nString(UIStrings.noNetworkRequestsBlocked);
-
-    const description = placeholder.createChild('div', 'empty-state-description');
-    description.createChild('span').textContent =
-        i18nString(UIStrings.addPatternToBlock, {PH1: i18nString(UIStrings.addPattern)});
-    const link = UI.XLink.XLink.create(
-        NETWORK_REQUEST_BLOCKING_EXPLANATION_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more');
-    description.appendChild(link);
-
-    const addButton = UI.UIUtils.createTextButton(i18nString(UIStrings.addPattern), this.addPattern.bind(this), {
-      className: 'add-button',
-      jslogContext: 'network.add-network-request-blocking-pattern',
-      variant: Buttons.Button.Variant.TONAL,
-    });
-    UI.ARIAUtils.setLabel(addButton, i18nString(UIStrings.addNetworkRequestBlockingPattern));
-    placeholder.appendChild(addButton);
-    return placeholder;
+  override performUpdate(): void {
+    const enabled = this.manager.blockingEnabled();
+    this.list.element.classList.toggle('blocking-disabled', !enabled && Boolean(this.manager.requestConditions.count));
+
+    const input: ViewInput = {
+      addPattern: this.addPattern.bind(this),
+      toggleEnabled: this.toggleEnabled.bind(this),
+      enabled,
+      list: this.list,
+    };
+    this.#view(input, {}, this.contentElement);
   }
 
   addPattern(): void {
     this.manager.setBlockingEnabled(true);
-    this.list.addNewItem(0, {url: Platform.DevToolsPath.EmptyUrlString, enabled: true});
+    this.list.addNewItem(
+        0, new SDK.NetworkManager.RequestCondition({url: Platform.DevToolsPath.EmptyUrlString, enabled: true}));
   }
 
   removeAllPatterns(): void {
-    this.manager.setBlockedPatterns([]);
+    this.manager.requestConditions.clear();
   }
 
-  renderItem(pattern: SDK.NetworkManager.BlockedPattern, editable: boolean): Element {
-    const count = this.blockedRequestsCount(pattern.url);
+  renderItem(condition: SDK.NetworkManager.RequestCondition, editable: boolean, index: number): Element {
+    const count = this.blockedRequestsCount(condition);
     const element = document.createElement('div');
     element.classList.add('blocked-url');
-    const checkbox = element.createChild('input', 'blocked-url-checkbox');
-    checkbox.type = 'checkbox';
-    checkbox.checked = pattern.enabled;
-    checkbox.disabled = !editable;
-    checkbox.setAttribute('jslog', `${VisualLogging.toggle().track({change: true})}`);
-    element.createChild('div', 'blocked-url-label').textContent = pattern.url;
-    element.createChild('div', 'blocked-url-count').textContent = i18nString(UIStrings.dBlocked, {PH1: count});
-    if (editable) {
-      element.addEventListener('click', event => this.togglePattern(pattern, event));
-      checkbox.addEventListener('click', event => this.togglePattern(pattern, event));
+    const toggle = (e: Event): void => {
+      if (editable) {
+        e.consume(true);
+        condition.enabled = !condition.enabled;
+      }
+    };
+
+    const {enabled, originalOrUpgradedURLPattern, constructorStringOrWildcardURL, wildcardURL} = condition;
+
+    if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
+      render(
+          // clang-format off
+        html`
+    <input class=blocked-url-checkbox
+      @click=${toggle}
+      type=checkbox
+      ?checked=${enabled}
+      ?disabled=${!editable || !originalOrUpgradedURLPattern}
+      .jslog=${VisualLogging.toggle().track({ change: true })}>
+    ${originalOrUpgradedURLPattern ? html`
+      <devtools-tooltip variant=rich jslogcontext=url-pattern id=url-pattern-${index}>
+        <div>hash: ${originalOrUpgradedURLPattern.hash}</div>
+        <div>hostname: ${originalOrUpgradedURLPattern.hostname}</div>
+        <div>password: ${originalOrUpgradedURLPattern.password}</div>
+        <div>pathname: ${originalOrUpgradedURLPattern.pathname}</div>
+        <div>port: ${originalOrUpgradedURLPattern.port}</div>
+        <div>protocol: ${originalOrUpgradedURLPattern.protocol}</div>
+        <div>search: ${originalOrUpgradedURLPattern.search}</div>
+        <div>username: ${originalOrUpgradedURLPattern.username}</div>
+        <hr />
+        ${learnMore()}
+      </devtools-tooltip>` : nothing}
+    ${wildcardURL ? html`
+      <devtools-icon name=warning-filled class="small warning" aria-details=url-pattern-warning-${index}>
+      </devtools-icon>
+      <devtools-tooltip variant=rich jslogcontext=url-pattern-warning id=url-pattern-warning-${index}>
+        ${i18nString(UIStrings.patternWasUpgraded, {PH1: wildcardURL})}
+      </devtools-tooltip>
+      `: nothing}
+    ${!originalOrUpgradedURLPattern ? html`
+      <devtools-icon name=cross-circle-filled class=small aria-details=url-pattern-error-${index}>
+      </devtools-icon>
+      <devtools-tooltip variant=rich jslogcontext=url-pattern-warning id=url-pattern-error-${index}>
+        ${SDK.NetworkManager.RequestURLPattern.isValidPattern(constructorStringOrWildcardURL) ===
+            SDK.NetworkManager.RequestURLPatternValidity.HAS_REGEXP_GROUPS
+            ? i18nString(UIStrings.patternFailedWithRegExpGroups)
+            : i18nString(UIStrings.patternFailedToParse)}
+        ${learnMore()}
+      </devtools-tooltip>`: nothing}
+    <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);
+    } else {
+      render(
+          // clang-format off
+        html`
+    <input class=blocked-url-checkbox
+      @click=${toggle}
+      type=checkbox
+      ?checked=${condition.enabled}
+      ?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: count})}</div>`,
+          // clang-format on
+          element);
     }
     return element;
   }
 
-  private togglePattern(pattern: SDK.NetworkManager.BlockedPattern, event: Event): void {
-    event.consume(true);
-    const patterns = this.manager.blockedPatterns();
-    patterns.splice(patterns.indexOf(pattern), 1, {enabled: !pattern.enabled, url: pattern.url});
-    this.manager.setBlockedPatterns(patterns);
-  }
-
   private toggleEnabled(): void {
     this.manager.setBlockingEnabled(!this.manager.blockingEnabled());
     this.update();
   }
 
-  removeItemRequested(_pattern: SDK.NetworkManager.BlockedPattern, index: number): void {
-    const patterns = this.manager.blockedPatterns();
-    patterns.splice(index, 1);
-    this.manager.setBlockedPatterns(patterns);
+  removeItemRequested(condition: SDK.NetworkManager.RequestCondition): void {
+    this.manager.requestConditions.delete(condition);
     UI.ARIAUtils.LiveAnnouncer.alert(UIStrings.itemDeleted);
   }
 
-  beginEdit(pattern: SDK.NetworkManager.BlockedPattern): UI.ListWidget.Editor<SDK.NetworkManager.BlockedPattern> {
+  beginEdit(pattern: SDK.NetworkManager.RequestCondition): UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition> {
     this.editor = this.createEditor();
-    this.editor.control('url').value = pattern.url;
+    this.editor.control('url').value = Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled ?
+        pattern.constructorStringOrWildcardURL :
+        pattern.wildcardURL ?? '';
     return this.editor;
   }
 
   commitEdit(
-      item: SDK.NetworkManager.BlockedPattern, editor: UI.ListWidget.Editor<SDK.NetworkManager.BlockedPattern>,
+      item: SDK.NetworkManager.RequestCondition, editor: UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition>,
       isNew: boolean): void {
-    const url = editor.control('url').value as Platform.DevToolsPath.UrlString;
-    const patterns = this.manager.blockedPatterns();
+    const constructorString = editor.control('url').value as SDK.NetworkManager.URLPatternConstructorString;
+    const pattern = Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled ?
+        SDK.NetworkManager.RequestURLPattern.create(constructorString) :
+        constructorString;
+    if (!pattern) {
+      throw new Error('Failed to parse pattern');
+    }
+    item.pattern = pattern;
     if (isNew) {
-      patterns.push({enabled: true, url});
-    } else {
-      patterns.splice(patterns.indexOf(item), 1, {enabled: true, url});
+      this.manager.requestConditions.add(item);
     }
-
-    this.manager.setBlockedPatterns(patterns);
   }
 
-  private createEditor(): UI.ListWidget.Editor<SDK.NetworkManager.BlockedPattern> {
+  private createEditor(): UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition> {
     if (this.editor) {
       return this.editor;
     }
 
-    const editor = new UI.ListWidget.Editor<SDK.NetworkManager.BlockedPattern>();
+    const editor = new UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition>();
     const content = editor.contentElement();
     const titles = content.createChild('div', 'blocked-url-edit-row');
-    titles.createChild('div').textContent = i18nString(UIStrings.textPatternToBlockMatching);
+    const label = titles.createChild('div');
+    if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
+      label.textContent = i18nString(UIStrings.textPatternToBlockMatchingURLPatterns);
+      label.append(UI.XLink.XLink.create(
+          PATTERN_API_DOCS_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more'));
+    } else {
+      label.textContent = i18nString(UIStrings.textPatternToBlockMatching);
+    }
     const fields = content.createChild('div', 'blocked-url-edit-row');
-    const validator = (_item: SDK.NetworkManager.BlockedPattern, _index: number, input: UI.ListWidget.EditorControl): {
-      valid: boolean,
-      errorMessage: Common.UIString.LocalizedString|undefined,
-    } => {
-      let valid = true;
-      let errorMessage;
-      if (!input.value) {
-        errorMessage = i18nString(UIStrings.patternInputCannotBeEmpty);
-        valid = false;
-      } else if (this.manager.blockedPatterns().find(pattern => pattern.url === input.value)) {
-        errorMessage = i18nString(UIStrings.patternAlreadyExists);
-        valid = false;
-      }
-      return {valid, errorMessage};
-    };
+    const validator =
+        (_item: SDK.NetworkManager.RequestCondition, _index: number, input: UI.ListWidget.EditorControl): {
+          valid: boolean,
+          errorMessage: Common.UIString.LocalizedString|undefined,
+        } => {
+          if (!input.value) {
+            return {errorMessage: i18nString(UIStrings.patternInputCannotBeEmpty), valid: false};
+          }
+          if (this.manager.requestConditions.has(input.value)) {
+            return {errorMessage: i18nString(UIStrings.patternAlreadyExists), valid: false};
+          }
+          if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
+            const isValid = SDK.NetworkManager.RequestURLPattern.isValidPattern(input.value);
+            switch (isValid) {
+              case SDK.NetworkManager.RequestURLPatternValidity.FAILED_TO_PARSE:
+                return {errorMessage: i18nString(UIStrings.patternFailedToParse), valid: false};
+              case SDK.NetworkManager.RequestURLPatternValidity.HAS_REGEXP_GROUPS:
+                return {errorMessage: i18nString(UIStrings.patternFailedWithRegExpGroups), valid: false};
+            }
+          }
+          return {valid: true, errorMessage: undefined};
+        };
     const urlInput = editor.createInput('url', 'text', '', validator);
     fields.createChild('div', 'blocked-url-edit-value').appendChild(urlInput);
     return editor;
@@ -239,23 +369,22 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
 
   update(): void {
     const enabled = this.manager.blockingEnabled();
-    this.list.element.classList.toggle('blocking-disabled', !enabled && Boolean(this.manager.blockedPatterns().length));
-
-    this.enabledCheckbox.setChecked(enabled);
     this.list.clear();
-    for (const pattern of this.manager.blockedPatterns()) {
-      this.list.appendItem(pattern, enabled);
+    for (const pattern of this.manager.requestConditions.conditions) {
+      if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled || pattern.wildcardURL) {
+        this.list.appendItem(pattern, enabled);
+      }
     }
+    this.requestUpdate();
   }
 
-  private blockedRequestsCount(url: string): number {
-    if (!url) {
-      return 0;
-    }
-
+  private blockedRequestsCount(condition: SDK.NetworkManager.RequestCondition): number {
     let result = 0;
     for (const blockedUrl of this.blockedCountForUrl.keys()) {
-      if (this.matches(url, blockedUrl)) {
+      const match = Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled ?
+          condition.originalOrUpgradedURLPattern?.test(blockedUrl) :
+          (condition.wildcardURL && this.matches(condition.wildcardURL, blockedUrl));
+      if (match) {
         result += (this.blockedCountForUrl.get(blockedUrl) as number);
       }
     }

package/front_end/panels/network/EventSourceMessagesView.ts

@@ -117,6 +117,7 @@ export class EventSourceMessagesView extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     this.request.removeEventListener(SDK.NetworkRequest.Events.EVENT_SOURCE_MESSAGE_ADDED, this.messageAdded, this);
   }
 

package/front_end/panels/network/NetworkItemView.ts

@@ -268,6 +268,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   }
 
   override willHide(): void {
+    super.willHide();
     this.#request.removeEventListener(
         SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.requestHeadersChanged, this);
     this.#request.removeEventListener(

package/front_end/panels/network/NetworkLogView.ts

@@ -1390,6 +1390,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   override willHide(): void {
+    super.willHide();
     this.columnsInternal.willHide();
   }
 
@@ -1847,23 +1848,24 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (request) {
       const maxBlockedURLLength = 20;
       const manager = SDK.NetworkManager.MultitargetNetworkManager.instance();
-      let patterns = manager.blockedPatterns();
 
       function addBlockedURL(url: string): void {
-        patterns.push({enabled: true, url: url as Platform.DevToolsPath.UrlString});
-        manager.setBlockedPatterns(patterns);
+        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');
       }
 
       function removeBlockedURL(url: string): void {
-        patterns = patterns.filter(pattern => pattern.url !== url);
-        manager.setBlockedPatterns(patterns);
+        const entry = manager.requestConditions.findCondition(url);
+        if (entry) {
+          manager.requestConditions.delete(entry);
+        }
         void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
       }
 
       const urlWithoutScheme = request.parsedURL.urlWithoutScheme();
-      if (urlWithoutScheme && !patterns.find(pattern => pattern.url === urlWithoutScheme)) {
+      if (urlWithoutScheme && !manager.requestConditions.has(urlWithoutScheme)) {
         contextMenu.debugSection().appendItem(
             i18nString(UIStrings.blockRequestUrl), addBlockedURL.bind(null, urlWithoutScheme),
             {jslogContext: 'block-request-url'});
@@ -1875,7 +1877,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       }
 
       const domain = request.parsedURL.domain();
-      if (domain && !patterns.find(pattern => pattern.url === domain)) {
+      if (domain && !manager.requestConditions.has(domain)) {
         contextMenu.debugSection().appendItem(
             i18nString(UIStrings.blockRequestDomain), addBlockedURL.bind(null, domain),
             {jslogContext: 'block-request-domain'});

package/front_end/panels/network/NetworkOverview.ts

@@ -98,6 +98,7 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.onResize();
   }
 

package/front_end/panels/network/RequestCookiesView.ts

@@ -317,6 +317,7 @@ export class RequestCookiesView extends UI.Widget.Widget {
   }
 
   override willHide(): void {
+    super.willHide();
     this.request.removeEventListener(
         SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.refreshRequestCookiesView, this);
     this.request.removeEventListener(

package/front_end/panels/network/RequestHTMLView.ts

@@ -51,6 +51,7 @@ export class RequestHTMLView extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     this.requestUpdate();
   }
 

package/front_end/panels/network/RequestInitiatorView.ts

@@ -140,6 +140,7 @@ export class RequestInitiatorView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     if (this.hasShown) {
       return;
     }

package/front_end/panels/network/RequestPayloadView.ts

@@ -145,6 +145,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     this.request.removeEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.refreshFormData, this);
   }
 

package/front_end/panels/network/RequestPreviewView.ts

@@ -53,6 +53,7 @@ export class RequestPreviewView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     void this.doShowPreview();
   }
 

package/front_end/panels/network/RequestResponseView.ts

@@ -94,6 +94,7 @@ export class RequestResponseView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.requestUpdate();
   }
 

package/front_end/panels/network/RequestTimingView.ts

@@ -634,6 +634,7 @@ export class RequestTimingView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.request.addEventListener(SDK.NetworkRequest.Events.TIMING_CHANGED, this.refresh, this);
     this.request.addEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.refresh, this);
     this.calculator.addEventListener(NetworkTimeCalculator.Events.BOUNDARIES_CHANGED, this.boundaryChanged, this);
@@ -641,6 +642,7 @@ export class RequestTimingView extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     this.request.removeEventListener(SDK.NetworkRequest.Events.TIMING_CHANGED, this.refresh, this);
     this.request.removeEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.refresh, this);
     this.calculator.removeEventListener(NetworkTimeCalculator.Events.BOUNDARIES_CHANGED, this.boundaryChanged, this);

package/front_end/panels/network/ResourceDirectSocketChunkView.ts

@@ -79,6 +79,7 @@ export class ResourceDirectSocketChunkView extends ResourceChunkView<SDK.Network
   }
 
   override willHide(): void {
+    super.willHide();
     this.request.removeEventListener(
         SDK.NetworkRequest.Events.DIRECTSOCKET_CHUNK_ADDED, this.onDirectSocketChunkAdded, this);
   }

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -120,6 +120,7 @@ export class ResourceWebSocketFrameView extends ResourceChunkView<SDK.NetworkReq
   }
 
   override willHide(): void {
+    super.willHide();
     this.request.removeEventListener(SDK.NetworkRequest.Events.WEBSOCKET_FRAME_ADDED, this.onWebSocketFrameAdded, this);
   }
 

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

@@ -127,6 +127,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.#request.addEventListener(SDK.NetworkRequest.Events.REMOTE_ADDRESS_CHANGED, this.#refreshHeadersView, this);
     this.#request.addEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.#refreshHeadersView, this);
     this.#request.addEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.#refreshHeadersView, this);
@@ -137,6 +138,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
   }
 
   override willHide(): void {
+    super.willHide();
     this.#request.removeEventListener(SDK.NetworkRequest.Events.REMOTE_ADDRESS_CHANGED, this.#refreshHeadersView, this);
     this.#request.removeEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.#refreshHeadersView, this);
     this.#request.removeEventListener(