1460862 - When the "reveal" link is clicked, a smooth animated transition to the corresponding node should be implemented

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Bodea Daniel [:danibodea]]

STR:
1. Reach this page: https://www.polymer-project.org/2.0/start/quick-tour
2. Open Developer Tools / Inspector tab.
3. Right-click on the body and click "Expand all".
4. Scroll the HTML code to <slot id="slot"></slot>
5. Click on the "reveal" link displayed while hovering over the <label> tag.
Actual: Notice that the HTML code inspector tab is auto-scrolled instantly (it snaps) to the position of the corresponding node.
Expected: The auto-scroll should be made more smoothly, so that the use is not confused about the position of the node in correspondence with the reveal link.

Comment 1

[Julian Descottes [:jdescottes]]

Victoria, this reminds me of your suggestion from the UX review "displaying curved arrows that point from original to slotted node" similar to https://s.blogcdn.com/www.tuaw.com/media/2009/09/7aaa540d73ea7edeaacf6892d27c5ed9.jpg as it helps the user keeping track of the connection between the slotted and real nodes.

In the same vein, having a way to jump the other way around could also be interesting!

How do you feel about making the scrolling smooth when clicking on this link? Would that help as well, and is this a UX pattern we want in DevTools?

(note: no idea how easy that would be to implement since we rely on very basic APIs to update the inspector's selected node at the moment... we will need to be careful to not introduce smooth scrolling everywhere)

Comment 2

[Victoria Wang [:victoria]]

Yes! I love the idea of a smoother transition for this jump. Could start with these duration/easing guidelines: https://design.firefox.com/photon/motion/duration-and-easing.html

Comment 3

[:Harald Kirschner :digitarald]

This implementation should use the reduced motion media query to not animate for those users.

fyi Martin, it seems a good idea to smoothly transition anything that can jump to a node outside of the current scroll viewport. Inspecting elements would be a similar example; where smooth transitions provide a more polished experience.

Comment 4

[Martin Balfanz [:mbalfanz]]

I'll add a separate item to our inspector polish backlog.  We should carefully select where transition make sense and actually provide value.

In this particular case: yes, I think a transition would be helpful in this case.  It's also in line with the "Scroll into view" option and therefore helps our consistency. +1 for using the reduced motion media query.

Comment 5

[Belén [:ladybenko]]

Attachment: Bug 1460862 - Smooth scrolling when clicking on 'reveal' in slotted elements. r=bgrins

Comment 6

[Brian Grinstead [:bgrins]]

Comment on attachment 9001602 [details]
Bug 1460862 - Smooth scrolling when clicking on 'reveal' in slotted elements. r=bgrins

Brian Grinstead [:bgrins] has approved the revision.

Comment 7

[Victoria Wang [:victoria]]

Feel free to need-info me when I can review this (I thought the smooth scrolling was in Nightly, but I don't think I see it)

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a660ab08bc27
Smooth scrolling when clicking on 'reveal' in slotted elements. r=bgrins

Comment 9

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/a660ab08bc27

Comment 10

[Belén [:ladybenko]]

Hi Victoria, sorry I wanted to run extra tests on Try just in case, and they were taking too long and had to postpone landing to the next day 😅 I have just updated Nightly and it's there already :)

Comment 11

[Belén [:ladybenko]]

(In reply to Belén [:ladybenko] from comment #10)
> Hi Victoria, sorry I wanted to run extra tests on Try just in case, and they
> were taking too long and had to postpone landing to the next day 😅 I have
> just updated Nightly and it's there already :)

BTW I have a simple page to try this out https://belen-albeza.github.io/webcomponents-playground/test-scroll/ (it will also tell you if the user has enabled reduced motion or not, in which case the scrolling is disabled)

Comment 12

[Bodea Daniel [:danibodea]]

Hello,

I can confirm the fix/implementation in the latest Nightly (v63.0a1, 2018-08-23) and the 3 main OSes (Windows 10, Ubuntu 16.04 LTS and Mac OS X 10.13.6)

Thank you!

Comment 13

[Victoria Wang [:victoria]]

Thanks Belén - the test page is hilarious and I love this animation's jazz-like buttery-smooth slide. At first it seemed slower than I expected, but now I think it's perfect.

Comment 14

[Victoria Wang [:victoria]]

I realized the little gray arrow with lack of hover/active state makes this a bit more hidden than it should be, so I filed a UX polish bug for this https://github.com/devtools-html/ux/issues/20