Fix favicon PR #1118: guarded computed + browser.ts constants

_locales/en/messages.json

@@ -301,6 +301,10 @@
     "message": "Use High Contrast",
     "description": "Use High Contrast"
   },
+  "show_favicon": {
+    "message": "Show Website Icon",
+    "description": "Show Issuer Icon"
+  },
   "theme": {
     "message": "Theme",
     "description": "Theme"
@@ -512,6 +516,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."
   },

manifests/manifest-chrome-testing.json

@@ -57,7 +57,8 @@
     ],
     "optional_permissions": [
         "clipboardWrite",
-        "contextMenus"
+        "contextMenus",
+        "favicon"
     ],
     "optional_host_permissions": [
         "https://www.google.com/",

manifests/manifest-chrome.json

@@ -57,7 +57,8 @@
     ],
     "optional_permissions": [
         "clipboardWrite",
-        "contextMenus"
+        "contextMenus",
+        "favicon"
     ],
     "optional_host_permissions": [
         "https://www.google.com/",

manifests/manifest-edge.json

@@ -56,7 +56,8 @@
     ],
     "optional_permissions": [
         "clipboardWrite",
-        "contextMenus"
+        "contextMenus",
+        "favicon"
     ],
     "optional_host_permissions": [
         "https://www.google.com/",

sass/popup.scss

@@ -317,6 +317,20 @@ svg {
     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;
+    }
+  }
+
+  .issuerFavicon {
+    background-color: #fff;
+    border: 1px solid #fff;
   }
 
   .code {

src/components/Popup/EntryComponent.vue

@@ -39,6 +39,14 @@
       <IconRedo />
     </div>
     <div class="issuer">
+      <img
+        class="issuerFavicon"
+        v-if="shouldShowFavicon && entry.issuer.split('::')[1]"
+        v-bind:src="getFaviconUrl(entry.issuer.split('::')[1])"
+      /><IconMedal
+        class="issuerFavicon"
+        v-if="shouldShowFavicon && !entry.issuer.split('::')[1]"
+      />
       {{
         entry.issuer.split("::")[0] +
         (theme === "compact" ? ` (${entry.account})` : "")
@@ -90,13 +98,15 @@ 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 { getCurrentTab, okToInjectContentScript } from "../../utils";
 
 import IconMinusCircle from "../../../svg/minus-circle.svg";
 import IconRedo from "../../../svg/redo.svg";
 import IconQr from "../../../svg/qrcode.svg";
 import IconBars from "../../../svg/bars.svg";
 import IconPin from "../../../svg/pin.svg";
+import IconMedal from "../../../svg/medal.svg";
 
 const computedPrototype = [
   mapState("accounts", [
@@ -110,7 +120,11 @@ const computedPrototype = [
   mapState("menu", ["theme"]),
 ];
 
-let computed = {};
+let computed = {
+  shouldShowFavicon(this: any) {
+    return !isFirefox && !isSafari && this.$store.state.menu.showFavicon;
+  },
+};
 
 for (const module of computedPrototype) {
   Object.assign(computed, module);
@@ -138,6 +152,12 @@ export default Vue.extend({
         entry.type !== OTPType.steam
       );
     },
+    getFaviconUrl(u: string) {
+      const url = new URL(chrome.runtime.getURL("/_favicon/"));
+      url.searchParams.set("pageUrl", "https://" + u);
+      url.searchParams.set("size", "16");
+      return url.toString();
+    },
     showCode(code: string) {
       if (code === CodeState.Encrypted) {
         return this.i18n.encrypted;
@@ -254,6 +274,7 @@ export default Vue.extend({
     IconQr,
     IconBars,
     IconPin,
+    IconMedal,
   },
 });
 

src/components/Popup/PreferencesPage.vue

@@ -43,6 +43,11 @@
       @change="requireContextMenuPermission()"
       v-if="isSupported"
     />
+    <a-toggle-input
+      :label="i18n.show_favicon"
+      v-model="showFavicon"
+      v-if="isSupported"
+    />
     <div class="control-group" v-show="!!defaultEncryption">
       <label class="combo-label">{{ i18n.autolock }}</label>
       <input
@@ -103,6 +108,22 @@ export default Vue.extend({
         this.$store.commit("menu/setEnableContextMenu", enableContextMenu);
       },
     },
+    showFavicon: {
+      get(): boolean {
+        return this.$store.state.menu.showFavicon;
+      },
+      set(showFavicon: boolean) {
+        chrome.permissions.request(
+          { permissions: ["favicon"] },
+          (granted) => {
+            this.$store.commit(
+              "menu/setShowFavicon",
+              granted ? showFavicon : false
+            );
+          }
+        );
+      },
+    },
     theme: {
       get(): string {
         return this.$store.state.menu.theme;

src/definitions/module-interface.d.ts

@@ -36,6 +36,7 @@ interface MenuState {
   useAutofill: boolean;
   smartFilter: boolean;
   enableContextMenu: boolean;
+  showFavicon: boolean;
   theme: string;
   backupDisabled: boolean;
   storageArea: "sync" | "local";

src/models/settings.ts

@@ -29,6 +29,7 @@ interface UserSettingsData {
   enableContextMenu?: boolean;
   encodedPhrase?: string;
   smartFilter?: boolean;
+  showFavicon?: boolean;
   theme?: string;
   zoom?: number;
 }
@@ -184,7 +185,8 @@ type BooleanOption =
   | "oneDriveBusiness"
   | "oneDriveEncrypted"
   | "oneDriveRevoked"
-  | "smartFilter";
+  | "smartFilter"
+  | "showFavicon";
 
 type NumberOption = "autolock" | "lastRemindingBackupTime" | "offset" | "zoom";
 
@@ -202,6 +204,7 @@ function isBooleanOption(key: string): key is BooleanOption {
     "oneDriveEncrypted",
     "oneDriveRevoked",
     "smartFilter",
+    "showFavicon",
   ].includes(key);
 }
 

src/store/Menu.ts

@@ -13,6 +13,7 @@ export class Menu implements Module {
         useAutofill: UserSettings.items.autofill === true,
         smartFilter: UserSettings.items.smartFilter === true,
         enableContextMenu: UserSettings.items.enableContextMenu === true,
+        showFavicon: UserSettings.items.showFavicon === true,
         theme: UserSettings.items.theme || (isSafari ? "flat" : "normal"),
         autolock: Number(UserSettings.items.autolock) || 30,
         backupDisabled: await ManagedStorage.get("disableBackup", false),
@@ -48,6 +49,11 @@ export class Menu implements Module {
           UserSettings.items.enableContextMenu = enableContextMenu;
           UserSettings.commitItems();
         },
+        setShowFavicon(state: MenuState, showFavicon: boolean) {
+          state.showFavicon = showFavicon;
+          UserSettings.items.showFavicon = showFavicon;
+          UserSettings.commitItems();
+        },
         setTheme(state: MenuState, theme: string) {
           state.theme = theme;
           UserSettings.items.theme = theme;

src/store/Permissions.ts

@@ -37,6 +37,11 @@ const permissions: Permission[] = [
     description: chrome.i18n.getMessage("permission_context_menus"),
     revocable: true,
   },
+  {
+    id: "favicon",
+    description: chrome.i18n.getMessage("permission_favicon"),
+    revocable: true,
+  },
   {
     id: "https://www.google.com/*",
     description: chrome.i18n.getMessage("permission_sync_clock"),