From 44459e39c3526673ac2ac7065c5659e4af5ea7d8 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 18 Nov 2017 22:02:44 +0900
Subject: use preact

---
 src/settings/components/index.jsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

(limited to 'src/settings/components')

diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 4418942..bb2045a 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -1,10 +1,9 @@
 import './site.scss';
-import React from 'react';
-import PropTypes from 'prop-types';
+import { h, Component } from 'preact';
 import * as settingActions from 'settings/actions/setting';
 import * as validator from 'shared/validators/setting';
 
-class SettingsComponent extends React.Component {
+class SettingsComponent extends Component {
   constructor(props, context) {
     super(props, context);
 
@@ -84,8 +83,4 @@ class SettingsComponent extends React.Component {
   }
 }
 
-SettingsComponent.contextTypes = {
-  store: PropTypes.any,
-};
-
 export default SettingsComponent;
-- 
cgit v1.2.3


From d33b37cdb9d2956f5f2d23ab4e71e35db137b16e Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 19 Nov 2017 08:23:51 +0900
Subject: Use Preact for settings and show validation

---
 src/settings/components/index.jsx     | 48 ++++++++++++++++++++-------------
 src/settings/components/site.scss     |  2 ++
 src/settings/components/ui/input.jsx  | 50 +++++++++++++++++++++++++++++++++++
 src/settings/components/ui/input.scss | 17 ++++++++++++
 4 files changed, 99 insertions(+), 18 deletions(-)
 create mode 100644 src/settings/components/ui/input.jsx
 create mode 100644 src/settings/components/ui/input.scss

(limited to 'src/settings/components')

diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index bb2045a..98d8fb2 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -1,5 +1,6 @@
 import './site.scss';
 import { h, Component } from 'preact';
+import Input from './ui/input';
 import * as settingActions from 'settings/actions/setting';
 import * as validator from 'shared/validators/setting';
 
@@ -10,6 +11,9 @@ class SettingsComponent extends Component {
     this.state = {
       settings: {
         json: '',
+      },
+      errors: {
+        json: '',
       }
     };
     this.context.store.subscribe(this.stateChanged.bind(this));
@@ -35,39 +39,47 @@ class SettingsComponent extends Component {
         <h1>Configure Vim-Vixen</h1>
         <form className='vimvixen-settings-form'>
 
-          <p>Load settings from:</p>
-          <input type='radio' id='setting-source-json'
+          <Input
+            type='radio'
             name='source'
-            value='json'
-            onChange={this.bindAndSave.bind(this)}
-            checked={this.state.settings.source === 'json'} />
-          <label htmlFor='settings-source-json'>JSON</label>
+            label='Use plain JSON'
+            checked={this.state.settings.source === 'json'}
+            value='json' />
 
-          <textarea name='json' spellCheck='false'
-            onInput={this.validate.bind(this)}
+          <Input
+            type='textarea'
+            name='json'
+            label='Plane JSON'
+            spellCheck='false'
+            error={this.state.errors.json}
             onChange={this.bindValue.bind(this)}
             onBlur={this.bindAndSave.bind(this)}
-            value={this.state.settings.json} />
+            value={this.state.settings.json}
+          />
         </form>
       </div>
     );
   }
 
-  validate(e) {
-    try {
-      let settings = JSON.parse(e.target.value);
+  validate(target) {
+    if (target.name === 'json') {
+      let settings = JSON.parse(target.value);
       validator.validate(settings);
-      e.target.setCustomValidity('');
-    } catch (err) {
-      e.target.setCustomValidity(err.message);
     }
   }
 
   bindValue(e) {
-    let nextSettings = Object.assign({}, this.state.settings);
-    nextSettings[e.target.name] = e.target.value;
+    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;
 
-    this.setState({ settings: nextSettings });
+    this.setState(next);
   }
 
   bindAndSave(e) {
diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss
index fae9c39..aac4319 100644
--- a/src/settings/components/site.scss
+++ b/src/settings/components/site.scss
@@ -1,4 +1,6 @@
 .vimvixen-settings-form {
+  padding: 2px;
+
   textarea[name=json] {
     font-family: monospace;
     width: 100%;
diff --git a/src/settings/components/ui/input.jsx b/src/settings/components/ui/input.jsx
new file mode 100644
index 0000000..9b6c229
--- /dev/null
+++ b/src/settings/components/ui/input.jsx
@@ -0,0 +1,50 @@
+import { h, Component } from 'preact';
+import './input.scss';
+
+class Input extends Component {
+
+  renderRadio(props) {
+    let inputClasses = 'form-field-input';
+    if (props.error) {
+      inputClasses += ' input-error';
+    }
+    return <div>
+      <label>
+        <input className={ inputClasses } type='radio' {...props} />
+        { props.label }
+      </label>
+    </div>;
+  }
+
+  renderTextArea(props) {
+    let inputClasses = 'form-field-input';
+    if (props.error) {
+      inputClasses += ' input-error';
+    }
+    return <div>
+      <label
+        className='form-field-label'
+        htmlFor={props.id}
+      >{ props.label }</label>
+      <textarea className={inputClasses} {...props} />
+
+      <p className='form-field-error'>{ this.props.error }</p>
+    </div>;
+  }
+
+  render() {
+    let { type } = this.props;
+
+    switch (this.props.type) {
+    case 'radio':
+      return this.renderRadio(this.props);
+    case 'textarea':
+      return this.renderTextArea(this.props);
+    default:
+      console.warn(`Unsupported input type ${type}`);
+    }
+    return null;
+  }
+}
+
+export default Input;
diff --git a/src/settings/components/ui/input.scss b/src/settings/components/ui/input.scss
new file mode 100644
index 0000000..6187138
--- /dev/null
+++ b/src/settings/components/ui/input.scss
@@ -0,0 +1,17 @@
+.form-field-label {
+  font-weight: bold
+}
+
+.form-field-error {
+  font-weight: bold;
+  color: red;
+  min-height: 1.5em;
+}
+
+.form-field-input {
+  padding: 4px;
+}
+
+.form-field-input.input-error {
+  box-shadow: 0 0 2px red;
+}
-- 
cgit v1.2.3


From 4e5ddc1d57ba4f42314eb49ae57a9b67950be596 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Wed, 22 Nov 2017 22:38:34 +0900
Subject: Add keybindings form

---
 src/settings/actions/setting.js       |   7 +-
 src/settings/components/index.jsx     | 139 ++++++++++++++++++++++++++++++----
 src/settings/components/site.scss     |  27 +++++++
 src/settings/components/ui/input.jsx  |  35 +++++----
 src/settings/components/ui/input.scss |  37 +++++----
 src/settings/reducers/setting.js      |   2 +
 src/shared/default-settings.js        |  66 +++++++++++++++-
 7 files changed, 268 insertions(+), 45 deletions(-)

(limited to 'src/settings/components')

diff --git a/src/settings/actions/setting.js b/src/settings/actions/setting.js
index c1b27c8..fa158a3 100644
--- a/src/settings/actions/setting.js
+++ b/src/settings/actions/setting.js
@@ -4,10 +4,10 @@ import DefaultSettings from 'shared/default-settings';
 
 const load = () => {
   return browser.storage.local.get('settings').then(({ settings }) => {
-    if (settings) {
-      return set(settings);
+    if (!settings) {
+      return set(DefaultSettings);
     }
-    return set(DefaultSettings);
+    return set(Object.assign({}, DefaultSettings, settings));
   }, console.error);
 };
 
@@ -28,6 +28,7 @@ const set = (settings) => {
     type: actions.SETTING_SET_SETTINGS,
     source: settings.source,
     json: settings.json,
+    form: settings.form,
     value: JSON.parse(settings.json),
   };
 };
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 98d8fb2..11411bd 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -4,6 +4,59 @@ import Input from './ui/input';
 import * as settingActions from 'settings/actions/setting';
 import * as validator from 'shared/validators/setting';
 
+const KeyMapFields = [
+  [
+    ['scroll.vertically?{count:-1}', 'Scroll down'],
+    ['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.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'],
+    ['scroll.pages?{count:1}', 'Scroll up by a screen'],
+  ], [
+    ['tabs.close', 'Close a tab'],
+    ['tabs.reopen', 'Reopen closed tab'],
+    ['tabs.next?{count:1}', 'Select next Tab'],
+    ['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.pin.toggle', 'Toggle pinned state'],
+    ['tabs.duplicate', 'Dupplicate a tab'],
+  ], [
+    ['follow.start?{newTab:false}', 'Follow a link'],
+    ['follow.start?{newTab:true}', 'Follow a link in new tab'],
+    ['navigate.histories.prev', 'Go back in histories'],
+    ['navigate.histories.next', 'Go forward in histories'],
+    ['navigate.link.next', 'Open next link'],
+    ['navigate.link.prev', 'Open previous link'],
+    ['navigate.parent', 'Go to parent directory'],
+    ['navigate.root', 'Go to root directory'],
+  ], [
+    ['find.start', 'Start find mode'],
+    ['find.next', 'Find next word'],
+    ['find.prev', 'Find previous word'],
+  ], [
+    ['command.show', 'Open console'],
+    ['command.show.open?{alter:false}', 'Open URL'],
+    ['command.show.open?{alter:true}', 'Alter URL'],
+    ['command.show.tabopen?{alter:false}', 'Open URL in new Tab'],
+    ['command.show.tabopen?{alter:true}', 'Alter URL in new Tab'],
+    ['command.show.winopen?{alter:false}', 'Open URL in new window'],
+    ['command.show.winopen?{alter:true}', 'Alter URL in new window'],
+    ['command.show.buffer', 'Open buffer command'],
+  ], [
+    ['addon.toggle.enabled', 'Enable or disable'],
+    ['urls.yank', 'Copy current URL'],
+    ['zoom.in', 'Zoom-in'],
+    ['zoom.out', 'Zoom-out'],
+    ['zoom.neutral', 'Reset zoom level'],
+  ]
+];
+
 class SettingsComponent extends Component {
   constructor(props, context) {
     super(props, context);
@@ -29,33 +82,87 @@ class SettingsComponent extends Component {
       settings: {
         source: settings.source,
         json: settings.json,
+        form: settings.form,
       }
     });
   }
 
+  renderFormFields() {
+    let keymapFields = KeyMapFields.map((group, index) => {
+      return <div key={index} className='keymap-fields-group'>
+        {
+          group.map((field) => {
+            let name = field[0];
+            let label = field[1];
+            let value = this.state.settings.form.keymaps[name];
+            return <Input
+              type='text'
+              id={name}
+              name={name}
+              key={name}
+              label={label}
+              value={value}
+              onChange={this.bindFormKeymapsValue.bind(this)}
+            />;
+          })
+        }
+      </div>;
+    });
+
+    return <div>
+      <fieldset>
+        <legend>Keybindings</legend>
+        <div className='keymap-fields'>
+          { keymapFields }
+        </div>
+      </fieldset>
+    </div>;
+  }
+
+  renderJsonFields() {
+    return <div>
+      <Input
+        type='textarea'
+        name='json'
+        label='Plane JSON'
+        spellCheck='false'
+        error={this.state.errors.json}
+        onChange={this.bindValue.bind(this)}
+        onBlur={this.save.bind(this)}
+        value={this.state.settings.json}
+      />
+    </div>;
+  }
+
   render() {
+    let fields = null;
+    if (this.state.settings.source === 'form') {
+      fields = this.renderFormFields();
+    } else if (this.state.settings.source === 'json') {
+      fields = this.renderJsonFields();
+    }
     return (
       <div>
         <h1>Configure Vim-Vixen</h1>
         <form className='vimvixen-settings-form'>
+          <Input
+            type='radio'
+            id='setting-source-form'
+            name='source'
+            label='Use form'
+            checked={this.state.settings.source === 'form'}
+            value='form'
+            onChange={this.bindValue.bind(this)} />
 
           <Input
             type='radio'
             name='source'
             label='Use plain JSON'
             checked={this.state.settings.source === 'json'}
-            value='json' />
+            value='json'
+            onChange={this.bindValue.bind(this)} />
 
-          <Input
-            type='textarea'
-            name='json'
-            label='Plane JSON'
-            spellCheck='false'
-            error={this.state.errors.json}
-            onChange={this.bindValue.bind(this)}
-            onBlur={this.bindAndSave.bind(this)}
-            value={this.state.settings.json}
-          />
+          { fields }
         </form>
       </div>
     );
@@ -82,9 +189,15 @@ class SettingsComponent extends Component {
     this.setState(next);
   }
 
-  bindAndSave(e) {
-    this.bindValue(e);
+  bindFormKeymapsValue(e) {
+    let next = Object.assign({}, this.state);
+
+    next.settings.form.keymaps[e.target.name] = e.target.value;
+
+    this.context.store.dispatch(settingActions.save(next.settings));
+  }
 
+  save() {
     try {
       let json = this.state.settings.json;
       validator.validate(JSON.parse(json));
diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss
index aac4319..dcc52ce 100644
--- a/src/settings/components/site.scss
+++ b/src/settings/components/site.scss
@@ -7,4 +7,31 @@
     min-height: 64ex;
     resize: vertical;
   }
+
+  fieldset {
+    margin: 0;
+    padding: 0;
+    border: none;
+    margin-top: 1rem;
+
+    fieldset:first-of-type {
+      margin-top: 1rem;
+    }
+
+    legend {
+      font-size: 1.5rem;
+      line-height: 1.5rem;
+      font-weight: bold;
+    }
+  }
+
+  .keymap-fields{
+    column-count: 2;
+    .keymap-fields-group {
+      margin-top: 24px;
+    }
+    .keymap-fields-group:first-of-type {
+      margin-top: 0;
+    }
+  }
 }
diff --git a/src/settings/components/ui/input.jsx b/src/settings/components/ui/input.jsx
index 9b6c229..5138411 100644
--- a/src/settings/components/ui/input.jsx
+++ b/src/settings/components/ui/input.jsx
@@ -3,32 +3,35 @@ import './input.scss';
 
 class Input extends Component {
 
+  renderText(props) {
+    let inputClassName = props.error ? 'input-error' : '';
+    return <div className='settings-ui-input'>
+      <label
+        type='text'
+        htmlFor={props.id}
+      >{ props.label }</label>
+      <input type='text' className={inputClassName} {...props} />
+    </div>;
+  }
+
   renderRadio(props) {
-    let inputClasses = 'form-field-input';
-    if (props.error) {
-      inputClasses += ' input-error';
-    }
-    return <div>
+    let inputClassName = props.error ? 'input-error' : '';
+    return <div className='settings-ui-input'>
       <label>
-        <input className={ inputClasses } type='radio' {...props} />
+        <input type='radio' className={inputClassName} {...props} />
         { props.label }
       </label>
     </div>;
   }
 
   renderTextArea(props) {
-    let inputClasses = 'form-field-input';
-    if (props.error) {
-      inputClasses += ' input-error';
-    }
-    return <div>
+    let inputClassName = props.error ? 'input-error' : '';
+    return <div className='settings-ui-input'>
       <label
-        className='form-field-label'
         htmlFor={props.id}
       >{ props.label }</label>
-      <textarea className={inputClasses} {...props} />
-
-      <p className='form-field-error'>{ this.props.error }</p>
+      <textarea className={inputClassName} {...props} />
+      <p className='settings-ui-input-error'>{ this.props.error }</p>
     </div>;
   }
 
@@ -36,6 +39,8 @@ class Input extends Component {
     let { type } = this.props;
 
     switch (this.props.type) {
+    case 'text':
+      return this.renderText(this.props);
     case 'radio':
       return this.renderRadio(this.props);
     case 'textarea':
diff --git a/src/settings/components/ui/input.scss b/src/settings/components/ui/input.scss
index 6187138..92df712 100644
--- a/src/settings/components/ui/input.scss
+++ b/src/settings/components/ui/input.scss
@@ -1,17 +1,28 @@
-.form-field-label {
-  font-weight: bold
-}
+.settings-ui-input {
+  page-break-inside: avoid;
 
-.form-field-error {
-  font-weight: bold;
-  color: red;
-  min-height: 1.5em;
-}
+  * {
+    page-break-inside: avoid;
+  }
 
-.form-field-input {
-  padding: 4px;
-}
+  label {
+    font-weight: bold;
+    min-width: 14rem;
+    display: inline-block;
+  }
+
+  input {
+    padding: 4px;
+  }
+
+  input.input-crror,
+  textarea.input-error {
+    box-shadow: 0 0 2px red;
+  }
 
-.form-field-input.input-error {
-  box-shadow: 0 0 2px red;
+  &-error {
+    font-weight: bold;
+    color: red;
+    min-height: 1.5em;
+  }
 }
diff --git a/src/settings/reducers/setting.js b/src/settings/reducers/setting.js
index a61c09f..70c6183 100644
--- a/src/settings/reducers/setting.js
+++ b/src/settings/reducers/setting.js
@@ -3,6 +3,7 @@ import actions from 'settings/actions';
 const defaultState = {
   source: '',
   json: '',
+  form: null,
   value: {}
 };
 
@@ -12,6 +13,7 @@ export default function reducer(state = defaultState, action = {}) {
     return {
       source: action.source,
       json: action.json,
+      form: action.form,
       value: action.value,
     };
   default:
diff --git a/src/shared/default-settings.js b/src/shared/default-settings.js
index 608890b..c1402b7 100644
--- a/src/shared/default-settings.js
+++ b/src/shared/default-settings.js
@@ -62,5 +62,69 @@ export default {
       "wikipedia": "https://en.wikipedia.org/w/index.php?search={}"
     }
   }
-}`
+}`,
+
+  'form': {
+    'keymaps': {
+      'scroll.vertically?{count:-1}': 'j',
+      'scroll.vertically?{count:1}': 'k',
+      'scroll.horizonally?{count:-1}': 'h',
+      'scroll.horizonally?{count:1}': 'l',
+      'scroll.home': '0',
+      'scroll.end': '$',
+      'scroll.pages?{count:-0.5}': '<C-U>',
+      'scroll.pages?{count:0.5}': '<C-D>',
+      'scroll.pages?{count:-1}': '<C-B>',
+      'scroll.pages?{count:1}': '<C-F>',
+
+      'tabs.close': 'd',
+      'tabs.reopen': 'u',
+      'tabs.next?{count:1}': 'J',
+      'tabs.prev?{count:1}': 'K',
+      'tabs.first': 'g0',
+      'tabs.last': 'g$',
+      'tabs.reload?{cache:true}': 'r',
+      'tabs.pin.toggle': 'zp',
+      'tabs.duplicate': 'zd',
+
+      'follow.start?{newTab:false}': 'f',
+      'follow.start?{newTab:true}': 'F',
+      'navigate.histories.prev': 'H',
+      'navigate.histories.next': 'L',
+      'navigate.link.next': ']]',
+      'navigate.link.prev': '[[',
+      'navigate.parent': 'gu',
+      'navigate.root': 'gU',
+
+      'find.start': '/',
+      'find.next': 'n',
+      'find.prev': 'N',
+
+      'command.show': ':',
+      'command.show.open?{alter:false}': 'o',
+      'command.show.open?{alter:true}': 'O',
+      'command.show.tabopen?{alter:false}': 't',
+      'command.show.tabopen?{alter:true}': 'T',
+      'command.show.winopen?{alter:false}': 'w',
+      'command.show.winopen?{alter:true}': 'W',
+      'command.show.buffer': 'b',
+
+      'addon.toggle.enabled': '<S-Esc>',
+      'urls.yank': 'y',
+      'zoom.in': 'zi',
+      'zoom.out': 'zo',
+      'zoom.neutral': 'zz',
+    },
+    'search': {
+      'default': 'google',
+      'engines': {
+        'google': 'https://google.com/search?q={}',
+        'yahoo': 'https://search.yahoo.com/search?p={}',
+        'bing': 'https://www.bing.com/search?q={}',
+        'duckduckgo': 'https://duckduckgo.com/?q={}',
+        'twitter': 'https://twitter.com/search?q={}',
+        'wikipedia': 'https://en.wikipedia.org/w/index.php?search={}'
+      }
+    }
+  }
 };
-- 
cgit v1.2.3


From 7b44b652473b487e2d00a5b705a7f78ee66dec65 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Thu, 23 Nov 2017 21:22:42 +0900
Subject: Add search form

---
 .../components/form/search-engine-form.jsx         | 69 ++++++++++++++++++++++
 .../components/form/search-engine-form.scss        | 38 ++++++++++++
 src/settings/components/index.jsx                  | 27 +++++----
 src/shared/default-settings.js                     | 16 ++---
 4 files changed, 131 insertions(+), 19 deletions(-)
 create mode 100644 src/settings/components/form/search-engine-form.jsx
 create mode 100644 src/settings/components/form/search-engine-form.scss

(limited to 'src/settings/components')

diff --git a/src/settings/components/form/search-engine-form.jsx b/src/settings/components/form/search-engine-form.jsx
new file mode 100644
index 0000000..77da304
--- /dev/null
+++ b/src/settings/components/form/search-engine-form.jsx
@@ -0,0 +1,69 @@
+import { h, Component } from 'preact';
+import './search-engine-form.scss';
+
+class SearchEngineForm extends Component {
+
+  render() {
+    let value = this.props.value;
+    if (!value) {
+      value = { default: '', engines: []};
+    }
+    let {
+      default: defaultEngine,
+      engines
+    } = value;
+
+    return <div className='form-search-engine-form'>
+      <div className='form-search-engine-form-header'>
+        <div className='column-name'>Name</div>
+        <div className='column-url'>URL</div>
+        <div className='column-option'>Default</div>
+      </div>
+      {
+        engines.map((engine, index) => {
+          return <div key={index} className='form-search-engine-form-row'>
+            <input data-index={index} type='text' name='name'
+              className='column-name' value={engine[0]}
+              onChange={this.bindValue.bind(this)} />
+            <input data-index={index} type='text' name='url'
+              placeholder='http://example.com/?q={}'
+              className='column-url' value={engine[1]}
+              onChange={this.bindValue.bind(this)} />
+            <div className='column-option'>
+              <input data-index={index} type='radio' name='default'
+                checked={defaultEngine === engine[0]}
+                onChange={this.bindValue.bind(this)} />
+              <input data-index={index} type='button' name='delete'
+                value='&#x2716;'
+                onClick={this.bindValue.bind(this)} />
+            </div>
+          </div>;
+        })
+      }
+    </div>;
+  }
+
+  bindValue(e) {
+    if (!this.props.onChange) {
+      return;
+    }
+
+    let name = e.target.name;
+    let index = e.target.getAttribute('data-index');
+    let next = Object.assign({}, this.props.value);
+
+    if (name === 'name') {
+      next.engines[index][0] = e.target.value;
+    } else if (name === 'url') {
+      next.engines[index][1] = e.target.value;
+    } else if (name === 'default') {
+      next.default = this.props.value.engines[index][0];
+    } else if (name === 'delete') {
+      next.engines.splice(index, 1);
+    }
+
+    this.props.onChange(next);
+  }
+}
+
+export default SearchEngineForm;
diff --git a/src/settings/components/form/search-engine-form.scss b/src/settings/components/form/search-engine-form.scss
new file mode 100644
index 0000000..1ca43b7
--- /dev/null
+++ b/src/settings/components/form/search-engine-form.scss
@@ -0,0 +1,38 @@
+.form-search-engine-form {
+  @mixin row-base {
+    display: flex;
+
+    .column-name {
+      flex: 1;
+    }
+    .column-url {
+      flex: 5;
+    }
+    .column-option {
+      text-align: right;
+      flex-basis: 5rem;
+    }
+  }
+
+  &-header {
+    @include row-base;
+
+    font-weight: bold;
+  }
+
+  &-row {
+    @include row-base;
+
+    .column-option input[type='button'] {
+      border: none;
+      padding: 4;
+      display: inline;
+      background: none;
+      color: red;
+
+      &:hover {
+        color: darkred;
+      }
+    }
+  }
+}
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 11411bd..8fe7d4d 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -1,6 +1,7 @@
 import './site.scss';
 import { h, Component } from 'preact';
 import Input from './ui/input';
+import SearchEngineForm from './form/search-engine-form';
 import * as settingActions from 'settings/actions/setting';
 import * as validator from 'shared/validators/setting';
 
@@ -116,6 +117,13 @@ class SettingsComponent extends Component {
           { keymapFields }
         </div>
       </fieldset>
+      <fieldset>
+        <legend>Search Engines</legend>
+        <SearchEngineForm
+          value={this.state.settings.form.search}
+          onChange={this.bindSearchForm.bind(this)}
+        />
+      </fieldset>
     </div>;
   }
 
@@ -128,7 +136,6 @@ class SettingsComponent extends Component {
         spellCheck='false'
         error={this.state.errors.json}
         onChange={this.bindValue.bind(this)}
-        onBlur={this.save.bind(this)}
         value={this.state.settings.json}
       />
     </div>;
@@ -175,6 +182,13 @@ class SettingsComponent extends Component {
     }
   }
 
+  bindSearchForm(value) {
+    let next = Object.assign({}, this.state);
+    next.settings.form.search = value;
+    this.setState(next);
+    this.context.store.dispatch(settingActions.save(next.settings));
+  }
+
   bindValue(e) {
     let next = Object.assign({}, this.state);
 
@@ -187,6 +201,7 @@ class SettingsComponent extends Component {
     next.settings[e.target.name] = e.target.value;
 
     this.setState(next);
+    this.context.store.dispatch(settingActions.save(next.settings));
   }
 
   bindFormKeymapsValue(e) {
@@ -196,16 +211,6 @@ class SettingsComponent extends Component {
 
     this.context.store.dispatch(settingActions.save(next.settings));
   }
-
-  save() {
-    try {
-      let json = this.state.settings.json;
-      validator.validate(JSON.parse(json));
-      this.context.store.dispatch(settingActions.save(this.state.settings));
-    } catch (err) {
-      // error already shown
-    }
-  }
 }
 
 export default SettingsComponent;
diff --git a/src/shared/default-settings.js b/src/shared/default-settings.js
index c1402b7..6d2013b 100644
--- a/src/shared/default-settings.js
+++ b/src/shared/default-settings.js
@@ -117,14 +117,14 @@ export default {
     },
     'search': {
       'default': 'google',
-      'engines': {
-        'google': 'https://google.com/search?q={}',
-        'yahoo': 'https://search.yahoo.com/search?p={}',
-        'bing': 'https://www.bing.com/search?q={}',
-        'duckduckgo': 'https://duckduckgo.com/?q={}',
-        'twitter': 'https://twitter.com/search?q={}',
-        'wikipedia': 'https://en.wikipedia.org/w/index.php?search={}'
-      }
+      'engines': [
+        ['google', 'https,//google.com/search?q={}'],
+        ['yahoo', 'https,//search.yahoo.com/search?p={}'],
+        ['bing', 'https,//www.bing.com/search?q={}'],
+        ['duckduckgo', 'https,//duckduckgo.com/?q={}'],
+        ['twitter', 'https,//twitter.com/search?q={}'],
+        ['wikipedia', 'https,//en.wikipedia.org/w/index.php?search={}'],
+      ]
     }
   }
 };
-- 
cgit v1.2.3


From 2641183a5b244a9640d8fb7e92ba95dc15dadc58 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 25 Nov 2017 12:31:24 +0900
Subject: keymaps form

---
 src/settings/components/form/keymaps-form.jsx  | 95 +++++++++++++++++++++++++
 src/settings/components/form/keymaps-form.scss |  9 +++
 src/settings/components/index.jsx              | 97 ++++----------------------
 src/settings/components/site.scss              | 10 ---
 4 files changed, 116 insertions(+), 95 deletions(-)
 create mode 100644 src/settings/components/form/keymaps-form.jsx
 create mode 100644 src/settings/components/form/keymaps-form.scss

(limited to 'src/settings/components')

diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx
new file mode 100644
index 0000000..a112979
--- /dev/null
+++ b/src/settings/components/form/keymaps-form.jsx
@@ -0,0 +1,95 @@
+import './keymaps-form.scss';
+import { h, Component } from 'preact';
+import Input from '../ui/input';
+
+const KeyMapFields = [
+  [
+    ['scroll.vertically?{count:-1}', 'Scroll down'],
+    ['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.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'],
+    ['scroll.pages?{count:1}', 'Scroll up by a screen'],
+  ], [
+    ['tabs.close', 'Close a tab'],
+    ['tabs.reopen', 'Reopen closed tab'],
+    ['tabs.next?{count:1}', 'Select next Tab'],
+    ['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.pin.toggle', 'Toggle pinned state'],
+    ['tabs.duplicate', 'Dupplicate a tab'],
+  ], [
+    ['follow.start?{newTab:false}', 'Follow a link'],
+    ['follow.start?{newTab:true}', 'Follow a link in new tab'],
+    ['navigate.histories.prev', 'Go back in histories'],
+    ['navigate.histories.next', 'Go forward in histories'],
+    ['navigate.link.next', 'Open next link'],
+    ['navigate.link.prev', 'Open previous link'],
+    ['navigate.parent', 'Go to parent directory'],
+    ['navigate.root', 'Go to root directory'],
+  ], [
+    ['find.start', 'Start find mode'],
+    ['find.next', 'Find next word'],
+    ['find.prev', 'Find previous word'],
+  ], [
+    ['command.show', 'Open console'],
+    ['command.show.open?{alter:false}', 'Open URL'],
+    ['command.show.open?{alter:true}', 'Alter URL'],
+    ['command.show.tabopen?{alter:false}', 'Open URL in new Tab'],
+    ['command.show.tabopen?{alter:true}', 'Alter URL in new Tab'],
+    ['command.show.winopen?{alter:false}', 'Open URL in new window'],
+    ['command.show.winopen?{alter:true}', 'Alter URL in new window'],
+    ['command.show.buffer', 'Open buffer command'],
+  ], [
+    ['addon.toggle.enabled', 'Enable or disable'],
+    ['urls.yank', 'Copy current URL'],
+    ['zoom.in', 'Zoom-in'],
+    ['zoom.out', 'Zoom-out'],
+    ['zoom.neutral', 'Reset zoom level'],
+  ]
+];
+
+class KeymapsForm extends Component {
+
+  render() {
+    return <div className='keymap-fields'>
+      {
+        KeyMapFields.map((group, index) => {
+          return <div key={index} className='form-keymaps-form'>
+            {
+              group.map((field) => {
+                let name = field[0];
+                let label = field[1];
+                let value = this.props.value[name];
+                return <Input
+                  type='text' id={name} name={name} key={name}
+                  label={label} value={value}
+                  onChange={this.bindValue.bind(this)}
+                />;
+              })
+            }
+          </div>;
+        })
+      }
+    </div>;
+  }
+
+  bindValue(e) {
+    if (!this.props.onChange) {
+      return;
+    }
+
+    let next = Object.assign({}, this.props.value);
+    next[e.target.name] = e.target.value;
+
+    this.props.onChange(next);
+  }
+}
+
+export default KeymapsForm;
diff --git a/src/settings/components/form/keymaps-form.scss b/src/settings/components/form/keymaps-form.scss
new file mode 100644
index 0000000..8b86c80
--- /dev/null
+++ b/src/settings/components/form/keymaps-form.scss
@@ -0,0 +1,9 @@
+.form-keymaps-form {
+  column-count: 2;
+  .keymap-fields-group {
+    margin-top: 24px;
+  }
+  .keymap-fields-group:first-of-type {
+    margin-top: 0;
+  }
+}
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 8fe7d4d..e5b46ad 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -2,62 +2,10 @@ import './site.scss';
 import { h, Component } from 'preact';
 import Input from './ui/input';
 import SearchEngineForm from './form/search-engine-form';
+import KeymapsForm from './form/keymaps-form';
 import * as settingActions from 'settings/actions/setting';
 import * as validator from 'shared/validators/setting';
 
-const KeyMapFields = [
-  [
-    ['scroll.vertically?{count:-1}', 'Scroll down'],
-    ['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.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'],
-    ['scroll.pages?{count:1}', 'Scroll up by a screen'],
-  ], [
-    ['tabs.close', 'Close a tab'],
-    ['tabs.reopen', 'Reopen closed tab'],
-    ['tabs.next?{count:1}', 'Select next Tab'],
-    ['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.pin.toggle', 'Toggle pinned state'],
-    ['tabs.duplicate', 'Dupplicate a tab'],
-  ], [
-    ['follow.start?{newTab:false}', 'Follow a link'],
-    ['follow.start?{newTab:true}', 'Follow a link in new tab'],
-    ['navigate.histories.prev', 'Go back in histories'],
-    ['navigate.histories.next', 'Go forward in histories'],
-    ['navigate.link.next', 'Open next link'],
-    ['navigate.link.prev', 'Open previous link'],
-    ['navigate.parent', 'Go to parent directory'],
-    ['navigate.root', 'Go to root directory'],
-  ], [
-    ['find.start', 'Start find mode'],
-    ['find.next', 'Find next word'],
-    ['find.prev', 'Find previous word'],
-  ], [
-    ['command.show', 'Open console'],
-    ['command.show.open?{alter:false}', 'Open URL'],
-    ['command.show.open?{alter:true}', 'Alter URL'],
-    ['command.show.tabopen?{alter:false}', 'Open URL in new Tab'],
-    ['command.show.tabopen?{alter:true}', 'Alter URL in new Tab'],
-    ['command.show.winopen?{alter:false}', 'Open URL in new window'],
-    ['command.show.winopen?{alter:true}', 'Alter URL in new window'],
-    ['command.show.buffer', 'Open buffer command'],
-  ], [
-    ['addon.toggle.enabled', 'Enable or disable'],
-    ['urls.yank', 'Copy current URL'],
-    ['zoom.in', 'Zoom-in'],
-    ['zoom.out', 'Zoom-out'],
-    ['zoom.neutral', 'Reset zoom level'],
-  ]
-];
-
 class SettingsComponent extends Component {
   constructor(props, context) {
     super(props, context);
@@ -89,33 +37,13 @@ class SettingsComponent extends Component {
   }
 
   renderFormFields() {
-    let keymapFields = KeyMapFields.map((group, index) => {
-      return <div key={index} className='keymap-fields-group'>
-        {
-          group.map((field) => {
-            let name = field[0];
-            let label = field[1];
-            let value = this.state.settings.form.keymaps[name];
-            return <Input
-              type='text'
-              id={name}
-              name={name}
-              key={name}
-              label={label}
-              value={value}
-              onChange={this.bindFormKeymapsValue.bind(this)}
-            />;
-          })
-        }
-      </div>;
-    });
-
     return <div>
       <fieldset>
         <legend>Keybindings</legend>
-        <div className='keymap-fields'>
-          { keymapFields }
-        </div>
+        <KeymapsForm
+          value={this.state.settings.form.keymaps}
+          onChange={this.bindKeymapsForm.bind(this)}
+        />
       </fieldset>
       <fieldset>
         <legend>Search Engines</legend>
@@ -189,6 +117,13 @@ class SettingsComponent extends Component {
     this.context.store.dispatch(settingActions.save(next.settings));
   }
 
+  bindKeymapsForm(value) {
+    let next = Object.assign({}, this.state);
+    next.settings.form.keymaps = value;
+    this.setState(next);
+    this.context.store.dispatch(settingActions.save(next.settings));
+  }
+
   bindValue(e) {
     let next = Object.assign({}, this.state);
 
@@ -203,14 +138,6 @@ class SettingsComponent extends Component {
     this.setState(next);
     this.context.store.dispatch(settingActions.save(next.settings));
   }
-
-  bindFormKeymapsValue(e) {
-    let next = Object.assign({}, this.state);
-
-    next.settings.form.keymaps[e.target.name] = e.target.value;
-
-    this.context.store.dispatch(settingActions.save(next.settings));
-  }
 }
 
 export default SettingsComponent;
diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss
index dcc52ce..c8dd422 100644
--- a/src/settings/components/site.scss
+++ b/src/settings/components/site.scss
@@ -24,14 +24,4 @@
       font-weight: bold;
     }
   }
-
-  .keymap-fields{
-    column-count: 2;
-    .keymap-fields-group {
-      margin-top: 24px;
-    }
-    .keymap-fields-group:first-of-type {
-      margin-top: 0;
-    }
-  }
 }
-- 
cgit v1.2.3


From bbad1c6c6adf65de031111340f8bf5e46cc41ca6 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 25 Nov 2017 13:58:25 +0900
Subject: delete button

---
 src/settings/components/form/search-engine-form.jsx  |  6 +++---
 src/settings/components/form/search-engine-form.scss | 12 ------------
 src/settings/components/ui/delete-button.jsx         | 12 ++++++++++++
 src/settings/components/ui/delete-button.scss        | 12 ++++++++++++
 4 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 src/settings/components/ui/delete-button.jsx
 create mode 100644 src/settings/components/ui/delete-button.scss

(limited to 'src/settings/components')

diff --git a/src/settings/components/form/search-engine-form.jsx b/src/settings/components/form/search-engine-form.jsx
index 77da304..c86522a 100644
--- a/src/settings/components/form/search-engine-form.jsx
+++ b/src/settings/components/form/search-engine-form.jsx
@@ -1,5 +1,6 @@
-import { h, Component } from 'preact';
 import './search-engine-form.scss';
+import { h, Component } from 'preact';
+import DeleteButton from '../ui/delete-button';
 
 class SearchEngineForm extends Component {
 
@@ -33,8 +34,7 @@ class SearchEngineForm extends Component {
               <input data-index={index} type='radio' name='default'
                 checked={defaultEngine === engine[0]}
                 onChange={this.bindValue.bind(this)} />
-              <input data-index={index} type='button' name='delete'
-                value='&#x2716;'
+              <DeleteButton data-index={index} name='delete'
                 onClick={this.bindValue.bind(this)} />
             </div>
           </div>;
diff --git a/src/settings/components/form/search-engine-form.scss b/src/settings/components/form/search-engine-form.scss
index 1ca43b7..0d33c23 100644
--- a/src/settings/components/form/search-engine-form.scss
+++ b/src/settings/components/form/search-engine-form.scss
@@ -22,17 +22,5 @@
 
   &-row {
     @include row-base;
-
-    .column-option input[type='button'] {
-      border: none;
-      padding: 4;
-      display: inline;
-      background: none;
-      color: red;
-
-      &:hover {
-        color: darkred;
-      }
-    }
   }
 }
diff --git a/src/settings/components/ui/delete-button.jsx b/src/settings/components/ui/delete-button.jsx
new file mode 100644
index 0000000..8077a76
--- /dev/null
+++ b/src/settings/components/ui/delete-button.jsx
@@ -0,0 +1,12 @@
+import './delete-button.scss';
+import { h, Component } from 'preact';
+
+class DeleteButton extends Component {
+  render() {
+    return <input
+      className='ui-delete-button' type='button' value='&#x2716;'
+      {...this.props} />;
+  }
+}
+
+export default DeleteButton;
diff --git a/src/settings/components/ui/delete-button.scss b/src/settings/components/ui/delete-button.scss
new file mode 100644
index 0000000..7aa2f39
--- /dev/null
+++ b/src/settings/components/ui/delete-button.scss
@@ -0,0 +1,12 @@
+
+.ui-delete-button {
+  border: none;
+  padding: 4;
+  display: inline;
+  background: none;
+  color: red;
+
+  &:hover {
+    color: darkred;
+  }
+}
-- 
cgit v1.2.3


From df10208ed5dfbc823eb1979272903d74f02a898c Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 25 Nov 2017 14:59:03 +0900
Subject: blacklist form

---
 src/settings/components/form/blacklist-form.jsx  | 47 ++++++++++++++++++++++++
 src/settings/components/form/blacklist-form.scss |  9 +++++
 src/settings/components/index.jsx                | 29 +++++++++------
 src/shared/default-settings.js                   |  3 +-
 4 files changed, 75 insertions(+), 13 deletions(-)
 create mode 100644 src/settings/components/form/blacklist-form.jsx
 create mode 100644 src/settings/components/form/blacklist-form.scss

(limited to 'src/settings/components')

diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx
new file mode 100644
index 0000000..83b54da
--- /dev/null
+++ b/src/settings/components/form/blacklist-form.jsx
@@ -0,0 +1,47 @@
+import './blacklist-form.scss';
+import DeleteButton from '../ui/delete-button';
+import { h, Component } from 'preact';
+
+class BlacklistForm extends Component {
+
+  render() {
+    let value = this.props.value;
+    if (!value) {
+      value = [];
+    }
+
+    return <div className='form-blacklist-form'>
+      {
+        value.map((url, index) => {
+          return <div key={index} className='form-blacklist-form-row'>
+            <input data-index={index} type='text' name='url'
+              className='column-url' value={url}
+              onChange={this.bindValue.bind(this)} />
+            <DeleteButton data-index={index} name='delete'
+              onClick={this.bindValue.bind(this)} />
+          </div>;
+        })
+      }
+    </div>;
+  }
+
+  bindValue(e) {
+    if (!this.props.onChange) {
+      return;
+    }
+
+    let name = e.target.name;
+    let index = e.target.getAttribute('data-index');
+    let next = this.props.value.slice();
+
+    if (name === 'url') {
+      next[index] = e.target.value;
+    } else if (name === 'delete') {
+      next.splice(index, 1);
+    }
+
+    this.props.onChange(next);
+  }
+}
+
+export default BlacklistForm;
diff --git a/src/settings/components/form/blacklist-form.scss b/src/settings/components/form/blacklist-form.scss
new file mode 100644
index 0000000..a230d0d
--- /dev/null
+++ b/src/settings/components/form/blacklist-form.scss
@@ -0,0 +1,9 @@
+.form-blacklist-form {
+  &-row {
+    display: flex;
+
+    .column-url {
+      flex: 1;
+    }
+  }
+}
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index e5b46ad..fb25df6 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -3,6 +3,7 @@ import { h, Component } from 'preact';
 import Input from './ui/input';
 import SearchEngineForm from './form/search-engine-form';
 import KeymapsForm from './form/keymaps-form';
+import BlacklistForm from './form/blacklist-form';
 import * as settingActions from 'settings/actions/setting';
 import * as validator from 'shared/validators/setting';
 
@@ -42,14 +43,21 @@ class SettingsComponent extends Component {
         <legend>Keybindings</legend>
         <KeymapsForm
           value={this.state.settings.form.keymaps}
-          onChange={this.bindKeymapsForm.bind(this)}
+          onChange={value => this.bindForm('keymaps', value)}
         />
       </fieldset>
       <fieldset>
         <legend>Search Engines</legend>
         <SearchEngineForm
           value={this.state.settings.form.search}
-          onChange={this.bindSearchForm.bind(this)}
+          onChange={value => this.bindForm('search', value)}
+        />
+      </fieldset>
+      <fieldset>
+        <legend>Blacklist</legend>
+        <BlacklistForm
+          value={this.state.settings.form.blacklist}
+          onChange={value => this.bindForm('blacklist', value)}
         />
       </fieldset>
     </div>;
@@ -110,16 +118,13 @@ class SettingsComponent extends Component {
     }
   }
 
-  bindSearchForm(value) {
-    let next = Object.assign({}, this.state);
-    next.settings.form.search = value;
-    this.setState(next);
-    this.context.store.dispatch(settingActions.save(next.settings));
-  }
-
-  bindKeymapsForm(value) {
-    let next = Object.assign({}, this.state);
-    next.settings.form.keymaps = value;
+  bindForm(name, value) {
+    let next = Object.assign({}, this.state, {
+      settings: Object.assign({}, this.state.settings, {
+        form: Object.assign({}, this.state.settings.form)
+      })
+    });
+    next.settings.form[name] = value;
     this.setState(next);
     this.context.store.dispatch(settingActions.save(next.settings));
   }
diff --git a/src/shared/default-settings.js b/src/shared/default-settings.js
index 6d2013b..218390b 100644
--- a/src/shared/default-settings.js
+++ b/src/shared/default-settings.js
@@ -125,6 +125,7 @@ export default {
         ['twitter', 'https,//twitter.com/search?q={}'],
         ['wikipedia', 'https,//en.wikipedia.org/w/index.php?search={}'],
       ]
-    }
+    },
+    'blacklist': [],
   }
 };
-- 
cgit v1.2.3


From 507000619377f82ca63251c8c5db98af690a5ed2 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 25 Nov 2017 15:08:41 +0900
Subject: add button

---
 src/settings/components/form/blacklist-form.jsx     |  4 ++++
 src/settings/components/form/search-engine-form.jsx |  4 ++++
 src/settings/components/ui/add-button.jsx           | 12 ++++++++++++
 src/settings/components/ui/add-button.scss          |  3 +++
 4 files changed, 23 insertions(+)
 create mode 100644 src/settings/components/ui/add-button.jsx
 create mode 100644 src/settings/components/ui/add-button.scss

(limited to 'src/settings/components')

diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx
index 83b54da..9cb547b 100644
--- a/src/settings/components/form/blacklist-form.jsx
+++ b/src/settings/components/form/blacklist-form.jsx
@@ -1,4 +1,5 @@
 import './blacklist-form.scss';
+import AddButton from '../ui/add-button';
 import DeleteButton from '../ui/delete-button';
 import { h, Component } from 'preact';
 
@@ -22,6 +23,7 @@ class BlacklistForm extends Component {
           </div>;
         })
       }
+      <AddButton name='add' onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
@@ -36,6 +38,8 @@ class BlacklistForm extends Component {
 
     if (name === 'url') {
       next[index] = e.target.value;
+    } else if (name === 'add') {
+      next.push('');
     } else if (name === 'delete') {
       next.splice(index, 1);
     }
diff --git a/src/settings/components/form/search-engine-form.jsx b/src/settings/components/form/search-engine-form.jsx
index c86522a..faa066f 100644
--- a/src/settings/components/form/search-engine-form.jsx
+++ b/src/settings/components/form/search-engine-form.jsx
@@ -1,5 +1,6 @@
 import './search-engine-form.scss';
 import { h, Component } from 'preact';
+import AddButton from '../ui/add-button';
 import DeleteButton from '../ui/delete-button';
 
 class SearchEngineForm extends Component {
@@ -40,6 +41,7 @@ class SearchEngineForm extends Component {
           </div>;
         })
       }
+      <AddButton name='add' onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
@@ -58,6 +60,8 @@ class SearchEngineForm extends Component {
       next.engines[index][1] = e.target.value;
     } else if (name === 'default') {
       next.default = this.props.value.engines[index][0];
+    } else if (name === 'add') {
+      next.engines.push(['', '']);
     } else if (name === 'delete') {
       next.engines.splice(index, 1);
     }
diff --git a/src/settings/components/ui/add-button.jsx b/src/settings/components/ui/add-button.jsx
new file mode 100644
index 0000000..c8d8856
--- /dev/null
+++ b/src/settings/components/ui/add-button.jsx
@@ -0,0 +1,12 @@
+import './add-button.scss';
+import { h, Component } from 'preact';
+
+class AddButton extends Component {
+  render() {
+    return <input
+      className='ui-add-button' type='button' value='Add'
+      {...this.props} />;
+  }
+}
+
+export default AddButton;
diff --git a/src/settings/components/ui/add-button.scss b/src/settings/components/ui/add-button.scss
new file mode 100644
index 0000000..1c893ae
--- /dev/null
+++ b/src/settings/components/ui/add-button.scss
@@ -0,0 +1,3 @@
+.ui-add-button {
+  font-size: 80%
+}
-- 
cgit v1.2.3


From f27d21908a2b402e3274288d4411a48160f38e4c Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 25 Nov 2017 18:03:15 +0900
Subject: load settiongs from form

---
 src/settings/actions/setting.js               |  12 ++-
 src/settings/components/form/keymaps-form.jsx |  38 ++++----
 src/shared/default-settings.js                | 131 --------------------------
 src/shared/settings/default.js                | 131 ++++++++++++++++++++++++++
 src/shared/settings/values.js                 |  35 +++++++
 5 files changed, 195 insertions(+), 152 deletions(-)
 delete mode 100644 src/shared/default-settings.js
 create mode 100644 src/shared/settings/default.js
 create mode 100644 src/shared/settings/values.js

(limited to 'src/settings/components')

diff --git a/src/settings/actions/setting.js b/src/settings/actions/setting.js
index fa158a3..1d4ef34 100644
--- a/src/settings/actions/setting.js
+++ b/src/settings/actions/setting.js
@@ -1,6 +1,7 @@
 import actions from 'settings/actions';
 import messages from 'shared/messages';
-import DefaultSettings from 'shared/default-settings';
+import DefaultSettings from 'shared/settings/default';
+import * as settingsValues from 'shared/settings/values';
 
 const load = () => {
   return browser.storage.local.get('settings').then(({ settings }) => {
@@ -24,12 +25,19 @@ const save = (settings) => {
 };
 
 const set = (settings) => {
+  let value = JSON.parse(DefaultSettings.json);
+  if (settings.source === 'json') {
+    value = settingsValues.fromJson(settings.json);
+  } else if (settings.source === 'form') {
+    value = settingsValues.fromForm(settings.form);
+  }
+
   return {
     type: actions.SETTING_SET_SETTINGS,
     source: settings.source,
     json: settings.json,
     form: settings.form,
-    value: JSON.parse(settings.json),
+    value,
   };
 };
 
diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx
index a112979..a827e4e 100644
--- a/src/settings/components/form/keymaps-form.jsx
+++ b/src/settings/components/form/keymaps-form.jsx
@@ -4,29 +4,29 @@ import Input from '../ui/input';
 
 const KeyMapFields = [
   [
-    ['scroll.vertically?{count:-1}', 'Scroll down'],
-    ['scroll.vertically?{count:1}', 'Scroll up'],
-    ['scroll.horizonally?{count:-1}', 'Scroll left'],
-    ['scroll.horizonally?{count:1}', 'Scroll right'],
+    ['scroll.vertically?{"count":1}', 'Scroll down'],
+    ['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.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'],
-    ['scroll.pages?{count:1}', 'Scroll up by a screen'],
+    ['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'],
+    ['scroll.pages?{"count":1}', 'Scroll up by a screen'],
   ], [
     ['tabs.close', 'Close a tab'],
     ['tabs.reopen', 'Reopen closed tab'],
-    ['tabs.next?{count:1}', 'Select next Tab'],
-    ['tabs.prev?{count:1}', 'Select prev Tab'],
+    ['tabs.next?{"count":1}', 'Select next Tab'],
+    ['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":true}', 'Reload current tab'],
     ['tabs.pin.toggle', 'Toggle pinned state'],
     ['tabs.duplicate', 'Dupplicate a tab'],
   ], [
-    ['follow.start?{newTab:false}', 'Follow a link'],
-    ['follow.start?{newTab:true}', 'Follow a link in new tab'],
+    ['follow.start?{"newTab":false}', 'Follow a link'],
+    ['follow.start?{"newTab":true}', 'Follow a link in new tab'],
     ['navigate.histories.prev', 'Go back in histories'],
     ['navigate.histories.next', 'Go forward in histories'],
     ['navigate.link.next', 'Open next link'],
@@ -39,12 +39,12 @@ const KeyMapFields = [
     ['find.prev', 'Find previous word'],
   ], [
     ['command.show', 'Open console'],
-    ['command.show.open?{alter:false}', 'Open URL'],
-    ['command.show.open?{alter:true}', 'Alter URL'],
-    ['command.show.tabopen?{alter:false}', 'Open URL in new Tab'],
-    ['command.show.tabopen?{alter:true}', 'Alter URL in new Tab'],
-    ['command.show.winopen?{alter:false}', 'Open URL in new window'],
-    ['command.show.winopen?{alter:true}', 'Alter URL in new window'],
+    ['command.show.open?{"alter":false}', 'Open URL'],
+    ['command.show.open?{"alter":true}', 'Alter URL'],
+    ['command.show.tabopen?{"alter":false}', 'Open URL in new Tab'],
+    ['command.show.tabopen?{"alter":true}', 'Alter URL in new Tab'],
+    ['command.show.winopen?{"alter":false}', 'Open URL in new window'],
+    ['command.show.winopen?{"alter":true}', 'Alter URL in new window'],
     ['command.show.buffer', 'Open buffer command'],
   ], [
     ['addon.toggle.enabled', 'Enable or disable'],
diff --git a/src/shared/default-settings.js b/src/shared/default-settings.js
deleted file mode 100644
index 218390b..0000000
--- a/src/shared/default-settings.js
+++ /dev/null
@@ -1,131 +0,0 @@
-export default {
-  source: 'json',
-  json: `{
-  "keymaps": {
-    "0": { "type": "scroll.home" },
-    ":": { "type": "command.show" },
-    "o": { "type": "command.show.open", "alter": false },
-    "O": { "type": "command.show.open", "alter": true },
-    "t": { "type": "command.show.tabopen", "alter": false },
-    "T": { "type": "command.show.tabopen", "alter": true },
-    "w": { "type": "command.show.winopen", "alter": false },
-    "W": { "type": "command.show.winopen", "alter": true },
-    "b": { "type": "command.show.buffer" },
-    "k": { "type": "scroll.vertically", "count": -1 },
-    "j": { "type": "scroll.vertically", "count": 1 },
-    "h": { "type": "scroll.horizonally", "count": -1 },
-    "l": { "type": "scroll.horizonally", "count": 1 },
-    "<C-Y>": { "type": "scroll.vertically", "count": -1 },
-    "<C-E>": { "type": "scroll.vertically", "count": 1 },
-    "<C-U>": { "type": "scroll.pages", "count": -0.5 },
-    "<C-D>": { "type": "scroll.pages", "count": 0.5 },
-    "<C-B>": { "type": "scroll.pages", "count": -1 },
-    "<C-F>": { "type": "scroll.pages", "count": 1 },
-    "gg": { "type": "scroll.top" },
-    "G": { "type": "scroll.bottom" },
-    "$": { "type": "scroll.end" },
-    "d": { "type": "tabs.close" },
-    "u": { "type": "tabs.reopen" },
-    "K": { "type": "tabs.prev", "count": 1 },
-    "J": { "type": "tabs.next", "count": 1 },
-    "g0": { "type": "tabs.first" },
-    "g$": { "type": "tabs.last" },
-    "r": { "type": "tabs.reload", "cache": false },
-    "R": { "type": "tabs.reload", "cache": true },
-    "zp": { "type": "tabs.pin.toggle" },
-    "zd": { "type": "tabs.duplicate" },
-    "zi": { "type": "zoom.in" },
-    "zo": { "type": "zoom.out" },
-    "zz": { "type": "zoom.neutral" },
-    "f": { "type": "follow.start", "newTab": false },
-    "F": { "type": "follow.start", "newTab": true },
-    "H": { "type": "navigate.history.prev" },
-    "L": { "type": "navigate.history.next" },
-    "[[": { "type": "navigate.link.prev" },
-    "]]": { "type": "navigate.link.next" },
-    "gu": { "type": "navigate.parent" },
-    "gU": { "type": "navigate.root" },
-    "y": { "type": "urls.yank" },
-    "/": { "type": "find.start" },
-    "n": { "type": "find.next" },
-    "N": { "type": "find.prev" },
-    "<S-Esc>": { "type": "addon.toggle.enabled" }
-  },
-  "search": {
-    "default": "google",
-    "engines": {
-      "google": "https://google.com/search?q={}",
-      "yahoo": "https://search.yahoo.com/search?p={}",
-      "bing": "https://www.bing.com/search?q={}",
-      "duckduckgo": "https://duckduckgo.com/?q={}",
-      "twitter": "https://twitter.com/search?q={}",
-      "wikipedia": "https://en.wikipedia.org/w/index.php?search={}"
-    }
-  }
-}`,
-
-  'form': {
-    'keymaps': {
-      'scroll.vertically?{count:-1}': 'j',
-      'scroll.vertically?{count:1}': 'k',
-      'scroll.horizonally?{count:-1}': 'h',
-      'scroll.horizonally?{count:1}': 'l',
-      'scroll.home': '0',
-      'scroll.end': '$',
-      'scroll.pages?{count:-0.5}': '<C-U>',
-      'scroll.pages?{count:0.5}': '<C-D>',
-      'scroll.pages?{count:-1}': '<C-B>',
-      'scroll.pages?{count:1}': '<C-F>',
-
-      'tabs.close': 'd',
-      'tabs.reopen': 'u',
-      'tabs.next?{count:1}': 'J',
-      'tabs.prev?{count:1}': 'K',
-      'tabs.first': 'g0',
-      'tabs.last': 'g$',
-      'tabs.reload?{cache:true}': 'r',
-      'tabs.pin.toggle': 'zp',
-      'tabs.duplicate': 'zd',
-
-      'follow.start?{newTab:false}': 'f',
-      'follow.start?{newTab:true}': 'F',
-      'navigate.histories.prev': 'H',
-      'navigate.histories.next': 'L',
-      'navigate.link.next': ']]',
-      'navigate.link.prev': '[[',
-      'navigate.parent': 'gu',
-      'navigate.root': 'gU',
-
-      'find.start': '/',
-      'find.next': 'n',
-      'find.prev': 'N',
-
-      'command.show': ':',
-      'command.show.open?{alter:false}': 'o',
-      'command.show.open?{alter:true}': 'O',
-      'command.show.tabopen?{alter:false}': 't',
-      'command.show.tabopen?{alter:true}': 'T',
-      'command.show.winopen?{alter:false}': 'w',
-      'command.show.winopen?{alter:true}': 'W',
-      'command.show.buffer': 'b',
-
-      'addon.toggle.enabled': '<S-Esc>',
-      'urls.yank': 'y',
-      'zoom.in': 'zi',
-      'zoom.out': 'zo',
-      'zoom.neutral': 'zz',
-    },
-    'search': {
-      'default': 'google',
-      'engines': [
-        ['google', 'https,//google.com/search?q={}'],
-        ['yahoo', 'https,//search.yahoo.com/search?p={}'],
-        ['bing', 'https,//www.bing.com/search?q={}'],
-        ['duckduckgo', 'https,//duckduckgo.com/?q={}'],
-        ['twitter', 'https,//twitter.com/search?q={}'],
-        ['wikipedia', 'https,//en.wikipedia.org/w/index.php?search={}'],
-      ]
-    },
-    'blacklist': [],
-  }
-};
diff --git a/src/shared/settings/default.js b/src/shared/settings/default.js
new file mode 100644
index 0000000..fc259b8
--- /dev/null
+++ b/src/shared/settings/default.js
@@ -0,0 +1,131 @@
+export default {
+  source: 'json',
+  json: `{
+  "keymaps": {
+    "0": { "type": "scroll.home" },
+    ":": { "type": "command.show" },
+    "o": { "type": "command.show.open", "alter": false },
+    "O": { "type": "command.show.open", "alter": true },
+    "t": { "type": "command.show.tabopen", "alter": false },
+    "T": { "type": "command.show.tabopen", "alter": true },
+    "w": { "type": "command.show.winopen", "alter": false },
+    "W": { "type": "command.show.winopen", "alter": true },
+    "b": { "type": "command.show.buffer" },
+    "k": { "type": "scroll.vertically", "count": -1 },
+    "j": { "type": "scroll.vertically", "count": 1 },
+    "h": { "type": "scroll.horizonally", "count": -1 },
+    "l": { "type": "scroll.horizonally", "count": 1 },
+    "<C-Y>": { "type": "scroll.vertically", "count": -1 },
+    "<C-E>": { "type": "scroll.vertically", "count": 1 },
+    "<C-U>": { "type": "scroll.pages", "count": -0.5 },
+    "<C-D>": { "type": "scroll.pages", "count": 0.5 },
+    "<C-B>": { "type": "scroll.pages", "count": -1 },
+    "<C-F>": { "type": "scroll.pages", "count": 1 },
+    "gg": { "type": "scroll.top" },
+    "G": { "type": "scroll.bottom" },
+    "$": { "type": "scroll.end" },
+    "d": { "type": "tabs.close" },
+    "u": { "type": "tabs.reopen" },
+    "K": { "type": "tabs.prev", "count": 1 },
+    "J": { "type": "tabs.next", "count": 1 },
+    "g0": { "type": "tabs.first" },
+    "g$": { "type": "tabs.last" },
+    "r": { "type": "tabs.reload", "cache": false },
+    "R": { "type": "tabs.reload", "cache": true },
+    "zp": { "type": "tabs.pin.toggle" },
+    "zd": { "type": "tabs.duplicate" },
+    "zi": { "type": "zoom.in" },
+    "zo": { "type": "zoom.out" },
+    "zz": { "type": "zoom.neutral" },
+    "f": { "type": "follow.start", "newTab": false },
+    "F": { "type": "follow.start", "newTab": true },
+    "H": { "type": "navigate.history.prev" },
+    "L": { "type": "navigate.history.next" },
+    "[[": { "type": "navigate.link.prev" },
+    "]]": { "type": "navigate.link.next" },
+    "gu": { "type": "navigate.parent" },
+    "gU": { "type": "navigate.root" },
+    "y": { "type": "urls.yank" },
+    "/": { "type": "find.start" },
+    "n": { "type": "find.next" },
+    "N": { "type": "find.prev" },
+    "<S-Esc>": { "type": "addon.toggle.enabled" }
+  },
+  "search": {
+    "default": "google",
+    "engines": {
+      "google": "https://google.com/search?q={}",
+      "yahoo": "https://search.yahoo.com/search?p={}",
+      "bing": "https://www.bing.com/search?q={}",
+      "duckduckgo": "https://duckduckgo.com/?q={}",
+      "twitter": "https://twitter.com/search?q={}",
+      "wikipedia": "https://en.wikipedia.org/w/index.php?search={}"
+    }
+  }
+}`,
+
+  'form': {
+    'keymaps': {
+      'scroll.vertically?{"count":1}': 'j',
+      'scroll.vertically?{"count":-1}': 'k',
+      'scroll.horizonally?{"count":-1}': 'h',
+      'scroll.horizonally?{"count":1}': 'l',
+      'scroll.home': '0',
+      'scroll.end': '$',
+      'scroll.pages?{"count":-0.5}': '<C-U>',
+      'scroll.pages?{"count":0.5}': '<C-D>',
+      'scroll.pages?{"count":-1}': '<C-B>',
+      'scroll.pages?{"count":1}': '<C-F>',
+
+      'tabs.close': 'd',
+      'tabs.reopen': 'u',
+      'tabs.next?{"count":1}': 'J',
+      'tabs.prev?{"count":1}': 'K',
+      'tabs.first': 'g0',
+      'tabs.last': 'g$',
+      'tabs.reload?{"cache":true}': 'r',
+      'tabs.pin.toggle': 'zp',
+      'tabs.duplicate': 'zd',
+
+      'follow.start?{"newTab":false}': 'f',
+      'follow.start?{"newTab":true}': 'F',
+      'navigate.histories.prev': 'H',
+      'navigate.histories.next': 'L',
+      'navigate.link.next': ']]',
+      'navigate.link.prev': '[[',
+      'navigate.parent': 'gu',
+      'navigate.root': 'gU',
+
+      'find.start': '/',
+      'find.next': 'n',
+      'find.prev': 'N',
+
+      'command.show': ':',
+      'command.show.open?{"alter":false}': 'o',
+      'command.show.open?{"alter":true}': 'O',
+      'command.show.tabopen?{"alter":false}': 't',
+      'command.show.tabopen?{"alter":true}': 'T',
+      'command.show.winopen?{"alter":false}': 'w',
+      'command.show.winopen?{"alter":true}': 'W',
+      'command.show.buffer': 'b',
+
+      'addon.toggle.enabled': '<S-Esc>',
+      'urls.yank': 'y',
+      'zoom.in': 'zi',
+      'zoom.out': 'zo',
+      'zoom.neutral': 'zz',
+    },
+    'search': {
+      'default': 'google',
+      'engines': [
+        ['google', 'https,//google.com/search?q={}'],
+        ['yahoo', 'https,//search.yahoo.com/search?p={}'],
+        ['bing', 'https,//www.bing.com/search?q={}'],
+        ['duckduckgo', 'https,//duckduckgo.com/?q={}'],
+        ['twitter', 'https,//twitter.com/search?q={}'],
+        ['wikipedia', 'https,//en.wikipedia.org/w/index.php?search={}'],
+      ]
+    },
+    'blacklist': [],
+  }
+};
diff --git a/src/shared/settings/values.js b/src/shared/settings/values.js
new file mode 100644
index 0000000..d86cfdc
--- /dev/null
+++ b/src/shared/settings/values.js
@@ -0,0 +1,35 @@
+const operationFromName = (name) => {
+  let [type, argStr] = name.split('?');
+  let args = {};
+  if (argStr) {
+    args = JSON.parse(argStr);
+  }
+  return Object.assign({ type }, args);
+};
+
+const fromJson = (json) => {
+  return JSON.parse(json);
+};
+
+const fromForm = (form) => {
+  let keymaps = {};
+  for (let name of Object.keys(form.keymaps)) {
+    let keys = form.keymaps[name];
+    keymaps[keys] = operationFromName(name);
+  }
+
+  let engines = {};
+  for (let { name, url } of form.search.engines) {
+    engines[name] = url;
+  }
+  let search = {
+    default: form.search.default,
+    engines,
+  };
+
+  let blacklist = form.blacklist;
+
+  return { keymaps, search, blacklist };
+};
+
+export { fromJson, fromForm };
-- 
cgit v1.2.3


From 2c46e9d448142c84b802ef8e0e1af53524dc4759 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 25 Nov 2017 22:58:10 +0900
Subject: fix keymap form

---
 src/settings/components/form/keymaps-form.jsx | 4 ++--
 src/shared/settings/default.js                | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/settings/components')

diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx
index a827e4e..8e93c3f 100644
--- a/src/settings/components/form/keymaps-form.jsx
+++ b/src/settings/components/form/keymaps-form.jsx
@@ -27,8 +27,8 @@ const KeyMapFields = [
   ], [
     ['follow.start?{"newTab":false}', 'Follow a link'],
     ['follow.start?{"newTab":true}', 'Follow a link in new tab'],
-    ['navigate.histories.prev', 'Go back in histories'],
-    ['navigate.histories.next', 'Go forward in histories'],
+    ['navigate.history.prev', 'Go back in histories'],
+    ['navigate.history.next', 'Go forward in histories'],
     ['navigate.link.next', 'Open next link'],
     ['navigate.link.prev', 'Open previous link'],
     ['navigate.parent', 'Go to parent directory'],
diff --git a/src/shared/settings/default.js b/src/shared/settings/default.js
index fc259b8..69238e3 100644
--- a/src/shared/settings/default.js
+++ b/src/shared/settings/default.js
@@ -89,8 +89,8 @@ export default {
 
       'follow.start?{"newTab":false}': 'f',
       'follow.start?{"newTab":true}': 'F',
-      'navigate.histories.prev': 'H',
-      'navigate.histories.next': 'L',
+      'navigate.history.prev': 'H',
+      'navigate.history.next': 'L',
       'navigate.link.next': ']]',
       'navigate.link.prev': '[[',
       'navigate.parent': 'gu',
-- 
cgit v1.2.3


From 256e7372d4a96079b993115eabde8b33d400c7c8 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 08:25:23 +0900
Subject: settings migration between json and form

---
 src/settings/components/form/blacklist-form.jsx |  2 +-
 src/settings/components/index.jsx               | 23 +++++++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

(limited to 'src/settings/components')

diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx
index 9cb547b..4333929 100644
--- a/src/settings/components/form/blacklist-form.jsx
+++ b/src/settings/components/form/blacklist-form.jsx
@@ -34,7 +34,7 @@ class BlacklistForm extends Component {
 
     let name = e.target.name;
     let index = e.target.getAttribute('data-index');
-    let next = this.props.value.slice();
+    let next = this.props.value ? this.props.value.slice() : [];
 
     if (name === 'url') {
       next[index] = e.target.value;
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index fb25df6..ae7cd31 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -6,6 +6,7 @@ import KeymapsForm from './form/keymaps-form';
 import BlacklistForm from './form/blacklist-form';
 import * as settingActions from 'settings/actions/setting';
 import * as validator from 'shared/validators/setting';
+import * as settingsValues from 'shared/settings/values';
 
 class SettingsComponent extends Component {
   constructor(props, context) {
@@ -95,7 +96,7 @@ class SettingsComponent extends Component {
             label='Use form'
             checked={this.state.settings.source === 'form'}
             value='form'
-            onChange={this.bindValue.bind(this)} />
+            onChange={this.bindSource.bind(this)} />
 
           <Input
             type='radio'
@@ -103,7 +104,7 @@ class SettingsComponent extends Component {
             label='Use plain JSON'
             checked={this.state.settings.source === 'json'}
             value='json'
-            onChange={this.bindValue.bind(this)} />
+            onChange={this.bindSource.bind(this)} />
 
           { fields }
         </form>
@@ -143,6 +144,24 @@ class SettingsComponent extends Component {
     this.setState(next);
     this.context.store.dispatch(settingActions.save(next.settings));
   }
+
+  bindSource(e) {
+    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);
+    } else if (from === 'json' && to === 'form') {
+      next.settings.form =
+        settingsValues.formFromJson(this.state.settings.json);
+    }
+    next.settings.source = to;
+
+    this.setState(next);
+    this.context.store.dispatch(settingActions.save(next.settings));
+  }
 }
 
 export default SettingsComponent;
-- 
cgit v1.2.3


From e90cf895add023240e4aed700db76cb4b38595a5 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 09:43:43 +0900
Subject: add input test

---
 karma.conf.js                              |  2 +
 src/settings/components/ui/input.jsx       |  5 +-
 test/settings/components/ui/input.test.jsx | 83 ++++++++++++++++++++++++++++++
 3 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 test/settings/components/ui/input.test.jsx

(limited to 'src/settings/components')

diff --git a/karma.conf.js b/karma.conf.js
index 859cee0..46a1774 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -7,11 +7,13 @@ module.exports = function (config) {
     frameworks: ['mocha'],
     files: [
       'test/**/*.test.js',
+      'test/**/*.test.jsx',
       'test/**/*.html'
     ],
 
     preprocessors: {
       'test/**/*.test.js': [ 'webpack' ],
+      'test/**/*.test.jsx': [ 'webpack' ],
       'test/**/*.html': ['html2js']
     },
 
diff --git a/src/settings/components/ui/input.jsx b/src/settings/components/ui/input.jsx
index 5138411..e99dbc7 100644
--- a/src/settings/components/ui/input.jsx
+++ b/src/settings/components/ui/input.jsx
@@ -6,10 +6,7 @@ class Input extends Component {
   renderText(props) {
     let inputClassName = props.error ? 'input-error' : '';
     return <div className='settings-ui-input'>
-      <label
-        type='text'
-        htmlFor={props.id}
-      >{ props.label }</label>
+      <label htmlFor={props.id}>{ props.label }</label>
       <input type='text' className={inputClassName} {...props} />
     </div>;
   }
diff --git a/test/settings/components/ui/input.test.jsx b/test/settings/components/ui/input.test.jsx
new file mode 100644
index 0000000..98f2cef
--- /dev/null
+++ b/test/settings/components/ui/input.test.jsx
@@ -0,0 +1,83 @@
+import { expect } from 'chai';
+import { h, render } from 'preact';
+import Input from 'settings/components/ui/input'
+
+describe("settings/ui/Input", () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  context("type=text", () => {
+    it('renders text input', () => {
+      render(<Input type='text' name='myname' label='myfield' value='myvalue'/>, document.body)
+
+      let label = document.querySelector('label');
+      let input = document.querySelector('input');
+      expect(label.textContent).to.contain('myfield');
+      expect(input.type).to.contain('text');
+      expect(input.name).to.contain('myname');
+      expect(input.value).to.contain('myvalue');
+    });
+
+    it('invoke onChange', (done) => {
+      render(<Input type='text' name='myname' label='myfield' value='myvalue' onChange={(e) => {
+        expect(e.target.value).to.equal('newvalue');
+        done();
+      }}/>, document.body);
+
+      let input = document.querySelector('input');
+      input.value = 'newvalue';
+      input.dispatchEvent(new Event('change'))
+    });
+  });
+
+  context("type=radio", () => {
+    it('renders radio button', () => {
+      render(<Input type='radio' name='myname' label='myfield' value='myvalue'/>, document.body)
+
+      let label = document.querySelector('label');
+      let input = document.querySelector('input');
+      expect(label.textContent).to.contain('myfield');
+      expect(input.type).to.contain('radio');
+      expect(input.name).to.contain('myname');
+      expect(input.value).to.contain('myvalue');
+    });
+
+    it('invoke onChange', (done) => {
+      render(<Input type='text' name='radio' label='myfield' value='myvalue' onChange={(e) => {
+        expect(e.target.checked).to.be.true;
+        done();
+      }}/>, document.body);
+
+      let input = document.querySelector('input');
+      input.checked = true;
+      input.dispatchEvent(new Event('change'))
+    });
+  });
+
+  context("type=textarea", () => {
+    it('renders textarea button', () => {
+      render(<Input type='textarea' name='myname' label='myfield' value='myvalue' error='myerror' />, document.body)
+
+      let label = document.querySelector('label');
+      let textarea = document.querySelector('textarea');
+      let error = document.querySelector('.settings-ui-input-error');
+      expect(label.textContent).to.contain('myfield');
+      expect(textarea.nodeName).to.contain('TEXTAREA');
+      expect(textarea.name).to.contain('myname');
+      expect(textarea.value).to.contain('myvalue');
+      expect(error.textContent).to.contain('myerror');
+    });
+
+    it('invoke onChange', (done) => {
+      render(<Input type='textarea' name='myname' label='myfield' value='myvalue' onChange={(e) => {
+        expect(e.target.value).to.equal('newvalue');
+        done();
+      }}/>, document.body);
+
+      let input = document.querySelector('textarea');
+      input.value = 'newvalue'
+      input.dispatchEvent(new Event('change'))
+    });
+  });
+});
-- 
cgit v1.2.3


From d195890eb957e5b6e40f7c01ce34d07e7ccf22b5 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 11:37:25 +0900
Subject: rename serach engine

---
 .../components/form/search-engine-form.jsx         | 73 ----------------------
 .../components/form/search-engine-form.scss        | 26 --------
 src/settings/components/form/search-form.jsx       | 73 ++++++++++++++++++++++
 src/settings/components/form/search-form.scss      | 26 ++++++++
 src/settings/components/index.jsx                  |  4 +-
 5 files changed, 101 insertions(+), 101 deletions(-)
 delete mode 100644 src/settings/components/form/search-engine-form.jsx
 delete mode 100644 src/settings/components/form/search-engine-form.scss
 create mode 100644 src/settings/components/form/search-form.jsx
 create mode 100644 src/settings/components/form/search-form.scss

(limited to 'src/settings/components')

diff --git a/src/settings/components/form/search-engine-form.jsx b/src/settings/components/form/search-engine-form.jsx
deleted file mode 100644
index faa066f..0000000
--- a/src/settings/components/form/search-engine-form.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import './search-engine-form.scss';
-import { h, Component } from 'preact';
-import AddButton from '../ui/add-button';
-import DeleteButton from '../ui/delete-button';
-
-class SearchEngineForm extends Component {
-
-  render() {
-    let value = this.props.value;
-    if (!value) {
-      value = { default: '', engines: []};
-    }
-    let {
-      default: defaultEngine,
-      engines
-    } = value;
-
-    return <div className='form-search-engine-form'>
-      <div className='form-search-engine-form-header'>
-        <div className='column-name'>Name</div>
-        <div className='column-url'>URL</div>
-        <div className='column-option'>Default</div>
-      </div>
-      {
-        engines.map((engine, index) => {
-          return <div key={index} className='form-search-engine-form-row'>
-            <input data-index={index} type='text' name='name'
-              className='column-name' value={engine[0]}
-              onChange={this.bindValue.bind(this)} />
-            <input data-index={index} type='text' name='url'
-              placeholder='http://example.com/?q={}'
-              className='column-url' value={engine[1]}
-              onChange={this.bindValue.bind(this)} />
-            <div className='column-option'>
-              <input data-index={index} type='radio' name='default'
-                checked={defaultEngine === engine[0]}
-                onChange={this.bindValue.bind(this)} />
-              <DeleteButton data-index={index} name='delete'
-                onClick={this.bindValue.bind(this)} />
-            </div>
-          </div>;
-        })
-      }
-      <AddButton name='add' onClick={this.bindValue.bind(this)} />
-    </div>;
-  }
-
-  bindValue(e) {
-    if (!this.props.onChange) {
-      return;
-    }
-
-    let name = e.target.name;
-    let index = e.target.getAttribute('data-index');
-    let next = Object.assign({}, this.props.value);
-
-    if (name === 'name') {
-      next.engines[index][0] = e.target.value;
-    } else if (name === 'url') {
-      next.engines[index][1] = e.target.value;
-    } else if (name === 'default') {
-      next.default = this.props.value.engines[index][0];
-    } else if (name === 'add') {
-      next.engines.push(['', '']);
-    } else if (name === 'delete') {
-      next.engines.splice(index, 1);
-    }
-
-    this.props.onChange(next);
-  }
-}
-
-export default SearchEngineForm;
diff --git a/src/settings/components/form/search-engine-form.scss b/src/settings/components/form/search-engine-form.scss
deleted file mode 100644
index 0d33c23..0000000
--- a/src/settings/components/form/search-engine-form.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.form-search-engine-form {
-  @mixin row-base {
-    display: flex;
-
-    .column-name {
-      flex: 1;
-    }
-    .column-url {
-      flex: 5;
-    }
-    .column-option {
-      text-align: right;
-      flex-basis: 5rem;
-    }
-  }
-
-  &-header {
-    @include row-base;
-
-    font-weight: bold;
-  }
-
-  &-row {
-    @include row-base;
-  }
-}
diff --git a/src/settings/components/form/search-form.jsx b/src/settings/components/form/search-form.jsx
new file mode 100644
index 0000000..9bafb8d
--- /dev/null
+++ b/src/settings/components/form/search-form.jsx
@@ -0,0 +1,73 @@
+import './search-form.scss';
+import { h, Component } from 'preact';
+import AddButton from '../ui/add-button';
+import DeleteButton from '../ui/delete-button';
+
+class SearchForm extends Component {
+
+  render() {
+    let value = this.props.value;
+    if (!value) {
+      value = { default: '', engines: []};
+    }
+    let {
+      default: defaultEngine,
+      engines
+    } = value;
+
+    return <div className='form-search-form'>
+      <div className='form-search-form-header'>
+        <div className='column-name'>Name</div>
+        <div className='column-url'>URL</div>
+        <div className='column-option'>Default</div>
+      </div>
+      {
+        engines.map((engine, index) => {
+          return <div key={index} className='form-search-form-row'>
+            <input data-index={index} type='text' name='name'
+              className='column-name' value={engine[0]}
+              onChange={this.bindValue.bind(this)} />
+            <input data-index={index} type='text' name='url'
+              placeholder='http://example.com/?q={}'
+              className='column-url' value={engine[1]}
+              onChange={this.bindValue.bind(this)} />
+            <div className='column-option'>
+              <input data-index={index} type='radio' name='default'
+                checked={defaultEngine === engine[0]}
+                onChange={this.bindValue.bind(this)} />
+              <DeleteButton data-index={index} name='delete'
+                onClick={this.bindValue.bind(this)} />
+            </div>
+          </div>;
+        })
+      }
+      <AddButton name='add' onClick={this.bindValue.bind(this)} />
+    </div>;
+  }
+
+  bindValue(e) {
+    if (!this.props.onChange) {
+      return;
+    }
+
+    let name = e.target.name;
+    let index = e.target.getAttribute('data-index');
+    let next = Object.assign({}, this.props.value);
+
+    if (name === 'name') {
+      next.engines[index][0] = e.target.value;
+    } else if (name === 'url') {
+      next.engines[index][1] = e.target.value;
+    } else if (name === 'default') {
+      next.default = this.props.value.engines[index][0];
+    } else if (name === 'add') {
+      next.engines.push(['', '']);
+    } else if (name === 'delete') {
+      next.engines.splice(index, 1);
+    }
+
+    this.props.onChange(next);
+  }
+}
+
+export default SearchForm;
diff --git a/src/settings/components/form/search-form.scss b/src/settings/components/form/search-form.scss
new file mode 100644
index 0000000..8814ef5
--- /dev/null
+++ b/src/settings/components/form/search-form.scss
@@ -0,0 +1,26 @@
+.form-search-form {
+  @mixin row-base {
+    display: flex;
+
+    .column-name {
+      flex: 1;
+    }
+    .column-url {
+      flex: 5;
+    }
+    .column-option {
+      text-align: right;
+      flex-basis: 5rem;
+    }
+  }
+
+  &-header {
+    @include row-base;
+
+    font-weight: bold;
+  }
+
+  &-row {
+    @include row-base;
+  }
+}
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index ae7cd31..b7de259 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -1,7 +1,7 @@
 import './site.scss';
 import { h, Component } from 'preact';
 import Input from './ui/input';
-import SearchEngineForm from './form/search-engine-form';
+import SearchForm from './form/search-form';
 import KeymapsForm from './form/keymaps-form';
 import BlacklistForm from './form/blacklist-form';
 import * as settingActions from 'settings/actions/setting';
@@ -49,7 +49,7 @@ class SettingsComponent extends Component {
       </fieldset>
       <fieldset>
         <legend>Search Engines</legend>
-        <SearchEngineForm
+        <SearchForm
           value={this.state.settings.form.search}
           onChange={value => this.bindForm('search', value)}
         />
-- 
cgit v1.2.3


From 0967304ebe713bc24078b20ac3a710fd42f2f611 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 12:18:12 +0900
Subject: add SearchForm test

---
 src/settings/components/form/search-form.jsx       |  18 ++--
 .../components/form/search-engine-form.test.jsx    | 104 +++++++++++++++++++++
 2 files changed, 115 insertions(+), 7 deletions(-)
 create mode 100644 test/settings/components/form/search-engine-form.test.jsx

(limited to 'src/settings/components')

diff --git a/src/settings/components/form/search-form.jsx b/src/settings/components/form/search-form.jsx
index 9bafb8d..98b0655 100644
--- a/src/settings/components/form/search-form.jsx
+++ b/src/settings/components/form/search-form.jsx
@@ -10,10 +10,9 @@ class SearchForm extends Component {
     if (!value) {
       value = { default: '', engines: []};
     }
-    let {
-      default: defaultEngine,
-      engines
-    } = value;
+    if (!value.engines) {
+      value.engines = [];
+    }
 
     return <div className='form-search-form'>
       <div className='form-search-form-header'>
@@ -22,7 +21,7 @@ class SearchForm extends Component {
         <div className='column-option'>Default</div>
       </div>
       {
-        engines.map((engine, index) => {
+        value.engines.map((engine, index) => {
           return <div key={index} className='form-search-form-row'>
             <input data-index={index} type='text' name='name'
               className='column-name' value={engine[0]}
@@ -33,7 +32,7 @@ class SearchForm extends Component {
               onChange={this.bindValue.bind(this)} />
             <div className='column-option'>
               <input data-index={index} type='radio' name='default'
-                checked={defaultEngine === engine[0]}
+                checked={value.default === engine[0]}
                 onChange={this.bindValue.bind(this)} />
               <DeleteButton data-index={index} name='delete'
                 onClick={this.bindValue.bind(this)} />
@@ -50,12 +49,17 @@ class SearchForm extends Component {
       return;
     }
 
+    let value = this.props.value;
     let name = e.target.name;
     let index = e.target.getAttribute('data-index');
-    let next = Object.assign({}, this.props.value);
+    let next = Object.assign({}, {
+      default: value.default,
+      engines: value.engines ? value.engines.slice() : [],
+    });
 
     if (name === 'name') {
       next.engines[index][0] = e.target.value;
+      next.default = this.props.value.engines[index][0];
     } else if (name === 'url') {
       next.engines[index][1] = e.target.value;
     } else if (name === 'default') {
diff --git a/test/settings/components/form/search-engine-form.test.jsx b/test/settings/components/form/search-engine-form.test.jsx
new file mode 100644
index 0000000..9600cae
--- /dev/null
+++ b/test/settings/components/form/search-engine-form.test.jsx
@@ -0,0 +1,104 @@
+import { expect } from 'chai';
+import { h, render } from 'preact';
+import SearchForm from 'settings/components/form/search-form'
+
+describe("settings/form/SearchForm", () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('render', () => {
+    it('renders SearchForm', () => {
+      render(<SearchForm value={{
+        default: 'google',
+        engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']],
+      }} />, document.body);
+
+      let names = document.querySelectorAll('input[name=name]');
+      expect(names).to.have.lengthOf(2);
+      expect(names[0].value).to.equal('google');
+      expect(names[1].value).to.equal('yahoo');
+
+      let urls = document.querySelectorAll('input[name=url]');
+      expect(urls).to.have.lengthOf(2);
+      expect(urls[0].value).to.equal('google.com');
+      expect(urls[1].value).to.equal('yahoo.com');
+    });
+
+    it('renders blank value', () => {
+      render(<SearchForm />, document.body);
+
+      let names = document.querySelectorAll('input[name=name]');
+      let urls = document.querySelectorAll('input[name=url]');
+      expect(names).to.have.lengthOf(0);
+      expect(urls).to.have.lengthOf(0);
+    });
+
+    it('renders blank engines', () => {
+      render(<SearchForm value={{ default: 'google' }} />, document.body);
+
+      let names = document.querySelectorAll('input[name=name]');
+      let urls = document.querySelectorAll('input[name=url]');
+      expect(names).to.have.lengthOf(0);
+      expect(urls).to.have.lengthOf(0);
+    });
+  });
+
+  describe('onChange event', () => {
+    it('invokes onChange event on edit', (done) => {
+      render(<SearchForm
+        value={{
+          default: 'google',
+          engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']]
+        }}
+        onChange={value => {
+          expect(value.default).to.equal('louvre');
+          expect(value.engines).to.have.lengthOf(2)
+            .and.have.deep.members([['louvre', 'google.com'], ['yahoo', 'yahoo.com']])
+
+          done();
+        }} />, document.body);
+
+      let radio = document.querySelectorAll('input[type=radio]');
+      radio.checked = true;
+
+      let name = document.querySelector('input[name=name]');
+      name.value = 'louvre';
+      name.dispatchEvent(new Event('change'))
+    });
+
+    it('invokes onChange event on delete', (done) => {
+      render(<SearchForm value={{
+          default: 'yahoo',
+          engines: [['louvre', 'google.com'], ['yahoo', 'yahoo.com']]
+        }}
+        onChange={value => {
+          expect(value.default).to.equal('yahoo');
+          expect(value.engines).to.have.lengthOf(1)
+            .and.have.deep.members([['yahoo', 'yahoo.com']])
+
+          done();
+        }} />, document.body);
+
+      let button = document.querySelector('input[type=button]');
+      button.click();
+    });
+
+    it('invokes onChange event on add', (done) => {
+      render(<SearchForm value={{
+          default: 'yahoo',
+          engines: [['google', 'google.com']]
+        }}
+        onChange={value => {
+          expect(value.default).to.equal('yahoo');
+          expect(value.engines).to.have.lengthOf(2)
+            .and.have.deep.members([['google', 'google.com'], ['', '']])
+
+          done();
+        }} />, document.body);
+
+      let button = document.querySelector('input[type=button].ui-add-button');
+      button.click();
+    });
+  });
+});
-- 
cgit v1.2.3


From 705c47bc6379a8d1fea4f775a6af98c97d4eab81 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 12:34:49 +0900
Subject: add KeymapsForm test

---
 src/settings/components/form/keymaps-form.jsx      |  6 ++-
 .../settings/components/form/keymaps-form.test.jsx | 53 ++++++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 test/settings/components/form/keymaps-form.test.jsx

(limited to 'src/settings/components')

diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx
index 8e93c3f..f64320c 100644
--- a/src/settings/components/form/keymaps-form.jsx
+++ b/src/settings/components/form/keymaps-form.jsx
@@ -58,6 +58,10 @@ const KeyMapFields = [
 class KeymapsForm extends Component {
 
   render() {
+    let values = this.props.value;
+    if (!values) {
+      values = {};
+    }
     return <div className='keymap-fields'>
       {
         KeyMapFields.map((group, index) => {
@@ -66,7 +70,7 @@ class KeymapsForm extends Component {
               group.map((field) => {
                 let name = field[0];
                 let label = field[1];
-                let value = this.props.value[name];
+                let value = values[name];
                 return <Input
                   type='text' id={name} name={name} key={name}
                   label={label} value={value}
diff --git a/test/settings/components/form/keymaps-form.test.jsx b/test/settings/components/form/keymaps-form.test.jsx
new file mode 100644
index 0000000..e9f9359
--- /dev/null
+++ b/test/settings/components/form/keymaps-form.test.jsx
@@ -0,0 +1,53 @@
+import { expect } from 'chai';
+import { h, render } from 'preact';
+import KeymapsForm from 'settings/components/form/keymaps-form'
+
+describe("settings/form/KeymapsForm", () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('render', () => {
+    it('renders KeymapsForm', () => {
+      render(<KeymapsForm value={{
+        'scroll.vertically?{"count":1}': 'j',
+        'scroll.vertically?{"count":-1}': 'k',
+      }} />, document.body);
+
+      let inputj = document.getElementById('scroll.vertically?{"count":1}');
+      let inputk = document.getElementById('scroll.vertically?{"count":-1}');
+
+      expect(inputj.value).to.equal('j');
+      expect(inputk.value).to.equal('k');
+    });
+
+    it('renders blank value', () => {
+      render(<KeymapsForm />, document.body);
+
+      let inputj = document.getElementById('scroll.vertically?{"count":1}');
+      let inputk = document.getElementById('scroll.vertically?{"count":-1}');
+
+      expect(inputj.value).to.be.empty;
+      expect(inputk.value).to.be.empty;
+    });
+  });
+
+  describe('onChange event', () => {
+    it('invokes onChange event on edit', (done) => {
+      render(<KeymapsForm
+        value={{
+          'scroll.vertically?{"count":1}': 'j',
+          'scroll.vertically?{"count":-1}': 'k',
+        }}
+        onChange={value => {
+          expect(value['scroll.vertically?{"count":1}']).to.equal('jjj');
+
+          done();
+        }} />, document.body);
+
+      let input = document.getElementById('scroll.vertically?{"count":1}');
+      input.value = 'jjj';
+      input.dispatchEvent(new Event('change'))
+    });
+  });
+});
-- 
cgit v1.2.3


From 26777d9e309dbc328b59581adb92f160c18f812c Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 16:41:34 +0900
Subject: fix form css

---
 src/settings/components/form/blacklist-form.jsx |  3 ++-
 src/settings/components/form/keymaps-form.scss  |  2 +-
 src/settings/components/form/search-form.jsx    |  3 ++-
 src/settings/components/form/search-form.scss   |  2 ++
 src/settings/components/site.scss               |  2 +-
 src/settings/components/ui/add-button.jsx       |  2 +-
 src/settings/components/ui/add-button.scss      | 12 +++++++++++-
 src/settings/components/ui/delete-button.scss   |  1 +
 src/settings/components/ui/input.scss           |  3 ++-
 9 files changed, 23 insertions(+), 7 deletions(-)

(limited to 'src/settings/components')

diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx
index 4333929..7ae9652 100644
--- a/src/settings/components/form/blacklist-form.jsx
+++ b/src/settings/components/form/blacklist-form.jsx
@@ -23,7 +23,8 @@ class BlacklistForm extends Component {
           </div>;
         })
       }
-      <AddButton name='add' onClick={this.bindValue.bind(this)} />
+      <AddButton name='add' style='float:right'
+        onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
diff --git a/src/settings/components/form/keymaps-form.scss b/src/settings/components/form/keymaps-form.scss
index 8b86c80..3a83910 100644
--- a/src/settings/components/form/keymaps-form.scss
+++ b/src/settings/components/form/keymaps-form.scss
@@ -1,5 +1,5 @@
 .form-keymaps-form {
-  column-count: 2;
+  column-count: 3;
   .keymap-fields-group {
     margin-top: 24px;
   }
diff --git a/src/settings/components/form/search-form.jsx b/src/settings/components/form/search-form.jsx
index 98b0655..e85761f 100644
--- a/src/settings/components/form/search-form.jsx
+++ b/src/settings/components/form/search-form.jsx
@@ -40,7 +40,8 @@ class SearchForm extends Component {
           </div>;
         })
       }
-      <AddButton name='add' onClick={this.bindValue.bind(this)} />
+      <AddButton name='add' style='float:right'
+        onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
diff --git a/src/settings/components/form/search-form.scss b/src/settings/components/form/search-form.scss
index 8814ef5..26b2f44 100644
--- a/src/settings/components/form/search-form.scss
+++ b/src/settings/components/form/search-form.scss
@@ -4,9 +4,11 @@
 
     .column-name {
       flex: 1;
+      min-width: 0;
     }
     .column-url {
       flex: 5;
+      min-width: 0;
     }
     .column-option {
       text-align: right;
diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss
index c8dd422..c0c4f9e 100644
--- a/src/settings/components/site.scss
+++ b/src/settings/components/site.scss
@@ -20,7 +20,7 @@
 
     legend {
       font-size: 1.5rem;
-      line-height: 1.5rem;
+      padding: .5rem 0;
       font-weight: bold;
     }
   }
diff --git a/src/settings/components/ui/add-button.jsx b/src/settings/components/ui/add-button.jsx
index c8d8856..79292d8 100644
--- a/src/settings/components/ui/add-button.jsx
+++ b/src/settings/components/ui/add-button.jsx
@@ -4,7 +4,7 @@ import { h, Component } from 'preact';
 class AddButton extends Component {
   render() {
     return <input
-      className='ui-add-button' type='button' value='Add'
+      className='ui-add-button' type='button' value='&#x271a;'
       {...this.props} />;
   }
 }
diff --git a/src/settings/components/ui/add-button.scss b/src/settings/components/ui/add-button.scss
index 1c893ae..beb5688 100644
--- a/src/settings/components/ui/add-button.scss
+++ b/src/settings/components/ui/add-button.scss
@@ -1,3 +1,13 @@
 .ui-add-button {
-  font-size: 80%
+  border: none;
+  padding: 4;
+  display: inline;
+  background: none;
+  font-weight: bold;
+  color: green;
+  cursor: pointer;
+
+  &:hover {
+    color: darkgreen;
+  }
 }
diff --git a/src/settings/components/ui/delete-button.scss b/src/settings/components/ui/delete-button.scss
index 7aa2f39..5932a72 100644
--- a/src/settings/components/ui/delete-button.scss
+++ b/src/settings/components/ui/delete-button.scss
@@ -5,6 +5,7 @@
   display: inline;
   background: none;
   color: red;
+  cursor: pointer;
 
   &:hover {
     color: darkred;
diff --git a/src/settings/components/ui/input.scss b/src/settings/components/ui/input.scss
index 92df712..ad4daf8 100644
--- a/src/settings/components/ui/input.scss
+++ b/src/settings/components/ui/input.scss
@@ -11,8 +11,9 @@
     display: inline-block;
   }
 
-  input {
+  input[type='text'] {
     padding: 4px;
+    width: 8rem;
   }
 
   input.input-crror,
-- 
cgit v1.2.3


From c23333110d846b4bf4a76422853820875b74e93a Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 16:41:59 +0900
Subject: confirm before setting migration

---
 .eslintrc                         | 1 +
 src/settings/components/index.jsx | 9 +++++++++
 2 files changed, 10 insertions(+)

(limited to 'src/settings/components')

diff --git a/.eslintrc b/.eslintrc
index ab61dc7..0f230c7 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -36,6 +36,7 @@
     "newline-after-var": "off",
     "newline-before-return": "off",
     "newline-per-chained-call": "off",
+    "no-alert": "off",
     "no-bitwise": "off",
     "no-console": ["error", { "allow": ["warn", "error"] }],
     "no-empty-function": "off",
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index b7de259..3961982 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -8,6 +8,10 @@ import * as settingActions from 'settings/actions/setting';
 import * as validator from 'shared/validators/setting';
 import * as settingsValues from 'shared/settings/values';
 
+const DO_YOU_WANT_TO_CONTINUE =
+  'Some settings in JSON can be lose on migrating.  ' +
+  'Do you want to continue ?';
+
 class SettingsComponent extends Component {
   constructor(props, context) {
     super(props, context);
@@ -154,6 +158,11 @@ class SettingsComponent extends Component {
       next.settings.json =
         settingsValues.jsonFromForm(this.state.settings.form);
     } 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);
     }
-- 
cgit v1.2.3