// 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 @devtools/no-lit-render-outside-of-view */ /* eslint-disable @devtools/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 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 uiI18n from '../../ui/i18n/i18n.js'; import {Link} from '../../ui/kit/kit.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 * as PanelUtils from '../utils/utils.js'; import requestConditionsDrawerStyles from './requestConditionsDrawer.css.js'; const {ref, live} = Directives; const {widget} = UI.Widget; const UIStrings = { /** * @description Text to enable blocking of network requests */ enableBlockingAndThrottling: 'Enable blocking and throttling', /** * @description Tooltip text that appears when hovering over the plus button in the Blocked URLs Pane of the Network panel */ addRule: 'Add rule', /** * @description Accessible label for the button to add request blocking patterns in the network request blocking tool */ addPatternLabel: 'Add network request throttling or blocking pattern', /** * @description Text that shows in the network request blocking panel if no pattern has yet been added. */ noPattern: 'Nothing throttled or blocked', /** * @description Text that shows in the network request blocking panel if no pattern has yet been added. * @example {Learn more} PH1 */ noThrottlingOrBlockingPattern: `To throttle or block a network request, add a rule here manually or via the network panel's context menu. {PH1}`, /** * @description Text in Blocked URLs Pane of the Network panel * @example {4} PH1 */ dAffected: '{PH1} affected', /** * @description Text in Blocked URLs Pane of the Network panel */ textEditPattern: 'Text pattern to block or throttle matching requests; use URL Pattern syntax.', /** * @description Error text for empty list widget input in Request Blocking tool */ patternInputCannotBeEmpty: 'Pattern input cannot be empty.', /** * @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 */ itemDeleted: 'Item successfully deleted', /** * @description Message to be announced for a when list item is removed from list widget */ learnMore: 'Learn more', /** * @description Accessibility label on a `Learn more` link */ learnMoreLabel: 'Learn more about URL pattern syntax', /** * @description Tooltip on a button moving an entry up * @example {*://example.com} PH1 */ increasePriority: 'Move up {PH1}', /** * @description Tooltip on a button moving an entry down * @example {*://example.com} PH1 */ decreasePriority: 'Move down {PH1}', /** * @description Tooltip on a checkbox togging the effects for a pattern * @example {*://example.com} PH1 */ enableThrottlingToggleLabel: 'Throttle or block {PH1}', /** * @description Tooltip on a combobox selecting the request conditions */ requestConditionsLabel: 'Request conditions', /** * @description Aria announcement when a pattern was moved up */ patternMovedUp: 'URL pattern was moved up', /** * @description Aria announcemenet when a pattern was moved down */ patternMovedDown: 'URL pattern was moved down', /** * @description Text on a button to start editing text * @example {*://example.com} PH1 */ editPattern: 'Edit {PH1}', /** * @description Label for an item to remove something * @example {*://example.com} PH1 */ removePattern: 'Remove {PH1}', } as const; const str_ = i18n.i18n.registerUIStrings('panels/network/RequestConditionsDrawer.ts', UIStrings); 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; 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`

${i18nString(UIStrings.enableBlockingAndThrottling)}

input.list.setEmptyPlaceholder(e ?? null))}> ${i18nString(UIStrings.noPattern)}

${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.noThrottlingOrBlockingPattern, {PH1: learnMore()})}

${i18nString(UIStrings.addRule)}

${input.list.element} `, // clang-format on target); }; function renderItem( condition: SDK.NetworkManager.RequestCondition, editable: boolean, index: number, onToggle: (condition: SDK.NetworkManager.RequestCondition) => void, onConditionsChanged: ( condition: SDK.NetworkManager.RequestCondition, conditions: SDK.NetworkManager.ThrottlingConditions) => void, onIncreasePriority: (condition: SDK.NetworkManager.RequestCondition) => void, onDecreasePriority: (condition: SDK.NetworkManager.RequestCondition) => void, lookUpRequestCount: (condition: SDK.NetworkManager.RequestCondition) => number): LitTemplate { const {enabled, originalOrUpgradedURLPattern, constructorStringOrWildcardURL, wildcardURL} = condition; const toggle = (e: Event): void => { e.consume(true); onToggle(condition); }; const moveUp = (e: Event): void => { e.consume(true); onIncreasePriority(condition); }; const moveDown = (e: Event): void => { e.consume(true); onDecreasePriority(condition); }; // clang-format off return html`

