diff --git a/apps/desktop/src/main/tray.main.ts b/apps/desktop/src/main/tray.main.ts index 666a9370a05..346ac175d69 100644 --- a/apps/desktop/src/main/tray.main.ts +++ b/apps/desktop/src/main/tray.main.ts @@ -188,7 +188,7 @@ export class TrayMain { this.hideDock(); } } else { - this.windowMain.win.show(); + this.windowMain.show(); if (this.isDarwin()) { this.showDock(); } @@ -212,14 +212,6 @@ export class TrayMain { const existingWin = this.windowMain.win; await this.desktopSettingsService.setInModalMode(true); - - existingWin.setBounds({ - width: 500, - height: 400, - }); - existingWin.setSize(450, 450, true); - existingWin.setWindowButtonVisibility(false); - existingWin.resizable = false; await existingWin.loadURL( url.format({ protocol: "file:", @@ -235,15 +227,8 @@ export class TrayMain { userAgent: cleanUserAgent(existingWin.webContents.userAgent), }, ); - existingWin.center(); - existingWin.setAlwaysOnTop(true); - existingWin.show(); - // TODO: Do things - // ?? Enqueue the browser location - // Change browser location and styling to minimal - - // Show popup - // Change styling back to full - // ?? Dequeue browser location + existingWin.once("ready-to-show", () => { + existingWin.show(); + }); } } diff --git a/apps/desktop/src/main/window.main.ts b/apps/desktop/src/main/window.main.ts index eb5441a0c07..bd57566c50e 100644 --- a/apps/desktop/src/main/window.main.ts +++ b/apps/desktop/src/main/window.main.ts @@ -11,7 +11,7 @@ import { processisolations } from "@bitwarden/desktop-napi"; import { BiometricStateService } from "@bitwarden/key-management"; import { WindowState } from "../platform/models/domain/window-state"; -import { applyMainWindowStyles } from "../platform/popup-modal-styles"; +import { applyMainWindowStyles, applyPopupModalStyles } from "../platform/popup-modal-styles"; import { DesktopSettingsService } from "../platform/services/desktop-settings.service"; import { cleanUserAgent, @@ -74,9 +74,11 @@ export class WindowMain { .pipe( pairwise(), concatMap(async ([lastValue, newValue]) => { - console.log("inModalMode updated", { lastValue, newValue }); if (lastValue && !newValue) { applyMainWindowStyles(this.win, this.windowStates[mainWindowSizeKey]); + this.win.hide(); + } else if (!lastValue && newValue) { + applyPopupModalStyles(this.win); } }), ) @@ -181,64 +183,52 @@ export class WindowMain { }); } + /// Show the window with main window styles + show() { + if (this.win != null) { + applyMainWindowStyles(this.win, this.windowStates[mainWindowSizeKey]); + this.win.show(); + } + } + async createWindow(template: "full-app" | "minimal-app" = "full-app"): Promise { - if (template === "full-app") { - this.windowStates[mainWindowSizeKey] = await this.getWindowState( - this.defaultWidth, - this.defaultHeight, - ); - this.enableAlwaysOnTop = await firstValueFrom(this.desktopSettingsService.alwaysOnTop$); + this.windowStates[mainWindowSizeKey] = await this.getWindowState( + this.defaultWidth, + this.defaultHeight, + ); + this.enableAlwaysOnTop = await firstValueFrom(this.desktopSettingsService.alwaysOnTop$); - this.session = session.fromPartition("persist:bitwarden", { cache: false }); + this.session = session.fromPartition("persist:bitwarden", { cache: false }); - // Create the browser window. - this.win = new BrowserWindow({ - width: this.windowStates[mainWindowSizeKey].width, - height: this.windowStates[mainWindowSizeKey].height, - minWidth: 400, - minHeight: 400, - x: this.windowStates[mainWindowSizeKey].x, - y: this.windowStates[mainWindowSizeKey].y, - title: app.name, - icon: isLinux() ? path.join(__dirname, "/images/icon.png") : undefined, - titleBarStyle: isMac() ? "hiddenInset" : undefined, - show: false, - backgroundColor: await this.getBackgroundColor(), - alwaysOnTop: this.enableAlwaysOnTop, - webPreferences: { - preload: path.join(__dirname, "preload.js"), - spellcheck: false, - nodeIntegration: false, - backgroundThrottling: false, - contextIsolation: true, - session: this.session, - devTools: isDev(), - }, - }); + // Create the browser window. + this.win = new BrowserWindow({ + width: this.windowStates[mainWindowSizeKey].width, + height: this.windowStates[mainWindowSizeKey].height, + minWidth: 400, + minHeight: 400, + x: this.windowStates[mainWindowSizeKey].x, + y: this.windowStates[mainWindowSizeKey].y, + title: app.name, + icon: isLinux() ? path.join(__dirname, "/images/icon.png") : undefined, + titleBarStyle: isMac() ? "hiddenInset" : undefined, + show: false, + backgroundColor: await this.getBackgroundColor(), + alwaysOnTop: this.enableAlwaysOnTop, + webPreferences: { + preload: path.join(__dirname, "preload.js"), + spellcheck: false, + nodeIntegration: false, + backgroundThrottling: false, + contextIsolation: true, + session: this.session, + devTools: isDev(), + }, + }); + + if (template === "minimal-app") { + applyPopupModalStyles(this.win); } else { - this.win = new BrowserWindow({ - width: 450, - height: 450, - resizable: false, - icon: null, - center: true, - titleBarStyle: "hiddenInset", - frame: false, - alwaysOnTop: true, - backgroundColor: await this.getBackgroundColor(), - show: true, - webPreferences: { - preload: path.join(__dirname, "preload.js"), - spellcheck: false, - nodeIntegration: false, - backgroundThrottling: false, - contextIsolation: true, - session: this.session, - devTools: isDev(), - }, - }); - - this.win.setWindowButtonVisibility(false); + applyMainWindowStyles(this.win, this.windowStates[mainWindowSizeKey]); } this.win.webContents.on("dom-ready", () => { @@ -250,7 +240,10 @@ export class WindowMain { } // Show it later since it might need to be maximized. - this.win.show(); + // use once event to avoid flash on unstyled content. + this.win.once("ready-to-show", () => { + this.win.show(); + }); if (template === "full-app") { // and load the index.html of the app. @@ -365,16 +358,13 @@ export class WindowMain { } private async updateWindowState(configKey: string, win: BrowserWindow) { - console.log("updateWindowState"); if (win == null || win.isDestroyed()) { - console.log("no window/destroyed"); return; } const inModalMode = await firstValueFrom(this.desktopSettingsService.inModalMode$); if (inModalMode) { - console.log("in modal mode, ignore"); return; } @@ -388,7 +378,8 @@ export class WindowMain { } } - this.windowStates[configKey].isMaximized = win.isMaximized(); + // We're treating fullscreen as maximized + this.windowStates[configKey].isMaximized = win.isMaximized() || win.isFullScreen(); this.windowStates[configKey].displayBounds = screen.getDisplayMatching(bounds).bounds; if (!win.isMaximized() && !win.isMinimized() && !win.isFullScreen()) { diff --git a/apps/desktop/src/platform/popup-modal-styles.ts b/apps/desktop/src/platform/popup-modal-styles.ts index 3bd3abf92e3..aeccf418270 100644 --- a/apps/desktop/src/platform/popup-modal-styles.ts +++ b/apps/desktop/src/platform/popup-modal-styles.ts @@ -2,8 +2,26 @@ import { BrowserWindow } from "electron"; import { WindowState } from "./models/domain/window-state"; +const popupWidth = 450; +const popupHeight = 450; + export function applyPopupModalStyles(window: BrowserWindow) { - // + window.unmaximize(); + window.setSize(popupWidth, popupHeight); + window.center(); + window.setWindowButtonVisibility(false); + window.setMenuBarVisibility(false); + window.setResizable(false); + window.setAlwaysOnTop(true); + + // recover from full screen is a bit more hassle + if (window.isFullScreen()) { + window.setFullScreen(false); + window.once("leave-full-screen", () => { + window.setSize(popupWidth, popupHeight); + window.center(); + }); + } } export function applyMainWindowStyles(window: BrowserWindow, existingWindowState: WindowState) { @@ -12,4 +30,14 @@ export function applyMainWindowStyles(window: BrowserWindow, existingWindowState window.setPosition(existingWindowState.x, existingWindowState.y); window.setWindowButtonVisibility(true); window.setMenuBarVisibility(true); + window.setResizable(true); + window.setAlwaysOnTop(false); + // window.hide(); + + // console.log("is maximized", existingWindowState.isMaximized); + // window.setFullScreen(existingWindowState.isMaximized); + + // if (existingWindowState.isMaximized) { + // window.maximize(); + // } }