From 7198fa17ea2e4b7dede0b644358696934596ca15 Mon Sep 17 00:00:00 2001
From: Kevin Cox <kevincox@google.com>
Date: Mon, 16 Oct 2017 21:05:26 +0100
Subject: [PATCH 1/4] Implement minimal custom command.

It's mostly UI and some wiring which is left.
---
 src/modes/command/client/commands/misc.js | 22 ++++++++++++++++++++++
 src/modes/command/client/trie.js          |  9 ++++++++-
 src/options/Keybindings/config.json       | 11 +++++++++++
 src/options/Keybindings/default.json      | 12 ++++++++----
 4 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/src/modes/command/client/commands/misc.js b/src/modes/command/client/commands/misc.js
index 20c9567..691291f 100644
--- a/src/modes/command/client/commands/misc.js
+++ b/src/modes/command/client/commands/misc.js
@@ -28,3 +28,25 @@ export function passAllKeys (event) {
   event.passKeyType = 'all'
   return 'Pass'
 }
+
+// TODO: Get from options.
+let customCommands = {
+  toHttps: {
+    preventDefault: true, // The default.
+    code:
+      'document.location = document.location.href.replace(/^http:/, "https:")'
+  }
+}
+
+// TODO reduce amount of visible internal state.
+function trampoline (_src, event) {
+  eval(_src)
+}
+
+export function customCommand (id, event) {
+  let impl = customCommands[id]
+  console.log('Custom command', id, impl)
+
+  if (impl.preventDefault) event.preventDefault()
+  return trampoline(impl.code, event)
+}
diff --git a/src/modes/command/client/trie.js b/src/modes/command/client/trie.js
index 80d342a..72bc8ea 100644
--- a/src/modes/command/client/trie.js
+++ b/src/modes/command/client/trie.js
@@ -25,6 +25,13 @@ export function advanceInputTrie (event) {
     default:
       event.preventDefault()
       event.stopImmediatePropagation()
-      return commands[command](event) || 'Same'
+      var cmd
+      if (command.startsWith('customCommand_')) {
+        let id = command.slice(14) // Drop prefix.
+        cmd = commands.customCommand.bind(null, id)
+      } else {
+        cmd = commands[command]
+      }
+      return cmd(event) || 'Same'
   }
 }
diff --git a/src/options/Keybindings/config.json b/src/options/Keybindings/config.json
index 42e7b8f..22b391d 100644
--- a/src/options/Keybindings/config.json
+++ b/src/options/Keybindings/config.json
@@ -485,6 +485,17 @@
       "label": "Activate Clipboard in Incognito Window",
       "key": "clipboardIncognitoWindow",
       "default": []
+    },
+    {
+      "type": "header",
+      "label": "Custom"
+    },
+    {
+      "comment": "TODO: generate dynamically",
+      "type": "keybinding",
+      "label": "Custom Command",
+      "key": "customCommand_toHttps",
+      "default": []
     }
   ]
 }
diff --git a/src/options/Keybindings/default.json b/src/options/Keybindings/default.json
index f50e3e6..4329cb7 100644
--- a/src/options/Keybindings/default.json
+++ b/src/options/Keybindings/default.json
@@ -198,7 +198,8 @@
             { "code": "KeyY", "key": "y" },
             { "code": "KeyN", "key": "N", "shiftKey": true }
           ]
-        ]
+        ],
+        "customCommand_toHttps": []
       }
     },
     {
@@ -373,7 +374,8 @@
             { "code": "KeyY", "key": "y" },
             { "code": "KeyN", "key": "N", "shiftKey": true }
           ]
-        ]
+        ],
+        "customCommand_toHttps": []
       }
     },
     {
@@ -505,7 +507,8 @@
             { "code": "KeyY", "key": "y" },
             { "code": "KeyN", "key": "N", "shiftKey": true }
           ]
-        ]
+        ],
+        "customCommand_toHttps": []
       }
     },
     {
@@ -634,7 +637,8 @@
           [{ "code": "KeyP", "key": "P", "shiftKey": true }]
         ],
         "clipboardNewWindow": [],
-        "clipboardIncognitoWindow": []
+        "clipboardIncognitoWindow": [],
+        "customCommand_toHttps": []
       }
     }
   ]

