Merge pull request #2082 from rak-phillip/bugfix/auto-size-dialog

Make auto-sizing dialogs more consistent

Author: rak-phillip

src/layouts/dialog.vue

@@ -47,11 +47,8 @@ export default Vue.extend({
   html {
     height: initial;
   }
-  :root[data-flex~="width"] #__layout > .wrapper[data-loaded] {
-    width: 100vw;
-  }
-  :root[data-flex~="height"] #__layout > .wrapper[data-loaded] {
-    height: 100vh;
+  body {
+    overflow: hidden;
   }
 </style>
 

src/pages/KubernetesError.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container">
     <div class="page-body">
       <div class="error-header">
         <img id="logo" src="../../resources/icons/[email protected]" />
@@ -94,6 +94,10 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
+  .container {
+    min-width: 52rem;
+  }
+
   .error-header {
     display: flex;
     gap: 0.75rem;

src/pages/LegacyIntegrationNotification.vue

@@ -4,7 +4,7 @@ import { ipcRenderer } from 'electron';
 import paths from '@/utils/paths';
 
 export default Vue.extend({
-  layout:     'dialog',
+  layout:   'dialog',
   computed: {
     oldIntegrationPath() {
       return paths.oldIntegration;
@@ -22,7 +22,7 @@ export default Vue.extend({
 </script>
 
 <template>
-  <div>
+  <div class="container">
     <h3>{{ t('legacyIntegrations.title') }}</h3>
     <p>
       {{ t('legacyIntegrations.messageFirstPart') }}
@@ -50,9 +50,19 @@ export default Vue.extend({
 </template>
 
 <style lang="scss" scoped>
+  .container {
+    min-width: 32rem;
+  }
+
   .button-area {
     align-self: flex-end;
   }
+
+  summary {
+    user-select: none;
+    cursor: pointer;
+  }
+
   code {
     user-select: text;
     cursor: text;

src/pages/SudoPrompt.vue

@@ -75,9 +75,6 @@ export default Vue.extend({
     };
   },
   mounted() {
-    ipcRenderer.on('dialog/size', (event, size: {width: number, height: number}) => {
-      this.checkSize(size);
-    });
     ipcRenderer.on('dialog/populate', (event, explanations: Partial<Record<SudoReason, string[]>>) => {
       this.explanations = explanations;
     });
@@ -87,31 +84,6 @@ export default Vue.extend({
     (this.$refs.accept as HTMLButtonElement)?.focus();
   },
   methods: {
-    /**
-     * checkSize is triggered when the window's preferred size changes; we use
-     * this in response to the user opening one of the <details> disclosures to
-     * ensure the whole text is visible.
-     */
-    checkSize(size: {width: number, height: number}) {
-      if (!this.sized) {
-        // Initial window layout isn't done yet, don't do any sizing.
-        // Check the window size again (in a timeout) to give the window time to
-        // change sizes.
-        setTimeout(() => {
-          this.sized ||= size.width === window.outerWidth && size.height === window.outerHeight;
-        }, 0);
-
-        return;
-      }
-
-      // Because increasing the width can reduce the height requirement, we
-      // should do the resizing in two steps to get the minimum size.
-      if (size.width > window.outerWidth) {
-        window.resizeTo(size.width, window.outerHeight);
-      } else if (size.height > window.outerHeight) {
-        window.resizeTo(window.outerWidth, size.height);
-      }
-    },
     close() {
       // Manually send the result, because we won't get an event here.
       ipcRenderer.send('sudo-prompt/closed', this.suppress);
@@ -131,20 +103,30 @@ export default Vue.extend({
   .contents {
     padding: 2em;
   }
+
+  summary {
+    user-select: none;
+    cursor: pointer;
+  }
+
   li, p {
     margin: 0.5em;
   }
+
   ul.reasons {
     list-style-type: none;
     padding-left: 0;
   }
+
   li.monospace {
     /* font-family is set in _typography.scss */
     white-space: pre;
   }
+
   #suppress {
     margin: 1em;
   }
+
   .primary-action {
     align-self: flex-end;
   }

src/window/index.ts

@@ -1,3 +1,4 @@
+import os from 'os';
 import Electron, { BrowserWindow, app, shell } from 'electron';
 import _ from 'lodash';
 
@@ -110,6 +111,32 @@ export function openPreferences() {
   app.dock?.show();
 }
 
+/**
+ * Attempts to resize and center window on parent or screen
+ * @param window Electron Browser Window that needs to be resized
+ * @param width Width of the browser window
+ * @param height Height of the browser window
+ */
+function resizeWindow(window: Electron.BrowserWindow, width: number, height: number): void {
+  const parent = window.getParentWindow();
+
+  if (!parent) {
+    window.center();
+    window.setContentSize(width, height);
+
+    return;
+  }
+
+  const { x: prefX, y: prefY, width: prefWidth } = parent.getBounds();
+  const centered = prefX + Math.round((prefWidth / 2) - (width / 2));
+
+  window.setContentBounds(
+    {
+      x: centered, y: prefY, width, height
+    }
+  );
+}
+
 /**
  * Internal helper function to open a given modal dialog.
  *
@@ -126,8 +153,9 @@ function openDialog(id: string, opts?: Electron.BrowserWindowConstructorOptions)
     {
       autoHideMenuBar: !app.isPackaged,
       show:            false,
-      useContentSize:  true,
       modal:           true,
+      resizable:       false,
+      frame:           !(os.platform() === 'linux'),
       ...opts ?? {},
       webPreferences:  {
         devTools:                !app.isPackaged,
@@ -139,35 +167,18 @@ function openDialog(id: string, opts?: Electron.BrowserWindowConstructorOptions)
     }
   );
 
-  let windowState: 'hidden' | 'shown' | 'sized' = 'hidden';
-
   window.menuBarVisible = false;
 
-  window.webContents.on('ipc-message', (event, channel) => {
-    if (channel === 'dialog/ready') {
-      window.show();
-      windowState = 'shown';
-    }
-  });
-
   window.webContents.on('preferred-size-changed', (_event, { width, height }) => {
-    window.webContents.send('dialog/size', { width, height });
-    if (windowState === 'sized') {
-      // Once the window is done sizing, don't do any more automatic resizing.
-      return;
+    if (os.platform() === 'linux') {
+      resizeWindow(window, width, height);
+    } else {
+      window.setContentSize(width, height, true);
     }
-    window.setMinimumSize(width, height);
-    window.setContentSize(width, height);
-
-    const [windowWidth, windowHeight] = window.getSize();
 
-    window.setMinimumSize(windowWidth, windowHeight);
-    if (windowState === 'shown') {
-      // We get a few resizes in a row until things settle down; use a timeout
-      // to let things stablize before we stop responding resize events.
-      setTimeout(() => {
-        windowState = 'sized';
-      }, 100);
+    if (!window.isVisible()) {
+      window.show();
+      window.focus();
     }
   });
 
@@ -179,7 +190,7 @@ function openDialog(id: string, opts?: Electron.BrowserWindowConstructorOptions)
  * configuration required.
  */
 export async function openFirstRun() {
-  const window = openDialog('FirstRun');
+  const window = openDialog('FirstRun', { frame: true });
 
   await (new Promise<void>((resolve) => {
     window.on('closed', resolve);
@@ -195,6 +206,7 @@ export async function openKubernetesErrorMessageWindow(titlePart: string, mainMe
     width:  800,
     height: 494,
     parent: getWindow('preferences') ?? undefined,
+    frame:  true,
   });
 
   window.webContents.on('ipc-message', (event, channel) => {
@@ -257,10 +269,6 @@ export async function openLegacyIntegrations(): Promise<void> {
     'LegacyIntegrationNotification',
     {
       title:          'Rancher Desktop - Legacy Integrations',
-      frame:          true,
-      width:          500,
-      height:         240,
-      webPreferences: { enablePreferredSizeMode: false },
       parent:         getWindow('preferences') ?? undefined,
     }
   );