From cd5dc09d25e901c59eba9ec4a68858801fcee267 Mon Sep 17 00:00:00 2001
From: Prithvi Reddy <prithvi2k2@gmail.com>
Date: Thu, 21 Mar 2024 19:13:29 +0530
Subject: [PATCH] [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>
---
 .../src/app/accounts/settings.component.html  | 17 ++++++++++++
 .../src/app/accounts/settings.component.ts    | 12 +++++++++
 .../src/app/services/services.module.ts       |  6 +++++
 apps/desktop/src/locales/en/messages.json     |  6 +++++
 apps/desktop/src/main.ts                      | 16 ++++++++++++
 .../services/desktop-settings.service.ts      | 26 +++++++++++++++++++
 .../src/platform/state/state-definitions.ts   |  1 +
 7 files changed, 84 insertions(+)
 create mode 100644 apps/desktop/src/platform/services/desktop-settings.service.ts

diff --git a/apps/desktop/src/app/accounts/settings.component.html b/apps/desktop/src/app/accounts/settings.component.html
index 7a61a55ccff..b35d3ed2254 100644
--- a/apps/desktop/src/app/accounts/settings.component.html
+++ b/apps/desktop/src/app/accounts/settings.component.html
@@ -412,6 +412,23 @@ <h2>
                   "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">
diff --git a/apps/desktop/src/app/accounts/settings.component.ts b/apps/desktop/src/app/accounts/settings.component.ts
index e066d4ec2e2..bf1102ab549 100644
--- a/apps/desktop/src/app/accounts/settings.component.ts
+++ b/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);
   }
diff --git a/apps/desktop/src/app/services/services.module.ts b/apps/desktop/src/app/services/services.module.ts
index 3a8457da7a6..bed8f21bbe3 100644
--- a/apps/desktop/src/app/services/services.module.ts
+++ b/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 {}
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index 48c7184c888..191008821df 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/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"
   },
diff --git a/apps/desktop/src/main.ts b/apps/desktop/src/main.ts
index 0b92fab894e..75f9e22a87e 100644
--- a/apps/desktop/src/main.ts
+++ b/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();
+    }
+  }
 }
diff --git a/apps/desktop/src/platform/services/desktop-settings.service.ts b/apps/desktop/src/platform/services/desktop-settings.service.ts
new file mode 100644
index 00000000000..791e5a2c5d0
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/libs/common/src/platform/state/state-definitions.ts b/libs/common/src/platform/state/state-definitions.ts
index 3e6145cd5b5..edc5fd9a16f 100644
--- a/libs/common/src/platform/state/state-definitions.ts
+++ b/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");