Failsafe for Chromium browsers' forced rendering of opaque bkgd (#15098)

apps/browser/src/autofill/notification/bar.ts

@@ -12,7 +12,7 @@ import { NotificationConfirmationContainer } from "../content/components/notific
 import { NotificationContainer } from "../content/components/notification/container";
 import { selectedFolder as selectedFolderSignal } from "../content/components/signals/selected-folder";
 import { selectedVault as selectedVaultSignal } from "../content/components/signals/selected-vault";
-import { buildSvgDomElement } from "../utils";
+import { buildSvgDomElement, matchAllowedColorSchemes } from "../utils";
 import { circleCheckIcon } from "../utils/svg-icons";
 
 import {
@@ -238,6 +238,15 @@ async function initNotificationBar(message: NotificationBarWindowMessage) {
   const i18n = getI18n();
   const resolvedTheme = getResolvedTheme(theme ?? ThemeTypes.Light);
 
+  // https://drafts.csswg.org/css-color-adjust-1/#preferred
+  // Prevents preferred color scheme from forcing an opaque background in the iframe
+  const colorScheme = new URLSearchParams(window.location.search).get("colorScheme") || "";
+  const allowedColorScheme = matchAllowedColorSchemes(colorScheme);
+  const meta = document.createElement("meta");
+  meta.setAttribute("name", "color-scheme");
+  meta.setAttribute("content", allowedColorScheme);
+  document.getElementsByTagName("head")[0].appendChild(meta);
+
   if (useComponentBar) {
     const resolvedType = resolveNotificationType(notificationBarIframeInitData);
     const headerMessage = getNotificationHeaderMessage(i18n, resolvedType);

apps/browser/src/autofill/overlay/notifications/content/__snapshots__/overlay-notifications-content.service.spec.ts.snap

@@ -7,7 +7,7 @@ exports[`OverlayNotificationsContentService opening the notification bar creates
 >
   <iframe
     id="bit-notification-bar-iframe"
-    src="chrome-extension://id/notification/bar.html"
+    src="chrome-extension://id/notification/bar.html?colorScheme=normal"
     style="width: 100% !important; height: 100% !important; border: 0px !important; display: block !important; position: relative !important; transition: transform 0.15s ease-out, opacity 0.15s ease !important; border-radius: 4px !important; transform: translateX(0) !important; opacity: 0;"
   />
 </div>

apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts

@@ -7,7 +7,7 @@ import {
   NotificationType,
   NotificationTypes,
 } from "../../../notification/abstractions/notification-bar";
-import { sendExtensionMessage, setElementStyles } from "../../../utils";
+import { matchAllowedColorSchemes, sendExtensionMessage, setElementStyles } from "../../../utils";
 import {
   NotificationsExtensionMessage,
   OverlayNotificationsContentService as OverlayNotificationsContentServiceInterface,
@@ -175,13 +175,18 @@ export class OverlayNotificationsContentService
    * @param initData - The initialization data for the notification bar.
    */
   private createNotificationBarIframeElement(initData: NotificationBarIframeInitData) {
+    const content = (document.querySelector('meta[name="color-scheme"]') as HTMLMetaElement)
+      ?.content;
+    const allowedColorScheme = matchAllowedColorSchemes(content);
     const isNotificationFresh =
       initData.launchTimestamp && Date.now() - initData.launchTimestamp < 250;
 
     this.currentNotificationBarType = initData.type;
     this.notificationBarIframeElement = globalThis.document.createElement("iframe");
     this.notificationBarIframeElement.id = "bit-notification-bar-iframe";
-    this.notificationBarIframeElement.src = chrome.runtime.getURL("notification/bar.html");
+    this.notificationBarIframeElement.src = chrome.runtime.getURL(
+      `notification/bar.html?colorScheme=${encodeURIComponent(allowedColorScheme)}`,
+    );
     setElementStyles(
       this.notificationBarIframeElement,
       {

apps/browser/src/autofill/utils/index.ts

@@ -575,3 +575,22 @@ export function areKeyValuesNull<T extends Record<string, any>>(
 
   return keysToCheck.every((key) => obj[key] == null);
 }
+
+export type AllowedColorScheme = "light dark" | "dark light" | "light" | "dark" | "normal";
+
+/**
+ * Ensures string matches allowed color scheme, defaulting/overriding to "normal".
+ * https://drafts.csswg.org/css-color-adjust-1/#color-scheme-meta
+ */
+export function matchAllowedColorSchemes(content: string): AllowedColorScheme {
+  switch (content) {
+    case "light dark":
+    case "dark light":
+    case "light":
+    case "dark":
+      // content must match one of these types.
+      return content;
+    default:
+      return "normal";
+  }
+}