notifications: Use a dynamic SVG favicon for unread counts.

Closes #2304.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

frontend_tests/node_tests/notifications.js

@@ -1,5 +1,7 @@
 "use strict";
 
+const rewiremock = require("rewiremock/node");
+
 // Dependencies
 set_global(
     "$",
@@ -32,7 +34,9 @@ zrequire("ui");
 zrequire("spoilers");
 spoilers.hide_spoilers_in_notification = () => {};
 
-zrequire("notifications");
+rewiremock.proxy(() => zrequire("notifications"), {
+    "../../static/js/favicon": {},
+});
 
 // Not muted streams
 const general = {

frontend_tests/node_tests/ui_init.js

@@ -104,7 +104,9 @@ zrequire("narrow");
 zrequire("search_suggestion");
 zrequire("search");
 zrequire("tutorial");
-zrequire("notifications");
+rewiremock.proxy(() => zrequire("notifications"), {
+    "../../static/js/favicon": {},
+});
 zrequire("pm_conversations");
 zrequire("pm_list");
 zrequire("list_cursor");

package.json

@@ -32,6 +32,7 @@
     "file-loader": "^6.0.0",
     "flatpickr": "^4.5.7",
     "font-awesome": "^4.7.0",
+    "font-subset-loader2": "^1.1.7",
     "ga-gtag": "^1.0.1",
     "handlebars": "^4.7.2",
     "handlebars-loader": "^1.7.1",
@@ -65,6 +66,7 @@
     "style-loader": "^1.0.0",
     "terser-webpack-plugin": "^4.1.0",
     "turndown": "^6.0.0",
+    "url-loader": "^4.1.1",
     "webfonts-loader": "^7.0.1",
     "webpack": "^4.33.0",
     "webpack-cli": "^3.3.2",

static/assets/favicon/.gitignore

@@ -1 +0,0 @@
-/tmp.svg

static/assets/favicon/generate

@@ -1,24 +0,0 @@
-#!/usr/bin/env python3
-import subprocess
-from xml.etree import ElementTree as ET
-
-# Generates the favicon images containing unread message counts.
-
-# Open the SVG and find the number text elements using XPath
-tree = ET.parse('orig.svg')
-elems = [tree.getroot().findall(
-    f".//*[@id='{name}']/{{http://www.w3.org/2000/svg}}tspan")[0]
-    for name in ('number_back', 'number_front')]
-
-for i in range(1, 100):
-    # Prepare a modified SVG
-    s = f'{i:2}'
-    for e in elems:
-        e.text = s
-    with open('tmp.svg', 'wb') as out:
-        tree.write(out)
-
-    # Convert to PNG
-    subprocess.check_call(['inkscape', '--without-gui', '--export-area-page',
-                           f'--export-png=../../../static/images/favicon/favicon-{i}.png',
-                           'tmp.svg'])