[PM-22207] Remove wasm fallback for browser (#15003)

We currently ship a transpiled version of the WebAssembly module to maintain backwards compataibility in case someone can't run the WebAssembly bundle. The filesize of this fallback now exceeds 4mb, but Firefox only supports javascript files 4mb and smaller in extensions. This resulted in us being unable to publish the latest version.

This PR removes the fallback.

(cherry picked from commit 674886a28b)

apps/browser/src/_locales/en/messages.json

@@ -5403,5 +5403,9 @@
   },
   "noPermissionsViewPage": {
     "message": "You do not have permissions to view this page. Try logging in with a different account."
+  },
+  "wasmNotSupported": {
+    "message": "WebAssembly is not supported on your browser or is not enabled. WebAssembly is required to use the Bitwarden app.",
+    "description": "'WebAssembly' is a technical term and should not be translated."
   }
 }

apps/browser/src/platform/services/sdk/browser-sdk-load.service.ts

@@ -35,9 +35,9 @@ if (BrowserApi.isManifestVersion(3)) {
     console.info("WebAssembly is supported in this environment");
     loadingPromise = import("./wasm");
   } else {
-    // eslint-disable-next-line no-console
-    console.info("WebAssembly is not supported in this environment");
-    loadingPromise = import("./fallback");
+    loadingPromise = new Promise((_, reject) => {
+      reject(new Error("WebAssembly is not supported in this environment"));
+    });
   }
 }
 
@@ -51,9 +51,7 @@ async function importModule(): Promise<GlobalWithWasmInit["initSdk"]> {
     console.info("WebAssembly is supported in this environment");
     await import("./wasm");
   } else {
-    // eslint-disable-next-line no-console
-    console.info("WebAssembly is not supported in this environment");
-    await import("./fallback");
+    throw new Error("WebAssembly is not supported in this environment");
   }
 
   // the wasm and fallback imports mutate globalThis to add the initSdk function

apps/browser/src/platform/services/sdk/fallback.ts

@@ -1,8 +0,0 @@
-import * as sdk from "@bitwarden/sdk-internal";
-import * as wasm from "@bitwarden/sdk-internal/bitwarden_wasm_internal_bg.wasm.js";
-
-import { GlobalWithWasmInit } from "./browser-sdk-load.service";
-
-(globalThis as GlobalWithWasmInit).initSdk = () => {
-  (sdk as any).init(wasm);
-};

apps/browser/src/popup/app.component.ts

@@ -11,7 +11,17 @@ import {
 } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { NavigationEnd, Router, RouterOutlet } from "@angular/router";
-import { Subject, takeUntil, firstValueFrom, concatMap, filter, tap, map } from "rxjs";
+import {
+  Subject,
+  takeUntil,
+  firstValueFrom,
+  concatMap,
+  filter,
+  tap,
+  catchError,
+  of,
+  map,
+} from "rxjs";
 
 import { DeviceTrustToastService } from "@bitwarden/angular/auth/services/device-trust-toast.service.abstraction";
 import { DocumentLangSetter } from "@bitwarden/angular/platform/i18n";
@@ -23,6 +33,7 @@ import { AnimationControlService } from "@bitwarden/common/platform/abstractions
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { SdkService } from "@bitwarden/common/platform/abstractions/sdk/sdk.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { MessageListener } from "@bitwarden/common/platform/messaging";
 import { UserId } from "@bitwarden/common/types/guid";
@@ -48,23 +59,45 @@ import { DesktopSyncVerificationDialogComponent } from "./components/desktop-syn
   styles: [],
   animations: [routerTransition],
   template: `
-    <div [@routerTransition]="getRouteElevation(outlet)">
-      <router-outlet #outlet="outlet"></router-outlet>
-    </div>
-    <bit-toast-container></bit-toast-container>
+    @if (showSdkWarning | async) {
+      <div class="tw-h-screen tw-flex tw-justify-center tw-items-center tw-p-4">
+        <bit-callout type="danger">
+          {{ "wasmNotSupported" | i18n }}
+          <a
+            bitLink
+            href="https://bitwarden.com/help/wasm-not-supported/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {{ "learnMore" | i18n }}
+          </a>
+        </bit-callout>
+      </div>
+    } @else {
+      <div [@routerTransition]="getRouteElevation(outlet)">
+        <router-outlet #outlet="outlet"></router-outlet>
+      </div>
+      <bit-toast-container></bit-toast-container>
+    }
   `,
   standalone: false,
 })
 export class AppComponent implements OnInit, OnDestroy {
   private compactModeService = inject(PopupCompactModeService);
+  private sdkService = inject(SdkService);
 
   private lastActivity: Date;
   private activeUserId: UserId;
-  private recordActivitySubject = new Subject<void>();
   private routerAnimations = false;
 
   private destroy$ = new Subject<void>();
 
+  // Show a warning if the SDK is not available.
+  protected showSdkWarning = this.sdkService.client$.pipe(
+    map(() => false),
+    catchError(() => of(true)),
+  );
+
   constructor(
     private authService: AuthService,
     private i18nService: I18nService,

apps/browser/src/popup/app.module.ts

@@ -20,6 +20,8 @@ import {
   ButtonModule,
   FormFieldModule,
   ToastModule,
+  CalloutModule,
+  LinkModule,
 } from "@bitwarden/components";
 
 import { AccountComponent } from "../auth/popup/account-switching/account.component";
@@ -87,6 +89,8 @@ import "../platform/popup/locales";
     CurrentAccountComponent,
     FormFieldModule,
     ExtensionAnonLayoutWrapperComponent,
+    CalloutModule,
+    LinkModule,
   ],
   declarations: [
     AppComponent,