709799 - monochrome toolbar icons to match Lion

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[Andreas Nilsson (:andreasn)]

It seems I didn't open a bug about it this already (as far as I can remember).
Given the fact that Lion very much has a monochrome icons everywhere, I think we should do this too, more specifically for the toolbar.
The folder view could get some love too, but that's another bug.

Comment 1

[Andreas Nilsson (:andreasn)]

Attachment: patch v1 (wip)

First cut at the patch. Graphics and some css-fixes.

Comment 2

[Richard Marti (:Paenglab)]

Attachment: full WIP patch with Aero icons

This is a full patch for Main window, AB and Compozer.

I've used the Aero icons to show the effect. The right icons should have 20px * 20px dimensions like Firefox.

This patch has fixed icon sizes of 18px * 18px for every icon. The final patch needs changes in this like I made in messengercompose.css (-moz-any).

Comment 3

[Andreas Nilsson (:andreasn)]

Richard: Seems some bitrot have happened here. Can you post a updated patch?

Comment 4

[Richard Marti (:Paenglab)]

Attachment: Unbitrotted WIP patch with aero icons and now with chat

Here is the unbitrotted patch. Now updated with the chat icons.

Comment 5

[Nomis101]

Attachment: Screenshot

I've tested this patch, and I like it mostly. But I think, compared what we have in Apple Mail on Lion, the icons are a way too dark. And some icons are maybe (in my sensation) a bit too small.

Comment 6

[Richard Marti (:Paenglab)]

The icons are from Windows to show how it could look. I used them because this set is complete and every button is working. I never intended to use this icons in a final patch.

Comment 7

[Nomis101]

Aaaah, OK. Now I also understand what you mean if you say "Aero" icons. :-)

Comment 8

[Andreas Nilsson (:andreasn)]

Attachment: patch with updated icons

Lets see how this works.

Comment 9

[Richard Marti (:Paenglab)]

You don't want ask someone for review?

Comment 10

[Andreas Nilsson (:andreasn)]

