My bad modifying the composer.json. I misinterpreted something I read on COMPOSER documentation. I didn't know how to remove the committed file so I revert the change and re-commit it.

Reseting CSS is necessary. Write inline CSS this way https://github.com/nette/database/blob/cbf22d4107376489068a3be605e2de2bdb189cbd/src/Bridges/DatabaseTracy/templates/ConnectionPanel.panel.phtml#L10-L13

That is not right.

In fact, I am using Tracy outside Nette Framework. I am creating a new
BarPanel as suggested in the documentation, via:

use Tracy\IBarPanel;
// use Tracy\Debugger;

// Adding NewBarPanel PANEL on Tracy Debug Bar
class NewBarPanel implements IBarPanel
{
...
public function getPanel() {
...
}
}

The problem is that the HTML returned by getPanel(), which goes INSIDE the
Dialog, gets its CSS reset by the "#tracy-debug * {". By removing the "*"
is solves the problem, but it breaks some other fonts and stuff. The
proposed change offers a minimum impact in all panes I tried yet allowing
all customs CSS returned by getPanel() to function without being reset.

Please, review it and try it.. You will notice it works fine.

Regards,

Julio Marchi ©
Technology Executive & Entrepreneur
(586) 996-3939
jcmarchi@gmail.com

This e-mail and any attachments may contain information which is
confidential, proprietary, privileged or otherwise protected by law. The
information is solely intended for the named addressee (or a person
responsible for delivering it to the addressee). If you are not the
intended recipient of this message, you are not authorized to read, print,
retain, copy or disseminate this message or any part of it. If you have
received this e-mail in error, please notify the sender immediately by
return e-mail and delete it from your computer.​

On Sun, Mar 20, 2016 at 8:49 PM, David Grudl notifications@github.com
wrote:

Reseting CSS is necessary. Write inline CSS this way
https://github.com/nette/database/blob/cbf22d4107376489068a3be605e2de2bdb189cbd/src/Bridges/DatabaseTracy/templates/ConnectionPanel.panel.phtml#L10-L13

—
You are receiving this because you modified the open/close state.
Reply to this email directly or view it on GitHub
#151 (comment)

I was reviewing my proposal and I have another one... A better thought one... ;)

I would suggest a simple CSS RULE definition change, which would not affect anything, yet allowing new "plugins" to add more complex code/JS/CSS to the dialogs.

Simply try changing the definition of the style from

#tracy-debug * {

to:

#tracy-debug[class~='tracy'] *, .tracy-inner *, .tracy-panel *, .tracy-dump * {

The rest may continue the same...

This way it would not only solve all problems I foresee with the forceful reset absolute all CSS rules allowed inside the dialog. Fact is, as it is it is hard to integrate other products to work with the DebugBar. By fixing the CSS it will open a wider range of options for lots of other people to integrate the DebugBar in their projects and, then, whatever they need in the DebugBar.

At this point, as a test, I wrote a small JS that run through the SCCOM (SCC DOM) to identify and remove the Style you have defined, just to re-add it using the proposed header above. By doing that (hacking it) I keep the repository intact while fixing the CSS on-the-fly (which should not be needed).

However, as result I have a fully functional KINT integration with PHP DebugBar, beautifully working together as one for the enjoyment of developers who love both tools.

I hope you see my point... If not, take a look on the screen-shot! ;)

Best Regards,
JM

I don't understand #tracy-debug[class~='tracy'], because there is only one #tracy-debug and it has no class.

I haven't looked through this PR, but just wanted to add my support for fixing the issue it addresses - I have certainly had more than a few hassles integrating custom panels. I have also noticed the opposite problem in that the styling of panel content is often affected by the CSS of the site itself. I have had to apply a hardcoded overrides to keep font sizes and other things from being messed up.

panel content is often affected by the CSS of the site itself

This is fairly well handled already by Tracy itself (it resets CSS for most problematic properties). If you think that there are more CSS properties that should be reset by Tracy itself consider sending PR.

@JanTvrdik it is mission impossible. Something like

<style> #x div { background: blue } </style>
<body id="x">

will affect Bar. Important is (and it is a reason why #tracy-debug is used and should not be removed) that classes should not affect it:

<style> body.x div { background: blue } </style>
<body class="x">

I know this has been closed, but #tracy-debug * { is causing me a world of pain.

There are several issues.

1. Trying to restore default settings for browser form elements etc is impossible.
2. When incorporating other libraries into panels it becomes very difficult to have the css from the library override the reset. In particular I am using ACEEditor in a panel and it's proving impossible without editing the source code of ACE because it builds CSS stylesheets via JS. The only fix seems to be to add !important to all of the styles in ACE.

Couldn't that rule be more targeted - either to just the needed elements, or perhaps to just the debug bar, rather than the all-encompassing tracy-debug div. That way it wouldn't affect the content of the panels.

Thanks kindly for reconsidering.

@dg - This may not be quite perfect, but this works really well for me. Here are the declarations I changed. The key thing is changing #tracy-debug to #tracy-debug-bar to isolate these to the debug bar and not affect the panel content.

#tracy-debug-bar * {
    font: inherit;
    color: inherit;
    background: transparent;
    margin: 0;
    padding: 0;
    border: none;
    text-align: inherit;
    list-style: inherit;
    opacity: 1;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
}

I also modified the font and color in the table cells - I stuck with inherit as you have it, but I actually wonder if defining actual values might be better.

#tracy-debug .tracy-panel td,
#tracy-debug .tracy-panel th {
       font: inherit;
        color: inherit;
    border: 1px solid #E6DFBF;
    padding: 2px 5px;
    vertical-align: top;
    text-align: left;
}

The last thing is adding border: none to links in table cells.

#tracy-debug a {
    color: #125EAE;
    text-decoration: none;
    border: none;
}

Maybe this is not completely robust just yet, but it is now possible to incorporate css from external libraries into panels, which I agree is essential. It's working great for my use with ACEEditor.

Please let me know if you are willing to adapt to something like this. I can send a new PR if you want, but I have a feeling you'll want to tweak it anyways.

Thanks!