Let's make our dialogs look like this: http://www.flickr.com/photos/61892693@N03/6076211533/in/photostream specs: http://cl.ly/070X3g3q3E1W2r0k2D2S
Severity: normal → enhancement
OS: Mac OS X → Android
Priority: -- → P1
Hardware: x86 → ARM
Created attachment 557868 [details] [diff] [review] WIP 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
Created attachment 558493 [details] mockup for multi-button dialogs Wesley, here is a mockup of how to handle multiple buttons within dialog boxes. Note that they are basically text links with vertical dividers.
Created attachment 558967 [details] [diff] [review] WIP 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.
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.
Created attachment 558998 [details] [diff] [review] Patch v1.1 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/
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+
Status: NEW → RESOLVED
Last Resolved: 7 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.