Add option to toggle debug mode (#213)

This PR adds a checkbox which allows you to toggle the debug mode. The debug mode basically just adds a css class on every OctoLinker link so you easily spot all links. On Firefox and Opera the settings are stored locally. Chrome stores the settings within the users account, if available.
OctoLinker · Nov 29, 2016 · 706be13 · 706be13
1 parent 85a46b4
commit 706be13
Show file tree

Hide file tree

Showing 12 changed files with 113 additions and 6 deletions.
diff --git a/assets/manifest.json b/assets/manifest.json
@@ -39,6 +39,7 @@
     }
   ],
   "permissions": [
+    "storage",
     "https://github.com/",
     "https://gist.github.com/",
     "https://githublinker.herokuapp.com/"

diff --git a/assets/options.html b/assets/options.html
@@ -2,8 +2,24 @@
 <head>
   <meta charset="UTF-8">
   <title></title>
+  <style type="text/css">
+    body {
+      user-select: none;
+    }
+    label {
+      display: block;
+      margin: 12px 0;
+    }
+
+    #options {
+      margin-bottom: 36px;
+    }
+  </style>
 </head>
 <body>
+  <div id="options"></div>
+
   <iframe src="http://ghbtns.com/github-btn.html?user=octolinker&amp;repo=browser-extension&amp;type=watch&amp;count=true&amp;size=small" style="background-color: transparent; border: none; overflow:hidden" width="120" height="20"></iframe>
+  <script src="options.js"></script>
 </body>
 </html>
diff --git a/lib/app.js b/lib/app.js
@@ -1,5 +1,8 @@
 import 'babel-polyfill';
 import OctoLinker from './octo-linker.js';
+import * as storage from './options/storage.js';
 
-const octoLinker = new OctoLinker();
-octoLinker.init();
+storage.load(() => {
+  const octoLinker = new OctoLinker();
+  octoLinker.init();
+});
diff --git a/lib/octo-linker.js b/lib/octo-linker.js
@@ -6,10 +6,11 @@ import clickHandler from './click-handler';
 import Plugins from './plugin-manager.js';
 import debugMode from './debug-mode.js';
 import loadPlugins from './load-plugins';
+import * as storage from './options/storage.js';
 
 
 function initialize(self) {
-  debugMode(false);
+  debugMode(storage.get('debugMode'));
   clickHandler(resolvers);
   notification();
 
@@ -38,8 +39,8 @@ function run(self) {
 }
 
 export default class OctoLinkerCore {
-  constructor() {
-    initialize(this);
+  constructor(options) {
+    initialize(this, options);
   }
 
   init() {

diff --git a/lib/options/components/checkbox.js b/lib/options/components/checkbox.js
@@ -0,0 +1,9 @@
+export default ({ name, label, value, defaultValue }) => {
+  const val = (value === undefined) ? defaultValue : value;
+
+  return `<section>
+    <label>
+      <input type="checkbox" name="${name}" ${val ? 'checked' : ''} /> ${label}
+    </label>
+  </section>`;
+};
diff --git a/lib/options/components/index.js b/lib/options/components/index.js
@@ -0,0 +1,7 @@
+import checkbox from './checkbox';
+
+export default function ({ type, ...rest }) {
+  if (type === 'checkbox') {
+    return checkbox(rest);
+  }
+}
diff --git a/lib/options/options.js b/lib/options/options.js
@@ -0,0 +1,9 @@
+export const options = [
+  {
+    type: 'checkbox',
+    name: 'debugMode',
+    label: 'Debug mode',
+    value: undefined,
+    defaultValue: false,
+  },
+];
diff --git a/lib/options/page.js b/lib/options/page.js
@@ -0,0 +1,22 @@
+import components from './components';
+import * as storage from './storage';
+import { options } from './options';
+
+const formEl = document.querySelector('#options');
+
+storage.load(() => {
+  options.forEach((item) => {
+    formEl.innerHTML += components({
+      ...item,
+      value: storage.get(item.name),
+    });
+  });
+});
+
+formEl.addEventListener('click', ({ target }) => {
+  const tag = target.tagName.toLowerCase();
+
+  if (tag === 'input' && target.type === 'checkbox') {
+    storage.set(target.name, target.checked);
+  }
+});
diff --git a/lib/options/storage.js b/lib/options/storage.js
@@ -0,0 +1,24 @@
+import { options } from './options';
+
+const store = {};
+const defaults = {};
+
+options.forEach((item) => {
+  defaults[item.name] = item.defaultValue;
+});
+
+export const load = (cb) => {
+  (chrome.storage.sync || chrome.storage.local).get(null, (data) => {
+    Object.assign(store, defaults, data);
+
+    cb();
+  });
+};
+
+export const get = key => store[key];
+
+export const set = (key, value) => {
+  (chrome.storage.sync || chrome.storage.local).set({
+    [key]: value,
+  });
+};
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "version": "json -I -f assets/manifest.json -e \"this.version='`json -f package.json version`'\" && git add assets/manifest.json",
     "package-all": "npm-run-all chrome-pack firefox-pack && cp out/chrome-octolinker-$npm_package_version.zip out/opera-octolinker-$npm_package_version.zip",
     "release": "webstore upload --source out/chrome-octolinker-$npm_package_version.zip --auto-publish",
-    "chrome-manifest": "mkdirp dist && json -e \"delete this.applications; this.permissions.shift()\" < assets/manifest.json > dist/manifest.json",
+    "chrome-manifest": "mkdirp dist && json -e \"delete this.applications;\" < assets/manifest.json > dist/manifest.json",
     "chrome-build": "npm run chrome-manifest && webpack",
     "chrome-dist": "npm run chrome-build -- -p",
     "chrome-watch": "npm run chrome-manifest && webpack --watch",
@@ -44,6 +44,7 @@
     "babel-core": "^6.18.2",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.8",
+    "babel-plugin-transform-object-rest-spread": "^6.19.0",
     "babel-preset-es2015": "^6.9.0",
     "chrome-webstore-upload-cli": "^1.1.0",
     "copy-webpack-plugin": "^4.0.1",

diff --git a/webpack.config.js b/webpack.config.js
@@ -4,6 +4,7 @@ module.exports = {
   entry: {
     app: './lib/app',
     background: './lib/background',
+    options: './lib/options/page',
   },
   devtool: 'source-map',
   output: {
@@ -24,6 +25,7 @@ module.exports = {
         exclude: /(node_modules)/,
         loader: 'babel',
         query: {
+          plugins: ['transform-object-rest-spread'],
           presets: ['es2015'],
         },
       },