Initial work to get working in Firefox

assets/js/components/MainList.jsx

@@ -1,16 +1,16 @@
-/* global chrome */
+/* global browser */
 
 var React = require('react');
 
 var MainList = React.createClass({
 
     _openOptionsPage: function() {
-        if (chrome.runtime.openOptionsPage) {
+        if (browser.runtime.openOptionsPage) {
             // New way to open options pages, if supported (Chrome 42+).
-            chrome.runtime.openOptionsPage();
+            browser.runtime.openOptionsPage();
         } else {
             // Reasonable fallback.
-            window.open(chrome.runtime.getURL('options.html'));
+            window.open(browser.runtime.getURL('options.html'));
         }
     },
 

assets/js/components/Options.jsx

@@ -1,4 +1,4 @@
-/* global chrome */
+/* global browser */
 
 var React = require('react');
 var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
@@ -37,13 +37,13 @@ var Options = React.createClass({
     restoreSettings: function () {
         var that = this;
 
-        chrome.storage.sync.get({
+        browser.storage.sync.get({
             theme: config.theme,
             blacklist: '',
             whitelist: '',
             loggingType: config.loggingType,
             loggingStyle: config.loggingStyle
-        }, function (items) {
+        }).then(function (items) {
             that.setState({
                 theme: items.theme,
                 blacklist: items.blacklist,
@@ -75,13 +75,13 @@ var Options = React.createClass({
         var whitelist = that.state.whitelist.trim();
 
         // Sync options with google storage.
-        chrome.storage.sync.set({
+        browser.storage.sync.set({
             theme: theme,
             blacklist: blacklist,
             whitelist: whitelist,
             loggingType: loggingType,
             loggingStyle: loggingStyle
-        }, function () {
+        }).then(function () {
             // Set state to be newly entered values.
             that.setState({
                 theme: theme,

assets/js/components/WakaTime.jsx

@@ -1,4 +1,4 @@
-/* global chrome */
+/* global browser */
 
 var React = require("react");
 var $ = require('jquery');
@@ -40,9 +40,9 @@ var Wakatime = React.createClass({
 
             if (data !== false) {
 
-                chrome.storage.sync.get({
+                browser.storage.sync.get({
                     loggingEnabled: config.loggingEnabled
-                }, function(items) {
+                }).then(function(items) {
                     that.setState({loggingEnabled: items.loggingEnabled});
 
                     if (items.loggingEnabled === true) {
@@ -127,7 +127,7 @@ var Wakatime = React.createClass({
 
         changeExtensionState('notLogging');
 
-        chrome.storage.sync.set({
+        browser.storage.sync.set({
             loggingEnabled: false
         });
     },
@@ -139,7 +139,7 @@ var Wakatime = React.createClass({
 
         changeExtensionState('allGood');
 
-        chrome.storage.sync.set({
+        browser.storage.sync.set({
             loggingEnabled: true
         });
     },

assets/js/config.js

@@ -1,11 +1,11 @@
-/* global chrome */
+/* global browser */
 //jshint esnext:true
 
 var config = {
     // Extension name
     name: 'WakaTime',
     // Extension version
-    version: chrome.app.getDetails().version,
+    version: browser.runtime.getManifest().version,
     // Time for idle state of the browser
     // The user is considered idle if there was
     // no activity in the browser for x seconds

assets/js/core/WakaTimeCore.js

@@ -1,4 +1,4 @@
-/* global chrome */
+/* global browser */
 //jshint esnext:true
 
 var $ = require('jquery');
@@ -84,21 +84,21 @@ class WakaTimeCore {
      */
     recordHeartbeat() {
 
-        chrome.storage.sync.get({
+        browser.storage.sync.get({
             loggingEnabled: config.loggingEnabled,
             loggingStyle: config.loggingStyle,
             blacklist: '',
             whitelist: ''
-        }, (items) => {
+        }).then((items) => {
             if (items.loggingEnabled === true) {
 
                 changeExtensionState('allGood');
 
-                chrome.idle.queryState(config.detectionIntervalInSeconds, (newState) => {
+                browser.idle.queryState(config.detectionIntervalInSeconds).then((newState) => {
 
                     if (newState === 'active') {
                         // Get current tab URL.
-                        chrome.tabs.query({active: true}, (tabs) => {
+                        browser.tabs.query({active: true}).then((tabs) => {
 
                             var currentActiveTab = tabs[0];
 
@@ -152,7 +152,7 @@ class WakaTimeCore {
             time: moment().format('X'),
             project: '<<LAST_PROJECT>>',
             is_debugging: debug,
-            plugin: 'chrome-wakatime/' + config.version
+            plugin: 'browser-wakatime/' + config.version
         });
     }
 
@@ -166,9 +166,9 @@ class WakaTimeCore {
     _getLoggingType() {
         var deferredObject = $.Deferred();
 
-        chrome.storage.sync.get({
+        browser.storage.sync.get({
             loggingType: config.loggingType
-        }, function (items) {
+        }).then(function (items) {
             deferredObject.resolve(items.loggingType);
         });
 

assets/js/devtools.js

@@ -1,12 +1,12 @@
-/* global chrome */
+/* global browser */
 
 // Create a connection to the background page
-var backgroundPageConnection = chrome.runtime.connect({
+var backgroundPageConnection = browser.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
+    tabId: browser.devtools.inspectedWindow.tabId
 });

assets/js/events.js

@@ -1,4 +1,4 @@
-/* global chrome */
+/* global browser */
 
 // Core
 var WakaTimeCore = require("./core/WakaTimeCore").default;
@@ -11,7 +11,7 @@ var wakatime = new WakaTimeCore();
 var connections = {};
 
 // Add a listener to resolve alarms
-chrome.alarms.onAlarm.addListener(function (alarm) {
+browser.alarms.onAlarm.addListener(function (alarm) {
     // |alarm| can be undefined because onAlarm also gets called from
     // window.setTimeout on old chrome versions.
     if (alarm && alarm.name == 'heartbeatAlarm') {
@@ -23,14 +23,14 @@ chrome.alarms.onAlarm.addListener(function (alarm) {
 });
 
 // Create a new alarm for heartbeats.
-chrome.alarms.create('heartbeatAlarm', {periodInMinutes: 2});
+browser.alarms.create('heartbeatAlarm', {periodInMinutes: 2});
 
 /**
  * Whenever a active tab is changed it records a heartbeat with that tab url.
  */
-chrome.tabs.onActivated.addListener(function (activeInfo) {
+browser.tabs.onActivated.addListener(function (activeInfo) {
 
-    chrome.tabs.get(activeInfo.tabId, function (tab) {
+    browser.tabs.get(activeInfo.tabId).then(function (tab) {
 
         console.log('recording a heartbeat - active tab changed');
 
@@ -43,11 +43,11 @@ chrome.tabs.onActivated.addListener(function (activeInfo) {
  * Whenever any tab is updated it checks if the updated tab is the tab that is
  * currently active and if it is, then it records a heartbeat.
  */
-chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
+browser.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
 
     if (changeInfo.status === 'complete') {
         // Get current tab URL.
-        chrome.tabs.query({active: true}, function(tabs) {
+        browser.tabs.query({active: true}).then(function(tabs) {
             // If tab updated is the same as active tab
             if (tabId == tabs[0].id) {
                 console.log('recording a heartbeat - tab updated');
@@ -64,7 +64,7 @@ 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) {
+browser.runtime.onConnect.addListener(function (port) {
 
     if (port.name == "devtools-page") {
 

assets/js/helpers/changeExtensionIcon.js

@@ -1,4 +1,4 @@
-/* global chrome */
+/* global browser */
 
 var config = require('../config');
 
@@ -19,26 +19,26 @@ function changeExtensionIcon(color) {
 
         path = './graphics/wakatime-logo-38' + color + '.png';
 
-        chrome.browserAction.setIcon({
+        browser.browserAction.setIcon({
             path: path
         });
     }
 
     if (color === '') {
-        chrome.storage.sync.get({
+        browser.storage.sync.get({
             theme: config.theme
-        }, function (items) {
+        }).then(function (items) {
             if (items.theme == config.theme) {
                 path = './graphics/wakatime-logo-38.png';
 
-                chrome.browserAction.setIcon({
+                browser.browserAction.setIcon({
                     path: path
                 });
             }
             else {
                 path = './graphics/wakatime-logo-38-white.png';
 
-                chrome.browserAction.setIcon({
+                browser.browserAction.setIcon({
                     path: path
                 });
             }

assets/js/helpers/changeExtensionTooltip.js

@@ -1,4 +1,4 @@
-/* global chrome */
+/* global browser */
 
 var config = require('../config');
 
@@ -16,7 +16,7 @@ function changeExtensionTooltip(text) {
         text = config.name + ' - ' + text;
     }
 
-    chrome.browserAction.setTitle({title: text});
+    browser.browserAction.setTitle({title: text});
 }
 
 module.exports = changeExtensionTooltip;

assets/js/options.jsx

@@ -1,4 +1,4 @@
-/* global chrome */
+/* global browser */
 
 /* This is a fix for Bootstrap requiring jQuery */
 global.jQuery = require('jquery');

assets/less/bootstrap/bootstrap.less

@@ -1,6 +1,6 @@
 /*!
- * Bootstrap v3.3.6 (http://getbootstrap.com)
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
- * Copyright 2011-2015 Twitter, Inc.
+ * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 

assets/less/bootstrap/button-groups.less

@@ -59,7 +59,7 @@
     .border-right-radius(0);
   }
 }
-// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+// Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it
 .btn-group > .btn:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
   .border-left-radius(0);

assets/less/bootstrap/forms.less

@@ -181,7 +181,7 @@ input[type="search"] {
 // set a pixel line-height that matches the given height of the input, but only
 // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
 //
-// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
+// Note that as of 9.3, iOS doesn't support `week`.
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   input[type="date"],

assets/less/bootstrap/mixins/tab-focus.less

@@ -1,9 +1,9 @@
 // WebKit-style focus
 
 .tab-focus() {
-  // Default
+  // WebKit-specific. Other browsers will keep their default outline style.
-  outline: thin dotted;
+  // (Initially tried to also force default via `outline: initial`,
-  // WebKit
+  // but that seems to erroneously remove the outline in Firefox altogether.)
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }

assets/less/bootstrap/panels.less

@@ -214,7 +214,7 @@
 }
 
 
-// Collapsable panels (aka, accordion)
+// Collapsible panels (aka, accordion)
 //
 // Wrap a series of panels in `.panel-group` to turn them into an accordion with
 // the help of our collapse JavaScript plugin.

assets/less/bootstrap/scaffolding.less

@@ -120,7 +120,7 @@ hr {
 
 // Only display content to screen readers
 //
-// See: http://a11yproject.com/posts/how-to-hide-content/
+// See: http://a11yproject.com/posts/how-to-hide-content
 
 .sr-only {
   position: absolute;

assets/less/bootstrap/theme.less

@@ -1,6 +1,6 @@
 /*!
- * Bootstrap v3.3.6 (http://getbootstrap.com)
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
- * Copyright 2011-2015 Twitter, Inc.
+ * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 

assets/less/bootstrap/variables.less

@@ -111,7 +111,7 @@
 //** Global background color for active items (e.g., navs or dropdowns).
 @component-active-bg:       @brand-primary;
 
-//** Width of the `border` for generating carets that indicator dropdowns.
+//** Width of the `border` for generating carets that indicate dropdowns.
 @caret-width-base:          4px;
 //** Carets increase slightly in size for larger components.
 @caret-width-large:         5px;

manifest.json

@@ -35,5 +35,10 @@
   "options_ui": {
     "page": "options.html",
     "chrome_style": false
+  },
+  "applicaitons": {
+    "gecko": {
+      "id": "addon@wakatime.com"
+    }
   }
 }