diff --git a/scripts/e2e-settings-memory-debug.test.mjs b/scripts/e2e-settings-memory-debug.test.mjs index 89ddab4..760f38a 100644 --- a/scripts/e2e-settings-memory-debug.test.mjs +++ b/scripts/e2e-settings-memory-debug.test.mjs @@ -150,10 +150,10 @@ test('Memory Debug Mode toggle saves immediately without a Save button', async ( assert.equal(settings.get().memoryDebugMode, true); }); -test('Settings markup exposes the official UBSan help link in a protected new tab', async () => { +test('Settings markup uses the shared toolbar gear icon and exposes the official UBSan help link in a protected new tab', async () => { const html = await readFile(new URL('../src/ui/index.html', import.meta.url), 'utf8'); - assert.match(html, /id="btn-settings"[\s\S]*settings-gear-icon[\s\S]*Settings/); + assert.match(html, /id="btn-settings"[\s\S]*class="codicon codicon-gear" aria-hidden="true"[\s\S]*Settings/); assert.match(html, /id="settings-panel"/); assert.match(html, /id="setting-memory-debug"/); assert.match(html, /href="https:\/\/clang\.llvm\.org\/docs\/UndefinedBehaviorSanitizer\.html"/); @@ -162,10 +162,10 @@ test('Settings markup exposes the official UBSan help link in a protected new ta assert.doesNotMatch(html, /settings-save|Save settings|Apply settings/i); }); -test('Settings gear uses the toolbar icon size', async () => { +test('Settings relies on the shared toolbar icon style', async () => { const css = await readFile(new URL('../src/ui/styles.css', import.meta.url), 'utf8'); - assert.match(css, /\.settings-gear-icon\s*\{[^}]*font-size:\s*16px\s*;/s); + assert.doesNotMatch(css, /\.settings-gear-icon\s*\{/); }); test('Settings backdrop preserves accurate workspace theme previews', async () => { diff --git a/scripts/smoke-browser.mjs b/scripts/smoke-browser.mjs index 4369215..a41a301 100644 --- a/scripts/smoke-browser.mjs +++ b/scripts/smoke-browser.mjs @@ -956,6 +956,12 @@ int main() { const icon = document.querySelector(selector); return icon ? getComputedStyle(icon).fontSize : null; }; + const rect = (selector) => { + const element = document.querySelector(selector); + if (!element) return null; + const { width, height } = element.getBoundingClientRect(); + return { width, height }; + }; return { buttonText: button?.textContent?.replace(/\\s+/g, ' ').trim(), expanded: button?.getAttribute('aria-expanded'), @@ -964,9 +970,15 @@ int main() { helpHref: help?.href, helpTarget: help?.target, helpRel: help?.rel, - settingsGearSize: iconSize('#btn-settings .settings-gear-icon'), + settingsGearSize: iconSize('#btn-settings .codicon-gear'), openIconSize: iconSize('#btn-open .codicon'), compileIconSize: iconSize('#btn-compile .codicon'), + settingsButtonRect: rect('#btn-settings'), + openButtonRect: rect('#btn-open'), + compileButtonRect: rect('#btn-compile'), + settingsGearRect: rect('#btn-settings .codicon-gear'), + openIconRect: rect('#btn-open .codicon'), + compileIconRect: rect('#btn-compile .codicon'), }; })()`); assert(settingsDefault.buttonText?.includes('Settings'), 'Settings button label did not render'); @@ -977,6 +989,16 @@ int main() { 'Settings gear size does not match the Open icon'); assert(settingsDefault.settingsGearSize === settingsDefault.compileIconSize, 'Settings gear size does not match the Compile icon'); + assert(settingsDefault.settingsButtonRect?.height === settingsDefault.openButtonRect?.height, + 'Settings button height does not match the Open button'); + assert(settingsDefault.settingsButtonRect?.height === settingsDefault.compileButtonRect?.height, + 'Settings button height does not match the Compile button'); + assert(settingsDefault.settingsGearRect?.width === settingsDefault.openIconRect?.width && + settingsDefault.settingsGearRect?.height === settingsDefault.openIconRect?.height, + 'Settings gear dimensions do not match the Open icon'); + assert(settingsDefault.settingsGearRect?.width === settingsDefault.compileIconRect?.width && + settingsDefault.settingsGearRect?.height === settingsDefault.compileIconRect?.height, + 'Settings gear dimensions do not match the Compile icon'); assert( settingsDefault.helpHref === 'https://clang.llvm.org/docs/UndefinedBehaviorSanitizer.html', `Unexpected UBSan help URL: ${settingsDefault.helpHref}` diff --git a/src/ui/index.html b/src/ui/index.html index 38b767b..caff0be 100644 --- a/src/ui/index.html +++ b/src/ui/index.html @@ -43,7 +43,7 @@ aria-controls="settings-panel" aria-expanded="false" > - + Settings diff --git a/src/ui/styles.css b/src/ui/styles.css index 97eea61..54d736d 100644 --- a/src/ui/styles.css +++ b/src/ui/styles.css @@ -187,10 +187,6 @@ select:focus { flex: 0 0 auto; } -.settings-gear-icon { - font-size: 16px; -} - /* ── Extension settings drawer ───────────────────────────────────────────── */ .settings-backdrop {