From 98a792a3bd5b63a489e4a6e00f3100cf4372bf11 Mon Sep 17 00:00:00 2001
From: Pete Miller <miller.pete+commit@gmail.com>
Date: Tue, 23 Jan 2018 00:56:24 -0800
Subject: [PATCH] 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
---
 js/lib/color.js          | 23 +++++++++++++++++++++++
 js/stores/windowStore.js |  8 ++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/js/lib/color.js b/js/lib/color.js
index 4fa57ea2b19..dd2489daf0d 100644
--- a/js/lib/color.js
+++ b/js/lib/color.js
@@ -19,3 +19,26 @@ module.exports.getTextColorForBackground = (color) => {
   const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000
   return yiq >= 128 ? '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))
+}
diff --git a/js/stores/windowStore.js b/js/stores/windowStore.js
index 0f19f7892af..0ebd3210313 100644
--- a/js/stores/windowStore.js
+++ b/js/stores/windowStore.js
@@ -18,6 +18,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')
@@ -382,10 +383,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
       }