3.11.3

- Updated font-family
- Added option to change the extension-icon #26

css/style.css

@@ -165,7 +165,7 @@ body {
     border-radius: 0px;
     font-size: 16px;
     /*border-top: 3px solid rgb(10, 132, 255);*/
-    border-top: 3px solid transparent;;
+    border-top: 3px solid transparent;
     border-bottom: 1px solid rgb(201, 202, 203);
     font-family: inherit;
     margin: 0px;
@@ -721,24 +721,40 @@ div {
     padding: 5px;
 }
 
+.no-border-bottom {
+    border-bottom: 0px solid transparent;
+}
+
 .dark-subsection-settings {
     border-bottom: 1px solid #555555;
 }
 
-#skin-tone-container, #auto-close-container, #multi-copy-container, #theme-container {
+#skin-tone-container, #auto-close-container, #multi-copy-container, #theme-container, #extension-icon-container {
     position: relative;
     height: 30px;
     display: inline-block;
     top: 0px;
     margin-left: 10px;
 }
 
+#extension-icon-section-container, #skin-tone-section-container {
+    min-height: 40px;
+}
+
+#skin-tone-section-container > .title-subsection-settings, #extension-icon-section-container > .title-subsection-settings {
+    margin-top: 3px;
+}
+
+#extension-icon-section-container > .title-subsection-settings {
+    margin-top: 6px;
+}
+
 #auto-close-container, #multi-copy-container, #theme-container {
     min-width: 100px;
     width: auto;
 }
 
-.skin-tone-button {
+.skin-tone-button, .extension-icon-button {
     border: 0px solid transparent;
     background: transparent;
     width: 25px;
@@ -750,16 +766,16 @@ div {
     transition: 0.1s;
 }
 
-.skin-tone-button:hover {
+.skin-tone-button:hover, .extension-icon-button:hover {
     opacity: 0.8;
 }
 
-.skin-tone-button:active, .skin-tone-button:focus {
+.skin-tone-button:active, .skin-tone-button:focus, .extension-icon-button:active, .extension-icon-button:focus {
     box-shadow: 0px 0px 0px 1px #3399ff, 0px 0px 0px 4px #b1d6fc;
     border: 1px solid #3399ff;
 }
 
-.skin-tone-button-selected {
+.skin-tone-button-selected, .extension-icon-button-selected {
     border: 2px solid #3399ff;
 }
 
@@ -787,7 +803,58 @@ div {
     background-color: #372323;
 }
 
-#skin-tone-container {
+.extension-icon-button {
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-size: 90% auto;
+    background-position: center center;
+}
+
+#extension-icon-1 {
+    background-image: url("../img/extension-icons/extension-icon-1.png");
+}
+
+#extension-icon-2 {
+    background-image: url("../img/extension-icons/extension-icon-2.png");
+}
+
+#extension-icon-3 {
+    background-image: url("../img/extension-icons/extension-icon-3.png");
+}
+
+#extension-icon-4 {
+    background-image: url("../img/extension-icons/extension-icon-4.png");
+}
+
+#extension-icon-5 {
+    background-image: url("../img/extension-icons/extension-icon-5.png");
+}
+
+#extension-icon-6 {
+    background-image: url("../img/extension-icons/extension-icon-6.png");
+}
+
+#extension-icon-7 {
+    background-image: url("../img/extension-icons/extension-icon-7.png");
+}
+
+#extension-icon-8 {
+    background-image: url("../img/extension-icons/extension-icon-8.png");
+}
+
+#extension-icon-9 {
+    background-image: url("../img/extension-icons/extension-icon-9.png");
+}
+
+#extension-icon-10 {
+    background-image: url("../img/extension-icons/extension-icon-10.png");
+}
+
+#extension-icon-11 {
+    background-image: url("../img/extension-icons/extension-icon-11.png");
+}
+
+#skin-tone-container, #extension-icon-container {
     position: absolute;
     height: 30px;
     display: inline-block;

js/script.js

@@ -10,6 +10,8 @@ var auto_close = "no"; //yes, no
 var skin_tone_selected = ""; //nothing
 var skin_tone_previous = "";
 var multi_copy = "no";
+var extension_icon_selected = 0; //extension-icon-1
+var extension_icons = ["extension-icon-1", "extension-icon-2", "extension-icon-3", "extension-icon-4", "extension-icon-5", "extension-icon-6", "extension-icon-7", "extension-icon-8", "extension-icon-9", "extension-icon-10", "extension-icon-11"];
 
 var all_emojis = [];
 
@@ -63,9 +65,7 @@ function loaded() {
         number_of_emojis_generations = 0;
     }
 
-    setVariablesFromSettings(true);
-
-    focusSearchBox();
+    setVariablesFromSettings(true, true);
 
     checkReview();
     checkOpenedAddon();
@@ -379,6 +379,13 @@ function setPopUpUI() {
     }
     selectSkinToneButton(document.getElementById("skin-tone-selected").selectedIndex);
 
