Closed Bug 1460862 Opened 3 years ago Closed 3 years ago
When the "reveal" link is clicked, a smooth animated transition to the corresponding node should be implemented
46 bytes, text/x-phabricator-request
|Details | Review|
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.
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)
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
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.
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 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)
Pushed by email@example.com: https://hg.mozilla.org/integration/autoland/rev/a660ab08bc27 Smooth scrolling when clicking on 'reveal' in slotted elements. r=bgrins
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 :)
(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)
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!
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.
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
3 years ago
You need to log in before you can comment on or make changes to this bug.