[4.0] Client performance improvement for plg_system_debug

[Hackwar]

A constant issue for me is the performance when enabling the debug mode on pages with lots of queries. At some point, the display of the Database Queries tab brings my browser to a grinding halt and opening one of the accordions then fails completely. As a specific example: I did some finder tests and that generated 200 queries. Clicking on an Explain or Profile accordion resulted just in a warning that some JS was slowing down the webpage, but no action on the page itself. Running on FF61 and a Core i7 here...

This PR replaces the bootstrap accordions for each query with a pure CSS implementation, which is much more performant. According to caniuse.com, all the features used in the CSS are IE11 compatible and work in all major browsers. The only browser that supposedly has problems is Opera Browser Mini. The debug.min.css was generated by running node build.js --compilecss.

How to test

1. Enable the Smart Search content plugin
2. Edit /administrator/components/com_content/Controller/ArticleController.php and insert this method in the class:

   	public function save($key = null, $urlVar = null)
   	{
   		parent::save($key, $urlVar);
   		$this->setRedirect(false);
   	}
   

   This prevents Joomla from redirecting after saving an article.
3. Enable debug mode.
4. Edit an article and click on save.
5. See the database queries tab of the debug informations and notice about 200 queries being logged. Try to open an accordion of the queries and notice that it doesn't perform well.
6. Apply PR, reload that page and see that it reacts a lot quicker.

[dgrammatiko]

So the bootstrap accordion is not performant enough, what will happen if you use the new script from out custom elements repo?

[Hackwar]

I gave the repo a quick look, but I wont have the time to test that solution. However, considering that the 200 queries that I encountered in my specific example are rather tame compared to some of the stuff that I've seen at clients, I don't really trust any JS solution here at all. My worst offender so far was a page with over 1300 queries on a single page. Enabling debug mode meant several 10 MBytes of HTML to load from the server. But even with just those 200 queries in my example and a JS-less solution, the rendering alone took noticeable time.

[dgrammatiko]

@Hackwar the problem that arises when not using js is that the component (accordion) is not accessible. If it was, we wouldn't even be thinking of using javascript for all these client-side interactions. BTW Joomla 4 is supposed to be fully accessible and in that sense, I could see either a solution using the debugBar or simplifying the output of the debug to have accordions only for the first (parent) elements (that's only 4 of them)

[wilsonge]

Dimitris is right :( we're going to need aria attributes on opening and closing the elements for accessibility.

[chmst]

To say the truth, I cannot imagine how a blind user can work with the debug information. Nevertheless we need aria attributes. Accessibility is all-or-nothing.

[wilsonge]

OK I'm not against trying to improve the BS performance - but I think accessibility wise we are going to need to have some small amount of JS to at least change the aria attributes so closing this for now