Merge pull request #4 from Lukewh/dev-console

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

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": {

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");
+});

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;
+}

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

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