-
Improvement
-
Resolution: Fixed
-
Minor
-
Future Dev
-
MOODLE_403_STABLE
-
MDL-78341-progress-bar-style -
1) Open the EN lang pack for editing
https://master.localhost/admin/tool/customlang/index.php?lng=en
2) Click 'Open language pack for editing'
3) Confirm you see a large animated progress bar (animated diagonal bars, not just the increasing %)
4) Confirm when it is compete it turns green and is no longer animated
5) Open up the http replace tool:
https://master.localhost/admin/tool/httpsreplace/tool.php
6) Using a mobile device or the dev tools in responsive mode resize the window so the progress bar is quite small eg 320 pixels wide
7) Hack this file to make the progress slower and easier to view
--- a/admin/tool/httpsreplace/classes/url_finder.php+++ b/admin/tool/httpsreplace/classes/url_finder.php@@ -152,6 +152,7 @@ class url_finder {
$numberoftables = count($tables);$tablenumber = 0;
foreach ($tables as $table) {+usleep(100000); // <<------
if ($progress) {
$progress->update($tablenumber, $numberoftables, get_string('searching', 'tool_httpsreplace', $table));
$tablenumber++;8) Reload and confirm that the status is truncated using an ellipsis and doesn't wrap which causes temporary re-layout glitches
9) Confirm that all percentages are consistently 1 decimal point, eg 1.9 -> 2.0 -> 2.1 rather than 1.9 -> 2 -> 2.1 which reduces layout shifts and makes the animations smoother.
10) Confirm that as the percentage ticks over from 9% to 10% the text to the left of it doesn't shift
11) Confirm that as you get close to the finish you never see 'now' as the estimate, its minimum is always '1 sec' just before it actually finishes.
1) Open the EN lang pack for editing https://master.localhost/admin/tool/customlang/index.php?lng=en 2) Click 'Open language pack for editing' 3) Confirm you see a large animated progress bar (animated diagonal bars, not just the increasing %) 4) Confirm when it is compete it turns green and is no longer animated 5) Open up the http replace tool: https://master.localhost/admin/tool/httpsreplace/tool.php 6) Using a mobile device or the dev tools in responsive mode resize the window so the progress bar is quite small eg 320 pixels wide 7) Hack this file to make the progress slower and easier to view --- a/admin/tool/httpsreplace/classes/url_finder.php +++ b/admin/tool/httpsreplace/classes/url_finder.php @@ - 152 , 6 + 152 , 7 @@ class url_finder { $numberoftables = count($tables); $tablenumber = 0 ; foreach ($tables as $table) { +usleep( 100000 ); // <<------ if ($progress) { $progress->update($tablenumber, $numberoftables, get_string( 'searching' , 'tool_httpsreplace' , $table)); $tablenumber++; 8) Reload and confirm that the status is truncated using an ellipsis and doesn't wrap which causes temporary re-layout glitches 9) Confirm that all percentages are consistently 1 decimal point, eg 1.9 -> 2.0 -> 2.1 rather than 1.9 -> 2 -> 2.1 which reduces layout shifts and makes the animations smoother. 10) Confirm that as the percentage ticks over from 9% to 10% the text to the left of it doesn't shift 11) Confirm that as you get close to the finish you never see 'now' as the estimate, its minimum is always '1 sec' just before it actually finishes.
Somewhere along the line the progress bars turned from pure html using bootstrap into a html progress bar which inherits some default styling from the browser which has messed up some of the bootstrap styles, in particular it is no longer full width, it is 10em.
Unrelated but the animated progress bars no longer work, even in the standalone component library. Maybe this was an accessibility issue?
I think both should be fixed together to bring the progress bar back to its former glory. This could be treated as a bug as it is a visual regression.
Master:
Bootstrap in core:
- Testing discovered
-
-
- Closed
-
