1042189 - Implement interaction designs for selecting a suggestion/history item

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: Search Activity, defect, P1)

Description

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: search_suggexpand2.mov

Opening up this bug to track the interactive design and animations work for the suggestions step in the search flow.

In particular, how interactions park will work when a user selects a suggestion/history item. Then, they'd be presented with the results page (web view for now).

Comment 1

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: XXHDPI - Mobile - Typing 2.png

Attaching screenshot just for quick reference.

Comment 2

[:Margaret Leibovic]

Lucas, any suggestions about this best way to approach this?

Comment 3

[Lucas Rocha (:lucasr)]

(In reply to :Margaret Leibovic from comment #2)
> Lucas, any suggestions about this best way to approach this?

I'd probably keep a top level TextView that could get positioned to overlap with the TextView in the clicked search suggestion row and then animated to the final position in the input entry. Then hide the animated TextView and set the input entry's text with the new content. Give this a try to see how the code would look like.

Comment 4

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: search_suggexpand3_short.mov

Margaret made a great catch, the starting y position was way below the actual label so this video has that updated.

Comment 5

[:Margaret Leibovic]

Here's a WIP PR:
https://github.com/ericedens/FirefoxSearch/pull/32

And here's a build to try:
http://people.mozilla.org/~mleibovic/search-anim.apk

Adding these transitions challenge our current modular fragment design, since this transition could be initiated from different fragments. I just stuck the logic in MainActivity for now, but I had to hack some public APIs into SearchFragment, so we should think about how we might want to update the interfaces between these different fragments.

Comment 6

[:Margaret Leibovic]

Attachment: Animation for selecting a suggestion/history item

Things to address in other bugs:

* Fine-tuning interpolator
* Search bar animation (we can do this in bug 1043027)
* Reverse animation when hitting back button (I'm not sure if we can even do this as indicated in the mock-up, since we would have to store where the original suggestion was, and we have to count on that suggestion still being in that same spot)
* Refactoring interfaces to make transition logic less fragile

Once we land this patch, we can divide and conquer on the follow-up issues.

Comment 7

[Eric Edens [:eedens]]

Comment on attachment 8464133 [details] [diff] [review]
Animation for selecting a suggestion/history item

Review of attachment 8464133 [details] [diff] [review]:
-----------------------------------------------------------------

This looks great!

We talked about this on IRC, but for bugzilla: I tried this on Gingerbread S2, and the animations look nice. At the end of the animation, though, the webview is hidden -- perhaps the animationText and/or the animationCard are still visible? So we should probably figure that out before landing. (Whether disabling animations in Gingerbread, or working around whatever is causing the issue)

::: mobile/android/search/java/org/mozilla/search/AcceptsSearchQuery.java
@@ +28,5 @@
> +    /**
> +     * Interface to specify search suggestion animation details.
> +     */
> +    public interface SuggestionAnimation {
> +        public Rect getStartBounds();

I like this SuggestionAnimation interface :)

::: mobile/android/search/java/org/mozilla/search/MainActivity.java
@@ +170,5 @@
> +            }
> +        });
> +
> +        set.setDuration(SUGGESTION_TRANSITION_MS);
> +        set.setInterpolator(new AccelerateDecelerateInterpolator());

Can AccelerateDecelerateInterpolator be cached in a static final?

Comment 8

[:Margaret Leibovic]

Attachment: (v2) Animation for selecting a suggestion/history item

This fixes the gingerbread issues. I built this on top of my patch for bug 1045819.

Comment 9

[Eric Edens [:eedens]]

Comment on attachment 8464253 [details] [diff] [review]
(v2) Animation for selecting a suggestion/history item

Review of attachment 8464253 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good!

Comment 10

[:Margaret Leibovic]

https://hg.mozilla.org/integration/fx-team/rev/beb0aaf0804b

PR here is up to date: https://github.com/ericedens/FirefoxSearch/pull/32

Comment 11

[:Margaret Leibovic]

I have the power!

https://github.com/ericedens/FirefoxSearch/commit/b6e86ccad0a42061ec970e9fcd7b063eec85150e

Comment 12

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/beb0aaf0804b

Comment 13

[Flaviu Cos]

Verified as fixed in build 35.0a1 (2014-09-08);
Devices: 
Google Nexus 7 (Android 4.4.4);
Samsung Galaxy R (Android 2.3.4).