misc: Move browser dropdown within AUT URL bar

cli/CHANGELOG.md

@@ -9,6 +9,7 @@ _Released 3/11/2025 (PENDING)_
 
 **Misc:**
 
+- The browser dropdown now has a more minimal design - showing only the icon of the browser selected to the left of the URL. The currently selected browser also now shows at the top of the browser dropdown. Browsers with longer names will now have their names correctly left aligned in the browser dropdown. Addresses [#21755](https://github.com/cypress-io/cypress/issues/21755) and [#30998](https://github.com/cypress-io/cypress/issues/30998). Addressed in [#31216](https://github.com/cypress-io/cypress/pull/31216).
 - Additional CLI options will be displayed in the terminal for some Cloud error messages. Addressed in [#31211](https://github.com/cypress-io/cypress/pull/31211).
 
 **Dependency Updates:**

packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts

@@ -151,7 +151,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
   })
 
   it('shows a compilation error with a malformed spec', { viewportHeight: 596, viewportWidth: 1000 }, () => {
-    const expectedAutHeight = 456 // based on explicitly setting viewport in this test to 596
+    const expectedAutHeight = 500 // based on explicitly setting viewport in this test to 596
 
     cy.visitApp()
     cy.specsPageIsVisible()

packages/app/cypress/e2e/cypress-in-cypress.cy.ts

@@ -201,7 +201,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
       cy.get('@selectBrowser').should('be.visible') // with no specs list open, we should see this by scrolling
 
       dragHandleToClientX('panel2', 200).then(() => {
-        cy.contains('Chrome 1').should('be.visible')
+        cy.contains('Chrome 1').should('not.be.visible')
       })
 
       cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs')
@@ -212,8 +212,6 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
       cy.get('@selectBrowser').should('not.be.visible') // with specs list open, scrolling is not enough to see this
 
       dragHandleToClientX('panel1', 130)
-      cy.get('@selectBrowser')
-      .should('be.visible') // now that we have reduced the specs list, we should be able to see this
 
       cy.contains(testingTypeExpectedScales[`${ testingType }NarrowViewport`])
     })

packages/app/src/runner/ResizablePanels.vue

@@ -1,3 +1,4 @@
+<!-- Be careful with changing styles of the panels, it can impact our screenshot tests -->
 <template>
   <div
     id="resizable-panels-root"
@@ -46,9 +47,7 @@
       data-cy="aut-panel"
       class="grow h-full bg-gray-100 relative"
       :class="{'pointer-events-none':panel2IsDragging}"
-      :style="{
-        width: `${panel3width}px`
-      }"
+      :style="{ width: `${panel3width}px` }"
     >
       <slot
         name="panel3"

packages/app/src/runner/SpecRunnerDropdown.vue

@@ -1,14 +1,16 @@
 <template>
   <Popover
     :key="`${props.disabled}`"
-    class="bg-white rounded border-[1px] border-gray-100 h-[32px] relative"
+    class="rounded-[50px] h-[30px] mx-[6px] py-[2px] relative"
     #="{ open, close }"
   >
     <PopoverButton
-      class="border-transparent rounded grow h-full border-[1px] px-[12px] group"
+      class="bg-white border rounded-[50px] self-center h-full grow px-[5px] group"
       :class="{
         'hocus-default': !props.disabled,
         'opacity-50 cursor-auto': props.disabled,
+        'rounded-[5px] border-[1px] border-indigo-100': !props.minimal,
+        'border-transparent': props.minimal,
       }"
       :disabled="props.disabled"
     >
@@ -26,6 +28,7 @@
           :close="close"
         />
         <i-cy-chevron-down
+          v-if="!props.minimal"
           class="transform transition-all w-[10px] duration-300"
           :class="{
             'group-hocus:icon-dark-indigo-500': !props.disabled,
@@ -61,14 +64,15 @@ import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 const props = withDefaults(defineProps<{
   variant?: 'panel'
   align?: 'left' | 'right'
-
+  minimal?: boolean
   // The disabled prop is used as the Popover key so that changes to the prop
   // cause the Popover component to mount again. This re-mounting ensures that
   // the PopoverPanel is closed if an enabled dropdown later becomes disabled.
   disabled?: boolean
 }>(), {
+  minimal: true,
   variant: undefined,
-  align: 'right',
+  align: 'left',
   disabled: false,
 })
 

packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx

@@ -31,7 +31,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     })
 
     cy.findByTestId('aut-url-input').should('be.visible').should('have.value', autUrl)
-    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
+    cy.findByTestId('select-browser').should('be.visible').contains('title', 'Electron 73')
     cy.findByTestId('viewport-size').should('be.visible').contains('500x500')
   })
 
@@ -218,6 +218,18 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
   })
 
