Increase popup width on linux during WebAuthn process (#1772)

* Expand popup width on linux during WebAuthn prompt

* Refactor

src/browser/browserApi.ts

@@ -176,4 +176,13 @@ export class BrowserApi {
             chrome.permissions.request(permission, resolve);
         });
     }
+
+    static getPlatformInfo(): Promise<browser.runtime.PlatformInfo | chrome.runtime.PlatformInfo> {
+        if (BrowserApi.isWebExtensionsApi) {
+            return browser.runtime.getPlatformInfo();
+        }
+        return new Promise((resolve) => {
+            chrome.runtime.getPlatformInfo(resolve);
+        });
+    }
 }

src/popup/accounts/two-factor.component.ts

@@ -74,6 +74,12 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
             return;
         }
 
+        // WebAuthn prompt appears inside the popup on linux, and requires a larger popup width
+        // than usual to avoid cutting off the dialog.
+        if (this.selectedProviderType === TwoFactorProviderType.WebAuthn && await this.isLinux()) {
+            document.body.classList.add('linux-webauthn');
+        }
+
         if (this.selectedProviderType === TwoFactorProviderType.Email &&
             this.popupUtilsService.inPopup(window)) {
             const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('popup2faCloseMessage'),
@@ -98,12 +104,20 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
         });
     }
 
-    ngOnDestroy() {
+    async ngOnDestroy() {
         this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+
+        if (this.selectedProviderType === TwoFactorProviderType.WebAuthn && await this.isLinux()) {
+            document.body.classList.remove('linux-webauthn');
+        }
         super.ngOnDestroy();
     }
 
     anotherMethod() {
         this.router.navigate(['2fa-options']);
     }
+
+    async isLinux() {
+        return (await BrowserApi.getPlatformInfo()).os === "linux";
+    }
 }

src/popup/scss/misc.scss

@@ -189,6 +189,16 @@ p.lead {
     }
 }
 
+body.linux-webauthn {
+    width: 485px !important;
+    #web-authn-frame {
+        iframe {
+            width: 375px;
+            margin: 0 55px;
+        }
+    }
+}
+
 app-root > #loading {
     display: flex;
     text-align: center;