Minor Fixes (border, history line background), Toggle DevUI (#379)

* restore sidebar right border, fix line-container background color for history

* add a dev-only 'Toggle Dev UI' switch in the View Menu (for testing UI and screenshots, etc.)

src/app/app.tsx

@@ -32,7 +32,7 @@ class App extends React.Component<{}, {}> {
 
     constructor(props: {}) {
         super(props);
-        if (GlobalModel.isDev) document.body.className = "is-dev";
+        if (GlobalModel.isDev) document.body.classList.add("is-dev");
     }
 
     @boundMethod

src/app/history/history.less

@@ -257,7 +257,6 @@
                 .line-container {
                     padding: 0px 10px 10px 10px;
                     overflow-x: auto;
-                    background-color: var(--term-black);
                 }
 
                 .line-context {

src/app/sidebar/sidebar.less

@@ -11,6 +11,7 @@
     font-size: var(--sidebar-font-size);
     font-family: var(--base-font-family);
     font-weight: var(--sidebar-font-weight);
+    border-right: 1px solid var(--app-border-color);
 
     .title-bar-drag {
         -webkit-app-region: drag;

src/electron/emain.ts

@@ -34,6 +34,7 @@ let wasActive = true;
 let wasInFg = true;
 let currentGlobalShortcut: string | null = null;
 let initialClientData: ClientDataType = null;
+let MainWindow: Electron.BrowserWindow | null = null;
 
 checkPromptMigrate();
 ensureDir(waveHome);
@@ -199,6 +200,55 @@ function readAuthKey(): string {
 }
 const reloadAcceleratorKey = unamePlatform == "darwin" ? "Option+R" : "Super+R";
 const cmdOrAlt = process.platform === "darwin" ? "Cmd" : "Alt";
+let viewSubMenu: Electron.MenuItemConstructorOptions[] = [];
+viewSubMenu.push({ role: "reload", accelerator: reloadAcceleratorKey });
+viewSubMenu.push({ role: "toggleDevTools" });
+if (isDev) {
+    viewSubMenu.push({
+        label: "Toggle Dev UI",
+        click: () => {
+            MainWindow?.webContents.send("toggle-devui");
+        },
+    });
+}
+viewSubMenu.push({ type: "separator" });
+viewSubMenu.push({
+    label: "Actual Size",
+    accelerator: cmdOrAlt + "+0",
+    click: () => {
+        if (MainWindow == null) {
+            return;
+        }
+        MainWindow.webContents.setZoomFactor(1);
+        MainWindow.webContents.send("zoom-changed");
+    },
+});
+viewSubMenu.push({
+    label: "Zoom In",
+    accelerator: cmdOrAlt + "+Plus",
+    click: () => {
+        if (MainWindow == null) {
+            return;
+        }
+        const zoomFactor = MainWindow.webContents.getZoomFactor();
+        MainWindow.webContents.setZoomFactor(zoomFactor * 1.1);
+        MainWindow.webContents.send("zoom-changed");
+    },
+});
+viewSubMenu.push({
+    label: "Zoom Out",
+    accelerator: cmdOrAlt + "+-",
+    click: () => {
+        if (MainWindow == null) {
+            return;
+        }
+        const zoomFactor = MainWindow.webContents.getZoomFactor();
+        MainWindow.webContents.setZoomFactor(zoomFactor / 1.1);
+        MainWindow.webContents.send("zoom-changed");
+    },
+});
+viewSubMenu.push({ type: "separator" });
+viewSubMenu.push({ role: "togglefullscreen" });
 const menuTemplate: Electron.MenuItemConstructorOptions[] = [
     {
         role: "appMenu",
@@ -223,48 +273,7 @@ const menuTemplate: Electron.MenuItemConstructorOptions[] = [
     },
     {
         role: "viewMenu",
-        submenu: [
-            { role: "reload", accelerator: reloadAcceleratorKey },
-            { role: "toggleDevTools" },
-            { type: "separator" },
-            {
-                label: "Actual Size",
-                accelerator: cmdOrAlt + "+0",
-                click: () => {
-                    if (MainWindow == null) {
-                        return;
-                    }
-                    MainWindow.webContents.setZoomFactor(1);
-                    MainWindow.webContents.send("zoom-changed");
-                },
-            },
-            {
-                label: "Zoom In",
-                accelerator: cmdOrAlt + "+Plus",
-                click: () => {
-                    if (MainWindow == null) {
-                        return;
-                    }
-                    const zoomFactor = MainWindow.webContents.getZoomFactor();
-                    MainWindow.webContents.setZoomFactor(zoomFactor * 1.1);
-                    MainWindow.webContents.send("zoom-changed");
-                },
-            },
-            {
-                label: "Zoom Out",
-                accelerator: cmdOrAlt + "+-",
-                click: () => {
-                    if (MainWindow == null) {
-                        return;
-                    }
-                    const zoomFactor = MainWindow.webContents.getZoomFactor();
-                    MainWindow.webContents.setZoomFactor(zoomFactor / 1.1);
-                    MainWindow.webContents.send("zoom-changed");
-                },
-            },
-            { type: "separator" },
-            { role: "togglefullscreen" },
-        ],
+        submenu: viewSubMenu,
     },
     {
         role: "windowMenu",
@@ -277,8 +286,6 @@ const menuTemplate: Electron.MenuItemConstructorOptions[] = [
 const menu = electron.Menu.buildFromTemplate(menuTemplate);
 electron.Menu.setApplicationMenu(menu);
 
-let MainWindow: Electron.BrowserWindow | null = null;
-
 function getMods(input: any): object {
     return { meta: input.meta, shift: input.shift, ctrl: input.control, alt: input.alt };
 }

src/electron/preload.js

@@ -37,4 +37,5 @@ contextBridge.exposeInMainWorld("api", {
     contextScreen: (screenOpts, position) => ipcRenderer.send("context-screen", screenOpts, position),
     contextEditMenu: (position, opts) => ipcRenderer.send("context-editmenu", position, opts),
     onWaveSrvStatusChange: (callback) => ipcRenderer.on("wavesrv-status-change", callback),
+    onToggleDevUI: (callback) => ipcRenderer.on("toggle-devui", callback),
 });

src/models/model.ts

@@ -135,6 +135,7 @@ class Model {
         this.clientId = getApi().getId();
         this.isDev = getApi().getIsDev();
         this.authKey = getApi().getAuthKey();
+        getApi().onToggleDevUI(this.toggleDevUI.bind(this));
         this.ws = new WSControl(this.getBaseWsHostPort(), this.clientId, this.authKey, (message: any) => {
             const interactive = message?.interactive ?? false;
             this.runUpdate(message, interactive);
@@ -205,6 +206,10 @@ class Model {
         return (window as any).GlobalModel;
     }
 
+    toggleDevUI(): void {
+        document.body.classList.toggle("is-dev");
+    }
+
     bumpRenderVersion() {
         mobx.action(() => {
             this.renderVersion.set(this.renderVersion.get() + 1);

src/types/custom.d.ts

@@ -910,6 +910,7 @@ declare global {
         contextEditMenu: (position: { x: number; y: number }, opts: ContextMenuOpts) => void;
         onWaveSrvStatusChange: (callback: (status: boolean, pid: number) => void) => void;
         getLastLogs: (numOfLines: number, callback: (logs: any) => void) => void;
+        onToggleDevUI: (callback: () => void) => void;
     };
 }