fix(review): address remaining codex feedback

Author: jevin98

assets/main.css

@@ -85,9 +85,9 @@
 
   body {
     @apply bg-background text-foreground antialiased;
-    min-width: 520px;
+    min-width: 0;
+    margin: 0;
     padding: 16px;
-    overflow-x: hidden;
     overflow-y: hidden;
   }
 }

entrypoints/devtools-panel/devtools-panel.vue

@@ -252,7 +252,7 @@ const PropertyNode = defineComponent({
           variant="ghost"
           size="icon"
           data-testid="theme-toggle"
-          :aria-label="isDark ? 'Switch to light theme' : 'Switch to dark theme'"
+          :aria-label="isDark ? t('switchToLightTheme') : t('switchToDarkTheme')"
           @click="handleToggleTheme"
         >
           <Sun v-if="isDark" class="h-3.5 w-3.5" />
@@ -348,7 +348,8 @@ const PropertyNode = defineComponent({
               variant="ghost"
               size="icon"
               class="absolute right-0 top-1/2 -translate-y-1/2"
-              aria-label="Clear filter"
+              :aria-label="t('clearFilter')"
+              :title="t('clearFilter')"
               @click="inputValue = ''"
             >
               <X class="h-4 w-4" />

entrypoints/devtools-panel/lang.ts

@@ -31,7 +31,10 @@ export type MessageKey =
   | 'total'
   | 'undefinedStyleValue'
   | 'copyInfo'
+  | 'clearFilter'
   | 'inputPlaceholder'
+  | 'switchToDarkTheme'
+  | 'switchToLightTheme'
   | 'waitingSelection'
 
 const messages = {

entrypoints/devtools-panel/utils/diff.node-test.ts

@@ -8,6 +8,12 @@
   "switchLanguage": {
     "message": "Switch language"
   },
+  "switchToDarkTheme": {
+    "message": "Switch to dark theme"
+  },
+  "switchToLightTheme": {
+    "message": "Switch to light theme"
+  },
   "selection": {
     "message": "Selection"
   },
@@ -86,6 +92,9 @@
   "copyInfo": {
     "message": "Copy Success"
   },
+  "clearFilter": {
+    "message": "Clear filter"
+  },
   "inputPlaceholder": {
     "message": "Please enter the css property you want to view"
   }

entrypoints/devtools-panel/utils/locale.node-test.ts

@@ -8,6 +8,12 @@
   "switchLanguage": {
     "message": "切换语言"
   },
+  "switchToDarkTheme": {
+    "message": "切换到深色主题"
+  },
+  "switchToLightTheme": {
+    "message": "切换到浅色主题"
+  },
   "selection": {
     "message": "选择"
   },
@@ -86,6 +92,9 @@
   "copyInfo": {
     "message": "复制成功"
   },
+  "clearFilter": {
+    "message": "清空筛选"
+  },
   "inputPlaceholder": {
     "message": "请输入需要查看的 css 属性"
   }

entrypoints/devtools-panel/utils/theme.node-test.ts

@@ -224,6 +224,62 @@ test('renders the built DevTools panel shell', async ({ page }) => {
   }
 })
 
+test('uses localized accessible labels for icon controls', async ({ page }) => {
+  test.skip(!existsSync(panelPath), 'Run `pnpm build:chrome` before this E2E test.')
+  const server = await serveOutputDir()
+
+  try {
+    await mockSystemTheme(page, 'light')
+    await page.addInitScript(() => {
+      localStorage.setItem('css-diff-locale', 'zh_CN')
+      localStorage.setItem('css-diff-theme', 'light')
+    })
+    await mockExtensionApi(page)
+    await page.goto(server.url)
+
+    await expect(page.getByRole('button', { name: '切换到深色主题' })).toBeVisible()
+
+    await page.getByPlaceholder('请输入需要查看的 css 属性').fill('color')
+
+    await expect(page.getByRole('button', { name: '清空筛选' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Clear filter' })).toHaveCount(0)
+  }
+  finally {
+    await server.close()
+  }
+})
+
+test('lets the panel shell fit narrow DevTools sidebars', async ({ page }) => {
+  test.skip(!existsSync(panelPath), 'Run `pnpm build:chrome` before this E2E test.')
+  const server = await serveOutputDir()
+
+  try {
+    await page.setViewportSize({ width: 420, height: 720 })
+    await mockExtensionApi(page)
+    await page.goto(server.url)
+
+    const bodyLayout = await page.evaluate(() => {
+      const style = window.getComputedStyle(document.body)
+
+      return {
+        margin: style.margin,
+        minWidth: style.minWidth,
+        overflowX: style.overflowX,
+        documentWidth: document.documentElement.scrollWidth,
+        viewportWidth: window.innerWidth,
+      }
+    })
+
+    expect(bodyLayout.margin).toBe('0px')
+    expect(bodyLayout.minWidth).toBe('0px')
+    expect(bodyLayout.overflowX).not.toBe('hidden')
+    expect(bodyLayout.documentWidth).toBeLessThanOrEqual(bodyLayout.viewportWidth)
+  }
+  finally {
+    await server.close()
+  }
+})
+
 test('follows the system theme until the user toggles manually', async ({ page }) => {
   test.skip(!existsSync(panelPath), 'Run `pnpm build:chrome` before this E2E test.')
   const server = await serveOutputDir()

public/_locales/en/messages.json

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { getDiffValueClass, getDiffValueTone, UNDEFINED_STYLE_VALUE } from '../../entrypoints/devtools-panel/utils/diff'
+
+describe('diff utilities', () => {
+  it('marks only the second value in a changed row as changed', () => {
+    const row = { property: 'display', left: 'block', right: 'flex', isDiff: true }
+
+    expect(getDiffValueTone(row, 'left')).toBe('muted')
+    expect(getDiffValueTone(row, 'right')).toBe('changed')
+    expect(getDiffValueClass(row, 'left')).toMatch(/\bbg-background\b/)
+    expect(getDiffValueClass(row, 'right')).toMatch(/\bbg-red-50\b/)
+  })
+
+  it('marks a missing first value as a special tag', () => {
+    const row = { property: 'gap', left: UNDEFINED_STYLE_VALUE, right: '8px', isDiff: true }
+
+    expect(getDiffValueTone(row, 'left')).toBe('missing')
+    expect(getDiffValueTone(row, 'right')).toBe('changed')
+    expect(getDiffValueClass(row, 'left')).toMatch(/\bborder-dashed\b/)
+  })
+
+  it('marks a missing second value as a special tag', () => {
+    const row = { property: 'gap', left: '8px', right: UNDEFINED_STYLE_VALUE, isDiff: true }
+
+    expect(getDiffValueTone(row, 'left')).toBe('muted')
+    expect(getDiffValueTone(row, 'right')).toBe('missing')
+    expect(getDiffValueClass(row, 'left')).not.toMatch(/\bborder-dashed\b/)
+    expect(getDiffValueClass(row, 'right')).toMatch(/\bborder-dashed\b/)
+  })
+
+  it('keeps equal rows visually muted', () => {
+    const row = { property: 'display', left: 'block', right: 'block', isDiff: false }
+
+    expect(getDiffValueTone(row, 'left')).toBe('muted')
+    expect(getDiffValueTone(row, 'right')).toBe('muted')
+  })
+})