690064 - Show borders of compositing layers

Status: RESOLVED DUPLICATE of bug 860146

(Core :: Graphics, enhancement)

Description

[David Calhoun]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.186 Safari/535.1

Steps to reproduce:

It would be nice to be able to show layer compositing layers for debugging purposes.  Safari and Chrome have similar functionality:

Safari
1. Open a terminal
2. $ defaults write com.apple.Safari \IncludeInternalDebugMenu 1
3. Open (or restart) Safari
4. Debug -> Show Compositing Borders

Chrome
1. Type the following in the address bar: about:flags
2. "Composited render layer borders" -> Enable


Actual results:

No options to see compositing layers!


Expected results:

There should be a flag in about:config to show compositing layers, and possibly the redraws (as Safari shows).  I.e:

layers.acceleration.draw-borders

Comment 1

[Benoit Girard (:BenWa)]

Agreed. This would make layers debugging easier. Maybe even a candidate menu item for bug 692867?

I would even consider doing a patch myself to help debugging work with mobile opengl layers.

Comment 2

[Chris Jones [:cjones] inactive; ni?/f?/r? if you need me]

It would also be really useful to draw thebeslayerbuffers unrotated.

There was some testing code in bug 570294 that was heading towards this (we were calling it "LayersSpy"), but that code might not be very helpful here.

Comment 3

[Benoit Girard (:BenWa)]

Found a bug while working on this. It assumes that unsigned int are 32-bit which isn't true everywhere.

http://mxr.mozilla.org/mozilla-central/source/gfx/layers/opengl/LayerManagerOGL.cpp#583

Comment 4

[Benoit Girard (:BenWa)]

Attachment: Overlay test

I've implemented this in the form of an overlay. I'm not sure I like it as-it. The color is the layer type. In this case green is an Image Layer while purple is a thebes layers.

Should I just make it a border?

Comment 5

[Robert O'Callahan (:roc) (email my personal email if necessary)]

We need to be able to visually distinguish different layers of the same type.

As an extension I'd like to be able to tell which parts of layers are getting invalidated/repainted, so let's at least have a design for that.

Comment 6

[Benoit Girard (:BenWa)]

Attachment: Part 1: Refactor FPS code into new LayerDebugOGL

Comment 7

[Benoit Girard (:BenWa)]

Attachment: Part 2: C++-ify FPS code

Comment 8

[Benoit Girard (:BenWa)]

Attachment: Part 3: Show layers (wip)

Comment 9

[Benoit Girard (:BenWa)]

(In reply to Robert O'Callahan (:roc) (Mozilla Corporation) from comment #5)
> We need to be able to visually distinguish different layers of the same type.
> 

We have overlapping layers so simply showing the border wont be enough. I'm not sure what the best visual representation for that could be. I'm going to think about it some more. Any suggestion?

> As an extension I'd like to be able to tell which parts of layers are
> getting invalidated/repainted, so let's at least have a design for that.

That's a good idea.

Comment 10

[Robert O'Callahan (:roc) (email my personal email if necessary)]

(In reply to Benoit Girard (:BenWa) from comment #9)
> (In reply to Robert O'Callahan (:roc) (Mozilla Corporation) from comment #5)
> > We need to be able to visually distinguish different layers of the same type.
> 
> We have overlapping layers so simply showing the border wont be enough. I'm
> not sure what the best visual representation for that could be. I'm going to
> think about it some more. Any suggestion?

Showing the borders wouldn't be enough in all cases but it's still the best option I can think of.

Comment 11

[Benoit Girard (:BenWa)]

I made another experiment. It flashes each layer out for 1 second. It gives you a good impression of what the layers. The color are the layer type: Purple -> Thebes, Green -> Image.

http://dl.dropbox.com/u/10523664/VID_20111103_181638.3gp

I think we will want layer border anyways. Any though on this experiment?

Comment 12

[Robert O'Callahan (:roc) (email my personal email if necessary)]

It's OK but I think borders would be better.

Comment 13

[Benoit Girard (:BenWa)]

Attachment: Screenshot

Here's my latest attempt. Perhaps the border width should be reduced.

Comment 14

[Bas Schouten (:bas.schouten)]

I think we should use different colors and transparency to give some indication of z-order and superposition of different layers with the same border.

Comment 15

[Benoit Girard (:BenWa)]

I'm currently using colors to tell the layer type. Purple is thebes, green is image (not pictured). If we think that superposition information is more important then layer type we could use colors for that instead.

Comment 16

[Benoit Girard (:BenWa)]

Comment on attachment 566186 [details] [diff] [review]
Part 1: Refactor FPS code into new LayerDebugOGL

Asking Jeff for review since he worked on the original FPS code.

Comment 17

[Chris Jones [:cjones] inactive; ni?/f?/r? if you need me]

(In reply to Robert O'Callahan (:roc) (Mozilla Corporation) from comment #5)
> As an extension I'd like to be able to tell which parts of layers are
> getting invalidated/repainted, so let's at least have a design for that.

+1 <3.  I'd also love something like this to show special-case-y optimizations that are being hit, like pre-rendered transformed frames and animations/transitions that are asyncified.