From e263c7a722b8c2fcbe83596836653896a9e0258b Mon Sep 17 00:00:00 2001
From: Sleepy Flower <wuhao64@gmail.com>
Date: Wed, 27 Mar 2024 08:07:24 -0400
Subject: [PATCH] feat: use <progress> and <svg> for browser progress indicator
 instead of <canvas> (#5015)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fallback for progress when canvas isn't available

* Fix bugs preventing progress text from being updated

* Use a different class for progress text fallback

* Refactor: replace progress canvas with text

* refactor: add progress bar

* Refactor: Remove unused progress code

* Match progress design
hide progress bar and use SVG to recreate the ring bar

* Refactor: use css variables for ring size and color values
removed more canvas related code
removed an em

* Mirror styles changes to progress ring
renamed ring-whole to ring-flatlight and have ring highlight and flatlight be the inverse of each other
fix spelling error with decimalPlaces
use getComputedStyle for get the radius of the ring defined in CSS
use :is() CSS to simplify CSS code
Change stroke thickness math to better match previous look

* Trying to match progress canvas look on progress ring

---------

Co-authored-by: Josh Goldberg ✨ <git@joshuakgoldberg.com>
---
 lib/browser/progress.js | 138 ----------------------------------------
 lib/reporters/html.js   |  49 +++++++-------
 mocha.css               |  71 ++++++++++++++++-----
 3 files changed, 81 insertions(+), 177 deletions(-)
 delete mode 100644 lib/browser/progress.js

diff --git a/lib/browser/progress.js b/lib/browser/progress.js
deleted file mode 100644
index c82bc0824e..0000000000
--- a/lib/browser/progress.js
+++ /dev/null
@@ -1,138 +0,0 @@
-'use strict';
-
-/**
- @module browser/Progress
-*/
-
-/**
- * Expose `Progress`.
- */
-
-module.exports = Progress;
-
-/**
- * Initialize a new `Progress` indicator.
- */
-function Progress() {
-  this.percent = 0;
-  this.size(0);
-  this.fontSize(11);
-  this.font('helvetica, arial, sans-serif');
-}
-
-/**
- * Set progress size to `size`.
- *
- * @public
- * @param {number} size
- * @return {Progress} Progress instance.
- */
-Progress.prototype.size = function (size) {
-  this._size = size;
-  return this;
-};
-
-/**
- * Set text to `text`.
- *
- * @public
- * @param {string} text
- * @return {Progress} Progress instance.
- */
-Progress.prototype.text = function (text) {
-  this._text = text;
-  return this;
-};
-
-/**
- * Set font size to `size`.
- *
- * @public
- * @param {number} size
- * @return {Progress} Progress instance.
- */
-Progress.prototype.fontSize = function (size) {
-  this._fontSize = size;
-  return this;
-};
-
-/**
- * Set font to `family`.
- *
- * @param {string} family
- * @return {Progress} Progress instance.
- */
-Progress.prototype.font = function (family) {
-  this._font = family;
-  return this;
-};
-
-/**
- * Update percentage to `n`.
- *
- * @param {number} n
- * @return {Progress} Progress instance.
- */
-Progress.prototype.update = function (n) {
-  this.percent = n;
-  return this;
-};
-
-/**
- * Draw on `ctx`.
- *
- * @param {CanvasRenderingContext2d} ctx
- * @return {Progress} Progress instance.
- */
-Progress.prototype.draw = function (ctx) {
-  try {
-    var darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
-    var isDarkMode = !!darkMatcher.matches;
-    var lightColors = {
-      outerCircle: '#9f9f9f',
-      innerCircle: '#eee',
-      text: '#000'
-    };
-    var darkColors = {
-      outerCircle: '#888',
-      innerCircle: '#444',
-      text: '#fff'
-    };
-    var colors = isDarkMode ? darkColors : lightColors;
-
-    var percent = Math.min(this.percent, 100);
-    var size = this._size;
-    var half = size / 2;
-    var x = half;
-    var y = half;
-    var rad = half - 1;
-    var fontSize = this._fontSize;
-
-    ctx.font = fontSize + 'px ' + this._font;
-
-    var angle = Math.PI * 2 * (percent / 100);
-    ctx.clearRect(0, 0, size, size);
-
-    // outer circle
-    ctx.strokeStyle = colors.outerCircle;
-    ctx.beginPath();
-    ctx.arc(x, y, rad, 0, angle, false);
-    ctx.stroke();
-
-    // inner circle
-    ctx.strokeStyle = colors.innerCircle;
-    ctx.beginPath();
-    ctx.arc(x, y, rad - 1, 0, angle, true);
-    ctx.stroke();
-
-    // text
-    var text = this._text || (percent | 0) + '%';
-    var w = ctx.measureText(text).width;
-
-    ctx.fillStyle = colors.text;
-    ctx.fillText(text, x - w / 2 + 1, y + fontSize / 2 - 1);
-  } catch (ignore) {
-    // don't fail if we can't render progress
-  }
-  return this;
-};
diff --git a/lib/reporters/html.js b/lib/reporters/html.js
index 034fb07f01..ae4a4546f8 100644
--- a/lib/reporters/html.js
+++ b/lib/reporters/html.js
@@ -10,7 +10,6 @@
 
 var Base = require('./base');
 var utils = require('../utils');
-var Progress = require('../browser/progress');
 var escapeRe = require('escape-string-regexp');
 var constants = require('../runner').constants;
 var EVENT_TEST_PASS = constants.EVENT_TEST_PASS;
@@ -38,7 +37,7 @@ exports = module.exports = HTML;
 
 var statsTemplate =
   '<ul id="mocha-stats">' +
-  '<li class="progress"><canvas width="40" height="40"></canvas></li>' +
+  '<li class="progress-contain"><progress class="progress-element" max="100" value="0"></progress><svg class="progress-ring"><circle class="ring-flatlight" stroke-dasharray="100%,0%"/><circle class="ring-highlight" stroke-dasharray="0%,100%"/></svg><div class="progress-text">0%</div></li>' +
   '<li class="passes"><a href="javascript:void(0);">passes:</a> <em>0</em></li>' +
   '<li class="failures"><a href="javascript:void(0);">failures:</a> <em>0</em></li>' +
   '<li class="duration">duration: <em>0</em>s</li>' +
@@ -68,24 +67,16 @@ function HTML(runner, options) {
   var failures = items[2].getElementsByTagName('em')[0];
   var failuresLink = items[2].getElementsByTagName('a')[0];
   var duration = items[3].getElementsByTagName('em')[0];
-  var canvas = stat.getElementsByTagName('canvas')[0];
   var report = fragment('<ul id="mocha-report"></ul>');
   var stack = [report];
-  var progress;
-  var ctx;
+  var progressText = items[0].getElementsByTagName('div')[0];
+  var progressBar = items[0].getElementsByTagName('progress')[0];
+  var progressRing = [
+    items[0].getElementsByClassName('ring-flatlight')[0],
+    items[0].getElementsByClassName('ring-highlight')[0]];
+  var progressRingRadius = null; // computed CSS unavailable now, so set later
   var root = document.getElementById('mocha');
 
-  if (canvas.getContext) {
-    var ratio = window.devicePixelRatio || 1;
-    canvas.style.width = canvas.width;
-    canvas.style.height = canvas.height;
-    canvas.width *= ratio;
-    canvas.height *= ratio;
-    ctx = canvas.getContext('2d');
-    ctx.scale(ratio, ratio);
-    progress = new Progress();
-  }
-
   if (!root) {
     return error('#mocha div missing, add it to your document');
   }
@@ -115,10 +106,6 @@ function HTML(runner, options) {
   root.appendChild(stat);
   root.appendChild(report);
 
-  if (progress) {
-    progress.size(40);
-  }
-
   runner.on(EVENT_SUITE_BEGIN, function (suite) {
     if (suite.root) {
       return;
@@ -234,8 +221,26 @@ function HTML(runner, options) {
   function updateStats() {
     // TODO: add to stats
     var percent = ((stats.tests / runner.total) * 100) | 0;
-    if (progress) {
-      progress.update(percent).draw(ctx);
+    progressBar.value = percent;
+    if (progressText) {
+      // setting a toFixed that is too low, makes small changes to progress not shown
+      // setting it too high, makes the progress text longer then it needs to
+      // to address this, calculate the toFixed based on the magnitude of total
+      var decimalPlaces = Math.ceil(Math.log10(runner.total / 100));
+      text(
+        progressText,
+        percent.toFixed(Math.min(Math.max(decimalPlaces, 0), 100)) + '%'
+      );
+    }
+    if (progressRing) {
+      var radius = parseFloat(getComputedStyle(progressRing[0]).getPropertyValue('r'));
+      var wholeArc = Math.PI * 2 * radius;
+      var highlightArc = percent * (wholeArc / 100);
+      // The progress ring is in 2 parts, the flatlight color and highlight color.
+      // Rendering both on top of the other, seems to make a 3rd color on the edges.
+      // To create 1 whole ring with 2 colors, both parts are inverse of the other.
+      progressRing[0].style['stroke-dasharray'] = `0,${highlightArc}px,${wholeArc}px`;
+      progressRing[1].style['stroke-dasharray'] = `${highlightArc}px,${wholeArc}px`;
     }
 
     // update stats
diff --git a/mocha.css b/mocha.css
index b4d7e5b207..1e0d22249a 100644
--- a/mocha.css
+++ b/mocha.css
@@ -22,6 +22,9 @@
   --mocha-stats-color: #888;
   --mocha-stats-em-color: #000;
   --mocha-stats-hover-color: #eee;
+  --mocha-progress-ring-color: #eee;
+  --mocha-progress-ring-highlight-color: #9f9f9f;
+  --mocha-progress-text-color: #000;
   --mocha-error-color: #c00;
 
   --mocha-code-comment:  #ddd;
@@ -54,6 +57,9 @@
      --mocha-stats-color: #aaa;
      --mocha-stats-em-color: #fff;
      --mocha-stats-hover-color: #444;
+     --mocha-progress-ring-color: #444;
+     --mocha-progress-ring-highlight-color: #888;
+     --mocha-progress-text-color: #fff;
      --mocha-error-color: #f44;
 
      --mocha-code-comment: #ddd;
@@ -325,6 +331,10 @@ body {
 }
 
 #mocha-stats {
+  --ring-container-size: 40px;
+  --ring-size: 39px;
+  --ring-radius: calc(var(--ring-size) / 2);
+
   position: fixed;
   top: 15px;
   right: 10px;
@@ -334,20 +344,52 @@ body {
   z-index: 1;
 }
 
-#mocha-stats .progress {
+#mocha-stats .progress-contain {
   float: right;
-  padding-top: 0;
+  padding: 0;
+}
+
+#mocha-stats :is(.progress-element, .progress-text) {
+  width: var(--ring-container-size);
+  display: block;
+  top: 12px;
+  position: absolute;
+}
+
+#mocha-stats .progress-element {
+  visibility: hidden;
+  height: calc(var(--ring-container-size) / 2);
+}
+
+#mocha-stats .progress-text {
+  text-align: center;
+  text-overflow: clip;
+  overflow: hidden;
+  color: var(--mocha-stats-em-color);
+  font-size: 11px;
+}
 
-  /**
-   * Set safe initial values, so mochas .progress does not inherit these
-   * properties from Bootstrap .progress (which causes .progress height to
-   * equal line height set in Bootstrap).
-   */
-  height: auto;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  background-color: initial;
+#mocha-stats .progress-ring {
+  width: var(--ring-container-size);
+  height: var(--ring-container-size);
+}
+
+#mocha-stats :is(.ring-flatlight, .ring-highlight) {
+  --stroke-thickness: 1.65px;
+  --center: calc(var(--ring-container-size) / 2);
+  cx: var(--center);
+  cy: var(--center);
+  r: calc(var(--ring-radius) - calc(var(--stroke-thickness) / 2));
+  fill: hsla(0, 0%, 0%, 0);
+  stroke-width: var(--stroke-thickness);
+}
+
+#mocha-stats .ring-flatlight {
+  stroke: var(--mocha-progress-ring-color);
+}
+
+#mocha-stats .ring-highlight {
+  stroke: var(--mocha-progress-ring-highlight-color);
 }
 
 #mocha-stats em {
@@ -370,11 +412,6 @@ body {
   padding-top: 11px;
 }
 
-#mocha-stats canvas {
-  width: 40px;
-  height: 40px;
-}
-
 #mocha code .comment { color: var(--mocha-code-comment); }
 #mocha code .init { color: var(--mocha-code-init); }
 #mocha code .string { color: var(--mocha-code-string); }