Page MenuHomePhabricator

Add a proper emoji picker to Remarkup bar
Open, Needs TriagePublic

Assigned To
None
Authored By
chad
Jan 21 2017, 3:13 AM
Referenced Files
F2483777: image.png
Jan 25 2017, 4:27 AM
F2483573: image.png
Jan 25 2017, 4:04 AM
F2481630: Screen Shot 2017-01-24 at 7.54.31 PM.png
Jan 25 2017, 12:55 AM
F2476303: pasted_file
Jan 24 2017, 8:58 AM
F2475184: pasted_file
Jan 24 2017, 4:11 AM
F2473207: pasted_file
Jan 23 2017, 7:29 PM
F2472952: Oh how i love emojis.png
Jan 23 2017, 6:27 PM
F2472824: pasted_file
Jan 23 2017, 5:57 PM
Tokens
"Haypence" token, awarded by chad.

Description

For reference:

pasted_file (810×782 px, 149 KB)

For inclusion:
http://emojione.com/

Event Timeline

chad awarded a token.

Yep, go for it.

Awesome! I think this will be really cool. Will have to build a sprite sheet for it, shouldn't be too much.

I think we should just use actual emoji for this, not sprite sheets?

The major thing we need is a huge list of English language word labels for every possible emoji and then a pile of JS.

Haha, sorry I think this might be a good JS learning side project for me on the weekends if I have free time.

On Emojis - yes in theory, but not sure in practice - I can try both and see how bad it is. Mostly, there is too much differentiation across platforms leading to an inconsistent experience in expressing an emotion. Having a consistent experience here (if we're using them to help improve communication in the product) would be something I prefer we ship with. I also think when new ones get standardized, they roll out at different times at different places. Controlling that seems beneficial to some users not seeing blank unicode blocks? Maybe we just always stay behind then.

http://unicode.org/emoji/charts/full-emoji-list.html

I think the pros and cons are something like:

Pros

  • Users on old versions of Windows or who compiled their own Gentoo don't have occasional missing/fallback emoji.
  • Users see the same picture of a smiling cat instead of different pictures of smiling cats.

Cons

  • You need to rewrite RemarkupTextControl to use contentEditable, which I believe to be an enormous, complex undertaking -- or have :boar: and 🐗 mean different things and be visually distinct.
  • Probably nine million other problems (commit messages, text email, search, performance, combining emoji like flags and skin tones, internationalization).

All I've learned is:

  • Seems really simple/easy to build this into Autocomplete.js
  • Emoji look terrible on nearly every platform / browser
  • "Frequently Used" would be nice to have in Autocomplete for all objects, I think I'd save a lot of time typing @e instead of @epri daily.
  • Seems like we already special case "MacroEmoji", so swapping in images would not be much work.
  • Slack transforms actual emoji pastes like ❤️️ to :heart:
  • There is a lot to do to make the search feel "correct" and "natural" given how much junk emoji there are.

phurl autocomplete might be nice too

Emoji look terrible on nearly every platform / browser

Can you go into more depth on this one? Specifically, they don't look terrible for me in any browser on MacOS X or in iOS Safari. They're fairly bad on Windows 7, but from Googling it looks like they're OK on Windows 8 and 10 and (recent versions of?) Android. Assuming they're OK on OSX, Windows 8 and 10, and iOS and recent Android I'd guess like ~95% or more of our users can see emoji fine? Did you come up with different results? Or do you think more than 5% of our users are on other platforms like self-compiled Ubuntu? Or do you think some of the full-color OS icon sets are just terrible compared to the Emojione set?

I believe Firefox is adopting EmojiOne. If I could CSS style the emojis, it would help. I find them small and hard to identify in text. Basic ones like ❤️ are easy, but all the different emotions are somewhat harder. 😁 vis. 😂 really are hard for me to visually focus on (and on my laptop, which is smaller dpi, is even harder).

This is 😄 😂 on normal Emoji.

Untitled-1.png (54×174 px, 7 KB)

Maybe there are some other Emoji-style tricks in CSS. I don't think I've looked.

oh man, at least in Safari they look way better.

This is what I see on my Macbook in Safari:

Screen Shot 2017-01-23 at 9.54.52 AM.png (338×500 px, 54 KB)

Those look exactly identical to me (except that Slack has a larger font size?) so I'm not sure what distinction you're pointing out or seeing on your machine.

Chrome/Firefox seems to be shrinking them smaller. I think we can maybe cheat that with font-size and the emoji remarkup rule...

If I can get most places to appear like Safari shows them, this will probably be good for a v1. The reason I like EmojiOne is mostly aesthetic, they are less busy visually (flatter) and are easier to determine what they are individually. I can also control the size. Let me futz with our emoji remarkup rule and see if I can normalize the display better. Though, not sure that's really possible still given Google search results.

Also, I didn't intend to work on this today, just wanted to brain dump thoughts.

Oh how i love emojis.png (267×404 px, 25 KB)

Pros

  • Users on old versions of Windows or who compiled their own Gentoo don't have occasional missing/fallback emoji.
  • Users see the same picture of a smiling cat instead of different pictures of smiling cats.

Second! Really jab at gentoo users was absolutely true.

Yeah emoji on Windows is non-existent still. At least, on Windows 10 Chrome / Firefox / Edge it's just what @avivey posted above.

Well, not non-existent, just black and white line art.

Oh, woe is me, for there are no colours in my emoji. One thing to notice though - where can I find that beautiful emoji example in ui examples? Would be cool place to check for emoji support on different browsers/platforms :)

