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

[adrianbj]

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:

tracy/src/Tracy/BlueScreen/assets/bluescreen.js

Lines 11 to 18 in f652fae

	for (let i = 0; i < document.styleSheets.length; i++) {
	let style = document.styleSheets[i];
	if (!style.ownerNode.classList.contains('tracy-debug')) {
	style.oldDisabled = style.disabled;
	style.disabled = true;
	styles.push(style);
	}
	}

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]

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]

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

[adrianbj]

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]

All right, I'm not changing it.

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

[adrianbj]

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]

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]

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