diff --git a/background/addon-state.js b/background/addon-state.js
index d431021..3ee9917 100644
--- a/background/addon-state.js
+++ b/background/addon-state.js
@@ -96,8 +96,8 @@ class AddonState {
if (tab.active) {
let color = await findBaseColor(tab);
this.state.tabColorMap.set(tab.id, color);
+ onTabColorChange(tab);
}
- onTabColorChange(tab);
}
};
diff --git a/background/theme.js b/background/theme.js
index 1fbca33..aed9533 100644
--- a/background/theme.js
+++ b/background/theme.js
@@ -1,7 +1,22 @@
"use strict";
-const textProperties = ["toolbar_text", "textcolor", "toolbar_field_text"];
-const opacityProperties = ["toolbar", "toolbar_field"];
+const textProperties = [
+ "toolbar_text",
+ "textcolor",
+ "toolbar_field_text",
+ "tab_text",
+ "popup_text",
+ "popup_highlight_text",
+];
+const opacityProperties = [
+ "toolbar",
+ "toolbar_field",
+ "toolbar_field_border",
+ "toolbar_top_separator",
+ "toolbar_bottom_separator",
+ "toolbar_field_separator",
+ "toolbar_vertical_separator",
+];
/* exported Theme */
@@ -72,9 +87,6 @@ class Theme {
}
}
- patchedColors.toolbar_top_separator = "rgba(128, 128, 128, 0.2)";
- patchedColors.toolbar_bottom_separator = patchedColors.toolbar;
-
let theme = {
colors: patchedColors,
};
diff --git a/options/components/theme-editor.js b/options/components/theme-editor.js
index 71a18ac..929e4ec 100644
--- a/options/components/theme-editor.js
+++ b/options/components/theme-editor.js
@@ -32,73 +32,158 @@ function ThemePropertyGroup({
theme,
textProperty,
backgroundProperty,
- opacityProperty
+ opacityProperty,
+ toggable,
}) {
let { properties, applyPageColors } = theme;
let applyPageColorsChecked = applyPageColors.includes(backgroundProperty)
- && applyPageColors.includes(textProperty);
+ && (!textProperty || applyPageColors.includes(textProperty));
+ let useNative = !(properties.colors[backgroundProperty] &&
+ (!textProperty || properties.colors[textProperty])) &&
+ toggable;
return createElement("div", {className: "card"},
createElement("h2", {}, sectionName),
- ThemeProperty({
- themeName: theme.name,
- label: "Background",
- property: backgroundProperty,
- defaultValue: properties.colors[backgroundProperty]
- }),
- ThemeProperty({
- themeName: theme.name,
- label: "Text",
- property: textProperty,
- defaultValue: properties.colors[textProperty]
- }),
- opacityProperty && Slider({
- themeName: theme.name,
- label: "Opacity",
- defaultValue: theme.opacities[opacityProperty],
- onChange({target}) {
- app.actions.setThemeOpacityProperty(theme.name, opacityProperty, target.value);
+ toggable && Checkbox({
+ defaultChecked: useNative,
+ label: "Use native default",
+ onChange: ({target}) => {
+ app.actions.setNativeTheme(
+ theme.name, backgroundProperty, textProperty, target.checked);
}
}),
- Checkbox({
- defaultChecked: applyPageColorsChecked,
- label: "Apply page colors",
- onChange(e) {
- app.actions.setThemeApplyPageColors(
- theme.name, backgroundProperty, textProperty, e.target.checked);
- }
- })
+ createElement("div", { className: useNative && "disabled" },
+ ThemeProperty({
+ themeName: theme.name,
+ label: "Background",
+ property: backgroundProperty,
+ defaultValue: properties.colors[backgroundProperty]
+ }),
+ textProperty && ThemeProperty({
+ themeName: theme.name,
+ label: "Text",
+ property: textProperty,
+ defaultValue: properties.colors[textProperty]
+ }),
+ opacityProperty && Slider({
+ themeName: theme.name,
+ label: "Opacity",
+ defaultValue: theme.opacities[opacityProperty],
+ onChange({target}) {
+ app.actions.setThemeOpacityProperty(theme.name, opacityProperty, target.value);
+ }
+ }),
+ Checkbox({
+ defaultChecked: applyPageColorsChecked,
+ label: "Apply page colors",
+ onChange(e) {
+ app.actions.setThemeApplyPageColors(
+ theme.name, backgroundProperty, textProperty, e.target.checked);
+ }
+ })
+ )
);
}
function ThemeEditor(theme, deleteButton) {
- return createElement("div", {className: "theme-editor"},
- ThemePropertyGroup({
- sectionName: "Frame",
- theme,
- backgroundProperty: "accentcolor",
- textProperty: "textcolor",
- }),
- ThemePropertyGroup({
- sectionName: "Toolbar",
- theme,
- backgroundProperty: "toolbar",
- textProperty: "toolbar_text",
- opacityProperty: "toolbar"
- }),
- ThemePropertyGroup({
- sectionName: "Toolbar Fields",
- theme,
- backgroundProperty: "toolbar_field",
- textProperty: "toolbar_field_text",
- opacityProperty: "toolbar_field"
+
+ return createElement("div", {className: "theme-editor-container"},
+ createElement("input", {
+ type: "checkbox",
+ className: "theme-editor-expander",
+ id: "theme-editor-expander"
}),
- deleteButton && createElement("div", {className: "card"},
- createElement("h2", {}, "Danger!"),
- createElement("p", {className: "disabled"}, "This can't be undone!"),
- createElement("button", {
- className: "red",
- onClick: () => app.actions.deleteTheme(theme.name)
- }, "Delete theme")
+ createElement("label", { htmlFor: "theme-editor-expander"}, "Advanced options"),
+ createElement("div", {className: "theme-editor"},
+ ThemePropertyGroup({
+ sectionName: "Frame",
+ theme,
+ backgroundProperty: "accentcolor",
+ textProperty: "textcolor",
+ }),
+ ThemePropertyGroup({
+ sectionName: "Toolbar",
+ theme,
+ backgroundProperty: "toolbar",
+ textProperty: "toolbar_text",
+ opacityProperty: "toolbar"
+ }),
+ ThemePropertyGroup({
+ sectionName: "Toolbar Fields",
+ theme,
+ backgroundProperty: "toolbar_field",
+ textProperty: "toolbar_field_text",
+ opacityProperty: "toolbar_field"
+ }),
+ ThemePropertyGroup({
+ sectionName: "Toolbar field borders",
+ theme,
+ backgroundProperty: "toolbar_field_border",
+ opacityProperty: "toolbar_field_border",
+ toggable: true,
+ }),
+ ThemePropertyGroup({
+ sectionName: "Selected tab",
+ theme,
+ backgroundProperty: "tab_selected",
+ textProperty: "tab_text",
+ toggable: true,
+ }),
+ ThemePropertyGroup({
+ sectionName: "Selected tab line",
+ theme,
+ backgroundProperty: "tab_line",
+ toggable: true,
+ }),
+ ThemePropertyGroup({
+ sectionName: "Popups",
+ theme,
+ backgroundProperty: "popup",
+ textProperty: "popup_text",
+ toggable: true,
+ }),
+ ThemePropertyGroup({
+ sectionName: "Popup Highlight",
+ theme,
+ backgroundProperty: "popup_highlight",
+ textProperty: "popup_highlight_text",
+ toggable: true,
+ }),
+ ThemePropertyGroup({
+ sectionName: "Toolbar top separator",
+ theme,
+ backgroundProperty: "toolbar_top_separator",
+ opacityProperty: "toolbar_top_separator",
+ toggable: true,
+ }),
+ ThemePropertyGroup({
+ sectionName: "Toolbar bottom separator",
+ theme,
+ backgroundProperty: "toolbar_bottom_separator",
+ opacityProperty: "toolbar_bottom_separator",
+ toggable: true,
+ }),
+ ThemePropertyGroup({
+ sectionName: "Toolbar field separator",
+ theme,
+ backgroundProperty: "toolbar_field_separator",
+ opacityProperty: "toolbar_field_separator",
+ toggable: true,
+ }),
+ ThemePropertyGroup({
+ sectionName: "Toolbar vertical separator",
+ theme,
+ backgroundProperty: "toolbar_vertical_separator",
+ opacityProperty: "toolbar_vertical_separator",
+ toggable: true,
+ }),
+ deleteButton && createElement("div", {className: "card"},
+ createElement("h2", {}, "Danger!"),
+ createElement("p", {className: "disabled"}, "This can't be undone!"),
+ createElement("button", {
+ className: "red",
+ onClick: () => app.actions.deleteTheme(theme.name)
+ }, "Delete theme")
+ )
)
- );
+ )
}
diff --git a/options/images/expand.svg b/options/images/expand.svg
new file mode 100644
index 0000000..26f72ec
--- /dev/null
+++ b/options/images/expand.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/options/images/retract.svg b/options/images/retract.svg
new file mode 100644
index 0000000..48a80b8
--- /dev/null
+++ b/options/images/retract.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/options/options.css b/options/options.css
index d2b82fe..a20820b 100644
--- a/options/options.css
+++ b/options/options.css
@@ -1,5 +1,3 @@
-@import url(https://fonts.googleapis.com/css?family=Fira+Sans);
-
/**** General styles ****/
body {
@@ -278,10 +276,45 @@ input[type=color]:focus,
}
/**** Editor ****/
+.theme-editor-container {
+ position: relative;
+ padding-bottom: 3em;
+}
+.theme-editor-expander {
+ display: none;
+}
+.theme-editor-expander + label {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+ cursor: pointer;
+ background: white;
+}
+.theme-editor-expander + label::before {
+ content: "";
+ display: inline-block;
+ vertical-align: middle;
+ width: 1em;
+ height: 1em;
+ background-image: url(images/expand.svg);
+ background-size: cover;
+ margin-right: 1em;
+}
+.theme-editor-expander:checked + label::before {
+ background-image: url(images/retract.svg);
+}
.theme-editor {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
+ transition: max-height 0.2s;
+ max-height: 1600px;
+ overflow: hidden;
+}
+.theme-editor-expander:not(:checked) ~ .theme-editor {
+ max-height: 520px;
+ mask-image: linear-gradient(to top, transparent, black 2em);
}
button.addButton {
border: none;
@@ -329,3 +362,6 @@ button.addButton::before {
content: "";
background-image: url(images/github.png);
}
+
+/* font import */
+@import url(https://fonts.googleapis.com/css?family=Fira+Sans);
diff --git a/options/options.js b/options/options.js
index af8a591..ce8e2fd 100644
--- a/options/options.js
+++ b/options/options.js
@@ -88,15 +88,34 @@ async function init() {
themes[theme].opacities[prop] = value;
Settings.setThemes(themes);
},
+ setNativeTheme(theme, prop1, prop2, enabled) {
+ let {themes} = this.state.settings;
+ if (enabled) {
+ delete themes[theme].properties.colors[prop1];
+ if (prop2) {
+ delete themes[theme].properties.colors[prop2];
+ }
+ } else {
+ themes[theme].properties.colors[prop1] = "#ffffff";
+ if (prop2) {
+ themes[theme].properties.colors[prop2] = "#000000";
+ }
+ }
+ Settings.setThemes(themes);
+ },
setThemeApplyPageColors(theme, prop1, prop2, value) {
let {themes} = this.state.settings;
let set = new Set(themes[theme].applyPageColors);
if (value) {
set.add(prop1);
- set.add(prop2);
+ if (prop2) {
+ set.add(prop2);
+ }
} else {
set.delete(prop1);
- set.delete(prop2);
+ if (prop2) {
+ set.delete(prop2);
+ }
}
themes[theme].applyPageColors = [...set];
Settings.setThemes(themes);
@@ -109,7 +128,7 @@ async function init() {
this.state.settings.whiteBackgroundFavicons = value;
Settings.setWhiteBackgroundFavicons(value);
},
- async setColorSource(value) {
+ setColorSource(value) {
this.state.settings.colorSource = value;
Settings.setColorSource(value);
},