Indicator shows the add-on enabled

manifest.json

@@ -40,5 +40,11 @@
   ],
   "options_ui": {
     "page": "build/settings.html"
+  },
+  "browser_action": {
+    "default_icon": {
+      "32": "resources/enabled_32x32.png"
+    },
+    "default_title": "Vim Vixen"
   }
 }

src/background/components/indicator.js

@@ -0,0 +1,38 @@
+import * as indicators from '../shared/indicators';
+import messages from 'shared/messages';
+
+export default class IndicatorComponent {
+  constructor(store) {
+    this.store = store;
+
+    messages.onMessage(this.onMessage.bind(this));
+
+    browser.tabs.onActivated.addListener((info) => {
+      return browser.tabs.query({ currentWindow: true }).then(() => {
+        return this.onTabActivated(info);
+      });
+    });
+  }
+
+  onTabActivated(info) {
+    return browser.tabs.sendMessage(info.tabId, {
+      type: messages.ADDON_ENABLED_QUERY,
+    }).then((resp) => {
+      return this.updateIndicator(resp.enabled);
+    });
+  }
+
+  onMessage(message) {
+    switch (message.type) {
+    case messages.ADDON_ENABLED_RESPONSE:
+      return this.updateIndicator(message.enabled);
+    }
+  }
+
+  updateIndicator(enabled) {
+    if (enabled) {
+      return indicators.enable();
+    }
+    return indicators.disable();
+  }
+}

src/background/index.js

@@ -3,6 +3,7 @@ import messages from 'shared/messages';
 import BackgroundComponent from 'background/components/background';
 import OperationComponent from 'background/components/operation';
 import TabComponent from 'background/components/tab';
+import IndicatorComponent from 'background/components/indicator';
 import reducers from 'background/reducers';
 import { createStore } from 'shared/store';
 import * as versions from 'shared/versions';
@@ -16,12 +17,13 @@ const store = createStore(reducers, (e, sender) => {
     });
   }
 });
-// eslint-disable-next-line no-unused-vars
+
+/* eslint-disable no-unused-vars */
 const backgroundComponent = new BackgroundComponent(store);
-// eslint-disable-next-line no-unused-vars
 const operationComponent = new OperationComponent(store);
-// eslint-disable-next-line no-unused-vars
 const tabComponent = new TabComponent(store);
+const indicatorComponent = new IndicatorComponent(store);
+/* eslint-enable no-unused-vars */
 
 store.dispatch(settingActions.load());
 

src/background/shared/indicators.js

@@ -0,0 +1,13 @@
+const enable = () => {
+  return browser.browserAction.setIcon({
+    path: 'resources/enabled_32x32.png',
+  });
+};
+
+const disable = () => {
+  return browser.browserAction.setIcon({
+    path: 'resources/disabled_32x32.png',
+  });
+};
+
+export { enable, disable };

src/content/components/common/index.js

@@ -14,10 +14,12 @@ export default class Common {
     input.onKey(key => keymapper.key(key));
 
     this.store = store;
+    this.prevEnabled = this.store.getState().addon.enabled;
 
     this.reloadSettings();
 
     messages.onMessage(this.onMessage.bind(this));
+    store.subscribe(() => this.update());
   }
 
   onMessage(message) {
@@ -27,6 +29,18 @@ export default class Common {
     }
   }
 
+  update() {
+    let enabled = this.store.getState().addon.enabled;
+    if (enabled !== this.prevEnabled) {
+      this.prevEnabled = enabled;
+
+      browser.runtime.sendMessage({
+        type: messages.ADDON_ENABLED_RESPONSE,
+        enabled,
+      });
+    }
+  }
+
   reloadSettings() {
     browser.runtime.sendMessage({
       type: messages.SETTINGS_QUERY,

src/content/components/top-content/index.js

@@ -48,11 +48,18 @@ export default class TopContent {
   }
 
   onMessage(message) {
+    let addonState = this.store.getState().addon;
+
     switch (message.type) {
     case messages.CONSOLE_UNFOCUS:
       this.win.focus();
       consoleFrames.blur(window.document);
       return Promise.resolve();
+    case messages.ADDON_ENABLED_QUERY:
+      return Promise.resolve({
+        type: messages.ADDON_ENABLED_RESPONSE,
+        enabled: addonState.enabled,
+      });
     }
   }
 }

src/shared/messages.js

@@ -48,6 +48,9 @@ export default {
   FIND_GET_KEYWORD: 'find.get.keyword',
   FIND_SET_KEYWORD: 'find.set.keyword',
 
+  ADDON_ENABLED_QUERY: 'addon.enabled.query',
+  ADDON_ENABLED_RESPONSE: 'addon.enabled.response',
+
   OPEN_URL: 'open.url',
 
   SETTINGS_RELOAD: 'settings.reload',