339526 - [rfe] import wizard needs some branding

Status: RESOLVED FIXED

(Firefox :: General, enhancement)

Description

[(not reading, please use [e-mail] instead)]

[rfe] import wizard needs some branding

when I first run firefox (or thunderbird) I get the import wizard.  and while there is some branding (at least on windows xp, if you look at the task bar), the import wizard itsself has no branding to indicate that this dialog is from firefox (or tbird).

perhaps we could add a firefox logo (tbird logo) to this first wizard page or to the top area ("Import Settings And Data From") or to the title of the window?

I'll attach a screen shot.

also, maybe "Import Settings And Data From" should be ""Import Settings And Data"?  I can spin that out to another bug if anyone else agrees the wording is odd.

Comment 1

[(not reading, please use [e-mail] instead)]

Attachment: screen shot of ff 1.5 import wizard window, the first UI I see when running on a new machine

Comment 2

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

The window should at least have the Firefox application icon in the upper-left corner. Better still would be a nice icon like:

 .-------.
 | .-------.
 | | .-------.
 | | |       |        |\    
 | | | ~~~~~ |  ------  \     
 | | | ~~~~~ |           >  [ firefox logo]
 '-| | ~~~~~ |  ------  /
   '-| ~~~~~ |        |/ 
     '-------'

In the wizard pane's title area.

And yes, that title is awkward. This panel should be titled: "Import From" or "Select a Source to Import From".

Comment 3

[(not reading, please use [e-mail] instead)]

I'll spin out a new bug about the wording, since mike b. agree's it could use some improvement.

do you think the branding is worth improving for 2.0?  since it is the first thing users see, I think it is worth considering.

Comment 4

[(not reading, please use [e-mail] instead)]

I spun the wording out to #340052, and I'll let this bug cover the branding issue so this this bug just covers the icon change.

I like the ascii art that beltzner drew up, and the other apps could replace the ff logo with the appropriate logo (seamonkey, tbird, sunbird, assuming they have import.)

beltzner, who do I ping about creating an official icon?

Comment 5

[(not reading, please use [e-mail] instead)]

> beltzner, who do I ping about creating an official icon?

mike tells me that steven ([e-mail]) is the person to ask for icons.

steven, please see comment #2 of this bug, where mike uses ascii art to show what he's got in mind.

Comment 6

[Steven Garrity [:sgarrity]]

Attachment: Screenshot of Firefox installer wizard

Why don't we just take a screenshot of Mike's ASCII art and use that?  :-)

A few thoughts: 
* Any kind of document icons are pretty platform-specific (OS X doc icons, Win XP doc icons, etc.). I could produce platform specific images for this, but maybe we should avoid that?
* What if followed the style/format of the installer? See the attached screenshot (note the first page with large image on the left and second page with small logo in the top right).

Comment 7

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

Sure, that works for me, Steven. The importer is the only wizard we have, so it's not like we need to differentiate. (back in Eclipse-world, we have wizards for pretty much everything, with icons to match ... that's probably what influenced my previous over-thinking) We can always iterate after we've got this first low-bar, if we feel it's not enough.

Comment 8

[Steven Garrity [:sgarrity]]

Seth, are you ok to just steal the graphics from the installer, or do you need help with that?

Comment 9

[(not reading, please use [e-mail] instead)]

steve, I can use http://lxr.mozilla.org/mozilla1.8/source/browser/installer/windows/wizHeader.bmp in the wizard, but that's a .bmp so I'll convert it to a more prefered format before I add it to the theme (or search for it already.)

I plan on making it look like the "Setup Type" dialog in https://bugzilla.mozilla.org/attachment.cgi?id=224449&action=view, with the branded icon on the right.

Comment 10

[(not reading, please use [e-mail] instead)]

Attachment: screen shot of the branding

Comment 11

[(not reading, please use [e-mail] instead)]

Attachment: diff, notice this is windows only

Comment 12

[(not reading, please use [e-mail] instead)]

you'll see that I'm using chrome://branding/content/wizHead.png for my image url, and that image is http://lxr.mozilla.org/mozilla1.8/source/browser/installer/windows/wizHeader.bmp (converted to png)

for pinstripe, I think I'll need a transparent png to make it look right, but I'll still screen shot to see how it looks with my wizHead.png

Comment 13

[(not reading, please use [e-mail] instead)]

note that for linux, we don't have import (but we do have the wizard in toolkit)

Comment 14

[(not reading, please use [e-mail] instead)]

but, there is a bookmarks import wizard on all platforms, so I'll include the patch for gnomestripe, too.

Comment 15

[(not reading, please use [e-mail] instead)]

Comment on attachment 224607 [details] [diff] [review]
diff, notice this is windows only

seeing r= from ben on the windows patch, then I'll work on mac and unix.

Comment 16

[(not reading, please use [e-mail] instead)]

Attachment: new screen shot of windows

Comment 17

[(not reading, please use [e-mail] instead)]