(In reply to Richard Marti [:paenglab] from comment #9)
> You don't want ask someone for review?

Not yet, as I think there are still some open issues left:
* Some icons are still a bit misaliged (fix for this coming shortly)
* The Quick toogle button looses it's icon once toggled.
* Compose window toolbar icons are fuzzy
* Message header icons and toolbar icons should probably use the same graphics now.
* Message header icons lost their button appearance.

Comment 11

[Andreas Nilsson (:andreasn)]

Oh, and combo buttons seems to have issues with the icon opacity when the window is inactive.

Comment 12

[Andreas Nilsson (:andreasn)]

Attachment: patch (v4)

(I have no idea if this actually counts as v4, but lets call it that)

This fixes the issue with misalignment in several icons and transparency in the junk icon.

Comment 13

[Andreas Nilsson (:andreasn)]

Attachment: patch (v5)

This removes the message-header-specific toolbar icons, as they can and should use the same resource as the toolbar now.

Comment 15

[Andreas Nilsson (:andreasn)]

Attachment: mail-toolbar graphics

Richard said he was in the middle of moving a bunch of stuff around, so attaching just the bitmaps.
Here comes the mail-toolbar.png

Comment 16

[Andreas Nilsson (:andreasn)]

Attachment: chat toolbar graphics

and chat-toolbar to replace the one that's currently a copy of the aero one.

Comment 17

[Richard Marti (:Paenglab)]

Attachment: Patch v6

This patch should address all issues:
All icons fixed by Andreas
The toolbarbuttons have now never a button appearance like shorlander planned
Messageheader buttons are looking again like allways.

Andreas, can you check if all is okay and the review process can start?

Comment 18

[Andreas Nilsson (:andreasn)]

Two issues I'm spotting:
* When the window is unfocused the Tag and File icons still look focused if using Icons and Text (and also for Icons, but this goes away if Icon beside Text is selected before).
* According to the spec, in addition to the Normal and Toggled state, we also need a pressed state. I think this is best done as pixmaps, so I'll update the graphics for this.

Comment 19

[Andreas Nilsson (:andreasn)]

Attachment: Patch (v7)

With active states for the main toolbar (others coming shortly)
Couldn't figure out the exact syntax for how to not do pressed states if disabled="true"
#button-newmsg:not[disabled="true"]:active did not do the trick.

Comment 20

[Andreas Nilsson (:andreasn)]

Attachment: Patch (v7)

Now it works all right for disabled items in the toolbar as well.
The selector is #button-reply:not([disabled="true"]):active of course.

Comment 21

[Richard Marti (:Paenglab)]

Attachment: Patch (v8)

This patch is addressing the unfocused icons. I also added a lesser opacity of toolbarbutton-text for disabled buttons. Okay like this?

Blake wrote in Bug 741998 comment 3:
Just leaving a note to say that I chatted with shorlander, and the text of toggled buttons on Mac (if shown) should also be blue and glowy, like the icons.  (Which makes sense, if you consider the text-only mode, in which I think we'll want to show the blue glow.)  Windows, of course, doesn't have the glow, so the question doesn't come up.  :)

I used the colors shorlander sent through IRC.

Comment 22

[Richard Marti (:Paenglab)]

Attachment: Patch (v9)

I've added the Australis dropmarker separator on the menu-buttons and made the messageheader buttons a little bit more native looking.

Andreas: please can you also lionize download.png in mail/icons? This icon is used for the safe button in attachment toolbar.

Comment 23

[Richard Marti (:Paenglab)]

Attachment: Screenshot of v9

Comment 24

[Nomis101]

I've tested v9 and I found some inconsistency with the Quick toogle button. Normally I don't have this in my toolbar. So I opened the customize menu to add it. After adding it, the icon was grey (with filter bar open). Than I've toggled the filter, the icon was still grey. Than I've toggled the filter bar back, now the icon was blue. After opening the customize menu again, the blue icon turned grey. I don't now if this is wanted, but I would suppose the icon should be blue when the filter bar is visible, regardless if the icon was newly added or the customize menu is open.
I also see an odd behaviour with the file button, while the text is greyed-out, the icon isn't, and the dropmarker is a bit smaller than the other dropmarkers. 
But all in all I really like it. :-)

Comment 25

[Richard Marti (:Paenglab)]

I customize mode it's normal you don't see the checked state. Also the disabled buttons are shown in normal state during customizing.

I can confirm the QFB-button behavior when adding with a enabled QFBar. But this isn't a CSS problem. It looks more as a button initialization problem.

For me the file button is always consistent. What's weird is you are seeing the dropmarker. This should be invisible because it's hidden by CSS, but this isn't introduced by this bug. Let's wait what Andreas sees.

Comment 26

[Andreas Nilsson (:andreasn)]

Attachment: patch (v10)

Active states for all toolbar buttons across all toolbars.

Comment 27

[Andreas Nilsson (:andreasn)]

Attachment: patch (v11)

Takes care of the lionized Download button and the contacts toggle in the compose window.

Comment 28

[Andreas Nilsson (:andreasn)]

There are only two issues left before I set this patch up for review now:
* The paste and copy icons are slightly too dark
* In the compose window the active state of the address book sidebar icon switch have a light background behind it.

Comment 29

[Andreas Nilsson (:andreasn)]

Attachment: patch (v12)

Takes care of the two issues above.

Comment 30

[Andreas Nilsson (:andreasn)]

Attachment: patch (v13)

Spotted that the shadow of the active icons looked strange, so this should look more like shorlanders mockup.

Comment 31

[Andreas Nilsson (:andreasn)]

Comment on attachment 617992 [details] [diff] [review]
patch (v13)

Setting up for review. I've checked carefully for ui-issues, but there might be something that slipped through.

Comment 32

[Blake Winton (:bwinton) (:☕️)]

Comment on attachment 617992 [details] [diff] [review]
patch (v13)

Compose window:

I think the lines in the Attachment icon need to be thicker.  In http://people.mozilla.com/~shorlander/files/australis-designSpecs/australis-designSpecs-osx-mainWindow.html#sectionLivePreview there really aren't any lines that are less than a few pixels wide, and that seems necessary to show the depressed state.

The blue of the toggled contacts looks a little too dark.  (It should be glowing, it seems more painted, if that makes any sense.  ;)

The "Priority" dropdown looks _really_ out of place.  :)  What do you think about a set of five buttons or a dropdown button instead?

