Major optimizations. Added a function for extension state. Tooltip is now being change also.

assets/js/UrlHelper.js

@@ -1,11 +0,0 @@
-class UrlHelper {
-
-    static getDomainFromUrl(url) {
-        var parts = url.split('/');
-
-        return parts[0] + "//" + parts[2];
-    }
-
-}
-
-export default UrlHelper;

assets/js/app.js

@@ -2,8 +2,10 @@
 global.jQuery = require('jquery');
 require('bootstrap');
 
-import React from 'react';
+var React = require('react');
-import WakaTime from './components/WakaTime.react.js';
+
+// React components
+var WakaTime = require('./components/WakaTime.react');
 
 React.render(
     <WakaTime />,

assets/js/components/MainList.react.js

@@ -1,6 +1,6 @@
 //jshint esnext:true
 
-import React from 'react';
+var React = require('react');
 
 class MainList extends React.Component {
     componentDidMount() {

assets/js/components/Navbar.react.js

@@ -1,6 +1,6 @@
 //jshint esnext:true
 
-import React from 'react';
+var React = require('react');
 
 class Navbar extends React.Component {
 

assets/js/components/WakaTime.react.js

@@ -1,24 +1,37 @@
 //jshint esnext:true
 
-import React from "react";
+var React = require("react");
-import $ from 'jquery';
+var $ = require('jquery');
-import NavBar from './NavBar.react.js';
+
-import MainList from './MainList.react.js';
+var config = require('../config');
-import changeExtensionIcon from '../helpers/changeExtensionIcon.js';
+
-import WakaTimeOriginal from '../WakaTime.js';
+// React components
-var config = require('../config.js');
+var NavBar = require('./NavBar.react');
+var MainList = require('./MainList.react');
+
+// Core
+var WakaTimeOriginal = require('../core/WakaTime');
+
+// Helpers
+var changeExtensionState = require('../helpers/changeExtensionState');
 
 class WakaTime extends React.Component {
 
-    state = {
+    constructor(){
-        user: {
+
-            full_name: null,
+        super();
-            email: null,
+
-            photo: null
+        this.state = {
-        },
+            user: {
-        loggedIn: false,
+                full_name: null,
-        loggingEnabled: config.loggingEnabled
+                email: null,
-    };
+                photo: null
+            },
+            loggedIn: false,
+            loggingEnabled: config.loggingEnabled
+        };
+    }
+
 
     componentDidMount() {
 
@@ -33,10 +46,10 @@ class WakaTime extends React.Component {
                 }, (items) => {
                     this.setState({loggingEnabled: items.loggingEnabled});
                     if (items.loggingEnabled === true) {
-                        changeExtensionIcon(config.colors.allGood);
+                        changeExtensionState('allGood');
                     }
                     else {
-                        changeExtensionIcon(config.colors.notLogging);
+                        changeExtensionState('notLogging');
                     }
                 });
 
@@ -50,7 +63,7 @@ class WakaTime extends React.Component {
                 });
             }
             else {
-                changeExtensionIcon(config.colors.notSignedIn);
+                changeExtensionState('notSignedIn');
             }
         });
 
@@ -91,7 +104,7 @@ class WakaTime extends React.Component {
                 loggingEnabled: false
             });
 
-            changeExtensionIcon(config.colors.notSignedIn);
+            changeExtensionState('notSignedIn');
 
         });
     }
@@ -101,7 +114,7 @@ class WakaTime extends React.Component {
             loggingEnabled: false
         });
 
