#1663 Custom icon WIP

package.json

@@ -112,6 +112,7 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "qrcode": "^1.5.3",
+    "slim-select": "^2.9.0",
     "uuid": "^10.0.0"
   }
 }

src/_locales/en/general.json

@@ -19,6 +19,7 @@
   "add": "Add",
   "cancel": "Cancel",
   "shortcut": "Shortcut",
+  "icon": "Icon",
   "options": "Options",
   "neverShowAgain": "Never show again",
   "isNotSupportedByExt": "is not supported by 2FAS Extension",

src/_locales/en/optionsPage.json

@@ -41,5 +41,6 @@
   "optionsDomainRequired": "Domain is required",
   "optionsDomainTooLong": "Domain is too long",
   "optionsDomainIncorrect": "Domain is not correct",
-  "optionsDomainExists": "Domain exists on excluded list"
+  "optionsDomainExists": "Domain exists on excluded list",
+  "optionsIconDesc": "Choose an icon for the 2FAS Browser Extension to personalize its appearance in your browser."
 }

src/background/functions/setIcon.js

@@ -18,7 +18,7 @@
 //
 
 const browser = require('webextension-polyfill');
-const loadFromLocalStorage = require('./loadFromLocalStorage');
+const loadFromLocalStorage = require('../../localStorage/loadFromLocalStorage');
 
 const getIconObj = async (tabID, isActive) => {
   const isSafari = process.env.EXT_PLATFORM === 'Safari';
@@ -63,13 +63,13 @@ const setIcon = async (tabID, isActive = true, changeTitle = false) => {
     browser.browserAction.setIcon(iconObj);
 
     if (isActive || (!isActive && changeTitle)) {
-      await browser.browserAction.setTitle({ tabID, title: iconTitle });
+      await browser.browserAction.setTitle({ tabId: tabID, title: iconTitle });
     }
   } else {
     browser.action.setIcon(iconObj);
 
     if (isActive || (!isActive && changeTitle)) {
-      await browser.action.setTitle({ tabID, title: iconTitle });
+      await browser.action.setTitle({ tabId: tabID, title: iconTitle });
     }
   }
 };

src/optionsPage/functions/index.js

@@ -53,6 +53,7 @@ exports.setExtNameUpdateForm = require('./setExtNameUpdateForm');
 exports.setExtVersion = require('./setExtVersion');
 exports.setPinInfoBtns = require('./setPinInfoBtns');
 exports.setHamburger = require('./setHamburger');
+exports.setIconSelect = require('./setIconSelect');
 exports.setImportDefaultExcludedDomains = require('./setImportDefaultExcludedDomains');
 exports.setLoggingToggle = require('./setLoggingToggle');
 exports.setMenuLinks = require('./setMenuLinks');

src/optionsPage/functions/setIconSelect.js

@@ -0,0 +1,37 @@
+const SlimSelect = require('slim-select');
+const browser = require('webextension-polyfill');
+const saveToLocalStorage = require('../../localStorage/saveToLocalStorage');
+const checkTabCS = require('../../background/functions/checkTabCS');
+
+const setIconSelect = () => {
+  // eslint-disable-next-line no-new
+  new SlimSelect({
+    select: '#twofas-icon-select',
+    data: [
+      {
+        html: `<span><img src="${browser.runtime.getURL('images/icons/icon16.png')}" alt="Default" /><span>Default</span></span>`,
+        text: 'Default',
+        value: 0
+      },
+      {
+        html: `<span><img src="${browser.runtime.getURL('images/icons/icon16_1.png')}" alt="Type1" /><span>Type 1</span></span>`,
+        text: 'Type 1',
+        value: 1
+      }
+    ],
+    settings: {
+      showSearch: false,
+      closeOnSelect: true
+    },
+    events: {
+      afterChange: async item => {
+        const tabID = await browser.tabs.query({ active: true, currentWindow: true }).then(tabs => tabs[0].id);
+
+        await saveToLocalStorage({ extIcon: parseInt(item[0].value, 10) });
+        await checkTabCS(tabID);
+      }
+    }
+  });
+};
+
+module.exports = setIconSelect;

