Add a way to visualize how a web page is layered

RESOLVED FIXED in mozilla23

Status

()

RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: nical, Assigned: nical)

Tracking

unspecified
mozilla23
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments, 1 obsolete attachment)

(Assignee)

Description

6 years ago
It's useful sometimes both for web devs and for gecko devs to see the composition of the layer tree for a given web page. We need a way to visualize that like drawing the borders of the layers.
(Assignee)

Comment 1

6 years ago
Created attachment 735576 [details] [diff] [review]
Adds a pref to show layer borders (WIP)

With this patch we can see the border of layers using the pref layers.draw-borders.
This patch is based on the Compositor API so it needs to be applied after the layers refactoring lands (or applied on top of the current state of the gfx branch).

This only works for off-main-thread compositing, so a full solution would require that we either implement it for basic/gl layers as well, or make basic layers use the new compositor API (means implement a software backend for Compositor).

It'd be nice to make this work on a per document basis rather than globally, and integrate it to devtools.
(Assignee)

Updated

6 years ago
Depends on: 825928
CCing dcamp for the devtools integration.

Comment 3

6 years ago
Created attachment 735662 [details] [diff] [review]
WIP attempt to do sort of the same thing

I came up with this a while back for some debugging, it is way, way out of date and has a subtle shader-loading bug that I never worked out (it didn't affect rendering so was fine as a debugging aid). It does a similar thing to nical's but by tinting layers rather then outlining. There might be bits that are helpful, I don't know.

I actually prefer nical's approach, I think it obscures the web page less than this does, and makes multiple layers of the same type easier to distinguish (I think it (nical's) will show the tiles on tiled layers too, which would be useful). Some advantages of this approach are that it has no affect on perf because it is really simple shader stuff, and it doesn't look as much like Chrome :-)

I should probably land the shader gen parts of this separately at some point, because they might be useful to someone down the line...

Comment 4

6 years ago
It would be great if we could expose an API that look like the paint flashing API introduced in bug 847890.

Comment 5

6 years ago
see also bug 690064

Updated

6 years ago
Blocks: 842518
(Assignee)

Comment 6

6 years ago
Created attachment 744651 [details] [diff] [review]
Adds a pref to show layer borders
Attachment #735576 - Attachment is obsolete: true
Attachment #744651 - Flags: review?(jmuizelaar)
Comment on attachment 744651 [details] [diff] [review]
Adds a pref to show layer borders

Review of attachment 744651 [details] [diff] [review]:
-----------------------------------------------------------------

Lovely. One thing that I didn't like is that DrawColoredBorders doesn't always draw colored borders. I understand wanting to keep the check in one place, so maybe it's better to give the function a better name (DrawColoredBorderIfNeeded() or DrawDiagnostics()). Neither of those is great, so if you can't think of anything you like there current name is fine.
Attachment #744651 - Flags: review?(jmuizelaar) → review+
(Assignee)

Comment 9

6 years ago
(In reply to Jeff Muizelaar [:jrmuizel] from comment #8)
> Comment on attachment 744651 [details] [diff] [review]
> Adds a pref to show layer borders
> 
> Review of attachment 744651 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> Lovely. One thing that I didn't like is that DrawColoredBorders doesn't
> always draw colored borders. I understand wanting to keep the check in one
> place, so maybe it's better to give the function a better name
> (DrawColoredBorderIfNeeded() or DrawDiagnostics()). Neither of those is
> great, so if you can't think of anything you like there current name is fine.

Agreed, I went for DrawDiagnostics()

https://hg.mozilla.org/integration/mozilla-inbound/rev/c10cca0c48ec
https://hg.mozilla.org/mozilla-central/rev/c10cca0c48ec
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla23
(Assignee)

Updated

6 years ago
Duplicate of this bug: 690064
You need to log in before you can comment on or make changes to this bug.