[PM-3316] Feature addition - Toggle Hardware Acceleration [Desktop] (#5968)

Added a toggle for disabling/enabling hardware acceleration on Desktop client.

Resolves #2615

---------

Co-authored-by: Hinton <hinton@users.noreply.github.com>

apps/desktop/src/app/accounts/settings.component.html

@@ -412,6 +412,23 @@
                   "enableBrowserIntegrationFingerprintDesc" | i18n
                 }}</small>
               </div>
+              <div class="form-group">
+                <div class="checkbox">
+                  <label for="enableHardwareAcceleration">
+                    <input
+                      id="enableHardwareAcceleration"
+                      type="checkbox"
+                      aria-describedby="enableHardwareAccelerationHelp"
+                      formControlName="enableHardwareAcceleration"
+                      (change)="saveHardwareAcceleration()"
+                    />
+                    {{ "enableHardwareAcceleration" | i18n }}
+                  </label>
+                </div>
+                <small id="enableHardwareAccelerationHelp" class="help-block">{{
+                  "enableHardwareAccelerationDesc" | i18n
+                }}</small>
+              </div>
               <div class="form-group" *ngIf="showDuckDuckGoIntegrationOption">
                 <div class="checkbox">
                   <label for="enableDuckDuckGoBrowserIntegration">

apps/desktop/src/app/accounts/settings.component.ts

@@ -24,6 +24,7 @@ import { DialogService } from "@bitwarden/components";
 
 import { SetPinComponent } from "../../auth/components/set-pin.component";
 import { flagEnabled } from "../../platform/flags";
+import { DesktopSettingsService } from "../../platform/services/desktop-settings.service";
 
 @Component({
   selector: "app-settings",
@@ -96,6 +97,7 @@ export class SettingsComponent implements OnInit {
       value: false,
       disabled: true,
     }),
+    enableHardwareAcceleration: true,
     enableDuckDuckGoBrowserIntegration: false,
     theme: [null as ThemeType | null],
     locale: [null as string | null],
@@ -119,6 +121,7 @@ export class SettingsComponent implements OnInit {
     private dialogService: DialogService,
     private userVerificationService: UserVerificationServiceAbstraction,
     private biometricStateService: BiometricStateService,
+    private desktopSettingsService: DesktopSettingsService,
   ) {
     const isMac = this.platformUtilsService.getDevice() === DeviceType.MacOsDesktop;
 
@@ -259,6 +262,9 @@ export class SettingsComponent implements OnInit {
       enableBrowserIntegration: await this.stateService.getEnableBrowserIntegration(),
       enableBrowserIntegrationFingerprint:
         await this.stateService.getEnableBrowserIntegrationFingerprint(),
+      enableHardwareAcceleration: await firstValueFrom(
+        this.desktopSettingsService.hardwareAcceleration$,
+      ),
       enableDuckDuckGoBrowserIntegration:
         await this.stateService.getEnableDuckDuckGoBrowserIntegration(),
       theme: await firstValueFrom(this.themeStateService.selectedTheme$),
@@ -655,6 +661,12 @@ export class SettingsComponent implements OnInit {
     );
   }
 
+  async saveHardwareAcceleration() {
+    await this.desktopSettingsService.setHardwareAcceleration(
+      this.form.value.enableHardwareAcceleration,
+    );
+  }
+
   async updateApproveLoginRequests() {
     await this.stateService.setApproveLoginRequests(this.form.value.approveLoginRequests);
   }

apps/desktop/src/app/services/services.module.ts

@@ -54,6 +54,7 @@ import { DialogService } from "@bitwarden/components";
 
 import { LoginGuard } from "../../auth/guards/login.guard";
 import { Account } from "../../models/account";
+import { DesktopSettingsService } from "../../platform/services/desktop-settings.service";
 import { ElectronCryptoService } from "../../platform/services/electron-crypto.service";
 import { ElectronLogRendererService } from "../../platform/services/electron-log.renderer.service";
 import {
@@ -212,6 +213,11 @@ const RELOAD_CALLBACK = new InjectionToken<() => any>("RELOAD_CALLBACK");
         BiometricStateService,
       ],
     },
+    {
+      provide: DesktopSettingsService,
+      useClass: DesktopSettingsService,
+      deps: [StateProvider],
+    },
   ],
 })
 export class ServicesModule {}

apps/desktop/src/locales/en/messages.json

@@ -1644,6 +1644,12 @@
   "enableBrowserIntegrationFingerprintDesc": {
     "message": "Add an additional layer of security by requiring fingerprint phrase confirmation when establishing a link between your desktop and browser. This requires user action and verification each time a connection is created."
   },
