Permalink
Browse files

Apply browser theme color #1526

  • Loading branch information...
piroor committed Nov 15, 2017
1 parent 90e513f commit c9f06a238cf557e59000a2290f99e27e0c93c326
@@ -13,7 +13,8 @@
"notifications",
"sessions",
"storage",
"tabs"
"tabs",
"theme"
],
"icons": {
"16": "resources/16x16-light.svg",
@@ -1186,6 +1186,10 @@ function onMessageExternal(aMessage, aSender) {
}
}
function onBrowserThemeChanged(aUpdateInfo) {
applyBrowserTheme(aUpdateInfo.theme);
}
function onConfigChange(aChangedKey) {
var rootClasses = document.documentElement.classList;
switch (aChangedKey) {
@@ -32,6 +32,7 @@
<style id="size-definition" type="text/css"></style>
<style id="contextual-identity-styling" type="text/css"></style>
<link id="style-loader" rel="stylesheet" type="text/css" href=""/>
<style id="browser-theme-definition" type="text/css"></style>
<style id="user-style-rules" type="text/css"></style>
</head>
<body>
@@ -24,6 +24,7 @@ var gInitializing = true;
var gSizeDefinition;
var gContextualIdentitiesStyle;
var gStyleLoader;
var gBrowserThemeDefinition;
var gUserStyleRules;
var gAddonStyles = {};
var gMetricsData = new MetricsData();
@@ -40,6 +41,7 @@ function earlyInit() {
gAllTabs = document.querySelector('#all-tabs');
gSizeDefinition = document.querySelector('#size-definition');
gStyleLoader = document.querySelector('#style-loader');
gBrowserThemeDefinition = document.querySelector('#browser-theme-definition');
gUserStyleRules = document.querySelector('#user-style-rules');
gContextualIdentitiesStyle = document.querySelector('#contextual-identity-styling');
gMetricsData.add('earlyInit end');
@@ -119,6 +121,8 @@ async function init() {
browser.runtime.onMessage.addListener(onMessage);
browser.runtime.onMessageExternal.addListener(onMessageExternal);
if (browser.theme)
browser.theme.onUpdated.addListener(onBrowserThemeChanged);
}),
gMetricsData.addAsync('initializing contextual identities', async () => {
updateContextualIdentitiesStyle();
@@ -186,6 +190,8 @@ function destroy() {
configs.$removeObserver(onConfigChange);
browser.runtime.onMessage.removeListener(onMessage);
browser.runtime.onMessageExternal.removeListener(onMessageExternal);
if (browser.theme)
browser.theme.onUpdated.removeListener(onBrowserThemeChanged);
endListenDragEvents(gTabBar);
endObserveApiTabs();
endObserveContextualIdentities();
@@ -242,6 +248,8 @@ function applyStyle() {
gStyleLoader.setAttribute('href', 'styles/square/plain.css');
break;
}
if (browser.theme)
browser.theme.getCurrent().then(applyBrowserTheme);
return new Promise((aResolve, aReject) => {
gStyleLoader.addEventListener('load', () => {
nextFrame().then(aResolve);
@@ -253,6 +261,37 @@ function applyUserStyleRules() {
gUserStyleRules.textContent = configs.userStyleRules || '';
}
function applyBrowserTheme(aTheme) {
if (!aTheme.colors) {
gBrowserThemeDefinition.textContent = '';
return;
}
gBrowserThemeDefinition.textContent = `
:root {
--browser-bg-base: ${aTheme.colors.accentcolor};
--browser-bg-less-lighter: ${getModifiedColorFrom(aTheme.colors.accentcolor, 255, 0.25)};
--browser-bg-lighter: ${getModifiedColorFrom(aTheme.colors.accentcolor, 255, 0.4)};
--browser-bg-more-lighter: ${getModifiedColorFrom(aTheme.colors.accentcolor, 255, 0.6)};
--browser-bg-less-darker: ${getModifiedColorFrom(aTheme.colors.accentcolor, 0, 0.1)};
--browser-bg-darker: ${getModifiedColorFrom(aTheme.colors.accentcolor, 0, 0.25)};
--browser-bg-more-darker: ${getModifiedColorFrom(aTheme.colors.accentcolor, 0, 0.5)};
--browser-fg-color: ${aTheme.colors.textcolor};
--browser-header-url: url(${JSON.stringify(aTheme.images.headerURL)});
}
`;
}
function getModifiedColorFrom(aCode, aBrightness, aAlpha) { // expected input: 'RRGGBB' or 'RGB'
var parts = aCode.match(/^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i) ||
aCode.match(/^#?([0-9a-f])([0-9a-f])([0-9a-f])/i);
if (!parts)
return aCode;
var red = Math.min(255, Math.round((parseInt(parts[1], 16) * (1 - aAlpha)) + (aBrightness * aAlpha)));
var green = Math.min(255, Math.round((parseInt(parts[2], 16) * (1 - aAlpha)) + (aBrightness * aAlpha)));
var blue = Math.min(255, Math.round((parseInt(parts[3], 16) * (1 - aAlpha)) + (aBrightness * aAlpha)));
return `rgb(${red}, ${green}, ${blue})`;
}
function calculateDefaultSizes() {
// first, calculate actual favicon size.
gFaviconSize = document.querySelector('#dummy-favicon-size-box').getBoundingClientRect().height;
@@ -324,8 +363,8 @@ function updateContextualIdentitiesSelector() {
}
function getReadableForegroundColorFromBGColor(aCode) { // expected input: 'RRGGBB' or 'RGB'
var parts = aCode.match(/^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/) ||
aCode.match(/^#?([0-9a-f])([0-9a-f])([0-9a-f])/);
var parts = aCode.match(/^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i) ||
aCode.match(/^#?([0-9a-f])([0-9a-f])([0-9a-f])/i);
if (!parts)
return '-moz-fieldtext';
var red = parseInt(parts[1], 16);
@@ -1,12 +1,12 @@
:root {
--tab-surface: -moz-dialog;
--tab-text: -moz-dialogtext;
--tab-border: ThreeDShadow;
--tab-side-border: ThreeDLightShadow;
--tab-surface-hover: ThreeDHighlight;
--tab-dropmarker: -moz-dialogtext;
--tabbar-bg: darkgray;
--tab-surface: var(--browser-bg-base, -moz-dialog);
--tab-text: var(--browser-fg-color, -moz-dialogtext);
--tab-border: var(--browser-bg-more-darker, ThreeDShadow);
--tab-side-border: var(--browser-bg-darker, ThreeDLightShadow);
--tab-surface-hover: var(--browser-bg-more-lighter, ThreeDHighlight);
--tab-dropmarker: var(--browser-fg-color, -moz-dialogtext);
--tabbar-bg: var(--browser-bg-darker, darkgray);
background: var(--tabbar-bg);
}
@@ -35,22 +35,22 @@
* ***** END LICENSE BLOCK ******/
:root {
--tab-surface: -moz-dialog;
--tab-text: -moz-dialogtext;
--tab-border: ThreeDShadow;
--tab-dropmarker: -moz-dialogtext;
--tab-surface: var(--browser-bg-base, -moz-dialog);
--tab-text: var(--browser-fg-color, -moz-dialogtext);
--tab-border: var(--browser-bg-more-darker, ThreeDShadow);
--tab-dropmarker: var(--browser-fg-color, -moz-dialogtext);
--tab-surface-hover: #e0e8f6;
--tab-surface-active: #c1d2ee;
--tab-surface-active-hover: #d1e2fe;
--tab-surface-hover: var(--browser-bg-less-lighter, #e0e8f6);
--tab-surface-active: var(--browser-bg-lighter, #c1d2ee);
--tab-surface-active-hover: var(--browser-bg-more-lighter, #d1e2fe);
--tab-highlighted-highlight: white;
--tab-highlighted-glow: #3890f3; /* = rgb(56, 144, 243) */
--tab-highlighted-base: var(--tab-surface);
--throbber-color: var(--tab-highlighted-glow);
background: var(--tab-surface);
background: var(--browser-bg-darker, --tab-surface);
}
.tab,

0 comments on commit c9f06a2

Please sign in to comment.