[WIP] Upgrade to Emoji-Mart v5

.gitignore

@@ -4,6 +4,3 @@ node_modules/
 
 # do not commit emoji images
 src/popup/img/emoji-images/*.png
-
-# private AMO stuff
-assets/texts/en/amo-review.txt

.gitmodules

@@ -37,3 +37,6 @@
 [submodule "src/common/modules/EnvironmentDetector"]
 	path = src/common/modules/EnvironmentDetector
 	url = https://github.com/TinyWebEx/EnvironmentDetector
+[submodule "src/common/modules/CommonCss"]
+	path = src/common/modules/CommonCss
+	url = https://github.com/TinyWebEx/CommonCss

assets/texts/amoreviewnote.txt

@@ -1,4 +1,3 @@
-The submitted source code is just for embedding of emoji-mart, see https://github.com/rugk/emoji-mart-embed/ for the whole source online.
-You can build that separately and include the whole resulting git repo in the add-on. All other parts of the add-on are unminified/untranspiled (JavaScript) files.
+The submitted source code includes emoji-mart as a dependency: https://github.com/missive/emoji-mart
 
 The whole add-on source is also available at https://github.com/rugk/awesome-emoji-picker.

src/common/common.css

@@ -1,257 +1 @@
-@import url("./variables.css");
-
-body {
-  direction: __MSG_@@bidi_dir__;
-}
-
-/* https://design.firefox.com/photon/components/links.html */
-a {
-  color: var(--blue-60);
-  text-decoration: none;
-}
-
-a:focus {
-  border-radius: 4px;
-  box-shadow: 0 0 0 2px var(--blue-50), 0 0 0 6px var(--blue-50-a30);
-}
-
-a:hover, a:active {
-  text-decoration: underline;
-}
-
-a:active {
-  color: var(--blue-70);
-}
-
-/* external link symbol */
-/* currently disabled, because it is not clear what an external link is, in our case */
-/*a:not([class])[href*="//"]::after {
-  background-image: url(/common/img/open-in-new.svg);
-  background-repeat: no-repeat;
-  background-size: 16px 16px;
-  content: "";
-  display: inline-block;
-  height: 16px;
-  margin: -.3rem .15rem 0 .25rem;
-  vertical-align: middle;
-  width: 16px;
-}*/
-
-/* small classes in order to avoid inline CSS */
-.invisible {
-  display: none !important;
-}
-
-.message-container {
-  position: relative;
-}
-
-/* buttons https://design.firefox.com/photon/components/buttons.html */
-.micro-button {
-  min-height: 24px;
-  height: auto;
-  border-radius: 2px;
-
-  padding-left: 8px;
-  padding-right: 8px;
-
-  /* not documented, but looks ugly otherwise */
-  padding-top: 2px;
-  padding-bottom: 2px;
-
-  box-sizing: content-box;
-
-  /* do not break over multiple lines */
-  /* white-space: nowrap; */
-  height: auto; /* currently, we rather prefer breaking until https://github.com/rugk/offline-qr-code/issues/12 is done */
-}
-
-/* use light color for dark backgrounds */
-.micro-button:hover.success,
-.micro-button:active.success,
-.micro-button:hover.warning,
-.micro-button:active.warning,
-.micro-button:hover.error,
-.micro-button:active.error {
-  color: var(--white-100);
-}
-
-.micro-button.info {
-  background-color: var(--grey-90-a10);
-}
-.micro-button:hover.info {
-  background-color: var(--grey-90-a20);
-}
-.micro-button:active.info {
-  background-color: var(--grey-90-a30);
-}
-
-.micro-button.success {
-  background-color: var(--green-60);
-}
-.micro-button:hover.success {
-  background-color: var(--green-70);
-}
-.micro-button:active.success {
-  background-color: var(--green-80);
-}
-
-.micro-button.warning {
-  background-color: var(--yellow-60);
-}
-.micro-button:hover.warning {
-  background-color: var(--yellow-70);
-}
-.micro-button:active.warning {
-  background-color: var(--yellow-80);
-}
-
-.micro-button.error {
-  background-color: var(--red-70);
-  color: var(--white-100);
-}
-.micro-button:hover.error {
-  background-color: var(--red-80);
-}
-.micro-button:active.error {
-  background-color: var(--red-90);
-}
-
-.micro-button:focus {
-  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3)
-}
-
-/* message box */
-/* follows https://design.firefox.com/photon/components/message-bars.html */
-.message-box {
-  padding: 4px;
-
-  border-radius: 4px;
-
-  /* use whole width */
-  width: 100%;
-  min-height: 32px;
-
-  /* make errors selectable, so users can copy them */
-  -moz-user-select: text;
-  cursor: text;
-
-  /* multiline */
-  hypens: auto;
-  overflow-wrap: break-word;
-
-  /* center-vertically */
-  display: flex;
-  align-items: center;
-
-  z-index: 2;
-
-  /* fade-in transition */
-  /* follow https://design.firefox.com/photon/motion/duration-and-easing.html */
-  opacity: 1;
-  max-height: 100px;
-
-  transition: opacity 150ms cubic-bezier(.07,.95,0,1),
-              max-height 200ms cubic-bezier(.07,.95,0,1);
-}
-.message-box.fade-hide {
-  max-height: 0px;
-  opacity: 0;
-  min-height: 0px;
-}
-
-/* add margin when messages are stacked on each other */
-.message-box:not(.invisible) ~ .message-box:not(.invisible) {
-  margin-top: 8px;
-}
-
-.error {
-  color: var(--white-100);
-  background-color: var(--red-60);
-}
-
-.info {
-  color: var(--grey-90);
-  background-color: var(--grey-20);
-}
-
-.success {
-  color: var(--green-90);
-  background-color: var(--green-50);
-}
-
-.warning {
-  color: var(--yellow-90);
-  background-color: var(--yellow-50);
-}
-
-/* message box action button */
-.message-action-button {
-  margin-left: 8px;
-
-  /* center vertially */
-  margin-top: auto;
-  margin-bottom: auto;
-
-  /* some minimum margin to dismiss button or similar */
-  margin-right: 4px;
-
-  border: 0;
-  color: var(--grey-90);
-
-  cursor: pointer;
-}
-
-/* icons for the message boxes */
-.message-box::before {
-  display: inline-block;
-
-  /* fixed size */
-  background-size: 16px 16px;
-  width: 16px;
-  height: 16px;
-  min-width: 16px;
-  min-height: 16px;
-
-  content: "";
-  margin: 4px;
-}
-
-.error::before {
-  background-image: url('/common/img/error-white.svg');
-}
-.info::before {
-  background-image: url('/common/img/info-dark.svg');
-}
-.success::before {
-  background-image: url('/common/img/check.svg');
-}
-.warning::before {
-  background-image: url('/common/img/warning-dark.svg');
-}
-
-.icon-dismiss {
-  box-sizing: content-box;
-  padding: 2px;
-
-  width: 24px;
-  height: 24px;
-
-  margin-left: auto;
-  cursor: pointer;
-
-  /* some animation on hover */
-  transition: background-color 150ms cubic-bezier(.07,.95,0,1);
-}
-.icon-dismiss:hover {
-  background-color: var(--grey-90-a10);
-  border-radius: 2px;
-}
-.icon-dismiss:active {
-  background-color: var(--grey-90-a20);
-  border-radius: 2px;
-}
-.icon-dismiss:focus {
-  box-shadow: 0 0 0 1px var(--blue-50) inset, 0 0 0 1px var(--blue-50), 0 0 0 4px var(--blue-50-a30);
-  border-radius: 2px;
-}
+@import url("./modules/CommonCss/common.css");