We only have one set of icons, so the "Use Small Icons" toggle should be removed.


Address Book:

The "Use Small Icons" toggle actually affects the size of the first spacer somehow.  That's kind of concerning.  (And the toggle should be removed. ;)


Three Pane:

The lines on the Quick Filter are a little thin, and I think it, too, could be brighter in its toggled state.

The Folder List and View dropdowns are a little odd-looking, but I'm not sure what else we could do there.

But, when I open the Folder List (it's in a new toolbar), it only shows a couple of rows of folders, which seems like an actual bug.  On the other hand, it's not great in nightly, either, so maybe it's not your bug.  (But please file it if you can reproduce it.)


So, these are all fairly trivial things, but I'ld like to see the next version, cause it looks really cool, so I'm going to say ui-r-.  ;)

Thanks,
Blake.

Comment 33

[Blake Winton (:bwinton) (:☕️)]

Oh, a couple more things…  (Having shorlander in Toronto to talk to makes stuff easier!  ;)

There are already cut/copy/paste icons for Firefox that I think we should steal.  I'll forward those to you when I get them.

The spacing between the icon and the text in text-beside-icons mode should be smaller.  And the spacing between the icon and the | for dropdowns in icon-only mode should also be smaller.  This is so each button is more grouped with itself, and feels separated a little more from the buttons beside it.

Thanks,
Blake.

Comment 34

[Richard Marti (:Paenglab)]

Attachment: patch (v14)

(In reply to Blake Winton (:bwinton - Thunderbird UX) from comment #32)
> Comment on attachment 617992 [details] [diff] [review]
> patch (v13)
> 
> We only have one set of icons, so the "Use Small Icons" toggle should be
> removed.

This is easily doable now with the new IDs in the customize window. But does this need a migration patch for users which have big icons set? or does this code I copied from Firefox work enough for this?

#mail-toolbox > toolbar {
  /* force iconsize="small" on these toolbars */
  counter-reset: smallicons;
}

I'm not sure this is enough. If yes I can add the removal code.