From 5a3fd1330f3c57981e9cc64037898a2624b7a15c Mon Sep 17 00:00:00 2001
From: Kevin Cox <kevincox@google.com>
Date: Mon, 16 Oct 2017 21:28:58 +0100
Subject: [PATCH 2/4] Eval user code in global scope.

This prevents the user from seeing our internals, allowing us to provide
a more stable API.
---
 src/modes/command/client/commands/misc.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/modes/command/client/commands/misc.js b/src/modes/command/client/commands/misc.js
index 691291f..aceb8a1 100644
--- a/src/modes/command/client/commands/misc.js
+++ b/src/modes/command/client/commands/misc.js
@@ -38,15 +38,16 @@ let customCommands = {
   }
 }
 
-// TODO reduce amount of visible internal state.
-function trampoline (_src, event) {
-  eval(_src)
-}
-
 export function customCommand (id, event) {
   let impl = customCommands[id]
   console.log('Custom command', id, impl)
 
   if (impl.preventDefault) event.preventDefault()
-  return trampoline(impl.code, event)
+  let global_eval = eval; // This causes the eval to happen in the global scope.
+  let func = global_eval(`
+    (event) => {
+      ${impl.code}
+    }
+  `);
+  return func(event);
 }

From 56db5ba61241542cf18ee174e73edfc9ab5ed882 Mon Sep 17 00:00:00 2001
From: Kevin Cox <kevincox@kevincox.ca>
Date: Mon, 23 Oct 2017 22:25:55 +0100
Subject: [PATCH 3/4] Start work on UI.

It's not wired up at all but it's a start. It is missing keybindings
which look like they will take some work.
---
 src/options/CustomCommands/config.json        | 10 +++++
 src/options/CustomCommands/default.json       | 11 +++++
 src/options/CustomCommands/index.js           |  9 ++++
 .../OptionWidgets/CustomCommands/index.js     | 45 +++++++++++++++++++
 .../OptionItem/OptionWidgets/index.js         |  3 ++
 src/storage/procedures.js                     |  6 ++-
 src/storage/transform.js                      |  4 +-
 7 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 src/options/CustomCommands/config.json
 create mode 100644 src/options/CustomCommands/default.json
 create mode 100644 src/options/CustomCommands/index.js
 create mode 100644 src/pages/options/Content/OptionsCard/OptionsList/OptionItem/OptionWidgets/CustomCommands/index.js

diff --git a/src/options/CustomCommands/config.json b/src/options/CustomCommands/config.json
new file mode 100644
index 0000000..d4f232e
--- /dev/null
+++ b/src/options/CustomCommands/config.json
@@ -0,0 +1,10 @@
+{
+  "name": "Custom Commands",
+  "options": [
+    {
+      "type": "customcommands",
+      "key": "customCommands",
+      "default": []
+    }
+  ]
+}
diff --git a/src/options/CustomCommands/default.json b/src/options/CustomCommands/default.json
new file mode 100644
index 0000000..8aca381
--- /dev/null
+++ b/src/options/CustomCommands/default.json
@@ -0,0 +1,11 @@
+{
+  "name": "Custom Commands",
+  "profiles": [
+    {
+      "name": "default",
+      "options": {
+        "customCommands": []
+      }
+    }
+  ]
+}
diff --git a/src/options/CustomCommands/index.js b/src/options/CustomCommands/index.js
new file mode 100644
index 0000000..0f8d817
--- /dev/null
+++ b/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 }
+}
diff --git a/src/pages/options/Content/OptionsCard/OptionsList/OptionItem/OptionWidgets/CustomCommands/index.js b/src/pages/options/Content/OptionsCard/OptionsList/OptionItem/OptionWidgets/CustomCommands/index.js
new file mode 100644
index 0000000..7bddec8
--- /dev/null
+++ b/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>
+    )
+  }
+}
diff --git a/src/pages/options/Content/OptionsCard/OptionsList/OptionItem/OptionWidgets/index.js b/src/pages/options/Content/OptionsCard/OptionsList/OptionItem/OptionWidgets/index.js
index 28ab619..1b07454 100644
--- a/src/pages/options/Content/OptionsCard/OptionsList/OptionItem/OptionWidgets/index.js
+++ b/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':
diff --git a/src/storage/procedures.js b/src/storage/procedures.js
index b4456ef..31efffc 100644
--- a/src/storage/procedures.js
+++ b/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 {
diff --git a/src/storage/transform.js b/src/storage/transform.js
index ba1aadd..ff39812 100644
--- a/src/storage/transform.js
+++ b/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)
 