src/optionsPage/optionsPage.js

@@ -25,7 +25,7 @@ const TwoFasNotification = require('../notification');
 const SDK = require('../sdk');
 const extPageOnMessage = require('../partials/extPageOnMessage');
 const { delay, storeLog, handleTargetBlank, hidePreloader, storageValidation } = require('../partials');
-const { generateDevicesList, setLoggingToggle, setContextMenuToggle, setPushRadio, setPinInfo, setExtName, setExtNameUpdateForm, setModalsListeners, setAdvanced, setMenuLinks, setPinInfoBtns, setShortcutBox, setHamburger, setExtVersion, generateShortcutBox, generateShortcutLink, showIntegrityError, generateDomainsList, setImportDefaultExcludedDomains, setAutoSubmitSwitch } = require('./functions');
+const { generateDevicesList, setLoggingToggle, setContextMenuToggle, setPushRadio, setPinInfo, setExtName, setExtNameUpdateForm, setModalsListeners, setAdvanced, setMenuLinks, setPinInfoBtns, setShortcutBox, setHamburger, setExtVersion, generateShortcutBox, generateShortcutLink, showIntegrityError, generateDomainsList, setImportDefaultExcludedDomains, setAutoSubmitSwitch, setIconSelect } = require('./functions');
 
 const init = async storage => {
   i18n();
@@ -67,6 +67,7 @@ const init = async storage => {
     .then(setPushRadio)
     .then(setHamburger)
     .then(handleTargetBlank)
+    .then(setIconSelect)
     .then(() => browser.runtime.onMessage.addListener(extPageOnMessage))
     .then(() => hidePreloader());
 };

src/optionsPage/optionsPage.scss

@@ -18,6 +18,7 @@
 //
 
 @import "../global-styles/variables", "../global-styles/global", "../global-styles/input", "../global-styles/buttons", "../global-styles/shortcut", "styles/modal";
+@import url('/node_modules/slim-select/dist/slimselect.css');
 
 .twofas-options-page {
   background-color: $bg;

src/optionsPage/styles/_content.scss

@@ -614,6 +614,11 @@
     }
   }
 
+  &-icon {
+    margin-top: 20px;
+    max-width: 305px;
+  }
+
   &-advanced {
     margin-bottom: 20px;
     margin-top: 40px;

src/views/optionsViews/firefox.html

@@ -42,6 +42,12 @@
   <p data-i18n="shortcutUseDesc" class="js-twofas-shortcut-description">Use this shortcut to open the 2FAS Browser Extension on any page.</p>
 </div>
 
+<div class="twofas-options-page-content-icon"></div>
+  <h2><span data-i18n="icon">Icon</span>:</h2>
+  <select name="twofas-icon-select" id="twofas-icon-select"></select>
+  <p data-i18n="optionsIconDesc">Choose an icon for the 2FAS Browser Extension to personalize its appearance in your browser.</p>
+</div>
+
 <div class="twofas-options-page-content-advanced">
   <div class="twofas-options-page-content-advanced-header">
     <h2 class="js-twofas-advance-header">

src/views/optionsViews/normal.html

@@ -28,6 +28,12 @@
   <p data-i18n="shortcutUseDesc" class="js-twofas-shortcut-description">Use this shortcut to open the 2FAS Browser Extension on any page.</p>
 </div>
 
+<div class="twofas-options-page-content-icon">
+  <h2><span data-i18n="icon">Icon</span>:</h2>
+  <select name="twofas-icon-select" id="twofas-icon-select"></select>
+  <p data-i18n="optionsIconDesc">Choose an icon for the 2FAS Browser Extension to personalize its appearance in your browser.</p>
+</div>
+
 <div class="twofas-options-page-content-advanced">
   <div class="twofas-options-page-content-advanced-header">
     <h2 class="js-twofas-advance-header">