feat: WIP new search filtering settings UI

_locales/en/messages.json

@@ -54,6 +54,22 @@
         "message": "Enable experimental DuckDuckGo support"
     },
 
+    "sfs_filter": {
+        "message": "[PH]Filter results from old wikis."
+    },
+    "sfs_rewrite": {
+        "message": "[PH]Replace results from old wikis."
+    },
+    "sfs_none": {
+        "message": "[PH]Do nothing."
+    },
+    "sfs_engine_google": {
+        "message": "Google"
+    },
+    "sfs_engine_ddg": {
+        "message": "DuckDuckGo"
+    },
+
     "options_wikis": {
         "message": "Wikis to affect"
     },

css/popup.css

@@ -198,3 +198,24 @@ label {
         display: none !important;
     }
 }
+
+
+table {
+    border: 1px solid var( --spacer-colour );
+}
+table > thead > tr:last-child > th {
+    border-bottom: 1px solid var( --spacer-colour );
+}
+
+
+[data-component='SearchFilterSettings'] th > span {
+    font-size: 95%;
+    font-weight: 500;
+}
+[data-component='SearchFilterSettings'] td:first-child {
+    font-weight: 600;
+    text-align: left;
+}
+[data-component='SearchFilterSettings'] td {
+    text-align: center;
+}

defaults.js

@@ -19,9 +19,17 @@ import { supportsDNR } from './js/util.js';
 export default function () {
     return {
         isRedirectDisabled: false,
+        disabledWikis: [],
+        useTabRedirect: !supportsDNR(),
+
+        // Legacy search engine settings - this should be migrated and dropped in 1.7.0
         searchMode: 'rewrite',
         ddgEnable: true,
-        disabledWikis: [],
-        useTabRedirect: !supportsDNR()
+
+        // Search filtering settings - this should match SearchFilterSettings.engines
+        sfs: {
+            google: 'rewrite',
+            ddg: 'rewrite'
+        }
     };
 }

js/baseSearch.js

@@ -2,6 +2,62 @@ import { getNativeSettings } from './util.js';
 import defaultSettingsFactory from '../defaults.js';
 
 
+/**
+ * @abstract
+ */
+export class SearchModule {
+    getId() {
+        throw new Error( `${this.constructor.name}.getId not implemented.` );
+    }
+
+    async replaceResults() {
+        throw new Error( `${this.constructor.name}.replaceResults not implemented.` );
+    }
+
+    async filterResults() {
+        throw new Error( `${this.constructor.name}.filterResults not implemented.` );
+    }
+
+    static async invoke( wikis, rootNode ) {
+        rootNode = rootNode || document;
+
+        const instance = new ( this )(),
+            id = instance.getId();
+
+        // TODO: `sfs` is not available yet
+        getNativeSettings().local.get( [
+            'sfs',
+            'disabledWikis'
+        ], result => {
+            const
+                defaults = defaultSettingsFactory(),
+                mode = result.sfs[ id ] || defaults.sfs[ id ],
+                doRoutine = instance[ {
+                    filter: 'filterResults',
+                    rewrite: 'replaceResults'
+                }[ mode ] ];
+
+            if ( !doRoutine ) {
+                return;
+            }
+
+            const disabledWikis = ( result && result.disabledWikis || defaults.disabledWikis );
+
+            // TODO: merge selectors and run that query, then determine the wiki
+            for ( const wiki of wikis ) {
+                if ( wiki.bannerOnly || disabledWikis.includes( wiki.id ) ) {
+                    continue;
+                }
+
+                for ( const element of rootNode.querySelectorAll( wiki.search.badSelector ) ) {
+                    doRoutine( wiki, element );
+                }
+            }
+        } );
+    }
+}
+
+
 export function invokeSearchModule( wikis, rewriteRoutine, filterRoutine, rootNode ) {
     const defaults = defaultSettingsFactory();
     rootNode = rootNode || document;

js/popup.js

@@ -4,6 +4,7 @@ import {
     getMessage
 } from './util.js';
 import defaultSettingsFactory from '../defaults.js';
+import SearchFilterSettings from './popup/SearchFilterSettings.js';
 
 
 const storage = window.storage || chrome.storage,
@@ -192,6 +193,14 @@ const RTW = {
 
             tabberElement.prepend( headerElement );
         }
+    },
+
+
+    initialiseSearchFilterSettings() {
+        const element = document.querySelector( '[data-component="SearchFilterSettings"]' );
+        if ( element ) {
+            SearchFilterSettings.initialise( element );
+        }
     }
 };
 
