[mv3] Make strict-blocking checkbox dependent on filtering mode

Related feedback: uBlockOrigin/uBOL-home#214 (comment)
gorhill · Dec 9, 2024 · 20a570e · 20a570e
1 parent 51ef43c
commit 20a570e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/platform/mv3/extension/css/settings.css b/platform/mv3/extension/css/settings.css
@@ -30,8 +30,9 @@ body[data-forbid~="filteringMode"] section[data-pane="settings"] > div:has(> h3[
     display: none;
     }
 
-#showBlockedCount:has(input[type="checkbox"][disabled]) {
-    opacity: 0.5;
+label:has(input[type="checkbox"][disabled]),
+label:has(input[type="checkbox"][disabled]) + legend {
+    filter: var(--checkbox-disabled-filter);
     }
 
 #defaultFilteringMode {

diff --git a/platform/mv3/extension/dashboard.html b/platform/mv3/extension/dashboard.html
@@ -31,8 +31,6 @@ <h3 data-i18n="behaviorSectionLabel"></h3>
             <p><label id="autoReload" data-i18n="autoReloadLabel"><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span>_</label>
             </p>
             <p><label id="showBlockedCount" data-i18n="showBlockedCountLabel"><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span>_</label>
-            <p><label id="strictBlockMode" data-i18n="enableStrictBlockLabel"><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span>_</label><legend data-i18n="enableStrictBlockLegend"></legend>
-            <p id="developerMode" hidden><label><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span>Developer mode</label>
         </div>
 
         <div class="firstRun">
@@ -90,6 +88,8 @@ <h3 data-i18n="defaultFilteringModeSectionLabel"></h3>
                     <div data-i18n="completeFilteringModeDescription"></div>
                 </label>
             </div>
+            <p><label id="strictBlockMode" data-i18n="enableStrictBlockLabel"><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span>_</label><legend data-i18n="enableStrictBlockLegend"></legend>
+            <p id="developerMode" hidden><label><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span>Developer mode</label>
         </div>
 
         <div>

diff --git a/platform/mv3/extension/js/settings.js b/platform/mv3/extension/js/settings.js
@@ -67,7 +67,12 @@ function renderWidgets() {
         }
     }
 
-    qs$('#strictBlockMode input[type="checkbox"]').checked = cachedRulesetData.strictBlockMode;
+    {
+        const input = qs$('#strictBlockMode input[type="checkbox"]');
+        const canStrictBlock = cachedRulesetData.defaultFilteringMode > 1;
+        input.checked = canStrictBlock && cachedRulesetData.strictBlockMode;
+        dom.attr(input, 'disabled', canStrictBlock ? null : '');
+    }
 
     {
         dom.prop('#developerMode input[type="checkbox"]', 'checked',