403158 - Style new bookmark contextual dialog on OS X

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P2)

Description

[Alex Faaborg [:faaborg] (Firefox UX)]

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.

Comment 1

[Alex Faaborg [:faaborg] (Firefox UX)]

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

Comment 2

[Alex Faaborg [:faaborg] (Firefox UX)]

perhaps I should add

faaborg: hud!
beltzner: !hud

:)

Comment 3

[Marcus Münch]

Yes, I also vote for hud.

Comment 4

[Asaf Romano (gone)]

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

Comment 5

[Aronnax]

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

Comment 6

[SpaceCat85]

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).

Comment 7

[Aronnax]

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 

Comment 8

[Alex Faaborg [:faaborg] (Firefox UX)]

>@ 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.

Comment 9

[Aronnax]

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 

Comment 10

[Mike Beltzner [:beltzner, not reading bugmail]]

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

Comment 11

[Dão Gottwald [:dao]]

(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).

Comment 12

[Aronnax]

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 

 

Comment 13

[Dão Gottwald [:dao]]

Attachment: hud style on windows

here's what I could offer

Comment 14

[Aronnax]

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

Cheers 

Comment 15

[Dão Gottwald [:dao]]

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

Comment 16

[Aronnax]

your code therefore would be a nice 

Cheers 

Comment 17

[Dão Gottwald [:dao]]

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;
}

Comment 18

[Shawn Wilsher :sdwilsh]

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

Comment 19

[Kevin Gerich]

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

Comment 20

[Kevin Gerich]

Attachment: Patch to make contextual dialogs look presentable

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.

Comment 21

[Shawn Wilsher :sdwilsh]

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

Comment 22

[Kevin Gerich]

Attachment: screenshot

Comment 23

[Asaf Romano (gone)]

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

Comment 24

[Shawn Wilsher :sdwilsh]

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?

Comment 25

[Asaf Romano (gone)]

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 26

[Asaf Romano (gone)]

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?

Comment 27

[Aronnax]

(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 

Comment 28

[Alex Faaborg [:faaborg] (Firefox UX)]

>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?

Comment 29

[Aronnax]

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 

Comment 30

[Mike Connor [:mconnor]]

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

Comment 31

[Kevin Gerich]

Styles checked in as part of bug 427555

Comment 32

[Henrik Skupin [:whimboo][⌚️UTC+1]]

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.