- Issue created by @mabho
When pulling the debug information from the HTML source code to the frontend, granting users the possibility to interact with information that would otherwise be hidden, Visual Debugger opens up multiple possibilities. Users now have a better idea of what goes under the hoods, and the multiple parts that make up their web pages rendered by Drupal.
One of the problems with bringing all the layers' information to the front is that often times users might find multiple debug layers overlapping. That means that a form input template might be overlapping that of a form, which is overlapping that of the block underneath, which is also overlapping that of a region.
An 'aggregated' tab would grant users the ability to hide or show debug instance layers interactively based on the type of template being rendered. For example, users seeking information on region template suggestions would be able to activate only the region templates, thus removing all unnecessary layers that would otherwise confuse them.
Add a navigation tab that once clicked would grant users access to a list of template types: region, block, form, menu, node etc. As a bonus, the list might also bring the number of instance layers of each type on the page, although this would be a plus.
Each template type would display a checkbox right beside it. Once the checkbox is clicked, the corresponding active debug layers being shown will be updated on the page side. Only the debug layers that correspond to the activated template type are displayed. All the others are hidden.
Multiple checkboxes can be activated at the same time.
Aggregated tab.Add a specific tab with label Aggregated. Once it is clicked, the list of template types is revealed. If another tab is clicked, the list of template types is hidden.
The changes being proposed will affect only Javascript. There are no backend implications in the changes being proposed.
Needs work
1.0
Code