Add menu entry to resize main window

src/ApplicationMenu.js

@@ -37,6 +37,27 @@ class ApplicationMenu {
           },
         ],
       },
+      {
+        label: "Main Window",
+        submenu: [
+          {
+            label: "Resize",
+            submenu: [
+              { ratio: "16x9", width: 640, height: 360 },
+              { ratio: "16x9", width: 800, height: 450 },
+              { ratio: "16x9", width: 1200, height: 675 },
+              { ratio: "9x16", width: 360, height: 640 },
+              { ratio: "9x16", width: 450, height: 800 },
+              { ratio: "9x16", width: 675, height: 1200 },
+            ].map((item) => {
+              return {
+                label: `${item.width}x${item.height} (${item.ratio})`,
+                click: () => driver.mainWindow.resize(item.width, item.height),
+              };
+            }),
+          },
+        ],
+      },
       {
         label: "DevTools",
         submenu: [

src/ControlWindow.js

@@ -5,16 +5,8 @@ const Window = require("./Window");
 
 class ControlWindow extends Window {
   constructor(app) {
-    super({
-      app: app,
-      width: 600,
-      // it will not be higher then the display
-      height: 1600,
-      x: 900,
-      y: 0,
-    });
-
-    this.app = app;
+    super({ app, x: 900, y: 0 });
+    this.resize(600, 1600); // it will cap to screen height
     this.loadAppFile("controls.html");
     this.onFinishLoad();
   }

src/MainWindow.js

@@ -5,6 +5,7 @@ const Window = require("./Window");
 class MainWindow extends Window {
   constructor(app) {
     super({ app });
+    this.resize(800, 450);
 
     this.loadAppFile("main.html");
 

src/Window.js

@@ -35,6 +35,12 @@ class BaseWindow extends BrowserWindow {
   moveToDisplay(display) {
     this.setPosition(display.bounds.x, display.bounds.y);
   }
+
+  resize(width, height) {
+    this.setSize(width, height);
+    const diff = height - this.getContentSize()[1];
+    this.setSize(width, height + diff);
+  }
 }
 
 module.exports = BaseWindow;