Closed Bug 1151956 Opened 5 years ago Closed 5 years ago

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

Categories

(DevTools :: Inspector, defect, P1)

defect

Tracking

(firefox40 fixed)

RESOLVED FIXED
Firefox 40
Tracking Status
firefox40 --- fixed

People

(Reporter: janx, Assigned: pbro)

References

(Blocks 2 open bugs)

Details

(Whiteboard: [polish-backlog][difficulty=easy])

Attachments

(3 files, 1 obsolete file)

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.
See also bug 1151943 for similar tooltip referencing a rule / selector / location in file.
See Also: → 1151943
Added concept image.
Assigning P1 priority for some devedition-40 bugs. 

Filter on '148DD49E-D162-440B-AE28-E22632FC20AC'
Priority: -- → P1
Whiteboard: [devedition-40] → [devedition-40][difficulty=easy]
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).
Blocks: 1153817
Blocks: 1153818
/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/
Attachment #8591679 - Flags: review?(mratcliffe)
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.
Assignee: nobody → pbrosset
Status: NEW → ASSIGNED
Attachment #8591679 - Flags: review?(mratcliffe) → review+
Thanks Mike for the review. Here's a rebased version.
Pushed to fx-team: https://hg.mozilla.org/integration/fx-team/rev/3e66286a3c95
Attachment #8593454 - Flags: review+
https://hg.mozilla.org/mozilla-central/rev/3e66286a3c95
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Flags: in-testsuite+
Resolution: --- → FIXED
Target Milestone: --- → Firefox 40
Blocks: 1156291
Attachment #8591679 - Attachment is obsolete: true
Attachment #8619981 - Flags: review+
Whiteboard: [devedition-40][difficulty=easy] → [polish-backlog][difficulty=easy]
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.