From 93a7cc562cceb16c0c2fd4ea159ef7732edfb18d Mon Sep 17 00:00:00 2001
From: Kevin Cox <kevincox@google.com>
Date: Tue, 24 Oct 2017 21:33:04 +0100
Subject: [PATCH 4/4] Finish POC implementation.

This is now feature complete, however there is a lot of cleanup to be
done.
---
 src/lib/trie.js                               |  7 ++-
 src/modes/command/client/commands/misc.js     | 17 ++-----
 src/modes/command/client/trie.js              | 10 +---
 src/options/CustomCommands/index.js           |  1 -
 src/options/Keybindings/config.json           |  7 ---
 src/options/Keybindings/default.json          | 12 ++---
 src/options/Keybindings/index.js              | 17 ++++---
 src/options/Keybindings/trie.js               | 24 ++++++----
 .../OptionWidgets/CustomCommands/index.js     | 47 ++++++++++++-------
 9 files changed, 68 insertions(+), 74 deletions(-)

diff --git a/src/lib/trie.js b/src/lib/trie.js
index 95b5ba8..962eb2e 100644
--- a/src/lib/trie.js
+++ b/src/lib/trie.js
@@ -39,16 +39,15 @@ export default class Trie {
    */
   advance = input => {
     const next = this.curNode[input]
-    switch (typeof next) {
-      case 'undefined':
+    if (typeof next == 'undefined') {
         this.curNode = this.root
         return this.root[input] === undefined
           ? Trie.INVALID
           : this.advance(input)
-      case 'object':
+    } else if (next._TrieNode === true) {
         this.curNode = next
         return Trie.INTERNAL
-      default:
+    } else {
         this.curNode = this.root
         return next
     }
diff --git a/src/modes/command/client/commands/misc.js b/src/modes/command/client/commands/misc.js
index aceb8a1..f332a5f 100644
--- a/src/modes/command/client/commands/misc.js
+++ b/src/modes/command/client/commands/misc.js
@@ -29,24 +29,13 @@ export function passAllKeys (event) {
   return 'Pass'
 }
 
-// TODO: Get from options.
-let customCommands = {
-  toHttps: {
-    preventDefault: true, // The default.
-    code:
-      'document.location = document.location.href.replace(/^http:/, "https:")'
-  }
-}
-
-export function customCommand (id, event) {
-  let impl = customCommands[id]
-  console.log('Custom command', id, impl)
+export function customCommand (event, data) {
+  console.log('Custom command', data)
 
-  if (impl.preventDefault) event.preventDefault()
   let global_eval = eval; // This causes the eval to happen in the global scope.
   let func = global_eval(`
     (event) => {
-      ${impl.code}
+      ${data.source}
     }
   `);
   return func(event);
diff --git a/src/modes/command/client/trie.js b/src/modes/command/client/trie.js
index 72bc8ea..4b23845 100644
--- a/src/modes/command/client/trie.js
+++ b/src/modes/command/client/trie.js
@@ -25,13 +25,7 @@ export function advanceInputTrie (event) {
     default:
       event.preventDefault()
       event.stopImmediatePropagation()
-      var cmd
-      if (command.startsWith('customCommand_')) {
-        let id = command.slice(14) // Drop prefix.
-        cmd = commands.customCommand.bind(null, id)
-      } else {
-        cmd = commands[command]
-      }
-      return cmd(event) || 'Same'
+      let implementation = commands[command.command]
+      return implementation(event, command) || 'Same'
   }
 }
diff --git a/src/options/CustomCommands/index.js b/src/options/CustomCommands/index.js
index 0f8d817..3c3a1db 100644
--- a/src/options/CustomCommands/index.js
+++ b/src/options/CustomCommands/index.js
@@ -1,7 +1,6 @@
 import { getAttributes } from 'lib/util'
 
 export default (options, config) => {
-  console.error('CustomCommand/index.js called', options, config)
   const backgroundOptions = {}
   const clientOptions = {}
   const errors = {}
diff --git a/src/options/Keybindings/config.json b/src/options/Keybindings/config.json
index 22b391d..f238b11 100644
--- a/src/options/Keybindings/config.json
+++ b/src/options/Keybindings/config.json
@@ -489,13 +489,6 @@
     {
       "type": "header",
       "label": "Custom"
-    },
-    {
-      "comment": "TODO: generate dynamically",
-      "type": "keybinding",
-      "label": "Custom Command",
-      "key": "customCommand_toHttps",
-      "default": []
     }
   ]
 }
diff --git a/src/options/Keybindings/default.json b/src/options/Keybindings/default.json
index 4329cb7..f50e3e6 100644
--- a/src/options/Keybindings/default.json
+++ b/src/options/Keybindings/default.json
@@ -198,8 +198,7 @@
             { "code": "KeyY", "key": "y" },
             { "code": "KeyN", "key": "N", "shiftKey": true }
           ]
-        ],
-        "customCommand_toHttps": []
+        ]
       }
     },
     {
@@ -374,8 +373,7 @@
             { "code": "KeyY", "key": "y" },
             { "code": "KeyN", "key": "N", "shiftKey": true }
           ]
