[WIP] Implement Custom Command

src/options/CustomCommands/config.json

@@ -0,0 +1,10 @@
+{
+ "name": "Custom Commands",
+ "options": [
+ {
+ "type": "customcommands",
+ "key": "customCommands",
+ "default": []
+ }
+ ]
+}

src/options/CustomCommands/default.json

@@ -0,0 +1,11 @@
+{
+ "name": "Custom Commands",
+ "profiles": [
+ {
+ "name": "default",
+ "options": {
+ "customCommands": []
+ }
+ }
+ ]
+}

src/options/CustomCommands/index.js

@@ -0,0 +1,9 @@
+import { getAttributes } from 'lib/util'
+
+export default (options, config) => {
+ console.error('CustomCommand/index.js called', options, config)
+ const backgroundOptions = {}
+ const clientOptions = {}
+ const errors = {}
+ return { backgroundOptions, clientOptions, errors }
+}

src/pages/options/Content/OptionsCard/OptionsList/OptionItem/OptionWidgets/CustomCommands/index.js

@@ -0,0 +1,45 @@
+import { Component, h } from 'preact'
+import TextArea from '../TextArea'
+
+const DEFAULT = {
+ source: 'document.body.style.backgroundColor = "blue"'
+}
+
+class CustomCommand extends Component {
+ render ({ command, onChange }) {
+ return (
+ <li>
+ <p>This is a command</p>
+ <TextArea
+ label='Source'
+ value={command.source}
+ onChange={s => onChange({ source: s, ...command })}
+ />
+ </li>
+ )
+ }
+}
+
+export default class CustomCommands extends Component {
+ render ({ key, value, onChange, ...rest }) {
+ console.log('CustomCommands', key, value, rest)
+ return (
+ <li>
+ <ul>
+ {value &&
+ value.map((cmd, i, cmds) => {
+ let cmdChange = cmd => {
+ let updated = cmds.slice()
+ updated[i] = cmd
+ onChange(updated)
+ }
+ return <CustomCommand command={cmd} onChange={cmdChange} />
+ })}
+ </ul>
+ <button onClick={e => onChange([...value, DEFAULT])}>
+ New custom command
+ </button>
+ </li>
+ )
+ }
+}

src/pages/options/Content/OptionsCard/OptionsList/OptionItem/OptionWidgets/index.js

@@ -7,6 +7,7 @@ import ToggleButton from './ToggleButton'
 import Switch from './Switch'
 import Checkbox from './Checkbox'
 import Color from './Color'
+import CustomCommands from './CustomCommands'
 import Text from './Text'
 import Number from './Number'
 import TextArea from './TextArea'
@@ -34,6 +35,8 @@ function optionWidgetByType (type) {
  return Switch
  case 'color':
  return Color
+ case 'customcommands':
+ return CustomCommands
  case 'text':
  return Text
  case 'number':

src/storage/procedures.js

@@ -55,9 +55,11 @@ export async function storageUpdateProcedure (previousVersion) {
  await storageSet({ ready: true })
  } catch (e) {
  console.error(
- 'FATAL ERROR: UPDATE FAILED. DELETE THEN REINSTALL THE EXTENSION.',
+ 'FATAL ERROR: UPDATE FAILED. WIPING STORAGE AND REINITIALIZING.',
  e
  )
+ await storageClear()
+ await storageInstallProcedure()
  }
 }
 
@@ -228,7 +230,7 @@ async function deleteConfig () {
 /**
  * Accounts for the case where a built-in profile introduced in an update conflicts with
  * a custom profile already installed. Renames the custom profile, active profile, and action
- * if a conflic is detected.
+ * if a conflict is detected.
  */
 async function renameCustomProfilesAndOptions () {
  const {

src/storage/transform.js

@@ -1,10 +1,12 @@
 import transformGeneral from 'options/General'
 import transformKeybindings from 'options/Keybindings'
 import transformAppearance from 'options/Appearance'
+import transformCustomCommands from 'options/CustomCommands'
 const transforms = {
  General: transformGeneral,
  Keybindings: transformKeybindings,
- Appearance: transformAppearance
+ Appearance: transformAppearance,
+ CustomCommands: transformCustomCommands
 }
 export const categories = Object.keys(transforms)