bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Miles Blackwood
2025-06-12 17:15:16 -04:00
committed by GitHub
parent 0e1d48179d
commit 64e577e2e6
4 changed files with 37 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/browser/src/autofill/notification/bar.ts
View File

@@ -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);

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

@@ -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>

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

@@ -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,
{

19
apps/browser/src/autofill/utils/index.ts
View File

@@ -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";
}
}