Add detached mode

Author: nilbuild

public/electron.js

@@ -69,11 +69,21 @@ function bindIpc() {
   });
 }
 
+// Makes the app start receiving the mouse interactions again
+function disableDetachedMode() {
+  app.dock && app.dock.setBadge('');
+  mainWindow.setIgnoreMouseEvents(false);
+}
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', createWindow);
 
+// Make the window start receiving mouse events on focus/activate
+app.on('browser-window-focus', disableDetachedMode);
+app.on('activate', disableDetachedMode);
+
 // Quit when all windows are closed.
 app.on('window-all-closed', function () {
   // On OS X it is common for applications and their menu bar

public/menu.js

@@ -81,7 +81,6 @@ function setMainMenu(mainWindow) {
     {
       label: 'Edit',
       submenu: [
-        ...getOpacityMenuItems(mainWindow),
         { role: 'undo' },
         { role: 'redo' },
         { type: 'separator' },
@@ -94,6 +93,7 @@ function setMainMenu(mainWindow) {
     {
       label: 'View',
       submenu: [
+        ...getOpacityMenuItems(mainWindow),
         {
           label: 'Toggle Navbar',
           accelerator: 'CmdOrCtrl+Shift+L',
@@ -112,6 +112,17 @@ function setMainMenu(mainWindow) {
         {
           type: 'separator'
         },
+        {
+          label: 'Detached Mode',
+          accelerator: 'CmdOrCtrl+Shift+D',
+          click() {
+            app.dock && app.dock.setBadge('Detached');
+            mainWindow.setIgnoreMouseEvents(true);
+          }
+        },
+        {
+          type: 'separator'
+        },
         {
           label: 'Developer Tools',
           accelerator: 'CmdOrCtrl+Alt+I',

readme.md

@@ -60,13 +60,16 @@ yarn start
 | **Shortcut**                    |    **Description**         |
 |---------------------------------|----------------------------|
 | <kbd>CmdOrCtrl + L</kbd>        | Show Navbar and focus URL input  |
+| <kbd>CmdOrCtrl + Shift + M</kbd>    | Enable detached mode  |
 | <kbd>CmdOrCtrl + Shift + L</kbd>    | Toggle Navbar on WebPages  |
 | <kbd>CmdOrCtrl + Shift + Up</kbd>   | Increase Opacity           |
 | <kbd>CmdOrCtrl + Shift + Down</kbd> | Decrease Opacity           |
 | <kbd>CmdOrCtrl + Alt + I</kbd>      | Show Developer Tools       |
 
 > **Note** – Changing the opacity is only supported in Windows and MacOS
 
+**Detached Mode** Enabling the detached mode makes Pennywise non-interactive – it will let any interactions fall through to the window below it. To remove the detached mode, focus the window either by clicking the dock icon or by activating it using <kbd>alt + tab</kbd>
+
 ## Screenshots
 
 > Homescreen for the application