-        ],
-        "customCommand_toHttps": []
+        ]
       }
     },
     {
@@ -507,8 +505,7 @@
             { "code": "KeyY", "key": "y" },
             { "code": "KeyN", "key": "N", "shiftKey": true }
           ]
-        ],
-        "customCommand_toHttps": []
+        ]
       }
     },
     {
@@ -637,8 +634,7 @@
           [{ "code": "KeyP", "key": "P", "shiftKey": true }]
         ],
         "clipboardNewWindow": [],
-        "clipboardIncognitoWindow": [],
-        "customCommand_toHttps": []
+        "clipboardIncognitoWindow": []
       }
     }
   ]
diff --git a/src/options/Keybindings/index.js b/src/options/Keybindings/index.js
index feec208..4555c00 100644
--- a/src/options/Keybindings/index.js
+++ b/src/options/Keybindings/index.js
@@ -30,16 +30,21 @@ export default (options, config) => {
 }
 
 function keybindingsPerMode (options, config) {
-  const keybindings = {}
+  const keybindings = { command: [], pass: [] }
   config.forEach(item => {
     if (item.type === 'keybinding') {
       const { mode = 'command', key } = item
-      if (keybindings[mode]) {
-        keybindings[mode][key] = options[key]
-      } else {
-        keybindings[mode] = { [key]: options[key] }
-      }
+      keybindings[mode].push({ bindings: options[key], command: key })
     }
   })
+  options.customCommands.forEach((item, i) => {
+    const { mode = 'command', source, bindings } = item
+    keybindings[mode].push({
+      bindings,
+      command: "customCommand",
+      source,
+      preventDefault: true,
+    })
+  })
   return keybindings
 }
diff --git a/src/options/Keybindings/trie.js b/src/options/Keybindings/trie.js
index a0cc259..fe72827 100644
--- a/src/options/Keybindings/trie.js
+++ b/src/options/Keybindings/trie.js
@@ -4,8 +4,8 @@ import { validKeyboardEvent, keyboardEventString } from 'lib/keys'
  * Given an object mapping commands to their key bindings,
  * returns the trie representation.
  */
