这是indexloc提供的服务,不要输入任何密码
Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

Autofill main part #17986

Merged
merged 23 commits into from
May 6, 2020
Merged

Autofill main part #17986

merged 23 commits into from
May 6, 2020

Conversation

nturgut
Copy link
Contributor

@nturgut nturgut commented Apr 27, 2020

Main part of the code which handled autofill for web.

These issues will be addressed in the following PRs:

  • Looks like Safari needs label attributes for payment information to autofill. Add those.
  • Safari has different than the standard web autofill hints, add a map for them.
  • Firefox uses fname/lname for setting name, but chrome uses name field. Make name field work in a way easier for developers to use (now they have to add and if/else)
  • Integration tests
  • Add form submit after Allow platforms to save user input for future autofill  flutter#55613 is resolved (which will provide an action which will send all the key-values of autofill fields back to the engine). Currently the developers can collect all the fields on flutter side and send a http post request. However the mapping of RequestData to hints web expects needs to be done manually.

Unit tests are added.

@auto-assign auto-assign bot requested a review from liyuqian April 27, 2020 23:37
@nturgut nturgut force-pushed the autofill_main_part branch from 5211b9e to 7b0e1ba Compare April 27, 2020 23:44
@nturgut nturgut removed the request for review from liyuqian April 27, 2020 23:49
Copy link
Contributor

@mdebbar mdebbar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking great! I left several comments but most of them are little suggestions and nits.

Comment on lines 77 to 82
void _handleHtmlEvent(html.Event event) {
if (!(event is html.KeyboardEvent)) {
return;
}

html.KeyboardEvent keyboardEvent = event as html.KeyboardEvent;
Copy link
Contributor

@mdebbar mdebbar Apr 28, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this causing a lint error?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is very strange. When an autofill comes in Chrome it triggers keydown with an event type html.Event

If I don't add this check then I get the following exception:

errors.dart:167 Uncaught Error: Expected a value of type 'KeyboardEvent$', but got one of type 'Event$'
    at Object.throw_ [as throw] (errors.dart:216)
    at Object.castError (errors.dart:64)
    at Object.cast [as as] (operations.dart:444)
    at dart.LegacyType.new.as (types.dart:382)
    at keyboard.dart:39 

/// Autofill related values.
///
/// These values are to be used when a text field have autofill enabled.
@visibleForTesting
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this necessary? The class is public alread.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We usually use it for a class which is only defined as public for the testing purposes.

My approach is, it is not good practice to define a class public if it can be private. By putting this tag, I'm giving a hint to the future reader: "if it was not the tests, this would have been private"

Map<String, dynamic> focusedElementAutofill,
List<dynamic> fields,
) {
final singleElement = (fields == null);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: when there are no fields can we return null instead of creating an empty autofill group?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why return null? AutofillGroup is the owner of the form. Even if the fields are empty this means form should have only one element.

Shall I rename the AutofillGroup? :) (Any name suggestions, I can say AutofillForm. Or following @yjbanov 's suggestion EngineAutofillForm)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah ok that makes sense. I forgot about the form.

Ok, in this case, I still think we don't need a singleElement argument in the constructor. It can simply be a getter:

bool get isSingleElement => items.isEmpty;
// or
bool get isSingleElement => elements.isEmpty;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the suggestion. I removed the object property. We also don't need a getter. So far we only needed to use it in the factory constructor.

formElement.remove();
}

List<StreamSubscription<html.Event>> addEventListeners() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This method seems to have a non-trivial lifecycle. For example, calling it twice will result in duplicate event subscriptions. Calling it after removeForm will subscribe to detached elements.

I would try to express this functionality with a simpler lifecycle. For example, it seems like the list of elements does not change after the constructor call. Which means that if the list of form fields changes we tear down this class and create a new instance. Perhaps then we could initialize the subscriptions in the constructor once and cancel subscriptions in removeForm?

If a simple lifecycle is not possible, then I would recommend documenting it. As an example, here's another class with a complex lifecycle:

/// Performs 4 types of measurements:
.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. Thanks for the suggestion. I put a lot of thought behind it to address your concern. On the other hand detaching the lifecycle management for this method from rest of all the listener subscriptions seemed more complicated in the end.

I added a more detailed comment. PHAL.

}
}

/// Autofill related values.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider a more useful doc comment. The fact that this class is related to autofill and that it contains "values" is obvious just from the class name and that it has some field in it.

See also: https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#avoid-useless-documentation

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added more comments on the properties. I don't think we need to change the documentation on top of the class.

if (event is html.KeyboardEvent) {
if (_inputConfiguration.inputType.submitActionOnEnter &&
event.keyCode == _kReturnKeyCode) {
event.preventDefault();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to prevent default? Consider leaving a comment.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is only a format change. you can discuss with @mdebbar the keyboard related features. thanks for the suggestions.

Copy link
Contributor Author

@nturgut nturgut Apr 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mdebbar let me know if there is any comment you want me to add since I'm around the file :)

Copy link
Contributor

@mdebbar mdebbar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me modulo the element type issue.

@nturgut nturgut requested review from yjbanov and mdebbar May 4, 2020 19:37
@nturgut
Copy link
Contributor Author

nturgut commented May 4, 2020

Looks good to me modulo the element type issue.

I added autocomplete for textarea. I also added unit tests. PHAL.

@nturgut
Copy link
Contributor Author

nturgut commented May 6, 2020

Merging the PR now. I'll send more updates for the followups mentioned in the description. Thanks for the review. Thanks for the LGTM @mdebbar

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants