All css rules are !important [WIP]

[dg]

• bug fix? yes CSS styles rewrite by website #206
• BC break? maybe…

All Tracy CSS rules are !important, so they cannot be rewriten by styles css of website.

[JanTvrdik]

I'm afraid that this is going to break a lot of stuff.

[dg]

It should not… Anyway it is targeted to the next bigger release.

[vlastavesely]

With panels I use, it seems to be OK. But also I think that many panels that use a lot of CSS would have serious problems after this change. For example, for the guy who commented my last PR it could be very problematic. But, as I said in my PR, I think this is not primarily problem of Tracy but the third-party libraries integrated into it.

Please consider to reset text-transform also. I it is not uncommon that H1 are set to text-transform: uppercase; and it was first thing that I tried to test with your proposed changes.

[dg]

It automatically appends !important to every included CSS, so the most of panels should work. Some will have to be modified, it is BC break.

Yes, it completely breaks injection of web styles to Tracy, but it's purpose.

[dg]

@vlastavesely done ec3380b

[adrianbj]

For example, for the guy who commented my last PR it could be very problematic.

Being that guy :) I can say that I agree that this is very problematic.

I have been playing around with this PR and it looks like it makes it impossible to style any custom panels using an external stylesheet. This is something I do with many of my panels. Now the only way to override the !important is to use inline styles also with an important.

I know I keep harping on it, but changing #tracy-debug * { to #tracy-debug-bar * { makes a huge difference. With the current master of Tracy with this change I can do as much manipulation of panels as I need. While there is still the possibility of styles from the site overriding those in Tracy, I have managed to get around these by re-defining the styles for everything within Tracy (my own stylesheet that I inject) and making them !important. It's taken a while to get everything taken care of, but I am pretty happy now that the Tracy debug bar will look the same on all sites.

[dg]

The problem is that Tracy (panels and bar) must not be accidentally affected by website CSS style.

The only way to prevent that (until browsers will support revert) is to reset all important CSS properites. For bar, for panels. This PR resets them in very hard way.

On the other side, there is need to create custom styles for custom panels. It is absolutely easy. You just need to add #tracy-debug before all selectors (or even better #tracy-debug .your-panel-class). It can be easily done for 3rd party styles with CSS preprocessor, for example with LESS:

#tracy-debug {
	@import (less) 'library.css';
}

This PR would make custom styles only slightly harder, it requires in addition to add !important for every properties. It can be done with regexp preg_replace('#(?<!!important);#', '!important;', $css).