Fix #79, #38 - Add advanced theme editor

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);
  }
  };
 

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,
  };

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")
+ )
  )
- );
+ )
 }

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);

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);
  },