Make fennecomb dialogs pretty



7 years ago
7 years ago


(Reporter: ibarlow, Assigned: wesj)


(Blocks: 1 bug)

Firefox 8
Firefox 9


(Whiteboard: [inbound])


(2 attachments, 2 obsolete attachments)

Blocks: 655762
Severity: normal → enhancement
OS: Mac OS X → Android
Priority: -- → P1
Hardware: x86 → ARM

Comment 1

7 years ago
Created attachment 557868 [details] [diff] [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

Comment 2

7 years ago
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.

Comment 3

7 years ago
Created attachment 558967 [details] [diff] [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)

Comment 4

7 years ago
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.

Comment 5

7 years ago
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:
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+
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
You need to log in before you can comment on or make changes to this bug.