(In reply to Blake Winton (:bwinton - Thunderbird UX) from comment #33)
> The spacing between the icon and the text in text-beside-icons mode should
> be smaller.  And the spacing between the icon and the | for dropdowns in
> icon-only mode should also be smaller.  This is so each button is more
> grouped with itself, and feels separated a little more from the buttons
> beside it.

Both fixed with patch v14.

Additionally I've added a rule to remove the background color for checked buttons. The blue icon and text are enough.

The other issues are more for Andreas.

Comment 35

[Blake Winton (:bwinton) (:☕️)]

I would say leave the iconsize="big", so that when they go back to TB.prev they get their old large icons back.  Just ignore it in our CSS.

Comment 36

[Richard Marti (:Paenglab)]

Attachment: patch (v14.1)

Removed the small icons check mark.

Comment 37

[Mike Conley (:mconley) (:⚙️)]

I'm going to hold off on a review until this gets ui-r+.

Comment 38

[Andreas Nilsson (:andreasn)]

Attachment: patch (v14.2)

Richards css fixes and my icon fixes.

Comment 39

[Andreas Nilsson (:andreasn)]

(In reply to Blake Winton (:bwinton - Thunderbird UX) from comment #32)
> Comment on attachment 617992 [details] [diff] [review]
> patch (v13)
> 
> Compose window:
> 
> I think the lines in the Attachment icon need to be thicker.  In
> http://people.mozilla.com/~shorlander/files/australis-designSpecs/australis-
> designSpecs-osx-mainWindow.html#sectionLivePreview there really aren't any
> lines that are less than a few pixels wide, and that seems necessary to show
> the depressed state.

Fixed.

 
> The blue of the toggled contacts looks a little too dark.  (It should be
> glowing, it seems more painted, if that makes any sense.  ;)

Fixed

  
> Three Pane:
> 
> The lines on the Quick Filter are a little thin, and I think it, too, could
> be brighter in its toggled state.

I made it brighter, but not thicker, as that looked odd. It also looks like the Australis icons are 2px in a lot of icons (history, new tab & new window)

Comment 40

[Blake Winton (:bwinton) (:☕️)]

Comment on attachment 620258 [details] [diff] [review]
patch (v14.2)

I'm going to say ui-r=me, cause I really like it, but there is one thing I'ld like you to fix before checking it in.

As seen in http://dl.dropbox.com/u/2301433/Screenshots/LionIcons3.png some of the icons don't have enough space before the dropdown when they're in the tab area.

But other than that, nice work!

Thanks,
Blake.

Comment 41

[Andreas Nilsson (:andreasn)]

Attachment: patch (v14.3)

Fixes the issue with the separators in the tabs toolbar, so carrying over Blake's ui-review+ and setting this up for code review.

Comment 42

[Mike Conley (:mconley) (:⚙️)]

Andreas:

Were the chat icons expected to be missing?  I'm getting:

http://i.imgur.com/BHH3r.png

-Mike

Comment 43

[Andreas Nilsson (:andreasn)]

(In reply to Mike Conley (:mconley) from comment #42)
> Andreas:
> 
> Were the chat icons expected to be missing?  I'm getting:
> 
> http://i.imgur.com/BHH3r.png

No :)
This might have been a bitrot fix gone wrong along the way. Trying to reproduce on my own system right now, but it seems Chat is giving me a strange error and refuses to show it's tab all together currently.

Comment 44

[Andreas Nilsson (:andreasn)]

Attachment: patch (v14.4)

Sorry about that, seems there was some misplaced 
{ and } dudes in chat.css. Fixed in this patch.

Comment 45

[Mike Conley (:mconley) (:⚙️)]

Comment on attachment 620663 [details] [diff] [review]
patch (v14.4)

Review of attachment 620663 [details] [diff] [review]:
-----------------------------------------------------------------

Andreas:

This is looking pretty good!

One point though - I'm noticing lots of descendent selection rules, and it reminds me of a page that Blake was showing me the other day:

https://developer.mozilla.org/en/Writing_Efficient_CSS#Use_the_most_specific_category_possible

Is it possible to make some of those descendent selectors more direct?

-Mike

Comment 46

[Andreas Nilsson (:andreasn)]

Sure, I'll get on it!

Comment 47

[Andreas Nilsson (:andreasn)]

Attachment: patch (v14.5)

So, as I told you on IRC, these widgets are fairly complex, so I ended up not being able to fix them without running into a bunch new issues (I actually had to remove one > to make the tab icon work when disabled).

Comment 48

[Mike Conley (:mconley) (:⚙️)]

Comment on attachment 622354 [details] [diff] [review]
patch (v14.5)

Review of attachment 622354 [details] [diff] [review]:
-----------------------------------------------------------------

Andreas:

Sorry it took so long to finish this, and thanks for humouring me on my request to try that CSS efficiency stuff.

From inspection, I can't find much wrong with this - just a lone nit.

With that fixed, r=me.

Great work!

-Mike

::: mail/themes/pinstripe/mail/messageHeader.css
@@ +399,4 @@
>  .hdrReplyToSenderButton,
>  .hdrDummyReplyButton,
>  .hdrReplyButton {
> +    list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");

Nit: extra space indentation

Comment 49

[Andreas Nilsson (:andreasn)]

Attachment: patch (v14.5)

Addresses the space indentation nit from Mike's code review so ready for checkin!

Comment 50

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/comm-central/rev/6649ed03ea99