403157 - [meta] Style new bookmark contextual dialog on XP for Firefox 3

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P3)

Description

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

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

Comment 1

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

Here is a mockup of options, I'm personally not sure which one we should go with:

http://people.mozilla.com/~faaborg/files/granParadisoUI/contextualDialogStyleXP_i1.png

Comment 2

[Dão Gottwald [:dao]]

I vote for traditional notification, alpha, no shadow.

Does Mano know how to implement the tip while using the system color?

Comment 3

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

I forgot to update the mockup to include the square overlay tab like appearance. Until I get a chance to post a new one, use this as a reference for the shape:

http://people.mozilla.com/~faaborg/files/granParadisoUI/places_NewBookmarkDialog_i9.png 

Comment 4

[Al Billings [:abillings - ex-MoCo]]

Beta 3 locks down in a week. Is this going to make it in?

Comment 5

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

I don't know, beltzer is going to get this assigned to someone but I'm not sure who. Neil has a functional mockup of the style that he produced months ago, so that will likely help a lot with getting this done in time.

Comment 6

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

Here is the style spec: http://people.mozilla.com/~faaborg/files/granParadisoUI/contextualDialogSpec_i1.png

Comment 7

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

Attachment: Large star, starred

This just a temporary icon until we get one professional made.

Comment 8

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

Attachment: Large star, unstarred

This is just a temporary icon until we get one professionally made.

Comment 9

[Dão Gottwald [:dao]]

(In reply to comment #6)
> Here is the style spec:
> http://people.mozilla.com/~faaborg/files/granParadisoUI/contextualDialogSpec_i1.png

'menu' is a system color, rgb(0,51,153) isn't. Let's try to not repeat bug 409974.

Comment 10

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

Is there a little xul app that displays ever system color that can be extracted?

I recognize that bug 409974 is a problem, but I also think it's a little silly that people who install a new OS theme can't also install a different Firefox theme.  Removing our ability to use platform colors that can't be extracted really ties our hands for using anything that isn't beige or some kind of 3D shadow.

Looking at the problem at a higher level, the user is either using a default OS theme, or they aren't.  Can we just query some of the system colors to see what we get back, and if we get something unexpected switch to system colors instead of hard coded colors?

Comment 11

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

Attachment: Progressive Collapse (luna style)

This is just a temporary icon until we can get one professionally made.

Comment 12

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

Attachment: Progressive expand (luna style)

This is just a temporary icon until we can get one professionally made.

Comment 13

[Asaf Romano (gone)]

I'm not doing the styling work for windows at the moment.

Comment 14

[Dão Gottwald [:dao]]

Attachment: mockup

Comment 15

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

Comment on attachment 302398 [details]
mockup

Overall not sure, it looks good, but I also think the solid menu background on XP feels simpler.  Switching review to beltzner.

Comment 16

[Wesley Johnston (:wesj)]

Attachment: A couple different stylings

Here's a few of the different proposed stylings mocked up for real in Firefox. I used a little SVG in XUL to do these because I like SVG (hence the not-quite perfect border matching), so the fix probably isn't usable in the real world, but I figured they might be helpful in picking a final style.

Comment 17

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

Comment on attachment 302398 [details]
mockup

I agree with alex; the solid colour is a lot simpler looking.

Comment 18

[Dão Gottwald [:dao]]

The motivation behind the vertical separation was to separate the Remove button from the form, which is a non-standard and confusing design right now.

Comment 19

[Dão Gottwald [:dao]]

(In reply to comment #18)
> The motivation behind the vertical separation was to separate the Remove button
> from the form, which is a non-standard and confusing design right now.

bug 415780. I think Remove on top is fine, but needs something towards attachment 302398 [details].

Comment 20

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

Wesley: are you interested in taking this bug?  It looks like you have made some progress and since this is blocking‑firefox3+ we could really use your help :)

Comment 21

[Ryan A. C.]

from attachment 304243 [details]
looks nice, and has the added bonus of being very neutral to windows, so it would be fitting for use in Vista as well. The first and second could use native colors allowing for high contrast themes, etc.

Comment 22

[Mike Connor [:mconnor]]

Need to make a call here.

Comment 23

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

Here are the sub bugs in priority of what I think we need, and where I would draw the line at blocking:

Should still do:
bug 413060:  Bookmark Contextual Dialog: no 3D border
bug 413067:  Bookmark Contextual Dialog: Rounded corners
bug 413065:  Bookmark Contextual Dialog: 16px buttons (only if this gets overridden with large fonts)
bug 413053:  Bookmark Contextual Dialog: Align treeview and listview

Can get away with not doing:
bug 413056:  Bookmark Contextual Dialog: Use images for progressive disclosure controls
bug 413059:  Bookmark Contextual Dialog: Tab like appearance
bug 413062:  Bookmark Contextual Dialog: Fade out

Comment 24

[Ryan A. C.]

Attachment: no 3d border, rounded corners, padding, coloring

Sorry, I know Bug 413060 is for the 3d border change, and Bug 413067 is for the rounded corners, but it seemed easier to do it all as 1 big change.
This uses ThreeDShadow as the border color, because it's a minor detail that IMO is not worth hard coding. Also of note, due to the loss of drop shadow when you set -moz-border-radius on a panel, the lighter border actually looks really odd.
Also changes padding and coloring per spec in Comment #6.

Comment 25

[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 26

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

This will be fixed by bug 413060.

Comment 27

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

This was a tracking bug for Firefox 3 development, resolving.