Move the busy favicon filename to the template. (#4966)

* Move the busy favicon filename to the template.

Also, make the favicon switching robust against not having the appropriate links on the page.

Fixes #4695

* Fix problem in Firefox updating the favicon by changing the rel attribute.

dev_mode/templates/partial.html

@@ -6,4 +6,7 @@
     "wsUrl": "{{ ws_url }}"
   }</script>
 
-  {% block favicon %}<link rel="shortcut icon" type="image/x-icon" href="{{ base_url }}static/base/images/favicon.ico">{% endblock %}
+  {% block favicon %}
+  <link rel="icon" type="image/x-icon" href="{{ base_url }}static/base/images/favicon.ico" class="idle favicon">
+  <link rel="" type="image/x-icon" href="{{ base_url }}static/base/images/favicon-busy-1.ico" class="busy favicon">
+  {% endblock %}

packages/application-extension/src/index.tsx

@@ -278,11 +278,27 @@ const busy: JupyterLabPlugin<void> = {
   id: '@jupyterlab/application-extension:faviconbusy',
   activate: async (app: JupyterLab) => {
     app.busySignal.connect((_, isBusy) => {
-      const filename = isBusy ? 'favicon-busy-1.ico' : 'favicon.ico';
       const favicon = document.querySelector(
-        'link[rel="shortcut icon"]'
+        `link[rel="icon"]${isBusy ? '.idle.favicon' : '.busy.favicon'}`
       ) as HTMLLinkElement;
-      favicon.href = `/static/base/images/${filename}`;
+      if (!favicon) {
+        return;
+      }
+      const newFavicon = document.querySelector(
+        `link${isBusy ? '.busy.favicon' : '.idle.favicon'}`
+      ) as HTMLLinkElement;
+      if (!newFavicon) {
+        return;
+      }
+      // If we have the two icons with the special classes, then toggle them.
+      if (favicon !== newFavicon) {
+        favicon.rel = '';
+        newFavicon.rel = 'icon';
+
+        // Firefox doesn't seem to recognize just changing rel, so we also
+        // reinsert the link into the DOM.
+        newFavicon.parentNode.replaceChild(newFavicon, newFavicon);
+      }
     });
   },
   requires: [],