Intent to remove: Reflow logging in console

[Brian Grinstead]

We have a ‘reflow logging’ feature that’s off by default but toggleable through the CSS -> Reflows filter button. There’s also a feature to track reflows in the perf tool (visible as ‘Layout’ markers). I intend to remove this feature in the webconsole since it’s off by default, provided in a place that makes more sense, and will mean less work for the devtools.html console project.

Documentation that will need to be updated / removed: https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages#Reflow_events
Bug for feature removal: https://bugzilla.mozilla.org/show_bug.cgi?id=1003107.

Brian

[Jet Villegas]

I'm not familiar with the Reflow Logging feature in the console but I'm
curious if it's wired into the same underlying Gecko Layout code as Layout
markers. That is, are we actually showing the same data in two different
tools today? Are the Layout markers missing any functionality that Reflow
Logging currently exposes?

Thanks,

--Jet



On Mon, Aug 15, 2016 at 3:02 PM, Brian Grinstead <bgrin...@mozilla.com>
wrote:

> _______________________________________________
> dev-developer-tools mailing list
> dev-devel...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-developer-tools
>

[Brian Grinstead]

Checked today, and the console uses docshell.addWeakReflowObserver [0]. One potential difference / missing functionality is that the weak reflow observer notifies you if a reflow is interruptible or not [1] -- but the console UI doesn’t do anything with that info right now.

As far as implementation, Jordan pointed out that layout markers are generated in PresShell::DoReflow [2] and weak reflow observers are notified in PresShell::DidDoReflow [3].

Brian

[0]: https://dxr.mozilla.org/mozilla-central/source/devtools/server/actors/utils/webconsole-utils.js#1000
[1]: https://dxr.mozilla.org/mozilla-central/source/docshell/base/nsIReflowObserver.idl#29
[2]: https://dxr.mozilla.org/mozilla-central/source/layout/base/nsPresShell.cpp#9539
[3]: https://dxr.mozilla.org/mozilla-central/source/layout/base/nsPresShell.cpp#9450

[Jaroslav Šnajdr]

Another difference between the two features is that the console reflow
logging shows you the JS location that triggered the reflow (i.e., setting
element size or changing a style from JS), while the "Layout" marker in the
performance timeline doesn't. Or maybe it does if you enable some checkbox,
but I didn't find anything like that.

Jarda

On Tue, Aug 16, 2016 at 10:04 PM, Brian Grinstead <bgrin...@mozilla.com>
wrote:

[Jet Villegas]

Thanks for the confirmation. We probably don't want the user to be worrying
about interruptible reflows, since this behavior isn't specified and
differs across browsers.

Jaroslav's note re: listing the JS code that triggered the reflow is useful
info that I hope we can move to a better DevTool after we remove console
logging.

--Jet

On Tue, Aug 16, 2016 at 1:04 PM, Brian Grinstead <bgrin...@mozilla.com>

wrote:

> Checked today, and the console uses docshell.addWeakReflowObserver [0].
> One potential difference / missing functionality is that the weak reflow
> observer notifies you if a reflow is interruptible or not [1] -- but the
> console UI doesn’t do anything with that info right now.
>
> As far as implementation, Jordan pointed out that layout markers are
> generated in PresShell::DoReflow [2] and weak reflow observers are notified
> in PresShell::DidDoReflow [3].
>
> Brian
>
> [0]: https://dxr.mozilla.org/mozilla-central/source/
> devtools/server/actors/utils/webconsole-utils.js#1000
> [1]: https://dxr.mozilla.org/mozilla-central/source/docshell/base/
> nsIReflowObserver.idl#29
> [2]: https://dxr.mozilla.org/mozilla-central/source/layout/
> base/nsPresShell.cpp#9539
> [3]: https://dxr.mozilla.org/mozilla-central/source/layout/
> base/nsPresShell.cpp#9450
>
>

> > On Aug 15, 2016, at 5:11 PM, Jet Villegas <jvil...@mozilla.com> wrote:
> >
> > I'm not familiar with the Reflow Logging feature in the console but I'm
> curious if it's wired into the same underlying Gecko Layout code as Layout
> markers. That is, are we actually showing the same data in two different
> tools today? Are the Layout markers missing any functionality that Reflow
> Logging currently exposes?
> >
> > Thanks,
> >
> > --Jet
> >
> >
> >

[Jordan Santell]

Layout markers in performance tool have locations when it's a synchronous
reflow, seen in this[0] example, within some JS marker, whereas async
reflows doesn't display the reason the layout was invalidated on previous
frames, which looks similar to the console reflow logs, some being sync,
some being async:

```
reflow: 0.03ms function go, sync-reflow.html line 27
reflow: 0.23ms function go, sync-reflow.html line 27
reflow: 0.04ms
reflow: 0.27ms
```

[0] http://jsantell.github.io/browser-render-pipeline/sync-reflow.html

On Wed, Aug 17, 2016 at 12:46 AM, Jaroslav Šnajdr <jsn...@gmail.com> wrote:

> Another difference between the two features is that the console reflow
> logging shows you the JS location that triggered the reflow (i.e., setting
> element size or changing a style from JS), while the "Layout" marker in the
> performance timeline doesn't. Or maybe it does if you enable some checkbox,
> but I didn't find anything like that.
>
> Jarda
>

> On Tue, Aug 16, 2016 at 10:04 PM, Brian Grinstead <bgrin...@mozilla.com>

> wrote:
>
> > Checked today, and the console uses docshell.addWeakReflowObserver [0].
> > One potential difference / missing functionality is that the weak reflow
> > observer notifies you if a reflow is interruptible or not [1] -- but the
> > console UI doesn’t do anything with that info right now.
> >
> > As far as implementation, Jordan pointed out that layout markers are
> > generated in PresShell::DoReflow [2] and weak reflow observers are
> notified
> > in PresShell::DidDoReflow [3].
> >
> > Brian
> >
> > [0]: https://dxr.mozilla.org/mozilla-central/source/
> > devtools/server/actors/utils/webconsole-utils.js#1000
> > [1]: https://dxr.mozilla.org/mozilla-central/source/docshell/base/
> > nsIReflowObserver.idl#29
> > [2]: https://dxr.mozilla.org/mozilla-central/source/layout/
> > base/nsPresShell.cpp#9539
> > [3]: https://dxr.mozilla.org/mozilla-central/source/layout/
> > base/nsPresShell.cpp#9450
> >