Refactor: use css variables for ring size and color values

removed more canvas related code
removed an em

Author: yourWaifu

lib/reporters/html.js

@@ -37,7 +37,7 @@ exports = module.exports = HTML;
 
 var statsTemplate =
   '<ul id="mocha-stats">' +
-  '<li class="progress-contain"><progress class="progress-element" max="100" value="0"></progress><svg class="progress-ring"><circle class="ring-whole"/><circle class="ring-highlight" stroke-dasharray="0%,100%"/></svg><div class="progress-text"><em>0</em>%</div></li>' +
+  '<li class="progress-contain"><progress class="progress-element" max="100" value="0"></progress><svg class="progress-ring"><circle class="ring-whole"/><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>' +
@@ -69,7 +69,7 @@ function HTML(runner, options) {
   var duration = items[3].getElementsByTagName('em')[0];
   var report = fragment('<ul id="mocha-report"></ul>');
   var stack = [report];
-  var progressText = items[0].getElementsByTagName('em')[0];
+  var progressText = items[0].getElementsByTagName('div')[0];
   var progressBar = items[0].getElementsByTagName('progress')[0];
   var progressRing = items[0].getElementsByClassName('ring-highlight')[0];
   var root = document.getElementById('mocha');
@@ -226,7 +226,7 @@ function HTML(runner, options) {
       var decmalPlaces = Math.ceil(Math.log10(runner.total / 100));
       text(
         progressText,
-        percent.toFixed(Math.min(Math.max(decmalPlaces, 0), 100))
+        percent.toFixed(Math.min(Math.max(decmalPlaces, 0), 100)) + '%'
       );
     }
     if (progressRing) {

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,9 @@ body {
 }
 
 #mocha-stats {
+  --ring-size: 40px;
+  --ring-radius: calc(var(--ring-size) / 2);
+
   position: fixed;
   top: 15px;
   right: 10px;
@@ -341,8 +350,8 @@ body {
 
 #mocha-stats .progress-element {
   visibility: hidden;
-  width: 40px;
-  height: 20px;
+  width: var(--ring-size);
+  height: calc(var(--ring-size) / 2);
   position: absolute;
   top: 11px; /* padding */
   display: block;
@@ -351,30 +360,36 @@ body {
 #mocha-stats .progress-text {
   text-align: center;
   position: absolute;
-  width: 40px;
+  width: var(--ring-size);
   display: block;
   top: 11px; /* padding */
+  text-overflow: clip;
+  overflow: hidden;
+  color: var(--mocha-stats-em-color);
 }
 
 #mocha-stats .progress-ring {
-  width: 40px;
-  height: 40px;
+  width: var(--ring-size);
+  height: var(--ring-size);
 }
 
 #mocha-stats .ring-whole, #mocha-stats .ring-highlight {
-  cx: 20px; /* half of width */
-  cy: 20px; /* half of height */
-  r: 19px; /* radius - stroke */
-  fill: var(--mocha-bg-color);
-  stroke-width: 2px;
+  --stroke-thickness: 1px;
+  cx: var(--ring-radius);
+  cy: var(--ring-radius);
+  r: calc(var(--ring-radius) - var(--stroke-thickness)); /* radius - stroke */
+  fill: hsla(0, 0%, 0%, 0);
+  stroke-width: calc(var(--stroke-thickness) * 2);
 }
 
 #mocha-stats .ring-whole {
-  stroke: var(--mocha-stats-color);
+  stroke: var(--mocha-progress-ring-color);
+  stroke-width: calc(var(--stroke-thickness) * 1.8);
+  /* slightly smaller to fix strange edge issue */
 }
 
 #mocha-stats .ring-highlight {
-  stroke: var(--mocha-stats-em-color);
+  stroke: var(--mocha-progress-ring-highlight-color);
 }
 
 #mocha-stats em {
@@ -397,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); }