Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bar.css, bluescreen.css: fixed leaks of page's default CSS into Tracy #240

Merged
merged 1 commit into from Jan 13, 2017

Conversation

@vlastavesely
Copy link
Contributor

vlastavesely commented Jan 11, 2017

  • bug fix? yes

I just made Tracy more sexy :) There is issue opened that shows headings being affected by CSS property with !important set on. I have fixed this particular case (for headings and paragraphs).

Another problem occured on page with styled pseudoelements :before or :after. On my page, there are styled headings that are decorated by these pseudoelements. Sadly, Tracy rendered these as well and so its layout went broken. Now, after my fixes, any pseudoelements inside Tracy will be hidden by default except cases where it is need for it.

@vlastavesely vlastavesely changed the title bar.css, bluescreen.css: fixed leaks of page's default CSS bar.css, bluescreen.css: fixed leaks of page's default CSS into Tracy Jan 11, 2017
@adrianbj

This comment has been minimized.

Copy link
Contributor

adrianbj commented Jan 11, 2017

On this note, I would really love if bar.css 's

#tracy-debug * {

could be changed to:

#tracy-debug-bar * {

I make this change every time there is an update so I can include ACE editor in a custom panel. I have mentioned this before, but was hoping that if some css changes are about to be made that this could be reconsidered.

Thanks and sorry for hijacking!

@vlastavesely

This comment has been minimized.

Copy link
Contributor Author

vlastavesely commented Jan 11, 2017

Since #tracy-debug-bar is inside #tracy-debug - at least in Tracy that I have installed on this machine (another from that I have sent PR from) - it should be affected also by my change. Am I missing something? What is exactly your problem?

@adrianbj

This comment has been minimized.

Copy link
Contributor

adrianbj commented Jan 11, 2017

Am I missing something? What is exactly your problem?

I just tested with your changes and I still need to make that change of mine which makes things much easier to override.

My issue is actually kind of the reverse to what you are addressing here - sorry for the confusion - I just wanted to get the CSS discussion going again.

More info here: #151

@adrianbj

This comment has been minimized.

Copy link
Contributor

adrianbj commented Jan 12, 2017

Just thought I'd also post the additional CSS rules I am adding (along with that change from #tracy-debug to tracy-debug-bar

https://github.com/adrianbj/TracyDebugger/blob/865a669a3ddfc0e528413452235e8aefe50e332e/styles.css#L1-L208

The highlighted lines are the ones relevant to all Tracy installs. The rest are only relevant to some of my custom panels. This combination seems to work well, but perhaps your additions here would avoid the need for some of my added rules?

@vlastavesely

This comment has been minimized.

Copy link
Contributor Author

vlastavesely commented Jan 12, 2017

So basically, your problem is that Tracy's style is damaging something you've put inside the panel? I fixed issues occurring when outside page's CSS damages Tracy's design. I believe these are two different things and should be solved separately. Your problem is primarily in the third party library you are using and there it should be fixed. Maybe it can be fixed in Tracy but, as I said, it is different problem.

However, for test purpose, I've just tried to change #tracy-debug * to #tracy-debug-bar *. There are some differences after I did so. For example, headings h2 look a little bit different. I do not have time to solve it on my own. If it bothers you, you should prepare your own PR with solution :)

@adrianbj

This comment has been minimized.

Copy link
Contributor

adrianbj commented Jan 12, 2017

So basically, your problem is that Tracy's style is damaging something you've put inside the panel? I fixed issues occurring when outside page's CSS damages Tracy's design.

Yes, I realize the difference. I was just trying to contribute to improving the CSS conflicts in both directions. Anyway, sorry for hijacking your PR.

@dg

This comment has been minimized.

Copy link
Member

dg commented Jan 13, 2017

Thanks!

@dg dg merged commit 79513a9 into nette:master Jan 13, 2017
2 checks passed
2 checks passed
continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
dg added a commit that referenced this pull request Jan 13, 2017
@dg

This comment has been minimized.

Copy link
Member

dg commented Jan 13, 2017

I merged only :before and :after reset, for the !important part I am trying a different approach #241.

@mrtnzlml

This comment has been minimized.

Copy link

mrtnzlml commented Jan 13, 2017

Sending kudos from zlml.cz... :)
screenshot from 2017-01-13 09 35 59
screenshot from 2017-01-13 09 42 12

dg added a commit that referenced this pull request Jan 13, 2017
dg added a commit to dg/tracy that referenced this pull request Jan 13, 2017
#tracy-debug *:before,
#tracy-debug *:after {
display: none;
}

This comment has been minimized.

Copy link
@dg

dg May 2, 2017

Member

IMHO all: unset; is better

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.