View Issue Details
|ID||Project||Category||View Status||Date Submitted||Last Update|
|0019501||mantisbt||roadmap||public||2015-03-14 15:40||2015-03-16 16:12|
|Target Version||1.3.0-beta.2||Fixed in Version||1.3.0-beta.2|
|Summary||0019501: The progress bar in Roadmap is broken|
Color always fills 100% of the bar, regardless of actual progress percentage
|Tags||No tags attached.|
roadmap_progress_bar.png (6,677 bytes)
roadmap_progress_bar.png (6,677 bytes)
This is caused by CSP blocking inline styles.
As a quick (maybe even final) fix we can change header to
header( 'Content-Security-Policy: default-src \'self\'; style-src \'self\' \'unsafe-inline\'' . $t_avatar_img_allow . '; frame-ancestors \'none\'' );
The curious thing is that it works in FF and Safari, but Safari shows the following new error in console after the change
Thanks for your note.
I know it's CSP... In fact I initially did just what you proposed below, but for security reasons I'd rather avoid adding style-src 'self' as a permanent solution, although I suppose it could be OK as temporary workaround.
I started playing around with replacing the progress bar by a jQuery widget, which I think would be more elegant.
Sorry, that's what I meant.
Why not ? I mean, we are bundling jQuery/jQueryUI... what's the point if we then refrain from using it ?
I thought about this some more, and I think that it is an acceptable risk to selectively enable inline styles for the roadmap page only, as a temporary workaround for this issue. We can revisit this later on.
I'm still interested in hearing your opinion on use of jQuery though, but maybe the mailing list is a better channel for that discussion.
Doing it the same way we are handling status colors should work (css/status_config.php)
The problem with this approach, is that while the CSS is dynamically generated, it is still static from the perspective of the page using it, i.e. the classes are defined once when the DCSS is included. In the case of the progress bars, we are setting their width at run time.
So, following this approach, the php script would have to generate 101 distinct CSS classes (one per percentage point), e.g. width0, width1, width2, etc until width100, to define all possible widths. That's easy enough, but not very efficient.
You are right.
TBH, I like none of both approaches.
Another approach could be to use HTML5 canvas or SVG.
MantisBT: master 62bfce99
2015-03-15 18:53:30Details Diff
|CSP: enable inline style for roadmap_page.php
This is a quick&dirty workaround that resolves the issue of broken
progress bars in the Roadmap, where color always fills 100% of the bar,
regardless of the actual progress percentage.
|mod - core/http_api.php||Diff File|
|2015-03-14 15:40||dregad||New Issue|
|2015-03-14 15:40||dregad||File Added: roadmap_progress_bar.png|
|2015-03-14 15:40||dregad||Status||new => confirmed|
|2015-03-14 15:41||dregad||Target Version||=> 1.3.0-beta.2|
|2015-03-14 17:43||atrol||Note Added: 0049232|
|2015-03-15 07:01||atrol||Relationship added||related to 0017491|
|2015-03-15 13:14||dregad||Note Added: 0049235|
|2015-03-15 13:31||atrol||Note Added: 0049236|
|2015-03-15 13:34||atrol||Note Edited: 0049236||View Revisions|
|2015-03-15 18:18||dregad||Note Added: 0049237|
|2015-03-15 18:37||dregad||Note Edited: 0049237||View Revisions|
|2015-03-15 19:00||dregad||Note Added: 0049238|
|2015-03-15 19:00||dregad||Assigned To||=> dregad|
|2015-03-15 19:00||dregad||Status||confirmed => assigned|
|2015-03-15 19:00||dregad||Changeset attached||=> MantisBT master 62bfce99|
|2015-03-15 19:00||dregad||Status||assigned => resolved|
|2015-03-15 19:00||dregad||Resolution||open => fixed|
|2015-03-15 19:00||dregad||Fixed in Version||=> 1.3.0-beta.2|
|2015-03-15 19:58||dregad||Status||resolved => closed|
|2015-03-16 03:50||atrol||Note Added: 0049240|
|2015-03-16 05:40||dregad||Note Added: 0049242|
|2015-03-16 16:07||atrol||Relationship added||related to 0019508|
|2015-03-16 16:12||atrol||Note Added: 0049244|