fix(service-preload): Browser view canvas background

Due to `BrowserView.setBackgroundColor` not working under linux, we have
to inject styles to make sure our `BrowserView` is opaque.

We try to cover more edge cases to avoid the interference of the
injected style and the web site's own styles according to the CSS
specification:

https://www.w3.org/TR/css-backgrounds-3/#body-background

In particular, we avoid overwriting the styles for the `html` element
if `body` already has an opaque background so that the background of
`body` can extend to the whole canvas.

This might still interfere with the web site if it updates the
background color on the fly (dark mode), but a reload should solve
most of such issues.

Hopefully, after

https://github.com/electron/electron/issues/32898

is resolved, we can get rid of the hack entirely.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

4 files changed, 93 insertions, 3 deletions

diff --git a/packages/main/src/stores/MainStore.ts b/packages/main/src/stores/MainStore.ts
index bf351d7..21d7a63 100644
--- a/packages/main/src/stores/MainStore.ts
+++ b/packages/main/src/stores/MainStore.ts
@@ -87,7 +87,7 @@ const MainStore = types
           self.settings.setShowLocationBar(action.showLocationBar);
           break;
         case 'reload-all-services':
-          // TODO
+          self.services.forEach((service) => service.reload());
           break;
         case 'dispatch-service-action': {
           const { serviceId, serviceAction } = action;
diff --git a/packages/service-preload/package.json b/packages/service-preload/package.json
index 1cfa74c..2090cf9 100644
--- a/packages/service-preload/package.json
+++ b/packages/service-preload/package.json
@@ -9,6 +9,10 @@
   },
   "dependencies": {
     "@sophie/service-shared": "workspace:*",
+    "color-string": "^1.9.0",
     "electron": "17.1.0"
+  },
+  "devDependencies": {
+    "@types/color-string": "^1"
   }
 }
diff --git a/packages/service-preload/src/index.ts b/packages/service-preload/src/index.ts
index fb19107..a49a3a4 100644
--- a/packages/service-preload/src/index.ts
+++ b/packages/service-preload/src/index.ts
@@ -19,12 +19,63 @@
  */
 
 import { ServiceToMainIpcMessage, WebSource } from '@sophie/service-shared';
+import colorString from 'color-string';
 import { ipcRenderer, webFrame } from 'electron';
 
+const DEFAULT_BG_COLOR = '#fff';
+
+/**
+ * Styles a HTML element such that its background is opaque.
+ *
+ * If there is an existing background color, it will be made maximally opaque.
+ *
+ * If there is a background image, transparent areas will be colored `DEFAULT_BG_COLOR`.
+ *
+ * If the element was completely transparent, the function returns `false` instead.
+ * This allows leaving a `html` element transparent to let the background of the `body`
+ * element render in its palce.
+ *
+ * @param element The HTML element to style.
+ * @returns `true` if the background was made opaque.
+ * @see https://www.w3.org/TR/css-backgrounds-3/#body-background
+ */
+function tryMakeOpaque(element: HTMLElement): boolean {
+  const style = getComputedStyle(element);
+  const bgColor = colorString.get.rgb(style.backgroundColor);
+  if (bgColor[3] > 0) {
+    if (bgColor[3] < 1) {
+      bgColor[3] = 1;
+      // eslint-disable-next-line no-param-reassign -- Deliberately add element style.
+      element.style.backgroundColor = colorString.to.rgb(bgColor);
+    }
+    return true;
+  }
+  if (style.backgroundImage !== 'none') {
+    // eslint-disable-next-line no-param-reassign -- Deliberately add element style.
+    element.style.backgroundColor = DEFAULT_BG_COLOR;
+    return true;
+  }
+  return false;
+}
+
 if (webFrame.parent === null) {
   // Inject CSS to simulate `browserView.setBackgroundColor`.
   // This is injected before the page loads, so the styles from the website will overwrite it.
-  webFrame.insertCSS('body { background-color: #fff; }');
+  document.addEventListener('DOMContentLoaded', () => {
+    if (
+      document.documentElement.style.contain === '' &&
+      document.body.style.contain === ''
+    ) {
+      if (
+        !tryMakeOpaque(document.documentElement) &&
+        !tryMakeOpaque(document.body)
+      ) {
+        document.body.style.backgroundColor = DEFAULT_BG_COLOR;
+      }
+    } else if (!tryMakeOpaque(document.documentElement)) {
+      document.documentElement.style.backgroundColor = DEFAULT_BG_COLOR;
+    }
+  });
 }
 
 /**
diff --git a/yarn.lock b/yarn.lock
index 39b7ef1..320d129 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1365,6 +1365,8 @@ __metadata:
   resolution: "@sophie/service-preload@workspace:packages/service-preload"
   dependencies:
     "@sophie/service-shared": "workspace:*"
+    "@types/color-string": ^1
+    color-string: ^1.9.0
     electron: 17.1.0
   languageName: unknown
   linkType: soft
@@ -1462,6 +1464,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/color-string@npm:^1":
+  version: 1.5.2
+  resolution: "@types/color-string@npm:1.5.2"
+  checksum: b604373cd151b66c44b3fb1df5e7a93136307755f571016ff249b378b20c0ce190ed373af294cc6cdbbe489fdcd71eb2026a6150a0312eee9ca7b2de4eea4e17
+  languageName: node
+  linkType: hard
+
 "@types/debug@npm:^4.1.6":
   version: 4.1.7
   resolution: "@types/debug@npm:4.1.7"
@@ -2869,13 +2878,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:~1.1.4":
+"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
   languageName: node
   linkType: hard
 
+"color-string@npm:^1.9.0":
+  version: 1.9.0
+  resolution: "color-string@npm:1.9.0"
+  dependencies:
+    color-name: ^1.0.0
+    simple-swizzle: ^0.2.2
+  checksum: 93c6678b847f8cfa47d19677fd19e1d4b19d7a33f100644400357c298266080b5bca64e5f874fa8ac8cc0aa0606ad44f7a838b4e6fd05e6affea190a68555bb4
+  languageName: node
+  linkType: hard
+
 "color-support@npm:^1.1.2":
   version: 1.1.3
   resolution: "color-support@npm:1.1.3"
@@ -5227,6 +5246,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-arrayish@npm:^0.3.1":
+  version: 0.3.2
+  resolution: "is-arrayish@npm:0.3.2"
+  checksum: 977e64f54d91c8f169b59afcd80ff19227e9f5c791fa28fa2e5bce355cbaf6c2c356711b734656e80c9dd4a854dd7efcf7894402f1031dfc5de5d620775b4d5f
+  languageName: node
+  linkType: hard
+
 "is-bigint@npm:^1.0.1":
   version: 1.0.4
   resolution: "is-bigint@npm:1.0.4"
@@ -8149,6 +8175,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-swizzle@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "simple-swizzle@npm:0.2.2"
+  dependencies:
+    is-arrayish: ^0.3.1
+  checksum: a7f3f2ab5c76c4472d5c578df892e857323e452d9f392e1b5cf74b74db66e6294a1e1b8b390b519fa1b96b5b613f2a37db6cffef52c3f1f8f3c5ea64eb2d54c0
+  languageName: node
+  linkType: hard
+
 "sisteransi@npm:^1.0.5":
   version: 1.0.5
   resolution: "sisteransi@npm:1.0.5"