Do not allow transparency in a tab's theme colors, which can prevent …

…the theme color rendering the same as in the content frame.

Blend's the theme color with a white background, which is common in web content.

Fix #12803

Also do not throw error when parsing color and no valid value is found

js/lib/color.js

@@ -5,7 +5,14 @@
 module.exports.parseColor = (color) => {
   const div = document.createElement('div')
   div.style.color = color
-  return div.style.color.split('(')[1].split(')')[0].split(',')
+  const normalizedColor = div.style.color
+  if (typeof normalizedColor === 'string' &&
+      normalizedColor.includes('(') &&
+      normalizedColor.includes(')') &&
+      normalizedColor.includes(',')) {
+    return div.style.color.split('(')[1].split(')')[0].split(',')
+  }
+  return null
 }
 
 module.exports.backgroundRequiresLightText = (color) => {
@@ -23,3 +30,26 @@ module.exports.backgroundRequiresLightText = (color) => {
 module.exports.getTextColorForBackground = (color) => {
   return module.exports.backgroundRequiresLightText(color) ? 'black' : 'white'
 }
+
+module.exports.removeAlphaChannelForBackground = (color, bR, bG, bB) => {
+  const rgba = module.exports.parseColor(color)
+  if (!rgba) {
+    return null
+  }
+  // handle no alpha channel
+  if (rgba.length !== 4 || Number.isNaN(rgba[3])) {
+    return color
+  }
+
+  // remove alpha channel, blending color with background
+  const [oR, oG, oB, oA] = rgba
+
+  const newR = blendChannel(oR, bR, oA)
+  const newG = blendChannel(oG, bG, oA)
+  const newB = blendChannel(oB, bB, oA)
+  return `rgb(${newR}, ${newG}, ${newB})`
+}
+
+function blendChannel (original, background, alpha) {
+  return Math.round((original * alpha) + ((1 - alpha) * background))
+}

js/stores/windowStore.js

@@ -16,6 +16,7 @@ const messages = require('../constants/messages')
 const debounce = require('../lib/debounce')
 const getSetting = require('../settings').getSetting
 const UrlUtil = require('../lib/urlutil')
+const color = require('../lib/color')
 const {l10nErrorText} = require('../../app/common/lib/httpUtil')
 const { makeImmutable } = require('../../app/common/state/immutableUtil')
 const {aboutUrls, getTargetAboutUrl, newFrameUrl} = require('../lib/appUrlUtil')
@@ -397,10 +398,13 @@ const doAction = (action) => {
       {
         const frameKey = action.frameProps.get('key')
         if (action.themeColor !== undefined) {
-          windowState = windowState.setIn(frameStateUtil.frameStatePath(windowState, frameKey).concat(['themeColor']), action.themeColor)
+          // remove alpha channel
+          const solidColor = color.removeAlphaChannelForBackground(action.themeColor, 255, 255, 255)
+          windowState = windowState.setIn(frameStateUtil.frameStatePath(windowState, frameKey).concat(['themeColor']), solidColor)
         }
         if (action.computedThemeColor !== undefined) {
-          windowState = windowState.setIn(frameStateUtil.frameStatePath(windowState, frameKey).concat(['computedThemeColor']), action.computedThemeColor)
+          const solidColor = color.removeAlphaChannelForBackground(action.computedThemeColor, 255, 255, 255)
+          windowState = windowState.setIn(frameStateUtil.frameStatePath(windowState, frameKey).concat(['computedThemeColor']), solidColor)
         }
         break
       }