Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: use <progress> and <svg> for browser progress indicator instead of <canvas> #5015

Merged
merged 12 commits into from
Mar 27, 2024

Conversation

yourWaifu
Copy link
Contributor

@yourWaifu yourWaifu commented Oct 12, 2023

Description of the Change

It's possible for HTMLCanvasElement to not be available. In the HTML reporter, if canvas isn't available, there's no fallback to see the progress percentage.

here's a picture:
image

Alternate Designs

Using CSS flex-basis to create a progress bar, this is good alternative and can also work. However, to ensure compatibility, I decided to use text as the fallback because I know it'll work.

Why should this be in core?

Seems to be a bug that makes it very hard to see the progress of test.

Benefits

The progress can be seen regardless if canvas is available

Possible Drawbacks

Very niche, 99% of cases, canvas is supported

Applicable issues

Fixes #5113.

@linux-foundation-easycla
Copy link

linux-foundation-easycla bot commented Oct 12, 2023

CLA Signed

The committers listed above are authorized under a signed CLA.

@yourWaifu
Copy link
Contributor Author

yourWaifu commented Oct 12, 2023

I'll ask my employer about this easyCLA thing. Edit: I asked, waiting for response

Copy link
Member

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this direction! In fact, I'd even say let's go with a full switch, rather than a fallback? 🔥

lib/reporters/html.js Outdated Show resolved Hide resolved
@JoshuaKGoldberg JoshuaKGoldberg added the status: waiting for author waiting on response from OP - more information needed label Mar 4, 2024
@JoshuaKGoldberg JoshuaKGoldberg changed the title Fallback for progress when canvas isn't available feat: fallback for progress when canvas isn't available Mar 4, 2024
@yourWaifu
Copy link
Contributor Author

yourWaifu commented Mar 4, 2024

Sure, I can do that. The client that I was working with doesn't support canvas very well, but progress element is supported, so this does sound like a better solution.

@yourWaifu
Copy link
Contributor Author

Update Screenshot: Edge top left, Firefox bottom left, Webkit right
image

@JoshuaKGoldberg
Copy link
Member

Just to be explicit: I don't think we should change the visual design in this PR. We should keep to the same progress visualization as was being done with canvas.

@coveralls
Copy link

coveralls commented Mar 7, 2024

Coverage Status

coverage: 94.358% (-0.001%) from 94.359%
when pulling c236f29 on yourWaifu:html-progress-text-fallback
into a2e600d on mochajs:master.

@yourWaifu
Copy link
Contributor Author

yourWaifu commented Mar 7, 2024

Keeping both the <progress> element and the design will be tricky, but possible with multiple CSS transforms and progress elements to warp the bars into a circle. However, changing the rounded ends of the bar might need to use nonstandard CSS to achieve. We could instead replace element with HTML elements with JS to set CSS gradients to show progress. However, doing that would move up the browser version requirements: https://caniuse.com/?search=conic-gradient

@JoshuaKGoldberg
Copy link
Member

An alternative could be to use an <svg> to get access to more fancy UI features while visually hiding the <progress>. A quick Google for svg radial progress bar found me https://stackoverflow.com/questions/66990496/simple-svg-css-progress-circle and https://stackoverflow.com/questions/72676042/set-svg-progress-bar-percentage-in-javascript. <clipPath> might be useful too.

As for the rounded bar ends, where do you see those? This is what I get locally:

Screen.Recording.2024-03-07.at.3.08.16.PM.mov

Note the lack of animation or rounded-ness.

hide progress bar and use SVG to recreate the ring bar
@yourWaifu
Copy link
Contributor Author

yourWaifu commented Mar 7, 2024

Now using SVG for the progress ring. Progress text is in HTML.
image

@JoshuaKGoldberg
Copy link
Member

Just a heads up @yourWaifu, I merged the latest master into this branch. You'll want to git pull locally to bring those changes in.

Copy link
Member

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌 Progress! This is getting pretty close to merge, I think. Thanks for all the iteration!

Requesting changes on a few things that changed unintentionally. Please make sure the new visual thing is as close to the same as the old one as is straightforward to go for, including approximate border widths, colors, and font styles.

Once you think it's ready for re-review please re-request my review (as in, with the re-request button on GitHub) and I'll be excited to take another look.

mocha.css Outdated Show resolved Hide resolved
mocha.css Outdated Show resolved Hide resolved
lib/reporters/html.js Outdated Show resolved Hide resolved
removed more canvas related code
removed an em
Copy link
Member

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool! I think we can simplify the code here a bit more, and get the visual changes reduced. Progress! 🚀

lib/reporters/html.js Outdated Show resolved Hide resolved
mocha.css Outdated Show resolved Hide resolved
mocha.css Outdated Show resolved Hide resolved
mocha.css Outdated Show resolved Hide resolved
lib/reporters/html.js Outdated Show resolved Hide resolved
mocha.css Outdated Show resolved Hide resolved
lib/reporters/html.js Outdated Show resolved Hide resolved
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
@JoshuaKGoldberg JoshuaKGoldberg removed the status: waiting for author waiting on response from OP - more information needed label Mar 27, 2024
Copy link
Member

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoohoo, thanks for this @yourWaifu! I really appreciate you iterating with me on it 🤝. The code is looking clean and the page better supports dark mode too. Plus this will help us avoid annoying the canvas package dependency in developing Mocha. A win all around!

Zach Galifianakis flying through the air with a stern look on his face. Caption: "#WINNING"

@JoshuaKGoldberg JoshuaKGoldberg changed the title feat: fallback for progress when canvas isn't available feat: use <svg> for browser progress indicator instead of <canvas> Mar 27, 2024
@JoshuaKGoldberg JoshuaKGoldberg changed the title feat: use <svg> for browser progress indicator instead of <canvas> feat: use <progress> and <svg> for browser progress indicator instead of <canvas> Mar 27, 2024
@JoshuaKGoldberg JoshuaKGoldberg merged commit e263c7a into mochajs:master Mar 27, 2024
27 checks passed
@yourWaifu yourWaifu deleted the html-progress-text-fallback branch April 25, 2024 22:51
@JoshuaKGoldberg
Copy link
Member

This was released in mocha@10.5.0. 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🚀 Feature: Switch from <canvas> to native <progress> element in browser reporter
3 participants