518212 - revise styling of alert boxes / bookmarking popup

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: Bookmarks, defect, P1)

Description

[Madhava Enros [:madhava]]

Attachment: styling revisions

see attachment for revised styles

Our transient popups (alert boxes and the "Page Bookmarked" popup are currently pretty much unstyled.  Examples of the ones I mean:

Downloads:
http://www.flickr.com/photos/42739110@N07/3945811294/

Add-ons:
http://www.flickr.com/photos/42739110@N07/3945029065/in/photostream/

Page bookmarked:
http://www.flickr.com/photos/42739110@N07/3945822608/in/photostream/

Tab(s) opened in background:
http://www.flickr.com/photos/42739110@N07/3945868852/in/photostream/

Things to do:
- style the boxes as in the attached image
- use dark buttons where buttons are involved (page bookmarked -- see attachment)
- use the fennec-specific glyphs for the visual in the add-ons and downloads related alerts (again, see attachment)

Comment 1

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

we need the new addons and download button for that.

Comment 2

[Sean Martell]

Attachment: Revised alert glyphs - 30 and 16

Comment 3

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Madhava, it looks like the padding is different between your examples (the new tab alert for example).

Do you want to increase the padding (it is currently 1mm)?

Comment 4

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

* I think the popup alerts (nsIAlertsService stuff) needs to be wider. Notice how the Add-on and Download messages are wrappeded.
* I think the bookmark popup needs padding between the title and the buttons _and_ between the buttons themselves.
* I don't think we need the increase in outer border padding. It makes the popups look too spread-out

Comment 5

[Madhava Enros [:madhava]]

Can you attach a screenshot of what it looks like with the changes so far?

Comment 6

[Madhava Enros [:madhava]]

(In reply to comment #3)
> Madhava, it looks like the padding is different between your examples (the new
> tab alert for example).
> 
> Do you want to increase the padding (it is currently 1mm)?

Yeah - I think I was just doing it by eye to get across the kind of change.  If someone could attach a screenshot or two, I'd be happy to give an opinion.

Comment 8

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

Attachment: patch

This patch makes the requested changes

Comment 9

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

Attachment: patch 2

This patch is the same as the last but forces the arrows to create a padding, even when the XBL tries to collapse them

Comment 10

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

Ugh, right patch, but wrong comment. Correct comment:

This patch is the same as the last but makes the separator between the title and buttons of the bookmark popup a little smaller.

Comment 11

[:Gavin Sharp [email: [e-mail]]]

Comment on attachment 407639 [details] [diff] [review]
patch 2

>diff --git a/chrome/content/downloads.js b/chrome/content/downloads.js

>-const URI_GENERIC_ICON_DOWNLOAD = "chrome://mozapps/skin/downloads/downloadIcon.png";

File is now unused, remove it too?

>diff --git a/themes/wince/jar.mn b/themes/wince/jar.mn

>+  images/alert-addons-16.png           (images/alert-addons-16.png)
>+  images/alert-downloads-16.png        (images/alert-downloads-16.png)

These are unused?

Comment 12

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

(In reply to comment #11)

> >-const URI_GENERIC_ICON_DOWNLOAD = "chrome://mozapps/skin/downloads/downloadIcon.png";
> 
> File is now unused, remove it too?

it's part of Toolkit, not Fennec

> >+  images/alert-addons-16.png           (images/alert-addons-16.png)
> >+  images/alert-downloads-16.png        (images/alert-downloads-16.png)
> 
> These are unused?

Yeah, they are. I was hoping to use them in the low-res CSS but the images are loaded via JS (nsIAlertsService). I removed the images and forced the <image> to 16px width and height in browser-low.css

Comment 13

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

pusehd:
https://hg.mozilla.org/mobile-browser/rev/96e494c333be

Comment 14

[Joel Maher ( :jmaher ) (UTC -8)]

verified with 20091221 1.9.2 nightly build on my n900.