+  it('shows selected browser as first browser in dropdown', () => {
+    cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+      render: (gqlVal) => {
+        return renderWithGql(gqlVal)
+      },
+    })
+
+    cy.get('[data-cy="select-browser"] > button').should('be.enabled').click()
+    cy.get('[data-browser-id="1"]').should('contain', 'Electron').and('contain', 'Version 73')
+    cy.get('[data-browser-id="1"]').find('[data-cy="top-nav-browser-list-selected-item"]')
+  })
+
   it('shows current viewport info', () => {
     cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
       render: (gqlVal) => {

packages/app/src/runner/SpecRunnerHeaderOpenMode.vue

@@ -7,15 +7,15 @@
     <div class="flex flex-wrap grow p-[16px] gap-[12px] justify-end">
       <div
         data-cy="aut-url"
-        class="border rounded flex grow border-gray-100 h-[32px] overflow-hidden align-middle"
+        class="border rounded flex grow border-gray-100 h-[32px] align-middle"
         :class="{
           'bg-gray-50': autStore.isLoadingUrl
         }"
       >
         <Button
           data-cy="playground-activator"
           :disabled="isDisabled"
-          class="rounded-none border-gray-100 border-r-[1px] mr-[12px]"
+          class="rounded-none border-gray-100 border-r-[1px]"
           variant="text"
           :aria-label="t('runner.selectorPlayground.toggle')"
           @click="togglePlayground"
@@ -24,14 +24,36 @@
             :class="[selectorPlaygroundStore.show ? 'icon-dark-indigo-500' : 'icon-dark-gray-500']"
           />
         </Button>
+        <SpecRunnerDropdown
+          v-if="selectedBrowser?.displayName"
+          data-cy="select-browser"
+          :disabled="autStore.isRunning"
+        >
+          <template #heading>
+            <component
+              :is="allBrowsersIcons[selectedBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
+              class="min-w-[16px] w-[16px]"
+              :alt="selectedBrowser.majorVersion ? `${selectedBrowser.displayName} ${selectedBrowser.majorVersion}` : selectedBrowser.displayName"
+            />
+          </template>
+          <template #default>
+            <div class="max-h-[50vh] overflow-auto">
+              <VerticalBrowserListItems
+                :gql="props.gql"
+                :spec-path="activeSpecPath"
+              />
+            </div>
+          </template>
+        </SpecRunnerDropdown>
         <input
           ref="autUrlInputRef"
           data-cy="aut-url-input"
           :disabled="urlDisabled"
           :value="inputValue"
           :placeholder="inputPlaceholder"
           aria-label="url of the application under test"
-          class="aut-url-input flex grow mr-[12px] leading-normal max-w-full text-indigo-500 z-51 self-center hocus-link-default truncate"
+          class="aut-url-input flex grow mr-[12px] leading-normal max-w-full text-indigo-500 self-center hocus-link-default truncate"
+          :style="{ zIndex: inputZIndex }"
           @input="setStudioUrl"
           @click="openExternally"
           @keyup.enter="visitUrl"
@@ -65,30 +87,6 @@
           </span>
         </Tag>
       </div>
-
-      <SpecRunnerDropdown
-        v-if="selectedBrowser?.displayName"
-        data-cy="select-browser"
-        :disabled="autStore.isRunning"
-      >
-        <template #heading>
-          <component
-            :is="allBrowsersIcons[selectedBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
-            class="min-w-[16px] w-[16px]"
-            :alt="selectedBrowser.displayName"
-          />
-          {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
-        </template>
-
-        <template #default>
-          <div class="max-h-[50vh] overflow-auto">
-            <VerticalBrowserListItems
-              :gql="props.gql"
-              :spec-path="activeSpecPath"
-            />
-          </div>
-        </template>
-      </SpecRunnerDropdown>
     </div>
 
     <SelectorPlayground
@@ -184,6 +182,12 @@ watchEffect(() => {
 
 const autIframe = props.getAutIframe()
 
+const inputZIndex = computed(() => {
+  // input needs to be above the Studio prompt overlay
+  // but other times it needs to be below other resizable panels
+  return studioStore.needsUrl ? 51 : 5
+})
+
 const displayScale = computed(() => {
   return autStore.scale < 1 ? `${Math.round(autStore.scale * 100) }%` : 0
 })

packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx

@@ -1,6 +1,6 @@
 import SpecRunnerHeaderRunMode from './SpecRunnerHeaderRunMode.vue'
 import { useAutStore } from '../store'
-import { cyGeneralGlobeX16, cyBrowserChromeX16 } from '@cypress-design/icon-registry'
+import { cyGeneralGlobeX16 } from '@cypress-design/icon-registry'
 
 const browser = {
   displayName: 'Chrome',
@@ -19,18 +19,19 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
 
       cy.mount(<SpecRunnerHeaderRunMode/>)
 
-      cy.get('[data-cy="aut-url"]').should('be.visible')
+      cy.get('[data-cy="select-browser"]').should('be.visible')
+      .click()
+
+      cy.contains('Firefox').should('not.exist')
+      cy.get('[data-cy="select-browser"]')
+      .find('title').should('have.text', 'Chrome 1')
+
       cy.get('[data-cy="playground-activator"]').should('not.exist')
       // confirm expected content is rendered
       cy.contains('1000x660').should('be.visible')
       cy.contains('40%').should('be.visible')
-      cy.contains('Chrome 1').should('be.visible')
-      cy.contains('http://localhost:4000').should('be.visible')
-
-      // confirm no interactions are implemented
-      cy.contains('Chrome 1').click()
-      cy.contains('Firefox').should('not.exist')
 
+      cy.contains('http://localhost:4000').should('be.visible')
       cy.percySnapshot()
     })
   })
@@ -46,32 +47,19 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
 
       cy.mount(<SpecRunnerHeaderRunMode />)
 
+      cy.get('[data-cy="select-browser"]').should('be.visible')
+      .click()
+
+      cy.contains('Firefox').should('not.exist')
+      cy.get('[data-cy="select-browser"]')
+      .find('title').should('have.text', 'Chrome 1')
+
       cy.contains('URL navigation disabled in component testing').should('be.visible')
+
       cy.get('[data-cy="playground-activator"]').should('not.exist')
       // confirm expected content is rendered
       cy.contains('500x500').should('be.visible')
       cy.contains('40%').should('be.visible')
-      cy.contains('Chrome 1').should('be.visible')
-
-      // confirm no interactions are implemented
-      cy.contains('Chrome 1').click()
-      cy.contains('Firefox').should('not.exist')
-    })
-  })
-
-  it('disables browser dropdown button when specs are running', () => {
-    cy.window().then((win) => {
-      win.__CYPRESS_BROWSER__ = browser
-      win.__CYPRESS_TESTING_TYPE__ = 'e2e'
-      const autStore = useAutStore()
-
-      autStore.updateUrl('http://localhost:4000')
-      autStore.setIsRunning(true)
-
-      cy.mount(<SpecRunnerHeaderRunMode />)
-
-      cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyBrowserChromeX16.data)
-      cy.get('[data-cy="select-browser"] > button').should('be.disabled')
     })
   })
 
