User:Bugghost/Scripts/UserRoleIndicator

This script adds customisable little labels next to username links based on the user's user roles. Works in signatures, mentions, in page histories/contribs, and elsewhere.

Forked from User:Novem Linguae's UserHighlighterSimple, and uses 90% of the same code. This fork just adds a little div with an emoji in it next to the link, rather than setting custom CSS on the link itself - signatures are (in most cases) left in-tact.

Installation
Go install User:Enterprisey/script-installer, then come back to this page and click the giant blue "Install" button in the infobox on the right.

Roles and default labels
The default labels used are emoji, but can be customised to be any text (see below). The default labels are:


 * 🐣 → Less than 500 edits
 * 📘 → Extended confirmed (more than 500 edits and older than a month)
 * 📚 → More than 10,000 edits
 * 🧺 → New page reviewer
 * 🧹 → Admin
 * 🚬 → Former Admin
 * 💼‍ → Bureaucrat
 * ⚖️ → Arbitration Committee member
 * 🩺 → Steward or Ombud
 * 🌐 → Wikimedia Foundation (WMF)
 * 🤖 → Bot account

The links are given a tooltip when hovering, like this, which states the full role.

The default symbol choices are a bit tongue-in-cheek - they shouldn't be taken too seriously.

The label is placed in a tasteful semitransparent box next to the username - it should fit in well in both dark and light colour schemes.

Note: unlike Novem Linguae/Scripts/UserHighlighterSimple, this script adds new inline elements to the DOM (rather than changing styles of existing DOM elements), and so can make contents of the page jump a small amount when initially loading.

Custom Labels
If you don't like the default emoji labels or tooltip texts, you can customise them to be anything you want, including just regular old text.

To do this, open up your common.js page and add this code:

Modify any of the strings you want in there. The first item of the arrays is the content of the label that will appear next to the username. The second item is the tooltip label.

So for instance, if you wanted to do something different, you could have this setup:

Then save your common.js, and your custom labels will appear (it may require a hard refresh or cache clear to pick up the changes):



Bugs, feedback and suggestions
This is my first ever attempt at Wikipedia user script! If you have any issues or feedback, let me know.

As with any Unicode-on-the-web solution, your browser might display an ugly symbol instead of the intended one, depending on your browser version, your OS, the weather, and the current location of certain planets. If you are getting an ugly symbol instead of a nice one, check out the instructions above that let you customise the labels.

Note that this is mainly a fork of Novem Linguae/Scripts/UserHighlighterSimple, and the differences are largely cosmetic. Any issues with the icon rendering incorrectly is almost definitely a bug in this script - but issues identifying correct user roles may come from somewhere else - it could be worth trying to replicate using UserHighlighterSimple and seeing if any issue you're having is replicable there too.

Either way - let me know if you have any issues and I'll take a look and see if I can get to the bottom of it.

Todo

 * Add method of custom emoji choices
 * More thorough testing
 * Add installation instructions
 * Add image of custom labels in use
 * Find out what you're actually meant to do once you've made a userscript