feat(unify): adding larger defaults for the Launchpad window (#18248)

2026-04-21 06:29:16 -05:00 · 2021-10-05 17:13:40 -04:00
parent 585a3e281a
commit 20ca60c8a3
4 changed files with 80 additions and 18 deletions
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
  <meta charset="utf-8" />
-  <title>Cypress - LaunchPad</title>
+  <title>Cypress</title>
 </head>
 <body>
  <div id="app"></div>
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
  <meta charset="utf-8" />
-  <title>Cypress - LaunchPad</title>
+  <title>Cypress</title>
 </head>
 <body>
  <div id="app"></div>
@@ -19,12 +19,56 @@ module.exports = {
  },

  getWindowArgs (state) {
+    // Electron Window's arguments
+    // These options are passed to Electron's BrowserWindow
+    const minWidth = Math.round(/* 13" MacBook Air */ 1792 / 3) // Thirds
+
+    const preferredWidth = 1200
+    const minHeight = 800
+    const preferredHeight = 800
+
+    const chooseDimensions = ({ preferred, previous, minimum }) => {
+      // If the user doesn't have a previous size that's valid or big
+      // enough, use the preferred size instead.
+      if (!previous || previous < minimum) {
+        return preferred
+      }
+
+      return previous
+    }
+
    const common = {
-      backgroundColor: '#dfe2e4',
-      width: state.appWidth || 800,
-      height: state.appHeight || 550,
-      minWidth: 458,
-      minHeight: 400,
+      // The backgroundColor should match the value we will show in the
+      // launchpad frontend.
+
+      // When we use a dist'd launchpad (production), this color won't be
+      // as visible. However, in our local dev setup (launchpad running via
+      // a dev server), the backgroundColor will flash if it is a
+      // different color.
+      backgroundColor: 'white',
+
+      // Dimensions of the Electron window on initial launch.
+      // Because we are migrating users that may have
+      // a width smaller than the min dimensions, we will
+      // force the dimensions to be within the minimum bounds.
+      //
+      // Doing this before launch (instead of relying on minW + minH)
+      // prevents the window from jumping.
+      width: chooseDimensions({
+        preferred: preferredWidth,
+        minimum: minWidth,
+        previous: state.appWidth,
+      }),
+
+      height: chooseDimensions({
+        preferred: preferredHeight,
+        minimum: minHeight,
+        previous: state.appHeight,
+      }),
+
+      minWidth,
+      minHeight,
+
      x: state.appX,
      y: state.appY,
      type: 'INDEX',
@@ -46,20 +46,38 @@ describe('gui/interactive', () => {
      })
    })

-    it('renders with saved width if it exists', () => {
-      expect(interactiveMode.getWindowArgs({ appWidth: 1 }).width).to.equal(1)
-    })
+    describe('width + height dimensions', () => {
+      // Choose preferred if you have no valid choice
+      // Use the saved value if it's valid
+      describe('when no dimension', () => {
+        it('renders with preferred width if no width saved', () => {
+          expect(interactiveMode.getWindowArgs({}).width).to.equal(1200)
+        })

-    it('renders with default width if no width saved', () => {
-      expect(interactiveMode.getWindowArgs({}).width).to.equal(800)
-    })
+        it('renders with preferred height if no height saved', () => {
+          expect(interactiveMode.getWindowArgs({}).height).to.equal(800)
+        })
+      })

-    it('renders with saved height if it exists', () => {
-      expect(interactiveMode.getWindowArgs({ appHeight: 2 }).height).to.equal(2)
-    })
+      describe('when saved dimension is too small', () => {
+        it('uses the preferred width', () => {
+          expect(interactiveMode.getWindowArgs({ appWidth: 1 }).width).to.equal(1200)
+        })

-    it('renders with default height if no height saved', () => {
-      expect(interactiveMode.getWindowArgs({}).height).to.equal(550)
+        it('uses the preferred height', () => {
+          expect(interactiveMode.getWindowArgs({ appHeight: 1 }).height).to.equal(800)
+        })
+      })
+
+      describe('when saved dimension is within min/max dimension', () => {
+        it('uses the saved width', () => {
+          expect(interactiveMode.getWindowArgs({ appWidth: 1500 }).width).to.equal(1500)
+        })
+
+        it('uses the saved height', () => {
+          expect(interactiveMode.getWindowArgs({ appHeight: 1500 }).height).to.equal(1500)
+        })
+      })
    })

    it('renders with saved x if it exists', () => {