+  "enableHardwareAcceleration": {
+    "message": "Use hardware acceleration"
+  },
+  "enableHardwareAccelerationDesc": {
+    "message": "By default this setting is ON. Turn OFF only if you experience graphical issues. Restart is required."
+  },
   "approve": {
     "message": "Approve"
   },

apps/desktop/src/main.ts

@@ -1,6 +1,7 @@
 import * as path from "path";
 
 import { app } from "electron";
+import { firstValueFrom } from "rxjs";
 
 import { TokenService as TokenServiceAbstraction } from "@bitwarden/common/auth/abstractions/token.service";
 import { AccountServiceImplementation } from "@bitwarden/common/auth/services/account.service";
@@ -37,6 +38,7 @@ import { BiometricsService, BiometricsServiceAbstraction } from "./platform/main
 import { ClipboardMain } from "./platform/main/clipboard.main";
 import { DesktopCredentialStorageListener } from "./platform/main/desktop-credential-storage-listener";
 import { MainCryptoFunctionService } from "./platform/main/main-crypto-function.service";
+import { DesktopSettingsService } from "./platform/services/desktop-settings.service";
 import { ElectronLogMainService } from "./platform/services/electron-log.main.service";
 import { ELECTRON_SUPPORTS_SECURE_STORAGE } from "./platform/services/electron-platform-utils.service";
 import { ElectronStateService } from "./platform/services/electron-state.service";
@@ -56,6 +58,7 @@ export class Main {
   mainCryptoFunctionService: MainCryptoFunctionService;
   desktopCredentialStorageListener: DesktopCredentialStorageListener;
   migrationRunner: MigrationRunner;
+  desktopSettingsService: DesktopSettingsService;
   tokenService: TokenServiceAbstraction;
 
   windowMain: WindowMain;
@@ -189,6 +192,7 @@ export class Main {
     this.messagingMain = new MessagingMain(this, this.stateService);
     this.updaterMain = new UpdaterMain(this.i18nService, this.windowMain);
     this.trayMain = new TrayMain(this.windowMain, this.i18nService, this.stateService);
+    this.desktopSettingsService = new DesktopSettingsService(stateProvider);
 
     this.messagingService = new ElectronMainMessagingService(this.windowMain, (message) => {
       this.messagingMain.onMessage(message);
@@ -237,6 +241,7 @@ export class Main {
     // Run migrations first, then other things
     this.migrationRunner.run().then(
       async () => {
+        await this.toggleHardwareAcceleration();
         await this.windowMain.init();
         await this.i18nService.init();
         this.messagingMain.init();
@@ -307,4 +312,15 @@ export class Main {
         this.messagingService.send("deepLink", { urlString: s });
       });
   }
+
+  private async toggleHardwareAcceleration(): Promise<void> {
+    const hardwareAcceleration = await firstValueFrom(
+      this.desktopSettingsService.hardwareAcceleration$,
+    );
+
+    if (!hardwareAcceleration) {
+      this.logService.warning("Hardware acceleration is disabled");
+      app.disableHardwareAcceleration();
+    }
+  }
 }

apps/desktop/src/platform/services/desktop-settings.service.ts

@@ -0,0 +1,26 @@
+import { map } from "rxjs";
+
+import {
+  DESKTOP_SETTINGS_DISK,
+  KeyDefinition,
+  StateProvider,
+} from "@bitwarden/common/platform/state";
+
+export const HARDWARE_ACCELERATION = new KeyDefinition<boolean>(
+  DESKTOP_SETTINGS_DISK,
+  "hardwareAcceleration",
+  {
+    deserializer: (v: boolean) => v,
+  },
+);
+
+export class DesktopSettingsService {
+  private hwState = this.stateProvider.getGlobal(HARDWARE_ACCELERATION);
+  hardwareAcceleration$ = this.hwState.state$.pipe(map((v) => v ?? true));
+
+  constructor(private stateProvider: StateProvider) {}
+
+  async setHardwareAcceleration(enabled: boolean) {
+    await this.hwState.update(() => enabled);
+  }
+}

libs/common/src/platform/state/state-definitions.ts

@@ -75,6 +75,7 @@ export const BIOMETRIC_SETTINGS_DISK = new StateDefinition("biometricSettings",
 export const CLEAR_EVENT_DISK = new StateDefinition("clearEvent", "disk");
 export const CRYPTO_DISK = new StateDefinition("crypto", "disk");
 export const CRYPTO_MEMORY = new StateDefinition("crypto", "memory");
+export const DESKTOP_SETTINGS_DISK = new StateDefinition("desktopSettings", "disk");
 export const ENVIRONMENT_DISK = new StateDefinition("environment", "disk");
 export const THEMING_DISK = new StateDefinition("theming", "disk", { web: "disk-local" });
 export const TRANSLATION_DISK = new StateDefinition("translation", "disk");