[mv3] Support copying/pasting custom filters

gorhill · gorhill · commit 11b749e0a3fd · 2026-04-28T10:03:37.000-04:00
As a convenience for filter list authors who may want to freely
copy filters from/to uBO, custom filters can now be copied to
the clipboard as an alternative to "export" operation, or pasted
directly in empty hostname field as an alternative to "import"
operation.
diff --git a/platform/mv3/extension/css/settings.css b/platform/mv3/extension/css/settings.css
@@ -1,6 +1,10 @@
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+    }
+@keyframes copied {
+    from { opacity: 0; }
+    to { opacity: 1; }
     }
 
 :root {
@@ -278,23 +282,31 @@ section[data-pane="filters"] li [contenteditable] {
 section[data-pane="filters"] li [contenteditable]:focus {
     background-color: var(--surface-0);
     }
-section[data-pane="filters"] li .fa-icon {
+section[data-pane="filters"] li > div span.fa-icon {
     align-self: baseline;
     font-size: calc(var(--font-size) + 2px);
-    padding: 0 0.5em;
+    padding-inline: 0.3em;
     top: 2px;
     }
+section[data-pane="filters"] li > div span.remove,
+section[data-pane="filters"] li > div span.undo {
+    padding-inline-end: 0.5em;
+    }
 section[data-pane="filters"] li.selector:not(:first-of-type) {
     border-top: 1px dotted var(--border-1);
     }
 section[data-pane="filters"] li.removed > div [contenteditable] {
     color: red;
     text-decoration-line: line-through;
     }
+section[data-pane="filters"] li.removed > div span.copy,
 section[data-pane="filters"] li.removed > div span.remove,
 section[data-pane="filters"] li:not(.removed) > div span.undo {
     display: none;
     }
+section[data-pane="filters"] li > div span.copy.copied {
+    animation: copied 1s ease-out;
+}
 section[data-pane="filters"] span[contenteditable]:empty:not(:focus)::before {
     color: gray;
     content: '\2026';
diff --git a/platform/mv3/extension/dashboard.html b/platform/mv3/extension/dashboard.html
@@ -220,12 +220,12 @@ <h3 class="listname"></h3>
     <div class="listEntries"></div>
 </template>
 <template id="customFiltersHostname">
-    <li class="hostname" data-pretty="" data-ugly=""><div><span class="hostname" spellcheck="false" contenteditable="plaintext-only"></span><span class="remove fa-icon">trash-o</span><span class="undo fa-icon">undo</span></div>
+    <li class="hostname" data-pretty="" data-ugly=""><div><span class="hostname" spellcheck="false" contenteditable="plaintext-only"></span><span class="copy fa-icon">files-o</span><span class="remove fa-icon">trash-o</span><span class="undo fa-icon">undo</span></div>
     <ul class="selectors"></ul>
     </li>
 </template>
 <template id="customFiltersSelector">
-    <li class="selector" data-pretty="" data-ugly=""><div><span class="selector" spellcheck="false" contenteditable="plaintext-only"></span><span class="remove fa-icon">trash-o</span><span class="undo fa-icon">undo</span></div></li>
+    <li class="selector" data-pretty="" data-ugly=""><div><span class="selector" spellcheck="false" contenteditable="plaintext-only"></span><span class="copy fa-icon">files-o</span><span class="remove fa-icon">trash-o</span><span class="undo fa-icon">undo</span></div></li>
 </template>
 <template class="io-panel">
     <span class="io-panel">
diff --git a/platform/mv3/extension/js/filter-manager-ui.js b/platform/mv3/extension/js/filter-manager-ui.js
@@ -96,12 +96,10 @@ async function removeSelectorsFromHostname(node) {
         qsa$(hostnameNode, 'li.selector.removed:not([data-ugly=""])')
     ).map(a => a.dataset.ugly);
     if ( selectors.length === 0 ) { return; }
-    dom.cl.add(dom.body, 'readonly');
-    updateContentEditability();
+    updateContentEditability(false);
     await sendMessage({ what: 'removeCustomFilters', hostname, selectors });
     await debounceRenderCustomFilters();
-    dom.cl.remove(dom.body, 'readonly');
-    updateContentEditability();
+    updateContentEditability(true);
 }
 
 async function unremoveSelectorsFromHostname(node) {
@@ -111,12 +109,10 @@ async function unremoveSelectorsFromHostname(node) {
     if ( hostname === undefined ) { return; }
     const selectors = selectorsFromNode(hostnameNode);
     if ( selectors.length === 0 ) { return; }
-    dom.cl.add(dom.body, 'readonly');
-    updateContentEditability();
+    updateContentEditability(false);
     await sendMessage({ what: 'addCustomFilters', hostname, selectors });
     await debounceRenderCustomFilters();
-    dom.cl.remove(dom.body, 'readonly');
-    updateContentEditability();
+    updateContentEditability(true);
 }
 
 /******************************************************************************/
@@ -225,8 +221,9 @@ debounceRenderCustomFilters.debouncer = undefined;
 
 /******************************************************************************/
 
-function updateContentEditability() {
-    if ( dom.cl.has(dom.body, 'readonly') ) {
+function updateContentEditability(readWrite) {
+    dom.cl.toggle(dom.body, 'readonly', readWrite === false);
+    if ( readWrite === false ) {
         dom.attr('section[data-pane="filters"] [contenteditable]', 'contenteditable', 'false');
         return;
     }
@@ -267,18 +264,23 @@ async function validateSelector(target, selector) {
 /******************************************************************************/
 
 async function onHostnameChanged(target, before, after) {
+    const hostnameNode = target.closest('li.hostname');
+    if ( hostnameNode === null ) { return; }
+    if ( before === '' ) {
+        const succeeded = await importFromText(after);
+        if ( succeeded ) {
+            return debounceRenderCustomFilters();
+        }
+    }
+
+    after = after.replace('\n', '');
+
     const uglyAfter = punycode.toASCII(after);
     if ( isValidHostname(uglyAfter) === false ) {
         target.textContent = before;
         return;
     }
 
-    const hostnameNode = target.closest('li.hostname');
-    if ( hostnameNode === null ) { return; }
-
-    dom.cl.add(dom.body, 'readonly');
-    updateContentEditability();
-
     // Remove old hostname from storage
     if ( hostnameNode.dataset.ugly ) {
         await sendMessage({ what: 'removeAllCustomFilters',
@@ -295,11 +297,11 @@ async function onHostnameChanged(target, before, after) {
     });
 
     await debounceRenderCustomFilters();
-    dom.cl.remove(dom.body, 'readonly');
-    updateContentEditability();
 }
 
 async function onSelectorChanged(target, before, after) {
+    after = after.replace('\n', '');
+
     const selectorNode = target.closest('li.selector');
     if ( selectorNode === null ) { return; }
 
@@ -310,9 +312,6 @@ async function onSelectorChanged(target, before, after) {
         return;
     }
 
-    dom.cl.add(dom.body, 'readonly');
-    updateContentEditability();
-
     const hostname = hostnameFromNode(target);
 
     // Remove old selector from storage
@@ -330,16 +329,14 @@ async function onSelectorChanged(target, before, after) {
     });
 
     await debounceRenderCustomFilters();
-    dom.cl.remove(dom.body, 'readonly');
-    updateContentEditability();
 }
 
-function onTextChanged(target) {
+async function onTextChanged(target) {
     const itemNode = target.closest('[data-pretty]');
     if ( itemNode === null ) { return; }
     dom.cl.remove(itemNode, 'error');
     const before = itemNode.dataset.pretty;
-    const after = target.textContent.trim().replace('\n', '');
+    const after = target.textContent.trim();
     if ( after !== target.textContent ) {
         target.textContent = after;
     }
@@ -348,11 +345,16 @@ function onTextChanged(target) {
         target.textContent = before;
         return;
     }
+
+    updateContentEditability(false);
+
     if ( target.matches('.hostname') ) {
-        onHostnameChanged(target, before, after);
+        await onHostnameChanged(target, before, after);
     } else if ( target.matches('.selector') ) {
-        onSelectorChanged(target, before, after);
+        await onSelectorChanged(target, before, after);
     }
+
+    updateContentEditability(true);
 }
 
 /******************************************************************************/
@@ -388,20 +390,53 @@ function validateEdit(ev) {
     if ( itemNode === null ) { return; }
     const after = target.textContent.trim().replace('\n', '');
     if ( after === '' ) { return; }
+    const before = itemNode.dataset.ugly;
     if ( target.matches('.selector') ) {
         validateSelector(target, after).then(({ pretty }) => {
             if ( focusedEditableContent !== target ) { return; }
             dom.cl.toggle(itemNode, 'error', after !== '' && Boolean(pretty) === false);
         });
     } else if ( target.matches('.hostname') ) {
-        dom.cl.toggle(itemNode, 'error', isValidHostname(punycode.toASCII(after)) === false);
+        dom.cl.toggle(itemNode, 'error',
+            before !== '' && isValidHostname(punycode.toASCII(after)) === false
+        );
     }
 }
 
 let focusedEditableContent = null;
 
 /******************************************************************************/
 
+function onCopyClicked(ev) {
+    const { target } = ev;
+    const selectorNode = target.closest('li.selector:not(.removed):not([data-ugly=""])');
+    const hostnameNode = target.closest('li.hostname:not(.removed):not([data-ugly=""])');
+    const hostname = hostnameFromNode(hostnameNode);
+    if ( Boolean(hostname) === false ) { return; }
+    const selectorNodes = [];
+    let copyNode;
+    if ( selectorNode ) {
+        selectorNodes.push(selectorNode);
+        copyNode = selectorNode;
+    } else {
+        selectorNodes.push(...qsa$(hostnameNode, 'li.selector:not(.removed):not([data-ugly=""])'));
+        copyNode = hostnameNode;
+    }
+    const text = [];
+    for ( const node of selectorNodes ) {
+        const selector = node.dataset.pretty;
+        if ( Boolean(selector) === false ) { continue; }
+        text.push(`${hostname}##${selector}`);
+    }
+    if ( text.length === 0 ) { return; }
+    text.push('\n');
+    const item = new ClipboardItem({ 'text/plain': text.join('\n') });
+    navigator.clipboard.write([ item ]);
+    const copyNodes = qsa$(copyNode, '.copy');
+    dom.cl.add(copyNodes, 'copied');
+    self.setTimeout(( ) => { dom.cl.remove(copyNodes, 'copied'); }, 1000);
+}
+
 function onTrashClicked(ev) {
     const { target } = ev;
     const selectorNode = target.closest('li.selector');
@@ -474,10 +509,9 @@ async function importFromText(text) {
         }
     }
 
-    if ( hostnameToSelectorsMap.size === 0 ) { return; }
+    if ( hostnameToSelectorsMap.size === 0 ) { return false; }
 
-    dom.cl.add(dom.body, 'readonly');
-    updateContentEditability();
+    updateContentEditability(false);
 
     const promises = [];
     for ( const [ hostname, selectors ] of hostnameToSelectorsMap ) {
@@ -489,10 +523,11 @@ async function importFromText(text) {
         );
     }
     await Promise.all(promises);
-
     await debounceRenderCustomFilters();
-    dom.cl.remove(dom.body, 'readonly');
-    updateContentEditability();
+
+    updateContentEditability(true);
+
+    return true;
 }
 
 /******************************************************************************/
@@ -558,6 +593,7 @@ async function start() {
     dom.on(dataContainer, 'focusin', 'section[data-pane="filters"] [contenteditable]', startEdit);
     dom.on(dataContainer, 'focusout', 'section[data-pane="filters"] [contenteditable]', endEdit);
     dom.on(dataContainer, 'input', 'section[data-pane="filters"] [contenteditable]', commitEdit);
+    dom.on(dataContainer, 'click', 'section[data-pane="filters"] .copy', onCopyClicked);
     dom.on(dataContainer, 'click', 'section[data-pane="filters"] .remove', onTrashClicked);
     dom.on(dataContainer, 'click', 'section[data-pane="filters"] .undo', onUndoClicked);
     dom.on('section[data-pane="filters"] [data-i18n="addButton"]', 'click', importFromTextarea);
