Added button for enabling disabling logging.

assets/js/WakaTime.js

@@ -2,6 +2,7 @@ import UrlHelper from './UrlHelper.js';
 import $ from 'jquery';
 import currentTimestamp from './helpers/currentTimestamp.js';
 import changeExtensionIcon from './helpers/changeExtensionIcon.js';
+import devtools from './libs/devtools-detect.js';
 
 class WakaTime {
 
@@ -49,20 +50,26 @@ class WakaTime {
 
             if (data !== false) {
 
-                // User is logged in.
+                chrome.storage.sync.get({
-                // Change extension icon to default color.
+                    loggingEnabled: false
-                changeExtensionIcon();
+                }, (items) => {
+                    if (items.loggingEnabled === true) {
+                        changeExtensionIcon();
 
-                chrome.idle.queryState(this.detectionIntervalInSeconds, (newState) => {
+                        chrome.idle.queryState(this.detectionIntervalInSeconds, (newState) => {
 
-                    if (newState === 'active') {
+                            if (newState === 'active') {
-                        // Get current tab URL.
+                                // Get current tab URL.
-                        chrome.tabs.query({active: true}, (tabs) => {
+                                chrome.tabs.query({active: true}, (tabs) => {
-                            this.sendHeartbeat(tabs[0].url);
+                                    this.sendHeartbeat(tabs[0].url);
+                                });
+                            }
                         });
                     }
+                    else {
+                        changeExtensionIcon('red');
+                    }
                 });
-
             }
             else {
 
@@ -120,6 +127,9 @@ class WakaTime {
 
         var payload = null;
 
+        // TODO: Detect if devTools are open
+        console.log(devtools.open);
+
         this._getLoggingType().done((loggingType) => {
 
             // Get only the domain from the entity.

assets/js/components/MainList.react.js

@@ -44,6 +44,38 @@ class MainList extends React.Component {
             );
         };
 
+        // If logging is enabled, display that info to user
+        var loggingStatus = () => {
+            if(this.props.loggingEnabled === true && this.props.loggedIn === true)
+            {
+                return (
+                    <div className="panel panel-default">
+                        <div className="panel-body">
+                            <div className="row">
+                                <div className="col-xs-12">
+                                    <a href="#" onClick={this.props.disableLogging} className="btn btn-danger btn-lg btn-block">Disable logging</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                );
+            }
+            else
+            {
+                return (
+                    <div className="panel panel-default">
+                        <div className="panel-body">
+                            <div className="row">
+                                <div className="col-xs-12">
+                                    <a href="#" onClick={this.props.enableLogging} className="btn btn-success btn-lg btn-block">Enable logging</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                );
+            }
+        };
+
         var signedInAs = () => {
             if (this.props.loggedIn === true) {
                 return (
@@ -54,12 +86,13 @@ class MainList extends React.Component {
                                     <img className="img-circle" width="48" height="48" src={this.props.user.photo} />
                                 </div>
                                 <div className="col-xs-10">
-                                    Signed in as
+                                    Signed in as&nbsp;
                                     <b>{this.props.user.full_name}</b>
                                     <br />
                                     {this.props.user.email}
                                 </div>
                             </div>
+
                         </div>
                     </div>
                 );
@@ -71,6 +104,8 @@ class MainList extends React.Component {
 
                 {signedInAs()}
 
+                {loggingStatus()}
+
                 <div className="list-group">
                     <a href="#" className="list-group-item" onClick={this._openOptionsPage}>
                         <i className="fa fa-fw fa-cogs"></i>

assets/js/components/WakaTime.react.js

@@ -14,20 +14,11 @@ class WakaTime extends React.Component {
             email: null,
             photo: null
         },
-        loggedIn: false
+        loggedIn: false,
+        loggingEnabled: false
     };
 
     componentDidMount() {
-        chrome.storage.sync.get({
-            theme: 'light'
-        }, function (items) {
-            if (items.theme == 'light') {
-                changeExtensionIcon();
-            }
-            else {
-                changeExtensionIcon('white');
-            }
-        });
 
         var wakatime = new WakaTimeOriginal;
 
@@ -35,6 +26,18 @@ class WakaTime extends React.Component {
 
             if (data !== false) {
 
+                chrome.storage.sync.get({
+                    loggingEnabled: false
+                }, (items) => {
+                    this.setState({loggingEnabled: items.loggingEnabled});
+                    if (items.loggingEnabled === true) {
+                        changeExtensionIcon();
+                    }
+                    else {
+                        changeExtensionIcon('red');
+                    }
+                });
+
                 this.setState({
                     user: {
                         full_name: data.full_name,
@@ -43,8 +46,6 @@ class WakaTime extends React.Component {
                     },
                     loggedIn: true
                 });
-
-                changeExtensionIcon();
             }
             else {
                 changeExtensionIcon('red');
@@ -84,7 +85,8 @@ class WakaTime extends React.Component {
                     email: null,
                     photo: null
                 },
-                loggedIn: false
+                loggedIn: false,
+                loggingEnabled: false
             });
 
             changeExtensionIcon('red');
@@ -92,6 +94,30 @@ class WakaTime extends React.Component {
         });
     }
 
+    _disableLogging() {
+        this.setState({
+            loggingEnabled: false
+        });
+
+        changeExtensionIcon('red');
+
+        chrome.storage.sync.set({
+            loggingEnabled: false
+        });
+    }
+
+    _enableLogging() {
+        this.setState({
+            loggingEnabled: true
+        });
+
+        changeExtensionIcon();
+
+        chrome.storage.sync.set({
+            loggingEnabled: true
+        });
+    }
+
     render() {
         return (
             <div>
@@ -99,7 +125,13 @@ class WakaTime extends React.Component {
                 <div className="container">
                     <div className="row">
                         <div className="col-md-12">
-                            <MainList user={this.state.user} logoutUser={this._logoutUser.bind(this)} loggedIn={this.state.loggedIn} />
+                            <MainList
+                                disableLogging={this._disableLogging.bind(this)}
+                                enableLogging={this._enableLogging.bind(this)}
+                                loggingEnabled={this.state.loggingEnabled}
+                                user={this.state.user}
+                                logoutUser={this._logoutUser.bind(this)}
+                                loggedIn={this.state.loggedIn} />
                         </div>
                     </div>
                 </div>

assets/js/helpers/changeExtensionIcon.js

@@ -4,13 +4,37 @@
  */
 export default function changeExtensionIcon(color = '') {
 
+    var path = null;
+
     if (color !== '') {
         color = '-' + color;
+
+        path = './graphics/wakatime-logo-48' + color + '.png';
+
+        chrome.browserAction.setIcon({
+            path: path
+        });
     }
 
-    var path = './graphics/wakatime-logo-48' + color + '.png';
+    if (color === '') {
+        chrome.storage.sync.get({
+            theme: 'light'
+        }, function (items) {
+            if (items.theme == 'light') {
+                path = './graphics/wakatime-logo-48.png';
+
+                chrome.browserAction.setIcon({
+                    path: path
+                });
+            }
+            else {
+                path = './graphics/wakatime-logo-48-white.png';
+
+                chrome.browserAction.setIcon({
+                    path: path
+                });
+            }
+        });
+    }
 
-    chrome.browserAction.setIcon({
-        path: path
-    });
 }

assets/js/libs/devtools-detect.js

@@ -0,0 +1,40 @@
+/*!
+	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;
+	}
+})();

bower.json

@@ -1,14 +1,15 @@
 {
-    "name": "WakaTime",
+  "name": "WakaTime",
-    "ignore": [
+  "ignore": [
-        "**/.*",
+    "**/.*",
-        "node_modules",
+    "node_modules",
-        "bower_components",
+    "bower_components",
-        "test",
+    "test",
-        "tests"
+    "tests"
-    ],
+  ],
-    "dependencies": {
+  "dependencies": {
-        "font-awesome": "~4.3.0",
+    "font-awesome": "~4.3.0",
-        "bootstrap": "~3.3.4"
+    "bootstrap": "~3.3.4",
-    }
+    "devtools-detect": "~1.0.0"
+  }
 }

gulpfile.js

@@ -18,6 +18,7 @@ elixir(function (mix) {
     mix.copy('vendor/bower_components/bootstrap/fonts', 'public/fonts');
     mix.copy('vendor/bower_components/font-awesome/less', 'assets/less/font-awesome');
     mix.copy('vendor/bower_components/font-awesome/fonts', 'public/fonts');
+    mix.copy('vendor/bower_components/devtools-detect/devtools-detect.js', 'assets/js/libs/devtools-detect.js');
     mix.less('app.less');
     //mix.browserify('app.js', null, 'assets/js');
     mix.browserify('events.js', 'public/js/events.js', 'assets/js');

public/js/events.js

@@ -129,6 +129,10 @@ var _helpersChangeExtensionIconJs = require('./helpers/changeExtensionIcon.js');
 
 var _helpersChangeExtensionIconJs2 = _interopRequireDefault(_helpersChangeExtensionIconJs);
 
+var _libsDevtoolsDetectJs = require('./libs/devtools-detect.js');
+
+var _libsDevtoolsDetectJs2 = _interopRequireDefault(_libsDevtoolsDetectJs);
+
 var WakaTime = (function () {
     function WakaTime() {
         _classCallCheck(this, WakaTime);
@@ -183,17 +187,23 @@ var WakaTime = (function () {
 
                 if (data !== false) {
 
-                    // User is logged in.
+                    chrome.storage.sync.get({
-                    // Change extension icon to default color.
+                        loggingEnabled: false
-                    (0, _helpersChangeExtensionIconJs2['default'])();
+                    }, function (items) {
+                        if (items.loggingEnabled === true) {
+                            (0, _helpersChangeExtensionIconJs2['default'])();
 
-                    chrome.idle.queryState(_this2.detectionIntervalInSeconds, function (newState) {
+                            chrome.idle.queryState(_this2.detectionIntervalInSeconds, function (newState) {
 
-                        if (newState === 'active') {
+                                if (newState === 'active') {
-                            // Get current tab URL.
+                                    // Get current tab URL.
-                            chrome.tabs.query({ active: true }, function (tabs) {
+                                    chrome.tabs.query({ active: true }, function (tabs) {
-                                _this2.sendHeartbeat(tabs[0].url);
+                                        _this2.sendHeartbeat(tabs[0].url);
+                                    });
+                                }
                             });
+                        } else {
+                            (0, _helpersChangeExtensionIconJs2['default'])('red');
                         }
                     });
                 } else {
@@ -260,6 +270,9 @@ var WakaTime = (function () {
 
             var payload = null;
 
+            // TODO: Detect if devTools are open
+            console.log(_libsDevtoolsDetectJs2['default'].open);
+
             this._getLoggingType().done(function (loggingType) {
 
                 // Get only the domain from the entity.
@@ -332,7 +345,7 @@ module.exports = exports['default'];
 
 //default
 
-},{"./UrlHelper.js":2,"./helpers/changeExtensionIcon.js":4,"./helpers/currentTimestamp.js":5,"jquery":6}],4:[function(require,module,exports){
+},{"./UrlHelper.js":2,"./helpers/changeExtensionIcon.js":4,"./helpers/currentTimestamp.js":5,"./libs/devtools-detect.js":6,"jquery":7}],4:[function(require,module,exports){
 /**
  * It changes the extension icon color.
  * Supported values are: 'red', 'white' and ''.
@@ -347,15 +360,37 @@ exports['default'] = changeExtensionIcon;
 function changeExtensionIcon() {
     var color = arguments[0] === undefined ? '' : arguments[0];
 
+    var path = null;
+
     if (color !== '') {
         color = '-' + color;
+
+        path = './graphics/wakatime-logo-48' + color + '.png';
+
+        chrome.browserAction.setIcon({
+            path: path
+        });
     }
 
-    var path = './graphics/wakatime-logo-48' + color + '.png';
+    if (color === '') {
+        chrome.storage.sync.get({
+            theme: 'light'
+        }, function (items) {
+            if (items.theme == 'light') {
+                path = './graphics/wakatime-logo-48.png';
 
-    chrome.browserAction.setIcon({
+                chrome.browserAction.setIcon({
-        path: path
+                    path: path
-    });
+                });
+            } else {
+                path = './graphics/wakatime-logo-48-white.png';
+
+                chrome.browserAction.setIcon({
+                    path: path
+                });
+            }
+        });
+    }
 }
 
 module.exports = exports['default'];
@@ -377,6 +412,49 @@ exports["default"] = function () {
 module.exports = exports["default"];
 
 },{}],6:[function(require,module,exports){
+/*!
+	devtools-detect
+	Detect if DevTools is open
+	https://github.com/sindresorhus/devtools-detect
+	by Sindre Sorhus
+	MIT License
+*/
+'use strict';
+
+(function () {
+	'use strict';
+	var devtools = { open: false };
+	var threshold = 160;
+	var emitEvent = function emitEvent(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;
+	}
+})();
+
+},{}],7:[function(require,module,exports){
 /*!
  * jQuery JavaScript Library v2.1.4
  * http://jquery.com/