Inconsistencies in the inspector highlight overlay

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

Felipe:

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

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

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:

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

Hi 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

Best regards,

Felipe