DEV_TOOLS_MODE controls window placement

desktop/src/client/main-window/main-window.ts

@@ -5,6 +5,7 @@ import { BrowserWindow, app, ipcMain, nativeImage } from "electron";
 import { BehaviorSubject, Observable } from "rxjs";
 import { Constants } from "../client-constants";
 import { BatchExplorerApplication, GenericWindow, enableRemoteForWindow } from "../core";
+import { is } from "immutable";
 
 // Webpack dev server url when using HOT=1
 const devServerUrl = Constants.urls.main.dev;
@@ -26,6 +27,9 @@ export enum WindowState {
     FailedLoad,
 }
 
+const AllowedDevToolsModes = ["left", "right", "undocked", "detach", "bottom"] as const;
+type DevToolMode = typeof AllowedDevToolsModes[number];
+
 export class MainWindow extends GenericWindow {
     public appReady: Promise<void>;
     public state: Observable<WindowState>;
@@ -99,7 +103,9 @@ export class MainWindow extends GenericWindow {
 
         // Open the DevTools.
         if (process.env.NODE_ENV !== "production") {
-            window.webContents.openDevTools({ mode: 'undocked' });
+            const mode = isDevToolsMode(process.env.DEV_TOOLS_MODE) ?
+                process.env.DEV_TOOLS_MODE : "undocked";
+            window.webContents.openDevTools({ mode });
         }
 
         return window;
@@ -135,3 +141,7 @@ export class MainWindow extends GenericWindow {
         });
     }
 }
+
+function isDevToolsMode(value: any): value is DevToolMode {
+    return AllowedDevToolsModes.includes(value);
+}

docs/setup.md

@@ -52,6 +52,21 @@ This command will enable hot reload for a better development experience. Simply
 
 Please also take a look at the [coding guidelines](coding-guidelines.md) for this repo for best practices.
 
+In developer-mode, Batch Explorer starts with Chrome Developer Tools (DevTools) opened in "undocked" mode. To open DevTools in another mode, set the `DEV_TOOLS_MODE` environment variables. The allowed values are "left", "right", "bottom", "undocked", and "detach".
+
+**Linux shells:**
+
+```bash
+DEV_TOOLS_MODE=right npm run launch:desktop
+```
+
+**Powershell:**
+
+```powershell
+$Env:DEV_TOOLS_MODE = "right"
+npm run launch:desktop
+```
+
 ## Editor
 
 If you're using VSCode (recommended) we suggest you use the following extensions: