@rhelmer if you're too busy I can review this one.

Wow this looks so much better!

@peterbe sure go for it

Code looks good but there are a couple of things that are annoying

1. It's annoying that we reference the spinner img src in both HTML and in javascript. I suspect this is not your fault and something possibly outside the scope of this. But it's annoying because the path to it is entered twice and it's against the DRY principle.
2. The H3 tags are so loud and big. "Modules By Version" is the same font size as "Correlations for Firefox 35.0a1 Windows NT" yet it doesn't feel like it should be as big as a H3. Then there's another H3 when you expand one of the <li> elements that has some stuff in it. So we have H3 > H3 > h3.
3. It's annoying that I have to open each and every "accordian" to see if there's data there. Scrolling up and down cheap. Moving the mouse to hit the accordian bar is more work. I'm not sure what I'm suggesting because the way accordians work is that you open one at a time. But it's quite a job of hide-and-seek to try to find the ones that have some data in them. Any ideas?
4. The slow animation is really slow. When I click one accordian first there's a slow delay waiting for the previous one to close (and the bottom half of the screen is moving) then there's a delay waiting for it to open the one I clicked. It just feel slow and clunky. I think disabling animations would be a great start. At least until they're still done in jQuery and not with CSS3.

1. Yes, this is something we need to fix but, I agree it should be in a different PR
2. Yes, I agree we need a better heading hierarchy. I will fix this.
3. Well, when the data loads, I know how many rows of data was returned so, I can append that to the header, much like we do with the tab for bugzilla, comments etc.
4. Yes, so in the actual accordion I wrote for this [https://github.com/ossreleasefeed/accordion] I wanted to use CSS3 and no JS but, because the height of each individual panel is not defined the ideal would be to set the height to auto but, you cannot transition from 0 to auto with CSS so, one needs to use the max-height hack.

The problem we run into here is that some of the panels can contain an large amount of data and the browser uses this calculated height (0 to say 45000px) to determine the speed of the animation in order to make it as smooth as possible.

So in this case, I reckon we should consider one of two options, do the animation with JS i.e. jQuery or, just have no animation at all and have the accordions snap open and closed. I am kinda leaning towards the second but will experiment.

In terms of the interaction with the accordion. As you mentioned, it is pretty much the nature of an accordion widget but, it is also keyboard accessible i.e. tab, moves between the tab headers and hitting either enter or space will expand and contract it. (I have seen Fx behave a little strange with regards to tab order and actually skipping entire sections that are meant to be in the tab flow whilst Chrome just works as expected but, give it a try and see how it behaves for you. FYI, I have brought this up in the #accessibility channel and we are discussing why this is further there.)

I am going to merge these changes also into the report index page and address the points you mentioned here. Will ping yourself and @rhelmer once I have updated the PR.

Ok so, having looked at the code some more, especially related to porting this to report/index [and a new bug I ran into https://bugzilla.mozilla.org/show_bug.cgi?id=1074157], I want to make a suggestion.

If I continue to work away on this in this single pull request, this is going to end up becoming another one of those huge, scary pull requests :) In order to avoid that, I want to suggest that we merge the current pull request as is and I open separate pull requests for the follow on work.

These will relate to porting this UI change to report index, addressing the concerns raised by @peterbe, some additional cleanup and refactoring I wish to do and other items that might come up as I progress.

Thoughts?

Good idea. Like, we can totally wait with fixing the problem with the spinner gif src. However I think point 2, 3 and point 4 above are worth doing first. I don't know if there's much we can do about the fact that you have to click to open every accordian to see if something is in it but isn't that resolved with point 3.

Once that's done, I'm happy to review again and we can move on with the other stuff you found.

@peterbe Sounds good, let me resolve points 2, 3, 4 and update the PR.

@peterbe I addressed points 2, 3 and 4. For point 4, I am simply not animating the height anymore but just the opacity. Let me know how this works for you or whether you still feel we need to handle this with JS.

This is, in general the tabs pop open but, for one's that contain like 2000+ results, it might be a little slow but, those are huge tables.

Note-to-self: Here's a good signature to test with:
/report/list?product=Firefox&range_value=7&range_unit=days&date=2014-09-25&signature=gfxSurfaceDrawable%3A%3ADrawWithSamplingRect%28gfxContext%2A%2C+gfxRect+const%26%2C+gfxRect+const%26%2C+bool%2C+GraphicsFilter+const%26%2C+double%29&version=Firefox%3A35.0a1

r+

Awesome!

Thanks @peterbe and on to the rest I go ;)