diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 41e366df..47194fc2 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -505,6 +505,9 @@ "permission_onedrive_cannot_revoke": { "message": "You must disable OneDrive backup first." }, + "permission_favicon": { + "message": "Allows fetching website icons." + }, "permission_unknown_permission": { "message": "Unknown permission. If see this message, please send a bug report." } diff --git a/sass/popup.scss b/sass/popup.scss index 0aa75179..89e9a5b0 100644 --- a/sass/popup.scss +++ b/sass/popup.scss @@ -212,13 +212,6 @@ svg { display: none; } - .issuerFavicon { - vertical-align: bottom; - margin-right: 5px; - height: 14px; - width: 14px; - } - &:hover { padding-right: 0; overflow-y: scroll; @@ -318,12 +311,23 @@ svg { .issuer { font-size: 12px; + line-height: 16px; + height: 16px; @include themify($themes) { color: themed("black-1"); } width: 80%; text-overflow: ellipsis; overflow: hidden; + + .issuerFavicon { + vertical-align: bottom; + margin-right: 5px; + height: 16px; + width: 16px; + border-radius: 3px; + border: 1px solid transparent; + } } .code { @@ -1075,6 +1079,11 @@ svg { color: #ccc; } + .issuerFavicon { + background: white; + border: 1px solid white !important; + } + ::-webkit-scrollbar { background: #1e1e1e !important; } @@ -1207,6 +1216,11 @@ svg { } } + .issuerFavicon { + background: white; + border: 1px solid white !important; + } + .showqr, .pin { svg { diff --git a/src/components/Popup/EntryComponent.vue b/src/components/Popup/EntryComponent.vue index e47c0e99..37cdac4e 100644 --- a/src/components/Popup/EntryComponent.vue +++ b/src/components/Popup/EntryComponent.vue @@ -41,13 +41,13 @@
- {{ + {{ entry.issuer.split("::")[0] + (theme === "compact" ? ` (${entry.account})` : "") }} @@ -98,6 +98,7 @@ import { mapState } from "vuex"; import * as QRGen from "qrcode-generator"; import { OTPEntry, OTPType, CodeState, OTPAlgorithm } from "../../models/otp"; import { EntryStorage } from "../../models/storage"; +import { isFirefox, isSafari } from "../../browser"; import IconMinusCircle from "../../../svg/minus-circle.svg"; import IconRedo from "../../../svg/redo.svg"; @@ -118,7 +119,10 @@ const computedPrototype = [ mapState("menu", ["theme"]), ]; -let computed = {}; +let computed: {} = { + shouldShowFavicon: + !isFirefox && !isSafari && mapState("menu", ["showFavicon"]).showFavicon, +}; for (const module of computedPrototype) { Object.assign(computed, module); @@ -146,12 +150,6 @@ export default Vue.extend({ entry.type !== OTPType.steam ); }, - shouldShowFavicon() { - return ( - navigator.userAgent.indexOf("Firefox") === -1 && - this.$store.state.menu.showFavicon - ); - }, getFaviconUrl(u: string) { // TODO: Switch to commented out implementation when MV3 // const url = new URL(chrome.runtime.getURL("/_favicon/")); diff --git a/src/store/Permissions.ts b/src/store/Permissions.ts index 142fdf86..ce9ebaad 100644 --- a/src/store/Permissions.ts +++ b/src/store/Permissions.ts @@ -130,6 +130,16 @@ const permissions: Permission[] = [ }, ], }, + { + id: "favicon", + description: chrome.i18n.getMessage("permission_favicon"), + revocable: true, + }, + { + id: "chrome://favicon/*", + description: chrome.i18n.getMessage("permission_favicon"), + revocable: true, + }, ]; export class Permissions implements Module {