Re: [blink-dev] Dump render tree in real time

[Christian Biesinger]

Why did you not say what you really wanted in your original email? :p

+paint-dev, maybe they can help you out.

-Christian

On Thu, Apr 14, 2016 at 12:35 PM, <jip.d...@gmail.com> wrote:

Thanks for replying again. I think I've done exactly as you suggested, save in JavaScript: https://github.com/Jip-Hop/visuallyOnTop.

With the visuallyOnTop JavaScript library I can walk the DOM tree and determine which DOM node is in front of others.

But downsides of this approach is that it's very slow and needs to be constantly maintained and tested to make sure it actually corresponds to the way the browser renders it.

That's why I was hoping to get this information at a lower level, directly from the browser. Like you say, the painting code does create this data. I'm just looking how to get my hands on it.

Any further suggestions? :)

On Thursday, 14 April 2016 18:26:51 UTC+2, Christian Biesinger wrote:

z-order is not directly part of the layout tree, no. I'm not sure what a good way to get that information is. I mean, the painting code obviously creates such data, I just don't know if it outputs that in a reusable form. You could always treewalk the layout tree and follow https://www.w3.org/TR/CSS2/zindex.html to find out what is occluded by what. (This is not a simple question)

-Christian

On Thu, Apr 14, 2016 at 12:06 PM, <jip.d...@gmail.com> wrote:

Hi,

Is the z-order (final result of applying z-index etc.) taken into account in the Layout Tree?

That's basically the reason I'm looking into this.

As I understood it, the Layout Tree is the DOM tree with CSS applied.

But on Firefox I noticed the Frame Tree isn't sorted by z-order and doesn't contain any information about z-order either.

I was wondering if the same applies to Chrome.

Basically I'm interested in real time dumping of the following info for all visible nodes (nodes that take up space in the document):

- z-order (so I can determine which elements are in front of other elements)

- position

- dimensions

On Sunday, 10 April 2016 16:26:58 UTC+2, jip.d...@gmail.com wrote:

That sounds like a very nice approach! I really want to try that as well.

I actually prefer to have access to it via JavaScript and I was already planning on making an extension.

Today I tried building Chromium on my Mac but it fails at: ImportError: No module named CoreFoundation

It seems my Python environment is messed up and I'm unable to fix it (after several hours of trying...)

So I'll probably start with a fresh install of OS X sometime soon and try building again.

Thanks for all the info everybody. When I've successfully built Chromium I'll try your suggestions and post back here.

On Friday, 8 April 2016 22:56:45 UTC+2, Levi Weintraub wrote:

One more way of snagging this info would be to add a JavaScript API to do it. You can just add a definition to one of the JS idl files like Document.idl:

DOMString dumpLayoutTree;

then wire it up in Document.

Then you could make a super-simple extension that runs and records the dumps for all your tabs :)

On Fri, Apr 8, 2016 at 1:37 PM, Stefan Zager <sza...@chromium.org> wrote:

On Fri, Apr 8, 2016 at 12:39 PM <jip.d...@gmail.com> wrote:

In the command:

$ kill -s SIGUSR1 <renderer pid>

How do I get the <renderer pid>?

When I start Google Chrome with 1 open tab this is what I see in Activity Monitor:

Do you mean the PID of the Google Chrome process? Or does the renderer have a different PID?

Instead of the Activity Monitor, try using Chrome's TaskMangager:

http://imgur.com/UNsBw7F

The PID you want is "Tab".

Also, someone reminded me that you can get a layout tree dump using chrome tracing with blink.debug.layout enabled, but it has a lot less information in it, and if you want to get a lot of tree dumps, you'll blow out the tracing buffer capacity pretty quickly.

[jip.d...@gmail.com]

Yes I should have said that in my original email. But I wanted to save you the trouble of reading everything I've tried so far. From what I've read I was just really convinced that I needed access to the render tree. I also thought this information could easily be dumped, but from your replies I get the feeling there is no real representation of this data in the browser.

However, I still have a bit of hope. Today I found this page: https://trac.webkit.org/wiki/Accelerated%20rendering%20and%20compositing which mentions the z-order tree. Perhaps this also exists in Chrome?

Another lead for me is the document.elementsFromPoint() method which returns all nodes at a specific coordinate in 'visual order'. The difference with what I'm trying to achieve is that I don't want the elements under a specific point but all visible document nodes (meaning they take up space, so also visibility:hidden; etc.) and I don't want to exclude elements with pointer-events:none;. It's similar because I'm interested in the visual order of the DOM nodes.

I looked into dumping layers as well, but as you mentioned that doesn't yet contain all the data I need.

[Nat Duca]

This kinda sounds a bit like IntersectionObserver v2

--
You received this message because you are subscribed to the Google Groups "paint-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paint-dev+unsubscribe@chromium.org.
To post to this group, send email to pain...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/paint-dev/8bcf73fb-3c2e-4429-bc44-abb79439de22%40chromium.org.

[Stefan Zager]

I think what you want is a dump of the display list from the paint system.  Any paint team people have advice?

[jip.d...@gmail.com]

But what about elements outside of the viewport? I'm interested in those too.

I came across Chromium development documentation about implementing Display List. The documents mention the implementation is similar to Firefox. With Firefox I've already experimented with dumping the Display List, which wasn't enough for me. The information I need is somewhere between the Layout Tree and painting.

IntersectionObserver v2 sounds interesting! Is it part of Chrome? I couldn't find much info about it.