chrome-devtools-frontend 1.0.1526630 → 1.0.1528866

package/front_end/panels/coverage/coverageView.css

@@ -53,3 +53,20 @@
   white-space: pre-line;
   text-align: center;
 }
+
+.inline-button {
+  display: inline-flex;
+  border: 1px solid var(--sys-color-neutral-outline);
+  border-radius: 4px;
+  position: relative;
+  vertical-align: sub;
+  margin: 2px;
+  background-color: var(--sys-color-cdt-base-container);
+  justify-content: center;
+  width: 28px;
+}
+
+.inline-button:hover {
+  border-color: transparent;
+  background-color: var(--sys-color-state-hover-on-subtle);
+}

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -330,6 +330,7 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   }
 
   override willHide(): void {
+    super.willHide();
     UI.Context.Context.instance().setFlavor(ComputedStyleWidget, null);
   }
 

package/front_end/panels/elements/LayoutPane.ts

@@ -501,6 +501,7 @@ export class LayoutPane extends UI.Widget.Widget {
   }
 
   override willHide(): void {
+    super.willHide();
     for (const setting of this.#settings) {
       Common.Settings.Settings.instance().moduleSetting(setting.name).removeChangeListener(this.requestUpdate, this);
     }

package/front_end/panels/elements/NodeStackTraceWidget.ts

@@ -58,6 +58,7 @@ export class NodeStackTraceWidget extends UI.ThrottledWidget.ThrottledWidget {
   }
 
   override willHide(): void {
+    super.willHide();
     UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
   }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1136,7 +1136,11 @@ export class BezierRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.B
     const bezierText = document.createElement('span');
     bezierText.append(...nodes);
     new BezierPopoverIcon({treeElement: this.#treeElement, swatchPopoverHelper, swatch: icon, bezierText});
-    return [icon, bezierText];
+    const iconAndTextContainer = document.createElement('span');
+    iconAndTextContainer.classList.add('bezier-icon-and-text');
+    iconAndTextContainer.append(icon);
+    iconAndTextContainer.append(bezierText);
+    return [iconAndTextContainer];
   }
 }
 

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -303,3 +303,20 @@ devtools-icon.open-in-animations-panel {
 .tracing-anchor {
   text-decoration: underline dotted var(--sys-color-token-meta);
 }
+
+devtools-icon.bezier-swatch-icon {
+  position: relative;
+  transform: scale(0.7);
+  margin: -5px -2px -3px -4px;
+  user-select: none;
+  color: var(--icon-css);
+  cursor: default;
+
+  &:hover {
+    color: var(--icon-css-hover);
+  }
+}
+
+span.bezier-icon-and-text {
+  white-space: nowrap;
+}

package/front_end/panels/emulation/DeviceModeView.ts

@@ -442,11 +442,13 @@ export class DeviceModeView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.measureHandles();
     this.toolbar.restore();
   }
 
   override willHide(): void {
+    super.willHide();
     this.model.emulate(EmulationModel.DeviceModeModel.Type.None, null, null);
   }
 

package/front_end/panels/explain/ActionDelegate.ts

@@ -7,7 +7,6 @@ import type * as UI from '../../ui/legacy/legacy.js';
 import * as Console from '../console/console.js';
 
 import {ConsoleInsight} from './components/ConsoleInsight.js';
-import {PromptBuilder} from './PromptBuilder.js';
 
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(context: UI.Context.Context, actionId: string): boolean {
@@ -24,7 +23,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
           } else if (actionId === 'explain.console-message.hover') {
             Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRequestedViaHoverButton);
           }
