Add devtools listener setting

assets/locales/en-us.json

@@ -102,9 +102,13 @@
             },
             "developer": {
                 "name": "Developer Settings",
+                "devTools": {
+                    "name": "DevTools",
+                    "note": "Enables toggling DevTools with ctrl+shift+i"
+                },
                 "debuggerHotkey": {
                     "name": "Debugger Hotkey",
-                    "note": "Allows activating debugger when pressing F8"
+                    "note": "Allows activating debugger when pressing F8 with DevTools open"
                 },
                 "reactDevTools": {
                     "name": "React Developer Tools",

common/constants/ipcevents.js

@@ -8,6 +8,7 @@ export const RUN_SCRIPT         = "bd-run-script";
 export const NAVIGATE           = "bd-did-navigate-in-page";
 export const OPEN_DEVTOOLS      = "bd-open-devtools";
 export const CLOSE_DEVTOOLS     = "bd-close-devtools";
+export const TOGGLE_DEVTOOLS    = "bd-toggle-devtools";
 export const OPEN_WINDOW        = "bd-open-window";
 export const INSPECT_ELEMENT    = "bd-inspect-element";
 export const MINIMUM_SIZE       = "bd-minimum-size";

injector/src/modules/ipc.js

@@ -49,6 +49,10 @@ const runScript = async (event, script) => {
 
 const openDevTools = event => event.sender.openDevTools();
 const closeDevTools = event => event.sender.closeDevTools();
+const toggleDevTools = event => {
+    if (!event.sender.isDevToolsOpened()) openDevTools(event);
+    else closeDevTools(event);
+};
 
 const createBrowserWindow = (event, url, {windowOptions, closeOnUrl} = {}) => {
     return new Promise(resolve => {
@@ -128,6 +132,7 @@ export default class IPCMain {
         ipc.on(IPCEvents.RELAUNCH, relaunch);
         ipc.on(IPCEvents.OPEN_DEVTOOLS, openDevTools);
         ipc.on(IPCEvents.CLOSE_DEVTOOLS, closeDevTools);
+        ipc.on(IPCEvents.TOGGLE_DEVTOOLS, toggleDevTools);
         ipc.on(IPCEvents.INSPECT_ELEMENT, inspectElement);
         ipc.on(IPCEvents.MINIMUM_SIZE, setMinimumSize);
         ipc.on(IPCEvents.DEVTOOLS_WARNING, stopDevtoolsWarning);

renderer/src/builtins/builtins.js

@@ -16,6 +16,7 @@ export {default as EmoteModule} from "./emotes/emotes";
 export {default as EmoteMenu} from "./emotes/emotemenu";
 // export {default as EmoteAutocaps} from "./emotes/emoteautocaps";
 
+export {default as DevToolsListener} from "./developer/devtools";
 export {default as Debugger} from "./developer/debugger";
 export {default as ReactDevTools} from "./developer/reactdevtools";
 export {default as InspectElement} from "./developer/inspectelement";

renderer/src/builtins/developer/devtools.js

@@ -0,0 +1,22 @@
+import Builtin from "../../structs/builtin";
+import IPC from "../../modules/ipc";
+
+export default new class DevToolsListener extends Builtin {
+    get name() {return "DevTools";}
+    get category() {return "developer";}
+    get id() {return "devTools";}
+
+    initialize() {
+        super.initialize(...arguments);
+        this.toggleDevTools = this.toggleDevTools.bind(this);
+        document.addEventListener("keydown", this.toggleDevTools);
+    }
+
+    toggleDevTools(e) {
+        if (e.ctrlKey && e.shiftKey && e.which === 73) { // Ctrl + Shift + I
+            e.stopPropagation();
+            e.preventDefault();
+            if (this.get(this.collection, this.category, this.id)) IPC.toggleDevTools();
+        }
+    }
+};

renderer/src/data/settings.js

@@ -51,11 +51,12 @@ export default [
         collapsible: true,
         shown: false,
         settings: [
-            {type: "switch", id: "debuggerHotkey", value: false},
-            {type: "switch", id: "reactDevTools", value: false},
-            {type: "switch", id: "inspectElement", value: false},
-            {type: "switch", id: "devToolsWarning", value: false},
-            {type: "switch", id: "debugLogs", value: false}
+            {type: "switch", id: "debugLogs", value: false},
+            {type: "switch", id: "devTools", value: false},
+            {type: "switch", id: "debuggerHotkey", value: false, enableWith: "devTools"},
+            {type: "switch", id: "reactDevTools", value: false, enableWith: "devTools"},
+            {type: "switch", id: "inspectElement", value: false, enableWith: "devTools"},
+            {type: "switch", id: "devToolsWarning", value: false, enableWith: "devTools"},
         ]
     },
     {

renderer/src/modules/ipc.js

@@ -20,6 +20,10 @@ export default new class IPCRenderer {
         return ipc.send(IPCEvents.CLOSE_DEVTOOLS);
     }
 
+    toggleDevTools() {
+        return ipc.send(IPCEvents.TOGGLE_DEVTOOLS);
+    }
+
     relaunch() {
         return ipc.send(IPCEvents.RELAUNCH);
     }

renderer/src/styles/ui/switch.css

@@ -2,6 +2,7 @@
 
 .bd-switch {
     position: relative;
+    transition: 250ms cubic-bezier(0, 0.3, 0.7, 1) filter, 250ms cubic-bezier(0, 0.3, 0.7, 1) opacity;
 }
 
 .bd-switch-body {
@@ -102,3 +103,8 @@
 .bd-switch input:checked:active + .bd-switch-body .bd-switch-handle {
     x: 0;
 }
+
+.bd-switch-disabled {
+    opacity: 0.5;
+    filter: grayscale(1);
+}