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 {