Redo left column categories hierarchical list interaction

[beat]

We need to make the left side list interaction simple, smooth, snappy and more effective.

A better implementation is needed. Probably related with the design task https://github.com/beat/tracker-apps/issues/18

[beat]

Currently they have lots of accordions for folding up and down, and that takes a lot of Javascript CPU time in the browser (visible more with slow-JS IE than with other browsers).

1. A. We need to either go fully the JS route (no more reloading of left side after initial load of everything) and in that case we (mandatory) need to make the JS very FAAAST.
   • Advantages:
     • we can keep a bit of animations (IF the JS slowness reason is found)
     • single load
   • Disadvantages:
     • Very long list of main categories always visible, potentially hiding open-subcategories, which has been identified as a big problem.
     • More data to load at initial load
     • Still lots of JS needed, not sure if that can be fixed
     • Looks more cluttered and complicated at all times

Or,

1. B. now that we have already very FAAST ajax reloadings, we could remove entirely JS and invisible subcats (making ajax even a bit faaaaaster initial load) and render in layout only the relevant categories.
   • Advantages:
     • Probably 50% less data to load at initial dashboad loading, so a bit faster
     • We can optimize the rendering in the view to unclutter the display when inside a category, displaying only "back <" link, category title, and sub-categories on the left. That keeps the focus better.
     • When selecting a given extension, even from dashboard, or search, the left column can display correctly the corresponding category, as in that case left side is rendered same time.
     • Clearing space on the left and reloading it at each page also allows to display in future "related items", or "others have also looked at:" vertical list of related items below the cats when e.g. displaying an item. Or even "featured" or "advertised" extensions/items (those advertisements could be controlled fully by JED directly, because they wouldn't breach any existing advertisement contract of JED).
   • Disadvantages:
     • No slide-down animations with real data possible (other animations still possible)
     • A bit more happening server-side

Which route do we prefer?

[coolbung]

I'd suggest we go with B - the biggest reason being we avoid extra JS, which makes the interface less tacky and much more responsive. Also makes the client.js easier to manage since we wont add any 3rd party llibrary code in it. A few more suggestions, which we can implement rightaway or later

• Make the category list fixed height and scrollable
• Show/hide the left panel
• Add an active filter

[emavro]

I'm already mid-way implementing B with a touch of A, so we won't be missing those animations.

[beat]

Great! Thanks @emavro ! And Thanks @coolbung for your advice too !

I tried to do a neutral comparison, but in view of advantages/disadvantages, i also see B as better.

So by unanimous vote, let's go B with a touch of A :+1:

[emavro]

Improved with PR https://github.com/joomla-projects/joomla-cms/pull/212

[beat]

Works great! Thanks! Closing :)