Implement saved window positioning per target (#53743)

Summary:
Pull Request resolved: #53743

As titled. A long awaited quality of life improvement that we can now deliver with our desktop shell.

Window arrangements are saved per [`windowKey`](https://github.com/facebook/react-native/blob/da7bf9c54567aae62ff355b79e66f511cb382065/packages/dev-middleware/src/middleware/openDebuggerMiddleware.js#L193), mapping to each previously opened debugger target.

**Limitations**

- Does not save/restore macOS fullscreen app state.

Changelog: [Internal]

Reviewed By: vzaidman

Differential Revision: D82236159

fbshipit-source-id: e3c2f9c0cb05a3b8ef2208eb4a288e0be064489a

Author: huntie

flow-typed/npm/electron-store_v8.x.x.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+declare module 'electron-store' {
+  declare export type Schema = any;
+
+  declare export type Options = {
+    +name?: string,
+    defaults?: Object,
+    schema?: any,
+    migrations?: any,
+    beforeEachMigration?: any,
+    clearInvalidConfig?: boolean,
+    serialize?: any,
+    deserialize?: any,
+    accessPropertiesByDotNotation?: boolean,
+    watch?: boolean,
+    encryptionKey?: string | Buffer | $ReadOnlyArray<number>,
+    ...
+  };
+
+  declare class ElectronStore {
+    constructor(options?: Options): this;
+    get(key: string): any;
+    get(key: string, defaultValue: any): any;
+    set(key: string, value: any): void;
+    set(object: Object): void;
+    has(key: string): boolean;
+    delete(key: string): void;
+    clear(): void;
+  }
+
+  declare module.exports: Class<ElectronStore>;
+}

packages/debugger-shell/package.json

@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "electron": "37.2.6",
+    "electron-store": "^8.2.0",
     "semver": "^7.1.3"
   },
   "files": [

packages/debugger-shell/src/electron/MainInstanceEntryPoint.js

@@ -10,9 +10,11 @@
 
 // $FlowFixMe[unclear-type] We have no Flow types for the Electron API.
 const {BrowserWindow, Menu, app, shell, ipcMain} = require('electron') as any;
+const Store = require('electron-store');
 const path = require('path');
 const util = require('util');
 
+const appSettings = new Store();
 const windowMetadata = new WeakMap<
   typeof BrowserWindow,
   $ReadOnly<{
@@ -53,10 +55,11 @@ function handleLaunchArgs(argv: string[]) {
       }, 1000);
     }
   } else {
-    // Create the browser window.
     frontendWindow = new BrowserWindow({
-      width: 1200,
-      height: 600,
+      ...(getSavedWindowPosition(windowKey) ?? {
+        width: 1200,
+        height: 600,
+      }),
       webPreferences: {
         partition: 'persist:react-native-devtools',
         preload: require.resolve('./preload.js'),
@@ -66,6 +69,8 @@ function handleLaunchArgs(argv: string[]) {
     });
     // Auto-hide the Windows/Linux menu bar
     frontendWindow.setMenuBarVisibility(false);
+    // Observe and update saved window position
+    setupWindowResizeListeners(frontendWindow, windowKey);
   }
 
   // Open links in the default browser instead of in new Electron windows.
@@ -119,6 +124,37 @@ function configureAppMenu() {
   Menu.setApplicationMenu(menu);
 }
 
+function getSavedWindowPosition(
+  windowKey: string,
+): ?{width: number, height: number, x?: number, y?: number} {
+  return appSettings.get('windowArrangements', {})[windowKey];
+}
+
+function saveWindowPosition(
+  windowKey: string,
+  position: {x: number, y: number, width: number, height: number},
+) {
+  const windowArrangements = appSettings.get('windowArrangements', {});
+  windowArrangements[windowKey] = position;
+  appSettings.set('windowArrangements', windowArrangements);
+}
+
+function setupWindowResizeListeners(
+  browserWindow: typeof BrowserWindow,
+  windowKey: string,
+) {
+  const savePosition = () => {
+    if (!browserWindow.isDestroyed()) {
+      const [x, y] = browserWindow.getPosition();
+      const [width, height] = browserWindow.getSize();
+      saveWindowPosition(windowKey, {x, y, width, height});
+    }
+  };
+  browserWindow.on('moved', savePosition);
+  browserWindow.on('resized', savePosition);
+  browserWindow.on('closed', savePosition);
+}
+
 app.whenReady().then(() => {
   handleLaunchArgs(process.argv.slice(app.isPackaged ? 1 : 2));
   configureAppMenu();