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

VERIFIED FIXED in Firefox 63

Status

P3
enhancement
VERIFIED FIXED
11 months ago
7 months ago

People

(Reporter: danibodea, Assigned: ladybenko)

Tracking

Trunk
Firefox 63
Dependency tree / graph
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(firefox62 wontfix, firefox63 verified)

Details

Attachments

(1 attachment)

(Reporter)

Description

11 months ago
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.

Updated

10 months ago
Depends on: 1459829
Priority: -- → P3

Updated

10 months ago
Product: Firefox → DevTools
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)
Flags: needinfo?(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
Flags: needinfo?(victoria)
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.
Flags: needinfo?(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.
Flags: needinfo?(mbalfanz)
(Assignee)

Updated

7 months ago
Assignee: nobody → balbeza
Status: NEW → ASSIGNED
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.
Attachment #9001602 - Flags: review+
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

7 months ago
Pushed by balbeza@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/a660ab08bc27
Smooth scrolling when clicking on 'reveal' in slotted elements. r=bgrins

Comment 9

7 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/a660ab08bc27
Status: ASSIGNED → RESOLVED
Last Resolved: 7 months ago
status-firefox63: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
status-firefox62: affected → wontfix
Flags: in-testsuite+
(Assignee)

Comment 10

7 months ago
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 :)
Flags: needinfo?(victoria)
(Assignee)

Comment 11

7 months ago
(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)
(Reporter)

Comment 12

7 months ago
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!
Status: RESOLVED → VERIFIED
status-firefox63: fixed → verified
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.
Flags: needinfo?(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
Flags: qe-verify+
Flags: needinfo?(timea.zsoldos)
Flags: qe-verify+
Flags: needinfo?(timea.zsoldos)
You need to log in before you can comment on or make changes to this bug.