search

nette / tracy

😎 Tracy: the addictive tool to ease debugging PHP code for cool developers. Friendly design, logging, profiler, advanced features like debugging AJAX calls or CLI support. You will love it.
https://tracy.nette.org
Other
1.75k stars 218 forks source link

Does bluescreen.js really need to disable all other stylesheets? #533

Closed adrianbj closed 2 years ago

adrianbj commented 2 years ago

I have ace-editor embedded into a panel and when code creates an exception that results in the display of the bluescreen, it loops through all stylesheets and disables them. If I disable this block of code: https://github.com/nette/tracy/blob/f652faec9799675d05168de65a06111b30bd1df3/src/Tracy/BlueScreen/assets/bluescreen.js#L11-L18

all the styles I need for ace-editor remain intact.

I guess you're trying to make sure there are no styles that might mess with the look of the bluescreen, but it feels a bit too aggressive.

I know that it ignores <style class="tracy-debug"> but because ace-editor comes as a package I don't want to hack that to add the class.

Are there any other solutions that might work rather than disabling all other stylesheets?

Thanks.

adrianbj commented 2 years ago

I decided to add the tracy-debug class to all the documents stylesheets via JS, essentially negating that code referenced above. Close this if you want, although I still think there might be room for improvement, but obviously that is up to you :)

dg commented 2 years ago

I guess it would be possible to change the behavior and use the same CSS reset as is used for the Debug bar.

adrianbj commented 2 years ago

I'm happy enough now, so maybe if it's not broke, then don't fix it?

As I mentioned elsewhere, I actually have to modify your CSS resets anyway because they were breaking ACE's CSS so I am worried if you do more on that front, I might need to make more hacks.

dg commented 2 years ago

All right, I'm not changing it.

ad ACE: Hmm, I see there's a problem with width:initial for divs…

adrianbj commented 2 years ago

I see there's a problem with width:initial for divs…

Sorry, where are you seeing that issue? Have you been playing around with adding ACE to a panel?

The main thing I do is change #tracy-debug to #tracy-debug-bar in the first few declarations in Tracy/Bar/assets/bar.css

That change isn't ideal either, but at least it prevents the resets from affecting the panels.

dg commented 2 years ago

Have you been playing around with adding ACE to a panel?

Yes. Problem is in specificity.

ACE declares .ace_text-layer { width: 10000px; } and Tracy reset declares #tracy-debug * { width: initial } and #tracy-debug * has higher specificity than .ace_text-layer.

I thought I could reduce the specificity by using a custom <tracy-div> tag.

adrianbj commented 2 years ago

Just wanted to say a big thanks for this change - it's now much easier to style panels without hacking the core CSS files.