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

Refactored message listener observable to handle angular change detection

Browse Source
This commit is contained in:
gbubemismith
2023-08-07 16:18:20 -04:00
parent 15c3a0d8a0
commit dd4343c980
2 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/browser/src/platform/browser/browser-api.ts
View File

@@ -1,3 +1,4 @@
import { NgZone } from "@angular/core";
import { Observable } from "rxjs"; import { Observable } from "rxjs";
import { DeviceType } from "@bitwarden/common/enums"; import { DeviceType } from "@bitwarden/common/enums";
@@ -212,9 +213,15 @@ export class BrowserApi {
} }
} }
static messageListener$() { static messageListener$(zone?: NgZone) {
return new Observable<unknown>((subscriber) => { return new Observable<unknown>((subscriber) => {
const handler = (message: unknown) => subscriber.next(message); const handler = (message: unknown) => {
if (zone) {
zone.run(() => subscriber.next(message));
} else {
subscriber.next(message);
}
};
chrome.runtime.onMessage.addListener(handler); chrome.runtime.onMessage.addListener(handler);
return () => chrome.runtime.onMessage.removeListener(handler); return () => chrome.runtime.onMessage.removeListener(handler);
}); });

15
apps/browser/src/vault/popup/components/fido2/fido2.component.ts
View File

@@ -18,6 +18,7 @@ import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view"; import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
import { Fido2KeyView } from "@bitwarden/common/vault/models/view/fido2-key.view"; import { Fido2KeyView } from "@bitwarden/common/vault/models/view/fido2-key.view";
import { BrowserApi } from "../../../../platform/browser/browser-api";
import { import {
BrowserFido2Message, BrowserFido2Message,
BrowserFido2UserInterfaceSession, BrowserFido2UserInterfaceSession,
@@ -57,16 +58,10 @@ export class Fido2Component implements OnInit, OnDestroy {
map((queryParamMap) => queryParamMap.get("sessionId")) map((queryParamMap) => queryParamMap.get("sessionId"))
); );
// Duplicated from BrowserApi.MessageListener$, but adds ngZone.run to make sure combineLatest([
// Angular change detection knows when a new value is emitted. Otherwise it is outside the zone. sessionId$,
// TODO: refactor so that this is reusable in other components to help others avoid this trap! BrowserApi.messageListener$(this.ngZone) as Observable<BrowserFido2Message>,
const messageListener$ = new Observable<unknown>((subscriber) => { ])
const handler = (message: unknown) => this.ngZone.run(() => subscriber.next(message)); // <-- the magic is here
chrome.runtime.onMessage.addListener(handler);
return () => chrome.runtime.onMessage.removeListener(handler);
}) as Observable<BrowserFido2Message>;
combineLatest([sessionId$, messageListener$])
.pipe(takeUntil(this.destroy$)) .pipe(takeUntil(this.destroy$))
.subscribe(([sessionId, message]) => { .subscribe(([sessionId, message]) => {
this.sessionId = sessionId; this.sessionId = sessionId;