feat: Toobar Debug CSS + Fix DESIGN

[ALTITUDE-DEV-FR]

Description

An update that adds an HTML debug and modifies some icons, including the hotbar reload and core icons in SVG format. It also includes adding orange color to the SVG icon of the framework upon clicking on an action.

The new debug CSS/HTML show a trait for all html block present in page.

Vidéo : https://www.loom.com/share/d84560b5c5544a2fb7fc883f6f8e36f2

Checklist:

• Securely signed commits
• Component(s) with PHPDoc blocks, only if necessary or adds value
• Unit testing, with >80% coverage
• User guide updated
• Conforms to style guide

[lonnieezell]

Thank you for the PR. I'm not sure whether the HTML debug view is something that belongs in the framework, honestly. It's a nice feature but seems like one that people will want to keep adding on top of to make it do more things. As a PHP framework I'm leery to go down the HTML editor route. Seems better as a browser plugin to me.

We will see what the others have to say.

[lonnieezell]

Maybe it would be better to make the toolbar support addons? Then this functionality could be a community package and could grow to be much larger than we would want to support here.

[kenjis]

I don't know if it will be actually used, but I feel it's cool!
However, I think Lonnie is right.

One thing, if you enable CSP, an error occurs:

[kenjis]

One more thing. We use SASS for Debug Toolbar CSS.
See https://github.com/codeigniter4/CodeIgniter4/blob/develop/contributing/css.md
and https://github.com/codeigniter4/CodeIgniter4/actions/runs/7960504389/job/21729644283?pr=8562

[ALTITUDE-DEV-FR]

Hello Thanks for reply's.
Yes sure, @lonnieezell are right.

If ever I corrected the left icons in svg and css image if it can at least be useful ;)