nette / tracy

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.

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 :)

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

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.

All right, I'm not changing it.

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

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.

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.

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

	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);
	}
	}

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