[PM-3316] Feature addition - Toggle Hardware Acceleration [Desktop]

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

@@ -387,6 +387,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">

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

@@ -92,6 +92,7 @@ export class SettingsComponent implements OnInit {
       value: false,
       disabled: true,
     }),
+    enableHardwareAcceleration: true,
     enableDuckDuckGoBrowserIntegration: false,
     theme: [null as ThemeType | null],
     locale: [null as string | null],
@@ -241,6 +242,7 @@ export class SettingsComponent implements OnInit {
       enableBrowserIntegration: await this.stateService.getEnableBrowserIntegration(),
       enableBrowserIntegrationFingerprint:
         await this.stateService.getEnableBrowserIntegrationFingerprint(),
+      enableHardwareAcceleration: await this.stateService.getEnableHardwareAcceleration(),
       enableDuckDuckGoBrowserIntegration:
         await this.stateService.getEnableDuckDuckGoBrowserIntegration(),
       theme: await this.stateService.getTheme(),
@@ -591,6 +593,10 @@ export class SettingsComponent implements OnInit {
     );
   }
 
+  async saveHardwareAcceleration() {
+    await this.stateService.setEnableHardwareAcceleration(this.form.value.enableHardwareAcceleration);
+  }
+
   async updateApproveLoginRequests() {
     await this.stateService.setApproveLoginRequests(this.form.value.approveLoginRequests);
   }

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

@@ -1626,6 +1626,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

@@ -142,6 +142,7 @@ export class Main {
   }
 
   bootstrap() {
+    this.toggleHardwareAcceleration();
     this.desktopCredentialStorageListener.init();
     this.windowMain.init().then(
       async () => {
@@ -217,4 +218,12 @@ export class Main {
         }
       });
   }
+
+  private async toggleHardwareAcceleration(): Promise<void> {
+    const enableHardwareRendering =
+      await this.stateService.getEnableHardwareAcceleration();
+    if (!enableHardwareRendering) {
+      app.disableHardwareAcceleration();
+    }
+  }
 }

libs/common/src/platform/abstractions/state.service.ts

@@ -180,6 +180,8 @@ export abstract class StateService<T extends Account = Account> {
     value: boolean,
     options?: StorageOptions
   ) => Promise<void>;
+  getEnableHardwareAcceleration: (options?: StorageOptions) => Promise<boolean>;
+  setEnableHardwareAcceleration: (value: boolean, options?: StorageOptions) => Promise<void>;
   getEnableCloseToTray: (options?: StorageOptions) => Promise<boolean>;
   setEnableCloseToTray: (value: boolean, options?: StorageOptions) => Promise<void>;
   getEnableDuckDuckGoBrowserIntegration: (options?: StorageOptions) => Promise<boolean>;

libs/common/src/platform/models/domain/global-state.ts

@@ -35,6 +35,7 @@ export class GlobalState {
   alwaysShowDock?: boolean;
   enableBrowserIntegration?: boolean;
   enableBrowserIntegrationFingerprint?: boolean;
+  enableHardwareAcceleration?: boolean;
   enableDuckDuckGoBrowserIntegration?: boolean;
   region?: string;
 }

libs/common/src/platform/services/state.service.ts

@@ -1948,6 +1948,24 @@ export class StateService<
     );
   }
 
+  async getEnableHardwareAcceleration(options?: StorageOptions): Promise<boolean> {
+    return (
+      (await this.getGlobals(this.reconcileOptions(options, await this.defaultOnDiskOptions())))
+        ?.enableHardwareAcceleration ?? true
+    );
+  }
+
+  async setEnableHardwareAcceleration(value: boolean, options?: StorageOptions): Promise<void> {
+    const globals = await this.getGlobals(
+      this.reconcileOptions(options, await this.defaultOnDiskOptions())
+    );
+    globals.enableHardwareAcceleration = value;
+    await this.saveGlobals(
+      globals,
+      this.reconcileOptions(options, await this.defaultOnDiskOptions())
+    );
+  }
+
   async getOrganizationInvitation(options?: StorageOptions): Promise<any> {
     return (
       await this.getGlobals(this.reconcileOptions(options, await this.defaultInMemoryOptions()))