If you're on linux, I think emojione extension likely only choice. What OS/Browser?

Typing :cat will list the cat2 emoji before cat
🐱

Screen Shot 2017-01-24 at 7.54.31 PM.png (434×768 px, 47 KB)

Cat2 is twice as good as Cat

I can't figure out the sort thing, don't think it's an emoji issue.

cats are naturally dubious so i'm not surprised

EmojiCodepoint
🐈U+1F408
🐱U+1F431

The list is sorted by emoji. 🐈 is "alphabetically" earlier than 🐱 in the list of emoji.

I think you can sort the list by English label instead by doing setName("cat 🐱") (controls sort order), then setDisplayName("🐱 cat") (controls display).

not memorizing emoji collation order in 2017 pfft

Also while you're in there maybe replace _ with (space) in the strings? I can't find :lion_face: by typing :fac... right now, but I think if you swap the underscores for spaces it will work. Then :cat should be able to find crying_cat_face and stuff, too.

I've already started the 2 minute arc diff process

I guess I don't even have a glyph for :lion_face: anyway.

🐱

🐱
🐱

🐱

🐱

🐱

I rolled the server for the bug testers.

😻😻😻
🐱🐱🐱
🐈🐈🐈

yup it works

These are still so painful on non-Safari

🐱 🐈

🐈 🐈 🐈 🐈

🐱

🐈

🐱

:cat2:
🐈

:cat2:
🐈

Click here for 🐱

🐈🐱🐕

🐈+🐈

🐱
🐈

hmm everything seems in order

In T12139#208563, @chad wrote:

If you're on linux, I think emojione extension likely only choice. What OS/Browser?

Firefox 50 uses EmojiOne by default (except when it doesn't for some characters).

I came across a small bug with the "auto-suggest" feature. In differential I was writing an inline diff, and ended with :/ to show my face in plain ascii, and hit + immediately after to complete my inline diff. After typing :/ the auto-complete popped up and when I saved the draft with + it forever immortalized the auto-complete popup on screen with no seeming way to get rid of it (refreshing probably fixes~). I can reproduce on this install.

Do you have persistent chat open?

I do not have persistent chat open.

Oh, I missed "inline". That reproduces for me. I'll file a separate issue.

Also I very probably meant "inline comment" and not "inline diff"