Closed Bug 681643 Opened 13 years ago Closed 13 years ago

Make fennecomb dialogs pretty

Categories

(Firefox for Android Graveyard :: General, enhancement, P1)

Firefox 8
ARM
Android
enhancement

Tracking

(Not tracked)

VERIFIED FIXED
Firefox 9

People

(Reporter: ibarlow, Assigned: wesj)

References

Details

(Whiteboard: [inbound])

Attachments

(2 files, 2 obsolete files)

Severity: normal → enhancement
OS: Mac OS X → Android
Priority: -- → P1
Hardware: x86 → ARM
Attached patch WIP (obsolete) — Splinter Review
I have a WIP for this. I got a little upset that we're using different classes to style select and context menu popups, and I'm going to fix it. Ian, do you have mockups for how we want dialogs with buttons at the bottom to look (i.e. alerts or confirm prompts)? One or two of ours ("This will close 3 tabs!" comes to mind) have three buttons at the bottom.

We also sometimes show textboxes or menulists in these as well, although those shouldn't require much special theming. And then we have a few extra special dialogs like the bookmarks and sync ones, but again, I think I can get them generally themed using this mockup. If you have some special ideas for them, probably better for follow up bugs.
Assignee: nobody → wjohnston
Wesley, here is a mockup of how to handle multiple buttons within dialog boxes. Note that they are basically text links with vertical dividers.
Attached patch WIP (obsolete) — Splinter Review
This works and looks pretty good IMO.

I had to put in special css to make context menus look nice though, and some more special css for menulists and selects and the sync dialog and the bookmarks-editor dialog. It drives me nuts that I have to do this. Would be happy to fix it here, but it will take a few days and I don't want to hold up stuff on it either.
Attachment #557868 - Attachment is obsolete: true
Attachment #558967 - Flags: review?(mark.finkle)
Also, should note that I'm doing some weird stuff here to get the button selection to match the mockups. i.e. the button takes up the full width of the bottom. It has a padding, and then I am flexing the label inside the button and applying borders to it. But the selected button highlight should be inside those borders, so I played with negative margins to make that work.

On alert/confirm/prompt/etc dialogs it looks pretty good. On context menus/selects/etc. I've tried to do something similar. Its not quite perfect yet, but I'd like to leave it to follow up.
Attached patch Patch v1.1Splinter Review
Found a little problem with context-dialog widths and a bug in our confirmCheck implementation. Screenies are at:

http://people.mozilla.com/~wjohnston/screenshots/honeycomb-dialogs/
Attachment #558967 - Attachment is obsolete: true
Attachment #558967 - Flags: review?(mark.finkle)
Attachment #558998 - Flags: review?(mark.finkle)
Just looked over the images. The "Confirm.png", "Prompt.png" and "PromptPassword.png" examples show the blue line and the body text too close together. The other dialogs seem to have more space between the line and the text.

Starting the code review too....
Comment on attachment 558998 [details] [diff] [review]
Patch v1.1

Looks good, but we should be ready to tweak small issues like the spacing issues I mention above. Typically, we put the "id" attribute before the "class" attribute, when both are present.
Attachment #558998 - Flags: review?(mark.finkle) → review+
https://hg.mozilla.org/mozilla-central/rev/69fdc6af563d
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 9
Verified fixed on:
Mozilla/5.0 (Android;Linux armv7l;rv:9.0a1)Gecko/20110922
Firefox/9.0a1 Fennec/9.0a1
Device: Acer ICONIA A500
OS: Android 3.1
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: