Show the number of unread notifications above the bell on the right

Fixes https://github.com/vector-im/riot-web/issues/3383

This achieves the result by counting up the number of highlights across all rooms and setting that as the badge above the icon. If there are no highlights, nothing is displayed. The red highlight on the bell is done by abusing how the Tinter works: because it has access to the properties of the SVG that we'd need to override it, we give it a collection of colors it should use instead of the theme/tint it is trying to apply. This results in the Tinter using our warning color instead of whatever it was going to apply.

The RightPanel now listens for events to update the count too, otherwise when the user receives a ping they'd have to switch rooms to see the change.

src/Tinter.js

@@ -390,7 +390,7 @@ class Tinter {
     // XXX: we could just move this all into TintableSvg, but as it's so similar
     // to the CSS fixup stuff in Tinter (just that the fixups are stored in TintableSvg)
     // keeping it here for now.
-    calcSvgFixups(svgs) {
+    calcSvgFixups(svgs, forceColors) {
         // go through manually fixing up SVG colours.
         // we could do this by stylesheets, but keeping the stylesheets
         // updated would be a PITA, so just brute-force search for the
@@ -418,13 +418,14 @@ class Tinter {
                 const tag = tags[j];
                 for (let k = 0; k < this.svgAttrs.length; k++) {
                     const attr = this.svgAttrs[k];
-                    for (let l = 0; l < this.keyHex.length; l++) {
+                    for (let m = 0; m < this.keyHex.length; m++) { // dev note: don't use L please.
                         if (tag.getAttribute(attr) &&
-                            tag.getAttribute(attr).toUpperCase() === this.keyHex[l]) {
+                            tag.getAttribute(attr).toUpperCase() === this.keyHex[m]) {
                             fixups.push({
                                 node: tag,
                                 attr: attr,
-                                index: l,
+                                index: m,
+                                forceColors: forceColors,
                             });
                         }
                     }
@@ -440,7 +441,9 @@ class Tinter {
         if (DEBUG) console.log("applySvgFixups start for " + fixups);
         for (let i = 0; i < fixups.length; i++) {
             const svgFixup = fixups[i];
-            svgFixup.node.setAttribute(svgFixup.attr, this.colors[svgFixup.index]);
+            const forcedColor = svgFixup.forceColors ? svgFixup.forceColors[svgFixup.index] : null;
+            if (forcedColor) console.log(forcedColor);
+            svgFixup.node.setAttribute(svgFixup.attr, forcedColor ? forcedColor : this.colors[svgFixup.index]);
         }
         if (DEBUG) console.log("applySvgFixups end");
     }