misc: display AUT bar in dark mode

cli/CHANGELOG.md

@@ -8,6 +8,10 @@ _Released 3/25/2025 (PENDING)_
 - Applies a fix from [#30730](https://github.com/cypress-io/cypress/pull/30730) and [#30099](https://github.com/cypress-io/cypress/pull/30099) related to Node.js turning on ESM flags by default in Node.js version `20.19.0`. Fixed in [#31308](https://github.com/cypress-io/cypress/pull/31308).
 - Fixed an issue where Firefox BiDi was not correctly removing prerequests on expected network request failures. Fixes [#31325](https://github.com/cypress-io/cypress/issues/31325).
 
+**Misc:**
+
+- The UI above the application under test now displays in dark mode. Addresses [#31106](https://github.com/cypress-io/cypress/issues/31106). Addressed in [#31360](https://github.com/cypress-io/cypress/pull/31360).
+
 **Dependency Updates:**
 
 - Upgraded `@cypress/request` from `3.0.7` to `3.0.8`. Addressed in [#31311](https://github.com/cypress-io/cypress/pull/31311).

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

@@ -104,116 +104,82 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
       })
     })
 
-    it(`scales the AUT correctly in ${testingType}`, () => {
-      const assertNoScaleShown = () => {
-        // check that no message about scale % is shown,
-        // meaning the AUT is at 100% scale
-        cy.contains('%)').should('not.exist')
-      }
-
-      cy.scaffoldProject('cypress-in-cypress')
-      cy.findBrowsers()
-      openProject(testingType)
-      cy.withCtx((ctx) => {
-        ctx.coreData.localSettings.preferences.reporterWidth = 800
-        ctx.coreData.localSettings.preferences.specListWidth = 250
-        ctx.coreData.localSettings.preferences.isSpecsListOpen = false
-      })
-
-      cy.startAppServer(testingType)
-      cy.visitApp()
-      cy.specsPageIsVisible()
+    describe('dragging panels', () => {
+      beforeEach(() => {
+        cy.scaffoldProject('cypress-in-cypress')
+        cy.findBrowsers()
+        openProject(testingType)
+        cy.withCtx((ctx) => {
+          ctx.coreData.localSettings.preferences.reporterWidth = 800
+          ctx.coreData.localSettings.preferences.specListWidth = 250
+          ctx.coreData.localSettings.preferences.isSpecsListOpen = false
+        })
 
-      cy.get('[data-cy="spec-item"]').first().click()
-      // Let runner stabilize
-      cy.get('#unified-reporter').should('be.visible')
+        cy.startAppServer(testingType)
+        cy.visitApp()
+        cy.specsPageIsVisible()
 
-      // validate that the width we set in `withCtx` above is the starting point
-      cy.get(`[data-cy="reporter-panel"]`).invoke('outerWidth').should('eq', 800)
-      // cy.percySnapshot('initial state') // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
-
-      cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs')
-      .click({ force: true })
-
-      // this tooltip text confirms specs list is open
-      cy.contains('Collapse Specs List')
-
-      // we will move the right-hand handle of the Reporter
-      // to these positions from the left of the screen
-      const dragPositions = [1000, 1090, 900, 600]
-
-      // based on viewport sizes for CT and e2e tests in the `cypress-in-cypress`
-      // projects, we expect certain scale % values to be shown
-      const testingTypeExpectedScales = {
-        component: ['93%', '75%'],
-        e2e: ['46%', '37%', '56%', '85%'],
-        componentShortViewport: '61%',
-        e2eShortViewport: '46%',
-        componentNarrowViewport: '40%',
-        e2eNarrowViewport: '20%',
-      }
-
-      // resize the reporter using each of the dragPositions and take Percy snapshots
-      dragPositions.forEach((position, index) => {
-        dragHandleToClientX('panel2', position).then(() => {
-          const expectedScale = testingTypeExpectedScales[testingType][index]
-
-          // CT hits 100% scale "earlier" than E2E, so sometimes there is no expected scale
-          if (expectedScale) {
-            cy.contains(expectedScale).should('be.visible')
-          } else {
-            assertNoScaleShown()
-          }
+        cy.get('[data-cy="spec-item"]').first().click()
+        // Let runner stabilize
+        cy.get('#unified-reporter').should('be.visible')
 
-          /*
-            TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
-            cy.percySnapshot(`panel 2 at ${ position } px`)
-          */
-        })
+        // validate that the width we set in `withCtx` above is the starting point
+        cy.get(`[data-cy="reporter-panel"]`).invoke('outerWidth').should('eq', 800)
       })
 
-      // now check vertical scaling with viewport resize, and take some snapshots too
+      it(`scales the AUT correctly at various widths in ${testingType}`, () => {
+      // validate that the width we set in `withCtx` above is the starting point
+        cy.get(`[data-cy="reporter-panel"]`).invoke('outerWidth').should('eq', 800)
 
-      // this viewport should be tall enough to not scale even the e2e test
-      cy.viewport(1500, 1300)
-      cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs')
-      .click({ force: true })
+        cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs')
+        .click({ force: true })
 
-      // make sure the reporter is narrow enough (should be, but don't want to depend on leftover state from above)
-      dragHandleToClientX('panel2', 400).then(() => {
-        // but we have to also collapse the Specs List to remove any reason to scale horizontally
+        // this tooltip text confirms specs list is open
+        cy.contains('Collapse Specs List')
 
-        // this tooltip text confirms specs list is closed
-        cy.contains('Expand Specs List')
+        // we will move the right-hand handle of the Reporter
+        // to these positions from the left of the screen
+        const dragPositions = [1000, 1090, 900, 600]
 
-        assertNoScaleShown()
-        // cy.percySnapshot('tall viewport') // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
+        // based on viewport sizes for CT and e2e tests in the `cypress-in-cypress`
+        // projects, we expect certain scale % values to be shown
+        const testingTypeExpectedScales = {
+          component: ['93%', '75%'],
+          e2e: ['46%', '37%', '56%', '85%'],
+        }
 
-        cy.viewport(1500, 400)
-        cy.contains(testingTypeExpectedScales[`${ testingType }ShortViewport`]).should('be.visible')
-        // cy.percySnapshot('short viewport') // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
+        // resize the reporter using each of the dragPositions and take Percy snapshots
+        dragPositions.forEach((position, index) => {
+          dragHandleToClientX('panel2', position).then(() => {
+            const expectedScale = testingTypeExpectedScales[testingType][index]
+
+            // CT hits 100% scale "earlier" than E2E, so sometimes there is no expected scale
+            if (expectedScale) {
+              cy.contains(expectedScale).should('be.visible')
+            } else {
+              cy.contains('%)').should('not.exist')
+            }
+          })
+        })
       })
 
-      cy.get('[data-cy="select-browser"]').as('selectBrowser')
-
-      cy.viewport(500, 600)
-      cy.get('@selectBrowser').scrollIntoView()
-      cy.get('@selectBrowser').should('be.visible') // with no specs list open, we should see this by scrolling
+      it(`displays the UI correctly at 400 reporter width in ${testingType}`, () => {
+      // this viewport should be tall enough to not scale even the e2e test
+        cy.viewport(1500, 1300)
 
-      dragHandleToClientX('panel2', 200).then(() => {
-        cy.contains('Chrome 1').should('not.be.visible')
-      })
+        // make sure the reporter is narrow enough (should be, but don't want to depend on leftover state from above)
+        dragHandleToClientX('panel2', 400).then(() => {
+          cy.contains('%)').should('not.exist')
 
-      cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs')
-      .click({ force: true })
+          cy.viewport(1500, 400)
 
-      cy.get('@selectBrowser').should('not.be.visible')
-      cy.get('@selectBrowser').scrollIntoView()
-      cy.get('@selectBrowser').should('not.be.visible') // with specs list open, scrolling is not enough to see this
+          const expectedScale = testingType === 'component' ? '61%' : '46%'
 
-      dragHandleToClientX('panel1', 130)
+          cy.contains(expectedScale).should('be.visible')
+        })
 
-      cy.contains(testingTypeExpectedScales[`${ testingType }NarrowViewport`])
+        cy.get('[data-cy="select-browser"]').should('be.visible')
+      })
     })
 
     it(`resets selector playground validity when selecting element with playground selector in ${testingType}`, () => {

packages/app/package.json

@@ -23,7 +23,7 @@
   "dependencies": {},
   "devDependencies": {
     "@cypress-design/icon-registry": "^1.5.1",
-    "@cypress-design/vue-button": "^1.1.0",
+    "@cypress-design/vue-button": "^1.3.0",
     "@cypress-design/vue-icon": "^1.6.0",
     "@cypress-design/vue-statusicon": "^1.0.0",
     "@cypress-design/vue-tabs": "^1.2.2",

packages/app/src/runner/SpecRunnerDropdown.vue

@@ -5,19 +5,19 @@
     #="{ open, close }"
   >
     <PopoverButton
-      class="bg-white border rounded-[50px] self-center h-full grow px-[5px] group"
+      class="border rounded-[50px] self-center h-full grow px-[5px] group outline-none hover:bg-gray-800"
       :class="{
-        'hocus-default': !props.disabled,
         'opacity-50 cursor-auto': props.disabled,
         'rounded-[5px] border-[1px] border-indigo-100': !props.minimal,
         'border-transparent': props.minimal,
+        'bg-white': !props.minimal,
+        'bg-transparent': props.minimal,
       }"
       :disabled="props.disabled"
     >
       <div
         class="flex gap-[8px] items-center"
         :class="{
-          'group-hocus:text-indigo-600': !props.disabled,
           'text-indigo-600': open,
           'text-gray-600': !open,
         }"

packages/app/src/runner/SpecRunnerHeaderOpenMode.vue

@@ -2,28 +2,26 @@
   <div
     id="spec-runner-header"
     ref="autHeaderEl"
-    class="min-h-[64px] text-[14px]"
+    class="h-full bg-gray-1000 border-l-[1px] border-gray-900 min-h-[64px] text-[14px]"
   >
-    <div class="flex flex-wrap grow p-[16px] gap-[12px] justify-end">
+    <div class="flex flex-wrap grow p-[16px] gap-[12px] justify-end h-[64px]">
+      <button
+        data-cy="playground-activator"
+        :disabled="isDisabled"
+        class="bg-gray-900 border rounded-md flex h-full border-gray-800 outline-solid outline-indigo-500 transition w-[40px] duration-150 items-center justify-center hover:bg-gray-800"
+        :aria-label="t('runner.selectorPlayground.toggle')"
+        :class="[selectorPlaygroundStore.show ? 'bg-gray-800 border-gray-700' : 'bg-gray-900']"
+        @click="togglePlayground"
+      >
+        <i-cy-crosshairs_x16 class="icon-dark-gray-300" />
+      </button>
       <div
         data-cy="aut-url"
-        class="border rounded flex grow border-gray-100 h-[32px] align-middle"
+        class="border rounded bg-gray-950 flex grow border-gray-800 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]"
-          variant="text"
-          :aria-label="t('runner.selectorPlayground.toggle')"
-          @click="togglePlayground"
-        >
-          <i-cy-crosshairs_x16
-            :class="[selectorPlaygroundStore.show ? 'icon-dark-indigo-500' : 'icon-dark-gray-500']"
-          />
-        </Button>
         <SpecRunnerDropdown
           v-if="selectedBrowser?.displayName"
           data-cy="select-browser"
@@ -52,7 +50,7 @@
           :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 self-center hocus-link-default truncate"
+          class="aut-url-input bg-gray-950 flex grow mr-[12px] leading-normal max-w-full text-gray-300 self-center hocus-link-default truncate"
           :style="{ zIndex: inputZIndex }"
           @input="setStudioUrl"
           @click="openExternally"
@@ -69,7 +67,8 @@
         <Tag
           data-cy="viewport-size"
           size="20"
-          color="white"
+          color="gray"
+          :dark="true"
           class="self-center rounded-[10px] mr-[5px] pr-[6px] pl-[6px]"
         >
           <span class="whitespace-nowrap text-[12px]">{{ autStore.viewportWidth }}x{{
@@ -80,7 +79,8 @@
           v-if="displayScale"
           data-cy="viewport-scale"
           size="20"
-          color="white"
+          color="gray"
+          :dark="true"
           class="self-center rounded-[10px] mr-[5px] pr-[6px] pl-[6px]"
         >
           <span class="text-[12px]">
@@ -129,7 +129,6 @@ import Tag from '@cypress-design/vue-tag'
 import SelectorPlayground from './selector-playground/SelectorPlayground.vue'
 import ExternalLink from '@packages/frontend-shared/src/gql-components/ExternalLink.vue'
 import Alert from '@packages/frontend-shared/src/components/Alert.vue'
-import Button from '@packages/frontend-shared/src/components/Button.vue'
 import StudioControls from './studio/StudioControls.vue'
 import StudioUrlPrompt from './studio/StudioUrlPrompt.vue'
 import VerticalBrowserListItems from '@packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue'

packages/app/src/runner/SpecRunnerHeaderRunMode.vue

@@ -2,15 +2,15 @@
   <div
     id="spec-runner-header"
     ref="autHeaderEl"
-    class="min-h-[64px] px-[16px] text-[14px]"
+    class="bg-gray-1000 border-l-[1px] border-gray-900 min-h-[64px] px-[16px] text-[14px]"
   >
     <!-- this is similar to the Open Mode header but it's not interactive, so can be a lot smaller-->
     <div class="flex grow flex-wrap py-[16px] gap-[12px] justify-end">
       <div
         data-cy="aut-url"
-        class="border rounded flex grow border-[1px] border-gray-100 h-[32px] align-middle overflow-hidden"
+        class="border rounded flex grow border-[1px] bg-gray-950 border-gray-800 h-[32px] align-middle overflow-hidden"
         :class="{
-          'bg-gray-50': autStore.isLoadingUrl
+          'bg-gray-800': autStore.isLoadingUrl
         }"
       >
         <SpecRunnerDropdown data-cy="select-browser">
@@ -23,13 +23,14 @@
             />
           </template>
         </SpecRunnerDropdown>
-        <div class="mr-[12px] flex grow text-gray-600 items-center truncate">
+        <div class="mr-[12px] flex grow text-gray-300 items-center truncate">
           {{ testingType === 'e2e' ? autStore.url : 'URL navigation disabled in component testing' }}
         </div>
         <Tag
           data-cy="viewport-size"
           size="20"
-          color="white"
+          color="gray"
+          :dark="true"
           class="self-center rounded-[10px] mr-[5px] pr-[6px] pl-[6px]"
         >
           <span class="whitespace-nowrap text-[12px]">{{ autStore.viewportWidth }}x{{
@@ -40,7 +41,8 @@
           v-if="displayScale"
           data-cy="viewport-scale"
           size="20"
-          color="white"
+          color="gray"
+          :dark="true"
           class="self-center rounded-[10px] mr-[5px] pr-[6px] pl-[6px]"
         >
           <span class="text-[12px]">

packages/app/src/runner/SpecRunnerRunMode.vue

@@ -39,7 +39,6 @@
             v-if="!hideRunnerUi"
             :event-manager="eventManager"
             :get-aut-iframe="getAutIframeModel"
-            class="bg-white"
           />
         </HideDuringScreenshot>
         <RemoveClassesDuringScreenshotting