Fix webgl config (#3407)

* Fix location of webGLRenderer flag in default-config.js

* Fix incorrect check of webGLRenderer flag

* Explain that disabling WebGL enables transparent backgrounds

Co-Authored-By: juancampa <juancampa@gmail.com>

* Only use WebGL if background is opaque

The hardcoding to white was also removed in favor of a temporary hack in
xterm.js that uses either white-over-black or black-overwhite to
maximize contrast with the background color

app/config/config-default.js

@@ -133,6 +133,10 @@ module.exports = {
     // URL to custom bell
     // bellSoundURL: 'http://example.com/bell.mp3',
 
+    // Whether to use the WebGL renderer. Set it to false to use canvas-based
+    // rendering (slower, but supports transparent backgrounds)
+    webGLRenderer: true,
+
     // for advanced config flags please refer to https://hyper.is/#cfg
   },
 
@@ -149,8 +153,6 @@ module.exports = {
   // to load it and avoid it being `npm install`ed
   localPlugins: [],
 
-  webGLRenderer: true,
-
   keymaps: {
     // Example
     // 'window:devtools': 'cmd+alt+o',

lib/components/term.js

@@ -24,6 +24,7 @@ const getTermOptions = props => {
   // Set a background color only if it is opaque
   const needTransparency = Color(props.backgroundColor).alpha() < 1;
   const backgroundColor = needTransparency ? 'transparent' : props.backgroundColor;
+  const useWebGL = props.webGLRenderer && !needTransparency;
   return {
     macOptionIsMeta: props.modifierKeys.altIsMeta,
     scrollback: props.scrollback,
@@ -40,18 +41,14 @@ const getTermOptions = props => {
     // HACK: Terminal.setOption breaks if we don't apply these in this order
     // TODO: The above notice can be removed once this is addressed:
     // https://github.com/xtermjs/xterm.js/pull/1790#issuecomment-450000121
-    rendererType: props.webGLRenderer ? 'webgl' : 'canvas',
-    experimentalCharAtlas: props.webGLRenderer ? 'webgl' : 'dynamic',
+    rendererType: useWebGL ? 'webgl' : 'canvas',
+    experimentalCharAtlas: useWebGL ? 'webgl' : 'dynamic',
     theme: {
       foreground: props.foregroundColor,
       background: backgroundColor,
       cursor: props.cursorColor,
       cursorAccent: props.cursorAccentColor,
-      // TODO: This hard codes the selection color to opaque white because the
-      // webgl renderer doesn't support anything else at the moment. Remove this
-      // once WebGL gets support for selection color. Discussed here:
-      // https://github.com/xtermjs/xterm.js/pull/1790
-      selection: props.webGLRenderer ? '#fff' : props.selectionColor,
+      selection: props.selectionColor,
       black: props.colors.black,
       red: props.colors.red,
       green: props.colors.green,

lib/reducers/ui.js

@@ -239,7 +239,7 @@ const reducer = (state = initial, action) => {
               ret.quickEdit = config.quickEdit;
             }
 
-            if (typeof config.webGLRenderer !== undefined) {
+            if (config.webGLRenderer !== undefined) {
               ret.webGLRenderer = config.webGLRenderer;
             }