DevTools shortcut on Preferences and Waiver windows

changelog.txt

@@ -15,7 +15,9 @@
 - Fix: [#252] Prevent multiple preferences and workday waiver windows to be opened
 - Enhancement: [#228] Improved performance of TTL - Now moving through the calendar is much faster
 - Enhancement: [#152] Adding a "Copy" option in the "About message", making it easier to copy information when opening an issue
+- Enhancement: [#245] DevTools shortcut on Preferences and Waiver windows
 - Enhancement: [#247] Day View - new minimalist view that shows the calendar day by day
+- Enhancement: [#245] DevTools shortcut on Preferences and Waiver windows
 - Upgrade: Upgrading jquery to 3.5.0
 - Upgrade: [#236] Upgrade all dependencies
 

js/window-aux.js

@@ -0,0 +1,44 @@
+const { remote } = require('electron');
+const { BrowserWindow, dialog } = remote;
+
+/**
+ * Binds to the JS "window" the shortcut CTRL+SHIFT+I to toggle Chrome Dev Tools.
+ * @param {Window} window
+ */
+function bindDevToolsShortcut(window) {
+    window.addEventListener('keyup', (event) => {
+        if (event.ctrlKey && event.shiftKey && (event.keyCode == 73 || event.keyCode == 105)) { // 'i' or 'I'
+            BrowserWindow.getFocusedWindow().webContents.toggleDevTools();
+            event.preventDefault();
+            return false;
+        }
+    }, true);
+}
+
+/**
+ * Opens an electron dialog, based on the options, and performs the successCallback after promise is resolved.
+ * @param {Object.<string, any>} options
+ * @param {function} successCallback
+ */
+function showDialog(options, successCallback) {
+    options['title'] = options['title'] || 'Time to Leave';
+    dialog.showMessageBox(BrowserWindow.getFocusedWindow(), options).then(successCallback);
+}
+
+/**
+ * Opens an electron dialog just like a JS alert().
+ * @param {string} message
+ */
+function showAlert(message) {
+    let options = {
+        'title': 'Time to Leave',
+        'message': message
+    };
+    dialog.showMessageBoxSync(BrowserWindow.getFocusedWindow(), options);
+}
+
+module.exports = {
+    bindDevToolsShortcut,
+    showAlert,
+    showDialog
+};

main.js

@@ -141,6 +141,7 @@ function createWindow() {
                             resizable: true,
                             icon: iconpath,
                             webPreferences: {
+                                enableRemoteModule: true,
                                 nodeIntegration: true
                             } });
                         waiverWindow.setMenu(null);
@@ -202,6 +203,7 @@ function createWindow() {
                             resizable: true,
                             icon: iconpath,
                             webPreferences: {
+                                enableRemoteModule: true,
                                 nodeIntegration: true
                             } });
                         prefWindow.setMenu(null);

src/preferences.js

@@ -2,6 +2,7 @@ const { ipcRenderer } = require('electron');
 
 const { getUserPreferences } = require('../js/user-preferences.js');
 const { applyTheme } = require('../js/themes.js');
+const { bindDevToolsShortcut } = require('../js/window-aux.js');
 
 // Global values for preferences page
 let usersStyles = getUserPreferences();
@@ -75,4 +76,6 @@ $(() => {
     repetition.change(function() {
         notificationsInterval.prop('disabled', !repetition.is(':checked'));
     });
+
+    bindDevToolsShortcut(window);
 });

src/workday-waiver.html

@@ -49,7 +49,7 @@
                     </tbody>
                 </table>
                 <br>
-                <button class="waive-button" id="waive-button">
+                <button class="waive-button" id="waive-button" type="button">
                     Waive
                 </button>
             </form>

src/workday-waiver.js

@@ -6,6 +6,7 @@ const { getUserPreferences, showDay } = require('../js/user-preferences.js');
 const { validateTime, diffDays } = require('../js/time-math.js');
 const { applyTheme } = require('../js/themes.js');
 const { getDateStr } = require('../js/date-aux.js');
+const { bindDevToolsShortcut, showAlert, showDialog } = require('../js/window-aux.js');
 
 const waiverStore = new Store({name: 'waived-workdays'});
 
@@ -74,13 +75,8 @@ function addWaiver() {
 
     let diff = diffDays(startDate, endDate);
     if (diff < 0) {
-        dialog.showMessageBox(BrowserWindow.getFocusedWindow(),
-            {
-                message: 'End date cannot be less than start date.'
-            }
-        ).then(() => {
-            return;
-        });
+        showAlert('End date cannot be less than start date.');
+        return;
     }
 
     let tempDate = new Date(startDate);
@@ -90,26 +86,16 @@ function addWaiver() {
         let [tempYear, tempMonth, tempDay] = getDateFromISOStr(tempDateStr);
         noWorkingDaysOnRange &= !showDay(tempYear, tempMonth-1, tempDay) && !waiverStore.has(tempDateStr);
         if (waiverStore.has(tempDateStr)) {
-            dialog.showMessageBox(BrowserWindow.getFocusedWindow(),
-                {
-                    message: `You already have a waiver on ${tempDateStr}. Remove it before adding a new one.`
-                }
-            ).then(() => {
-                return;
-            });
+            showAlert(`You already have a waiver on ${temp_date_str}. Remove it before adding a new one.`);
+            return;
         }
 
         tempDate.setDate(tempDate.getDate() + 1);
     }
 
     if (noWorkingDaysOnRange) {
-        dialog.showMessageBox(BrowserWindow.getFocusedWindow(),
-            {
-                message: 'Cannot add waiver. Range does not contain any working day.'
-            }
-        ).then(() => {
-            return;
-        });
+        showAlert('Cannot add waiver. Range does not contain any working day.');
+        return;
     }
 
     tempDate = new Date(startDate);
@@ -134,13 +120,13 @@ function deleteEntryOnClick(event) {
     let deleteButton = $(event.target);
     let day = deleteButton.data('day');
 
-    dialog.showMessageBox(BrowserWindow.getFocusedWindow(),
-        {
-            title: 'Time to Leave',
-            message: 'Are you sure you want to delete waiver on day ' + day + '?',
-            type: 'info',
-            buttons: ['Yes', 'No']
-        }).then((result) => {
+    let options = {
+        title: 'Time to Leave',
+        message: `Are you sure you want to delete waiver on day ${day} ?`,
+        type: 'info',
+        buttons: ['Yes', 'No']
+    };
+    showDialog(options, (result) => {
         const buttonId = result.response;
         if (buttonId === 1) {
             return;
@@ -169,4 +155,6 @@ $(() => {
     $('#waive-button').on('click', () => {
         addWaiver();
     });
+
+    bindDevToolsShortcut(window);
 });