From 1876f4e6b2c92f1d8b2faaeb5f331ea5104217d9 Mon Sep 17 00:00:00 2001 From: Sleepy Flower Date: Thu, 12 Oct 2023 17:33:18 -0400 Subject: [PATCH 01/10] Fallback for progress when canvas isn't available --- lib/reporters/html.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/lib/reporters/html.js b/lib/reporters/html.js index 034fb07f01..0472e5b733 100644 --- a/lib/reporters/html.js +++ b/lib/reporters/html.js @@ -73,6 +73,7 @@ function HTML(runner, options) { var stack = [report]; var progress; var ctx; + var progressText; var root = document.getElementById('mocha'); if (canvas.getContext) { @@ -84,6 +85,12 @@ function HTML(runner, options) { ctx = canvas.getContext('2d'); ctx.scale(ratio, ratio); progress = new Progress(); + } else { + // On some broswers, canvas might be unavailable for whatever reason. + // As such, we need a text version as a fallback + var progressTextFallback = fragment('0%'); + progressText = stat.getElementsByTagName('em')[0]; + items[0].appendChild(progressTextFallback); } if (!root) { @@ -236,6 +243,12 @@ function HTML(runner, options) { var percent = ((stats.tests / runner.total) * 100) | 0; if (progress) { progress.update(percent).draw(ctx); + } else 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 decmalPlaces = Math.ceil(Math.log10(runner.total/100)); + text(progressText, percent.toFixed(Math.min(Math.max(decmalPlaces), 0), 100)); } // update stats From 9504845ae22d8eae960daaa5ce513e40bf4d07b7 Mon Sep 17 00:00:00 2001 From: Sleepy Flower Date: Thu, 12 Oct 2023 18:46:23 -0400 Subject: [PATCH 02/10] Fix bugs preventing progress text from being updated --- lib/reporters/html.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/reporters/html.js b/lib/reporters/html.js index 0472e5b733..c32a8f300c 100644 --- a/lib/reporters/html.js +++ b/lib/reporters/html.js @@ -88,9 +88,9 @@ function HTML(runner, options) { } else { // On some broswers, canvas might be unavailable for whatever reason. // As such, we need a text version as a fallback - var progressTextFallback = fragment('0%'); - progressText = stat.getElementsByTagName('em')[0]; - items[0].appendChild(progressTextFallback); + var progressTextFallback = fragment('
  • progress: 0%
    • '); + progressText = progressTextFallback.getElementsByTagName('em')[0]; + items[0].replaceWith(progressTextFallback); } if (!root) { @@ -248,7 +248,7 @@ function HTML(runner, options) { // 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 decmalPlaces = Math.ceil(Math.log10(runner.total/100)); - text(progressText, percent.toFixed(Math.min(Math.max(decmalPlaces), 0), 100)); + text(progressText, percent.toFixed(Math.min(Math.max(decmalPlaces, 0), 100))); } // update stats From 747d3369cd6770eaacd5780194a9d93ba583641b Mon Sep 17 00:00:00 2001 From: Sleepy Flower Date: Thu, 12 Oct 2023 18:51:06 -0400 Subject: [PATCH 03/10] Use a different class for progress text fallback --- lib/reporters/html.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/reporters/html.js b/lib/reporters/html.js index c32a8f300c..357970a77e 100644 --- a/lib/reporters/html.js +++ b/lib/reporters/html.js @@ -88,7 +88,7 @@ function HTML(runner, options) { } else { // On some broswers, canvas might be unavailable for whatever reason. // As such, we need a text version as a fallback - var progressTextFallback = fragment('
  • progress: 0%
    • '); + var progressTextFallback = fragment('
  • progress: 0%
    • '); progressText = progressTextFallback.getElementsByTagName('em')[0]; items[0].replaceWith(progressTextFallback); } From 7d414624760f38e7e9c316616f1adaab79d1f88f Mon Sep 17 00:00:00 2001 From: Hao-qi Wu Date: Mon, 4 Mar 2024 17:50:44 -0500 Subject: [PATCH 04/10] Refactor: replace progress canvas with text --- lib/reporters/html.js | 27 ++++----------------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/lib/reporters/html.js b/lib/reporters/html.js index 357970a77e..54e8c27a56 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 = '
      ' + - '
      • ' + + '
    • ' + '
    • passes: 0
      • ' + '
    • failures: 0
      • ' + '
    • duration: 0s
      • ' + @@ -68,26 +67,14 @@ 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('
        '); var stack = [report]; - var progress; - var ctx; var progressText; 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(); - } else { + { // On some broswers, canvas might be unavailable for whatever reason. - // As such, we need a text version as a fallback + // As such, we need text and progress var progressTextFallback = fragment('
      • progress: 0%
        • '); progressText = progressTextFallback.getElementsByTagName('em')[0]; items[0].replaceWith(progressTextFallback); @@ -122,10 +109,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; @@ -241,9 +224,7 @@ 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); - } else if (progressText) { + 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 From 0ff8786f65a55ab02f2e74ebf4a177322e2c6233 Mon Sep 17 00:00:00 2001 From: Hao-qi Wu Date: Wed, 6 Mar 2024 17:18:16 -0500 Subject: [PATCH 05/10] refactor: add progress bar --- lib/reporters/html.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/lib/reporters/html.js b/lib/reporters/html.js index 54e8c27a56..0984446d69 100644 --- a/lib/reporters/html.js +++ b/lib/reporters/html.js @@ -37,7 +37,7 @@ exports = module.exports = HTML; var statsTemplate = '
          ' + - '
        • ' + + '
        • 0%
          • ' + '
        • passes: 0
          • ' + '
        • failures: 0
          • ' + '
        • duration: 0s
          • ' + @@ -69,17 +69,10 @@ function HTML(runner, options) { var duration = items[3].getElementsByTagName('em')[0]; var report = fragment('
            '); var stack = [report]; - var progressText; + var progressText = items[0].getElementsByTagName('em')[0]; + var progressBar = items[0].getElementsByTagName('progress')[0]; var root = document.getElementById('mocha'); - { - // On some broswers, canvas might be unavailable for whatever reason. - // As such, we need text and progress - var progressTextFallback = fragment('
          • progress: 0%
            • '); - progressText = progressTextFallback.getElementsByTagName('em')[0]; - items[0].replaceWith(progressTextFallback); - } - if (!root) { return error('#mocha div missing, add it to your document'); } @@ -224,12 +217,16 @@ function HTML(runner, options) { function updateStats() { // TODO: add to stats var percent = ((stats.tests / runner.total) * 100) | 0; + 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 decmalPlaces = Math.ceil(Math.log10(runner.total/100)); - text(progressText, percent.toFixed(Math.min(Math.max(decmalPlaces, 0), 100))); + var decmalPlaces = Math.ceil(Math.log10(runner.total / 100)); + text( + progressText, + percent.toFixed(Math.min(Math.max(decmalPlaces, 0), 100)) + ); } // update stats From 214cb8290bacfe7959648ad8e63c14ecd4ce3a13 Mon Sep 17 00:00:00 2001 From: Hao-qi Wu Date: Thu, 7 Mar 2024 12:17:11 -0500 Subject: [PATCH 06/10] Refactor: Remove unused progress code --- lib/browser/progress.js | 138 ---------------------------------------- lib/reporters/html.js | 2 +- 2 files changed, 1 insertion(+), 139 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 0984446d69..2b961e816a 100644 --- a/lib/reporters/html.js +++ b/lib/reporters/html.js @@ -37,7 +37,7 @@ exports = module.exports = HTML; var statsTemplate = '
              ' + - '
            • 0%
              • ' + + '
            • 0%
              • ' + '
            • passes: 0
              • ' + '
            • failures: 0
              • ' + '
            • duration: 0s
              • ' + From b174e5cec9714fcbeb398d834c523d5eb551c75e Mon Sep 17 00:00:00 2001 From: Hao-qi Wu Date: Thu, 7 Mar 2024 18:44:39 -0500 Subject: [PATCH 07/10] Match progress design hide progress bar and use SVG to recreate the ring bar --- lib/reporters/html.js | 9 +++++++- mocha.css | 53 ++++++++++++++++++++++++++++++++----------- 2 files changed, 48 insertions(+), 14 deletions(-) diff --git a/lib/reporters/html.js b/lib/reporters/html.js index 2b961e816a..0ca63102d4 100644 --- a/lib/reporters/html.js +++ b/lib/reporters/html.js @@ -37,7 +37,7 @@ exports = module.exports = HTML; var statsTemplate = '
                ' + - '
              • 0%
                • ' + + '
              • 0%
                • ' + '
              • passes: 0
                • ' + '
              • failures: 0
                • ' + '
              • duration: 0s
                • ' + @@ -71,6 +71,7 @@ function HTML(runner, options) { var stack = [report]; var progressText = items[0].getElementsByTagName('em')[0]; var progressBar = items[0].getElementsByTagName('progress')[0]; + var progressRing = items[0].getElementsByClassName('ring-highlight')[0]; var root = document.getElementById('mocha'); if (!root) { @@ -228,6 +229,12 @@ function HTML(runner, options) { percent.toFixed(Math.min(Math.max(decmalPlaces, 0), 100)) ); } + if (progressRing) { + var radius = 19; // to do, figure out how to match with css + var wholeArc = Math.PI * 2 * radius; + var highlightArc = percent * (wholeArc / 100); + progressRing.style['stroke-dasharray'] = `${highlightArc}px,${wholeArc}px`; + } // update stats var ms = new Date() - stats.start; diff --git a/mocha.css b/mocha.css index b4d7e5b207..91cbdbe658 100644 --- a/mocha.css +++ b/mocha.css @@ -334,20 +334,47 @@ body { z-index: 1; } -#mocha-stats .progress { +#mocha-stats .progress-contain { float: right; - padding-top: 0; - - /** - * 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; + padding: 0; +} + +#mocha-stats .progress-element { + visibility: hidden; + width: 40px; + height: 20px; + position: absolute; + top: 11px; /* padding */ + display: block; +} + +#mocha-stats .progress-text { + text-align: center; + position: absolute; + width: 40px; + display: block; + top: 11px; /* padding */ +} + +#mocha-stats .progress-ring { + width: 40px; + height: 40px; +} + +#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; +} + +#mocha-stats .ring-whole { + stroke: var(--mocha-stats-color); +} + +#mocha-stats .ring-highlight { + stroke: var(--mocha-stats-em-color); } #mocha-stats em { From 8de9c397375f7be550c72ee8dd6fe072cf137a1a Mon Sep 17 00:00:00 2001 From: Hao-qi Wu Date: Mon, 11 Mar 2024 19:43:06 -0400 Subject: [PATCH 08/10] Refactor: use css variables for ring size and color values removed more canvas related code removed an em --- lib/reporters/html.js | 6 +++--- mocha.css | 44 ++++++++++++++++++++++++++----------------- 2 files changed, 30 insertions(+), 20 deletions(-) diff --git a/lib/reporters/html.js b/lib/reporters/html.js index 0ca63102d4..1181af5330 100644 --- a/lib/reporters/html.js +++ b/lib/reporters/html.js @@ -37,7 +37,7 @@ exports = module.exports = HTML; var statsTemplate = '
                  ' + - '
                • 0%
                  • ' + + '
                • 0%
                  • ' + '
                • passes: 0
                  • ' + '
                • failures: 0
                  • ' + '
                • duration: 0s
                  • ' + @@ -69,7 +69,7 @@ function HTML(runner, options) { var duration = items[3].getElementsByTagName('em')[0]; var report = fragment('
                    '); 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) { diff --git a/mocha.css b/mocha.css index 91cbdbe658..72b44de13f 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,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); } From 8deabc75a92522d66351c553c79355dbb915364a Mon Sep 17 00:00:00 2001 From: Hao-qi Wu Date: Tue, 26 Mar 2024 18:23:22 -0400 Subject: [PATCH 09/10] 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 --- lib/reporters/html.js | 19 +++++++++++++------ mocha.css | 26 ++++++++++++-------------- 2 files changed, 25 insertions(+), 20 deletions(-) diff --git a/lib/reporters/html.js b/lib/reporters/html.js index 1181af5330..ae4a4546f8 100644 --- a/lib/reporters/html.js +++ b/lib/reporters/html.js @@ -37,7 +37,7 @@ exports = module.exports = HTML; var statsTemplate = '
                      ' + - '
                    • 0%
                      • ' + + '
                    • 0%
                      • ' + '
                    • passes: 0
                      • ' + '
                    • failures: 0
                      • ' + '
                    • duration: 0s
                      • ' + @@ -71,7 +71,10 @@ function HTML(runner, options) { var stack = [report]; var progressText = items[0].getElementsByTagName('div')[0]; var progressBar = items[0].getElementsByTagName('progress')[0]; - var progressRing = items[0].getElementsByClassName('ring-highlight')[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 (!root) { @@ -223,17 +226,21 @@ function HTML(runner, options) { // 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 decmalPlaces = Math.ceil(Math.log10(runner.total / 100)); + var decimalPlaces = Math.ceil(Math.log10(runner.total / 100)); text( progressText, - percent.toFixed(Math.min(Math.max(decmalPlaces, 0), 100)) + '%' + percent.toFixed(Math.min(Math.max(decimalPlaces, 0), 100)) + '%' ); } if (progressRing) { - var radius = 19; // to do, figure out how to match with css + var radius = parseFloat(getComputedStyle(progressRing[0]).getPropertyValue('r')); var wholeArc = Math.PI * 2 * radius; var highlightArc = percent * (wholeArc / 100); - progressRing.style['stroke-dasharray'] = `${highlightArc}px,${wholeArc}px`; + // 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 72b44de13f..7521580809 100644 --- a/mocha.css +++ b/mocha.css @@ -348,24 +348,24 @@ body { padding: 0; } +#mocha-stats :is(.progress-element, .progress-text) { + width: var(--ring-size); + display: block; + top: 12px; + position: absolute; +} + #mocha-stats .progress-element { visibility: hidden; - width: var(--ring-size); height: calc(var(--ring-size) / 2); - position: absolute; - top: 11px; /* padding */ - display: block; } #mocha-stats .progress-text { text-align: center; - position: absolute; - width: var(--ring-size); - display: block; - top: 11px; /* padding */ text-overflow: clip; overflow: hidden; color: var(--mocha-stats-em-color); + font-size: 11px; } #mocha-stats .progress-ring { @@ -373,19 +373,17 @@ body { height: var(--ring-size); } -#mocha-stats .ring-whole, #mocha-stats .ring-highlight { +#mocha-stats :is(.ring-flatlight, .ring-highlight) { --stroke-thickness: 1px; cx: var(--ring-radius); cy: var(--ring-radius); - r: calc(var(--ring-radius) - var(--stroke-thickness)); /* radius - stroke */ + r: calc(var(--ring-radius) - calc(var(--stroke-thickness) / 2)); fill: hsla(0, 0%, 0%, 0); - stroke-width: calc(var(--stroke-thickness) * 2); + stroke-width: var(--stroke-thickness); } -#mocha-stats .ring-whole { +#mocha-stats .ring-flatlight { 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 { From c236f29eabc90df0896f2d7839af7fa16452f01b Mon Sep 17 00:00:00 2001 From: Hao-qi Wu Date: Tue, 26 Mar 2024 19:30:55 -0400 Subject: [PATCH 10/10] Trying to match progress canvas look on progress ring --- mocha.css | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/mocha.css b/mocha.css index 7521580809..1e0d22249a 100644 --- a/mocha.css +++ b/mocha.css @@ -331,7 +331,8 @@ body { } #mocha-stats { - --ring-size: 40px; + --ring-container-size: 40px; + --ring-size: 39px; --ring-radius: calc(var(--ring-size) / 2); position: fixed; @@ -349,7 +350,7 @@ body { } #mocha-stats :is(.progress-element, .progress-text) { - width: var(--ring-size); + width: var(--ring-container-size); display: block; top: 12px; position: absolute; @@ -357,7 +358,7 @@ body { #mocha-stats .progress-element { visibility: hidden; - height: calc(var(--ring-size) / 2); + height: calc(var(--ring-container-size) / 2); } #mocha-stats .progress-text { @@ -369,14 +370,15 @@ body { } #mocha-stats .progress-ring { - width: var(--ring-size); - height: var(--ring-size); + width: var(--ring-container-size); + height: var(--ring-container-size); } #mocha-stats :is(.ring-flatlight, .ring-highlight) { - --stroke-thickness: 1px; - cx: var(--ring-radius); - cy: var(--ring-radius); + --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);