104502 - Security related Icons for Mail

Status: VERIFIED FIXED

(MailNews Core :: Security, defect)

Description

[jglick]

Bug to track security related icons that will be needed. What I know of 
currently:

Lock - encryption
Signed - digital signature
Certificate - status of certificate for recipients

A. Lock Icon (several versions will be needed)
   1.Unlocked, Status Bar (13 px high max) 
   2.Locked, Status Bar (13 px high max)
   3.Unlocked, clicked, Status Bar (13 px high max) 
   4.Locked, clicked, Status Bar (13 px high max) 
   5.Locked, on the Mail Compose "Send" button 
   6.Unlocked, on the Mail Compose "Send" button 
   7.Unlocked, disabled, on the Mail Compose "Send" button
   8.Reading a message, envelope area, Locked icon (32x32 px max) 
      
B.Signed Icon 
   1.Statusbar (13 px high max) 
   2.Statusbar clicked (13 px high max)
   3.Reading a message, envelope area (32x32 max) 
   3.On Mail Compose "Send" button 

C. Certificate Icon 
   1.Addressing area, intact certificate (you have valid cert for recipient)
   2.Addressing area, torn certificate (you have cert for recip but its expired, 
     etc.)
   3.Addressing area, missing certificate (certificate with red "x" or "?")

Comment 1

[jglick]

Marlon, Gail has already done some great preliminary ideas for this. Will 
post shortly. Since you are the owner of Modern, we'll need to make sure you are 
ok with the icons. Will we need classic versions as well?

Comment 2

[jglick]

We can break this into smaller bugs if nec, I just wanted a global place to 
track the needed work.

Comment 3

[marlon bishop]

nah a tracking bug is fine for me.  Gail is welcome to own any classic issues related to this bug, if of course that is what she desires.  I do 
have some Modern security icons already designed which aren't yet being used. we'll see what i have, and try to match what you and Gail 
need.

Comment 4

[Bob Lord]

I'd like to add these items to the list:
A9: Reading a message, *broken*, envelope area, Locked icon (32x32 px max).  
    We will show this icon when there is something wrong with the 
    decryption 
B5: Reading a message, *broken*, envelope area (32x32 max). We will show 
    this icon when there is something wrong with the signature.



Let me propose this timeline for these icons.  The ordering represents the
prioritization.

Mail Compose: Friday, 11/9
Taskbar items: A1, A2
Send button additions: A5, A6, A7
Certificates: C1, C2

Reading Mail: Friday 11/16
A8, A9, B3, B5


This can be confusing stuff.  We're at your disposal to talk about ideas and to
review draft designs.  

Comment 5

[jglick]

*** Bug 110874 has been marked as a duplicate of this bug. ***

Comment 6

[Scott MacGregor]

I'd like to suggest a different time line. The message display code is ready to
go once we have icons. We still haven't finalized on the UI design for the
compose window (at least I don't think we have, but I could be wrong).

So I'd like to get my hands on the following before the compose window stuff....
A8, A9, B3, B5

Comment 7

[marlon bishop]

Thanks for being patient on this one.  I've enlisted Shuehan Liang to assist me with some of this, cc'ing.

Comment 8

[scottputterman]

*** Bug 121500 has been marked as a duplicate of this bug. ***

Comment 9

[scottputterman]

Adding the url for the spec.

Since this bug was filed, the spec has been updated to include a Security button
in the compose window with different states.  

Comment 10

[Lori Kaplan]

Shuehan is working on the icons. Reassigned bug to her. Should be done by Feb 15. 

Comment 11

[shliang]

reassigning back to marlon

Comment 12

[Stephane Saux]

Marking nsbeta1+ we need the icon for the beta UI freeze which is 3/29.

Can we get an update on this?

Comment 13

[Kai Engert (:KaiE:)]

I think I will need the icons a couple of days earlier.

The software that uses the icons needs to be checked in by 3/29 at latest, and
because the code depends on the icons, and we also have to get review on the
code before we are allowed to check in, it would help me to have the icons early.

Feel free to send them as you work them, even if you are not finished
completely. Draft versions of the icons are also welcome.
Thanks.

Comment 14

[jglick]

Updated Summary of Needed Icons (Thanks Kai)

Each icon needed in 4 states: Normal, Buttonover, Buttondown, Disabled

New Security Toolbar button ("mummy" in spec) - Mail Compose
===============
1) - Security button - Normal
2) - Sec button - "certs for all recipients are avail" (Sec w/entact cert)
3) - Sec button - "certs for all recipients are not avail" (Sec w/broken cert)


