Use of hidden="hidden" breaks DjDT when used with bootstrap4 and pureCSS

django-debug-toolbar uses hidden="hidden" attributes on its HTML elements which are left regardless of element being displayed or not. This causes django-debug-toolbar UI (both handle and main interface) to remain hidden when used together with Bootstrap 4 or PureCSS.

Both Boostrap 4 and PureCSS use:

[hidden] {
  display: none !important;
}

https://github.com/twbs/bootstrap/blob/v4.0.0-alpha/scss/_utilities.scss#L35

The problem is that jQuery .show() does not remove hidden="hidden" attribute but instead sets style="display: block", which is overriden by the above CSS block (See note about !important in http://api.jquery.com/show/)

One approach would be to follow jQuery docs and use .css('style', 'display: block !important'). A better approach would be to use style="display: none" instead of hidden="hidden" which I think is better, since style attribute is also used for setting DjDT handle position.

[maguowei]

please release a new fix version on pypi. @aaugustin

[ssbb]

Fixed it for me with this rule:

[hidden][style="display: block;"] { display: block !important; }