Inconsistencies in the inspector highlight overlay

[Felipe Erias Morandeira]

Hello,

My name is Felipe Erias. I am working on the implementation of the scrollbar-gutter CSS property, which gives Web authors more control over how scrollbars influence their layouts.

Spec: http://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property

Explainer: https://github.com/felipeerias/scrollbar-gutter-explainer

Bug: https://crbug.com/710214

CL: https://chromium-review.googlesource.com/c/chromium/src/+/2306498

As part of this work, we are looking into changing some of the LayoutBox API for querying the size of scrollbars. Long story short, I found myself adding a small change in the DevTools inspector to use the new API when getting a box's scrollbars in order to draw a highlight over it (inspector_highlight.cc).

My intention when doing this change was to preserve the existing behaviour. However, after closer examination, it turns out that this behaviour is inconsistent. For example:

— The green highlight ("padding") covers the content, padding, and scrollbars when the scrollbar is on the right. But when the scrollbar is on the left, the highlight doesn't cover it and steps on the box's border instead.

— The blue highlight ("content") is slightly larger than the content itself when there is a scrollbar. As I understand it, it is supposed to represent the width of the content area without scrollbar. But like in the previous case, it doesn't work well when the scrollbar is on the left.

Illustration: http://darker.ink/static/media/inspector-highlight-examples.png

I would like to ask whether this is intentional or perhaps a known bug.

It wouldn't be hard to implement a more consistent behaviour as part of my current work, if there is a specification for it. Or I could replicate the existing (inconsistent) behaviour with the new API, and file a separate bug.

What would you suggest?

Thank you and best regards,

Felipe

[Rob Paveza]

Felipe:

Maybe this is something we can collaborate on when I’m back in the office Monday? I’ve been trying to investigate some opportunities related to scrollable regions, and I’m wondering if this is something that might solve both our problems. 

If you can set up some time for us to sync, that’d be awesome. 

Rob

Sent from my phone, please excuse brevity. It is the soul of wit. 

On Aug 30, 2020, at 8:22 AM, Felipe Erias Morandeira <felip...@gmail.com> wrote:

Hello,

--
You received this message because you are subscribed to the Google Groups "devtools-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to devtools-dev...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/devtools-dev/1965524b-344e-45b5-afe7-51906ce1a3b5n%40chromium.org.

[Rob Paveza]

Just realized that this is from the mailing list. 🤣 Are you on the DevTools slack channel?

If not, I’ll be in the office tomorrow and will look more into toys. 

Sent from my phone, please excuse brevity. It is the soul of wit. 

On Aug 30, 2020, at 8:37 AM, Rob Paveza <Rob.P...@microsoft.com> wrote:

 Felipe:

[Yang Guo]

I'm sure +mat...@chromium.org from our side can also take a look how to approach this.

Cheers,

Yang

[Felipe Erias Morandeira]

Hi Rob,

Thank you very much. I am not on the slack channel yet but I have requested an invite. Please bear in mind that timezones might be an issue for synchronous communication—I'm in Japan :)

This is some more detailed information.

The bug is in the method InspectorHighlightBase::BuildNodeQuads(), which calculates the location and size of each highlight area.

For the green "padding" highlight, it uses the content+padding rectangle from the layout box. But then, to include the scrollbars inside this highlight, it simply adds their width and height to the highlight's width and height. This works well only when the scrollbars are along the right and bottom edges, but causes some funky behaviour otherwise.

For the blue "content" highlight, it starts with the box's content rectangle and adds the sizes of the scrollbars, with the same problems as above.

The CL that I am working on introduces a method LayoutBox::ComputeScrollbars() which calculates the size of scrollbars (and scrollbar gutters) along the four edges, so fixing the green "padding" highlight to include scrollbars can be done like this:

    padding_box = layout_box->PhysicalPaddingBoxRect();

    NGPhysicalBoxStrut scrollbars = layout_box->ComputeScrollbars();

    padding_box.SetX(padding_box.X() - scrollbars.left);

    padding_box.SetY(padding_box.Y() - scrollbars.top);

    padding_box.SetWidth(padding_box.Width() + scrollbars.HorizontalSum());

    padding_box.SetHeight(padding_box.Height() + scrollbars.VerticalSum());

As for the blue "content" highlight, I am not sure of what would be the ideal behaviour. I am leaning towards using the inner content rect without changes, but there might be use cases that I am missing.

Best regards,

Felipe

[Yang Guo]

Hi Felipe,

Thanks for the detailed explanation. There is - of course - no spec for how the overlay behaves. But we should stick as closely to the truth as possible. I would not be surprised if the current implementation is an approximation that is inaccurate in some cases.

As for communication channel, please stick to this mailing list. The slack channel is not as much frequented by folks on the Chrome DevTools team. This mailing list is also the preferred channel as per our design guidelines [0].

+Mathias Bynens and +Alex Rudenko on the Chrome DevTools team should be reasonably familiar with this to offer some concrete advice.

Cheers,

Yang

[0] https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/master/docs/design_guidelines.md

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/devtools-dev/54038329-7348-4a65-920c-e64dd0219e3dn%40chromium.org.

[Mathias Bynens]

Hey Felipe,

Thanks for the detailed explanation with screenshots. The green highlight issue is definitely a bug, and your suggested fix sounds reasonable to me. Please add me as reviewer on the CL.

Cheers,

Mathias

[Felipe Erias Morandeira]

I have just added you to the CL, thank you very much for your help.

Best regards,

Felipe