Attachment: switching to use an existing image (chrome://branding/content/icon64.png)

Comment 18

[(not reading, please use [e-mail] instead)]

with a branded build, you'd see this icon:

http://lxr.mozilla.org/mozilla1.8/source/other-licenses/branding/firefox/content/icon64.png

note, for the pinstripe theme this icon64.png file is also used here:

http://lxr.mozilla.org/seamonkey/source/toolkit/themes/pinstripe/global/global.css#141

Comment 19

[(not reading, please use [e-mail] instead)]

Attachment: patch for the mac

Comment 20

[(not reading, please use [e-mail] instead)]

Attachment: 1.5 bookmarks import mac (for comparison)

Comment 21

[(not reading, please use [e-mail] instead)]

Attachment: branded bookmarks import

Comment 22

[(not reading, please use [e-mail] instead)]

Attachment: 1.5 browser import mac (for comparison)

Comment 23

[(not reading, please use [e-mail] instead)]

Attachment: branded browser import

Comment 24

[(not reading, please use [e-mail] instead)]

Comment on attachment 224607 [details] [diff] [review]
diff, notice this is windows only

obsolete, the correct patch for windows is only a change to toolkit/themes/winstripe/global/wizard.css

Comment 25

[(not reading, please use [e-mail] instead)]

Attachment: patch for the mac (forgot a space)

Comment 26

[(not reading, please use [e-mail] instead)]

Attachment: branded bookmarks import (windows)

Comment 27

[u88484]

Seth, why use this chrome://branding/content/icon64.png globe? To me it is ugly and doesn't fit in with any other Mozilla globes. At least use the Bon Echo styled globe.

Comment 28

[(not reading, please use [e-mail] instead)]

> Seth, why use this chrome://branding/content/icon64.png globe? To me it is ugly
> and doesn't fit in with any other Mozilla globes. At least use the Bon Echo
> styled globe.

kurt, I agree, that globe isn't as nice as the bon echo / minefield styled globe.

you'll see that same globe in pinstripe in firefox and the qute theme in thunderbird:

/toolkit/themes/pinstripe/global/global.css, line 141 -- list-style-image:
/mail/themes/qute/mail/newmailalert.css, line 54 -- list-style-image: url("chrome://branding/content/icon64.png");

for official firefox builds the icon is nicer, see http://lxr.mozilla.org/seamonkey/source/other-licenses/branding/firefox/content/icon64.png

so I think the follow up bug to address your concern is:  we need a better styled icon to replace mozilla/browser/base/branding/icon64.png

Comment 29

[(not reading, please use [e-mail] instead)]

Attachment: patch for gnomestripe, note I am adding wizard.css (same as winstripe, based on classic's wizard.css)

Comment 30

[(not reading, please use [e-mail] instead)]

Attachment: linux screen shot bookmarks import (gnomestripe)

Comment 31

[(not reading, please use [e-mail] instead)]

Attachment: linux screen shot 2 (gnomestripe)

Comment 32

[(not reading, please use [e-mail] instead)]

Attachment: complete patch for gnomestripe

Comment 33

[(not reading, please use [e-mail] instead)]

> Seth, are you ok to just steal the graphics from the installer, or do you need
> help with that?

I agree with kurt (in his comment #27) that the simple globe should be replaced with the stylized one, if possible.

Steven, can you help me out by create replacements for mozilla/browser/base/branding/icon64.png for both bon echo and minefield?  

(the official firefox branded version already looks good for chrome://branding/content/icon64.png)

Comment 34

[Steven Garrity [:sgarrity]]

Attachment: 64px PNG icon for Bon Echo

Comment 35

[Steven Garrity [:sgarrity]]

Attachment: 64px PNG icon for Minefield

Here are the icon64.png variations for Minefield and Bon Echo. Let me know if there's any trouble.

Where did that other (unbranded) icon64.png come from anyhow?

Comment 36

[(not reading, please use [e-mail] instead)]

Attachment: screen shot with new icon (thanks steven!)

Comment 37

[(not reading, please use [e-mail] instead)]

Attachment: bonecho screen shot with new icon (thanks steven!)

Comment 38

[(not reading, please use [e-mail] instead)]

> Where did that other (unbranded) icon64.png come from anyhow?

not sure.  I can see from bug #282057 that moved theme into the current location in the tree, but I'm not sure who did the original art.

thanks for the new images!

I've checked in on branch and trunk (r/a=ben, which I forgot to include in my checkin comment, ugh!)

Comment 39

[(not reading, please use [e-mail] instead)]

oops, the gnomestrip wizard.css is the same as the winstripe.css, so it should not be necessary.

i'll confirm that and back out the gnomestrip changes on my linux box (actually, vlad's linux box) and from trunk and branch.

Comment 40

[(not reading, please use [e-mail] instead)]

Attachment: minefield screen shot with new icon (thanks steven!)

Comment 41

[(not reading, please use [e-mail] instead)]

> i'll confirm that and back out the gnomestrip changes on my linux box
> (actually, vlad's linux box) and from trunk and branch.

I confirmed that the wizard.css file is not needed for gnomestripe, since the one in winstripe is the same, so I've backed that part of this change out of trunk and branch.

thanks to ben for pointing this out.

Comment 42

[Nick Thomas [:nthomas] (UTC+12)]

Attachment: Screenshot of software update from branch 20060609 -> 10

Was this change intended for the other users of the wizard too ? I see it on the software update dialog and the extension compatibility check (that appears on startup).

I'm not saying that the change is a bad one, just that the icon may use space intended for other UI and this should be systematically checked. Also, I reckon the text would look better if it wasn't jammed up in the top left corner of the header and immediately below an identical window title (on Windows at least).

Comment 43

[(not reading, please use [e-mail] instead)]

> Was this change intended for the other users of the wizard too ?

nick, you raise a good point.  ben just raised a similar concern over the look of the "Incompatible Components" wizard that he sees when launching minefield.

here's what ben suggested:

use a smaller icon (32x32 instead of 64x64) unless there is a "byline"), and if so, use a 16x16 icon.

I'll spin up a new bug for this.

Comment 44

[Robert Accettura [:raccettura]]

This is also appearing in the reporter tool.

Comment 45

[:Gavin Sharp [email: [e-mail]]]

(In reply to comment #44)
> This is also appearing in the reporter tool.

See bug 341697.

Comment 46

[Robert Accettura [:raccettura]]

Thanks Gavin.