From 8365730de53f8547503bf92d071361f2bcd8cc14 Mon Sep 17 00:00:00 2001 From: Zack Rauen Date: Wed, 26 Jan 2022 12:12:40 -0500 Subject: [PATCH] Add devtools listener setting --- assets/locales/en-us.json | 6 +++++- common/constants/ipcevents.js | 1 + injector/src/modules/ipc.js | 5 +++++ renderer/src/builtins/builtins.js | 1 + renderer/src/builtins/developer/devtools.js | 22 +++++++++++++++++++++ renderer/src/data/settings.js | 11 ++++++----- renderer/src/modules/ipc.js | 4 ++++ renderer/src/styles/ui/switch.css | 6 ++++++ 8 files changed, 50 insertions(+), 6 deletions(-) create mode 100644 renderer/src/builtins/developer/devtools.js diff --git a/assets/locales/en-us.json b/assets/locales/en-us.json index fb58a107..6ab0ae97 100644 --- a/assets/locales/en-us.json +++ b/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", diff --git a/common/constants/ipcevents.js b/common/constants/ipcevents.js index 8a810764..eed2e5cb 100644 --- a/common/constants/ipcevents.js +++ b/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"; diff --git a/injector/src/modules/ipc.js b/injector/src/modules/ipc.js index b17fd11a..00580eac 100644 --- a/injector/src/modules/ipc.js +++ b/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); diff --git a/renderer/src/builtins/builtins.js b/renderer/src/builtins/builtins.js index fef26cf0..8b0121fb 100644 --- a/renderer/src/builtins/builtins.js +++ b/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"; diff --git a/renderer/src/builtins/developer/devtools.js b/renderer/src/builtins/developer/devtools.js new file mode 100644 index 00000000..2536a115 --- /dev/null +++ b/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(); + } + } +}; \ No newline at end of file diff --git a/renderer/src/data/settings.js b/renderer/src/data/settings.js index 6ba71c33..80c7bfeb 100644 --- a/renderer/src/data/settings.js +++ b/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"}, ] }, { diff --git a/renderer/src/modules/ipc.js b/renderer/src/modules/ipc.js index 01f0d79c..15858a06 100644 --- a/renderer/src/modules/ipc.js +++ b/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); } diff --git a/renderer/src/styles/ui/switch.css b/renderer/src/styles/ui/switch.css index 8a9230cf..a94e4e51 100644 --- a/renderer/src/styles/ui/switch.css +++ b/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 { @@ -101,4 +102,9 @@ .bd-switch input:checked:active + .bd-switch-body .bd-switch-handle { x: 0; +} + +.bd-switch-disabled { + opacity: 0.5; + filter: grayscale(1); } \ No newline at end of file