514208 - Create a theme for the nsPromptService dialogs

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

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

Current theme for dialogs introduced in bug 489423 use a dark panel style.

Comment 1

[Stuart Parmenter]

what dialogs does this primarily effect?

Comment 2

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

Any window.alert, window.prompt and window.confirm (from web content) - as well as several dialogs displayed by platform code (confirm add-on install and auth prompt for example)

Comment 3

[Madhava Enros [:madhava]]

Attachment: style revisions, for readability

Just using more spacing between the semantic blocks makes the dialogs more understandable/scannable.  I've dropped the font size for some of the sections to make the space (18point is the smallest).

Comment 4

[Madhava Enros [:madhava]]

Oh, I also made the upper corners rounded (they were squared before because the original designs had these hanging off of the titlebar) and moved the toggle from the left to the right -- this makes those buttons seem less primary on the dialog, which is appropriate (it's a secondary decision).

Comment 5

[Fabrice Desré]

Attachment: fix

- made all corners rounded
- added a "prompt-message" class, with smaller text and top/bottom margins
- switched the positions of the message and yes/no radio control

Comment 6

[Fabrice Desré]

Attachment: screenshot

Comment 7

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

Comment on attachment 405475 [details] [diff] [review]
fix

This patch is pretty good and is almost ready to land. Just needs a few tweaks:
* Padding is off for some dialogs:
  * Some of the dialogs have the main message and the checkbox message together (like alert.xul) and this creates a "double-width" padding between them.
  * Some have a hidden checkbox message so the control and buttons have no padding between them (select.xul and promptPassword.xul)

Because of this, I think we need to remove the padding from the "prompt-message" class. Instead, let's make rules for the main message (dialog > scrollbox.prompt-message), the checkbox message (dialog > hbox.prompt-message) and the buttons hbox (dialog > hbox.prompt-buttons)

The main message will have top & bottom margins and the checkbox and buttons will only have a top margin. That will allow the show/hide of the checkbox message to not break padding.

Make sense?

Next, let's cleanup the font-size a little. Remove the font-size: 100%; from dialog selector in chrome/content/browser.css and add font-size rules to platform.css:

dialog {
  font-size: 2.4mm !important; //( 9pt for wince)
}

dialog .prompt-message {
  font-size: 1.8mm !important; //(8pt for wince)
}

Let's see what we have with these changes

Comment 8

[Fabrice Desré]

Attachment: updated patch

Implemented changes from comment #7. This looks good to me !

Comment 9

[Fabrice Desré]

Attachment: prompt screenshot

Comment 10

[Fabrice Desré]

Attachment: unresponsive script dialog

Comment 11

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

Comment on attachment 405988 [details] [diff] [review]
updated patch

Yes, this is better. I'll fix the wince font-size when checking in. You left the "mm" sizes in there.

Comment 12

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

pushed:
https://hg.mozilla.org/mobile-browser/rev/331a2cea3888

Comment 13

[Aakash Desai [:aakashd]]

verified FIXED On builds: 

Mozilla/5.0 (Windows; U; WindowsCE 5.2; en-US; rv:1.9.2b1pre) Gecko/20091013 Fennec/1.0a4pre

and

Mozilla/5.0 (X11; U; Linux armv7l; en-US; rv:1.9.2b1pre) Gecko/20091013
Fennec/1.0b5pre

and

Mozilla/5.0 (X11; U; Linux armv6l; en-US; rv:1.9.3a1pre) Gecko/20091013
Fennec/1.0b5pre

Comment 14

[Aakash Desai [:aakashd]]

crap, this is not resolved just yet. The changes will be affected in the nightly build on 10/14

Comment 15

[Aakash Desai [:aakashd]]

verified FIXED on builds with one caveat:

Mozilla/5.0 (X11; U; Linux armv7l; en-US; rv:1.9.2b1pre) Gecko/20091014
Fennec/1.0b5pre