1151956 - [Box Model] Show which rule is responsible for a particular size

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P1)

Description

[Jan Keromnes [:janx]]

When debugging an element's size / padding / borders / margins, it's useful to have a look at its Box Model to get an idea.

However, when investigating a particular metric, it would be useful to show a tooltip when hovering over it, saying something like ".the-faulty-selector { margin-top: 300px } in some-stylesheet-file.css:55".

This could prevent many back-and-forths between Box Model, Rules, and sometimes even Computed.

Comment 1

[Jan Keromnes [:janx]]

See also bug 1151943 for similar tooltip referencing a rule / selector / location in file.

Comment 2

[Jan Keromnes [:janx]]

Attachment: rule-boxmodel-concept.png

Added concept image.

Comment 3

[Jeff Griffiths (:canuckistani) (:⚡︎)]

Assigning P1 priority for some devedition-40 bugs. 

Filter on '148DD49E-D162-440B-AE28-E22632FC20AC'

Comment 4

[Patrick Brosset <:pbro>]

Let's use this bug to put the overall tooltip mechanism in place, but keeping the tooltip itself very simple. I'll file 2 follow-up bugs: one to make the tooltip nice (I like the concept image attached by Jan), with syntax coloring and all, and one to handle logical properties too (e.g. padding-block-start).

Comment 5

[Patrick Brosset <:pbro>]

Attachment: MozReview Request: bz://1151956/pbrosset

/r/6997 - Bug 1151956 - Add tooltips with refs to source css rules in the layout-view; r=miker

Pull down this commit:

hg pull -r 258a6660f7f89c2dc68e38ca19149ef260371913 https://reviewboard-hg.mozilla.org/gecko/

Comment 6

[Patrick Brosset <:pbro>]

Mike, here's what I did in this patch:
- fixed a bug (we've probably had for a long time) where we had tooltips but instead of using the "title" attribute they were using the "tooltip" attribute so they weren't showing on hover at all,
- added information to these simple tooltips by iterating through the applied rules and finding which one defines the hovered property. In some cases there won't be any rule (if the value is the default value, or if the this is an inline style), in which case the tooltip keeps its default value.

Comment 7

[Patrick Brosset <:pbro>]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=50de7b733dee

Comment 8

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Comment on attachment 8591679 [details]
MozReview Request: bz://1151956/pbrosset

https://reviewboard.mozilla.org/r/6995/#review5911

Ship It!

Comment 9

[Patrick Brosset <:pbro>]

Attachment: bug1151956-layoutview-tooltip.patch

Thanks Mike for the review. Here's a rebased version.
Pushed to fx-team: https://hg.mozilla.org/integration/fx-team/rev/3e66286a3c95

Comment 10

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/3e66286a3c95

Comment 12

[Patrick Brosset <:pbro>]

Attachment: MozReview Request: Bug 1151956 - Add tooltips with refs to source css rules in the layout-view; r=miker