@devaccel-labs/app-comments-toolbar 1.0.0 → 1.3.0

package/src/runtime/page-background.ts

@@ -0,0 +1,51 @@
+/**
+ * The colour behind the page, as the browser paints it: the root element's background, else the body's (which
+ * the browser carries out to the whole window), else the window's own colour for the page's colour scheme
+ * (white, or dark under `color-scheme: dark`). A partly transparent one is laid over the window's colour.
+ *
+ * Never transparent. Snapshots and recording frames are JPEG and video, which have no transparency: a
+ * transparent background comes out black, with the page's black text on it.
+ */
+export function pageBackground(): string {
+  const behind = canvasColour();
+  for (const element of [document.documentElement, document.body]) {
+    if (!element) continue;
+    const colour = getComputedStyle(element).backgroundColor;
+    const alpha = alphaOf(colour);
+    if (alpha === 0) continue;
+    return alpha < 1 ? over(colour, behind) : colour;
+  }
+  return behind;
+}
+
+const RGBA = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/;
+
+/** The colour's opacity from 0 to 1. A colour this cannot read is taken as opaque. */
+function alphaOf(colour: string): number {
+  if (!colour || colour === "transparent") return 0;
+  const alpha = RGBA.exec(colour)?.[4] ?? /\/\s*([\d.]+%?)\s*\)$/.exec(colour)?.[1];
+  if (alpha === undefined) return 1;
+  const value = alpha.endsWith("%") ? Number(alpha.slice(0, -1)) / 100 : Number(alpha);
+  return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 1;
+}
+
+/** `top` laid over the opaque `bottom`. Both in `rgb()`/`rgba()`; `top` as it is when either is another form. */
+function over(top: string, bottom: string): string {
+  const a = RGBA.exec(top);
+  const b = RGBA.exec(bottom);
+  if (!a || !b) return top;
+  const alpha = alphaOf(top);
+  const mix = (index: number) =>
+    Math.round(Number(a[index]) * alpha + Number(b[index]) * (1 - alpha));
+  return `rgb(${mix(1)}, ${mix(2)}, ${mix(3)})`;
+}
+
+/** The window's own colour for the page's colour scheme, as the browser resolves the `Canvas` system colour. */
+function canvasColour(): string {
+  const probe = document.createElement("div");
+  probe.style.cssText = "position:absolute;width:0;height:0;background-color:Canvas";
+  document.documentElement.appendChild(probe);
+  const colour = getComputedStyle(probe).backgroundColor;
+  probe.remove();
+  return RGBA.test(colour) && alphaOf(colour) === 1 ? colour : "rgb(255, 255, 255)";
+}