Complete support for reporing strict-block messages

gorhill · gorhill · commit 253ef7ade31b · 2025-06-22T11:28:54.000-04:00
Related issue: uBlockOrigin/uBlock-issues#1195
diff --git a/src/css/document-blocked.css b/src/css/document-blocked.css
@@ -23,6 +23,9 @@ body {
     padding: var(--default-gap-xxlarge) var(--default-gap-small);
     justify-content: center;
     }
+body.loading {
+    opacity: 0;
+    }
 :root.mobile body {
     padding: var(--default-gap-small);
     }
@@ -128,15 +131,18 @@ body[dir="rtl"] #toggleParse {
     font-weight: bold;
     }
 
-#whyex a {
+.why-extra a {
     white-space: nowrap;
 }
-#whyex ul {
+.why-extra ul {
     display: flex;
     flex-direction: column;
     margin: 0;
     padding-inline-start: var(--default-gap-xsmall);
     }
+details > *:not(summary) {
+    margin-inline-start: 1em;
+    }
 
 #urlskip a {
     display: block;
@@ -161,11 +167,14 @@ body[dir="rtl"] #toggleParse {
     }
 
 .filterList {
-    display: flex;
-}
-.filterList .filterListSupport[href=""] {
+    white-space: nowrap;
+    }
+.filterList .filterListSupport[href="#"] {
     display: none;
     }