-        changeExtensionIcon(config.colors.notLogging);
+        changeExtensionState('notLogging');
 
         chrome.storage.sync.set({
             loggingEnabled: false
@@ -113,7 +126,7 @@ class WakaTime extends React.Component {
             loggingEnabled: true
         });
 
-        changeExtensionIcon(config.colors.allGood);
+        changeExtensionState('allGood');
 
         chrome.storage.sync.set({
             loggingEnabled: true

assets/js/config.js

@@ -1,4 +1,6 @@
-export default {
+var config = {
+    // Extension name
+    name: 'WakaTime',
     // Time for idle state of the browser
     // The user is considered idle if there was
     // no activity in the browser for x seconds
@@ -20,6 +22,19 @@ export default {
         notSignedIn: 'red',
         lightTheme: 'white'
     },
+    // Tooltips for each of the extension states
+    tooltips: {
+        allGood: '',
+        notLogging: 'Not logging',
+        notSignedIn: 'Not signed In'
+    },
     // Default theme
-    theme: 'light'
+    theme: 'light',
+    states: [
+        'allGood',
+        'notLogging',
+        'notSignedIn'
+    ]
 };
+
+export default config;

assets/js/core/WakaTime.js

@@ -1,16 +1,24 @@
-import UrlHelper from './UrlHelper.js';
+var $ = require('jquery');
-import $ from 'jquery';
+
-import currentTimestamp from './helpers/currentTimestamp.js';
+var config = require('./../config');
-import changeExtensionIcon from './helpers/changeExtensionIcon.js';
+
-var in_array = require('./helpers/in_array');
+// Helpers
-var config = require('./config.js');
+var getDomainFromUrl = require('./../helpers/getDomainFromUrl');
+var currentTimestamp = require('./../helpers/currentTimestamp');
+var changeExtensionState = require('../helpers/changeExtensionState');
+var in_array = require('./../helpers/in_array');
 
 class WakaTime {
 
-    constructor(props) {
+    constructor() {
         this.tabsWithDevtoolsOpen = [];
     }
 
+    /**
+     * Settter for tabsWithDevtoolsOpen
+     *
+     * @param tabs
+     */
     setTabsWithDevtoolsOpen(tabs) {
         this.tabsWithDevtoolsOpen = tabs;
     }
@@ -55,7 +63,8 @@ class WakaTime {
                     loggingEnabled: config.loggingEnabled
                 }, (items) => {
                     if (items.loggingEnabled === true) {
-                        changeExtensionIcon(config.colors.allGood);
+
+                        changeExtensionState('allGood');
 
                         chrome.idle.queryState(config.detectionIntervalInSeconds, (newState) => {
 
@@ -64,7 +73,7 @@ class WakaTime {
                                 chrome.tabs.query({active: true}, (tabs) => {
                                     var debug = false;
                                     // If the current active tab has devtools open
-                                    if(in_array(tabs[0].id, this.tabsWithDevtoolsOpen)) debug = true;
+                                    if (in_array(tabs[0].id, this.tabsWithDevtoolsOpen)) debug = true;
 
                                     this.sendHeartbeat(tabs[0].url, debug);
                                 });
@@ -72,7 +81,7 @@ class WakaTime {
                         });
                     }
                     else {
-                        changeExtensionIcon(config.colors.notLogging);
+                        changeExtensionState('notLogging');
                     }
                 });
             }
@@ -80,7 +89,7 @@ class WakaTime {
 
                 // User is not logged in.
                 // Change extension icon to red color.
-                changeExtensionIcon(config.colors.notSignedIn);
+                changeExtensionState('notSignedIn');
             }
         });
     }
@@ -129,7 +138,7 @@ class WakaTime {
      * @param entity
      * @param debug
      */
-    sendHeartbeat(entity,  debug) {
+    sendHeartbeat(entity, debug) {
 
         var payload = null;
 
@@ -139,7 +148,7 @@ class WakaTime {
             // And send that in heartbeat
             if (loggingType == 'domain') {
 
-                var domain = UrlHelper.getDomainFromUrl(entity);
+                var domain = getDomainFromUrl(entity);
 
                 payload = this._preparePayload(domain, 'domain', debug);
 

assets/js/devtools.js

@@ -3,6 +3,7 @@ var backgroundPageConnection = chrome.runtime.connect({
     name: "devtools-page"
 });
 
+// Send a message to background page with the current active tabId
 backgroundPageConnection.postMessage({
     name: 'init',
     tabId: chrome.devtools.inspectedWindow.tabId

assets/js/events.js

@@ -1,19 +1,15 @@
-import WakaTime from "./WakaTime.js";
+// Core
+var WakaTime = require("./core/WakaTime");
 
+// initialize class
 var wakatime = new WakaTime;
 
 // Holds currently open connections (ports) with devtools
 // Uses tabId as index key.
 var connections = {};
 
-/**
+// Add a listener to resolve alarms
- * Whenever an alarms sets off, this function
+chrome.alarms.onAlarm.addListener(function(alarm){
- * gets called to detect the alarm name and
- * do appropriate action.
- *
- * @param alarm
- */
-function resolveAlarm(alarm) {
     // |alarm| can be undefined because onAlarm also gets called from
     // window.setTimeout on old chrome versions.
     if (alarm && alarm.name == 'heartbeatAlarm') {
@@ -22,10 +18,7 @@ function resolveAlarm(alarm) {
 
         wakatime.recordHeartbeat();
     }
-}
+});
-
-// Add a listener to resolve alarms
-chrome.alarms.onAlarm.addListener(resolveAlarm);
 
 // Create a new alarm for heartbeats.
 chrome.alarms.create('heartbeatAlarm', {periodInMinutes: 2});
@@ -65,6 +58,10 @@ chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
 });
 
 
+/**
+ * This is in charge of detecting if devtools are opened or closed
+ * and sending a heartbeat depending on that.
+ */
 chrome.runtime.onConnect.addListener(function (port) {
 
     if (port.name == "devtools-page") {

assets/js/helpers/changeExtensionIcon.js

@@ -1,8 +1,12 @@
+var config = require('../config');
+
 /**
  * It changes the extension icon color.
  * Supported values are: 'red', 'white', 'gray' and ''.
+ *
+ * @param color
  */
-export default function changeExtensionIcon(color = '') {
+function changeExtensionIcon(color = '') {
 
     var path = null;
 
@@ -18,9 +22,9 @@ export default function changeExtensionIcon(color = '') {
 
     if (color === '') {
         chrome.storage.sync.get({
-            theme: 'light'
+            theme: config.theme
         }, function (items) {
-            if (items.theme == 'light') {
+            if (items.theme == config.theme) {
                 path = './graphics/wakatime-logo-38.png';
 
                 chrome.browserAction.setIcon({
@@ -38,3 +42,5 @@ export default function changeExtensionIcon(color = '') {
     }
 
 }
+
+export default changeExtensionIcon;

assets/js/helpers/changeExtensionState.js

@@ -0,0 +1,34 @@
+var config = require('../config');
+
+// Helpers
+var changeExtensionIcon = require('./changeExtensionIcon');
+var changeExtensionTooltip = require('./changeExtensionTooltip');
+var in_array = require('./in_array');
+
+/**
+ * Sets the current state of the extension.
+ *
+ * @param state
+ */
+function changeExtensionState(state){
+    if (! in_array(state, config.states)) {
+        throw new Error('Not a valid state!');
+    }
+
+    switch (state) {
+        case 'allGood':
+            changeExtensionIcon(config.colors.allGood);
+            changeExtensionTooltip(config.tooltips.allGood);
+            break;
+        case 'notLogging':
+            changeExtensionIcon(config.colors.notLogging);
+            changeExtensionTooltip(config.tooltips.notLogging);
+            break;
+        case 'notSignedIn':
+            changeExtensionIcon(config.colors.notSignedIn);
+            changeExtensionTooltip(config.tooltips.notSignedIn);
+            break;
+    }
+}
+
+export default changeExtensionState;

assets/js/helpers/changeExtensionTooltip.js

@@ -0,0 +1,20 @@
+var config = require('../config');
+
+/**
+ * It changes the extension title
+ *
+ * @param text
+ */
+function changeExtensionTooltip(text) {
+
+    if (text === '') {
+        text = config.name;
+    }
+    else {
+        text = config.name + ' - ' + text;
+    }
+
+    chrome.browserAction.setTitle({title: text});
+}
+
+export default changeExtensionTooltip;

assets/js/helpers/currentTimestamp.js

@@ -1,6 +1,10 @@
 /**
  * Returns UNIX timestamp
+ *
+ * @returns {number}
  */
-export default function(){
+function currentTimestamp(){
     return Math.round((new Date()).getTime() / 1000);
 }
+
+export default currentTimestamp;

assets/js/helpers/getDomainFromUrl.js

@@ -0,0 +1,13 @@
+/**
+ * Returns domain from given URL.
+ *
+ * @param url
+ * @returns {string}
+ */
+function getDomainFromUrl(url) {
+    var parts = url.split('/');
+
+    return parts[0] + "//" + parts[2];
+}
+
+export default getDomainFromUrl;

assets/js/helpers/in_array.js

@@ -1,3 +1,10 @@
+/**
+ * Returns boolean if needle is found in haystack or not.
+ *
+ * @param needle
+ * @param haystack
+ * @returns {boolean}
+ */
 function in_array(needle, haystack) {
     for (var i = 0; i < haystack.length; i ++) {
         if (needle == haystack[i]) {

assets/js/libs/devtools-detect.js

@@ -1,40 +0,0 @@
-/*!
-	devtools-detect
-	Detect if DevTools is open
-	https://github.com/sindresorhus/devtools-detect
-	by Sindre Sorhus
-	MIT License
-*/
-(function () {
-	'use strict';
-	var devtools = {open: false};
-	var threshold = 160;
-	var emitEvent = function (state) {
-		window.dispatchEvent(new CustomEvent('devtoolschange', {
-			detail: {
-				open: state
-			}
-		}));
-	};
-
-	setInterval(function () {
-		if ((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || window.outerWidth - window.innerWidth > threshold ||
-			window.outerHeight - window.innerHeight > threshold) {
-			if (!devtools.open) {
-				emitEvent(true);
-			}
-			devtools.open = true;
-		} else {
-			if (devtools.open) {
-				emitEvent(false);
-			}
-			devtools.open = false;
-		}
-	}, 500);
-
-	if (typeof module !== 'undefined' && module.exports) {
-		module.exports = devtools;
-	} else {
-		window.devtools = devtools;
-	}
-})();

assets/js/options.js

@@ -2,9 +2,9 @@
 global.jQuery = require('jquery');
 require('bootstrap');
 
-var config = require('./config');
+var $ = require("jquery");
 
-import $ from "jquery";
+var config = require('./config');
 
 function detectCheckedRadio(name) {
     for (var i = 0; i < document.getElementsByName(name).length; i ++) {

public/js/devtools.js

@@ -6,6 +6,7 @@ var backgroundPageConnection = chrome.runtime.connect({
     name: "devtools-page"
 });
 
+// Send a message to background page with the current active tabId
 backgroundPageConnection.postMessage({
     name: "init",
     tabId: chrome.devtools.inspectedWindow.tabId

public/js/events.js

@@ -1,26 +1,18 @@
 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+// Core
 'use strict';
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var WakaTime = require('./core/WakaTime');
 
-var _WakaTimeJs = require('./WakaTime.js');
+// initialize class
-
+var wakatime = new WakaTime();
-var _WakaTimeJs2 = _interopRequireDefault(_WakaTimeJs);
-
-var wakatime = new _WakaTimeJs2['default']();
 
 // Holds currently open connections (ports) with devtools
 // Uses tabId as index key.
 var connections = {};
 
-/**
+// Add a listener to resolve alarms
- * Whenever an alarms sets off, this function
+chrome.alarms.onAlarm.addListener(function (alarm) {
- * gets called to detect the alarm name and
- * do appropriate action.
- *
- * @param alarm
- */
-function resolveAlarm(alarm) {
     // |alarm| can be undefined because onAlarm also gets called from
     // window.setTimeout on old chrome versions.
     if (alarm && alarm.name == 'heartbeatAlarm') {
@@ -29,10 +21,7 @@ function resolveAlarm(alarm) {
 
         wakatime.recordHeartbeat();
     }
-}
+});
-
-// Add a listener to resolve alarms
-chrome.alarms.onAlarm.addListener(resolveAlarm);
 
 // Create a new alarm for heartbeats.
 chrome.alarms.create('heartbeatAlarm', { periodInMinutes: 2 });
@@ -69,6 +58,10 @@ chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
     }
 });
 
+/**
+ * This is in charge of detecting if devtools are opened or closed
+ * and sending a heartbeat depending on that.
+ */
 chrome.runtime.onConnect.addListener(function (port) {
 
     if (port.name == 'devtools-page') {
@@ -103,36 +96,49 @@ chrome.runtime.onConnect.addListener(function (port) {
     }
 });
 
-},{"./WakaTime.js":3}],2:[function(require,module,exports){
+},{"./core/WakaTime":3}],2:[function(require,module,exports){
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
+Object.defineProperty(exports, '__esModule', {
     value: true
 });
+var config = {
+    // Extension name
+    name: 'WakaTime',
+    // Time for idle state of the browser
+    // The user is considered idle if there was
+    // no activity in the browser for x seconds
+    detectionIntervalInSeconds: 60,
+    //default logging type
+    loggingType: 'domain',
+    // By default logging is enabled
+    loggingEnabled: true,
+    // Url to which to send the heartbeat
+    heartbeatApiUrl: 'https://wakatime.com/api/v1/users/current/heartbeats',
+    // Url from which to detect if the user is logged in
+    currentUserApiUrl: 'https://wakatime.com/api/v1/users/current',
+    // The url to logout the user from wakatime
+    logoutUserUrl: 'https://wakatime.com/logout',
+    // Different colors for different states of the extension
+    colors: {
+        allGood: '',
+        notLogging: 'gray',
+        notSignedIn: 'red',
+        lightTheme: 'white'
+    },
+    // Tooltips for each of the extension states
+    tooltips: {
+        allGood: '',
+        notLogging: 'Not logging',
+        notSignedIn: 'Not signed In'
+    },
+    // Default theme
+    theme: 'light',
+    states: ['allGood', 'notLogging', 'notSignedIn']
+};
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+exports['default'] = config;
-
+module.exports = exports['default'];
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var UrlHelper = (function () {
-    function UrlHelper() {
-        _classCallCheck(this, UrlHelper);
-    }
-
-    _createClass(UrlHelper, null, [{
-        key: "getDomainFromUrl",
-        value: function getDomainFromUrl(url) {
-            var parts = url.split("/");
-
-            return parts[0] + "//" + parts[2];
-        }
-    }]);
-
-    return UrlHelper;
-})();
-
-exports["default"] = UrlHelper;
-module.exports = exports["default"];
 
 },{}],3:[function(require,module,exports){
 'use strict';
@@ -143,31 +149,20 @@ Object.defineProperty(exports, '__esModule', {
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 
-var _UrlHelperJs = require('./UrlHelper.js');
+var $ = require('jquery');
 
-var _UrlHelperJs2 = _interopRequireDefault(_UrlHelperJs);
+var config = require('./../config');
 
-var _jquery = require('jquery');
+// Helpers
-
+var getDomainFromUrl = require('./../helpers/getDomainFromUrl');
-var _jquery2 = _interopRequireDefault(_jquery);
+var currentTimestamp = require('./../helpers/currentTimestamp');
-
+var changeExtensionState = require('../helpers/changeExtensionState');
-var _helpersCurrentTimestampJs = require('./helpers/currentTimestamp.js');
+var in_array = require('./../helpers/in_array');
-
-var _helpersCurrentTimestampJs2 = _interopRequireDefault(_helpersCurrentTimestampJs);
-
-var _helpersChangeExtensionIconJs = require('./helpers/changeExtensionIcon.js');
-
-var _helpersChangeExtensionIconJs2 = _interopRequireDefault(_helpersChangeExtensionIconJs);
-
-var in_array = require('./helpers/in_array');
-var config = require('./config.js');
 
 var WakaTime = (function () {
-    function WakaTime(props) {
+    function WakaTime() {
         _classCallCheck(this, WakaTime);
 
         this.tabsWithDevtoolsOpen = [];
@@ -175,6 +170,12 @@ var WakaTime = (function () {
 
     _createClass(WakaTime, [{
         key: 'setTabsWithDevtoolsOpen',
+
+        /**
+         * Settter for tabsWithDevtoolsOpen
+         *
+         * @param tabs
+         */
         value: function setTabsWithDevtoolsOpen(tabs) {
             this.tabsWithDevtoolsOpen = tabs;
         }
@@ -187,9 +188,9 @@ var WakaTime = (function () {
          * @returns {*}
          */
         value: function checkAuth() {
-            var deferredObject = _jquery2['default'].Deferred();
+            var deferredObject = $.Deferred();
 
-            _jquery2['default'].ajax({
+            $.ajax({
                 url: config.currentUserApiUrl,
                 dataType: 'json',
                 success: function success(data) {
@@ -224,7 +225,8 @@ var WakaTime = (function () {
                         loggingEnabled: config.loggingEnabled
                     }, function (items) {
                         if (items.loggingEnabled === true) {
-                            (0, _helpersChangeExtensionIconJs2['default'])(config.colors.allGood);
+
+                            changeExtensionState('allGood');
 
                             chrome.idle.queryState(config.detectionIntervalInSeconds, function (newState) {
 
@@ -240,14 +242,14 @@ var WakaTime = (function () {
                                 }
                             });
                         } else {
-                            (0, _helpersChangeExtensionIconJs2['default'])(config.colors.notLogging);
+                            changeExtensionState('notLogging');
                         }
                     });
                 } else {
 
                     // User is not logged in.
                     // Change extension icon to red color.
-                    (0, _helpersChangeExtensionIconJs2['default'])(config.colors.notSignedIn);
+                    changeExtensionState('notSignedIn');
                 }
             });
         }
@@ -269,7 +271,7 @@ var WakaTime = (function () {
             return JSON.stringify({
                 entity: entity,
                 type: type,
-                time: (0, _helpersCurrentTimestampJs2['default'])(),
+                time: currentTimestamp(),
                 is_debugging: debug
             });
         }
@@ -283,7 +285,7 @@ var WakaTime = (function () {
          * @private
          */
         value: function _getLoggingType() {
-            var deferredObject = _jquery2['default'].Deferred();
+            var deferredObject = $.Deferred();
 
             chrome.storage.sync.get({
                 loggingType: config.loggingType
@@ -314,7 +316,7 @@ var WakaTime = (function () {
                 // And send that in heartbeat
                 if (loggingType == 'domain') {
 
-                    var domain = _UrlHelperJs2['default'].getDomainFromUrl(entity);
+                    var domain = getDomainFromUrl(entity);
 
                     payload = _this2._preparePayload(domain, 'domain', debug);
 
@@ -347,9 +349,9 @@ var WakaTime = (function () {
 
             var method = arguments[1] === undefined ? 'POST' : arguments[1];
 
-            var deferredObject = _jquery2['default'].Deferred();
+            var deferredObject = $.Deferred();
 
-            _jquery2['default'].ajax({
+            $.ajax({
                 url: config.heartbeatApiUrl,
                 dataType: 'json',
                 contentType: 'application/json',
@@ -377,51 +379,20 @@ var WakaTime = (function () {
 exports['default'] = WakaTime;
 module.exports = exports['default'];
 
-},{"./UrlHelper.js":2,"./config.js":4,"./helpers/changeExtensionIcon.js":5,"./helpers/currentTimestamp.js":6,"./helpers/in_array":7,"jquery":8}],4:[function(require,module,exports){
+},{"../helpers/changeExtensionState":5,"./../config":2,"./../helpers/currentTimestamp":7,"./../helpers/getDomainFromUrl":8,"./../helpers/in_array":9,"jquery":10}],4:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, '__esModule', {
     value: true
 });
-exports['default'] = {
+var config = require('../config');
-    // Time for idle state of the browser
-    // The user is considered idle if there was
-    // no activity in the browser for x seconds
-    detectionIntervalInSeconds: 60,
-    //default logging type
-    loggingType: 'domain',
-    // By default logging is enabled
-    loggingEnabled: true,
-    // Url to which to send the heartbeat
-    heartbeatApiUrl: 'https://wakatime.com/api/v1/users/current/heartbeats',
-    // Url from which to detect if the user is logged in
-    currentUserApiUrl: 'https://wakatime.com/api/v1/users/current',
-    // The url to logout the user from wakatime
-    logoutUserUrl: 'https://wakatime.com/logout',
-    // Different colors for different states of the extension
-    colors: {
-        allGood: '',
-        notLogging: 'gray',
-        notSignedIn: 'red',
-        lightTheme: 'white'
-    },
-    // Default theme
-    theme: 'light'
-};
-module.exports = exports['default'];
 
-},{}],5:[function(require,module,exports){
 /**
  * It changes the extension icon color.
  * Supported values are: 'red', 'white', 'gray' and ''.
+ *
+ * @param color
  */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});
-exports['default'] = changeExtensionIcon;
-
 function changeExtensionIcon() {
     var color = arguments[0] === undefined ? '' : arguments[0];
 
@@ -439,9 +410,9 @@ function changeExtensionIcon() {
 
     if (color === '') {
         chrome.storage.sync.get({
-            theme: 'light'
+            theme: config.theme
         }, function (items) {
-            if (items.theme == 'light') {
+            if (items.theme == config.theme) {
                 path = './graphics/wakatime-logo-38.png';
 
                 chrome.browserAction.setIcon({
@@ -458,25 +429,125 @@ function changeExtensionIcon() {
     }
 }
 
+exports['default'] = changeExtensionIcon;
 module.exports = exports['default'];
 
-},{}],6:[function(require,module,exports){
+},{"../config":2}],5:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});
+var config = require('../config');
+
+// Helpers
+var changeExtensionIcon = require('./changeExtensionIcon');
+var changeExtensionTooltip = require('./changeExtensionTooltip');
+var in_array = require('./in_array');
+
+/**
+ * Sets the current state of the extension.
+ *
+ * @param state
+ */
+function changeExtensionState(state) {
+    if (!in_array(state, config.states)) {
+        throw new Error('Not a valid state!');
+    }
+
+    switch (state) {
+        case 'allGood':
+            changeExtensionIcon(config.colors.allGood);
+            changeExtensionTooltip(config.tooltips.allGood);
+            break;
+        case 'notLogging':
+            changeExtensionIcon(config.colors.notLogging);
+            changeExtensionTooltip(config.tooltips.notLogging);
+            break;
+        case 'notSignedIn':
+            changeExtensionIcon(config.colors.notSignedIn);
+            changeExtensionTooltip(config.tooltips.notSignedIn);
+            break;
+    }
+}
+
+exports['default'] = changeExtensionState;
+module.exports = exports['default'];
+
+},{"../config":2,"./changeExtensionIcon":4,"./changeExtensionTooltip":6,"./in_array":9}],6:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});
+var config = require('../config');
+
+/**
+ * It changes the extension title
+ *
+ * @param text
+ */
+function changeExtensionTooltip(text) {
+
+    if (text === '') {
+        text = config.name;
+    } else {
+        text = config.name + ' - ' + text;
+    }
+
+    chrome.browserAction.setTitle({ title: text });
+}
+
+exports['default'] = changeExtensionTooltip;
+module.exports = exports['default'];
+
+},{"../config":2}],7:[function(require,module,exports){
 /**
  * Returns UNIX timestamp
+ *
+ * @returns {number}
  */
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
+function currentTimestamp() {
-exports["default"] = function () {
   return Math.round(new Date().getTime() / 1000);
-};
+}
 
+exports["default"] = currentTimestamp;
 module.exports = exports["default"];
 
-},{}],7:[function(require,module,exports){
+},{}],8:[function(require,module,exports){
+/**
+ * Returns domain from given URL.
+ *
+ * @param url
+ * @returns {string}
+ */
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function getDomainFromUrl(url) {
+    var parts = url.split("/");
+
+    return parts[0] + "//" + parts[2];
+}
+
+exports["default"] = getDomainFromUrl;
+module.exports = exports["default"];
+
+},{}],9:[function(require,module,exports){
+/**
+ * Returns boolean if needle is found in haystack or not.
+ *
+ * @param needle
+ * @param haystack
+ * @returns {boolean}
+ */
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -496,7 +567,7 @@ function in_array(needle, haystack) {
 exports["default"] = in_array;
 module.exports = exports["default"];
 
-},{}],8:[function(require,module,exports){
+},{}],10:[function(require,module,exports){
 /*!
  * jQuery JavaScript Library v2.1.4
  * http://jquery.com/

public/js/options.js

@@ -3,15 +3,11 @@
 /* This is a fix for Bootstrap requiring jQuery */
 'use strict';
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-var _jquery = require('jquery');
-
-var _jquery2 = _interopRequireDefault(_jquery);
-
 global.jQuery = require('jquery');
 require('bootstrap');
 
+var $ = require('jquery');
+
 var config = require('./config');
 
 function detectCheckedRadio(name) {
@@ -38,7 +34,7 @@ function save_options(e) {
         loggingType: loggingType
     }, function () {
         // Update status to let user know options were saved.
-        var status = (0, _jquery2['default'])('#status');
+        var status = $('#status');
         status.html('<strong>Well done!</strong> Options have been saved.');
 
         status.fadeIn(1500, function () {
@@ -76,7 +72,9 @@ document.getElementById('save').addEventListener('click', save_options);
 Object.defineProperty(exports, '__esModule', {
     value: true
 });
-exports['default'] = {
+var config = {
+    // Extension name
+    name: 'WakaTime',
     // Time for idle state of the browser
     // The user is considered idle if there was
     // no activity in the browser for x seconds
@@ -98,9 +96,18 @@ exports['default'] = {
         notSignedIn: 'red',
         lightTheme: 'white'
     },
+    // Tooltips for each of the extension states
+    tooltips: {
+        allGood: '',
+        notLogging: 'Not logging',
+        notSignedIn: 'Not signed In'
+    },
     // Default theme
-    theme: 'light'
+    theme: 'light',
+    states: ['allGood', 'notLogging', 'notSignedIn']
 };
+
+exports['default'] = config;
 module.exports = exports['default'];
 
 },{}],3:[function(require,module,exports){