diff --git a/package.json b/package.json index eb98c7e..46c524e 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "license": "AGPL-3.0-or-later", "scripts": { "build": "node scripts/build-extension.js", - "test": "node scripts/test-hostname.js && node scripts/test-activity-tracker.js && node scripts/test-protocol.js && node scripts/test-i18n.js && node scripts/test-popup-settings.js && node scripts/test-popup-catalog-fallback.js && node scripts/test-background-i18n.js && node scripts/test-firefox-github-release.js", + "test": "node scripts/test-hostname.js && node scripts/test-activity-tracker.js && node scripts/test-protocol.js && node scripts/test-i18n.js && node scripts/test-popup-settings.js && node scripts/test-popup-select-style.js && node scripts/test-popup-catalog-fallback.js && node scripts/test-background-i18n.js && node scripts/test-firefox-github-release.js", "sign:firefox": "./scripts/sign-firefox-xpi.sh", "release:firefox": "./scripts/release-firefox-xpi.sh", "publish:firefox": "./scripts/publish-firefox-github-release.sh", diff --git a/scripts/test-popup-select-style.js b/scripts/test-popup-select-style.js new file mode 100644 index 0000000..24fe2db --- /dev/null +++ b/scripts/test-popup-select-style.js @@ -0,0 +1,10 @@ +const assert = require('assert'); +const fs = require('fs'); +const path = require('path'); + +const css = fs.readFileSync(path.join(__dirname, '..', 'shared', 'popup', 'popup.css'), 'utf8'); + +assert.match(css, /select\s*\{[^}]*appearance:\s*none/, 'popup select must hide the native arrow'); +assert.match(css, /select option\s*\{[^}]*background/, 'popup options must use the extension surface'); + +console.log('browser extension popup select style test passed'); diff --git a/shared/popup/popup.css b/shared/popup/popup.css index 20254ef..921435c 100644 --- a/shared/popup/popup.css +++ b/shared/popup/popup.css @@ -145,7 +145,17 @@ select { margin-top: 5px; border: 1px solid #374151; border-radius: 4px; - padding: 7px 8px; + padding: 7px 30px 7px 8px; + appearance: none; + background-color: #0f172a; + background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%), linear-gradient(135deg, #94a3b8 50%, transparent 50%); + background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; + background-size: 5px 5px, 5px 5px; + background-repeat: no-repeat; + color: #e5e7eb; +} + +select option { background: #0f172a; color: #e5e7eb; }