Content bubble animation should respect icon size |
||
Issue descriptionVersion: 51.0.2666.0 OS: Chrome OS, Linux, Windows What steps will reproduce the problem? 1. Run Chrome with Material design flag on (--top-chrome-md=material) 2. Slow down popup bubble animation (done in a code hack in content_setting_image_view.cc) 3. Open http://www.popuptest.com/popuptest1.html What is the expected output? Animation progresses from zero width clipping bubble elements (icon and label) as necessary. It should grow to its maximum width starting at zero width (this takes 150ms at normal speed), pause for 3.2 seconds and then shrink to the icon width (the last part should take 150ms at normal speed). What do you see instead? Several problems: 1. The bubble is not clipping its children, so the image draws outside the bubble bounds. This is MD-specific. 2. The image is being centered at the bubble center when the size is too low, instead of always being positioned based on the leading edge of the bubble, so it doesn't "slide in" correctly shifting during the initial portion of the animation. 3. The animation "closes" down to zero width (MD) or smaller than necessary width (non-MD) and then snaps the image back into place; it should animate down to become just large enough to show the image. See attached slow motion videos (MD and non-MD) for demonstration. The affected code is mostly in IconLabelBubbleView::Layout().
,
Mar 2 2016
I think it is OK to start at zero width with clipping and padding the icon. I think it will look fractionally smoother. However I would also suggest making it not stoppable with a click until the total width grows past the (icon width) + (leading and trailing padding). I am currently experimenting with stopping animation when the icon's right edge crosses the right bubble's boundary in shrinking phase and it looks quite nice. I will post the slow-motion of that soon.
,
Mar 2 2016
Maybe if a user clicks the bubble before it's as large as the icon it should snap up to the icon size.
,
Mar 2 2016
#3, yes, this is what I meant, register the click but progress or better yet snap (the difference is not going to be noticeable at normal speed) to the icon size. Attached is a slow motion exploration how MD animation could look like.
,
Mar 2 2016
This animation looks pretty good. Just two things: (1) The non-MD case, as you noted over IM, looks like it gets clamped at the beginning, resulting in sticking at a slightly odd size. I'd like to remove that clamp so that this looks just like the MD start. (2) The MD case clips the icon a little at the very end, whereas the non-MD case doesn't. The latter looks better. It seems like maybe what we'd need to do is make the bubble outline/background vanish a few pixels sooner, like when the icon begins to cross into what would normally be the trailing padding area?
,
Mar 3 2016
#5, I think I have managed to get both those as well as the RTL case (the icon was mirrored but we were not properly flipping which edge gets exposed first). See if you spot any troubles worth fixing. For comment #3 I have experimented a bit and I thought it makes sense to bypass the animation and snap directly to the end state. The dropdown has all the information and if you somehow manage to click the animation in its first 10 milliseconds then there is probably no expectation to see the animation. It looked simpler and more consistent to me.
,
Mar 3 2016
This is continuing to look better. The issues below are all minor except for the jerking in MD. In the non-MD case there is some sort of flicker right as the bubble disappears at the end. Could this be some kind of rounding/precision issue where if the animation happens to hit the right values we might hide, re-show, then hide the bubble again? Is this just a video artifact? This case also shows only the left side of the bubble as it begins to animate, unlike the MD case where we show a min-width closed bubble first. If possible that would be nice to do for non-MD, I wouldn't block on it though. In the MD case, the animation seems to be hitching oddly. Again, is this real, or a video artifact? There's also a slight blip at the end where the animation looks complete for a while, but then the text left of the icon gets un-clipped by a few pixels. Would be nice to have animated all the way to this state instead of apparently jumping to it after the animation finishes.
,
Mar 3 2016
Oh yeah. The MD bubble also seems to have tons more trailing padding than leading padding. This isn't the case with non-MD. It would be good to reduce this to match the leading padding. This may be a dupe of part of bug 586423 .
,
Mar 3 2016
Yes, looking at the code making kIconLabelViewTrailingPadding less for MD modes should do that. It will not deal with all of the bug 586423 but will fix the extra large trailing padding.
,
Mar 4 2016
Yes, I think the strange things you mentioned are video frame timing artifacts. I have slowed the animation even more and I don't see most of them. The text in the omnibox does have some layout that only gets exposed with an additional repaint but this is not a regression. It is because when background is hidden at the end of the animation the icon bubble is sized to just the image. We can track it separately. Definitely wouldn't block on non-MD visuals at the very very beginning - those are probably invisible because the first animation frame should be past that point. And non-MD is going away. I will push a CL soon.
,
Mar 4 2016
,
Mar 11 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/a2a4fab1693d6985dda4de9e91825fd667f07598 commit a2a4fab1693d6985dda4de9e91825fd667f07598 Author: varkha <varkha@chromium.org> Date: Fri Mar 11 21:12:24 2016 Adjusts content bubble animation with respect to icon size This CL corrects several issues with the icon bubble animation: 1. The bubble is not clipping its children, so the image draws outside the bubble bounds. This is MD-specific. 2. The image is being centered at the bubble center when the size is too low, instead of always being positioned based on the leading edge of the bubble, so it doesn't "slide in" correctly shifting during the initial portion of the animation. 3. The animation "closes" down to zero width (MD) or smaller than necessary width (non-MD) and then snaps the image back into place; it should animate down to become just large enough to show the image. 4. Removes the clamp in non-MD size that prevents animation from starting at zero. 5. Avoids clipping icon at the end of the animation (MD) by hiding the border even before the animation ends. 6. Reduces padding at the end of the MD version of the text label. 7. Corrects RTL layout by showing trailing edge of the icon first. BUG= 591411 Review URL: https://codereview.chromium.org/1763713004 Cr-Commit-Position: refs/heads/master@{#380729} [modify] https://crrev.com/a2a4fab1693d6985dda4de9e91825fd667f07598/chrome/browser/ui/layout_constants.cc [modify] https://crrev.com/a2a4fab1693d6985dda4de9e91825fd667f07598/chrome/browser/ui/views/location_bar/content_setting_image_view.cc [modify] https://crrev.com/a2a4fab1693d6985dda4de9e91825fd667f07598/chrome/browser/ui/views/location_bar/content_setting_image_view.h [modify] https://crrev.com/a2a4fab1693d6985dda4de9e91825fd667f07598/chrome/browser/ui/views/location_bar/icon_label_bubble_view.cc [modify] https://crrev.com/a2a4fab1693d6985dda4de9e91825fd667f07598/chrome/browser/ui/views/location_bar/icon_label_bubble_view.h [add] https://crrev.com/a2a4fab1693d6985dda4de9e91825fd667f07598/chrome/browser/ui/views/location_bar/icon_label_bubble_view_unittest.cc [modify] https://crrev.com/a2a4fab1693d6985dda4de9e91825fd667f07598/chrome/chrome_tests_unit.gypi
,
Mar 11 2016
|
||
►
Sign in to add a comment |
||
Comment 1 by pkasting@chromium.org
, Mar 2 2016