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

[PM-23082] The v3 notification is using the v2 notification sizing in some cases (#15370)

Browse Source 
* PM-23082

* add tests
This commit is contained in:
Daniel Riera
2025-07-03 13:26:13 -04:00
committed by GitHub
parent 2d897e8cea
commit 20a5f5c7d9
2 changed files with 61 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,6 +44,40 @@ describe("OverlayNotificationsContentService", () => {
expect(bodyAppendChildSpy).not.toHaveBeenCalled();
});
it("applies correct styles when notificationRefreshFlag is true", async () => {
overlayNotificationsContentService["notificationRefreshFlag"] = true;
sendMockExtensionMessage({
command: "openNotificationBar",
data: {
type: "change",
typeData: mock<NotificationTypeData>(),
},
});
await flushPromises();
const barElement = overlayNotificationsContentService["notificationBarElement"]!;
expect(barElement.style.height).toBe("400px");
expect(barElement.style.right).toBe("0px");
});
it("applies correct styles when notificationRefreshFlag is false", async () => {
overlayNotificationsContentService["notificationRefreshFlag"] = false;
sendMockExtensionMessage({
command: "openNotificationBar",
data: {
type: "change",
typeData: mock<NotificationTypeData>(),
},
});
await flushPromises();
const barElement = overlayNotificationsContentService["notificationBarElement"]!;
expect(barElement.style.height).toBe("82px");
expect(barElement.style.right).toBe("10px");
});
it("closes the notification bar if the notification bar type has changed", async () => {
overlayNotificationsContentService["currentNotificationBarType"] = "add";
const closeNotificationBarSpy = jest.spyOn(

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

@@ -21,24 +21,32 @@ export class OverlayNotificationsContentService
private notificationBarIframeElement: HTMLIFrameElement | null = null;
private currentNotificationBarType: NotificationType | null = null;
private notificationRefreshFlag: boolean = false;
private notificationBarElementStyles: Partial<CSSStyleDeclaration> = {
height: "82px",
width: "430px",
maxWidth: "calc(100% - 20px)",
minHeight: "initial",
top: "10px",
right: "10px",
padding: "0",
position: "fixed",
zIndex: "2147483647",
visibility: "visible",
borderRadius: "4px",
border: "none",
backgroundColor: "transparent",
overflow: "hidden",
transition: "box-shadow 0.15s ease",
transitionDelay: "0.15s",
};
private getNotificationBarStyles(): Partial<CSSStyleDeclaration> {
const styles: Partial<CSSStyleDeclaration> = {
height: "400px",
width: "430px",
maxWidth: "calc(100% - 20px)",
minHeight: "initial",
top: "10px",
right: "0px",
padding: "0",
position: "fixed",
zIndex: "2147483647",
visibility: "visible",
borderRadius: "4px",
border: "none",
backgroundColor: "transparent",
overflow: "hidden",
transition: "box-shadow 0.15s ease",
transitionDelay: "0.15s",
};
if (!this.notificationRefreshFlag) {
styles.height = "82px";
styles.right = "10px";
}
return styles;
}
private notificationBarIframeElementStyles: Partial<CSSStyleDeclaration> = {
width: "100%",
height: "100%",
@@ -60,7 +68,6 @@ export class OverlayNotificationsContentService
void sendExtensionMessage("checkNotificationQueue");
void sendExtensionMessage("notificationRefreshFlagValue").then((notificationRefreshFlag) => {
this.notificationRefreshFlag = !!notificationRefreshFlag;
this.setNotificationRefreshBarHeight();
});
}
@@ -233,32 +240,12 @@ export class OverlayNotificationsContentService
this.notificationBarElement = globalThis.document.createElement("div");
this.notificationBarElement.id = "bit-notification-bar";
setElementStyles(this.notificationBarElement, this.notificationBarElementStyles, true);
this.setNotificationRefreshBarHeight();
setElementStyles(this.notificationBarElement, this.getNotificationBarStyles(), true);
this.notificationBarElement.appendChild(this.notificationBarIframeElement);
}
}
/**
* Sets the height of the notification bar based on the value of `notificationRefreshFlag`.
* If the flag is `true`, the bar is expanded to 400px and aligned right.
* If the flag is `false`, `null`, or `undefined`, it defaults to height of 82px.
* Skips if the notification bar element has not yet been created.
*
*/
private setNotificationRefreshBarHeight() {
const isNotificationV3 = !!this.notificationRefreshFlag;
if (!this.notificationBarElement) {
return;
}
if (isNotificationV3) {
setElementStyles(this.notificationBarElement, { height: "400px", right: "0" }, true);
}
}
/**
* Sets up the message listener for the initialization of the notification bar.
* This will send the initialization data to the notification bar iframe.