860146 - Add a way to visualize how a web page is layered

Status: RESOLVED FIXED

(Core :: Graphics: Layers, defect)

Description

[Nicolas Silva [:nical]]

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.

Comment 1

[Nicolas Silva [:nical]]

Attachment: 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.

Comment 2

[Anthony Ricaud (:rik)]

CCing dcamp for the devtools integration.

Comment 3

[Nick Cameron [:nrc]]

Attachment: 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

[Paul Rouget [:paul]]

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

Comment 5

[Nick Cameron [:nrc]]

see also bug 690064

Comment 6

[Nicolas Silva [:nical]]

Attachment: Adds a pref to show layer borders

Comment 7

[Nicolas Silva [:nical]]

try push https://tbpl.mozilla.org/?tree=Try&rev=58d438baef62

Comment 8

[Jeff Muizelaar [:jrmuizel]]

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.

Comment 9

[Nicolas Silva [:nical]]

(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

Comment 10

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/c10cca0c48ec