Add new advanced setting: uiStyles

Default to `unset`.

To allow users to bypass uBO's default CSS styles in
case they are causing issues to specific users. It is
the responsibility of the user to ensure the value of
`uiStyles` contains valid CSS property declarations.
uBO will assign the value to `document.body.style.cssText`.

Related issue:
- uBlockOrigin/uBlock-issues#1044

For example, in the case of the issue above, one could
set `uiStyles` to `font-family: sans-serif` to force uBO
to the system font for its user interface.

Co-authored-by:  gorhill <[email protected]>

src/css/dashboard-common.css

@@ -8,7 +8,6 @@ body > div.body {
     }
 h2, h3 {
     margin: 1em 0;
-    font-family: sans-serif;
     }
 h2 {
     font-size: 18px;

src/dashboard.html

@@ -33,6 +33,7 @@
 
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
+<script src="js/vapi-client.js"></script>
 <script src="js/udom.js"></script>
 <script src="js/i18n.js"></script>
 <script src="js/dashboard.js"></script>

src/js/background.js

@@ -53,6 +53,7 @@ var µBlock = (function() { // jshint ignore:line
         requestJournalProcessPeriod: 1000,
         suspendTabsUntilReady: false,
         toolbarButtonForceTypeMenu: false,
+        uiStyles: 'unset',
         userResourcesLocation: 'unset'
     };
 

src/js/messaging.js

@@ -178,6 +178,10 @@ const onMessage = function(request, sender, callback) {
         µb.toggleHostnameSwitch(request);
         break;
 
+    case 'uiStyles':
+        response = µb.hiddenSettings.uiStyles;
+        break;
+
     case 'userSettings':
         response = µb.changeUserSettings(request.name, request.value);
         break;

src/js/udom.js

@@ -105,6 +105,13 @@ DOMListFactory.nodeFromSelector = function(selector) {
     if ( window.matchMedia('(prefers-color-scheme: dark)').matches ) {
         root.classList.add('dark');
     }
+
+    // https://github.com/uBlockOrigin/uBlock-issues/issues/1044
+    // Offer the possibility to bypass uBO's default styling
+    vAPI.messaging.send('uDom', { what: 'uiStyles' }, response => {
+        if ( typeof response !== 'string' || response === 'unset' ) { return; }
+        document.body.style.cssText = response;
+    });
 }
 
 /******************************************************************************/