Last Comment Bug 698095 - Tab count increment/decrement needs animation
: Tab count increment/decrement needs animation
Status: VERIFIED FIXED
:
Product: Firefox for Android
Classification: Client Software
Component: General (show other bugs)
: unspecified
: ARM Android
: P3 normal (vote)
: ---
Assigned To: Sriram Ramasubramanian [:sriram]
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2011-10-28 14:11 PDT by Sriram Ramasubramanian [:sriram]
Modified: 2016-07-29 14:20 PDT (History)
5 users (show)
camelia.urian: in‑litmus+
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
fixed
11+


Attachments
Patch (9.25 KB, patch)
2011-10-30 21:27 PDT, Sriram Ramasubramanian [:sriram]
no flags Details | Diff | Splinter Review
Option 2: WIP (9.16 KB, patch)
2011-10-30 21:51 PDT, Sriram Ramasubramanian [:sriram]
no flags Details | Diff | Splinter Review
Screenshot: Spaces between text (40.76 KB, image/png)
2011-11-09 17:01 PST, Sriram Ramasubramanian [:sriram]
no flags Details
Patch (9.57 KB, patch)
2011-11-10 13:09 PST, Sriram Ramasubramanian [:sriram]
no flags Details | Diff | Splinter Review
bad background (51.42 KB, image/png)
2011-11-11 08:31 PST, Mark Finkle (:mfinkle) (use needinfo?)
no flags Details
Patch (9.82 KB, patch)
2011-11-11 11:28 PST, Sriram Ramasubramanian [:sriram]
mark.finkle: review+
Details | Diff | Splinter Review

Description Sriram Ramasubramanian [:sriram] 2011-10-28 14:11:21 PDT
When user opens a new tab or closes a tab, the tab count should be shown, with an animation.
Comment 1 Sriram Ramasubramanian [:sriram] 2011-10-30 21:27:37 PDT
Created attachment 570602 [details] [diff] [review]
Patch

This patches does a small animation for tab addition and deletion.

Method used:
* A TextSwitcher is visible when the animation happens, and the image in the button is hidden (using a transparent color). This ensures that the button still receives the "touch" event to add/view tabs.
* The image button is made to use <level-list> for cleaner code. A max value of 100 is set for "down arrow", as people tend not to open more than 100 tabs anytime.
* Since the animations are smaller, I used them via code. I would also prefer moving them to separate files so that we have a good MVC pattern.

Problems I see:
* I am using a 500ms time for transition for the numbers, and a 500ms before showing the "+" or down arrow in the button. This might be too fast to notice. The time needed for transition must be decided.
* There is a visual glitch in sudden transition from number to image to number. I cannot use a fade-in/fade-out on the image, as it is a part of the button. If there is a need for a smoother transition, its better to come up with a "ButtonSwitcher" of our own.
Comment 2 Sriram Ramasubramanian [:sriram] 2011-10-30 21:51:41 PDT
Created attachment 570604 [details] [diff] [review]
Option 2: WIP

This patch is same as the previous one. Except that, the "plus" and "more" images don't go away when the counter animation happens. The number stays on top of the image for 500ms and goes away. This reduces the visual clutter a bit.

(The padding and spacing aren't perfect yet. They can be perfected, if we plan to go with this option)
Comment 3 Sriram Ramasubramanian [:sriram] 2011-11-09 17:01:07 PST
Created attachment 573377 [details]
Screenshot: Spaces between text

I am trying to fix this space between the two. But I'm unable to do it in all means. This needs more exploration. Probably it has to do with the font's baseline, which I'm failing to understand. This is avoiding the "overlap" being visible on animation. Other than that, my animation works now.
Comment 4 Sriram Ramasubramanian [:sriram] 2011-11-10 13:09:41 PST
Created attachment 573620 [details] [diff] [review]
Patch

This patch does tab-counter animation with no overlap of digits. This uses TextSwitcher to achieve the same.
Comment 5 Mark Finkle (:mfinkle) (use needinfo?) 2011-11-11 08:31:13 PST
Created attachment 573821 [details]
bad background

Patch looks OK, but the background of the text number is wrong. (Nexus One on Gingerbread)
Comment 6 Sriram Ramasubramanian [:sriram] 2011-11-11 11:28:17 PST
Created attachment 573865 [details] [diff] [review]
Patch

This patch fixes the background of the TextSwitcher.
Comment 7 Mark Finkle (:mfinkle) (use needinfo?) 2011-11-11 11:50:08 PST
Comment on attachment 573865 [details] [diff] [review]
Patch

Looks good
Comment 8 Mark Finkle (:mfinkle) (use needinfo?) 2011-11-11 11:57:03 PST
https://hg.mozilla.org/projects/birch/rev/80e0c193d27f
Comment 9 Damon Sicore (:damons) 2011-11-13 14:21:00 PST
Seems like we could write tests here to keep track of tab counts and visibility.  Is there a reason why we aren't including such tests?
Comment 10 Aaron Train [:aaronmt] 2011-11-14 06:47:00 PST
20111114041052
http://hg.mozilla.org/projects/birch/rev/859ecdfe0168
Samsung Galaxy SII (Android 2.3.4)
Comment 11 Camelia Urian 2011-11-29 07:09:05 PST
Test case created: BFT- Tabbed Browsing:
https://litmus.mozilla.org/show_test.cgi?id=40431

Note You need to log in before you can comment on or make changes to this bug.