Added Thunderbird support

README.md

@@ -5,7 +5,7 @@
 [![Mozilla Add-on users](https://img.shields.io/amo/users/awesome-emoji-picker.svg)](https://addons.mozilla.org/firefox/addon/awesome-emoji-picker/?utm_source=github.com&utm_medium=git&utm_content=badge-users&campaign=github)
 [![Mozilla Add-on stars](https://img.shields.io/amo/stars/awesome-emoji-picker.svg)](https://addons.mozilla.org/firefox/addon/awesome-emoji-picker/reviews/?utm_source=github.com&utm_medium=git&utm_content=badge-stars&campaign=github)
 
-This (Firefox) add-on (WebExtension) gives you a modern emoji picker that you can use to find and select emojis (i.e. the emoticons/smileys you know from messengers such as 😃, 😎 or 🤪). It will be directly copied to your clipboard and/or inserted into the active input on the page, when you choose it.
+This (Firefox and Thunderbird) add-on (WebExtension) gives you a modern emoji picker that you can use to find and select emojis (i.e. the emoticons/smileys you know from messengers such as 😃, 😎 or 🤪). It will be directly copied to your clipboard and/or inserted into the active input on the page, when you choose it.
 
 You can then use the emojis on almost any web page, including your favorite messenger (such as WhatsApp, Telegram, Threema, Signal, Wire etc.), social media (Facebook, Instagram, Twitter, Mastodon etc.) and even e-mails.
 
@@ -21,7 +21,7 @@ It uses up-to-date Emojis and let's you access your Emojis in different styles y
 
 It is based on the awesome [emoji-mart](https://missive.github.io/emoji-mart/). You can test many features there already, before installing it.
 
-This extension only works with Firefox v74 or higher.
+This extension only works with Firefox v87 or higher and Thunderbird v87 or higher.
 
 The development of this add-on was also triggered, because the development of another add-on called [“Emoji Helper” or “Emoji Cheatsheet” stalled](https://github.com/johannhof/emoji-helper/issues/127).
 
@@ -61,12 +61,12 @@ See:
 * Emoji skin tone is adjustable and is remembered.
 * You can also insert the emoji's `:colon:` syntax instead of the Unicode emoji that is used by default.
 * Use the hot key (by default <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Period</kbd>) to quickly access the emoji picker.
-* Integrates into Firefox Sync, so you have all your emojis/settings on all devices.
+* Emojis/settings automatically synced between all browser instances and devices (Firefox only).
 * Adjust the style and many other options to your liking.
 * The size of the whole emoji picker and the emojis itself is also adjustable.
 * Use a colored toolbar icon or a decent monochrome (black/white) one.
-* Follows the [Firefox Photon Design](https://design.firefox.com/photon).
 * It does not violate your privacy and does send data anywhere.
+* Follows the [Firefox](https://design.firefox.com/photon) and [Thunderbird](https://style.thunderbird.net/) Photon Design.
 * Translated in English and German already. [Contribute your own language!](CONTRIBUTING.md#Translations)
 * Compatible with Firefox for Android
 * Settings can be managed by your administrator. (see [issue #4](https://github.com/rugk/awesome-emoji-picker/issues/4))

assets/texts/en/amoDescription.html

@@ -9,7 +9,7 @@
 It will remember your <b>recently used emojis</b> across sites. Additionally it may often be faster than the emoji picker on the website itself.
 
 It is based on the awesome project <a href="https://missive.github.io/emoji-mart/">emoji-mart</a>. You can test many features on the website there already, without installing it.
-This extension only works with Firefox v63 or higher.
+This extension only works with Firefox and Thunderbird v87 or higher.
 
 It has an effective built-in search, so you can use it as an ”emoji cheat sheet”. <b>Find exactly the emoji</b> you wanted to find with your search term!
 
@@ -40,12 +40,12 @@
 <li>Emoji skin tone is adjustable and is remembered.</li>
 <li>You can also insert the emoji's <code>:colon:</code> syntax instead of the Unicode emoji that is used by default.</li>
 <li>Use the hot key (by default <code>Ctrl</code>+<code>Shift</code>+<code>Period</code>) to quickly access the emoji picker.</li>
-<li>Integrates into Firefox Sync, so you have all your emojis/settings on all devices.</li>
+<li>Emojis/settings automatically synced between all browser instances and devices (Firefox only).</li>
 <li>Adjust the style and many other options to your liking.</li>
 <li>The size of the whole emoji picker and the emojis itself is also adjustable.</li>
 <li>Use a colored toolbar icon or a decent monochrome (black/white) one.</li>
-<li>Follows the <a href="https://design.firefox.com/photon">Firefox Photon Design</a>.</li>
 <li>It does not violate your privacy and does send data anywhere.</li>
+<li>Follows the <a href="https://design.firefox.com/photon">Firefox</a> and <a href="https://style.thunderbird.net/">Thunderbird</a> Photon Design.</li>
 <li>Compatible with Firefox for Android</li>
 <li>Translated into several language already. <a href="https://github.com/rugk/awesome-emoji-picker/blob/master/CONTRIBUTING.md#Translations">You contribute your own language!</a></li>
 <li>Settings can be managed by your administrator.</li>

scripts/manifests/thunderbirdmanifest.json

@@ -0,0 +1,69 @@
+{
+  "manifest_version": 2,
+  "name": "__MSG_extensionName__",
+  "short_name": "__MSG_extensionNameShort__",
+  "version": "0.9.1",
+  "author": "rugk, Teal Dulcet",
+
+  "description": "__MSG_extensionDescription__",
+  "homepage_url": "https://github.com/rugk/awesome-emoji-picker",
+
+
+  "compose_action": {
+    "browser_style": true,
+    "default_area": "formattoolbar",
+    "default_icon": "icons/fa-grin-dark.svg",
+    "default_title": "__MSG_browserActionButtonTitle__",
+    "default_popup": "popup/index.html",
+    "theme_icons": [
+      {
+        "dark": "icons/fa-grin-dark.svg",
+        "light": "icons/fa-grin-light.svg",
+        "size": 32
+      }
+    ]
+  },
+
+  "options_ui": {
+    "page": "options/options.html",
+    "browser_style": true
+  },
+
+  "background": {
+    "page": "background/background.html"
+  },
+  "commands": {
+    "_execute_compose_action": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+Period"
+      },
+      "description": "__MSG_commandOpenPopup__"
+    }
+  },
+
+  "content_security_policy": "default-src 'self'",
+  "icons": {
+    "32": "icons/icon_32.png",
+    "64": "icons/icon_64.png",
+    "128": "icons/icon_128.png"
+  },
+  "default_locale": "en",
+
+  "permissions": [
+    "storage",
+    "tabs",
+    "compose",
+    "menus"
+  ],
+
+  "optional_permissions": [
+    "clipboardWrite"
+  ],
+
+  "applications": {
+    "gecko": {
+      "id": "[email protected]",
+      "strict_min_version": "87.0"
+    }
+  }
+}

src/background/modules/OmniboxSearch.js

@@ -201,6 +201,11 @@ export async function triggerOmnixboxSearch(text, disposition) {
  * @throws TypeError
  */
 async function toggleEnabledStatus(toEnable) {
+    // Thunderbird
+    if (typeof messenger !== "undefined") {
+        return;
+    }
+
     // if we do not have the permission for clipboard, and need it for settings, force-disable feature
     if (!(await browser.permissions.contains(CLIPBOARD_WRITE_PERMISSION))) {
         const emojiSearch = await AddonSettings.get("emojiSearch");

src/common/modules/BrowserCompat.js

@@ -0,0 +1,27 @@
+/**
+ * Helper functions useful for ensuring browser compatibility.
+ *
+ * @public
+ * @module BrowserCompat
+ */
+
+/**
+ * Returns a value based on what browser this is running in.
+ *
+ * @private
+ * @param  {Object} switchBrowser an object with values to return per browser
+ * @returns {string}
+ */
+export async function getBrowserValue(switchBrowser) {
+    if (browser.runtime.getBrowserInfo) {
+        const browserInfo = await browser.runtime.getBrowserInfo();
+
+        if (browserInfo.name === "Thunderbird") {
+            return switchBrowser.thunderbird;
+        } else {
+            return switchBrowser.firefox;
+        }
+    } else {
+        return switchBrowser.chrome;
+    }
+}

src/common/modules/IconHandler.js

@@ -22,27 +22,30 @@ function setPopupIcon(icon) {
         throw new TypeError(`invalid parameter: ${icon}`);
     }
 
+    // Thunderbird
+    const browserAction = typeof messenger !== "undefined" ? browser.composeAction : browser.browserAction;
+
     // ignore request if API is not available
-    if (browser.browserAction.setIcon === undefined) {
+    if (browserAction.setIcon === undefined) {
         return Promise.resolve();
     }
 
     if (icon === null || icon === undefined) {
-        return browser.browserAction.setIcon({path: null});
+        return browserAction.setIcon({path: null});
     }
 
     // set colored icon
     if (icon === "colored") {
         // WTF: For whatever reason, these paths need to be absolute...
-        return browser.browserAction.setIcon({path: {
+        return browserAction.setIcon({path: {
             "16": "/icons/icon_32.png",
             "32": "/icons/icon_32.png",
             "64": "/icons/icon_64.png",
             "128": "/icons/icon_128.png"
         }});
     }
 
-    return browser.browserAction.setIcon({path: `/icons/fa-grin-${icon}.svg`});
+    return browserAction.setIcon({path: `/icons/fa-grin-${icon}.svg`});
 }
 
 /**

src/common/modules/data/Tips.js

@@ -76,6 +76,11 @@
 
 import {isMobile} from "../MobileHelper.js";
 import {userSpeaksLocaleNotYetTranslated} from "../LanguageHelper.js";
+import { getBrowserValue } from "../BrowserCompat.js";
+
+// Thunderbird
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1641573
+const IS_THUNDERBIRD = typeof messenger !== "undefined";
 
 const DEFAULT_POPUP_HOT_KEY = "Ctrl+Shift+Period";
 
@@ -100,7 +105,15 @@ const tipArray = [
         text: "tipYouLikeAddon",
         actionButton: {
             text: "tipYouLikeAddonButton",
-            action: "https://addons.mozilla.org/firefox/addon/awesome-emoji-picker/reviews/"
+            action: ""
+        },
+        showTip: async (tipSpec, thisTipConfig) => {
+            tipSpec.actionButton.action = await getBrowserValue({
+                firefox: "https://addons.mozilla.org/firefox/addon/awesome-emoji-picker/reviews/?utm_source=addon-tips&utm_medium=addon&utm_content=addon-tips-tipYouLikeAddon&utm_campaign=addon-tips",
+                thunderbird: "https://addons.thunderbird.net/thunderbird/addon/awesome-emoji-picker/reviews/?utm_source=addon-tips&utm_medium=addon&utm_content=addon-tips-tipYouLikeAddon&utm_campaign=addon-tips",
+                chrome: "https://chrome.google.com/webstore/detail/awesome-emoji-picker/?utm_source=addon-tips&utm_medium=addon&utm_content=addon-tips-tipYouLikeAddon&utm_campaign=addon-tips",
+            });
+            return null;
         }
     },
     {
@@ -118,7 +131,8 @@ const tipArray = [
 
             // find command
             const allCommands = await browser.commands.getAll();
-            const popupOpenCommand = allCommands.find((command) => command.name === "_execute_browser_action");
+            const commandToFind = IS_THUNDERBIRD ? "_execute_compose_action" : "_execute_browser_action";
+            const popupOpenCommand = allCommands.find((command) => command.name === commandToFind);
 
             // if shortcut is modified, do not show tip
             if (popupOpenCommand.shortcut !== DEFAULT_POPUP_HOT_KEY) {

src/options/modules/CustomOptionTriggers.js

@@ -265,11 +265,11 @@ function applyEmojiSearch(optionValue, option, event = {}) {
     if (optionValue.enabled) {
         document.getElementById("searchCopyAction").disabled = false;
         document.getElementById("emojipediaAction").disabled = false;
-        document.getElementById("searchBarDemo").removeAttribute("disabled");
+        document.getElementById("searchBarDemo").disabled = false;
     } else {
         document.getElementById("searchCopyAction").disabled = true;
         document.getElementById("emojipediaAction").disabled = true;
-        document.getElementById("searchBarDemo").setAttribute("disabled", "");
+        document.getElementById("searchBarDemo").disabled = true;
     }
 
     // trigger update for current session
@@ -342,7 +342,12 @@ export async function registerTrigger() {
     AutomaticSettings.Trigger.registerSave("popupIconColored", applyPopupIconColor);
     AutomaticSettings.Trigger.registerSave("emojiPicker", updatePerLineStatus);
     AutomaticSettings.Trigger.registerSave("emojiPicker", updateEmojiPerLineMaxViaEmojiSize);
-    AutomaticSettings.Trigger.registerSave("emojiSearch", applyEmojiSearch);
+    // Thunderbird
+    if (typeof messenger !== "undefined") {
+        document.getElementById("browser").style.display = "none";
+    } else {
+        AutomaticSettings.Trigger.registerSave("emojiSearch", applyEmojiSearch);
+    }
 
     // handle loading of options correctly
     AutomaticSettings.Trigger.registerAfterLoad(AutomaticSettings.Trigger.RUN_ALL_SAVE_TRIGGER);

src/options/modules/ManualAdjustments.js

@@ -0,0 +1,19 @@
+import { getBrowserValue } from "/common/modules/BrowserCompat.js";
+
+/**
+ * Initializes module.
+ *
+ * Applies the adjustments.
+ *
+ * @returns {Promise}
+ */
+export function init() {
+    getBrowserValue({
+        firefox: "https://addons.mozilla.org/firefox/addon/unicodify-text-transformer/?utm_source=awesomeEmojiPicker-addon&utm_medium=addon&utm_content=awesomeEmojiPicker-addon-settings-inline&utm_campaign=awesomeEmojiPicker-addon-settings-inline",
+        thunderbird: "https://addons.thunderbird.net/thunderbird/addon/unicodify-text-transformer/?utm_source=awesomeEmojiPicker-addon&utm_medium=addon&utm_content=awesomeEmojiPicker-addon-settings-inline&utm_campaign=awesomeEmojiPicker-addon-settings-inline",
+        chrome: "https://chrome.google.com/webstore/detail/unicodify-text-transformer/?utm_source=awesomeEmojiPicker-addon&utm_medium=addon&utm_content=awesomeEmojiPicker-addon-settings-inline&utm_campaign=awesomeEmojiPicker-addon-settings-inline",
+    }).then((browserUrl) => {
+        // Uncomment this line after https://github.com/rugk/awesome-emoji-picker/pull/93 is merged.
+        // document.getElementById("link-unicodify").href = browserUrl;
+    });
+}

src/options/options.html

@@ -161,7 +161,7 @@ <h1 data-i18n="__MSG_titleBehaviour__">Behaviour</h1>
 				</ul>
 			</section>
 
-			<section>
+			<section id="browser">
 				<h1 data-i18n="__MSG_titleSearchBar__">Search bar</h1>
 
 				<ul>

src/options/options.js

@@ -11,12 +11,14 @@ import * as AddonSettings from "/common/modules/AddonSettings/AddonSettings.js";
 import * as AutomaticSettings from "/common/modules/AutomaticSettings/AutomaticSettings.js";
 import * as CustomOptionTriggers from "./modules/CustomOptionTriggers.js";
 import * as ColorSchemeModeHelper from "./modules/ColorSchemeModeHelper.js";
+import * as ManualAdjustments from "./modules/ManualAdjustments.js";
 
 // init modules
 CustomOptionTriggers.registerTrigger();
 AutomaticSettings.setDefaultOptionProvider(AddonSettings.getDefaultValue);
 AutomaticSettings.init();
 ColorSchemeModeHelper.init();
+ManualAdjustments.init();
 
 RandomTips.init(tips).then(() => {
     RandomTips.setContext("options");