Skip to content

WIP: native emojis 👍 v2

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

What does this MR do?

Squashed down version of the previous MR, https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/8888. I wanted to save the commit history and MR versions don't quite solve the situation

  • Use native emoji's if platform supports them. Fallback to images or CSS sprites
  • 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

  • Disable markdown caching by applying this diff patch, https://gitlab.com/snippets/1622055
    • git apply gitlab-disable-markdown-caching.diff
  • Run bundle exec rake gemojione:digests to generate the new digests.json
  • We will need to figure out how best to deal with the cached markdown in production
    • Clear out the cache (purge)
      • Pro: Clean break from legacy emojis
      • Con: How do we do this for self installations? Part of migration? 9.0 breaking change?
      • Con: Extra CPU to regenerate everything as users trickle onto things
    • Add a post-processor to change the img.emoji-icon
      • Con: This processor will have to live in the codebase forever(until we want to give up trying to fix legacy image emojis)
      • Con: Extra CPU for every request
      • Pro: We possibly need a post-processor anyway in the future if we want to server-side render emoji fallbacks, see https://gitlab.slack.com/archives/development/p1486577609004641
    • Just ignore it and all new cached things will be native emoji's
      • Pro: No further action needed
      • Con: Older posts use image based emoji's forever 😢 (inconsistent across site)
  • Is it okay to have the native emojis be sized to the font-size of the current context instead of always 20px?

Outdated application.js size increase breakdown, https://gitlab.com/snippets/1638294

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?

See

Screenshots (if relevant)

Immediate feedback from first click (freshly loaded page):

Does this MR meet the acceptance criteria?

Todo

What are the relevant issue numbers?

Closes #26371 (closed)

Merge request reports