+.filterList .filterListSupport:not([href="#"]) {
+    margin-inline-start: 0.25em;
+    }
 
 /* Small-screen devices */
 :root.mobile button {
diff --git a/src/document-blocked.html b/src/document-blocked.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="css/document-blocked.css">
 <link rel="icon" type="image/png" href="img/icon_64.png">
 </head>
-<body>
+<body class="loading">
 <div id="rootContainer">
     <div id="warningSign">
         <a class="fa-icon" href="https://github.com/gorhill/uBlock/wiki/Strict-blocking" target="_blank" rel="noopener noreferrer">exclamation-triangle</a>
@@ -25,14 +25,7 @@
         </div>
     </div>
 
-    <div>
-        <p data-i18n="docblockedPrompt2">_</p>
-        <p id="why" class="code">&nbsp;</p>
-        <div id="whyex" style="visibility: hidden;">
-            <span data-i18n="docblockedFoundIn">_</span>
-            <ul><li class="filterList">&nbsp;</ul>
-        </div>
-    </div>
+    <div id="why"></div>
 
     <div id="urlskip" hidden>
     </div>
@@ -47,14 +40,28 @@
         <button id="proceed" class="preferred" data-i18n="docblockedDisable" type="button"><span class="hover"></span></button>
     </div>
 </div>
-<div id="templates" style="display: none;">
-    <ul>
-    <li class="filterList">
-        <a class="filterListSource" href="asset-viewer.html?url=" target="_blank"></a>&nbsp;<!--
+
+<template class="why">
+    <p data-i18n="docblockedPrompt2">_</p>
+    <p class="why code">&nbsp;</p>
+</template>
+<template class="why-reason">
+    <details><summary><span data-i18n="docBlockedReasonLabel"></span> <span></span></summary>
+    <p data-i18n="docblockedPrompt2">_</p>
+    <p class="why code">&nbsp;</p>
+    </details>
+</template>
+<template class="why-extra">
+    <div class="why-extra">
+        <span data-i18n="docblockedFoundIn">_</span>&nbsp;
+    </div>
+</template>
+<template class="filterList">
+    <span class="filterList">
+        <a class="filterListSource" href="asset-viewer.html?url=" target="_blank"></a><!--
      --><a class="fa-icon filterListSupport hidden" href="#" target="_blank" rel="noopener noreferrer">home</a>
-    </li>
-    </ul>
-</div>
+    </span>
+</template>
 
 <script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
 
diff --git a/src/js/document-blocked.js b/src/js/document-blocked.js
@@ -21,60 +21,22 @@
 
 import { dom, qs$ } from './dom.js';
 import { i18n, i18n$ } from './i18n.js';
+import { faIconsInit } from './fa-icons.js';
 
 /******************************************************************************/
 
 const messaging = vAPI.messaging;
-let details = {};
+const details = {};
 
 {
     const matches = /details=([^&]+)/.exec(window.location.search);
     if ( matches !== null ) {
-        details = JSON.parse(decodeURIComponent(matches[1]));
+        Object.assign(details, JSON.parse(decodeURIComponent(matches[1])));
     }
 }
 
 /******************************************************************************/
 
-(async ( ) => {
-    const response = await messaging.send('documentBlocked', {
-        what: 'listsFromNetFilter',
-        rawFilter: details.fs,
-    });
-    if ( response instanceof Object === false ) { return; }
-
-    let lists;
-    for ( const rawFilter in response ) {
-        if ( Object.hasOwn(response, rawFilter) ) {
-            lists = response[rawFilter];
-            break;
-        }
-    }
-
-    if ( Array.isArray(lists) === false || lists.length === 0 ) {
-        qs$('#whyex').style.setProperty('visibility', 'collapse');
-        return;
-    }
-
-    const parent = qs$('#whyex > ul');
-    parent.firstElementChild.remove(); // remove placeholder element
-    for ( const list of lists ) {
-        const listElem = dom.clone('#templates .filterList');
-        const sourceElem = qs$(listElem, '.filterListSource');
-        sourceElem.href += encodeURIComponent(list.assetKey);
-        sourceElem.append(i18n.patchUnicodeFlags(list.title));
-        if ( typeof list.supportURL === 'string' && list.supportURL !== '' ) {
-            const supportElem = qs$(listElem, '.filterListSupport');
-            dom.attr(supportElem, 'href', list.supportURL);
-            dom.cl.remove(supportElem, 'hidden');
-        }
-        parent.appendChild(listElem);
-    }
-    qs$('#whyex').style.removeProperty('visibility');
-})();
-
-/******************************************************************************/
-
 const urlToFragment = raw => {
     try {
         const fragment = new DocumentFragment();
@@ -94,7 +56,26 @@ const urlToFragment = raw => {
 
 dom.clear('#theURL > p > span:first-of-type');
 qs$('#theURL > p > span:first-of-type').append(urlToFragment(details.url));
-dom.text('#why', details.fs);
+
+/******************************************************************************/
+
+const lookupFilterLists = async ( ) => {
+    const response = await messaging.send('documentBlocked', {
+        what: 'listsFromNetFilter',
+        rawFilter: details.fs,
+    });
+    if ( response instanceof Object === false ) { return; }
+    let lists;
+    for ( const rawFilter in response ) {
+        if ( Object.hasOwn(response, rawFilter) ) {
+            lists = response[rawFilter];
+            break;
+        }
+    }
+    return lists;
+};
+
+/******************************************************************************/
 
 if ( typeof details.to === 'string' && details.to.length !== 0 ) {
     const fragment = new DocumentFragment();
@@ -221,18 +202,14 @@ if ( window.history.length > 1 ) {
 
 /******************************************************************************/
 
-const getTargetHostname = function() {
-    return details.hn;
-};
-
 const proceedToURL = function() {
     window.location.replace(details.url);
 };
 
 const proceedTemporary = async function() {
     await messaging.send('documentBlocked', {
         what: 'temporarilyWhitelistDocument',
-        hostname: getTargetHostname(),
+        hostname: details.hn,
     });
     proceedToURL();
 };
@@ -241,7 +218,7 @@ const proceedPermanent = async function() {
     await messaging.send('documentBlocked', {
         what: 'toggleHostnameSwitch',
         name: 'no-strict-blocking',
-        hostname: getTargetHostname(),
+        hostname: details.hn,
         deep: true,
         state: true,
         persist: true,
@@ -263,4 +240,49 @@ dom.on('#proceed', 'click', ( ) => {
     }
 });
 
+lookupFilterLists().then((lists = []) => {
+    let reason = details.reason;
+    if ( Boolean(reason) === false ) {
+        reason = lists.reduce((a, b) => a || b.reason, undefined);
+    }
+    if ( reason ) {
+        const msg = i18n$(`docblockedReason${reason.charAt(0).toUpperCase()}${reason.slice(1)}`);
+        if ( msg ) { reason = msg };
+    }
+    const why = qs$(reason ? 'template.why-reason' : 'template.why')
+        .content
+        .cloneNode(true);
+    i18n.render(why);
+    dom.text(qs$(why, '.why'), details.fs);
+    if ( reason ) {
+        dom.text(qs$(why, 'summary'), `Reason: ${reason}`);
+    }
+    qs$('#why').append(why);
+    dom.cl.remove(dom.body, 'loading');
+
+    if ( lists.length === 0 ) { return; }
+
+    const whyExtra = qs$('template.why-extra').content.cloneNode(true);
+    i18n.render(whyExtra);
+
+    const listTemplate = qs$('template.filterList');
+    const parent = qs$(whyExtra, '.why-extra');
+    let separator = '';
+    for ( const list of lists ) {
+        const listElem = listTemplate.content.cloneNode(true);
+        const sourceElem = qs$(listElem, '.filterListSource');
+        sourceElem.href += encodeURIComponent(list.assetKey);
+        sourceElem.append(i18n.patchUnicodeFlags(list.title));
+        if ( typeof list.supportURL === 'string' && list.supportURL !== '' ) {
+            const supportElem = qs$(listElem, '.filterListSupport');
+            dom.attr(supportElem, 'href', list.supportURL);
+            dom.cl.remove(supportElem, 'hidden');
+        }
+        parent.append(separator, listElem);
+        separator = '\u00A0\u2022\u00A0';
+    }
+    faIconsInit(whyExtra);
+    qs$('#why .why').after(whyExtra);
+});
+
 /******************************************************************************/
diff --git a/src/js/reverselookup-worker.js b/src/js/reverselookup-worker.js
@@ -73,9 +73,10 @@ const fromNetFilter = function(details) {
                 continue;
             }
             lists.push({
-                assetKey: assetKey,
+                assetKey,
                 title: entry.title,
-                supportURL: entry.supportURL
+                supportURL: entry.supportURL,
+                reason: entry.reason,
             });
             break;
         }
diff --git a/src/js/static-filtering-parser.js b/src/js/static-filtering-parser.js
@@ -174,7 +174,6 @@ export const NODE_TYPE_NET_OPTION_NAME_INLINESCRIPT = iota++;
 export const NODE_TYPE_NET_OPTION_NAME_IPADDRESS    = iota++;
 export const NODE_TYPE_NET_OPTION_NAME_MATCHCASE    = iota++;
 export const NODE_TYPE_NET_OPTION_NAME_MEDIA        = iota++;
-export const NODE_TYPE_NET_OPTION_NAME_MESSAGE      = iota++;
 export const NODE_TYPE_NET_OPTION_NAME_METHOD       = iota++;
 export const NODE_TYPE_NET_OPTION_NAME_MP4          = iota++;
 export const NODE_TYPE_NET_OPTION_NAME_NOOP         = iota++;
@@ -184,6 +183,7 @@ export const NODE_TYPE_NET_OPTION_NAME_PERMISSIONS  = iota++;
 export const NODE_TYPE_NET_OPTION_NAME_PING         = iota++;
 export const NODE_TYPE_NET_OPTION_NAME_POPUNDER     = iota++;
 export const NODE_TYPE_NET_OPTION_NAME_POPUP        = iota++;
+export const NODE_TYPE_NET_OPTION_NAME_REASON       = iota++;
 export const NODE_TYPE_NET_OPTION_NAME_REDIRECT     = iota++;
 export const NODE_TYPE_NET_OPTION_NAME_REDIRECTRULE = iota++;
 export const NODE_TYPE_NET_OPTION_NAME_REMOVEPARAM  = iota++;
@@ -256,7 +256,6 @@ export const nodeTypeFromOptionName = new Map([
     [ 'ipaddress', NODE_TYPE_NET_OPTION_NAME_IPADDRESS ],
     [ 'match-case', NODE_TYPE_NET_OPTION_NAME_MATCHCASE ],
     [ 'media', NODE_TYPE_NET_OPTION_NAME_MEDIA ],
-    [ 'message', NODE_TYPE_NET_OPTION_NAME_MESSAGE ],
     [ 'method', NODE_TYPE_NET_OPTION_NAME_METHOD ],
     [ 'mp4', NODE_TYPE_NET_OPTION_NAME_MP4 ],
     [ '_', NODE_TYPE_NET_OPTION_NAME_NOOP ],
@@ -268,6 +267,7 @@ export const nodeTypeFromOptionName = new Map([
     /* synonym */ [ 'beacon', NODE_TYPE_NET_OPTION_NAME_PING ],
     [ 'popunder', NODE_TYPE_NET_OPTION_NAME_POPUNDER ],
     [ 'popup', NODE_TYPE_NET_OPTION_NAME_POPUP ],
+    [ 'reason', NODE_TYPE_NET_OPTION_NAME_REASON ],
     [ 'redirect', NODE_TYPE_NET_OPTION_NAME_REDIRECT ],
     /* synonym */ [ 'rewrite', NODE_TYPE_NET_OPTION_NAME_REDIRECT ],
     [ 'redirect-rule', NODE_TYPE_NET_OPTION_NAME_REDIRECTRULE ],
@@ -1352,9 +1352,6 @@ export class AstFilterParser {
             case NODE_TYPE_NET_OPTION_NAME_MATCHCASE:
                 realBad = this.isRegexPattern() === false;
                 break;
-            case NODE_TYPE_NET_OPTION_NAME_MESSAGE:
-                realBad = hasValue === false;
-                break;
             case NODE_TYPE_NET_OPTION_NAME_PERMISSIONS:
                 realBad = modifierType !== 0 ||
                     (hasValue || isException) === false ||
@@ -1378,6 +1375,9 @@ export class AstFilterParser {
                 abstractTypeCount += 1;
                 unredirectableTypeCount += 1;
                 break;
+            case NODE_TYPE_NET_OPTION_NAME_REASON:
+                realBad = hasValue === false;
+                break;
             case NODE_TYPE_NET_OPTION_NAME_REDIRECT:
             case NODE_TYPE_NET_OPTION_NAME_REDIRECTRULE:
             case NODE_TYPE_NET_OPTION_NAME_REPLACE:
@@ -3154,7 +3154,6 @@ export const netOptionTokenDescriptors = new Map([
     [ 'ipaddress', { mustAssign: true } ],
     [ 'match-case', { } ],
     [ 'media', { canNegate: true } ],
-    [ 'message', { mustAssign: true } ],
     [ 'method', { mustAssign: true } ],
     [ 'mp4', { blockOnly: true } ],
     [ '_', { } ],
@@ -3166,6 +3165,7 @@ export const netOptionTokenDescriptors = new Map([
     /* synonym */ [ 'beacon', { canNegate: true } ],
     [ 'popunder', { } ],
     [ 'popup', { canNegate: true } ],
+    [ 'reason', { mustAssign: true } ],
     [ 'redirect', { mustAssign: true } ],
     /* synonym */ [ 'rewrite', { mustAssign: true } ],
     [ 'redirect-rule', { mustAssign: true } ],
diff --git a/src/js/static-net-filtering.js b/src/js/static-net-filtering.js
diff --git a/src/js/traffic.js b/src/js/traffic.js

Original file line number	Diff line number	Diff line change
`@@ -73,9 +73,10 @@ const fromNetFilter = function(details) {`
`73`	`73`	`continue;`
`74`	`74`	`}`
`75`	`75`	`lists.push({`
`76`		`- assetKey: assetKey,`
	`76`	`+ assetKey,`
`77`	`77`	`title: entry.title,`
`78`		`- supportURL: entry.supportURL`
	`78`	`+ supportURL: entry.supportURL,`
	`79`	`+ reason: entry.reason,`
`79`	`80`	`});`
`80`	`81`	`break;`
`81`	`82`	`}`