Open Bug 1133666 Opened 10 years ago Updated 1 year ago

Devtools support for scrolling snap points

Categories

(DevTools :: Inspector, enhancement, P3)

Product:
DevTools
Component:
Inspector
Type:
enhancement

Tracking

(Not tracked)

People

(Reporter: pbro, Unassigned)

References

(Depends on 1 open bug)

Details

Depends on CSS scroll snapping to be implemented first (bug 945584). Spec: http://dev.w3.org/csswg/css-snappoints/#intro It's the sort of CSS features that devtools can easily help debug visually, simply by showing where the snappoints are in the container.
Depends on: 945584
Setting P3/enhancement for now, but I think it's worth reassessing the priority now that Bug 945584 has landed. pbro: what do you think? We keep it as P3 until the property gets a bigger adoption?
Severity: normal → enhancement
Flags: needinfo?(pbrosset)
Priority: -- → P3
(In reply to Julian Descottes [:jdescottes] from comment #1) > Setting P3/enhancement for now, but I think it's worth reassessing the > priority now that Bug 945584 has landed. > > pbro: what do you think? We keep it as P3 until the property gets a bigger > adoption? Yeah, it would make sense to help with simpler CSS properties that most people use today and have trouble with. But having said this, it's always a hard balance to strike because devtools can also play a role in feature adoption. I think P3 is fine for now.
Flags: needinfo?(pbrosset)
The CSS Scroll Snap spec. changed a lot since this bug was created, so we should wait until the implementation got updated accordingly. See bug 1231777. Sebastian
Depends on: css-scroll-snap-1
Product: Firefox → DevTools

The updated version of scroll snapping shipped in Firefox 68. So, there shouldn't be anything holding up the implementation anymore. (Except for resource constraints, of course. 😊)

The implementation should visualize the scroll-margin, scroll-padding, and scroll-snap-align values, maybe also scroll-snap-type. Only scroll-snap-stop is not implemented yet.

Sebastian

Severity: normal → S3

FWIW, the Chrome DevTools have an implementation for this. They show a "scroll-snap" badge besides the scroll container. Clicking it enables the highlighter, which shows snap points as dots, the scroll snap areas with dashed lines (even outside the scrollport), the scroll margins in yellow (like the box highlighter), and the scroll padding as a purple outline. It does not indicate the scroll snap type, nor the scroll snap stop value.

An MVP for this might show the scroll snap point for the currently snapped scroll snap area.

Sebastian

You need to log in before you can comment on or make changes to this bug.