diff --git a/main.js b/main.js index b701393..9379ff8 100644 --- a/main.js +++ b/main.js @@ -5,6 +5,7 @@ const { app, BrowserWindow, desktopCapturer, ipcMain } = require("electron"); const path = require("path"); const createWindow = () => { + let devtoolsOpen = false; // Create the browser window. const mainWindow = new BrowserWindow({ width: 1024, @@ -36,6 +37,26 @@ const createWindow = () => { // Open the DevTools. //mainWindow.webContents.openDevTools(); + + ipcMain.handle("TOGGLE_DEV_TOOLS", async (event, opts) => { + if (!devtoolsOpen) { + mainWindow.webContents.openDevTools(); + } else { + mainWindow.webContents.closeDevTools(); + } + }); + + mainWindow.webContents.on("devtools-opened", () => { + devtoolsOpen = true; + // setImmediate(() => { + // // do whatever you want to do after dev tool completely opened here + + // }); + }); + + mainWindow.webContents.on("devtools-closed", () => { + devtoolsOpen = false; + }); }; // This method will be called when Electron has finished diff --git a/package.json b/package.json index 4e98457..b60d173 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gathertown", - "version": "0.1.1", + "version": "0.2.0", "description": "A better way to meet.", "main": "main.js", "scripts": { diff --git a/preload.js b/preload.js index d61237d..004a1e3 100644 --- a/preload.js +++ b/preload.js @@ -16,3 +16,7 @@ window.addEventListener("DOMContentLoaded", () => { contextBridge.exposeInMainWorld("myCustomGetDisplayMedia", async () => { return await ipcRenderer.invoke("DESKTOP_CAPTURER_GET_SOURCES"); }); + +contextBridge.exposeInMainWorld("toggleDevTools", async () => { + return await ipcRenderer.invoke("TOGGLE_DEV_TOOLS"); +}); diff --git a/renderer.css b/renderer.css index 5865ad7..ac5b698 100644 --- a/renderer.css +++ b/renderer.css @@ -58,3 +58,28 @@ width: 100%; overflow: hidden; } + +#snap-dev-tools { + position: absolute; + top: 10px; + left: 10px; + font-size: 11px; + font-family: monospace; + color: #fff; + background: #000; + border: 1px solid rgba(255,255,255,0.5); + border-radius: 5px; + width: 16px; + height: 16px; + display: flex; + z-index: 99999; + cursor: pointer; + justify-content: center; + align-items: center; + line-height: 0; + opacity: 0.4; +} + +#snap-dev-tools:hover { + opacity: 1; +} diff --git a/renderer.js b/renderer.js index 89c8e91..c6fa98c 100644 --- a/renderer.js +++ b/renderer.js @@ -147,3 +147,17 @@ const createSourceEl = (source) => { el: wrapper, }; }; + +const addDevToggle = async () => { + const devToolsButton = document.createElement("div"); + devToolsButton.setAttribute("id", "snap-dev-tools"); + devToolsButton.innerText = ">_"; + + devToolsButton.addEventListener("click", () => { + window.toggleDevTools(); + }); + + document.body.appendChild(devToolsButton); +}; + +addDevToggle(); diff --git a/snapcraft.yaml b/snapcraft.yaml index 1318f79..862305c 100644 --- a/snapcraft.yaml +++ b/snapcraft.yaml @@ -1,5 +1,5 @@ name: gathertown -version: 0.1.1 +version: 0.2.0 summary: A better way to meet. description: | Electron wrapper for Gather Town