@@ -201,6 +210,7 @@ const RTW = {
     RTW.initialiseDynamic();
     RTW.processMessageTags();
     RTW.initialiseTabbers();
+    RTW.initialiseSearchFilterSettings();
 
     for ( const wiki of wikis ) {
         RTW.addWikiEntry( wiki );

js/popup/SearchFilterSettings.js

@@ -0,0 +1,74 @@
+import {
+    createDomElement,
+    getMessage
+} from "../util.js";
+
+
+/**
+ * @typedef {Object} SearchEngineInfo
+ * @property {string} id
+ * @property {boolean} supportsFilter
+ * @property {boolean} supportsRewrite
+ */
+
+
+export default class SearchFilterSettings {
+    /** @type {SearchEngineInfo[]} */
+    static engines = [
+        {
+            id: 'google',
+            supportsFilter: true,
+            supportsRewrite: true,
+        },
+        {
+            id: 'ddg',
+            supportsFilter: true,
+            supportsRewrite: true,
+        },
+    ];
+
+
+    /**
+     * @param {HTMLTableElement} table
+     */
+    static initialise( table ) {
+        const tbody = table.tBodies[ 0 ];
+        for ( const info of this.engines ) {
+            // TODO: settings integration doesn't do sub-keys yet
+            createDomElement( 'tr', {
+                html: [
+                    createDomElement( 'td', {
+                        text: getMessage( `sfs_engine_${info.id}` ),
+                    } ),
+                    createDomElement( 'td', {
+                        html: this.#createRadio( `sfs_mode_${info.id}`, 'sfs_rewrite', `sfs.${info.id}`, 'rewrite',
+                            false ),
+                    } ),
+                    createDomElement( 'td', {
+                        html: this.#createRadio( `sfs_mode_${info.id}`, 'sfs_filter', `sfs.${info.id}`, 'filter',
+                            false ),
+                    } ),
+                    createDomElement( 'td', {
+                        html: this.#createRadio( `sfs_mode_${info.id}`, 'sfs_rewrite', `sfs.${info.id}`, 'none',
+                            true ),
+                    } ),
+                ],
+                appendTo: tbody
+            } );
+        }
+    }
+
+
+    static #createRadio( id, tooltipMsg, settingId, settingValue, meansInactive ) {
+        return createDomElement( 'input', {
+            attributes: {
+                type: 'radio',
+                name: id,
+                title: getMessage( tooltipMsg ),
+                'data-setting-id': settingId,
+                'data-value': settingValue,
+                'data-means-inactive': meansInactive ? true : null
+            }
+        } );
+    }
+}

popup.html

@@ -34,6 +34,21 @@ <h5><i18n>options_redirecting</i18n></h5>
                     </div>
                 </div>
 
+                <div class="options-group" data-hide-in-stable>
+                    <h5>INDEV: <i18n>options_filtering</i18n></h5>
+                    <table data-component="SearchFilterSettings">
+                        <thead>
+                            <th></th>
+                            <th><span>Replace</span></th>
+                            <th><span>Filter</span></th>
+                            <th><span>Nothing</span></th>
+                        </thead>
+                        <tbody>
+                            <!-- This will be filled in by JavaScript -->
+                        </tbody>
+                    </table>
+                </div>
+
                 <div class="options-group">
                     <h5><i18n>options_filtering</i18n></h5>
                     <p>