rugk · rugk · May 7, 2022 · May 7, 2022 · May 26, 2022 · May 26, 2022
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -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");
diff --git a/src/common/lib/emoji-mart-embed b/src/common/lib/emoji-mart-embed
diff --git a/src/common/modules/AddonSettings b/src/common/modules/AddonSettings
diff --git a/src/common/modules/AutomaticSettings b/src/common/modules/AutomaticSettings
diff --git a/src/common/modules/BrowserCommunication b/src/common/modules/BrowserCommunication
diff --git a/src/common/modules/CommonCss b/src/common/modules/CommonCss
diff --git a/src/common/modules/Localizer b/src/common/modules/Localizer
diff --git a/src/common/modules/Logger b/src/common/modules/Logger
diff --git a/src/common/modules/MessageHandler b/src/common/modules/MessageHandler
diff --git a/src/common/modules/PermissionRequest b/src/common/modules/PermissionRequest
diff --git a/src/common/modules/RandomTips b/src/common/modules/RandomTips
diff --git a/src/package-lock.json b/src/package-lock.json
diff --git a/src/package.json 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
@@ -4,13 +4,11 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="stylesheet" href="../common/common.css">
-		<link rel="stylesheet" href="/common/lib/emoji-mart-embed/dist/emoji-mart.css">
+		<!-- <link rel="stylesheet" href="/common/lib/emoji-mart-embed/dist/emoji-mart.css"> -->
 		<link rel="stylesheet" href="index.css"> <!-- load later then emoji-mart so overwriting is possible -->
 
 		<script defer src="../common/common.js" type="module" charset="utf-8"></script>
 		<script defer src="index.js" type="module" charset="utf-8"></script>
-		<!-- we need to load emoji-mart last, so autoFocus works -->
-		<script defer src="/common/lib/emoji-mart-embed/dist/emoji-mart.js"></script>
 	</head>
 	<body>
 		<aside class="message-container">

diff --git a/src/popup/lib/combined-data.js b/src/popup/lib/combined-data.js