Additional Send Toolbar button - Mail Compose 
===============
4) - Send button - "encryption possible" (Send w/entact key)
5) - Send button - "encryption not possible" (Send w/broken key)


In classic, each of the above is: 23 pixels wide, 21 pixels high
In modern, each of the above icons is: 50 pixels wide, 34 pixels high



Status bar icons
================
Jennifer suggested that each should have a maximum height of 13 pixels.
No restriction on width.


New "encryption status" icons - status bar - Mail Compose
================
6) - "encryption possible" (entact key)
7) - "encryption not possible" (broken key)


New "signing status" icons - status bar - Mail Compose
=========================
8) - "will use signing" (pen)


Message header area icons - Reading a Message
=========================
Jennifer suggested in her original posting, that each of the following 
should be 32x32 pixels.

New "message status" icons to indicate encryption status for received 
messages:
=========================
9) - "valid encryption" (entact key)
10) - "invalid encryption", i.e. "unable to decrypt" (broken key)


New "signature status" icons to indicate encryption status for received 
messages:
=========================
11) - "valid signature" (entact pen)
12) - "invalid signature", i.e. "unable to verify signature" or "broken 
signature" (broken pen)

Comment 15

[jglick]

Note: Status bar icons
Modern - 13 pix height
Classic - 12 pix height

Comment 16

[Lori Kaplan]

placeholders are in the build. need real icons for the release. 

Comment 17

[Jaime Rodriguez, Jr.]

Changing to [adt RTM]

Comment 18

[marlon bishop]

Attachment: [modern] icons for security

Comment 19

[marlon bishop]

the above are for modern only.

Comment 20

[Kai Engert (:KaiE:)]

Marlon, thanks for the images, they look great!
However, before we can use them, I need to ask you for changes.

1.)
We need an icon encrypt-invalid-statusbar.gif (same size as encrypt-statusbar.gif)

2.)
This is a new requirement we became aware of very recently.

We need two more icons, but they probably can be easy variations of what you
produced.

We need:
- signed-unknown.gif
- signed-unknown-statusbar.gif

(I suggest they should be variations of signed.gif and signed-statusbar.gif)

They should indicate "it is yet unknown whether the signature is valid or not".

You know that we have been using temporary icons already. In the quick need of
additional temporary icons, I added a large red question mark over the signature
icons to visualize that we don't know the status yet.

You can see the temporary icons at:
http://lxr.mozilla.org/mozilla/source/themes/modern/messenger/smime/icons/hdrSignUnknown.gif
http://lxr.mozilla.org/mozilla/source/themes/modern/messenger/smime/icons/sbSignUnknown.gif

4.)
Your security toolbar icons include a dropdown arrow.
Can you please remove it? The Mozilla UI logic dynamically adds the dropdown
arrow to the right side of the icon, so if we keep your arrow, the user would
see two arrows.

5.)
Please have a look at:
http://lxr.mozilla.org/mozilla/source/themes/modern/messenger/smime/icons/smbtn1.gif

This is the image which contains the temporary icons.
The Mozilla code logic is already prepared to expect the icons in that format.

Could you please help me, download that image and manipulate it, by replacing
the icons in the picture with your new icons
- security-act.gif
- security-dis.gif
- security-hov.gif
- security.gif
- send-encrypt-act.gif
- send-encrypt-dis.gif
- send-encrypt-hov.gif
- send-encrypt.gif
and provide the new manipulated image?

Note that the multi-image-gif contains the complete set of 5x4 buttons that were
originally requested.
But currently we only use lines 1 and 5 from that multi-image-gif.
So it is sufficient if you replace those lines only, and leave the other lines
until you produce the other states at a later time.


Thanks!

Comment 21

