Add a dump of the frame tree to reflow timeline markers




Developer Tools: Performance Tools (Profiler/Timeline)
4 years ago
5 months ago


(Reporter: pbro, Unassigned)


(Blocks: 1 bug)

Firefox Tracking Flags

(Not tracked)


(Whiteboard: [devtools-platform])


(1 attachment)



4 years ago
It would be useful if reflow timeline markers would have a dump of the frame tree as their payload.

See nsIFrame::DumpFrameTree() in nsFrame.cpp. This utility method is usually used while debugging c++ code (there is even a handy shortcut in lldb/gdb 'ft') to dump a textual representation of the current frame tree to the standard output.

We could relatively easily add a new method that outputs a js object instead.

The frame tree dump today looks like this:

Viewport(-1)@128086458 [view=125fbc710] {0,0,61440,46980} [state=0000062000042220] [sc=12d40f760:-moz-viewport]<
  HTMLScroll(html)(-1)@128087518 {0,0,61440,46980} [state=0000020000040010] [content=115c85d00] [sc=12992a4e8:-moz-viewport-scroll]<
    ScrollbarFrame(scrollbar)(-1)@128087d10 next=1293461f0 {0,46980,61440,0} [state=0000100080c80000] [content=1291615e0] [sc=1282ab528]<
      SliderFrame(slider)(-1)@129345860 {0,0,61440,960} [state=0000160080c00000] [content=1220b8670] [sc=129368bf8]<
        ButtonBoxFrame(thumb)(0)@129345d30 {60,120,61320,780} [state=2000160080400000] [content=1220b8700] [sc=129928a40]<>
    ScrollbarFrame(scrollbar)(-1)@1293461f0 next=1220a75c8 {60480,0,960,46980} [state=0000104080880000] [content=129161670] [sc=12911c490]<
      SliderFrame(slider)(-1)@129346b60 {0,0,960,46980} [state=0000164080800000] [content=1220b89d0] [sc=1298ad178]<
        ButtonBoxFrame(thumb)(0)@1220a7020 {120,38554,780,7560} [state=2000164080000000] [content=1220b8a60] [sc=1282a26b0]<>
    Box(scrollcorner)(-1)@1220a75c8 next=128087200 {61440,46980,0,0} [state=0000100080c00200] [content=129161700] [sc=12910b020]<>
    Canvas(html)(-1)@128087200 {0,-223561,61440,46980} vis-overflow=0,0,61440,275191 scr-overflow=0,0,61440,275191 [state=0000002000040200] [content=115c85d00] [sc=12994a478:-moz-scrolled-canvas]<
      Block(html)(-1)@1220a7cd0 next=1220a9218 {0,0,61440,275191} vis-overflow=-60,0,61500,275191 [state=0000100008c40200] [content=115c85d00] [sc=1291248c0,parent=0]<
        line 12993be70: count=1 state=block,clean,prevmarginclean,not impacted,not wrapped,before:nobr,after:nobr[0x48] {0,0,61440,275191} vis-overflow=-60,0,61500,275191 scr-overflow=0,0,61440,275191 <
          Block(body)(2)@1220a84b8 {0,0,61440,275191} vis-overflow=-60,0,61500,275191 [state=0000124008060200] [content=12936ae20] [sc=129362968]<
            line 129b4b778: count=1 state=block,clean,prevmarginclean,not impacted,not wrapped,before:nobr,after:nobr[0x148] {0,0,61440,0} <
              HTMLScroll(div)(0)@12d4060d8 next=12d406568 {0,0,61440,0} [state=0000028000020000] [content=129ba1840] [sc=1299434f0]<
                Block(div)(0)@12d406278 {0,0,61440,0} [state=000010a000c00200] [content=129ba1840] [sc=1220a8de0:-moz-scrolled-content]<
            line 12d4065d8: count=1 state=inline,clean,prevmarginclean,not impacted,not wrapped,before:nobr,after:nobr[0x300] {0,0,0,0} <
              Text(1)"\n    "@12d406568 next=1220a8790 {0,0,0,0} [state=0000000008620000] [content=1295920d0] [sc=129368728:-moz-non-element] [run=0][0,5,T] 
            line 12993bdd0: count=1 state=block,clean,prevmarginclean,not impacted,not wrapped,before:nobr,after:nobr[0x148] {0,0,61440,275191} vis-overflow=-60,0,61500,275191 scr-overflow=0,0,61440,275191 <
              Block(div)(4)@1220a8790 next=12993bb30 {0,0,61440,275191} vis-overflow=-60,0,61500,275191 [state=0000126008060200] [content=12936af60] [sc=12829dcc0]<
                line 12993ba90: count=1 state=block,clean,prevmarginclean,not impacted,not wrapped,before:nobr,after:nobr[0x148] {0,120,61440,264156} vis-overflow=-60,120,61500,265416 scr-overflow=0,120,61440,265416 <
                  Block(div)(1)@1293678c0 next=12990e040 {0,120,61440,264156} vis-overflow=-60,0,61500,265416 scr-overflow=0,0,61440,265416 [state=0000122008060200] [content=1291660c0] [sc=12d538370]<
                    line 12990df00: count=1 state=block,clean,prevmarginclean,not impacted,not wrapped,before:nobr,after:nobr[0x148] {0,0,61440,2640} vis-overflow=-60,0,61500,3900 scr-overflow=0,0,61440,3900 <
                      Block(header)(1)@129368358 next=1291158c8 {0,0,61440,2640} vis-overflow=-60,0,61500,3900 scr-overflow=0,0,61440,3900 [state=0000126008020200] [content=129592310] [sc=129345ee0]<

[... etc ...]

Frames in the tree have types, names, coordinates, etc... 
So if we get this information at each reflow captured in the timeline, we would be able to show exactly the size and position of all frames as they got created when the page got reflowed.


3 years ago
Blocks: 1050372
Moving into the Profiler component. Filter on GUTHRIE'S WAVY CAKES.
Component: Developer Tools: Timeline → Developer Tools: Profiler
Blocks: 1145271
Summary: Add a dump of the frame tree to reflow timeline markers → [marker] Reflow: Add a dump of the frame tree to reflow timeline markers
I suspect the GP already has something like this we can reuse.
Created attachment 8614828 [details]

I do but right now it's just parsing a raw display list dump to reconstruct this data. We need to first build a proper output format instead of parsing this mess.
Also I should add that collecting this information right now is relatively expensive. It's more expensive than the reflow itself, most of the time. It would need to be sped up.
Ohh wait, frametree isn't 1:1 to the display list. It's not clear to me how the frametree helps with performance problem but it probably does. This should probably be understood before implementing this.


3 years ago
Whiteboard: [devtools-platform]
Triaging. Filter on ADRENOCORTICOTROPIC (yes).
Priority: -- → P3
Summary: [marker] Reflow: Add a dump of the frame tree to reflow timeline markers → Add a dump of the frame tree to reflow timeline markers
Markus: I'm triaging and closing old issues. Does this one still have any merit? I have no idea the current state of the payload for reflow markers. If so I think it should live in the Gecko Profiler.
Flags: needinfo?(mstange)
This would be more of a debugging feature than a profiling feature. As such I think it's currently out of scope. It would also need to be behind a separate checkbox because dumping out the frame tree has high overhead.
Flags: needinfo?(mstange)
Thanks, marking as WONTFIX, and if it comes up again someone can re-file.
Last Resolved: 5 months ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.