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>

3 files changed, 57 insertions, 2 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;
+    }
+  });
 }
 
 /**