[Kai Engert (:KaiE:)]

(Please ignore that there is no 3.) in the previous comment, I skipped that
number accidentially.)

Comment 22

[marlon bishop]

Attachment: [modern] icons for security

Kai,

1.) Now is included (i simply forgot to zip that one up)

2.) Done.  Two new icons included in the attachment use a question mark on top
of the signature pen.

4.) Actually you've implemented the wrong button.  it should be not be a menu
combo button (like the [Print] combo button for example), just a menu button
(for example the Mail [File] menu button).  That is why I have included the
black arrow in the icon.

5.) Shuehan says she can have a look at this and insert the images into the
map.  There seems to be something wrong with this file, it is not actually a
gif, but a jpeg.. Shuehan says she will fix that and check in the proper
format.

6) According to Jen's request i have changed the "broken" symbol to an "x" to
eliminate confusion with the "star" which is used for the "new" document
symbol.

Comment 23

[Kai Engert (:KaiE:)]

Marlon,

1.) thanks

2.) thanks

> 4.) Actually you've implemented the wrong button.  it should be not be a menu
> combo button (like the [Print] combo button for example), just a menu button
> (for example the Mail [File] menu button).  That is why I have included the
> black arrow in the icon.

You are right. I have filed bug 143450 to correct that mistake.


5.) Thanks for your offer to help. I have sent the current GIF to both of you by
email.

6) thanks.

Comment 24

[marlon bishop]

Attachment: [Modern] Security Icons

based on email discussions - this batch has security toolbar buttons without
the black dropdown arrows.  also increased the hover effect.

Comment 25

[Kai Engert (:KaiE:)]

Thanks for the images.

I'm using the new icons in my new build, they work.

I noticed that you have set the blue backgrounds on the icons. The temporary
icons were transparent. However, it still seems to look correct.

I was also able to create the combined grid image out of the separate toolbar
images.

We are ready to check it in.


Note that currently the new toolbar send button is not used. However, I filed
bug 144397, suggesting a way to use it.

Comment 26

[Kai Engert (:KaiE:)]

Note that the current set of icon is sufficient for our current functionality.

However, we will need three more toolbar button variations in the future - I
have filed bug 144403.

Comment 27

[scottputterman]

Before this gets approved, I just wanted to make sure that you intended not to
make the images transparent.

Comment 28

[Jaime Rodriguez, Jr.]

adt1.0.0+ (on ADT's behalf) for approval to checkin to the 1.0 branch, pending
addressing questions concerning transparencies, and driver's.  After, checking
in, please add the fixed1.0 keyword.

Comment 29

[Jaime Rodriguez, Jr.]

adt1.0.0+ (on ADT's behalf) for approval to checkin to the 1.0 branch, pending
addressing questions concerning transparencies, and driver's.  After, checking
in, please add the fixed1.0 keyword.

Comment 30

[marlon bishop]

kai, the blue background is fine as long as modern stays blue ;) (and it will)

Comment 31

[Kai Engert (:KaiE:)]

Comment on attachment 83138 [details]
[Modern] Security Icons

r=kaie

Comment 32

[Kai Engert (:KaiE:)]

Do we need sr= to check the icons in?

Comment 33

[Scott MacGregor]

Comment on attachment 83138 [details]
[Modern] Security Icons

sr=mscott

Comment 34

[marlon bishop]

kai could you post the \mozilla\themes\modern\messenger\smime\icons\smbtn1.gif
file that you created so i can check the integrity of the image after you
manipulated it?  thanks.

Comment 35

[Kai Engert (:KaiE:)]

Marlon, please have a look at the first attachment in bug 144403, that's it.

Comment 36

[marlon bishop]

thanks kai these look fine for now.  However we may switch to PNG for toolbar
buttons very soon.

Comment 37

[Kai Engert (:KaiE:)]

Checked in to 1.0.0 branch.

Comment 38

[Charles Rosendahl]

please check them into the trunk as well and resolve the bug.

Comment 39

[Kai Engert (:KaiE:)]

Checked in to trunk.

Comment 40

[John Unruh]

Verified on trunk and branch.

Comment 41

[John Unruh]

verified1.0.0