Optimize Emoji Sprite Handling

2 files changed, 24 insertions, 22 deletions

diff --git a/app/assets/javascripts/emoji/index.js b/app/assets/javascripts/emoji/index.js
index dc7672560ea..cd8dff40b88 100644
--- a/app/assets/javascripts/emoji/index.js
+++ b/app/assets/javascripts/emoji/index.js
@@ -34,7 +34,7 @@ export function getEmojiCategoryMap() {
       symbols: [],
       flags: [],
     };
-    Object.keys(emojiMap).forEach((name) => {
+    Object.keys(emojiMap).forEach(name => {
       const emoji = emojiMap[name];
       if (emojiCategoryMap[emoji.category]) {
         emojiCategoryMap[emoji.category].push(name);
@@ -79,7 +79,9 @@ 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 fallbackSpriteAttribute = opts.sprite
+    ? `data-fallback-sprite-class="${fallbackSpriteClass}"`
+    : '';
   let contents = emojiInfo.moji;
   if (opts.forceFallback && !opts.sprite) {
     contents = emojiImageTag(name, fallbackImageSrc);
diff --git a/app/assets/javascripts/emoji/support/unicode_support_map.js b/app/assets/javascripts/emoji/support/unicode_support_map.js
index c18d07dad43..8c1861c56db 100644
--- a/app/assets/javascripts/emoji/support/unicode_support_map.js
+++ b/app/assets/javascripts/emoji/support/unicode_support_map.js
@@ -54,7 +54,8 @@ const unicodeSupportTestMap = {
 function checkPixelInImageDataArray(pixelOffset, imageDataArray) {
   // `4 *` because RGBA
   const indexOffset = 4 * pixelOffset;
-  const hasColor = imageDataArray[indexOffset + 0] ||
+  const hasColor =
+    imageDataArray[indexOffset + 0] ||
     imageDataArray[indexOffset + 1] ||
     imageDataArray[indexOffset + 2];
   const isVisible = imageDataArray[indexOffset + 3];
@@ -75,23 +76,23 @@ const chromeVersion = chromeMatches && chromeMatches[1] && parseInt(chromeMatche
 const fontSize = 16;
 function generateUnicodeSupportMap(testMap) {
   const testMapKeys = Object.keys(testMap);
-  const numTestEntries = testMapKeys
-    .reduce((list, testKey) => list.concat(testMap[testKey]), []).length;
+  const numTestEntries = testMapKeys.reduce((list, testKey) => list.concat(testMap[testKey]), [])
+    .length;
 
   const canvas = document.createElement('canvas');
   (window.gl || window).testEmojiUnicodeSupportMapCanvas = canvas;
   const ctx = canvas.getContext('2d');
-  canvas.width = (2 * fontSize);
-  canvas.height = (numTestEntries * fontSize);
+  canvas.width = 2 * fontSize;
+  canvas.height = numTestEntries * fontSize;
   ctx.fillStyle = '#000000';
   ctx.textBaseline = 'middle';
   ctx.font = `${fontSize}px "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
   // Write each emoji to the canvas vertically
   let writeIndex = 0;
-  testMapKeys.forEach((testKey) => {
+  testMapKeys.forEach(testKey => {
     const testEntry = testMap[testKey];
-    [].concat(testEntry).forEach((emojiUnicode) => {
-      ctx.fillText(emojiUnicode, 0, (writeIndex * fontSize) + (fontSize / 2));
+    [].concat(testEntry).forEach(emojiUnicode => {
+      ctx.fillText(emojiUnicode, 0, writeIndex * fontSize + fontSize / 2);
       writeIndex += 1;
     });
   });
@@ -99,29 +100,25 @@ function generateUnicodeSupportMap(testMap) {
   // Read from the canvas
   const resultMap = {};
   let readIndex = 0;
-  testMapKeys.forEach((testKey) => {
+  testMapKeys.forEach(testKey => {
     const testEntry = testMap[testKey];
     // This needs to be a `reduce` instead of `every` because we need to
     // keep the `readIndex` in sync from the writes by running all entries
-    const isTestSatisfied = [].concat(testEntry).reduce((isSatisfied) => {
+    const isTestSatisfied = [].concat(testEntry).reduce(isSatisfied => {
       // Sample along the vertical-middle for a couple of characters
-      const imageData = ctx.getImageData(
-          0,
-          (readIndex * fontSize) + (fontSize / 2),
-          2 * fontSize,
-          1,
-        ).data;
+      const imageData = ctx.getImageData(0, readIndex * fontSize + fontSize / 2, 2 * fontSize, 1)
+        .data;
 
       let isValidEmoji = false;
       for (let currentPixel = 0; currentPixel < 64; currentPixel += 1) {
         const isLookingAtFirstChar = currentPixel < fontSize;
-        const isLookingAtSecondChar = currentPixel >= (fontSize + (fontSize / 2));
+        const isLookingAtSecondChar = currentPixel >= fontSize + fontSize / 2;
         // Check for the emoji somewhere along the row
         if (isLookingAtFirstChar && checkPixelInImageDataArray(currentPixel, imageData)) {
           isValidEmoji = true;
 
-        // Check to see that nothing is rendered next to the first character
-        // to ensure that the ZWJ sequence rendered as one piece
+          // Check to see that nothing is rendered next to the first character
+          // to ensure that the ZWJ sequence rendered as one piece
         } else if (isLookingAtSecondChar && checkPixelInImageDataArray(currentPixel, imageData)) {
           isValidEmoji = false;
           break;
@@ -170,7 +167,10 @@ export default function getUnicodeSupportMap() {
     if (isLocalStorageAvailable) {
       window.localStorage.setItem('gl-emoji-version', GL_EMOJI_VERSION);
       window.localStorage.setItem('gl-emoji-user-agent', navigator.userAgent);
-      window.localStorage.setItem('gl-emoji-unicode-support-map', JSON.stringify(unicodeSupportMap));
+      window.localStorage.setItem(
+        'gl-emoji-unicode-support-map',
+        JSON.stringify(unicodeSupportMap),
+      );
     }
   }