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'])

static/assets/favicon/infinite.svg

@@ -1,113 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="16"
-   height="16"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.48.3.1 r9886"
-   sodipodi:docname="infinite.svg"
-   inkscape:export-filename="/tmp/icon.png"
-   inkscape:export-xdpi="90.235413"
-   inkscape:export-ydpi="90.235413">
-  <title
-     id="title2993">Humbug Hat</title>
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="16"
-     inkscape:cx="-0.94670536"
-     inkscape:cy="2.2156128"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     inkscape:window-width="1278"
-     inkscape:window-height="1598"
-     inkscape:window-x="1200"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Humbug Hat</dc:title>
-        <dc:creator>
-          <cc:Agent>
-            <dc:title>Luke Faraone &lt;lfaraone@zulip.com&gt;</dc:title>
-          </cc:Agent>
-        </dc:creator>
-        <dc:rights>
-          <cc:Agent>
-            <dc:title>© 2012 Zulip, Inc. All Rights Reserved</dc:title>
-          </cc:Agent>
-        </dc:rights>
-        <dc:date>28 Sept 2012</dc:date>
-        <dc:language>The Hat transcends all language</dc:language>
-        <dc:coverage>Your head</dc:coverage>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <linearGradient id="a" x1="0" y1="0" x2="0" y2="1">
-    <stop offset="0" stop-color="#50adff"/>
-    <stop offset="1" stop-color="#7877fc"/>
-  </linearGradient>
-  <g transform="translate(8 8) scale(0.023769201057729446) translate(-386.56 -386.56)">
-    <path d="M688.52 150.67c0 33.91-15.23 64.04-38.44 82.31L424.79 434.17c-4.18 3.59-9.62-2.19-6.61-7.03l82.64-165.46c2.31-4.63-.69-10.33-5.44-10.33H174.86c-49.64 0-90.26-45.31-90.26-100.68 0-55.37 40.62-100.68 90.26-100.68h423.39c49.65 0 90.27 45.31 90.27 100.68zM174.86 723.13h423.39c49.64 0 90.26-45.31 90.26-100.68 0-55.37-40.62-100.68-90.26-100.68H277.73c-4.75 0-7.76-5.7-5.44-10.33l82.64-165.46c3.01-4.83-2.42-10.62-6.61-7.03L123.04 540.14c-23.21 18.27-38.44 48.4-38.44 82.31 0 55.37 40.62 100.68 90.26 100.68z" fill="url(#a)"/>
-  </g>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-112.53125,-681.00001)">
-    <g
-       id="g3825"
-       transform="matrix(1.7498801,0,0,1.2477417,-86.966217,-171.8859)">
-      <text
-         inkscape:label="#text3802"
-         xml:space="preserve"
-         style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffffff;stroke-width:2;stroke-miterlimit:4;stroke-opacity:0.84705882;stroke-dasharray:none;font-family:Monospace;-inkscape-font-specification:Monospace"
-         x="116.34375"
-         y="696.09375"
-         id="number_back"
-         sodipodi:linespacing="125%"><tspan
-           sodipodi:role="line"
-           id="tspan3804"
-           x="116.34375"
-           y="696.09375">∞</tspan></text>
-      <text
-         inkscape:label="#text3798"
-         sodipodi:linespacing="125%"
-         id="number_front"
-         y="696.09375"
-         x="116.34375"
-         style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
-         xml:space="preserve"><tspan
-           y="696.09375"
-           x="116.34375"
-           id="tspan3800"
-           sodipodi:role="line">∞</tspan></text>
-    </g>
-  </g>
-</svg>

static/assets/favicon/orig.svg

