Menu emoji customization

[luetage]

In recent releases the Vivaldi team has given us the ability to customize most of the menus in the UI. For a thorough overview take a look at this blog post ⇒ https://vivaldi.com/blog/customize-menus-in-vivaldi-browser/. By editing the entries of menus we can include emoji. I played around with this quite a bit and wanted to open a topic where users can share fitting emoji.

I wouldn’t force emoji; for some entries there simply doesn’t exist a satisfying option and too many emoji can become overbearing in the UI. A good resource for selecting emoji is emojipedia. Different platforms display a different style of emoji for the same Unicode code point. Personally I use the Google variation (Noto Color Emoji), which is most prevalent on Android and Linux systems. You can compare the different styles on emojipedia. Following table matches emoji with menu‐entries.

---

menu	emoji name
📁 File / Folder	File Folder
📂 Open File / Open	Open File Folder
📑 New Tab	Bookmark Tabs
📃 Save Page As...	Page with Curl
🖨️ Print	Printer
📺 Cast	Television
📥 Import Bookmarks and Settings	Inbox Tray
📤 Export Bookmarks...	Outbox Tray
🗓️ Calendar	Spiral Calendar
🗂️ Open Saved Session...	Card Index Dividers
💾 Save	Floppy Disk
💥 Exit	Collision
🖊️ Edit	Pen
🗡️ Cut	Dagger
💞 Copy	Revolving Hearts
📋 Paste	Clipboard
🐇 Paste and Go	Rabbit
🔍 Find in Page...	Magnifying Glass Tilted Left
👓 View	Glasses
🌍 Web Panels	Globe showing Europe-Africa
🖼️ Images / Thumbnails	Framed Picture
💙 Bookmark	Blue Heart
🗜️ Tools	Clamp
🚀 Quick Commands	Rocket
🧩 Extensions	Puzzle Piece
🕰️ History	Mantelpiece Clock
📓 Notes	Notebook
🌪️ Delete Browsing Data...	Tornado
🗑️ Delete	Wastebasket
🔥 Close / Remove	Fire
🧿 Developer Tools	Nazar Amulet
🔄 Task Manager	Counterclockwise Arrows Button
⁣🔲 or 🔳 Window	Black Square Button or White Square Button
🕵️ Private Window	Detective
🥷 Hide UI	Ninja
💢 Fullscreen	Anger Symbol
⛑️ Help	Rescue Worker’s Helmet
🗨️ Vivaldi Forum	Left Speech Bubble
🎇 Vivaldi Welcome Tour	Sparkler
📰 Community Blogs	Newspaper
⌨️ Keyboard Cheat Sheet	Keyboard
🪲 Report a Bug	Beetle
👤 Account Sheet	Bust in Silhouette
📜 About	Scroll
🚘 Move Tab	Oncoming Automobile
🔇 Mute	Muted Speaker
💤 Hibernate Background Tabs	Zzz
🍒 Tile Tabs / Untile Tabs	Cherries
📌 Pin Tab / Unpin Tab	Pushpin
🥞 Stack Tabs	Pancakes
🔐 Lock Second Tab Row	Locked with Key
🔃 Periodic Reload / Reload	Clockwise Vertical Arrows
🧟 Reopen Closed Tab / Removed Panels	Zombie
🎛️ Customize	Control Knobs
🌀 Panel	Cyclone
🗽 Status Bar	Statue of Liberty
🔩 Separate Width / Separator	Nut and Bolt
💻 Show Desktop Version	Laptop
📱 Show Mobile Version	Mobile Phone
📛 Rename	Name Badge
🍫 Toolbar	Chocolate Bar
🎈 Toggle Floating Panel	Balloon
↩️ Reply	Right Arrow Curving Left
📨 Send	Incoming Envelope
📧 Mail	E-Mail
🧞 Sender	Genie
🔖 Mark as Read / Mark as Unread	Bookmark
👟 Go to	Running Shoe
🎌 Flags	Crossed Flags
🏷️ Labels	Label
🕸️ Threads	Spider Web
⚙️ Settings	Gear
📽️ Media Controls	Film Projector

---

Notes:

• The emoji in this table are escaped and will display the native version available on your system, instead of the nodeBB/forum emoji normally overriding the input.

