cypress-io · mschile · Dec 19, 2024 · Dec 19, 2024 · Dec 19, 2024 · Dec 19, 2024
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.17.1
+
+_Released 12/31/2024 (PENDING)_
+
+**Misc:**
+
+- Updated to use Cypress design system browser icons. Addressed in [#30790](https://github.com/cypress-io/cypress/pull/30790).
+
 ## 13.17.0
 
 _Released 12/17/2024_

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -21,10 +21,10 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-button": "^0.11.6",
-    "@cypress-design/vue-icon": "^0.26.0",
-    "@cypress-design/vue-statusicon": "^0.5.7",
-    "@cypress-design/vue-tabs": "^0.5.1",
+    "@cypress-design/vue-button": "^1.1.0",
+    "@cypress-design/vue-icon": "^1.6.0",
+    "@cypress-design/vue-statusicon": "^1.0.0",
+    "@cypress-design/vue-tabs": "^1.2.2",
     "@faker-js/faker": "8.4.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",

diff --git a/packages/app/src/debug/LayeredBrowserIcons.vue b/packages/app/src/debug/LayeredBrowserIcons.vue
@@ -20,22 +20,10 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import {
-  IconBrowserChrome,
-  IconBrowserChromeBeta,
-  IconBrowserChromeCanary,
-  IconBrowserMozillaFirefox,
-  IconBrowserEdge,
-  IconBrowserWebkit,
-  IconBrowserElectronLight,
-  IconGeneralGlobe,
-} from '@cypress-design/vue-icon'
-
-// Note: These browser names should map to the list of logoPaths found at https://github.com/cypress-io/cypress-services/blob/develop/packages/common/src/logos/getLogoPath.ts
-export type BrowserType = 'CHROME' | 'CHROME BETA' | 'CANARY' | 'CHROME CANARY' | 'CHROME FOR TESTING' | 'CUSTOM CHROME FOR TESTING' | 'CHROMIUM' | 'CUSTOM CHROMIUM' | 'EDGE' | 'EDGE BETA' | 'EDGE CANARY' | 'EDGE DEV' | 'ELECTRON' | 'FIREFOX' | 'FIREFOX DEVELOPER EDITION' | 'FIREFOX NIGHTLY' | 'WEBKIT'
+import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 
 interface LayeredProps {
-  browsers: BrowserType[]
+  browsers: string[]
 }
 
 const props = defineProps<LayeredProps>()
@@ -44,7 +32,7 @@ const results = computed(() => {
   if (props.browsers) {
     return props.browsers.map((browserType) => {
       return {
-        icon: BROWSER_MAP[browserType] || IconGeneralGlobe,
+        icon: browserType ? allBrowsersIcons[browserType.toLowerCase()] : allBrowsersIcons.generic,
         name: `browser-icon-${browserType.toLowerCase().replaceAll(' ', '_')}`,
       }
     })
@@ -53,25 +41,4 @@ const results = computed(() => {
   return []
 })
 
-// TODO: Add correct icons for firefox, edge, and chromium
-const BROWSER_MAP: Record<BrowserType, any> = {
-  'CHROME': IconBrowserChrome,
-  'CHROME BETA': IconBrowserChromeBeta,
-  'CANARY': IconBrowserChromeCanary,
-  'CHROME CANARY': IconBrowserChromeCanary,
-  'CHROME FOR TESTING': IconBrowserChrome,
-  'CUSTOM CHROME FOR TESTING': IconBrowserChrome,
-  'CHROMIUM': IconGeneralGlobe,
-  'CUSTOM CHROMIUM': IconGeneralGlobe,
-  'EDGE': IconBrowserEdge,
-  'EDGE BETA': IconBrowserEdge,
-  'EDGE CANARY': IconBrowserEdge,
-  'EDGE DEV': IconBrowserEdge,
-  'ELECTRON': IconBrowserElectronLight,
-  'FIREFOX': IconBrowserMozillaFirefox,
-  'FIREFOX DEVELOPER EDITION': IconBrowserMozillaFirefox,
-  'FIREFOX NIGHTLY': IconBrowserMozillaFirefox,
-  'WEBKIT': IconBrowserWebkit,
-}
-
 </script>
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
@@ -63,11 +63,11 @@
         :disabled="autStore.isRunning"
       >
         <template #heading>
-          <img
+          <component
+            :is="selectedBrowser.displayName ? allBrowsersIcons[selectedBrowser.displayName.toLowerCase()] : allBrowsersIcons.generic"
             class="min-w-[16px] w-[16px]"
-            :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
             :alt="selectedBrowser.displayName"
-          >
+          />
           {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
         </template>
 

diff --git a/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
@@ -70,7 +70,7 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
 
       cy.mount(<SpecRunnerHeaderRunMode />)
 
-      cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.Chrome)
+      cy.get('[data-cy="select-browser"] > button img').should('have.attr', 'src', allBrowsersIcons.chrome)
       cy.get('[data-cy="select-browser"] > button').should('be.disabled')
     })
   })

