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>

1 files changed, 36 insertions, 1 deletions

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"