Add 'filters' tab helping users interactively hide or show debug layers based on their type.

Created on 7 June 2024, 5 months ago
Updated 23 July 2024, 4 months ago

Problem/Motivation

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.

Proposed resolution

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.

Remaining tasks

  • Add a new Aggregated tab.
  • Add a list of template types with corresponding checkboxes.
  • Adjust the mechanism to hide/show the instance layers according to the selected checkboxes.

User interface changes

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.

API changes

The changes being proposed will affect only Javascript. There are no backend implications in the changes being proposed.

Feature request
Status

Fixed

Version

1.0

Component

Code

Created by

🇧🇷Brazil mabho Rio de Janeiro, RJ

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024