menu presets for window sizes and zooms (#4507)

* new presets for window sizes

* implements setting specific zoom levels

* adds developer-only menu item for screenshots

packages/insomnia-app/app/main/window-utils.ts

@@ -27,7 +27,7 @@ const { app, Menu, shell, dialog, clipboard } = electron;
 app.allowRendererProcessReuse = false;
 
 const DEFAULT_WIDTH = 1280;
-const DEFAULT_HEIGHT = 700;
+const DEFAULT_HEIGHT = 720;
 const MINIMUM_WIDTH = 500;
 const MINIMUM_HEIGHT = 400;
 
@@ -46,7 +46,6 @@ export function init() {
 }
 
 export function createWindow() {
-  const zoomFactor = getZoomFactor();
   const { bounds, fullscreen, maximize } = getBounds();
   const { x, y, width, height } = bounds;
 
@@ -86,7 +85,7 @@ export function createWindow() {
     icon: path.resolve(__dirname, appLogo),
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
-      zoomFactor: zoomFactor,
+      zoomFactor: getZoomFactor(),
       nodeIntegration: true,
       webviewTag: true,
       // TODO: enable context isolation
@@ -229,67 +228,50 @@ export function createWindow() {
       {
         label: `${MNEMONIC_SYM}Actual Size`,
         accelerator: 'CmdOrCtrl+0',
-        click: () => {
+        click: setZoom(() => 1),
-          const w = BrowserWindow.getFocusedWindow();
-
-          if (!w || !w.webContents) {
-            return;
-          }
-
-          const zoomFactor = 1;
-          w.webContents.setZoomFactor(zoomFactor);
-          saveZoomFactor(zoomFactor);
-        },
       },
       {
         label: `Zoom ${MNEMONIC_SYM}In`,
         accelerator: 'CmdOrCtrl+=',
-        click: () => {
+        click: setZoom(zoom => zoom * 1.2),
-          const w = BrowserWindow.getFocusedWindow();
-
-          if (!w || !w.webContents) {
-            return;
-          }
-
-          const zoomFactor = Math.min(1.8, getZoomFactor() + 0.05);
-          w.webContents.setZoomFactor(zoomFactor);
-          saveZoomFactor(zoomFactor);
-        },
       },
       {
         label: `Zoom ${MNEMONIC_SYM}Out`,
         accelerator: 'CmdOrCtrl+-',
-        click: () => {
+        click: setZoom(zoom => zoom * 0.8),
-          const w = BrowserWindow.getFocusedWindow();
-
-          if (!w || !w.webContents) {
-            return;
-          }
-
-          const zoomFactor = Math.max(0.5, getZoomFactor() - 0.05);
-          w.webContents.setZoomFactor(zoomFactor);
-          saveZoomFactor(zoomFactor);
       },
+      {
+        label: 'Specific Zoom Level',
+        submenu: [25, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 350, 400, 500].map(item => ({
+          label: `${item}%`,
+          click: setZoom(() => item / 100),
+        })),
       },
       {
         type: 'separator',
       },
       {
-        label: `Resize to Defaul${MNEMONIC_SYM}t`,
+        label: `Resize to ${MNEMONIC_SYM}Small (qHD 540)`,
+        click: () =>
+          mainWindow?.setBounds({
+            width: 960,
+            height: 540,
+          }),
+      },
+      {
+        label: `Resize to Defaul${MNEMONIC_SYM}t (HD 720)`,
         click: () =>
           mainWindow?.setBounds({
-            x: 100,
-            y: 100,
             width: DEFAULT_WIDTH,
             height: DEFAULT_HEIGHT,
           }),
       },
       {
-        label: `Resize to ${MNEMONIC_SYM}Small`,
+        label: `Resize to ${MNEMONIC_SYM}Large (FHD 1080)`,
         click: () =>
           mainWindow?.setBounds({
-            width: 1024,
+            width: 1920,
-            height: 512,
+            height: 1080,
           }),
       },
       {
@@ -484,6 +466,16 @@ export function createWindow() {
         label: `R${MNEMONIC_SYM}estart`,
         click: window?.main.restart,
       },
+      {
+        label: `Set window for ${MNEMONIC_SYM}FHD Screenshot`,
+        click: () => {
+          mainWindow?.setBounds({
+            width: 1920,
+            height: 1080,
+          });
+          setZoom(() => 4)();
+        },
+      },
     ],
   };
   const toolsMenu: MenuItemConstructorOptions = {
@@ -574,22 +566,35 @@ function getBounds() {
   };
 }
 
-function saveZoomFactor(zoomFactor) {
+const ZOOM_MAX = 6;
-  localStorage?.setItem('zoomFactor', zoomFactor);
+const ZOOM_DEFAULT = 1;
-}
+const ZOOM_MIN = 0.05;
-
-function getZoomFactor() {
-  let zoomFactor = 1;
 
+const getZoomFactor = () => {
   try {
-    zoomFactor = localStorage?.getItem('zoomFactor', 1);
+    return localStorage?.getItem('zoomFactor', ZOOM_DEFAULT);
   } catch (e) {
     // This should never happen, but if it does...!
     console.error('Failed to parse zoomFactor', e);
   }
 
-  return zoomFactor;
+  return ZOOM_DEFAULT;
-}
+};
+
+export const setZoom = (transformer: (current: number) => number) => () => {
+  const browserWindow = electron.BrowserWindow.getFocusedWindow();
+
+  if (!browserWindow || !browserWindow.webContents) {
+    return;
+  }
+
+  const current = getZoomFactor();
+  const desired = transformer(current);
+  const actual = Math.min(Math.max(ZOOM_MIN, desired), ZOOM_MAX);
+
+  browserWindow.webContents.setZoomLevel(actual);
+  localStorage?.setItem('zoomFactor', actual);
+};
 
 function initLocalStorage() {
   const localStoragePath = path.join(getDataDirectory(), 'localStorage');