New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 880258 link

Starred by 1 user
Status: Assigned
Owner:
ftirelo@chromium.org
Cc:
se...@chromium.org
█ jtonollo@chromium.org
ftirelo@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

Implement animations for Autofill preview/filled

Project Member Reported by ftirelo@chromium.org, Sep 4 
Chrome Version: M71
OS: all

This is the implementation bug for crbug.com/880256.

Details: The project should consist of:
 - Splitting the CSS rules to accept different styles on preview and fill (today, the same style rule is applied to both).
 - Change the code to generate the CSS that will be applied on the field.
 - Define a parameterized feature, so that we can experiment with different values.
 - Define a Chrome flag with some promising values, so that the UX team can experiment and see what might work best.

jtonollo@ added some highlevel specs to a slidedeck, and we should start working from there: https://docs.google.com/presentation/d/1Joq2fJ8z9hzE2bzYhmP6NHPR2xVXD5PTrUgoyll5ehI/edit#slide=id.g3f017f7750_0_0

A basic example of the animation can be seen at https://windshield.corp.google.com/uploads/jtonollo/1535978192_index.html/ (copied to https://drive.google.com/open?id=1tqLzyarXCvAjR7DICemAlJX1Lq4PJUoy).

Ideally, we'd like to experiment with: applying animations only on preview or only on fill; different animation times; different initial positions.

These are some useful pointers for the project:
 - Chrome flag to change preview colors: chrome://flags/#autofill-preview-style
 - The CL where I introduced the experiment: crrev.com/c/1174710. Useful aspects:
    - features.cc, for the feature creation; 
    - about_flags.cc, for the flag with some default values for designers to test;
    - layout_theme.cc, for how to define the custom CSS for the color change.
 - Simple page we use for testing Autofill: https://dump-truck.appspot.com/usecase-address_and_cc_on_same_page/address_and_cc.html

Since we intend to have different effects for the previewed/filled states, we will also need to split -webkit-autofill selector into something like -webkit-autofill (for the filled state) and -internal-autofill-previewed (for the previewed state). Those will be applied to the field when Autofill state changes (HTMLFormControlElement::SetAutofillState).

We don't want to stop using -webkit-autofill, because many websites rely on that for additional styling. We also want to use -internal prefix instead, so it won't be exposed to the Web.

Comment 1 by frechette@chromium.org, Sep 7 

Original ripple animation depends on adding a pseudo-element (blue circle) to the form elements and animating it (by scaling it and fading it out to create the ripple effect). Unfortunately, pseudo-elements (added with `:before` and `:after` in CSS) render inside a container, and most of the form elements we care about (`input` and `select`) are not containers. More details: https://stackoverflow.com/a/4660434

An alternate ripple-like animation is achievable in pure CSS by using very long linear gradient backgrounds for each form element, and animating the position of the background behind each element. The effect can be improved by tweaking the gradient (choosing the right colors and stop points). Rough example: https://screenshot.googleplex.com/X8KB5HxWN5H (implementation attached).

Unfortunately, @keyframes animations in UA CSS are not supported right now (due to unresolved name scoping/matching for elements defined in UA). https://bugs.chromium.org/p/chromium/issues/detail?id=838526

Fortunately, in our case CSS animations can be replaced by CSS transitions.
long-gradient-background.html
3.8 KB View Download

Comment 2 by frechette@chromium.org, Sep 7 

Working Chrome implementation that resembles the proposed design:
https://screenshot.googleplex.com/VCO6WxrVMZS

Comment 3 by frechette@chromium.org, Sep 7 

Alternate animation possible with gradient backgrounds and transitions:
https://screenshot.googleplex.com/ZBz90s6n0b5
Project Member

Comment 4 by bugdroid1@chromium.org, Sep 8 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/274cc4cc8cf5be0ef72c1ebc24bbf02838ebedff

commit 274cc4cc8cf5be0ef72c1ebc24bbf02838ebedff
Author: Alexandre Frechette <frechette@chromium.org>
Date: Sat Sep 08 01:25:30 2018

[Autofill Animate] Split kPseudoAutofill rule in two.

Split the unique autofill rule into two cases: autofill previewed (fields
are filled when hovering over an autofill suggestion) and autofill selected
(fields are filled with a selected autofill suggestion). We stop styling
based on the old rule, and only keep it around for site compatibility. For now, we keep
the same (CSS) formatting for both rules. A future CL will differentiate
the styles, with options controlled by a flag.

Bug: 880258
Change-Id: I2d9148423442a9bfa51290776f4bf54cea0caf8a
Reviewed-on: https://chromium-review.googlesource.com/1206031
Commit-Queue: Fabio Tirelo <ftirelo@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Reviewed-by: Fabio Tirelo <ftirelo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#589747}
[modify] https://crrev.com/274cc4cc8cf5be0ef72c1ebc24bbf02838ebedff/third_party/blink/renderer/core/css/css_selector.cc
[modify] https://crrev.com/274cc4cc8cf5be0ef72c1ebc24bbf02838ebedff/third_party/blink/renderer/core/css/css_selector.h
[modify] https://crrev.com/274cc4cc8cf5be0ef72c1ebc24bbf02838ebedff/third_party/blink/renderer/core/css/parser/css.proto
[modify] https://crrev.com/274cc4cc8cf5be0ef72c1ebc24bbf02838ebedff/third_party/blink/renderer/core/css/parser/css_proto_converter.cc
[modify] https://crrev.com/274cc4cc8cf5be0ef72c1ebc24bbf02838ebedff/third_party/blink/renderer/core/css/rule_feature_set.cc
[modify] https://crrev.com/274cc4cc8cf5be0ef72c1ebc24bbf02838ebedff/third_party/blink/renderer/core/css/selector_checker.cc
[modify] https://crrev.com/274cc4cc8cf5be0ef72c1ebc24bbf02838ebedff/third_party/blink/renderer/core/html/forms/html_form_control_element.cc
[modify] https://crrev.com/274cc4cc8cf5be0ef72c1ebc24bbf02838ebedff/third_party/blink/renderer/core/inspector/inspector_trace_events.cc
[modify] https://crrev.com/274cc4cc8cf5be0ef72c1ebc24bbf02838ebedff/third_party/blink/renderer/core/layout/layout_theme.cc

Comment 5 by frechette@chromium.org, Oct 4

Status: Available (was: Assigned)

Comment 6 by frechette@chromium.org, Oct 25

Owner: ----

Comment 7 by ftirelo@chromium.org, Oct 29

Labels: -Pri-2 -M-71 Pri-3
Owner: ftirelo@chromium.org
Status: Assigned (was: Available)
WIP CL by frechette@: https://chromium-review.googlesource.com/c/chromium/src/+/1213683

Should come to this at some point in the near future.
►

Sign in to add a comment