+    document.getElementById("extension-icon-selected").onchange = function () {
+        selectExtensionIconButton(document.getElementById("extension-icon-selected").selectedIndex);
+
+        saveSettings();
+    }
+    selectExtensionIconButton(document.getElementById("extension-icon-selected").selectedIndex);
+
     document.getElementById("font-family-selected").onchange = function () {
         checkFontFamily();
 
@@ -415,41 +422,22 @@ function setPopUpUI() {
     }
     selectYesNoTheme(document.getElementById("theme-selected").selectedIndex);
 
-    document.getElementById("skin-standard").onclick = function () {
-        document.getElementById("skin-tone-selected").selectedIndex = 0;
-        selectSkinToneButton(0);
+    for (let i = 0; i < 6; i++) {
+        document.getElementsByClassName("skin-tone-button")[i].onclick = function () {
+            document.getElementById("skin-tone-selected").selectedIndex = i;
+            selectSkinToneButton(i);
 
-        saveSettings();
-    }
-    document.getElementById("skin-light").onclick = function () {
-        document.getElementById("skin-tone-selected").selectedIndex = 1;
-        selectSkinToneButton(1);
-
-        saveSettings();
-    }
-    document.getElementById("skin-mlight").onclick = function () {
-        document.getElementById("skin-tone-selected").selectedIndex = 2;
-        selectSkinToneButton(2);
-
-        saveSettings();
-    }
-    document.getElementById("skin-medium").onclick = function () {
-        document.getElementById("skin-tone-selected").selectedIndex = 3;
-        selectSkinToneButton(3);
-
-        saveSettings();
+            saveSettings();
+        }
     }
-    document.getElementById("skin-mdark").onclick = function () {
-        document.getElementById("skin-tone-selected").selectedIndex = 4;
-        selectSkinToneButton(4);
 
-        saveSettings();
-    }
-    document.getElementById("skin-dark").onclick = function () {
-        document.getElementById("skin-tone-selected").selectedIndex = 5;
-        selectSkinToneButton(5);
+    for (let i = 0; i < 11; i++) {
+        document.getElementsByClassName("extension-icon-button")[i].onclick = function () {
+            document.getElementById("extension-icon-selected").selectedIndex = i;
+            selectExtensionIconButton(i);
 
-        saveSettings();
+            saveSettings();
+        }
     }
 
     document.getElementById("auto-close-yes").onclick = function () {
@@ -864,6 +852,7 @@ function saveSettings(reset = false) {
     let autoClosePopup = document.getElementById("close-popup-after-copied-selected").selectedIndex;
     let skinTone = document.getElementById("skin-tone-selected").selectedIndex;
     let multiCopy = document.getElementById("multi-copy-selected").selectedIndex;
+    let extensionIcon = document.getElementById("extension-icon-selected").selectedIndex;
 
     let jsonSettings = {
         "theme": theme,
@@ -873,7 +862,8 @@ function saveSettings(reset = false) {
         "font": fontFamily,
         "auto_close": autoClosePopup,
         "skin_tone": skinTone,
-        "multi_copy": multiCopy
+        "multi_copy": multiCopy,
+        "extension_icon": extensionIcon,
     };
     if (reset) {
         jsonSettings = {
@@ -884,7 +874,8 @@ function saveSettings(reset = false) {
             "font": 0,
             "auto_close": 1,
             "skin_tone": 0,
-            "multi_copy": 1
+            "multi_copy": 1,
+            "extension_icon": 0,
         };
     }
     browserAgentSettings.storage.sync.set({"settings": jsonSettings}, function () {
@@ -897,7 +888,7 @@ function saveSettings(reset = false) {
     setSkinToneEmojis();
 }
 
-function setVariablesFromSettings(resize_popup_ui = false) {
+function setVariablesFromSettings(resize_popup_ui = false, focus_search_box = false) {
     let themeElement = document.getElementById("theme-selected");
     let columnsElement = document.getElementById("columns-selected");
     let rowsElement = document.getElementById("rows-selected");
@@ -906,6 +897,7 @@ function setVariablesFromSettings(resize_popup_ui = false) {
     let autoClosePopupElement = document.getElementById("close-popup-after-copied-selected");
     let skinToneElement = document.getElementById("skin-tone-selected");
     let multiCopyElement = document.getElementById("multi-copy-selected");
+    let extensionIconElement = document.getElementById("extension-icon-selected");
 
     let jsonSettings = {
         "theme": 0,
@@ -915,7 +907,8 @@ function setVariablesFromSettings(resize_popup_ui = false) {
         "font": 0,
         "auto_close": 1,
         "skin_tone": 0,
-        "multi_copy": 1
+        "multi_copy": 1,
+        "extension_icon": 0,
     };
 
     let nameOfSetting = "settings";
@@ -933,6 +926,7 @@ function setVariablesFromSettings(resize_popup_ui = false) {
         autoClosePopupElement.selectedIndex = jsonSettings.auto_close;
         skinToneElement.selectedIndex = jsonSettings.skin_tone;
         multiCopyElement.selectedIndex = jsonSettings.multi_copy;
+        extensionIconElement.selectedIndex = jsonSettings.extension_icon;
 
         theme = themeElement.value.toLowerCase();
         max_columns = columnsElement.value;
@@ -965,6 +959,9 @@ function setVariablesFromSettings(resize_popup_ui = false) {
             default:
                 size_emojis = 40;
         }
+        extension_icon_selected = extensionIconElement.selectedIndex;
+
+        setExtensionIcon("../img/extension-icons/" + extension_icons[extension_icon_selected] + ".png");
 
         setFontFamily();
 
@@ -975,6 +972,10 @@ function setVariablesFromSettings(resize_popup_ui = false) {
             resetAndSetTitle();
             generateEmojis(1);
         }
+
+        if (focus_search_box) {
+            focusSearchBox();
+        }
     })
 }
 
@@ -1020,6 +1021,7 @@ function setTheme() {
     removeThemeClassId("multi-copy-selected", "-select");
     removeThemeClassId("skin-tone-selected", "-select");
     removeThemeClassId("font-family-selected", "-select");
+    removeThemeClassId("extension-icon-selected", "-select");
     removeThemeClassId("donate-paypal-settings", "-btn-settings-button");
     removeThemeClassId("donate-kofi-settings", "-btn-settings-button");
     removeThemeClassId("donate-liberapay-settings", "-btn-settings-button");
@@ -1038,13 +1040,14 @@ function setTheme() {
     document.getElementById("multi-copy-selected").classList.add(theme + "-select");
     document.getElementById("skin-tone-selected").classList.add(theme + "-select");
     document.getElementById("font-family-selected").classList.add(theme + "-select");
+    document.getElementById("extension-icon-selected").classList.add(theme + "-select");
     document.getElementById("save-data-settings").classList.add(theme + "-btn-settings-button");
     document.getElementById("reset-data-settings").classList.add(theme + "-btn-settings-button");
     document.getElementById("donate-paypal-settings").classList.add(theme + "-btn-settings-button");
     document.getElementById("donate-kofi-settings").classList.add(theme + "-btn-settings-button");
     document.getElementById("donate-liberapay-settings").classList.add(theme + "-btn-settings-button");
 
-    for (let n = 0; n < 7; n++) {
+    for (let n = 0; n < 8; n++) {
         removeThemeClassClass("subsection-settings", n, "-subsection-settings");
         document.getElementsByClassName("subsection-settings")[n].classList.add(theme + "-subsection-settings");
     }
@@ -1110,6 +1113,22 @@ function selectSkinToneButton(index) {
     document.getElementsByClassName("skin-tone-button")[index].classList.add("skin-tone-button-selected");
 }
 
+function selectExtensionIconButton(index) {
+    document.getElementsByClassName("extension-icon-button")[0].classList.remove("skin-tone-button-selected"); //extension-icon-1
+    document.getElementsByClassName("extension-icon-button")[1].classList.remove("skin-tone-button-selected"); //extension-icon-2
+    document.getElementsByClassName("extension-icon-button")[2].classList.remove("skin-tone-button-selected"); //extension-icon-3
+    document.getElementsByClassName("extension-icon-button")[3].classList.remove("skin-tone-button-selected"); //extension-icon-4
+    document.getElementsByClassName("extension-icon-button")[4].classList.remove("skin-tone-button-selected"); //extension-icon-5
+    document.getElementsByClassName("extension-icon-button")[5].classList.remove("skin-tone-button-selected"); //extension-icon-6
+    document.getElementsByClassName("extension-icon-button")[6].classList.remove("skin-tone-button-selected"); //extension-icon-7
+    document.getElementsByClassName("extension-icon-button")[7].classList.remove("skin-tone-button-selected"); //extension-icon-8
+    document.getElementsByClassName("extension-icon-button")[8].classList.remove("skin-tone-button-selected"); //extension-icon-9
+    document.getElementsByClassName("extension-icon-button")[9].classList.remove("skin-tone-button-selected"); //extension-icon-10
+    document.getElementsByClassName("extension-icon-button")[10].classList.remove("skin-tone-button-selected"); //extension-icon-11
+
+    document.getElementsByClassName("extension-icon-button")[index].classList.add("skin-tone-button-selected");
+}
+
 function selectYesNoAutoClose(index) {
     selectYesNoButton("auto-close-button", index)
 }
@@ -1172,4 +1191,8 @@ function searchForTooltip(emojiToSearch) {
     return tooltipToReturn;
 }
 
+function setExtensionIcon(url) {
+    browserAgentSettings.browserAction.setIcon({path: url});
+}
+
 loaded();

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Emoji",
-  "version": "3.11.2",
+  "version": "3.11.3",
   "description": "It permits just with a single click to copy an emoji. You can also customise the add-on.",
   "icons": {
     "16": "./img/icon-dark-16.png",