Merge branch 'release/v5.4' into fix/AG-26563

Author: 105th

DEVELOPMENT.md

@@ -12,6 +12,7 @@
    - [Hotfix filters for MV3 with skip review](#dev-hotfix-mv3)
 - [Linter](#dev-linter)
 - [TypeScript Configuration](#dev-typescript-configs)
+- [CSS Architecture](#dev-css)
 - [Update localizations](#dev-localizations)
 - [Bundle Size Monitoring](#dev-bundle-size-monitoring)
 
@@ -642,6 +643,16 @@ The project contains **5 TypeScript configuration files**, each serving a specif
     - Special path mapping for JSX files
     - Separate from compilation projects
 
+### <a name="dev-css"></a> CSS Cascade Layers
+
+The project uses two CSS layers to manage style priority:
+
+- **`components`** - Component-specific styles (buttons, modals, etc.)
+- **`utilities`** - Utility classes with higher priority (e.g., `.hideOnMobile`)
+
+Layer order is declared inline in HTML templates (e.g., `Extension/pages/options/index.html`):
+This ensures the layer order is established before any `style-loader` injections from JavaScript bundles. The `utilities` layer has higher priority than `components`, ensuring utility classes always override component styles.
+
 ### <a name="dev-localizations"></a> Update localizations
 
 For detailed localization workflow and best practices, see [Locales Documentation](./tools/locales/README.md#dev-locales).

Extension/_locales/en/messages.json

@@ -247,7 +247,10 @@
         "message": "Filters"
     },
     "options_antibanner_rules_count": {
-        "message": "Filter rules count: %rules_count%"
+        "message": "Rules: %rules_count%"
+    },
+    "options_antibanner_updated": {
+        "message": "Updated: %date%"
     },
     "options_antibanner_custom_group": {
         "message": "Custom"
@@ -291,6 +294,9 @@
     "options_editor_indicator_saved": {
         "message": "Saved"
     },
+    "options_editor_save_error": {
+        "message": "Failed to save the changes. Try again or contact support"
+    },
     "options_popup_import_error_required_privacy_permission": {
         "message": "To import this settings file, allow AdGuard to change your privacy-related settings."
     },
@@ -439,7 +445,7 @@
         "message": "Error updating filters"
     },
     "options_popup_update_not_found": {
-        "message": "No updates found"
+        "message": "Your filters are up to date"
     },
     "options_popup_update_error": {
         "message": "Failed to get updates. Please try again later."
@@ -992,6 +998,9 @@
     "options_show_adguard_full_version_title": {
         "message": "Show information on the AdGuard full version"
     },
+    "options_clear_stats_confirm_modal_subtitle": {
+        "message": "All stats on data usage will be permanently deleted"
+    },
     "options_show_app_updated_notification": {
         "message": "Notify about extension updates"
     },
@@ -1274,6 +1283,9 @@
     "options_reset_settings_confirm_modal_title": {
         "message": "Reset settings?"
     },
+    "options_reset_settings_confirm_modal_subtitle": {
+        "message": "All settings will be reset to their default values"
+    },
     "options_reset_settings_confirm_modal_clear_button": {
         "message": "Reset"
     },

Extension/assets/css/layers.css

@@ -0,0 +1 @@
+@layer components, utilities;

Extension/pages/options/index.html

@@ -6,6 +6,8 @@
     <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <!-- CSS layer order must be loaded before any style-loader injections -->
+    <link rel="stylesheet" href="../../assets/css/layers.css" />
     <link rel="icon" type="image/svg+xml" href="../../assets/images/logo-shield.svg" />
 </head>
 

Extension/src/background/services/custom-filters/custom-filters-service-common.ts

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2015-2026 Adguard Software Ltd.
+ *
+ * @file
+ * This file is part of AdGuard Browser Extension (https://github.com/AdguardTeam/AdguardBrowserExtension).
+ *
+ * AdGuard Browser Extension is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * AdGuard Browser Extension is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * See the GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with AdGuard Browser Extension. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NotifierType } from '../../../common/constants';
+import {
+    MessageType,
+    type LoadCustomFilterInfoMessage,
+    type SubscribeToCustomFilterMessage,
+    type RemoveAntiBannerFilterMessage,
+} from '../../../common/messages';
+import { CustomFilterApi, type GetCustomFilterInfoResult } from '../../api/filters/custom';
+import { messageHandler } from '../../message-handler';
+import { notifier } from '../../notifier';
+import { type CategoriesFilterData } from '../../api/filters/categories';
+import { NotImplementedError } from '../../errors/not-implemented-error';
+
+/**
+ * Service for processing events with custom filters.
+ */
+export abstract class CustomFiltersServiceCommon {
+    /**
+     * Init handlers.
+     */
+    static init(): void {
+        messageHandler.addListener(MessageType.LoadCustomFilterInfo, this.onCustomFilterInfoLoad.bind(this));
+        messageHandler.addListener(MessageType.SubscribeToCustomFilter, this.onCustomFilterSubscription.bind(this));
+        messageHandler.addListener(MessageType.RemoveAntiBannerFilter, this.onCustomFilterRemove.bind(this));
+    }
+
+    /**
+     * Returns custom filter info for modal window.
+     *
+     * @param message Message data.
+     *
+     * @returns Custom filter info.
+     */
+    static async onCustomFilterInfoLoad(message: LoadCustomFilterInfoMessage): Promise<GetCustomFilterInfoResult> {
+        const { url, title } = message.data;
+
+        return CustomFilterApi.getFilterInfo(url, title);
+    }
+
+    /**
+     * Add new custom filter.
+     *
+     * @param message Message data.
+     *
+     * @returns Custom filter metadata.
+     */
+    static async onCustomFilterSubscription(message: SubscribeToCustomFilterMessage): Promise<CategoriesFilterData> {
+        const { filter } = message.data;
+
+        const { customUrl, name, trusted } = filter;
+
+        // Creates a filter and enables the group if necessary.
+        const filterMetadata = await CustomFilterApi.createFilter({
+            customUrl,
+            title: name,
+            trusted,
+            enabled: true,
+        });
+
+        await this.updateEngine();
+
+        notifier.notifyListeners(NotifierType.CustomFilterAdded);
+
+        return filterMetadata;
+    }
+
+    /**
+     * Removes a custom filter.
+     *
+     * If the filter was enabled, the engine will be updated.
+     *
+     * @param message Message data.
+     */
+    static async onCustomFilterRemove(message: RemoveAntiBannerFilterMessage): Promise<void> {
+        const { filterId } = message.data;
+
+        const wasEnabled = await CustomFilterApi.removeFilter(filterId);
+        if (wasEnabled) {
+            await this.updateEngine();
+        }
+    }
+
+    /**
+     * Updates the filtering engine.
+     *
+     * @throws Error if not implemented by a subclass.
+     */
+    protected static async updateEngine(): Promise<void> {
+        throw new NotImplementedError();
+    }
+}

Extension/src/background/services/custom-filters/custom-filters-service-mv2.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2015-2025 Adguard Software Ltd.
+ * Copyright (c) 2015-2026 Adguard Software Ltd.
  *
  * @file
  * This file is part of AdGuard Browser Extension (https://github.com/AdguardTeam/AdguardBrowserExtension).
@@ -17,87 +17,18 @@
  * You should have received a copy of the GNU General Public License
  * along with AdGuard Browser Extension. If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { NotifierType } from '../../../common/constants';
-import {
-    MessageType,
-    type LoadCustomFilterInfoMessage,
-    type SubscribeToCustomFilterMessage,
-    type RemoveAntiBannerFilterMessage,
-} from '../../../common/messages';
-import { CustomFilterApi, type GetCustomFilterInfoResult } from '../../api/filters/custom';
-import { messageHandler } from '../../message-handler';
-import { notifier } from '../../notifier';
 import { engine } from '../../engine';
-import { type CategoriesFilterData } from '../../api/filters/categories';
+
+import { CustomFiltersServiceCommon } from './custom-filters-service-common';
 
 /**
  * Service for processing events with custom filters.
  */
-export class CustomFiltersService {
-    /**
-     * Init handlers.
-     */
-    static init(): void {
-        messageHandler.addListener(MessageType.LoadCustomFilterInfo, CustomFiltersService.onCustomFilterInfoLoad);
-        // eslint-disable-next-line max-len
-        messageHandler.addListener(MessageType.SubscribeToCustomFilter, CustomFiltersService.onCustomFilterSubscription);
-        messageHandler.addListener(MessageType.RemoveAntiBannerFilter, CustomFiltersService.onCustomFilterRemove);
-    }
-
-    /**
-     * Returns custom filter info for modal window.
-     *
-     * @param message Message data.
-     *
-     * @returns Custom filter info.
-     */
-    static async onCustomFilterInfoLoad(message: LoadCustomFilterInfoMessage): Promise<GetCustomFilterInfoResult> {
-        const { url, title } = message.data;
-
-        return CustomFilterApi.getFilterInfo(url, title);
-    }
-
+export class CustomFiltersService extends CustomFiltersServiceCommon {
     /**
-     * Add new custom filter.
-     *
-     * @param message Message data.
-     *
-     * @returns Custom filter metadata.
+     * @inheritdoc
      */
-    static async onCustomFilterSubscription(message: SubscribeToCustomFilterMessage): Promise<CategoriesFilterData> {
-        const { filter } = message.data;
-
-        const { customUrl, name, trusted } = filter;
-
-        // Creates a filter and enables the group if necessary.
-        const filterMetadata = await CustomFilterApi.createFilter({
-            customUrl,
-            title: name,
-            trusted,
-            enabled: true,
-        });
-
+    protected static override async updateEngine(): Promise<void> {
         engine.debounceUpdate();
-
-        notifier.notifyListeners(NotifierType.CustomFilterAdded);
-
-        return filterMetadata;
-    }
-
-    /**
-     * Removes a custom filter.
-     *
-     * If the filter was enabled, the engine will be updated.
-     *
-     * @param message Message data.
-     */
-    static async onCustomFilterRemove(message: RemoveAntiBannerFilterMessage): Promise<void> {
-        const { filterId } = message.data;
-
-        const wasEnabled = await CustomFilterApi.removeFilter(filterId);
-        if (wasEnabled) {
-            engine.debounceUpdate();
-        }
     }
 }

Extension/src/background/services/custom-filters/custom-filters-service-mv3.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2015-2025 Adguard Software Ltd.
+ * Copyright (c) 2015-2026 Adguard Software Ltd.
  *
  * @file
  * This file is part of AdGuard Browser Extension (https://github.com/AdguardTeam/AdguardBrowserExtension).
@@ -17,86 +17,18 @@
  * You should have received a copy of the GNU General Public License
  * along with AdGuard Browser Extension. If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { NotifierType } from '../../../common/constants';
-import {
-    MessageType,
-    type LoadCustomFilterInfoMessage,
-    type SubscribeToCustomFilterMessage,
-    type RemoveAntiBannerFilterMessage,
-} from '../../../common/messages';
-import { CustomFilterApi, type GetCustomFilterInfoResult } from '../../api/filters/custom';
-import { messageHandler } from '../../message-handler';
-import { notifier } from '../../notifier';
 import { engine } from '../../engine';
-import { type CategoriesFilterData } from '../../api/filters/categories';
+
+import { CustomFiltersServiceCommon } from './custom-filters-service-common';
 
 /**
  * Service for processing events with custom filters.
  */
-export class CustomFiltersService {
-    /**
-     * Init handlers.
-     */
-    static init(): void {
-        messageHandler.addListener(MessageType.LoadCustomFilterInfo, CustomFiltersService.onCustomFilterInfoLoad);
-        // eslint-disable-next-line max-len
-        messageHandler.addListener(MessageType.SubscribeToCustomFilter, CustomFiltersService.onCustomFilterSubscription);
-        messageHandler.addListener(MessageType.RemoveAntiBannerFilter, CustomFiltersService.onCustomFilterRemove);
-    }
-
-    /**
-     * Returns custom filter info for modal window.
-     *
-     * @param message Message data.
-     *
-     * @returns Custom filter info.
-     */
-    static async onCustomFilterInfoLoad(message: LoadCustomFilterInfoMessage): Promise<GetCustomFilterInfoResult> {
-        const { url, title } = message.data;
-
-        return CustomFilterApi.getFilterInfo(url, title);
-    }
-
+export class CustomFiltersService extends CustomFiltersServiceCommon {
     /**
-     * Add new custom filter.
-     *
-     * @param message Message data.
-     *
-     * @returns Custom filter metadata.
+     * @inheritdoc
      */
-    static async onCustomFilterSubscription(message: SubscribeToCustomFilterMessage): Promise<CategoriesFilterData> {
-        const { filter } = message.data;
-
-        const { customUrl, name, trusted } = filter;
-
-        // Creates a filter and enables the group if necessary.
-        const filterMetadata = await CustomFilterApi.createFilter({
-            customUrl,
-            title: name,
-            trusted,
-            enabled: true,
-        });
-
+    protected static override async updateEngine(): Promise<void> {
         await engine.update();
-
-        notifier.notifyListeners(NotifierType.CustomFilterAdded);
-        return filterMetadata;
-    }
-
-    /**
-     * Removes a custom filter.
-     *
-     * If the filter was enabled, the engine will be updated.
-     *
-     * @param message Message data.
-     */
-    static async onCustomFilterRemove(message: RemoveAntiBannerFilterMessage): Promise<void> {
-        const { filterId } = message.data;
-
-        const wasEnabled = await CustomFilterApi.removeFilter(filterId);
-        if (wasEnabled) {
-            await engine.update();
-        }
     }
 }