PM-23298 White/black background appears in iframe containing notifications on Chromium browsers (#15436)

* PM-23298

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

This reverts commit 64e577e2e6.

* set style explicitly on iframe

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, matchAllowedColorSchemes } from "../utils";
+import { buildSvgDomElement } from "../utils";
 import { circleCheckIcon } from "../utils/svg-icons";
 
 import {
@@ -238,15 +238,6 @@ 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,8 +7,8 @@ exports[`OverlayNotificationsContentService opening the notification bar creates
 >
   <iframe
     id="bit-notification-bar-iframe"
-    src="chrome-extension://id/notification/bar.html?colorScheme=normal"
+    src="chrome-extension://id/notification/bar.html"
-    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;"
+    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; color-scheme: normal !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 { matchAllowedColorSchemes, sendExtensionMessage, setElementStyles } from "../../../utils";
+import { sendExtensionMessage, setElementStyles } from "../../../utils";
 import {
   NotificationsExtensionMessage,
   OverlayNotificationsContentService as OverlayNotificationsContentServiceInterface,
@@ -55,6 +55,7 @@ export class OverlayNotificationsContentService
     position: "relative",
     transition: "transform 0.15s ease-out, opacity 0.15s ease",
     borderRadius: "4px",
+    colorScheme: "normal",
   };
   private readonly extensionMessageHandlers: OverlayNotificationsExtensionMessageHandlers = {
     openNotificationBar: ({ message }) => this.handleOpenNotificationBarMessage(message),
@@ -182,18 +183,13 @@ 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(
+    this.notificationBarIframeElement.src = chrome.runtime.getURL("notification/bar.html");
-      `notification/bar.html?colorScheme=${encodeURIComponent(allowedColorScheme)}`,
-    );
     setElementStyles(
       this.notificationBarIframeElement,
       {

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

@@ -575,22 +575,3 @@ 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";
-  }
-}