Style new bookmark contextual dialog on OS X

VERIFIED FIXED in Firefox 3

Status

()

Firefox
Theme
P2
normal
VERIFIED FIXED
11 years ago
10 years ago

People

(Reporter: faaborg, Assigned: Kevin Gerich)

Tracking

({polish})

Trunk
Firefox 3
All
Mac OS X
polish
Points:
---
Dependency tree / graph
Bug Flags:
blocking-firefox3 +

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [has patch in bug 427555], URL)

Attachments

(3 attachments)

(Reporter)

Description

11 years ago
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.
Flags: blocking-firefox3?

Updated

11 years ago
Flags: blocking-firefox3? → blocking-firefox3+
Priority: -- → P3
Target Milestone: --- → Firefox 3 M11
(Reporter)

Comment 1

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


(Reporter)

Comment 2

11 years ago
perhaps I should add

faaborg: hud!
beltzner: !hud

:)

Comment 3

11 years ago
Yes, I also vote for hud.
me: iCal, context-bar works too. !hud

Comment 5

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

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

11 years ago
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 
(Reporter)

Comment 8

11 years ago
>@ 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

11 years ago
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.
Whiteboard: use context bar style
(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).
Target Milestone: Firefox 3 beta3 → Firefox 3 beta4

Updated

10 years ago
Depends on: 378217

Comment 12

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

 
Created attachment 300901 [details]
hud style on windows

here's what I could offer

Comment 14

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

Comment 16

10 years ago
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?
(Assignee)

Comment 19

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

Updated

10 years ago
Assignee: nobody → kevin
(Assignee)

Comment 20

10 years ago
Created attachment 301622 [details] [diff] [review]
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.
Attachment #301622 - Flags: review?(mconnor)
I strongly suspect that having Mano will have cycles to review this sooner than mconnor.
(Assignee)

Updated

10 years ago
Attachment #301622 - Flags: review?(mconnor) → review?(mano)
(Assignee)

Comment 22

10 years ago
Created attachment 301625 [details]
screenshot
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?
Attachment #301622 - Flags: review?(mano) → review-

Comment 27

10 years ago
(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 
(Reporter)

Comment 28

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

10 years ago
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 
Target Milestone: Firefox 3 beta4 → Firefox 3

Updated

10 years ago
Priority: P3 → P2
(Reporter)

Updated

10 years ago
Blocks: 425582
Discussed with beltzner, this isn't going to block Firefox 3.  If there are glaringly bad things they should be tracked individually.
(Reporter)

Updated

10 years ago
Assignee: kevin → nobody
Component: Places → Theme
QA Contact: places → theme
(Reporter)

Updated

10 years ago
Assignee: nobody → kevin
(Assignee)

Updated

10 years ago
Depends on: 427555

Updated

10 years ago
Whiteboard: use context bar style → [has patch in bug 427555]
(Assignee)

Comment 31

10 years ago
Styles checked in as part of bug 427555
Status: NEW → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → FIXED
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.
Status: RESOLVED → VERIFIED
Hardware: PC → All

Updated

10 years ago
No longer depends on: 378217
Depends on: 307204
You need to log in before you can comment on or make changes to this bug.