-export function generateCommandTrie (commandMap) {
-  return JSONTrie(bindingsList(commandMap))
+export function generateCommandTrie (commandList) {
+  return JSONTrie(bindingsList(commandList))
 }
 
 /**
@@ -13,13 +13,13 @@ export function generateCommandTrie (commandMap) {
  * returns an array of (commands, binding).
  * A command may have more than one binding, or none at all.
  */
-function bindingsList (bindingsMap) {
+function bindingsList (commandList) {
   const out = []
-  for (const [command, bindings] of Object.entries(bindingsMap)) {
-    if (bindings === undefined) {
-      throw Error(`A profile is missing bindings for command ${command}`)
+  for (const command of commandList) {
+    if (command.bindings === undefined) {
+      throw Error(`A profile is missing bindings for command ${command.command}`)
     }
-    for (const binding of bindings) {
+    for (const binding of command.bindings) {
       const keySequence = binding.map(key => {
         try {
           validKeyboardEvent(key)
@@ -46,11 +46,15 @@ function JSONTrie (bindings) {
   return trie
 }
 
+function isTrieNode (thing) {
+  return typeof thing == 'object' && thing._TrieNode === true
+}
+
 function addToTrie (trie, i, key, value, binding) {
   if (key.length === 0) {
     throw Error(`${value} has a 0 length key binding`)
   } else if (i === key.length - 1) {
-    if (trie.hasOwnProperty(key[i])) {
+    if (isTrieNode(trie[key[i]])) {
       throw {
         message: `${firstLeafValue(
           trie[key[i]]
@@ -63,7 +67,7 @@ function addToTrie (trie, i, key, value, binding) {
       trie[key[i]] = value
     }
   } else {
-    if (trie.hasOwnProperty(key[i])) {
+    if (isTrieNode(trie[key[i]])) {
       if (typeof trie[key[i]] === 'object') {
         addToTrie(trie[key[i]], i + 1, key, value)
       } else {
@@ -75,7 +79,7 @@ function addToTrie (trie, i, key, value, binding) {
         }
       }
     } else {
-      addToTrie((trie[key[i]] = {}), i + 1, key, value)
+      addToTrie((trie[key[i]] = {_TrieNode: true}), i + 1, key, value)
     }
   }
 }
diff --git a/src/pages/options/Content/OptionsCard/OptionsList/OptionItem/OptionWidgets/CustomCommands/index.js b/src/pages/options/Content/OptionsCard/OptionsList/OptionItem/OptionWidgets/CustomCommands/index.js
index 7bddec8..09a427c 100644
--- a/src/pages/options/Content/OptionsCard/OptionsList/OptionItem/OptionWidgets/CustomCommands/index.js
+++ b/src/pages/options/Content/OptionsCard/OptionsList/OptionItem/OptionWidgets/CustomCommands/index.js
@@ -1,44 +1,59 @@
 import { Component, h } from 'preact'
 import TextArea from '../TextArea'
+import Keybinding from '../Keybinding'
 
 const DEFAULT = {
-  source: 'document.body.style.backgroundColor = "blue"'
+  source: 'document.body.style.backgroundColor = "blue"',
+  bindings: [],
 }
 
 class CustomCommand extends Component {
-  render ({ command, onChange }) {
+  render ({ command, values, onChange }) {
     return (
       <li>
-        <p>This is a command</p>
-        <TextArea
-          label='Source'
+        <textarea
+          id="multi-line"
+          class="mdc-textfield__input"
           value={command.source}
-          onChange={s => onChange({ source: s, ...command })}
-        />
+          rows={command.source.split('\n').length + 3}
+          cols="40"
+          onChange={e => onChange({ ...command, source: e.target.value })}/>
+        <Keybinding
+            label="Key Bindings"
+            key="foobar"
+            value={command.bindings}
+            values={values}
+            physicalKeys={false}
+            ignoreModifierKeys={false}
+            onChange={b => onChange({ ...command, bindings: b })}/>
+        <button onClick={e => { onChange(undefined) }}>Delete Custom Command</button>
       </li>
     )
   }
 }
 
 export default class CustomCommands extends Component {
-  render ({ key, value, onChange, ...rest }) {
-    console.log('CustomCommands', key, value, rest)
+  render ({ key, value, values, onChange, ...rest }) {
     return (
       <li>
         <ul>
           {value &&
             value.map((cmd, i, cmds) => {
               let cmdChange = cmd => {
-                let updated = cmds.slice()
-                updated[i] = cmd
-                onChange(updated)
+                if (!cmd) {
+                  // Remove the command from the list.
+                  onChange(cmds.slice(0, i).concat(cmds.slice(i+1)))
+                } else {
+                  // Update the command.
+                  let updated = cmds.slice()
+                  updated[i] = cmd
+                  onChange(updated)
+                }
               }
-              return <CustomCommand command={cmd} onChange={cmdChange} />
+              return <CustomCommand command={cmd} values={values} onChange={cmdChange} />
             })}
         </ul>
-        <button onClick={e => onChange([...value, DEFAULT])}>
-          New custom command
-        </button>
+        <button onClick={e => onChange([...value, DEFAULT])}>Add Custom Command</button>
       </li>
     )
   }