diff --git a/.gitignore b/.gitignore
index a3a093a..015e043 100644
--- a/.gitignore
+++ b/.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
diff --git a/.gitmodules b/.gitmodules
index 4509f58..57c27e8 100644
--- a/.gitmodules
+++ b/.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
diff --git a/assets/texts/amoreviewnote.txt b/assets/texts/amoreviewnote.txt
index 42f0162..a68b748 100644
--- a/assets/texts/amoreviewnote.txt
+++ b/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.
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..d18f2be
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+ "name": "awesome-emoji-picker",
+ "lockfileVersion": 2,
+ "requires": true,
+ "packages": {}
+}
diff --git a/scripts/make.sh b/scripts/make.sh
index fbb9b3c..64da9e6 100755
--- a/scripts/make.sh
+++ b/scripts/make.sh
@@ -26,7 +26,7 @@ zip -r -FS "../build/$EXTENSION_NAME.xpi" ./* -x "tests/*" -x "**/tests/*" \
-x "**/.git" -x "**/.gitignore" -x "**/.gitmodules" -x "**/.gitkeep" \
-x "**/.eslintrc" \
-x "**/package.json" -x "**/package-lock.json" -x "**/webpack.config.js" \
- -x "popup/lib/emoji-mart-embed/src.js" \
+ -x "node_modules/@emoji-mart/data" \
-x "**/.editorconfig" \
-x "**/.github/*"
diff --git a/src/common/common.css b/src/common/common.css
index f1fe89c..8ec08f4 100644
--- a/src/common/common.css
+++ b/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");
\ No newline at end of file
diff --git a/src/common/lib/emoji-mart-embed b/src/common/lib/emoji-mart-embed
index e7ac67e..3b84f7f 160000
--- a/src/common/lib/emoji-mart-embed
+++ b/src/common/lib/emoji-mart-embed
@@ -1 +1 @@
-Subproject commit e7ac67ea6f6d4fcf169b42eabe72d93d65b55b12
+Subproject commit 3b84f7ffdeb1e6a14487b192aa56b8d86964de84
diff --git a/src/common/modules/AddonSettings b/src/common/modules/AddonSettings
index b5e57fc..7855b9d 160000
--- a/src/common/modules/AddonSettings
+++ b/src/common/modules/AddonSettings
@@ -1 +1 @@
-Subproject commit b5e57fc456395613f6e1e5825c0ab670528eb552
+Subproject commit 7855b9dbeb6cbb8861f2d6b5ae916bd756f525ea
diff --git a/src/common/modules/AutomaticSettings b/src/common/modules/AutomaticSettings
index f1d239c..fce7d28 160000
--- a/src/common/modules/AutomaticSettings
+++ b/src/common/modules/AutomaticSettings
@@ -1 +1 @@
-Subproject commit f1d239c2b1adfeeff4161c65c4e967bf6e6e78fc
+Subproject commit fce7d28ce753354da18cad9cfe71c729ec46d424
diff --git a/src/common/modules/BrowserCommunication b/src/common/modules/BrowserCommunication
index 6d66b4e..b0125e5 160000
--- a/src/common/modules/BrowserCommunication
+++ b/src/common/modules/BrowserCommunication
@@ -1 +1 @@
-Subproject commit 6d66b4e34c9d209bf72127f6128c11ae473b68f2
+Subproject commit b0125e55f3aa8631bf3224e9389a51879e0ace96
diff --git a/src/common/modules/CommonCss b/src/common/modules/CommonCss
new file mode 160000
index 0000000..bdd81cc
--- /dev/null
+++ b/src/common/modules/CommonCss
@@ -0,0 +1 @@
+Subproject commit bdd81cc7d19caeb324c9ccbbde19c624bf8429e2
diff --git a/src/common/modules/Localizer b/src/common/modules/Localizer
index 971b54a..da1f4c3 160000
--- a/src/common/modules/Localizer
+++ b/src/common/modules/Localizer
@@ -1 +1 @@
-Subproject commit 971b54a9f0761070644ad9fe7b93be80f0080fbf
+Subproject commit da1f4c3edc616655a360b2a79b79514d8c077b55
diff --git a/src/common/modules/Logger b/src/common/modules/Logger
index c628352..b60c36e 160000
--- a/src/common/modules/Logger
+++ b/src/common/modules/Logger
@@ -1 +1 @@
-Subproject commit c628352e5adadce6669bb001df03bd832e89cd3a
+Subproject commit b60c36e7e9b9bdaa69dbb33dd89e288021085f31
diff --git a/src/common/modules/MessageHandler b/src/common/modules/MessageHandler
index f7c6095..a2aa9f4 160000
--- a/src/common/modules/MessageHandler
+++ b/src/common/modules/MessageHandler
@@ -1 +1 @@
-Subproject commit f7c60958ff69b09f4eff8662562e7d2a1d1f0f78
+Subproject commit a2aa9f477e4dfa9a12b97c7bb4088255e381a191
diff --git a/src/common/modules/PermissionRequest b/src/common/modules/PermissionRequest
index 451d517..9782593 160000
--- a/src/common/modules/PermissionRequest
+++ b/src/common/modules/PermissionRequest
@@ -1 +1 @@
-Subproject commit 451d517b56d2cfbccf242ad4ff72077286af3496
+Subproject commit 97825931f1893968b8da13adf4513e7922fff559
diff --git a/src/common/modules/RandomTips b/src/common/modules/RandomTips
index 63ee239..0eaaf04 160000
--- a/src/common/modules/RandomTips
+++ b/src/common/modules/RandomTips
@@ -1 +1 @@
-Subproject commit 63ee23925a499a8dea529ab113a6583a4b1279fe
+Subproject commit 0eaaf040f21526edb424a40af3fd4c9cbadb3beb
diff --git a/src/package-lock.json b/src/package-lock.json
new file mode 100644
index 0000000..ef630b4
--- /dev/null
+++ b/src/package-lock.json
@@ -0,0 +1,39 @@
+{
+ "name": "awesome-emoji-picker",
+ "version": "2.0.0",
+ "lockfileVersion": 2,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "awesome-emoji-picker",
+ "version": "2.0.0",
+ "license": "ISC",
+ "dependencies": {
+ "@emoji-mart/data": "^1.0.1",
+ "emoji-mart": "^5.0.0"
+ }
+ },
+ "node_modules/@emoji-mart/data": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.0.3.tgz",
+ "integrity": "sha512-SwxtfLOPiis9iXwWLjZHpUIUwYV/ghfBG6jpVP2HZgCt/dE8Q4r1RQg1Y5TyYBYKk8N5RKuLWJi1DNrEUIWj+A=="
+ },
+ "node_modules/emoji-mart": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.2.0.tgz",
+ "integrity": "sha512-0ZTIbemlRjEV0ydF8lDqho2N5l4M7qdNFWGp+w3v32D+F6+DYsmuaZr/k4O79EBvqlDx6rx+B8jeaH2qa0ZNDQ=="
+ }
+ },
+ "dependencies": {
+ "@emoji-mart/data": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.0.3.tgz",
+ "integrity": "sha512-SwxtfLOPiis9iXwWLjZHpUIUwYV/ghfBG6jpVP2HZgCt/dE8Q4r1RQg1Y5TyYBYKk8N5RKuLWJi1DNrEUIWj+A=="
+ },
+ "emoji-mart": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.2.0.tgz",
+ "integrity": "sha512-0ZTIbemlRjEV0ydF8lDqho2N5l4M7qdNFWGp+w3v32D+F6+DYsmuaZr/k4O79EBvqlDx6rx+B8jeaH2qa0ZNDQ=="
+ }
+ }
+}
diff --git a/src/package.json b/src/package.json
new file mode 100644
index 0000000..3abf693
--- /dev/null
+++ b/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"
+ }
+}
diff --git a/src/popup/index.html b/src/popup/index.html
index e3725ff..c65b2c5 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -4,14 +4,12 @@
-
+
-
-