The dialog created when clicking the star icon in the location bar needs to be styled for OS X. I will follow up with a mockup.

Here is the mockup: http://people.mozilla.com/~faaborg/files/granParadisoUI/osxContextualDialogStyle_i1.png As a note, here are the current favorites of the apple themers and apple fans at mozilla: kevin gerich: iCal stephen horlander: hud (also thinks iCal is ok) cbarrett: hud ss: context bar, dialog box sean: context bar

perhaps I should add faaborg: hud! beltzner: !hud :)

Yes, I also vote for hud.

me: iCal, context-bar works too. !hud

Hi, i include the Dialog Box style in my theme (Gran Paradiso Outlook) 0.9.1 and it looks: http://www.takebacktheweb.org/themes/stuff/GrApple_GPO_9_1.png .............................. by the way, many surprising hud votes when some wants to simulate it: try in the userChrome.css #identity-popup-container { background-color: #3D3D3D !important; } #editBookmarkPanelContent, #editBookmarkPanel > hbox { background-color: #3D3D3D !important; } ---- i think it does`t work for the bookmark contextual dialog, but maybe can it be used only for the identity popup. Cheers

1st choice vote: HUD; 2nd choice vote: Data Detector. I have trouble reading small text onscreen, so Unified, Vertical Pinstripe, and Context Bar are a bit too low-contrast for my eyes to take (the worst in this respect being Unified).

Hi, some better stuff to try the hud style in the identity-popup: for the userChrome.css #identity-popup-container { background-color: #3D3D3D !important; -moz-border-radius: 8px !important; } .verifiedIdentity > #identity-popup-title { color: white !important; } .unknownIdentity > #identity-popup-title { color: white !important; } .verifiedDomain > #identity-popup-title { color: white !important; } #identity-popup-content-box > description, #identity-popup-encryption-label { color: white !important; } --- @ Alex is it really necessary to have the same style for the bookmark UI and the identity popup? i can`t see a good reason for it identity popup = hud bookmark UI = Dialog Box looks or me currently like the best solution, the best for the usability and as well as the most beautiful solution Cheers

