Revert "Merge branch 'tz-reorganise-digests-json' into 'master'"

Reverts the loading of emojis and its images to move forward with RC

8 files changed, 99 insertions, 205 deletions

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index 3826ecd1ac1..743f11625bc 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -619,18 +619,10 @@ export class AwardsHandler {
 let awardsHandlerPromise = null;
 export default function loadAwardsHandler(reload = false) {
   if (!awardsHandlerPromise || reload) {
-    awardsHandlerPromise = new Promise((resolve, reject) => {
-      import(/* webpackChunkName: 'emoji' */ './emoji')
-        .then(Emoji => {
-          Emoji.initEmojiMap()
-            .then(() => {
-              const awardsHandler = new AwardsHandler(Emoji);
-              awardsHandler.bindEvents();
-              resolve(awardsHandler);
-            })
-            .catch(() => reject);
-        })
-        .catch(() => reject);
+    awardsHandlerPromise = import(/* webpackChunkName: 'emoji' */ './emoji').then(Emoji => {
+      const awardsHandler = new AwardsHandler(Emoji);
+      awardsHandler.bindEvents();
+      return awardsHandler;
     });
   }
   return awardsHandlerPromise;
diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js
index 9034563d9b3..d1d75658181 100644
--- a/app/assets/javascripts/behaviors/gl_emoji.js
+++ b/app/assets/javascripts/behaviors/gl_emoji.js
@@ -1,74 +1,47 @@
 import 'document-register-element';
 import isEmojiUnicodeSupported from '../emoji/support';
-import { initEmojiMap, getEmojiInfo, emojiFallbackImageSrc, emojiImageTag } from '../emoji';
 
 class GlEmoji extends HTMLElement {
   constructor() {
     super();
 
-    let emojiUnicode = this.textContent.trim();
-    const { fallbackSpriteClass, fallbackSrc, forceFallback } = this.dataset;
-    let { name, unicodeVersion } = this.dataset;
-
-    initEmojiMap()
-      .then(() => {
-        if (!unicodeVersion) {
-          const emojiInfo = getEmojiInfo(name);
-
-          if (emojiInfo) {
-            if (name !== emojiInfo.name) {
-              ({ name } = emojiInfo);
-              this.dataset.name = emojiInfo.name;
-            }
-            unicodeVersion = emojiInfo.u;
-            this.dataset.uni = unicodeVersion;
-
-            if (forceFallback === 'true' && !fallbackSpriteClass) {
-              this.innerHTML = emojiImageTag(name, emojiFallbackImageSrc(name));
-            } else {
-              emojiUnicode = emojiInfo.e;
-              this.innerHTML = emojiInfo.e;
-            }
-
-            this.title = emojiInfo.d;
-          }
+    const emojiUnicode = this.textContent.trim();
+    const { name, unicodeVersion, fallbackSrc, fallbackSpriteClass } = this.dataset;
+
+    const isEmojiUnicode =
+      this.childNodes &&
+      Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
+    const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
+    const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
+
+    if (emojiUnicode && isEmojiUnicode && !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)) {
+      // CSS sprite fallback takes precedence over image fallback
+      if (hasCssSpriteFalback) {
+        if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
+          const emojiSpriteLinkTag = document.createElement('link');
+          emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
+          emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
+          document.head.appendChild(emojiSpriteLinkTag);
+          gon.emoji_sprites_css_added = true;
         }
-
-        const isEmojiUnicode =
-          this.childNodes &&
-          Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
-        const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
-        const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
-
-        if (
-          emojiUnicode &&
-          isEmojiUnicode &&
-          !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
-        ) {
-          // CSS sprite fallback takes precedence over image fallback
-          if (hasCssSpriteFalback) {
-            if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
-              const emojiSpriteLinkTag = document.createElement('link');
-              emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
-              emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
-              document.head.appendChild(emojiSpriteLinkTag);
-              gon.emoji_sprites_css_added = true;
+        // IE 11 doesn't like adding multiple at once :(
+        this.classList.add('emoji-icon');
+        this.classList.add(fallbackSpriteClass);
+      } else {
+        import(/* webpackChunkName: 'emoji' */ '../emoji')
+          .then(({ emojiImageTag, emojiFallbackImageSrc }) => {
+            if (hasImageFallback) {
+              this.innerHTML = emojiImageTag(name, fallbackSrc);
+            } else {
+              const src = emojiFallbackImageSrc(name);
+              this.innerHTML = emojiImageTag(name, src);
             }
-            // IE 11 doesn't like adding multiple at once :(
-            this.classList.add('emoji-icon');
-            this.classList.add(fallbackSpriteClass);
-          } else if (hasImageFallback) {
-            this.innerHTML = emojiImageTag(name, fallbackSrc);
-          } else {
-            const src = emojiFallbackImageSrc(name);
-            this.innerHTML = emojiImageTag(name, src);
-          }
-        }
-      })
-      .catch(error => {
-        // Only reject is already handled in initEmojiMap
-        throw error;
-      });
+          })
+          .catch(() => {
+            // do nothing
+          });
+      }
+    }
   }
 }
 
diff --git a/app/assets/javascripts/emoji/index.js b/app/assets/javascripts/emoji/index.js
index b9b3b344524..cd8dff40b88 100644
--- a/app/assets/javascripts/emoji/index.js
+++ b/app/assets/javascripts/emoji/index.js
@@ -1,63 +1,13 @@
 import _ from 'underscore';
-import createFlash from '~/flash';
-import { s__ } from '~/locale';
+import emojiMap from 'emojis/digests.json';
 import emojiAliases from 'emojis/aliases.json';
-import axios from '../lib/utils/axios_utils';
-import csrf from '../lib/utils/csrf';
 
-import AccessorUtilities from '../lib/utils/accessor';
-
-let emojiMap = null;
-let validEmojiNames = null;
-
-export const EMOJI_VERSION = '1';
-const EMOJI_VERSION_LOCALSTORAGE = `EMOJIS_${EMOJI_VERSION}`;
-
-const isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
-
-export function initEmojiMap() {
-  return new Promise((resolve, reject) => {
-    if (emojiMap) {
-      resolve(emojiMap);
-    } else if (isLocalStorageAvailable && window.localStorage.getItem(EMOJI_VERSION_LOCALSTORAGE)) {
-      emojiMap = JSON.parse(window.localStorage.getItem(EMOJI_VERSION_LOCALSTORAGE));
-      validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
-      resolve(emojiMap);
-    } else {
-      // We load the JSON from server
-      const axiosInstance = axios.create();
-
-      // If the static JSON file is on a CDN we don't want to send the default CSRF token
-      if (gon.asset_host) {
-        delete axiosInstance.defaults.headers.common[csrf.headerKey];
-      }
-
-      axiosInstance
-        .get(`${gon.relative_url_root || ''}/-/emojis/${EMOJI_VERSION}/emojis.json`)
-        .then(({ data }) => {
-          emojiMap = data;
-          validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
-          resolve(emojiMap);
-          if (isLocalStorageAvailable) {
-            window.localStorage.setItem(EMOJI_VERSION_LOCALSTORAGE, JSON.stringify(emojiMap));
-          }
-        })
-        .catch(err => {
-          createFlash(s__('Emojis|Something went wrong while loading emojis.'));
-          reject(err);
-        });
-    }
-  });
-}
+export const validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
 
 export function normalizeEmojiName(name) {
   return Object.prototype.hasOwnProperty.call(emojiAliases, name) ? emojiAliases[name] : name;
 }
 
-export function getValidEmojiNames() {
-  return validEmojiNames;
-}
-
 export function isEmojiNameValid(name) {
   return validEmojiNames.indexOf(name) >= 0;
 }
@@ -86,8 +36,8 @@ export function getEmojiCategoryMap() {
     };
     Object.keys(emojiMap).forEach(name => {
       const emoji = emojiMap[name];
-      if (emojiCategoryMap[emoji.c]) {
-        emojiCategoryMap[emoji.c].push(name);
+      if (emojiCategoryMap[emoji.category]) {
+        emojiCategoryMap[emoji.category].push(name);
       }
     });
   }
@@ -108,9 +58,8 @@ export function getEmojiInfo(query) {
 }
 
 export function emojiFallbackImageSrc(inputName) {
-  const { name } = getEmojiInfo(inputName);
-  return `${gon.asset_host || ''}${gon.relative_url_root ||
-    ''}/-/emojis/${EMOJI_VERSION}/${name}.png`;
+  const { name, digest } = getEmojiInfo(inputName);
+  return `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${digest}.png`;
 }
 
 export function emojiImageTag(name, src) {
@@ -119,8 +68,9 @@ export function emojiImageTag(name, src) {
 
 export function glEmojiTag(inputName, options) {
   const opts = { sprite: false, forceFallback: false, ...options };
-  const name = normalizeEmojiName(inputName);
+  const { name, ...emojiInfo } = getEmojiInfo(inputName);
 
+  const fallbackImageSrc = emojiFallbackImageSrc(name);
   const fallbackSpriteClass = `emoji-${name}`;
 
   const classList = [];
@@ -129,19 +79,24 @@ export function glEmojiTag(inputName, options) {
     classList.push(fallbackSpriteClass);
   }
   const classAttribute = classList.length > 0 ? `class="${classList.join(' ')}"` : '';
-
   const fallbackSpriteAttribute = opts.sprite
     ? `data-fallback-sprite-class="${fallbackSpriteClass}"`
     : '';
-  const forceFallbackAttribute = opts.forceFallback ? 'data-force-fallback="true"' : '';
+  let contents = emojiInfo.moji;
+  if (opts.forceFallback && !opts.sprite) {
+    contents = emojiImageTag(name, fallbackImageSrc);
+  }
 
   return `
     <gl-emoji
       ${classAttribute}
       data-name="${name}"
+      data-fallback-src="${fallbackImageSrc}"
       ${fallbackSpriteAttribute}
-      ${forceFallbackAttribute}
+      data-unicode-version="${emojiInfo.unicodeVersion}"
+      title="${emojiInfo.description}"
     >
+      ${contents}
     </gl-emoji>
   `;
 }
diff --git a/app/assets/javascripts/emoji/support/index.js b/app/assets/javascripts/emoji/support/index.js
index ed9bfb8bc78..1f7852dd487 100644
--- a/app/assets/javascripts/emoji/support/index.js
+++ b/app/assets/javascripts/emoji/support/index.js
@@ -5,9 +5,6 @@ import getUnicodeSupportMap from './unicode_support_map';
 let browserUnicodeSupportMap;
 
 export default function isEmojiUnicodeSupportedByBrowser(emojiUnicode, unicodeVersion) {
-  // Our Spec browser would fail producing emoji maps
-  if (/\bHeadlessChrome\//.test(navigator.userAgent)) return true;
-
   browserUnicodeSupportMap = browserUnicodeSupportMap || getUnicodeSupportMap();
   return isEmojiUnicodeSupported(browserUnicodeSupportMap, emojiUnicode, unicodeVersion);
 }
diff --git a/app/assets/javascripts/filtered_search/visual_token_value.js b/app/assets/javascripts/filtered_search/visual_token_value.js
index 24532d88cf3..a9d5ba8faa8 100644
--- a/app/assets/javascripts/filtered_search/visual_token_value.js
+++ b/app/assets/javascripts/filtered_search/visual_token_value.js
@@ -102,24 +102,15 @@ export default class VisualTokenValue {
     return (
       import(/* webpackChunkName: 'emoji' */ '../emoji')
         .then(Emoji => {
-          Emoji.initEmojiMap()
-            .then(() => {
-              if (!Emoji.isEmojiNameValid(value)) {
-                return;
-              }
-
-              container.dataset.originalValue = value;
-              element.innerHTML = Emoji.glEmojiTag(value);
-            })
-            // ignore error and leave emoji name in the search bar
-            .catch(err => {
-              throw err;
-            });
+          if (!Emoji.isEmojiNameValid(value)) {
+            return;
+          }
+
+          container.dataset.originalValue = value;
+          element.innerHTML = Emoji.glEmojiTag(value);
         })
         // ignore error and leave emoji name in the search bar
-        .catch(importError => {
-          throw importError;
-        })
+        .catch(() => {})
     );
   }
 }
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 50ea13edf63..c81e754df4c 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -487,15 +487,9 @@ class GfmAutoComplete {
       this.loadData($input, at, this.cachedData[at]);
     } else if (GfmAutoComplete.atTypeMap[at] === 'emojis') {
       import(/* webpackChunkName: 'emoji' */ './emoji')
-        .then(({ initEmojiMap, getValidEmojiNames, glEmojiTag }) => {
-          initEmojiMap()
-            .then(() => {
-              this.loadData($input, at, getValidEmojiNames());
-              GfmAutoComplete.glEmojiTag = glEmojiTag;
-            })
-            .catch(() => {
-              this.isLoadingData[at] = false;
-            });
+        .then(({ validEmojiNames, glEmojiTag }) => {
+          this.loadData($input, at, validEmojiNames);
+          GfmAutoComplete.glEmojiTag = glEmojiTag;
         })
         .catch(() => {
           this.isLoadingData[at] = false;
diff --git a/app/assets/javascripts/pages/profiles/show/index.js b/app/assets/javascripts/pages/profiles/show/index.js
index c9d3bbc8c39..0dd0d5336fc 100644
--- a/app/assets/javascripts/pages/profiles/show/index.js
+++ b/app/assets/javascripts/pages/profiles/show/index.js
@@ -56,34 +56,30 @@ document.addEventListener('DOMContentLoaded', () => {
 
   import(/* webpackChunkName: 'emoji' */ '~/emoji')
     .then(Emoji => {
-      Emoji.initEmojiMap()
-        .then(() => {
-          const emojiMenu = new EmojiMenu(
-            Emoji,
-            toggleEmojiMenuButtonSelector,
-            'js-status-emoji-menu',
-            selectEmojiCallback,
-          );
-          emojiMenu.bindEvents();
+      const emojiMenu = new EmojiMenu(
+        Emoji,
+        toggleEmojiMenuButtonSelector,
+        'js-status-emoji-menu',
+        selectEmojiCallback,
+      );
+      emojiMenu.bindEvents();
 
-          const defaultEmojiTag = Emoji.glEmojiTag(defaultStatusEmoji);
-          statusMessageField.addEventListener('input', () => {
-            const hasStatusMessage = statusMessageField.value.trim() !== '';
-            const statusEmoji = findStatusEmoji();
-            if (hasStatusMessage && statusEmoji) {
-              return;
-            }
+      const defaultEmojiTag = Emoji.glEmojiTag(defaultStatusEmoji);
+      statusMessageField.addEventListener('input', () => {
+        const hasStatusMessage = statusMessageField.value.trim() !== '';
+        const statusEmoji = findStatusEmoji();
+        if (hasStatusMessage && statusEmoji) {
+          return;
+        }
 
-            if (hasStatusMessage) {
-              toggleNoEmojiPlaceholder(false);
-              toggleEmojiMenuButton.innerHTML += defaultEmojiTag;
-            } else if (statusEmoji.dataset.name === defaultStatusEmoji) {
-              toggleNoEmojiPlaceholder(true);
-              removeStatusEmoji();
-            }
-          });
-        })
-        .catch(() => createFlash('Failed to load emoji list.'));
+        if (hasStatusMessage) {
+          toggleNoEmojiPlaceholder(false);
+          toggleEmojiMenuButton.innerHTML += defaultEmojiTag;
+        } else if (statusEmoji.dataset.name === defaultStatusEmoji) {
+          toggleNoEmojiPlaceholder(true);
+          removeStatusEmoji();
+        }
+      });
     })
     .catch(() => createFlash('Failed to load emoji list.'));
 });
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
index e9ed05e30cd..7f86741ed29 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
@@ -66,23 +66,19 @@ export default {
 
       import(/* webpackChunkName: 'emoji' */ '~/emoji')
         .then(Emoji => {
-          Emoji.initEmojiMap()
-            .then(() => {
-              if (this.emoji) {
-                this.emojiTag = Emoji.glEmojiTag(this.emoji);
-              }
-              this.noEmoji = this.emoji === '';
-              this.defaultEmojiTag = Emoji.glEmojiTag('speech_balloon');
+          if (this.emoji) {
+            this.emojiTag = Emoji.glEmojiTag(this.emoji);
+          }
+          this.noEmoji = this.emoji === '';
+          this.defaultEmojiTag = Emoji.glEmojiTag('speech_balloon');
 
-              this.emojiMenu = new EmojiMenuInModal(
-                Emoji,
-                toggleEmojiMenuButtonSelector,
-                emojiMenuClass,
-                this.setEmoji,
-                this.$refs.userStatusForm,
-              );
-            })
-            .catch(() => createFlash(__('Failed to load emoji list.')));
+          this.emojiMenu = new EmojiMenuInModal(
+            Emoji,
+            toggleEmojiMenuButtonSelector,
+            emojiMenuClass,
+            this.setEmoji,
+            this.$refs.userStatusForm,
+          );
         })
         .catch(() => createFlash(__('Failed to load emoji list.')));
     },