3 files changed, 70 insertions, 22 deletions

diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx
index f64320c..f3b6abe 100644
--- a/src/settings/components/form/keymaps-form.jsx
+++ b/src/settings/components/form/keymaps-form.jsx
@@ -8,8 +8,10 @@ const KeyMapFields = [
     ['scroll.vertically?{"count":-1}', 'Scroll up'],
     ['scroll.horizonally?{"count":-1}', 'Scroll left'],
     ['scroll.horizonally?{"count":1}', 'Scroll right'],
-    ['scroll.home', 'Scroll leftmost'],
-    ['scroll.end', 'Scroll last'],
+    ['scroll.home', 'Scroll to leftmost'],
+    ['scroll.end', 'Scroll to rightmost'],
+    ['scroll.top', 'Scroll to top'],
+    ['scroll.bottom', 'Scroll to bottom'],
     ['scroll.pages?{"count":-0.5}', 'Scroll up by half of screen'],
     ['scroll.pages?{"count":0.5}', 'Scroll up by half of screen'],
     ['scroll.pages?{"count":-1}', 'Scroll up by a screen'],
@@ -21,7 +23,8 @@ const KeyMapFields = [
     ['tabs.prev?{"count":1}', 'Select prev Tab'],
     ['tabs.first', 'Select first tab'],
     ['tabs.last', 'Select last tab'],
-    ['tabs.reload?{"cache":true}', 'Reload current tab'],
+    ['tabs.reload?{"cache":false}', 'Reload current tab'],
+    ['tabs.reload?{"cache":true}', 'Reload with no caches'],
     ['tabs.pin.toggle', 'Toggle pinned state'],
     ['tabs.duplicate', 'Dupplicate a tab'],
   ], [
@@ -55,6 +58,8 @@ const KeyMapFields = [
   ]
 ];
 
+const AllowdOps = [].concat(...KeyMapFields.map(group => group.map(e => e[0])));
+
 class KeymapsForm extends Component {
 
   render() {
@@ -62,10 +67,10 @@ class KeymapsForm extends Component {
     if (!values) {
       values = {};
     }
-    return <div className='keymap-fields'>
+    return <div className='form-keymaps-form'>
       {
         KeyMapFields.map((group, index) => {
-          return <div key={index} className='form-keymaps-form'>
+          return <div key={index} className='form-keymaps-form-field-group'>
             {
               group.map((field) => {
                 let name = field[0];
@@ -96,4 +101,6 @@ class KeymapsForm extends Component {
   }
 }
 
+KeymapsForm.AllowdOps = AllowdOps;
+
 export default KeymapsForm;
diff --git a/src/settings/components/form/keymaps-form.scss b/src/settings/components/form/keymaps-form.scss
index 3a83910..1a4e5cd 100644
--- a/src/settings/components/form/keymaps-form.scss
+++ b/src/settings/components/form/keymaps-form.scss
@@ -1,9 +1,11 @@
 .form-keymaps-form {
   column-count: 3;
-  .keymap-fields-group {
+
+  &-field-group {
     margin-top: 24px;
   }
-  .keymap-fields-group:first-of-type {
-    margin-top: 0;
+
+  &-field-group:first-of-type {
+    margin-top: 24px;
   }
 }
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 3961982..73520ca 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -123,6 +123,18 @@ class SettingsComponent extends Component {
     }
   }
 
+  validateValue(e) {
+    let next = Object.assign({}, this.state);
+
+    next.errors.json = '';
+    try {
+      this.validate(e.target);
+    } catch (err) {
+      next.errors.json = err.message;
+    }
+    next.settings[e.target.name] = e.target.value;
+  }
+
   bindForm(name, value) {
     let next = Object.assign({}, this.state, {
       settings: Object.assign({}, this.state.settings, {
@@ -136,15 +148,54 @@ class SettingsComponent extends Component {
 
   bindValue(e) {
     let next = Object.assign({}, this.state);
+    let error = false;
 
     next.errors.json = '';
     try {
       this.validate(e.target);
     } catch (err) {
       next.errors.json = err.message;
+      error = true;
     }
     next.settings[e.target.name] = e.target.value;
 
+    this.setState(this.state);
+    if (!error) {
+      this.context.store.dispatch(settingActions.save(next.settings));
+    }
+  }
+
+  migrateToForm() {
+    let b = window.confirm(DO_YOU_WANT_TO_CONTINUE);
+    if (!b) {
+      this.setState(this.state);
+      return;
+    }
+    try {
+      validator.validate(JSON.parse(this.state.settings.json));
+    } catch (err) {
+      this.setState(this.state);
+      return;
+    }
+
+    let form = settingsValues.formFromJson(
+      this.state.settings.json, KeymapsForm.AllowdOps);
+    let next = Object.assign({}, this.state);
+    next.settings.form = form;
+    next.settings.source = 'form';
+    next.errors.json = '';
+
+    this.setState(next);
+    this.context.store.dispatch(settingActions.save(next.settings));
+  }
+
+  migrateToJson() {
+    let json = settingsValues.jsonFromForm(this.state.settings.form);
+    let next = Object.assign({}, this.state);
+    next.settings.json = json;
+    next.settings.source = 'json';
+    next.errors.json = '';
+
     this.setState(next);
     this.context.store.dispatch(settingActions.save(next.settings));
   }
@@ -153,23 +204,11 @@ class SettingsComponent extends Component {
     let from = this.state.settings.source;
     let to = e.target.value;
 
-    let next = Object.assign({}, this.state);
     if (from === 'form' && to === 'json') {
-      next.settings.json =
-        settingsValues.jsonFromForm(this.state.settings.form);
+      this.migrateToJson();
     } else if (from === 'json' && to === 'form') {
-      let b = window.confirm(DO_YOU_WANT_TO_CONTINUE);
-      if (!b) {
-        this.setState(this.state);
-        return;
-      }
-      next.settings.form =
-        settingsValues.formFromJson(this.state.settings.json);
+      this.migrateToForm();
     }
-    next.settings.source = to;
-
-    this.setState(next);
-    this.context.store.dispatch(settingActions.save(next.settings));
   }
 }