diff --git a/packages/app/src/runner/SpecRunnerHeaderRunMode.vue b/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
@@ -29,12 +29,12 @@
         :disabled="autStore.isRunning"
       >
         <template #heading>
-          <img
+          <component
+            :is="selectedBrowser.displayName ? allBrowsersIcons[selectedBrowser.displayName.toLowerCase()] : allBrowsersIcons.generic"
             v-if="selectedBrowser.displayName"
             class="min-w-[16px] w-[16px]"
             alt=""
-            :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
-          > {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
+          /> {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
         </template>
       </SpecRunnerDropdown>
       <SpecRunnerDropdown

diff --git a/packages/app/src/runner/automation/AutomationMissing.vue b/packages/app/src/runner/automation/AutomationMissing.vue
@@ -19,10 +19,10 @@
           data-cy="select-browser"
         >
           <template #heading>
-            <img
+            <component
+              :is="selectedBrowser.displayName ? allBrowsersIcons[selectedBrowser.displayName.toLowerCase()] : allBrowsersIcons.generic"
               class="min-w-[16px] w-[16px]"
-              :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
-            >
+            />
             {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
           </template>
 

diff --git a/packages/app/src/runs/RunCard.vue b/packages/app/src/runs/RunCard.vue
@@ -122,7 +122,7 @@
             :aria-label="t(props.debugEnabled ? 'runs.card.debugDescription' : 'runs.card.noDebugAvailable', { runNumber: run.runNumber })"
             @click="onDebugClick"
           >
-            <IconTechnologyDebugger
+            <IconObjectBug
               aria-hidden="true"
               class="h-[16px] w-[16px] mr-2 shrink-0"
             />
@@ -155,7 +155,7 @@ import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 import UserAvatar from '@cy/gql-components/topnav/UserAvatar.vue'
 import { RunCardFragment, RunCard_ChangeDocument, RunCard_ShowDebugForCloudRunDocument } from '../generated/graphql'
 import { useRunDateTimeInterval } from '../debug/useRunDateTimeInterval'
-import { IconTechnologyDebugger, IconTimeClock, IconTechnologyBranchH } from '@cypress-design/vue-icon'
+import { IconObjectBug, IconTimeClock, IconTechnologyBranchH } from '@cypress-design/vue-icon'
 import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
 
 const { t } = useI18n()

diff --git a/packages/frontend-shared/package.json b/packages/frontend-shared/package.json
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@antfu/utils": "^0.7.8",
-    "@cypress-design/css": "^0.13.3",
+    "@cypress-design/css": "^1.0.0",
     "@faker-js/faker": "8.4.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
@@ -45,7 +45,6 @@
     "@vueuse/core": "7.2.2",
     "autoprefixer": "^10.4.19",
     "axe-core": "4.4.1",
-    "browser-logos": "github:alrra/browser-logos",
     "combine-properties": "0.1.0",
     "cross-env": "6.0.3",
     "cypress-plugin-tab": "1.0.5",

diff --git a/packages/frontend-shared/src/assets/browserLogos.ts b/packages/frontend-shared/src/assets/browserLogos.ts
@@ -1,33 +1,38 @@
-import chromeIcon from 'browser-logos/src/chrome/chrome.svg?url'
-import firefoxIcon from 'browser-logos/src/firefox/firefox.svg?url'
-import edgeIcon from 'browser-logos/src/edge/edge.svg?url'
-import electronIcon from 'browser-logos/src/electron/electron.svg?url'
-import canaryIcon from 'browser-logos/src/chrome-canary/chrome-canary.svg?url'
-import chromeBetaIcon from 'browser-logos/src/chrome-beta/chrome-beta.svg?url'
-import chromeTestIcon from '@packages/frontend-shared/src/assets/logos/browser-chrome-for-testing_x16.svg?url'
-import chromiumIcon from 'browser-logos/src/chromium/chromium.svg?url'
-import edgeBetaIcon from 'browser-logos/src/edge-beta/edge-beta.png'
-import edgeCanaryIcon from 'browser-logos/src/edge-canary/edge-canary.png'
-import edgeDevIcon from 'browser-logos/src/edge-dev/edge-dev.png'
-import firefoxNightlyIcon from 'browser-logos/src/firefox-nightly/firefox-nightly.svg?url'
-import firefoxDeveloperEditionIcon from 'browser-logos/src/firefox-developer-edition/firefox-developer-edition.svg?url'
-import webKitIcon from 'browser-logos/src/webkit/webkit.svg?url'
-import genericBrowserLogo from '@packages/frontend-shared/src/assets/logos/generic-browser.svg?url'
+import {
+  IconBrowserElectronLight,
+  IconBrowserChrome,
+  IconBrowserChromeBeta,
+  IconBrowserChromeCanary,
+  IconBrowserChromeForTesting,
+  IconBrowserMozillaFirefox,
+  IconBrowserEdge,
+  IconBrowserChromium,
+  IconBrowserFirefoxNightly,
+  IconBrowserFirefoxDev,
+  IconBrowserEdgeCanary,
+  IconBrowserEdgeBeta,
+  IconBrowserEdgeDev,
+  IconBrowserWebkit,
+  IconGeneralGlobe,
+} from '@cypress-design/vue-icon'
 
 export const allBrowsersIcons = {
-  'Electron': electronIcon,
-  'Chrome': chromeIcon,
-  'Chrome Beta': chromeBetaIcon,
-  'Chrome Canary': canaryIcon,
-  'Chrome for Testing': chromeTestIcon,
-  'Firefox': firefoxIcon,
-  'Edge': edgeIcon,
-  'Chromium': chromiumIcon,
-  'Firefox Nightly': firefoxNightlyIcon,
-  'Firefox Developer Edition': firefoxDeveloperEditionIcon,
-  'Edge Canary': edgeCanaryIcon,
-  'Edge Beta': edgeBetaIcon,
-  'Edge Dev': edgeDevIcon,
-  'WebKit': webKitIcon,
-  'generic': genericBrowserLogo,
+  'electron': IconBrowserElectronLight,
+  'chrome': IconBrowserChrome,
+  'chrome beta': IconBrowserChromeBeta,
+  'canary': IconBrowserChromeCanary,
+  'chrome canary': IconBrowserChromeCanary,
+  'chrome for testing': IconBrowserChromeForTesting,
+  'custom chrome for testing': IconBrowserChromeForTesting,
+  'chromium': IconBrowserChromium,
+  'custom chromium': IconBrowserChromium,
+  'firefox': IconBrowserMozillaFirefox,
+  'firefox nightly': IconBrowserFirefoxNightly,
+  'firefox developer edition': IconBrowserFirefoxDev,
+  'edge': IconBrowserEdge,
+  'edge beta': IconBrowserEdgeBeta,
+  'edge canary': IconBrowserEdgeCanary,
+  'edge dev': IconBrowserEdgeDev,
+  'webkit': IconBrowserWebkit,
+  'generic': IconGeneralGlobe,
 }
diff --git a/packages/frontend-shared/src/assets/logos/browser-chrome-for-testing_x16.svg b/packages/frontend-shared/src/assets/logos/browser-chrome-for-testing_x16.svg
diff --git a/packages/frontend-shared/src/assets/logos/generic-browser.svg b/packages/frontend-shared/src/assets/logos/generic-browser.svg