fix: Fixed Composer Electron startup window dimensions (#2769)

* Adjusted initial Electron window size to 4:3 ratio

* Disabled dev-tools by default and modified window size logic.

* Changed console.log calls to use debug package.

Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>

Composer/packages/electron-server/src/electronWindow.ts

@@ -8,6 +8,8 @@ import { app, BrowserWindow, screen } from 'electron';
 
 import { isDevelopment } from './utility/env';
 import { getUnpackedAsarPath } from './utility/getUnpackedAsarPath';
+import logger from './utility/logger';
+const log = logger.extend('electron-window');
 
 export default class ElectronWindow {
   private static instance: ElectronWindow | undefined;
@@ -21,10 +23,14 @@ export default class ElectronWindow {
 
   private constructor() {
     // Create the browser window.
-    const { width, height } = screen.getPrimaryDisplay().workAreaSize;
+    const { height, width } = screen.getPrimaryDisplay().workAreaSize;
+    log(`Raw screen dimensions: ${height} x ${width}`);
+    const adjustedHeight = Math.floor(height * 0.9); // take up 90% of screen height
+    const adjustedWidth = Math.floor((4 / 3) * adjustedHeight); // snap to 4:3 aspect ratio (16:9 doesn't look as good when scaled down)
+    log(`Electron window dimensions: ${adjustedHeight} x ${adjustedWidth}`);
     const browserWindowOptions: Electron.BrowserWindowConstructorOptions = {
-      width: width * 0.75,
-      height: height * 0.9,
+      width: adjustedWidth,
+      height: adjustedHeight,
       webPreferences: {
         nodeIntegration: false,
         preload: join(__dirname, 'preload.js'),
@@ -39,6 +45,7 @@ export default class ElectronWindow {
     }
     this._currentBrowserWindow = new BrowserWindow(browserWindowOptions);
     this._currentBrowserWindow.on('page-title-updated', ev => ev.preventDefault()); // preserve explicit window title
+    log('Rendered Electron window dimensions: ', this._currentBrowserWindow.getSize());
   }
 
   public static destroy() {

Composer/packages/electron-server/src/main.ts

@@ -98,7 +98,7 @@ async function loadServer() {
 async function main() {
   const mainWindow = ElectronWindow.getInstance().browserWindow;
   if (mainWindow) {
-    if (isDevelopment) {
+    if (process.env.COMPOSER_DEV_TOOLS) {
       mainWindow.webContents.openDevTools();
     }