604946 - form assistant leaves ghost tab images over content

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[Tony Chung [:tchung]]

Attachment: Ghost tab images over content screenshot

When tapping on the content textboxes with tabs open, i can sometimes get ghost images of the tabs to appear

* See screenshot.  Could not reproduce on the Nexus One

Repro:
1) install nightly android build: Mozilla/5.0 (Android; Linux armv71; rv:2.0b8pre) Gecko/20101016 Firefox/4.0b8pre Fennec/4.0b2pre	
2) open a few tabs on the sidebar
3) launch a website that has a textbox, that would require tapping to open in a virtual keyboard
4) click on a search box within the content page
5) Verify ghosted images of tab thumbnails appear in the screen

Expected:
- no ghosted tab thumbnails on the content pages

Actual:
- ghosted tab thumbnails

Comment 1

[Tony Chung [:tchung]]

Attachment: Another ghosted tab thumbnail screenshot

Another screenshot example, this one on cnn.com search box.

Comment 3

[Matt Brubeck (:mbrubeck)]

Only the fourth and later tabs show up as ghosts - it looks like they are being pushed into a new column by the keyboard resize, and for some reason when formhelper is activated, that new column ends up overlapping the content.

Comment 4

[Matt Brubeck (:mbrubeck)]

Attachment: New tab theme

For some reason, setting "opacity: 0.5" on the documenttab element made it fail to go away when scrolled offscreen.  (Looks like a CSS or gfx bug.)  Moving the opacity from the documenttab to the thumbnail fixes this bug.

In order to distinguish between the foreground and background tabs, we then need to apply more of the new theme.  This patch:

* Applies the new theme background and button images from bug 575403.
* Changes some CSS selectors for performance reasons.
* Shrinks Sean's background gradients to 1px wide and uses repeat-x.
* Moves the close button over the left border of the tab, as shown in http://www.flickr.com/photos/madhava_work/4993009505/sizes/o/in/set-72157624962763028/

For this to look right, it should be used with Vivien's sidebar gradient patch from bug 575403.

Comment 5

[Matt Brubeck (:mbrubeck)]

Attachment: screenshot with new theme patch

This also has attachment 484018 [details] [diff] [review] applied (sidebar and urlbar gradients).

Comment 6

[Matt Brubeck (:mbrubeck)]

Attachment: screenshot v2

Comment 7

[Matt Brubeck (:mbrubeck)]

Attachment: patch v2

Fix bugs pointed out by Sean:

* Overlay reload image on top of thumbnail, not underneath.
* Extend the tab padding to show the bevel at the bottom of the gradient.

There should also be a drop-shadow, but we are not doing that for now because of performance problems.

Comment 8

[Matt Brubeck (:mbrubeck)]

Attachment: patch v3

Fake a shadow using a thin gray border, as suggested by mart3ll on IRC.

Comment 9

[Matt Brubeck (:mbrubeck)]

Attachment: patch v4

New red close buttons from Sean.  These replace the existing close image rather than adding new images.  Renamed the close button images to end in -hdpi to match the new convention.

Comment 10

[Matt Brubeck (:mbrubeck)]

Attachment: screenshot v4

Comment 11

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 484066 [details] [diff] [review]
patch v4


> #tool-star {
>-  list-style-image: url("chrome://browser/skin/images/bookmark-default-64.png");
>+  list-style-image: url("chrome://browser/skin/images/bookmark-default-63.png");

Mistake?

The new close PNGs seem large (KB). We should look at shrinking our PNGs in general

Comment 12

[Matt Brubeck (:mbrubeck)]

(In reply to comment #11)
> Mistake?

Yes.

> The new close PNGs seem large (KB). We should look at shrinking our PNGs in
> general

I'll pngcrush the images and fix the -63 before pushing this patch.

Comment 13

[Matt Brubeck (:mbrubeck)]

http://hg.mozilla.org/mobile-browser/rev/03a6e97b5b21

Comment 14

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

Verified:
Mozilla/5.0 (Maemo;Linux armv71; rv:2.0b8pre) Gecko/20101019 Firefox/4.0b8pre Fennec/4.0b2pre
Mozilla/5.0 (Android; Linux armv71; rv2.0b8pre) Gecko/20101019 Firefox/4.0b8pre Fennec/4.0b2pre