@@ -87,7 +75,6 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
       cy.mount(<SpecRunnerHeaderRunMode />)
 
       cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
-      cy.get('[data-cy="select-browser"] > button').should('be.disabled')
     })
   })
 })

packages/app/src/runner/SpecRunnerHeaderRunMode.vue

@@ -13,7 +13,17 @@
           'bg-gray-50': autStore.isLoadingUrl
         }"
       >
-        <div class="mx-[12px] flex grow text-gray-600 items-center truncate">
+        <SpecRunnerDropdown data-cy="select-browser">
+          <template #heading>
+            <component
+              :is="allBrowsersIcons[selectedBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
+              v-if="selectedBrowser.displayName"
+              class="min-w-[16px] w-[16px]"
+              :alt="selectedBrowser.majorVersion ? `${selectedBrowser.displayName} ${selectedBrowser.majorVersion}` : selectedBrowser.displayName"
+            />
+          </template>
+        </SpecRunnerDropdown>
+        <div class="mr-[12px] flex grow text-gray-600 items-center truncate">
           {{ testingType === 'e2e' ? autStore.url : 'URL navigation disabled in component testing' }}
         </div>
         <Tag
@@ -38,20 +48,6 @@
           </span>
         </Tag>
       </div>
-      <SpecRunnerDropdown
-        data-cy="select-browser"
-        :disabled="autStore.isRunning"
-      >
-        <template #heading>
-          <component
-            :is="allBrowsersIcons[selectedBrowser.displayName?.toLowerCase()] || allBrowsersIcons.generic"
-            v-if="selectedBrowser.displayName"
-            class="min-w-[16px] w-[16px]"
-            alt=""
-          /> {{ selectedBrowser.displayName }}
-          {{ selectedBrowser.majorVersion }}
-        </template>
-      </SpecRunnerDropdown>
     </div>
   </div>
 </template>

packages/app/src/runner/automation/AutomationMissing.cy.tsx

@@ -53,4 +53,18 @@ describe('AutomationMissing', () => {
     cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
     cy.percySnapshot()
   })
+
+  it('browser dropdown displays on click', () => {
+    cy.mountFragment(AutomationMissingFragmentDoc, {
+      render (gql) {
+        return (<AutomationMissing gql={gql} />)
+      },
+    })
+
+    cy.get('[data-cy="select-browser"]').click()
+    cy.contains('li', 'Chrome').should('be.visible')
+    cy.contains('li', 'Version 80').should('be.visible')
+    cy.get('[data-browser-id=1]').contains('Electron').should('be.visible')
+    cy.percySnapshot()
+  })
 })

packages/app/src/runner/automation/AutomationMissing.vue

@@ -17,6 +17,7 @@
           align="left"
           class="max-w-max"
           data-cy="select-browser"
+          :minimal="false"
         >
           <template #heading>
             <component