From 36ba30de1d0d97209db6df4083beed3993e61195 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 4 May 2020 14:56:25 +0900 Subject: Add colorscheme property --- src/shared/settings/Properties.ts | 24 ++++++++++++++++++++- src/shared/settings/Settings.ts | 3 ++- src/shared/settings/schema.json | 4 ++++ src/shared/settings/validate.js | 45 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 74 insertions(+), 2 deletions(-) (limited to 'src/shared/settings') diff --git a/src/shared/settings/Properties.ts b/src/shared/settings/Properties.ts index cf10d61..38f1d3b 100644 --- a/src/shared/settings/Properties.ts +++ b/src/shared/settings/Properties.ts @@ -1,16 +1,24 @@ +enum ColorScheme { + System = "system", + Light = "light", + Dark = "dark", +} + export type PropertiesJSON = { hintchars?: string; smoothscroll?: boolean; complete?: string; + colorscheme?: ColorScheme; }; export type PropertyTypes = { hintchars: string; smoothscroll: string; complete: string; + colorscheme: string; }; -type PropertyName = "hintchars" | "smoothscroll" | "complete"; +type PropertyName = "hintchars" | "smoothscroll" | "complete" | "colorscheme"; type PropertyDef = { name: PropertyName; @@ -38,12 +46,19 @@ const defs: PropertyDef[] = [ defaultValue: "sbh", type: "string", }, + { + name: "colorscheme", + description: "color scheme of the console", + defaultValue: ColorScheme.System, + type: "string", + }, ]; const defaultValues = { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }; export default class Properties { @@ -53,18 +68,23 @@ export default class Properties { public complete: string; + public colorscheme: ColorScheme; + constructor({ hintchars, smoothscroll, complete, + colorscheme, }: { hintchars?: string; smoothscroll?: boolean; complete?: string; + colorscheme?: ColorScheme; } = {}) { this.hintchars = hintchars || defaultValues.hintchars; this.smoothscroll = smoothscroll || defaultValues.smoothscroll; this.complete = complete || defaultValues.complete; + this.colorscheme = colorscheme || defaultValues.colorscheme; } static fromJSON(json: PropertiesJSON): Properties { @@ -76,6 +96,7 @@ export default class Properties { hintchars: "string", smoothscroll: "boolean", complete: "string", + colorscheme: "string", }; } @@ -92,6 +113,7 @@ export default class Properties { hintchars: this.hintchars, smoothscroll: this.smoothscroll, complete: this.complete, + colorscheme: this.colorscheme, }; } } diff --git a/src/shared/settings/Settings.ts b/src/shared/settings/Settings.ts index 1bb9249..6f178ea 100644 --- a/src/shared/settings/Settings.ts +++ b/src/shared/settings/Settings.ts @@ -156,7 +156,8 @@ export const DefaultSettingJSONText = `{ "properties": { "hintchars": "abcdefghijklmnopqrstuvwxyz", "smoothscroll": false, - "complete": "sbh" + "complete": "sbh", + "colorscheme": "system" }, "blacklist": [ ] diff --git a/src/shared/settings/schema.json b/src/shared/settings/schema.json index 31d47f1..be0f2ec 100644 --- a/src/shared/settings/schema.json +++ b/src/shared/settings/schema.json @@ -48,6 +48,10 @@ }, "complete": { "type": "string" + }, + "colorscheme": { + "type": "string", + "enum": ["system", "light", "dark"] } } }, diff --git a/src/shared/settings/validate.js b/src/shared/settings/validate.js index 236488d..30f7888 100644 --- a/src/shared/settings/validate.js +++ b/src/shared/settings/validate.js @@ -1,4 +1,5 @@ 'use strict'; +var equal = require('ajv/lib/compile/equal'); var validate = (function() { var pattern0 = new RegExp('.*'); var refVal = []; @@ -273,6 +274,46 @@ var validate = (function() { } var valid2 = errors === errs_2; } + if (valid2) { + var data2 = data1.colorscheme; + if (data2 === undefined) { + valid2 = true; + } else { + var errs_2 = errors; + if (typeof data2 !== "string") { + validate.errors = [{ + keyword: 'type', + dataPath: (dataPath || '') + '.properties.colorscheme', + schemaPath: '#/properties/properties/properties/colorscheme/type', + params: { + type: 'string' + }, + message: 'should be string' + }]; + return false; + } + var schema2 = validate.schema.properties.properties.properties.colorscheme.enum; + var valid2; + valid2 = false; + for (var i2 = 0; i2 < schema2.length; i2++) + if (equal(data2, schema2[i2])) { + valid2 = true; + break; + } if (!valid2) { + validate.errors = [{ + keyword: 'enum', + dataPath: (dataPath || '') + '.properties.colorscheme', + schemaPath: '#/properties/properties/properties/colorscheme/enum', + params: { + allowedValues: schema2 + }, + message: 'should be equal to one of the allowed values' + }]; + return false; + } + var valid2 = errors === errs_2; + } + } } } } else { @@ -535,6 +576,10 @@ validate.schema = { }, "complete": { "type": "string" + }, + "colorscheme": { + "type": "string", + "enum": ["system", "light", "dark"] } } }, -- cgit v1.2.3 From a6b8c8a1c2fe955343a420c814978822803d6933 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 4 May 2020 15:10:57 +0900 Subject: Remove unused description in background script --- src/shared/settings/Properties.ts | 5 ----- 1 file changed, 5 deletions(-) (limited to 'src/shared/settings') diff --git a/src/shared/settings/Properties.ts b/src/shared/settings/Properties.ts index 38f1d3b..529ecfc 100644 --- a/src/shared/settings/Properties.ts +++ b/src/shared/settings/Properties.ts @@ -22,7 +22,6 @@ type PropertyName = "hintchars" | "smoothscroll" | "complete" | "colorscheme"; type PropertyDef = { name: PropertyName; - description: string; defaultValue: string | number | boolean; type: "string" | "number" | "boolean"; }; @@ -30,25 +29,21 @@ type PropertyDef = { const defs: PropertyDef[] = [ { name: "hintchars", - description: "hint characters on follow mode", defaultValue: "abcdefghijklmnopqrstuvwxyz", type: "string", }, { name: "smoothscroll", - description: "smooth scroll", defaultValue: false, type: "boolean", }, { name: "complete", - description: "which are completed at the open page", defaultValue: "sbh", type: "string", }, { name: "colorscheme", - description: "color scheme of the console", defaultValue: ColorScheme.System, type: "string", }, -- cgit v1.2.3 From 65fedca9dfc4b85acce85b9eb3272cfc76d112a7 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 4 May 2020 16:18:12 +0900 Subject: Allow to change color scheme by "colorscheme" property --- src/console/actions/console.ts | 11 +++++++++++ src/console/actions/index.ts | 10 +++++++++- src/console/clients/SettingClient.ts | 13 +++++++++++++ src/console/components/Console.tsx | 23 ++++++++++++++++++++--- src/console/index.html | 2 +- src/console/reducers/index.ts | 8 ++++++++ src/shared/ColorScheme.ts | 7 +++++++ src/shared/settings/Properties.ts | 6 +----- test/shared/SettingData.test.ts | 13 +++++++++++-- test/shared/settings/Properties.test.ts | 4 ++++ test/shared/settings/Settings.test.ts | 1 + 11 files changed, 86 insertions(+), 12 deletions(-) create mode 100644 src/console/clients/SettingClient.ts create mode 100644 src/shared/ColorScheme.ts (limited to 'src/shared/settings') diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts index 6282791..16d33b3 100644 --- a/src/console/actions/console.ts +++ b/src/console/actions/console.ts @@ -2,11 +2,13 @@ import * as messages from "../../shared/messages"; import * as actions from "./index"; import { Command } from "../../shared/Command"; import CompletionClient from "../clients/CompletionClient"; +import SettingClient from "../clients/SettingClient"; import CompletionType from "../../shared/CompletionType"; import Completions from "../Completions"; import TabFlag from "../../shared/TabFlag"; const completionClient = new CompletionClient(); +const settingClient = new SettingClient(); const commandDocs = { [Command.Set]: "Set a value of the property", @@ -272,6 +274,14 @@ const completionPrev = (): actions.CompletionPrevAction => { }; }; +const setColorScheme = async (): Promise => { + const scheme = await settingClient.getColorScheme(); + return { + type: actions.CONSOLE_SET_COLORSCHEME, + colorscheme: scheme, + }; +}; + export { hide, showCommand, @@ -288,4 +298,5 @@ export { getPropertyCompletions, completionNext, completionPrev, + setColorScheme, }; diff --git a/src/console/actions/index.ts b/src/console/actions/index.ts index 308a093..6c1c759 100644 --- a/src/console/actions/index.ts +++ b/src/console/actions/index.ts @@ -1,5 +1,6 @@ import Completions from "../Completions"; import CompletionType from "../../shared/CompletionType"; +import ColorScheme from "../../shared/ColorScheme"; export const CONSOLE_HIDE = "console.hide"; export const CONSOLE_SHOW_COMMAND = "console.show.command"; @@ -11,6 +12,7 @@ export const CONSOLE_SET_COMPLETIONS = "console.set.completions"; export const CONSOLE_COMPLETION_NEXT = "console.completion.next"; export const CONSOLE_COMPLETION_PREV = "console.completion.prev"; export const CONSOLE_SHOW_FIND = "console.show.find"; +export const CONSOLE_SET_COLORSCHEME = "console.set.colorscheme"; export interface HideAction { type: typeof CONSOLE_HIDE; @@ -59,6 +61,11 @@ export interface CompletionPrevAction { type: typeof CONSOLE_COMPLETION_PREV; } +export interface SetColorSchemeAction { + type: typeof CONSOLE_SET_COLORSCHEME; + colorscheme: ColorScheme; +} + export type ConsoleAction = | HideAction | ShowCommand @@ -69,4 +76,5 @@ export type ConsoleAction = | SetConsoleTextAction | SetCompletionsAction | CompletionNextAction - | CompletionPrevAction; + | CompletionPrevAction + | SetColorSchemeAction; diff --git a/src/console/clients/SettingClient.ts b/src/console/clients/SettingClient.ts new file mode 100644 index 0000000..f75517a --- /dev/null +++ b/src/console/clients/SettingClient.ts @@ -0,0 +1,13 @@ +import Settings from "../../shared/settings/Settings"; +import * as messages from "../../shared/messages"; +import ColorScheme from "../../shared/ColorScheme"; + +export default class SettingClient { + async getColorScheme(): Promise { + const json = await browser.runtime.sendMessage({ + type: messages.SETTINGS_QUERY, + }); + const settings = Settings.fromJSON(json); + return settings.properties.colorscheme; + } +} diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx index d74040d..a0e22e4 100644 --- a/src/console/components/Console.tsx +++ b/src/console/components/Console.tsx @@ -10,6 +10,7 @@ import CommandLineParser, { InputPhase, } from "../commandline/CommandLineParser"; import { Command } from "../../shared/Command"; +import ColorScheme from "../../shared/ColorScheme"; const COMPLETION_MAX_ITEMS = 33; @@ -126,11 +127,23 @@ class Console extends React.Component { } render() { + let theme = this.props.colorscheme; + if (this.props.colorscheme === ColorScheme.System) { + if ( + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches + ) { + theme = ColorScheme.Dark; + } else { + theme = ColorScheme.Light; + } + } + switch (this.props.mode) { case "command": case "find": return ( -
+
{ case "info": case "error": return ( - {this.props.messageText} +
+ {this.props.messageText} +
); default: return null; } } - focus() { + async focus() { + this.props.dispatch(consoleActions.setColorScheme()); + window.focus(); if (this.input.current) { this.input.current.focus(); diff --git a/src/console/index.html b/src/console/index.html index 3704071..73e1e23 100644 --- a/src/console/index.html +++ b/src/console/index.html @@ -5,7 +5,7 @@ VimVixen console - +
diff --git a/src/console/reducers/index.ts b/src/console/reducers/index.ts index f2ffed7..752dfd9 100644 --- a/src/console/reducers/index.ts +++ b/src/console/reducers/index.ts @@ -1,6 +1,7 @@ import * as actions from "../actions"; import Completions from "../Completions"; import CompletionType from "../../shared/CompletionType"; +import ColorScheme from "../../shared/ColorScheme"; export interface State { mode: string; @@ -11,6 +12,7 @@ export interface State { completions: Completions; select: number; viewIndex: number; + colorscheme: ColorScheme; } const defaultState = { @@ -22,6 +24,7 @@ const defaultState = { completions: [], select: -1, viewIndex: 0, + colorscheme: ColorScheme.System, }; const nextSelection = (state: State): number => { @@ -122,6 +125,11 @@ export default function reducer( ), }; } + case actions.CONSOLE_SET_COLORSCHEME: + return { + ...state, + colorscheme: action.colorscheme, + }; default: return state; } diff --git a/src/shared/ColorScheme.ts b/src/shared/ColorScheme.ts new file mode 100644 index 0000000..a7b874e --- /dev/null +++ b/src/shared/ColorScheme.ts @@ -0,0 +1,7 @@ +enum ColorScheme { + System = "system", + Light = "light", + Dark = "dark", +} + +export default ColorScheme; diff --git a/src/shared/settings/Properties.ts b/src/shared/settings/Properties.ts index 529ecfc..7540c8a 100644 --- a/src/shared/settings/Properties.ts +++ b/src/shared/settings/Properties.ts @@ -1,8 +1,4 @@ -enum ColorScheme { - System = "system", - Light = "light", - Dark = "dark", -} +import ColorScheme from "../ColorScheme"; export type PropertiesJSON = { hintchars?: string; diff --git a/test/shared/SettingData.test.ts b/test/shared/SettingData.test.ts index 283daa5..3cfd5c9 100644 --- a/test/shared/SettingData.test.ts +++ b/test/shared/SettingData.test.ts @@ -6,6 +6,7 @@ import SettingData, { import Settings from "../../src/shared/settings/Settings"; import { expect } from "chai"; import Keymaps from "../../src/shared/settings/Keymaps"; +import ColorScheme from "../../src/shared/ColorScheme"; describe("shared/SettingData", () => { describe("FormKeymaps", () => { @@ -54,7 +55,8 @@ describe("shared/SettingData", () => { "properties": { "hintchars": "abcdefghijklmnopqrstuvwxyz", "smoothscroll": false, - "complete": "sbh" + "complete": "sbh", + "colorscheme": "system" }, "blacklist": [] }`; @@ -104,6 +106,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }, blacklist: [], }; @@ -124,6 +127,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }, blacklist: [], }); @@ -147,6 +151,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }, blacklist: [], }); @@ -165,6 +170,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }, blacklist: [], }); @@ -188,7 +194,8 @@ describe("shared/SettingData", () => { "properties": { "hintchars": "abcdefghijklmnopqrstuvwxyz", "smoothscroll": false, - "complete": "sbh" + "complete": "sbh", + "colorscheme": "system" }, "blacklist": [] }`, @@ -212,6 +219,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }, blacklist: [], }, @@ -229,6 +237,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }, blacklist: [], }); diff --git a/test/shared/settings/Properties.test.ts b/test/shared/settings/Properties.test.ts index 6007e84..647cb1c 100644 --- a/test/shared/settings/Properties.test.ts +++ b/test/shared/settings/Properties.test.ts @@ -1,5 +1,6 @@ import Properties from "../../../src/shared/settings/Properties"; import { expect } from "chai"; +import ColorScheme from "../../../src/shared/ColorScheme"; describe("Properties", () => { describe("#propertiesValueOf", () => { @@ -9,6 +10,7 @@ describe("Properties", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }); }); @@ -17,12 +19,14 @@ describe("Properties", () => { hintchars: "abcdefgh", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }); expect(props).to.deep.equal({ hintchars: "abcdefgh", smoothscroll: false, complete: "sbh", + colorscheme: "system", }); }); }); diff --git a/test/shared/settings/Settings.test.ts b/test/shared/settings/Settings.test.ts index 4ecfe77..951c9cd 100644 --- a/test/shared/settings/Settings.test.ts +++ b/test/shared/settings/Settings.test.ts @@ -33,6 +33,7 @@ describe("Settings", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }, blacklist: [], }); -- cgit v1.2.3