@@ -1,109 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="16"
-   height="16"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.48.3.1 r9886"
-   sodipodi:docname="orig.svg"
-   inkscape:export-filename="/tmp/icon.png"
-   inkscape:export-xdpi="90.235413"
-   inkscape:export-ydpi="90.235413">
-  <title
-     id="title2993">Humbug Hat</title>
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="22.627417"
-     inkscape:cx="9.9158448"
-     inkscape:cy="9.6950594"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     inkscape:window-width="1278"
-     inkscape:window-height="1598"
-     inkscape:window-x="1200"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Humbug Hat</dc:title>
-        <dc:creator>
-          <cc:Agent>
-            <dc:title>Luke Faraone &lt;lfaraone@zulip.com&gt;</dc:title>
-          </cc:Agent>
-        </dc:creator>
-        <dc:rights>
-          <cc:Agent>
-            <dc:title>© 2012 Zulip, Inc. All Rights Reserved</dc:title>
-          </cc:Agent>
-        </dc:rights>
-        <dc:date>28 Sept 2012</dc:date>
-        <dc:language>The Hat transcends all language</dc:language>
-        <dc:coverage>Your head</dc:coverage>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <linearGradient id="a" x1="0" y1="0" x2="0" y2="1">
-    <stop offset="0" stop-color="#50adff"/>
-    <stop offset="1" stop-color="#7877fc"/>
-  </linearGradient>
-  <g transform="translate(8 8) scale(0.023769201057729446) translate(-386.56 -386.56)">
-    <path d="M688.52 150.67c0 33.91-15.23 64.04-38.44 82.31L424.79 434.17c-4.18 3.59-9.62-2.19-6.61-7.03l82.64-165.46c2.31-4.63-.69-10.33-5.44-10.33H174.86c-49.64 0-90.26-45.31-90.26-100.68 0-55.37 40.62-100.68 90.26-100.68h423.39c49.65 0 90.27 45.31 90.27 100.68zM174.86 723.13h423.39c49.64 0 90.26-45.31 90.26-100.68 0-55.37-40.62-100.68-90.26-100.68H277.73c-4.75 0-7.76-5.7-5.44-10.33l82.64-165.46c3.01-4.83-2.42-10.62-6.61-7.03L123.04 540.14c-23.21 18.27-38.44 48.4-38.44 82.31 0 55.37 40.62 100.68 90.26 100.68z" fill="url(#a)"/>
-  </g>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-112.53125,-681.00001)">
-    <text
-       sodipodi:linespacing="125%"
-       id="number_back"
-       y="696.09375"
-       x="116.34375"
-       style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffffff;stroke-width:2;stroke-miterlimit:4;stroke-opacity:0.84705882;stroke-dasharray:none;font-family:Monospace;-inkscape-font-specification:Monospace"
-       xml:space="preserve"
-       inkscape:label="#text3802"><tspan
-         y="696.09375"
-         x="116.34375"
-         id="tspan3804"
-         sodipodi:role="line">99</tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
-       x="116.34375"
-       y="696.09375"
-       id="number_front"
-       sodipodi:linespacing="125%"
-       inkscape:label="#text3798"><tspan
-         sodipodi:role="line"
-         id="tspan3800"
-         x="116.34375"
-         y="696.09375">99</tspan></text>
-  </g>
-</svg>

static/assets/favicon/pms.svg

@@ -1,80 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="16"
-   height="16"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.48.3.1 r9886"
-   sodipodi:docname="infinite.svg"
-   inkscape:export-filename="/tmp/icon.png"
-   inkscape:export-xdpi="90.235413"
-   inkscape:export-ydpi="90.235413">
-  <title
-     id="title2993">Humbug Hat</title>
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="16"
-     inkscape:cx="-0.94670536"
-     inkscape:cy="2.2156128"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     inkscape:window-width="1278"
-     inkscape:window-height="1598"
-     inkscape:window-x="1200"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Humbug Hat</dc:title>
-        <dc:creator>
-          <cc:Agent>
-            <dc:title>Luke Faraone &lt;lfaraone@zulip.com&gt;</dc:title>
-          </cc:Agent>
-        </dc:creator>
-        <dc:rights>
-          <cc:Agent>
-            <dc:title>© 2012 Zulip, Inc. All Rights Reserved</dc:title>
-          </cc:Agent>
-        </dc:rights>
-        <dc:date>28 Sept 2012</dc:date>
-        <dc:language>The Hat transcends all language</dc:language>
-        <dc:coverage>Your head</dc:coverage>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <linearGradient id="a" x1="0" y1="0" x2="0" y2="1">
-    <stop offset="0" stop-color="#50adff"/>
-    <stop offset="1" stop-color="#7877fc"/>
-  </linearGradient>
-  <g transform="translate(8 8) scale(0.023769201057729446) translate(-386.56 -386.56)">
-    <path d="M688.52 150.67c0 33.91-15.23 64.04-38.44 82.31L424.79 434.17c-4.18 3.59-9.62-2.19-6.61-7.03l82.64-165.46c2.31-4.63-.69-10.33-5.44-10.33H174.86c-49.64 0-90.26-45.31-90.26-100.68 0-55.37 40.62-100.68 90.26-100.68h423.39c49.65 0 90.27 45.31 90.27 100.68zM174.86 723.13h423.39c49.64 0 90.26-45.31 90.26-100.68 0-55.37-40.62-100.68-90.26-100.68H277.73c-4.75 0-7.76-5.7-5.44-10.33l82.64-165.46c3.01-4.83-2.42-10.62-6.61-7.03L123.04 540.14c-23.21 18.27-38.44 48.4-38.44 82.31 0 55.37 40.62 100.68 90.26 100.68z" fill="url(#a)"/>
-  </g>
-  <circle cx="13" cy="12" r="2" fill="#f00" />
-</svg>