Add "Enable GPU hardware acceleration" option

src/browser/components/SettingsPage.jsx

@@ -136,6 +136,7 @@ const SettingsPage = createReactClass({
       showUnreadBadge: this.state.showUnreadBadge,
       useSpellChecker: this.state.useSpellChecker,
       spellCheckerLocale: this.state.spellCheckerLocale,
+      enableHardwareAcceleration: this.state.enableHardwareAcceleration,
     };
 
     settings.writeFile(this.props.configFile, config, (err) => {
@@ -259,6 +260,13 @@ const SettingsPage = createReactClass({
     setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
   },
 
+  handleChangeEnableHardwareAcceleration() {
+    this.setState({
+      enableHardwareAcceleration: !this.refs.enableHardwareAcceleration.props.checked,
+    });
+    setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
+  },
+
   updateTeam(index, newData) {
     var teams = this.state.teams;
     teams[index] = newData;
@@ -549,6 +557,23 @@ const SettingsPage = createReactClass({
         </Checkbox>);
     }
 
+    options.push(
+      <Checkbox
+        key='inputEnableHardwareAcceleration'
+        id='inputEnableHardwareAcceleration'
+        ref='enableHardwareAcceleration'
+        checked={this.state.enableHardwareAcceleration}
+        onChange={this.handleChangeEnableHardwareAcceleration}
+      >
+        {'Use GPU hardware acceleration'}
+        <HelpBlock>
+          {'Disable this setting if you see a blank page after logging in to Mattermost.'}
+          {' If enabled, the Mattermost UI is rendered more efficiently but can cause stability issues for some systems.'}
+          {' Setting takes affect after restarting the app.'}
+        </HelpBlock>
+      </Checkbox>
+    );
+
     var optionsRow = (options.length > 0) ? (
       <Row>
         <Col md={12}>

src/common/config/defaultPreferences.js

@@ -15,6 +15,7 @@ const defaultPreferences = {
   },
   showUnreadBadge: true,
   useSpellChecker: true,
+  enableHardwareAcceleration: true,
 };
 
 module.exports = defaultPreferences;

src/main.js

@@ -88,6 +88,10 @@ try {
     settings.writeFileSync(configFile, config);
   }
 }
+if (config.enableHardwareAcceleration === false) {
+  app.disableHardwareAcceleration();
+}
+
 ipcMain.on('update-config', () => {
   const configFile = app.getPath('userData') + '/config.json';
   config = settings.readFileSync(configFile);

test/specs/browser/settings_test.js

@@ -281,6 +281,30 @@ describe('browser/settings.html', function desc() {
         config1.useSpellChecker.should.equal(false);
       });
     });
+
+    describe('Enable GPU hardware acceleration', () => {
+      it('should save selected option', async () => {
+        const ID_INPUT_ENABLE_HARDWARE_ACCELERATION = '#inputEnableHardwareAcceleration';
+        env.addClientCommands(this.app.client);
+        await this.app.client.
+          loadSettingsPage().
+          waitForExist(ID_INPUT_ENABLE_HARDWARE_ACCELERATION, 5000);
+        const selected = await this.app.client.isSelected(ID_INPUT_ENABLE_HARDWARE_ACCELERATION);
+        selected.should.equal(true);
+
+        await this.app.client.click(ID_INPUT_ENABLE_HARDWARE_ACCELERATION).
+          waitForVisible('#appOptionsSaveIndicator', 5000).
+          waitForVisible('#appOptionsSaveIndicator', 5000, true); // at least 2500 ms to disappear
+        const config0 = JSON.parse(fs.readFileSync(env.configFilePath, 'utf-8'));
+        config0.enableHardwareAcceleration.should.equal(false);
+
+        await this.app.client.click(ID_INPUT_ENABLE_HARDWARE_ACCELERATION).
+          waitForVisible('#appOptionsSaveIndicator', 5000).
+          waitForVisible('#appOptionsSaveIndicator', 5000, true); // at least 2500 ms to disappear
+        const config1 = JSON.parse(fs.readFileSync(env.configFilePath, 'utf-8'));
+        config1.enableHardwareAcceleration.should.equal(true);
+      });
+    });
   });
 
   describe('RemoveServerModal', () => {