>@ Alex >is it really necessary to have the same style for the bookmark UI and the >identity popup? >i can`t see a good reason for it It's not totally necessary, but they have very similar interaction behaviors, like the ability to dismiss by clicking outside of the panel. If we style them the same, then users who are familiar with interacting with one contextual dialog will recognize that they can interact the same way with another, making the inference based on the visual style. Just to chime in with another reason why I personally think we should go with the hud display, the dialog is instant apply, as are most hud dialogs.

Hi, about an equal look: would be nice, but the same style (the huh for example) makes not much sense as well for the location bar and RSS menu it is not really meaningful and we can use better for every "contextual" the best solution because of the different functions and elements behind every contextual .. and other reasons. other reasons for example: a hug window in particular is normally movable and has for every element a special style - as far as i see can we change everything but not the scroll-bars a bookmark UI with the hug look would have then one "wrong" behavior and one bigger style problem (compared for example with a similar solution which Shiira has and the user would expect) and this is then simply not good enough the hug look for the identity popup is more or less the same which is used for the Leopard Dock - there is no problem to expect and has a similar OS X counterpart (only when Bug 391984 will be fixed naturally) it will looks then "cool", has a familiar behavior and style and .. it can be build perfect .. the same arguments for the bookmark UI with Dialog .. for the RSS menu with a Menu style .. the location bar with Menu. Cheers

I think Alex and I have decided on the Context Bar style, despite both agreeing that the HUD style looks wicked-cool.

(In reply to bug 307204 comment 106) > Hi, > i was asked for help to design the contextual dialog - for the new Mac default > theme > > It is Bug 403158 - Style new bookmark contextual dialog on OS X > > To explored the possibilities have i tried some variations, but unfortunately > have i not found what i need. > > Please take a look on: > http://www.takebacktheweb.org/themes/stuff/contextual_dialog.png > > 1. is the intended design > 2. a try with this code in the userchrome.css > > #identity-popup-container { > background-color: #CDCDCD !important; > -moz-border-radius-bottomleft: 8px !important; > -moz-border-radius-bottomright: 8px !important; > -moz-border-radius-topright: 8px !important; > -moz-appearance: none !important; > } > > 3. a try with this code: > > #identity-popup { > background-image: url("test.png") !important; > -moz-border-radius-bottomleft: 8px !important; > -moz-border-radius-bottomright: 8px !important; > -moz-border-radius-topright: 8px !important; > -moz-appearance: none !important; > } > > #identity-popup-container { > background: transparent !important; > } > > ------ > > With number 2. are the white borders a problem and with number 3. the missing > shadow, but maybe has one of the experts more ideas? > > (likely is it related with Bug 391984 – [10.5] Add roundness to context > menus) > > Cheers > Both the shadow and the rectangular border are part of the appearance. You can either use the appearance or not use it, there's nothing in between. The shadow could be implemented manually using PNG graphics, which will require extra markup without support for CSS border images. That's not worth it; given that the HUD style "looks wicked-cool", we should use that instead. By the way, in case you're using |background-image: url("test.png")| for the translucency, you should rather use something like rgba(0,0,0,.7).

Thanks for the answer "there's nothing in between" sadly "given that the HUD style "looks wicked-cool", we should use that instead." when you want another argument for it ;-) it would works perfect - a quick and dirty test: http://www.takebacktheweb.org/themes/stuff/contextual-dialog-HUD.png (together with the Dock HUD, which has as well no shadow) it use the Linux Larry image, one other for the background (it doesn't work without an image) and one lock image - everything else is code it is in different categories the most elegant - not only "looks wicked-cool" ;-) Cheers

here's what I could offer

nice - it is not a screenshot, or? when however would it be interesting how you build the triangle on the top Cheers

It's actually a screenshot; the triangle is a PNG image.

your code therefore would be a nice Cheers

userChrome.css: #identity-popup { border: none !important; background: transparent !important; padding-top: 10px !important; } #identity-popup-container { background: rgba(0, 0, 0, 0.85) url(file:///C:/mozilla/hud-fade.png) repeat-x bottom left !important; -moz-border-radius: 5px; -moz-padding-start: 4px !important; } #identity-popup-icon { margin-top: -20px; padding-top: 20px !important; height: 84px !important; -moz-padding-start: 6px !important; width: 70px !important; background-image: url(file:///C:/mozilla/hud-tip.png); background-repeat: no-repeat; } #identity-popup * { color: white !important; }

Is this being covered by the mac theme folks, or should I pick this up?

I'm taking a crack at the context bar style or Mac. I'll have something to show soon.

Here's a patch to style the menus. I'm about to upload a new version of Proto too so you can take it for a test drive.

I strongly suspect that having Mano will have cycles to review this sooner than mconnor.

Kevin, any chance the Done button can retain its default-button look?

I agree that the widgets would look "right" if they maintained their native appearance as opposed to styling them differently. We don't do that anywhere else in the UI (as far as I know), so why start here?

And yeah, didn't you also loose the focus rings here? (And, where's the bug about no focus feedback on the tab strip in proto?)

Comment on attachment 301622 [details] [diff] [review] Patch to make contextual dialogs look presentable I would like to see bug 415957 addressed first. Having the tab order completely invisible in a dialog like this hurts. BTW, It seems like proto has no treerow-selected-but-not-focused state appearance :( What's the bug # for that?

(In reply to comment #22) > Created an attachment (id=301625) [details] > screenshot > Very nice so far, but i think it goes although in a wrong direction. And the main reason is: it is grey, very grey The theme is already very grey - the right color in the right elements can`t be wrong and are more or less a must have, when it should not looks boring grey ;-) for example in the star menu: http://www.takebacktheweb.org/themes/stuff/GrApple_GPO_9_7.png and the identity-popup http://www.takebacktheweb.org/themes/stuff/GrApple_GPO_9_5.png @ Alex about the Context Bar style i think it does not work - it works not with Kevin new stuff and i tried it with colorful elements and other variations it looks always to grey to dark and ... boring Cheers

>the widgets would look "right" if they maintained their native >appearance as opposed to styling them differently. We don't do that anywhere >else in the UI (as far as I know), so why start here? The Apple human interface guidelines (not that we always have to follow those) indicate that you aren't supposed to use the normal Aqua style widgets (glassy blue buttons) in chrome, but they are of course totally acceptable in content. I agree with them that Aqua buttons look out of place in chrome, which is why we are now using the correct style in places like the find bar, the advanced search in the library window, and hopefully soon in notification bars. To see this button style in OS X, enter search in the Finder, or look at the notification style bar in the trash can on Leopard. >it is grey, very grey yeah, I'm personally still a big fan of the HUD style which we can see in aronnax's identity contextual dialog. There seemed to be general consensus on the context bar style though, and beltzner ended up deciding on it over HUD. Either way, we are going to need a new star icon for OS X, perhaps go with a star in spotlight-blue?

Hi, independent from background style would help this Bug 415443 – Implement attribute to control window shadow from XUL formidable to improve the design (only mentioned to bring more attention to this possibility) Cheers

Discussed with beltzner, this isn't going to block Firefox 3. If there are glaringly bad things they should be tracked individually.

Styles checked in as part of bug 427555

Seems that there were no regressions since the patch was checked-in. Everything looks fine with Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9pre) Gecko/2008041104 Minefield/3.0pre ID:2008041104 Marking as Verified. If there are still issues please file them as separate bugs.