Skip to content

WIP: native emojis 馃憤

Eric Eastwood requested to merge 26371-native-emojis into master

What does this MR do?

  • Use native emoji's if platform supports them. Fallback to images
  • Emoji's are now client-side and do not require another ajax request
    • See autocomplete (typeahead)
    • See award emoji menu
  • Improve award emoji menu performance
    • Pre-build emoji menu on button hover/focus
    • Only pre-build the first category of emoji's to avoid jank and quick initial display if necessary
    • Load in remaining emoji's after actually opening the menu (we do it after the menu expand transition to avoid jank)
    • Adjust the emoji menu CSS transition bezier curve so that it doesn't dip negative(zero) and give a perceptive delay
  • Add alias lookup in award emoji menu

Are there points in the code the reviewer needs to double check?

Quick tip: If you are looking for an emoji that will fallback on macOS Sierra(10.12), :rofl: is unicode 9.0 and will fallback

  • Run bundle exec rake gemojione:digests
  • We will need to figure out how best to deal with the cached markdown in production
    • Clear out the cache
    • Add a post-processor to change the img.emoji-icon
    • Just ignore it and all new cached things will be native emoji's
  • Is it okay to have the native emojis be sized to the font-size of the current context instead of always 20px?

We can split into manageable MRs if necessary. Here is the MR/branch dependency tree/graph I made when I though I was going to have to split it up, see https://drive.google.com/file/d/0B4cjIdQwaPXhZzRUd05GWGNTbG8/view?usp=sharing

-> http://i.imgur.com/44CfjCJ.png

Why was this MR needed?

Screenshots (if relevant)

Immediate feedback from first click (freshly loaded page):

For native unicode emoji browser support results, see https://gitlab.com/snippets/1548325

Does this MR meet the acceptance criteria?

Todo

  • Server-side rendering, ./lib/banzai/renderer.rb -> ./lib/banzai/filter/emoji_filter.rb
  • Emoji awards (reactions) buttons
    • OP
    • Comment
  • Emoji awards (reactions) dropdown
  • Emoji Typeahead :
  • Unicode fallback
  • Revert ./fixtures/emojis/index.json
  • Use https://github.com/MadLittleMods/emoji-unicode-version to assemble a single json file (like we do for ./fixtures/emojis/digests.json now) that will get shared across the typeahead and emoji menu for awards
    • name
    • moji
    • fallbackImageSrc
    • unicodeVersion
    • category
  • Emoji award menu
    • Mentioned to have category button nav and only show the emoji's in that category, https://gitlab.slack.com/archives/frontend/p1486447966012841
      • Waiting on issue
    • Build the menu client-side with the first couple categories initially and then shove the rest in the DOM (have loading indicator at the bottom until the rest are shoved in)
    • Build the emoji menu when an award button is hovered/focused (instead of clicked).
  • If we see that no native unicode is supported (the whole map is false), set a cookie and server-side render images straight away
  • Fallback mode for CSS sprites
  • Rename emoji CSS sprite clases to use name, ex. .emoji-grinning, instead of .emoji-1F600 to reduce json payload size
    • Maybe a v2 improvement. These images are also named this way on the EmojiOne repo and would have to post-process
  • Use npm for https://github.com/WebReflection/document-register-element
  • Remove unused award emoji menu route /emojis and server-side templates
  • Remove unused autocomplete emoji endpoint .../autocomplete_sources/emojis
  • Need a check to cover horse_racing_tone1, etc on macOS Chrome 56
    • Our current skin tone modifier test is dark skin tone, spy: '\u{1F575}\u{1F3FF}' which does pass
    • Just
  • Get out Windows 8.1 and test the following which have problems in the VM. They used to not work in Chrome as well but now they do 馃槙
    • Need a check to cover family_mmbb (zwj sequence), etc on Windows 8.1 Firefox 51.0.1
    • Need a check to cover kiss_mm (zwj sequence), etc on Windows 8.1 Firefox 51.0.1
    • Need a check to cover couple_mm, couple_with_heart_mm (zwj sequence), etc on Windows 8.1 Firefox 51.0.1
  • Need a check to cover skinModifier on Windows 8.1 Firefox 51.0.1
    • Added more complex skinModifier with multiple checks
  • Test on Android Chrome
  • Test on Android Firefox

Add tests

What are the relevant issue numbers?

Closes #26371 (closed)

Merge request reports