Changed bar graph to show entire timeline and arrow.

[ghost]

Changed layout (explain in output instead of tooltip).

[ghost]

[beat]

Thanks @nonumber 👍
Also great that you found way to do pull requests, that will make life simpler to review and improve pull requests before merging, and your contribution better visible. :)

I will already merge the code cleanup commit, that I already reviewed. Thank you.

Regarding proposed changes on display in the second commit, and based on the nice screen-dumps above, here my comments/proposal:

1. Green color for Query Time: If we add color green to query times display (I tought of it, but didn't replace grey by green on purpose: Green means "ok", and it might be ok without being ok. Thus I have made the bar green to show that the actual execution time is OK. But It doesn't mean that the table is optimal. E.g. extensions table is missing index, but since it's usually for now small it is ok, but if it grows it is not ok anymore. Thus, if you insist on green, I would like to reserve it to queries taking less than 1 ms. In all cases, anything between 1 ms and 4 ms should remain grey zone: They might be ok depending on the query, but not ok for very simple queries.
2. The cluttered bargraph: Cool idea, I like it as an overview, but much less if it's between every query and the nice arrow also adds vertical spacing, and bars and arrow makes it more cluttered imho (at one point i was even thinking of overlaying the query time info and bar-graphs on same line to save a bit of scrolling between queries, which already take lots of scrolling without our additions):
   • 2.a. What would you think of that compound nice "overview" bargraph only for the very first query (and leave 2nd-last as is?
   • 2.b. And on that first query with all bars, it would be cool to be able to click on the bars (at least the red ones) to directly show the corresponding query (should be easy using anchors) ?

(i haven't reviewed the code yet, the above feedbacks are only on screendumps)

[ghost]

1. Maybe there should be a smarter implementation to set the colors. Like checking the length of the query and comparing that to the time. So that you don't look at total query time, but at (average) time per line/character.

2. The problem I saw with the all-in-one time line is that most queries take such a small place in the timeline that you can't really see them, let alone be able to click on them easily. Also the red ones.
   We need to keep in mind why devs will be looking at the queries. I think in most cases to see which queries are the ones causing slowness. And which queries are duplicates.
   So maybe we need to rethink stuff to make it easiest to spot those. See the most important info quickly and prominently. The EXPLAIN info - for instance - is pretty important, I think. So it should be in view, and not hidden in a tooltip.
   Maybe an option to show/hide all these extra details... That way it is compact by default.
   Not trying to make this PR larger than it should be (as this is a first step), but just thinking out loud.
   Regarding my PR: take from it what you want and drop the rest :)

[elkuku]

and not hidden in a tooltip.

A small concern: I find myself scrolling in all possible directions (even right) trying to see the info displayed in the tooltips (pop overs).

I have implemented a small subset of this on a testing site using tabs, and it looks like this: http://tracker-joomla54.rhcloud.com

[beat]

@nonumber 👍 Thank you, I like your pull request, and will be certainly taking most of it, and actually try it out too.

1. As you could see, I've already switched bars of queries which have no index or filesorting from grey to orange color, as those are clearly not optimal. Guess what, a good part of Joomla queries turned from grey to orange :)
2. a. We can improve over time the automated analysis, but it is pretty hard to do such an analysis automatically in a reliable way beyond simple queries.
3. b. I would love to give duplicated queries a light orange background with a "This query has already been made and result should probably be cached.", as we already count duplicate queries.

@elkuku: I already tried improving this at end of debug.css, but the real fix should be that our templates don't give it a fixed width, so that those popovers always appear centered within screen.

[beat]

Ok, this pull request is now merged into last commit, so can close it. Thanks @nonumber 👍

Please see on the main pull request the issue with Safari and IE for sub-pixel widths roundings and TODO FIXME statements in the code corresponding to this. Hope you can find a CSS fix for that. :)