feat: Devtools keybinds, config.enableDevtoolsUntilTimestamp + bypass flag

src/config.d.ts

@@ -5,6 +5,7 @@ declare type DesktopConfig = {
   spellchecker: boolean;
   hardwareAcceleration: boolean;
   discordRpc: boolean;
+  enableDevtoolsUntilTimestamp: number;
   windowState: {
     x: number;
     y: number;

src/native/config.ts

@@ -60,6 +60,7 @@ const store = new Store({
     spellchecker: true,
     hardwareAcceleration: true,
     discordRpc: true,
+    enableDevtoolsUntilTimestamp: 0,
     windowState: {
       x: 0,
       y: 0,
@@ -83,6 +84,7 @@ class Config {
       spellchecker: this.spellchecker,
       hardwareAcceleration: this.hardwareAcceleration,
       discordRpc: this.discordRpc,
+      enableDevtoolsUntilTimestamp: this.enableDevtoolsUntilTimestamp,
       windowState: this.windowState,
     });
   }
@@ -192,6 +194,19 @@ class Config {
     this.sync();
   }
 
+  get enableDevtoolsUntilTimestamp() {
+    return (store as never as { get(k: string): number }).get("discordRpc");
+  }
+
+  set enableDevtoolsUntilTimestamp(value: number) {
+    (store as never as { set(k: string, value: number): void }).set(
+      "enableDevtoolsUntilTimestamp",
+      value,
+    );
+
+    this.sync();
+  }
+
   get windowState() {
     return (
       store as never as { get(k: string): DesktopConfig["windowState"] }

src/native/window.ts

@@ -14,6 +14,13 @@ import windowIconAsset from "../../assets/desktop/icon.png?asset";
 import { config } from "./config";
 import { updateTrayMenu } from "./tray";
 
+// Surprisingly, I am having a lot of trouble figuring out what to name this?
+// I want the warning to actually warn the end user instead of just being a
+// very generic "I know what I am doing" dialog that is instinctively skipped.
+const bypassDevtoolsExpirationSetting = process.argv.includes(
+  "--bypass-devtools-expiration-and-i-am-not-being-told-to-paste-scripts"
+);
+
 // global reference to main window
 export let mainWindow: BrowserWindow;
 
@@ -141,6 +148,28 @@ export function createMainWindow() {
     }
   });
 
+  // Afaik, this is the easiest way to let the app
+  // turn the keybinds for opening devtools on/off.
+  // Adapted from: https://stackoverflow.com/a/75716165
+  mainWindow.webContents.on("before-input-event", (_, input) => {
+    if (input.type !== "keyDown") {
+      return;
+    }
+
+    const devtoolsExpired = config.enableDevtoolsUntilTimestamp < Date.now();
+    if (devtoolsExpired && !bypassDevtoolsExpirationSetting) {
+      config.enableDevtoolsUntilTimestamp = 0;
+      return;
+    }
+
+    // `input.key`, for letters, is UPPERCASE if shift is pressed, lowercase otherwise.
+    // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
+    const ctrlShiftI = input.control && input.key === "I";
+    if (ctrlShiftI || input.key === "F12") {
+      mainWindow.webContents.toggleDevTools();
+    }
+  });
+
   // send the config
   mainWindow.webContents.on("did-finish-load", () => config.sync());