Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
Do not allow transparency in a tab's theme colors, which can prevent …
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
petemill committed Jan 23, 2018
1 parent e6b529f commit 98a792a
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 2 deletions.
23 changes: 23 additions & 0 deletions js/lib/color.js
Original file line number Diff line number Diff line change
Expand Up @@ -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))
}
8 changes: 6 additions & 2 deletions js/stores/windowStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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
}
Expand Down

0 comments on commit 98a792a

Please sign in to comment.