• If an emoji can’t be displayed/shows up empty on your system, it’s either an indicator for the emoji not being available in your font, or the font being outdated. Check emojipedia for information.

• In case the emoji looks strange (no color, wrong width, &c.), it’s likely your current font has populated the Unicode code point with a symbol. Use an alternative emoji instead.

• Adding emoji to the Vivaldi Button Menu (Application Menu) bugs the display with the setting “Alt Key for Main Menu” enabled. Either disable the setting or try this workaround.

[potmeklecbohdan]

@luetage said in Menu emoji customization:

In following table I’m going to place the actual emoji instead of pictures

Please code them out so that they can be copied.

[luetage]

@potmeklecbohdan What do you mean? I mean I get it, the forum has replaced all but 2 of the emoji and shows forum generated images instead, but they can still be copied and show up as native emoji when pasted. Hmm.

[potmeklecbohdan]

@luetage
You have to quote this post to copy this:
But you can directly copy this: 📁

[luetage]

Didn’t think about putting them in code, but it makes sense, for it omits the forum emoji and shows you directly what you would get, thanks.

edit: Gladly fixing this took only 2 minutes with a text editor, doing this manually would have brought me to tears probs… 💧

[luetage]

Has anyone tried adding an emoji to the Customize entry of the address bar buttons? Doesn’t seem to work on my end, the entry seems to refuse edits, although they show up and save in settings just fine.

[potmeklecbohdan]

@luetage (Don't do this if you've heavily customised the menu.) If you right-click the item (in the editor), you can tick Show list in folder, although it already is in a folder. Doing this will:

• move the fixed-label item (in the real menu) one level deeper
• force you to reset the menu coz the Show list in folder option is gone

---

I think this is off-topic here, gonna flag you for mods. (done)

[Steffie]

@potmeklecbohdan said in Menu emoji customization:

off-topic here, gonna flag you for mods

So v cheeky!

[Steffie]

This post is deleted!

[luetage]

How is this off topic?

[luetage]

I don’t understand anything anymore…

Anyway, @potmeklecbohdan good find, can be customized with the downside of creating another level. There is no harm in trying it, “Restore Default Menu” only resets the selected menu, not all menus.

[luetage]

@Steffie After 20 minutes of painful fiddling I got the emojis in vivaldi button menu to work.

• For the first and last entry this is enough: emoji+space+&name
• One entry in between can look like this: &emoji+space+&name
• The four remaining entries need special treatment. They basically look like this: specialcharacter+emoji+space+&name. The special character has to be different each time, or it will produce an unhealthy amount of fugly question marks. Pick a zero‐width invisible character from this page. I think I used zero‐width space, invisible separator, zero‐width joiner and left‐to‐right override. But you gotta play around with it. In the end it will work though.

What still doesn’t work is keyboard navigation, as in pressing the underlined character on your keyboard. This breaks for the entry as soon as an emoji is introduced, doesn’t matter where in the line—which is an offense worth a report.

[Hadden89]

@luetage Good job. It was too annoying to fiddle with and I end to put the emojis after the text. Lazy way.

[LonM]

@luetage Good find. What a strange bug this is.

[luetage]

@Hadden89 Wait, aren’t you on Windows? Asking because I thought this was a Linux‐only issue.

[Hadden89]

@luetage The misalign of text and the emojis may happen on win too. But I didn't test this too much to swear on it for the other things.
I may consider to reset the menu and see what it happens.

[Hadden89]

@luetage Well... It happens on win too

[luetage]

@Hadden89 Yeah, do that, we need to issue a number of bug reports at some point. About the vivaldi button menu, it’s hard to get it right, you gotta be careful with copy‐pasting because the characters are invisible. Only way to do this properly is with keyboard shortcuts and making sure to paste the character only once. When redoing an entry delete the emoji too and press backspace and/or delete repeatedly to make sure it’s gone for good. Inserting the special character after entering the rest of the characters is also advised, to make sure you do place it in front.

[Hadden89]

@luetage Worst part is that only no-break space seems to be past-able on windows
Even with character map other pastes fails. And yes, the keyboard shortcut results broken.

[luetage]

@Hadden89 All of them are unicode characters, the should work on Windows too. How do you know the paste fails? I mean it’s not like a space would appear on the screen, the mentioned ones are all zero‐width.