-          const promptBuilder = new PromptBuilder(consoleViewMessage);
+          const promptBuilder = new Console.PromptBuilder.PromptBuilder(consoleViewMessage);
           const aidaClient = new Host.AidaClient.AidaClient();
           void ConsoleInsight.create(promptBuilder, aidaClient).then(insight => {
             consoleViewMessage.setInsight(insight);

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -17,7 +17,7 @@ import * as MarkdownView from '../../../ui/components/markdown_view/markdown_vie
 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 {type PromptBuilder, type Source, SourceType} from '../PromptBuilder.js';
+import * as Console from '../../console/console.js';
 
 import styles from './consoleInsight.css.js';
 import listStyles from './consoleInsightSourcesList.css.js';
@@ -163,18 +163,18 @@ export class CloseEvent extends Event {
   }
 }
 
-type PublicPromptBuilder = Pick<PromptBuilder, 'buildPrompt'|'getSearchQuery'>;
+type PublicPromptBuilder = Pick<Console.PromptBuilder.PromptBuilder, 'buildPrompt'|'getSearchQuery'>;
 type PublicAidaClient = Pick<Host.AidaClient.AidaClient, 'doConversation'|'registerClientEvent'>;
 
-function localizeType(sourceType: SourceType): string {
+function localizeType(sourceType: Console.PromptBuilder.SourceType): string {
   switch (sourceType) {
-    case SourceType.MESSAGE:
+    case Console.PromptBuilder.SourceType.MESSAGE:
       return i18nString(UIStrings.consoleMessage);
-    case SourceType.STACKTRACE:
+    case Console.PromptBuilder.SourceType.STACKTRACE:
       return i18nString(UIStrings.stackTrace);
-    case SourceType.NETWORK_REQUEST:
+    case Console.PromptBuilder.SourceType.NETWORK_REQUEST:
       return i18nString(UIStrings.networkRequest);
-    case SourceType.RELATED_CODE:
+    case Console.PromptBuilder.SourceType.RELATED_CODE:
       return i18nString(UIStrings.relatedCode);
   }
 }
@@ -205,7 +205,7 @@ type StateData = {
   type: State.INSIGHT,
   tokens: MarkdownView.MarkdownView.MarkdownViewData['tokens'],
   validMarkdown: boolean,
-  sources: Source[],
+  sources: Console.PromptBuilder.Source[],
   isPageReloadRecommended: boolean,
   completed: boolean,
   directCitationUrls: string[],
@@ -215,7 +215,7 @@ type StateData = {
   error: string,
 }|{
   type: State.CONSENT_REMINDER,
-  sources: Source[],
+  sources: Console.PromptBuilder.Source[],
   isPageReloadRecommended: boolean,
 }|{
   type: State.SETTING_IS_NOT_TRUE,
@@ -631,7 +631,9 @@ export class ConsoleInsight extends HTMLElement {
 
   async *
       #getInsight(): AsyncGenerator<
-          {sources: Source[], isPageReloadRecommended: boolean}&Host.AidaClient.DoConversationResponse, void, void> {
+          {sources: Console.PromptBuilder.Source[], isPageReloadRecommended: boolean}&
+          Host.AidaClient.DoConversationResponse,
+          void, void> {
     const {prompt, sources, isPageReloadRecommended} = await this.#promptBuilder.buildPrompt();
     try {
       for await (const response of this.#aidaClient.doConversation(
@@ -1142,7 +1144,7 @@ export class ConsoleInsight extends HTMLElement {
 
 class ConsoleInsightSourcesList extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
-  #sources: Source[] = [];
+  #sources: Console.PromptBuilder.Source[] = [];
   #isPageReloadRecommended = false;
 
   #render(): void {
@@ -1167,7 +1169,7 @@ class ConsoleInsightSourcesList extends HTMLElement {
     // clang-format on
   }
 
-  set sources(values: Source[]) {
+  set sources(values: Console.PromptBuilder.Source[]) {
     this.#sources = values;
     this.#render();
   }

package/front_end/panels/explain/explain.ts

@@ -4,4 +4,3 @@
 
 export * from './components/ConsoleInsight.js';
 export * from './ActionDelegate.js';
-export * from './PromptBuilder.js';

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

@@ -63,7 +63,7 @@ UI.ViewManager.registerViewExtension({
   isPreviewFeature: true,
   async loadView() {
     const Timeline = await loadTimelineModule();
-    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: null, isNode: true});
+    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: null});
   },
 });
 

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -193,10 +193,12 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
   }
 
   override willHide(): void {
+    super.willHide();
     this.textureManager.suspend();
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.textureManager.resume();
     if (!this.needsUpdate) {
       return;

package/front_end/panels/lighthouse/LighthouseReportSelector.ts

@@ -1,6 +1,7 @@
 // Copyright 2018 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-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.ts

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

package/front_end/panels/media/MainView.ts

@@ -215,6 +215,7 @@ export class MainView extends UI.Panel.PanelWithSidebar implements SDK.TargetMan
   }
 
   override willHide(): void {
+    super.willHide();
     for (const model of SDK.TargetManager.TargetManager.instance().models(MediaModel, {scoped: true})) {
       this.removeEventListeners(model);
     }

package/front_end/panels/media/TickingFlameChart.ts

@@ -281,6 +281,7 @@ export class TickingFlameChart extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     this.isShown = false;
     if (this.ticking) {
       this.stop();
@@ -288,6 +289,7 @@ export class TickingFlameChart extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.isShown = true;
     if (this.#canTick && !this.ticking) {
       this.start();

package/front_end/panels/network/BlockedURLsPane.ts

@@ -1,6 +1,7 @@
 // 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';
@@ -12,10 +13,13 @@ 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, 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
@@ -70,45 +74,81 @@ 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 {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);
+};
+
 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 readonly list: UI.ListWidget.ListWidget<SDK.NetworkManager.RequestCondition>;
+  private editor: UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition>|null;
   private blockedCountForUrl: Map<string, number>;
+  #view: View;
 
-  constructor() {
-    super({
+  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,104 +160,92 @@ 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): Element {
+    const count = this.blockedRequestsCount(condition.url);
     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;
+      }
+    };
+    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>${condition.url}</div>
+    <div class=blocked-url-count>${i18nString(UIStrings.dBlocked, {PH1: count})}</div>`,
+      // clang-format off
+        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;
     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();
+    item.url =
+     editor.control('url').value as Platform.DevToolsPath.UrlString;
     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 fields = content.createChild('div', 'blocked-url-edit-row');
-    const validator = (_item: SDK.NetworkManager.BlockedPattern, _index: number, input: UI.ListWidget.EditorControl): {
+    const validator = (_item: SDK.NetworkManager.RequestCondition, _index: number, input: UI.ListWidget.EditorControl): {
       valid: boolean,
       errorMessage: Common.UIString.LocalizedString|undefined,
     } => {
@@ -226,7 +254,7 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
       if (!input.value) {
         errorMessage = i18nString(UIStrings.patternInputCannotBeEmpty);
         valid = false;
-      } else if (this.manager.blockedPatterns().find(pattern => pattern.url === input.value)) {
+      } else if (this.manager.requestConditions.has(input.value)) {
         errorMessage = i18nString(UIStrings.patternAlreadyExists);
         valid = false;
       }
@@ -239,13 +267,11 @@ 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()) {
+    for (const pattern of this.manager.requestConditions.conditions) {
       this.list.appendItem(pattern, enabled);
     }
+    this.requestUpdate();
   }
 
   private blockedRequestsCount(url: string): 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.conditions.find(condition => condition.url === 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(