feat(settings): Add "Reset settings" feature to Settings

- Closes #1317. Also log out user after resetting; this is the safest way to "reset" the extension and its state.

- Use background page database in bugsnag. In some instances, such as settings, db may not be present in the global scope already. DB class needs refactoring to not rely on global state, possibly.

- Refresh settings page after resetting settings

src/chrome-manifest.json

@@ -32,7 +32,8 @@
   },
   "options_ui": {
     "page": "html/settings.html",
-    "chrome_style": true
+    "chrome_style": true,
+    "open_in_tab": true
   },
   "permissions": [
     "*://*.toggl.com/*",

src/firefox-manifest.json

@@ -30,7 +30,8 @@
     "128": "images/icon-128.png"
   },
   "options_ui": {
-    "page": "html/settings.html"
+    "page": "html/settings.html",
+    "open_in_tab": true
   },
   "permissions": [
     "*://*.toggl.com/*",

src/html/settings.html

@@ -131,6 +131,12 @@
                 </p>
               </div>
             </li>
+            <li class="danger-zone">
+              <hr />
+              <h3>Danger Zone</h3>
+              <button id="reset-all-settings">Reset all settings to default</button>
+              <p><strong>This action is irreversible.</strong> All Toggl Button settings will be reset and you will be logged out.</p>
+            </li>
           </ul>
         </div>
         <div class="tab tab-2">

src/scripts/background.js

@@ -1035,25 +1035,27 @@ window.TogglButton = {
     });
   },
 
