added devtools toggle for developers in production

Venipa · Dec 13, 2021 · cd4a419 · cd4a419
1 parent ca61e49
commit cd4a419
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ytmdesktop2",
-  "version": "0.4.16",
+  "version": "0.4.17",
   "private": false,
   "author": "Venipa <[email protected]>",
   "license": "MIT",

diff --git a/src/app/main.ts b/src/app/main.ts
@@ -1,28 +1,14 @@
-import {
-  app,
-  protocol,
-  BrowserWindow,
-  ipcMain,
-  shell,
-  BrowserWindowConstructorOptions,
-  BrowserView,
-} from "electron";
-import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
-import path from "path";
-import { rootWindowInjectUtils } from "./utils/webContentUtils";
-import { defaultUrl, isDevelopment } from "./utils/devUtils";
-import {
-  BrowserWindowViews,
-  createWindowContext,
-  getViewObject,
-} from "./utils/mappedWindow";
-import { debounce } from "lodash-es";
-import logger from "@/utils/Logger";
-import {
-  createEventCollection,
-  createPluginCollection,
-} from "./utils/serviceCollection";
-import { createApiView, createView } from "./utils/view";
+import logger from '@/utils/Logger';
+import { app, BrowserView, BrowserWindow, BrowserWindowConstructorOptions, ipcMain, protocol, shell } from 'electron';
+import { debounce } from 'lodash-es';
+import path from 'path';
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib';
+
+import { defaultUrl, isDevelopment } from './utils/devUtils';
+import { BrowserWindowViews, createWindowContext, getViewObject } from './utils/mappedWindow';
+import { createEventCollection, createPluginCollection } from './utils/serviceCollection';
+import { createApiView, createView } from './utils/view';
+import { rootWindowInjectUtils } from './utils/webContentUtils';
 
 function parseScriptPath(p: string) {
   return path.resolve(__dirname, p);
@@ -49,7 +35,8 @@ export default async function() {
   protocol.registerSchemesAsPrivileged([
     { scheme: "app", privileges: { secure: true, standard: true } },
   ]);
-  app.userAgentFallback = "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:92.0) Gecko/20100101 Firefox/92.0";
+  app.userAgentFallback =
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:92.0) Gecko/20100101 Firefox/92.0";
 
   /**
    *
@@ -141,18 +128,23 @@ export default async function() {
         : "/youtube/toolbar",
       (view) => {
         win.addBrowserView(view);
+        win.setTopBrowserView(view);
         const [width] = win.getSize();
         view.setBounds({
           height: 40,
-          y: 0,
-          x: 0,
           width,
+          x: 0,
+          y: 0,
         });
+        view.setBackgroundColor("transparent");
         view.setAutoResize({ width: true });
         if (isDevelopment) view.webContents.openDevTools({ mode: "detach" });
       }
     );
-    ipcMain.on("app.loadEnd", () => win.removeBrowserView(loadingView));
+    ipcMain.on("app.loadEnd", () => {
+      win.removeBrowserView(loadingView);
+      win.setTopBrowserView(toolbarView);
+    });
     ipcMain.on(
       "app.loadStart",
       debounce(() => {

diff --git a/src/app/plugins/navigationProvider.plugin.ts b/src/app/plugins/navigationProvider.plugin.ts
@@ -1,7 +1,7 @@
 import { App } from "electron";
 import { BaseProvider, AfterInit } from "../utils/baseProvider";
 import { defaultUrl } from "../utils/devUtils";
-import { IpcContext, IpcOn } from "../utils/onIpcEvent";
+import { IpcContext, IpcHandle, IpcOn } from "../utils/onIpcEvent";
 
 @IpcContext
 export default class EventProvider extends BaseProvider implements AfterInit {
@@ -20,10 +20,18 @@ export default class EventProvider extends BaseProvider implements AfterInit {
     });
   }
 
-  @IpcOn("action:nav.same-origin", {
+  @IpcHandle("action:nav.same-origin", {
     debounce: 1000,
   })
   private async __onHomeAction() {
     await this.views.youtubeView.webContents.loadURL(defaultUrl);
   }
+  @IpcHandle("action:app.devTools", {
+    debounce: 1000,
+  })
+  private async __onDevAction() {
+    if (!this.views.youtubeView.webContents.isDevToolsOpened())
+      this.views.youtubeView.webContents.openDevTools({ mode: "detach" });
+    else this.views.youtubeView.webContents.closeDevTools();
+  }
 }
diff --git a/src/app/plugins/settingsProvider.plugin.ts b/src/app/plugins/settingsProvider.plugin.ts
@@ -20,6 +20,7 @@ const defaultSettings = {
     autoupdate: true,
     autostart: true,
     getstarted: true,
+    enableDev: false
   },
   player: {
     skipDisliked: false

diff --git a/src/assets/icons/chip.svg b/src/assets/icons/chip.svg
diff --git a/src/preload.js b/src/preload.js
@@ -39,6 +39,8 @@ export default {
     minimize: () => ipcRenderer.send("app.minimize"),
     maximize: () => ipcRenderer.send("app.maximize"),
     quit: () => ipcRenderer.send("app.quit"),
+    action: (event, ...data) => ipcRenderer.invoke(`action:${event}`, ...data),
+    invoke: (event, ...data) => ipcRenderer.invoke(event, ...data),
     emit: (event, ...data) => ipcRenderer.send(event, ...data),
     emitTo: (id, event, ...data) => ipcRenderer.sendTo(id, event, ...data),
     on: (channel, func) => ipcRenderer.on(channel, func),

diff --git a/src/views/settings/generic-settings.vue b/src/views/settings/generic-settings.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="flex flex-col gap-4">
-    <div
-      class="bg-opacity-5 bg-white shadow sm:rounded-lg mt-4"
-      v-if="getStartedEnabled"
-    >
+    <div class="bg-opacity-5 bg-white shadow sm:rounded-lg mt-4" v-if="getStartedEnabled">
       <div class="px-4 py-5 sm:p-6">
         <h3 class="text-lg leading-6 font-medium text-gray-100">
           Get Started
@@ -15,22 +12,12 @@
           </p>
         </div>
         <div class="mt-3 text-sm">
-          <a
-            href="https://ytmdesktop.app/"
-            target="_blank"
-            class="font-medium text-indigo-400 hover:text-indigo-300"
-          >
+          <a href="https://ytmdesktop.app/" target="_blank" class="font-medium text-indigo-400 hover:text-indigo-300">
             Learn more about our features
-            <span aria-hidden="true">&rarr;</span></a
-          >
+            <span aria-hidden="true">&rarr;</span></a>
         </div>
         <div class="mt-3 text-xs">
-          <a
-            href="#"
-            class="font-medium text-red-400 hover:text-red-300"
-            @click.prevent="disableGetStarted"
-            >Don't show again</a
-          >
+          <a href="#" class="font-medium text-red-400 hover:text-red-300" @click.prevent="disableGetStarted">Don't show again</a>
         </div>
       </div>
     </div>
@@ -41,6 +28,18 @@
       <settings-checkbox configKey="app.autoupdate">
         Enable Autoupdate
       </settings-checkbox>
+      <settings-checkbox configKey="app.enableDev" class="group">
+        <div class="flex flex-col">
+          <div>Enable Developer Mode</div>
+          <div class="select-none opacity-80 group-hover:opacity-100 text-xs font-medium">... to design or test additional functionality</div>
+          <div class="select-none flex flex-col opacity-80 group-hover:opacity-100 text-xs font-medium">
+            <div class="flex space-x-1">
+              <div class="uppercase font-bold text-red-500">Hold Up!</div> If someone told you to copy/paste something here you have an 11/10 chance you're being scammed.
+            </div>
+            <div>Pasting anything in the console could give attackers access to your Google/Youtube account.</div>
+          </div>
+        </div>
+      </settings-checkbox>
     </div>
   </div>
 </template>
@@ -53,20 +52,15 @@ export default defineComponent({
   components: { SettingsCheckbox },
   methods: {
     disableGetStarted() {
-      (window as any).api.settingsProvider
-        .update("app.getstarted", false)
-        .then((v) => {
-          this.getStartedEnabled = v;
-        });
+      (window as any).api.settingsProvider.update("app.getstarted", false).then((v) => {
+        this.getStartedEnabled = v;
+      });
     },
   },
   setup() {
     const getStartedEnabled = ref<boolean>(true);
     onMounted(async () => {
-      getStartedEnabled.value = await (window as any).api.settingsProvider.get(
-        "app.getstarted",
-        true
-      );
+      getStartedEnabled.value = await (window as any).api.settingsProvider.get("app.getstarted", true);
     });
     return {
       getStartedEnabled,

diff --git a/src/views/youtube/toolbar-options.vue b/src/views/youtube/toolbar-options.vue
@@ -3,6 +3,9 @@
     <div @click="() => action('nav.same-origin')" class="control-button relative w-4 h-4" v-if="!isHome">
       <HomeIcon></HomeIcon>
     </div>
+    <div @click="() => action('app.devTools')" class="control-button relative w-4 h-4" v-if="isDev">
+      <DevIcon></DevIcon>
+    </div>
     <div @click="() => toggleSetting('discord.enabled')" class="control-button relative" :class="{ 'opacity-100': discordEnabled, 'opacity-70': !discordEnabled }">
       <RPCIcon></RPCIcon>
       <div v-if="discordConnected" class="p-0.5 rounded-full bg-green-500 absolute top-0 right-0 w-3 h-3 flex items-center justify-center">
@@ -23,9 +26,11 @@
 import { defineComponent, ref } from "@vue/runtime-core";
 import RPCIcon from "@/assets/icons/discord-rpc.svg";
 import HomeIcon from "@/assets/icons/home.svg";
+import DevIcon from "@/assets/icons/chip.svg";
 const discordConnected = ref(false),
   discordEnabled = ref(!!window.settings.get("discord.enabled"));
 const isHome = ref(true);
+const isDev = ref(false);
 const subscribers = [];
 subscribers.push(
   window.ipcRenderer.on("discord.connected", () => (discordConnected.value = true)),
@@ -35,33 +40,36 @@ subscribers.push(
   }),
   window.ipcRenderer.on("settingsProvider.change", (ev, key, value) => {
     if (key === "discord.enabled" && value !== discordEnabled.value) discordEnabled.value = !!value;
+    if (key === "app.enableDev" && value !== isDev.value) isDev.value = !!value;
   })
 );
 export default defineComponent({
-  components: { RPCIcon, HomeIcon },
+  components: { RPCIcon, HomeIcon, DevIcon },
   methods: {
     onSettings() {
       window.api.settings.open();
     },
   },
   setup() {
     discordEnabled.value = !!window.settings.get("discord.enabled");
+    isDev.value = !!window.settings.get("app.enableDev");
     window.ipcRenderer.invoke("req:discord.connected").then((x) => (discordConnected.value = !!x));
     return {
       discordEnabled,
       discordConnected,
       isHome,
+      isDev,
       async toggleSetting(key) {
         const setting = await window.api.settingsProvider.update(key, !window.settings.get(key));
         if (key === "discord.enabled") discordEnabled.value = setting;
       },
       action(actionParam) {
-        window.api.emit(`action:${actionParam}`);
+        return window.api.action(actionParam);
       },
     };
   },
   unmounted() {
-    subscribers.filter(x => !!x).forEach(window.ipcRenderer.off);
+    subscribers.filter((x) => !!x).forEach(window.ipcRenderer.off);
   },
 });
 </script>