1249569 - Filter Computed panel by clicking on values within box model

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Sebastian Zartner [:sebo]]

The values shown within the box model should link to the Computed panel and filter the properties there to only show the related value.

This may be done via a context menu or Ctrl + click or something like that.

Example implementation:
Right-clicking the right border within the box model and choosing 'Show computation stack' (the name could probably be better) switches to the Computed side panel, adds a filter so that only 'border-right' (and maybe also 'border-inline-end' resp. 'border-inline-start') is shown and expanded.

Sebastian

Comment 1

[Patrick Brosset <:pbro>]

Filter on CLIMBING SHOES

Comment 2

[[e-mail]]

The new UI spec in bug 1150496 shows related attributes below the box model, does that sufficient?

Comment 3

[Sebastian Zartner [:sebo]]

(In reply to Fred Lin [:gasolin] from comment #2)
> The new UI spec in bug 1150496 shows related attributes below the box model,
> does that sufficient?

No, because you still need to search for the margin, border, padding and content properties manually. So, I'm marking this as blocker for bug 1150496.

The use case is to quickly find out about how the values got computed.
I see this as a first step towards a detailed computation info, which answers questions like "Why is this element 100 pixels high when I didn't set any height on it?". The answer to this can be quite complex, like "Because you set 'display: flex;' and 'height: 100px;' on the parent element and the initial value for 'align-items' is 'stretch', which makes it's height stretch over the whole height of the parent element."

Sebastian