Favicon now shows visual progress

app/controller.js

@@ -7,6 +7,7 @@ import okDialog from './ui/okDialog';
 import copyDialog from './ui/copyDialog';
 import shareDialog from './ui/shareDialog';
 import signupDialog from './ui/signupDialog';
+import faviconProgressbar from './ui/faviconProgressbar';
 import surveyDialog from './ui/surveyDialog';
 
 export default function(state, emitter) {
@@ -29,6 +30,7 @@ export default function(state, emitter) {
     if (updateTitle) {
       emitter.emit('DOMTitleChange', percent(state.transfer.progressRatio));
     }
+    faviconProgressbar.updateFavicon(state.transfer.progressRatio);
     render();
   }
 
@@ -37,6 +39,7 @@ export default function(state, emitter) {
     document.addEventListener('focus', () => {
       updateTitle = false;
       emitter.emit('DOMTitleChange', 'Firefox Send');
+      faviconProgressbar.updateFavicon(0);
     });
     checkFiles();
   });
@@ -83,6 +86,7 @@ export default function(state, emitter) {
 
   emitter.on('cancel', () => {
     state.transfer.cancel();
+    faviconProgressbar.updateFavicon(0);
   });
 
   emitter.on('addFiles', async ({ files }) => {
@@ -161,6 +165,7 @@ export default function(state, emitter) {
       state.storage.totalUploads += 1;
       const duration = Date.now() - start;
       metrics.completedUpload(archive, duration);
+      faviconProgressbar.updateFavicon(0);
 
       state.storage.addFile(ownedFile);
       // TODO integrate password into /upload request
@@ -252,6 +257,7 @@ export default function(state, emitter) {
         duration,
         password_protected: file.requiresPassword
       });
+      faviconProgressbar.updateFavicon(0);
     } catch (err) {
       if (err.message === '0') {
         // download cancelled

app/ui/faviconProgressbar.js

@@ -0,0 +1,41 @@
+const { platform } = require('../utils');
+const assets = require('../../common/assets');
+
+const size = 32;
+const loaderWidth = 5;
+const loaderColor = '#0090ed';
+
+function drawCircle(canvas, context, color, lineWidth, outerWidth, percent) {
+  canvas.width = canvas.height = outerWidth;
+  context.translate(outerWidth * 0.5, outerWidth * 0.5);
+  context.rotate(-Math.PI * 0.5);
+  const radius = (outerWidth - lineWidth) * 0.5;
+  context.beginPath();
+  context.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
+  context.strokeStyle = color;
+  context.lineCap = 'square';
+  context.lineWidth = lineWidth;
+  context.stroke();
+}
+
+function drawNewFavicon(progressRatio) {
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  drawCircle(canvas, context, '#efefef', loaderWidth, size, 1);
+  drawCircle(canvas, context, loaderColor, loaderWidth, size, progressRatio);
+  return canvas.toDataURL();
+}
+
+module.exports.updateFavicon = function(progressRatio) {
+  if (platform() === 'web') {
+    const link = document.querySelector("link[rel='icon'][sizes='32x32']");
+    const progress = progressRatio * 100;
+    if (progress === 0 || progress === 100) {
+      link.type = 'image/png';
+      link.href = assets.get('favicon-32x32.png');
+      return;
+    }
+
+    link.href = drawNewFavicon(progressRatio);
+  }
+};