src/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "awesome-emoji-picker",
+  "version": "2.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rugk/awesome-emoji-picker.git"
+  },
+  "author": "rugk",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/rugk/awesome-emoji-picker/issues"
+  },
+  "homepage": "https://github.com/rugk/awesome-emoji-picker#readme",
+  "dependencies": {
+    "@emoji-mart/data": "^1.0.1",
+    "emoji-mart": "^5.0.0"
+  }
+}

src/popup/module/EmojiPicker.js

@@ -5,6 +5,8 @@
  */
 
 import * as EmojiSelect from "./EmojiSelect.js";
+import data from "/node_modules/@emoji-mart/data";
+import * as EmojiMart from "/node_modules/emoji-mart/dist/index.js";
 
 let emojiPicker = null;
 
@@ -107,10 +109,6 @@ export function init(settings) {
 
     console.debug("Using these emoji-mart settings:", initProperties);
 
-    const promiseCreateElement = window.emojiMart.definePicker("emoji-picker", initProperties);
-
-    return promiseCreateElement.then(() => {
-        emojiPicker = document.createElement("emoji-picker");
-        document.body.appendChild(emojiPicker);
-    });
+    const emojiPicker = new EmojiMart.Picker({ ...initProperties, data: data });
+    document.body.appendChild(emojiPicker);
 }