Add devtools listener setting

This commit is contained in:
Zack Rauen 2022-01-26 12:12:40 -05:00
parent 1d1fbc4810
commit 8365730de5
8 changed files with 50 additions and 6 deletions

View File

@ -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",

View File

@ -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";

View File

@ -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);

View File

@ -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";

View File

@ -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();
}
}
};

View File

@ -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"},
]
},
{

View File

@ -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);
}

View File

@ -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);
}