WIP: native emojis 👍 v2
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 newdigests.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)
- Clear out the cache (purge)
- Is it okay to have the native emojis be sized to the font-size of the current context instead of always 20px?
- This can lead to mismatched when we fallback to images, https://i.imgur.com/7oamJ35.png
- Yes, https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/9437#note_24015204
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
- https://gitlab.com/gitlab-org/gitlab-ce/issues/26371
- https://gitlab.com/gitlab-org/gitlab-ce/issues/27250
- https://gitlab.com/gitlab-org/gitlab-ce/issues/22474
Screenshots (if relevant)
Immediate feedback from first click (freshly loaded page):
Does this MR meet the acceptance criteria?
-
Changelog entry added -
Documentation created/updated - Tests
-
Added for this feature/bug -
All builds are passing
-
-
Conform by the merge request performance guides -
Conform by the style guides -
Branch has no merge conflicts with master
(if it does - rebase it please) -
Squashed related commits together
Todo
-
EE branch -
Possibly rspec tests for falling back emojis - Will need a way to programmatically define the emoji support map
-
Bake in host/relative-root into fallbackImageSrc
digests.json
, see https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/9437/diffs#note_23935168- Probably only want to just prepend the
gon.relative_url_root
client-side - Waiting on getting a relative root environment setup on my local env, https://gitlab.com/gitlab-org/gitlab-ce/issues/28705
- Probably only want to just prepend the
-
Fix up autocomplete alias, :-1:
What are the relevant issue numbers?
Closes #26371 (closed)