diff --git a/frontend/src/progress.js b/frontend/src/progress.js index b054a86d..924102b4 100644 --- a/frontend/src/progress.js +++ b/frontend/src/progress.js @@ -1,10 +1,12 @@ -const { bytes } = require('./utils'); +const { bytes, percent } = require('./utils'); const $ = require('jquery'); require('jquery-circle-progress'); let $progress = null; let $percent = null; let $text = null; +let title = null; +let updateTitle = false; document.addEventListener('DOMContentLoaded', function() { $percent = $('.percent-number'); @@ -17,12 +19,25 @@ document.addEventListener('DOMContentLoaded', function() { size: 158, animation: { duration: 300 } }); + title = document.querySelector('title'); +}); + +document.addEventListener('blur', function() { + updateTitle = true; +}); + +document.addEventListener('focus', function() { + updateTitle = false; + return title && (title.textContent = 'Firefox Send'); }); function setProgress(params) { - const percent = params.complete / params.total; - $progress.circleProgress('value', percent); - $percent.text(`${Math.floor(percent * 100)}`); + const ratio = params.complete / params.total; + $progress.circleProgress('value', ratio); + $percent.text(Math.floor(ratio * 100)); + if (updateTitle) { + title.textContent = percent(ratio); + } document.l10n .formatValue('fileSizeProgress', { partialSize: bytes(params.complete), diff --git a/frontend/src/utils.js b/frontend/src/utils.js index 02a77e30..92c59cb3 100644 --- a/frontend/src/utils.js +++ b/frontend/src/utils.js @@ -123,10 +123,17 @@ function bytes(num) { return `${nStr}${UNITS[exponent]}`; } +function percent(ratio) { + return LOCALIZE_NUMBERS + ? ratio.toLocaleString(navigator.languages, { style: 'percent' }) + : `${Math.floor(ratio * 100)}%`; +} + const ONE_DAY_IN_MS = 86400000; module.exports = { bytes, + percent, copyToClipboard, arrayToHex, hexToArray,