-  logoutUser: function (sendResponse) {
-    TogglButton.ajax('/sessions?created_with=' + TogglButton.$fullVersion, {
-      method: 'DELETE',
-      onLoad: function (xhr) {
-        TogglButton.$user = null;
-        TogglButton.updateTriggers(null);
-        localStorage.removeItem('userToken');
-        sendResponse({ success: xhr.status === 200, xhr: xhr });
-        if (xhr.status === 200) {
-          TogglButton.setBrowserActionBadge();
+  logoutUser: function () {
+    return new Promise((resolve) => {
+      TogglButton.ajax('/sessions?created_with=' + TogglButton.$fullVersion, {
+        method: 'DELETE',
+        onLoad: function (xhr) {
+          TogglButton.$user = null;
+          TogglButton.updateTriggers(null);
+          localStorage.removeItem('userToken');
+          resolve({ success: xhr.status === 200, xhr: xhr });
+          if (xhr.status === 200) {
+            TogglButton.setBrowserActionBadge();
+          }
+          TogglButton.refreshPageLogout();
+        },
+        onError: function (xhr) {
+          resolve({
+            success: false,
+            type: 'logout'
+          });
         }
-        TogglButton.refreshPageLogout();
-      },
-      onError: function (xhr) {
-        sendResponse({
-          success: false,
-          type: 'logout'
-        });
-      }
+      });
     });
   },
 
@@ -1794,7 +1796,9 @@ window.TogglButton = {
           request.type === 'update-enable-auto-tagging'
         ) {
           db.updateSetting('enableAutoTagging', request.state);
-
+        } else if (request.type === 'settings-reset') {
+          TogglButton.logoutUser();
+          resolve();
           // Background messages
         } else if (request.type === 'activate') {
           TogglButton.checkDailyUpdate();
@@ -1814,7 +1818,7 @@ window.TogglButton = {
             })
             .catch(() => resolve(undefined));
         } else if (request.type === 'logout') {
-          TogglButton.logoutUser(sendResponse);
+          TogglButton.logoutUser().then(resolve);
         } else if (request.type === 'sync') {
           TogglButton.fetchUser();
         } else if (request.type === 'timeEntry') {

src/scripts/lib/bugsnag.js

@@ -1,4 +1,5 @@
 import bugsnag from 'bugsnag-js';
+const browser = require('webextension-polyfill');
 
 function noop (fnName) {
   return function () {
@@ -23,6 +24,7 @@ function getBugsnagClient () {
     autoCaptureSessions: false,
     collectUserIp: false,
     beforeSend: async function (report) {
+      const db = browser.extension.getBackgroundPage().db;
       const sendErrorReports = await db.get('sendErrorReports', true);
       if (!sendErrorReports) {
         report.ignore();

src/scripts/lib/db.js

@@ -259,6 +259,18 @@ export default class Db {
     }
   }
 
+  resetAllSettings () {
+    const allSettings = { ...DEFAULT_SETTINGS, ...CORE_SETTINGS };
+    return this.setMultiple(allSettings)
+      .then(() => {
+        bugsnagClient.leaveBreadcrumb('Completed reset all settings');
+      })
+      .catch((e) => {
+        bugsnagClient.notify(e);
+        alert('Failed to reset settings. Please contact support@toggl.com for assistance or try re-installing the extension.');
+      });
+  }
+
   _migrateToStorageSync () {
     console.info('Migrating settings to v2');
     bugsnagClient.leaveBreadcrumb('Attempting settings migration to v2');

src/scripts/settings.js

@@ -1,5 +1,5 @@
-import './lib/bugsnag';
 import TogglOrigins from './origins';
+import bugsnagClient from './lib/bugsnag';
 const browser = require('webextension-polyfill');
 
 let TogglButton = browser.extension.getBackgroundPage().TogglButton;
@@ -45,6 +45,7 @@ const Settings = {
   $sendUsageStatistics: null,
   $sendErrorReports: null,
   $enableAutoTagging: null,
+  $resetAllSettings: null,
   showPage: async function () {
     const pomodoroSoundVolume = await db.get('pomodoroSoundVolume');
     const volume = parseInt(pomodoroSoundVolume * 100, 10);
@@ -474,6 +475,7 @@ const Settings = {
 
     if (e.target.tagName !== 'INPUT') {
       target = e.target.querySelector('input');
+      if (!target) target = e.target.parentElement.querySelector('input');
       target.checked = !target.checked;
     }
 
@@ -622,6 +624,7 @@ document.addEventListener('DOMContentLoaded', async function (e) {
     );
     Settings.$sendErrorReports = document.querySelector('#send-error-reports');
     Settings.$enableAutoTagging = document.querySelector('#enable-auto-tagging');
+    Settings.$resetAllSettings = document.querySelector('#reset-all-settings');
 
     // Show permissions page with notice
     const dontShowPermissions = await db.get('dont-show-permissions');
@@ -699,7 +702,7 @@ document.addEventListener('DOMContentLoaded', async function (e) {
       Settings.toggleSetting(e.target, !startAutomatically, 'toggle-start-automatically');
     });
     Settings.$stopAutomatically.addEventListener('click', async function (e) {
-      const stopAutomatically = await db.getItem('stopAutomatically');
+      const stopAutomatically = await db.get('stopAutomatically');
       Settings.toggleSetting(e.target, !stopAutomatically, 'toggle-stop-automatically');
     });
     Settings.$postPopup.addEventListener('click', async function (e) {
@@ -863,6 +866,24 @@ document.addEventListener('DOMContentLoaded', async function (e) {
           'none';
       });
 
+    Settings.$resetAllSettings.addEventListener('click', function (e) {
+      bugsnagClient.leaveBreadcrumb('Triggered reset all settings');
+      const isConfirmed = confirm('Are you sure you want to reset your settings?');
+      if (!isConfirmed) {
+        bugsnagClient.leaveBreadcrumb('Cancelled reset all settings');
+        return;
+      }
+
+      bugsnagClient.leaveBreadcrumb('Confirmed reset all settings');
+      db.resetAllSettings()
+        .then(() => {
+          browser.runtime
+            .sendMessage({ type: 'settings-reset' })
+            .then(() => window.location.reload())
+            .catch(() => window.location.reload());
+        });
+    });
+
     Settings.$sendUsageStatistics.addEventListener('click', async function (e) {
       const sendUsageStatistics = await db.get('sendUsageStatistics');
       Settings.toggleSetting(e.target, !sendUsageStatistics, 'update-send-usage-statistics');

src/styles/settings.css

@@ -32,7 +32,7 @@ input[type='number'] {
 .tabs {
   display: flex;
   overflow: hidden;
-  height: 350px;
+  height: calc(100vh - 35px - 42px);
   width: 100vw;
   transition: order 300ms ease-in-out;
   align-items: stretch;