${originalOrUpgradedURLPattern ? html`

hash: ${originalOrUpgradedURLPattern.hash}

hostname: ${originalOrUpgradedURLPattern.hostname}

password: ${originalOrUpgradedURLPattern.password}

pathname: ${originalOrUpgradedURLPattern.pathname}

port: ${originalOrUpgradedURLPattern.port}

protocol: ${originalOrUpgradedURLPattern.protocol}

search: ${originalOrUpgradedURLPattern.search}

username: ${originalOrUpgradedURLPattern.username}

${learnMore()} ` : nothing} ${wildcardURL ? html` ${i18nString(UIStrings.patternWasUpgraded, {PH1: wildcardURL})} `: nothing} ${!originalOrUpgradedURLPattern ? html` ${SDK.NetworkManager.RequestURLPattern.isValidPattern(constructorStringOrWildcardURL) === SDK.NetworkManager.RequestURLPatternValidity.HAS_REGEXP_GROUPS ? i18nString(UIStrings.patternFailedWithRegExpGroups) : i18nString(UIStrings.patternFailedToParse)} ${learnMore()} `: nothing}

${constructorStringOrWildcardURL}

`; // clang-format on } interface AffectedCountViewInput { count: number; } type AffectedCountView = (input: AffectedCountViewInput, output: object, target: HTMLElement) => void; export const AFFECTED_COUNT_DEFAULT_VIEW: AffectedCountView = (input, output, target) => { render( html`${i18nString(UIStrings.dAffected, {PH1: input.count})}`, target, {container: {classes: ['blocked-url-count']}}); }; function matchesUrl(conditions: SDK.NetworkManager.RequestCondition, url: string): boolean { return Boolean(conditions.originalOrUpgradedURLPattern?.test(url)); } export class AffectedCountWidget extends UI.Widget.Widget { readonly #view: AffectedCountView; #condition?: SDK.NetworkManager.RequestCondition; #lookUpRequestCount?: (condition: SDK.NetworkManager.RequestCondition) => number; constructor(target?: HTMLElement, view = AFFECTED_COUNT_DEFAULT_VIEW) { super(target); this.#view = view; } get lookUpRequestCount(): ((condition: SDK.NetworkManager.RequestCondition) => number)|undefined { return this.#lookUpRequestCount; } set lookUpRequestCount(val: (condition: SDK.NetworkManager.RequestCondition) => number) { this.#lookUpRequestCount = val; } get condition(): SDK.NetworkManager.RequestCondition|undefined { return this.#condition; } set condition(conditions: SDK.NetworkManager.RequestCondition) { this.#condition = conditions; this.requestUpdate(); } override performUpdate(): void { if (!this.#condition || !this.#lookUpRequestCount) { return; } this.#view({count: this.#lookUpRequestCount(this.#condition)}, {}, this.element); } override wasShown(): void { SDK.TargetManager.TargetManager.instance().addModelListener( SDK.NetworkManager.NetworkManager, SDK.NetworkManager.Events.RequestFinished, this.#onRequestFinished, this, {scoped: true}); Logs.NetworkLog.NetworkLog.instance().addEventListener(Logs.NetworkLog.Events.Reset, this.requestUpdate, this); super.wasShown(); } override willHide(): void { super.willHide(); SDK.TargetManager.TargetManager.instance().removeModelListener( SDK.NetworkManager.NetworkManager, SDK.NetworkManager.Events.RequestFinished, this.#onRequestFinished, this); Logs.NetworkLog.NetworkLog.instance().removeEventListener(Logs.NetworkLog.Events.Reset, this.requestUpdate, this); } #onRequestFinished(event: Common.EventTarget.EventTargetEvent): void { if (!this.#condition) { return; } const request = event.data; if ((request.appliedNetworkConditionsId && this.#condition.ruleIds.has(request.appliedNetworkConditionsId)) || (request.wasBlocked() && matchesUrl(this.#condition, request.url()))) { this.requestUpdate(); } } } function learnMore(): LitTemplate { return html` ${i18nString(UIStrings.learnMore)} `; } export class RequestConditionsDrawer extends UI.Widget.VBox implements UI.ListWidget.Delegate { private manager: SDK.NetworkManager.MultitargetNetworkManager; private readonly list: UI.ListWidget.ListWidget; private editor: UI.ListWidget.Editor|null; private blockedCountForUrl: Map; #throttledCount = new Map(); #view: View; #listElements = new WeakMap(); constructor(target?: HTMLElement, view = DEFAULT_VIEW) { super(target, { jslog: `${VisualLogging.panel('network.blocked-urls').track({resize: true})}`, useShadowDom: true, }); this.#view = view; this.manager = SDK.NetworkManager.MultitargetNetworkManager.instance(); this.manager.addEventListener( SDK.NetworkManager.MultitargetNetworkManager.Events.BLOCKED_PATTERNS_CHANGED, this.update, this); this.list = new UI.ListWidget.ListWidget(this); this.list.registerRequiredCSS(requestConditionsDrawerStyles); this.list.element.classList.add('blocked-urls'); this.editor = null; this.blockedCountForUrl = new Map(); SDK.TargetManager.TargetManager.instance().addModelListener( SDK.NetworkManager.NetworkManager, SDK.NetworkManager.Events.RequestFinished, this.onRequestFinished, this, {scoped: true}); this.update(); Logs.NetworkLog.NetworkLog.instance().addEventListener(Logs.NetworkLog.Events.Reset, this.onNetworkLogReset, this); } override performUpdate(): void { const enabled = this.manager.requestConditions.conditionsEnabled; 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.requestConditions.conditionsEnabled = true; this.list.addNewItem( 0, SDK.NetworkManager.RequestCondition.createFromSetting( {url: Platform.DevToolsPath.EmptyUrlString, enabled: true})); } removeAllPatterns(): void { this.manager.requestConditions.clear(); } renderItem(condition: SDK.NetworkManager.RequestCondition, editable: boolean, index: number): Element { const element = document.createElement('div'); this.#listElements.set(condition, element); element.classList.add('blocked-url'); this.updateItem(element, condition, editable, index); return element; } updateItem(element: HTMLElement, condition: SDK.NetworkManager.RequestCondition, editable: boolean, index: number): void { const onToggle = (condition: {enabled: boolean}): void => { if (editable) { condition.enabled = !condition.enabled; } }; const onConditionsChanged = (condition: {conditions: SDK.NetworkManager.ThrottlingConditions}, conditions: SDK.NetworkManager.ThrottlingConditions): void => { if (editable) { condition.conditions = conditions; } }; const onIncreasePriority = (condition: SDK.NetworkManager.RequestCondition): void => { if (this.manager.requestConditions.conditionsEnabled) { UI.ARIAUtils.LiveAnnouncer.status(i18nString(UIStrings.patternMovedUp)); this.manager.requestConditions.increasePriority(condition); } }; const onDecreasePriority = (condition: SDK.NetworkManager.RequestCondition): void => { if (this.manager.requestConditions.conditionsEnabled) { UI.ARIAUtils.LiveAnnouncer.status(i18nString(UIStrings.patternMovedDown)); this.manager.requestConditions.decreasePriority(condition); } }; render( renderItem( condition, editable, index, onToggle, onConditionsChanged, onIncreasePriority, onDecreasePriority, this.#getRequestCount.bind(this)), element); } private toggleEnabled(): void { this.manager.requestConditions.conditionsEnabled = !this.manager.requestConditions.conditionsEnabled; this.update(); } removeItemRequested(condition: SDK.NetworkManager.RequestCondition): void { this.manager.requestConditions.delete(condition); UI.ARIAUtils.LiveAnnouncer.alert(UIStrings.itemDeleted); } beginEdit(pattern: SDK.NetworkManager.RequestCondition): UI.ListWidget.Editor { this.editor = this.createEditor(); this.editor.control('url').value = pattern.constructorStringOrWildcardURL; return this.editor; } commitEdit( item: SDK.NetworkManager.RequestCondition, editor: UI.ListWidget.Editor, isNew: boolean): void { const constructorString = editor.control('url').value as SDK.NetworkManager.URLPatternConstructorString; const pattern = SDK.NetworkManager.RequestURLPattern.create(constructorString); if (!pattern) { throw new Error('Failed to parse pattern'); } item.pattern = pattern; if (isNew) { this.manager.requestConditions.add(item); } } private createEditor(): UI.ListWidget.Editor { if (this.editor) { return this.editor; } const editor = new UI.ListWidget.Editor(); const content = editor.contentElement(); const titles = content.createChild('div', 'blocked-url-edit-row'); const label = titles.createChild('label'); const learnMore = Link.create(PATTERN_API_DOCS_URL, i18nString(UIStrings.learnMore), undefined, 'learn-more'); learnMore.title = i18nString(UIStrings.learnMoreLabel); titles.append('\xA0', learnMore); label.textContent = i18nString(UIStrings.textEditPattern); const fields = content.createChild('div', 'blocked-url-edit-row'); const validator = (_item: SDK.NetworkManager.RequestCondition, _index: number, input: UI.ListWidget.EditorControl): { valid: boolean, errorMessage?: Common.UIString.LocalizedString, } => { if (!input.value) { return {errorMessage: i18nString(UIStrings.patternInputCannotBeEmpty), valid: false}; } if (this.manager.requestConditions.has(input.value)) { return {errorMessage: i18nString(UIStrings.patternAlreadyExists), valid: false}; } 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}; }; const urlInput = editor.createInput('url', 'text', '', validator); label.htmlFor = urlInput.id = 'editor-url-input'; fields.createChild('div', 'blocked-url-edit-value').appendChild(urlInput); return editor; } update(): void { const enabled = this.manager.requestConditions.conditionsEnabled; const newItems = Array.from(this.manager.requestConditions.conditions); let oldIndex = 0; for (; oldIndex < newItems.length; ++oldIndex) { const pattern = newItems[oldIndex]; this.list.updateItem( oldIndex, pattern, enabled, /* focusable=*/ false, { edit: i18nString(UIStrings.editPattern, {PH1: pattern.constructorStringOrWildcardURL}), delete: i18nString(UIStrings.removePattern, {PH1: pattern.constructorStringOrWildcardURL}) }, ); } while (oldIndex < this.list.items.length) { this.list.removeItem(oldIndex); } this.requestUpdate(); } #getRequestCount(condition: SDK.NetworkManager.RequestCondition): number { if (condition.isBlocking) { let result = 0; for (const blockedUrl of this.blockedCountForUrl.keys()) { if (matchesUrl(condition, blockedUrl)) { result += (this.blockedCountForUrl.get(blockedUrl) as number); } } return result; } let result = 0; for (const ruleId of condition.ruleIds) { result += this.#throttledCount.get(ruleId) ?? 0; } return result; } private onNetworkLogReset(_event: Common.EventTarget.EventTargetEvent): void { this.blockedCountForUrl.clear(); this.#throttledCount.clear(); } private onRequestFinished(event: Common.EventTarget.EventTargetEvent): void { const request = event.data; if (request.appliedNetworkConditionsId) { const count = this.#throttledCount.get(request.appliedNetworkConditionsId) ?? 0; this.#throttledCount.set(request.appliedNetworkConditionsId, count + 1); } if (request.wasBlocked()) { const count = this.blockedCountForUrl.get(request.url()) || 0; this.blockedCountForUrl.set(request.url(), count + 1); } } override wasShown(): void { UI.Context.Context.instance().setFlavor(RequestConditionsDrawer, this); super.wasShown(); } override willHide(): void { super.willHide(); UI.Context.Context.instance().setFlavor(RequestConditionsDrawer, null); } static async reveal(appliedConditions: SDK.NetworkManager.AppliedNetworkConditions): Promise { await UI.ViewManager.ViewManager.instance().showView('network.blocked-urls'); const drawer = UI.Context.Context.instance().flavor(RequestConditionsDrawer); if (!drawer) { console.assert(!!drawer, 'Drawer not initialized'); return; } const conditions = drawer.manager.requestConditions.conditions.find( condition => condition.ruleIds.has(appliedConditions.appliedNetworkConditionsId) && condition.constructorString && condition.constructorString === appliedConditions.urlPattern); const element = (conditions && drawer.#listElements.get(conditions)); element && PanelUtils.PanelUtils.highlightElement(element); } } export class ActionDelegate implements UI.ActionRegistration.ActionDelegate { handleAction(context: UI.Context.Context, actionId: string): boolean { const drawer = context.flavor(RequestConditionsDrawer); if (drawer === null) { return false; } switch (actionId) { case 'network.add-network-request-blocking-pattern': { drawer.addPattern(); return true; } case 'network.remove-all-network-request-blocking-patterns': { drawer.removeAllPatterns(); return true; } } return false; } } export class AppliedConditionsRevealer implements Common.Revealer.Revealer { async reveal(request: SDK.NetworkManager.AppliedNetworkConditions): Promise { if (request.urlPattern) { await RequestConditionsDrawer.reveal(request); } } }