Last Comment Bug 709799 - monochrome toolbar icons to match Lion
: monochrome toolbar icons to match Lion
Status: RESOLVED FIXED
:
Product: Thunderbird
Classification: Client Software
Component: Theme (show other bugs)
: Trunk
: All Mac OS X
: -- normal (vote)
: Thunderbird 15.0
Assigned To: Andreas Nilsson (:andreasn)
:
Mentors:
: 724324 814446 (view as bug list)
Depends on: 761970 794880
Blocks: 733856 751299 803724
  Show dependency treegraph
 
Reported: 2011-12-12 08:26 PST by Andreas Nilsson (:andreasn)
Modified: 2012-11-26 01:04 PST (History)
8 users (show)
ryanvm: in‑testsuite-
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
patch v1 (wip) (26.61 KB, patch)
2012-01-10 12:51 PST, Andreas Nilsson (:andreasn)
no flags Details | Diff | Review
full WIP patch with Aero icons (97.26 KB, text/plain)
2012-02-21 09:47 PST, Richard Marti (:Paenglab)
no flags Details
Unbitrotted WIP patch with aero icons and now with chat (99.89 KB, patch)
2012-04-02 10:19 PDT, Richard Marti (:Paenglab)
no flags Details | Diff | Review
Screenshot (28.57 KB, image/jpeg)
2012-04-07 03:53 PDT, Nomis101
no flags Details
patch with updated icons (89.55 KB, patch)
2012-04-11 04:08 PDT, Andreas Nilsson (:andreasn)
no flags Details | Diff | Review
patch (v4) (89.52 KB, patch)
2012-04-11 05:41 PDT, Andreas Nilsson (:andreasn)
no flags Details | Diff | Review
patch (v5) (92.84 KB, patch)
2012-04-11 07:10 PDT, Andreas Nilsson (:andreasn)
no flags Details | Diff | Review
mail-toolbar graphics (7.34 KB, image/png)
2012-04-11 12:55 PDT, Andreas Nilsson (:andreasn)
no flags Details
chat toolbar graphics (1003 bytes, image/png)
2012-04-11 12:57 PDT, Andreas Nilsson (:andreasn)
no flags Details
Patch v6 (85.73 KB, patch)
2012-04-12 10:06 PDT, Richard Marti (:Paenglab)
no flags Details | Diff | Review
Patch (v7) (98.75 KB, patch)
2012-04-13 07:18 PDT, Andreas Nilsson (:andreasn)
no flags Details | Diff | Review
Patch (v7) (99.25 KB, patch)
2012-04-13 07:46 PDT, Andreas Nilsson (:andreasn)
no flags Details | Diff | Review
Patch (v8) (95.07 KB, patch)
2012-04-13 11:25 PDT, Richard Marti (:Paenglab)
no flags Details | Diff | Review
Patch (v9) (96.90 KB, patch)
2012-04-14 05:07 PDT, Richard Marti (:Paenglab)
no flags Details | Diff | Review
Screenshot of v9 (29.20 KB, image/png)
2012-04-14 05:08 PDT, Richard Marti (:Paenglab)
no flags Details
patch (v10) (108.83 KB, patch)
2012-04-16 12:52 PDT, Andreas Nilsson (:andreasn)
no flags Details | Diff | Review
patch (v11) (111.73 KB, patch)
2012-04-17 04:10 PDT, Andreas Nilsson (:andreasn)
no flags Details | Diff | Review
patch (v12) (113.28 KB, patch)
2012-04-24 07:14 PDT, Andreas Nilsson (:andreasn)
no flags Details | Diff | Review
patch (v13) (113.31 KB, patch)
2012-04-24 12:36 PDT, Andreas Nilsson (:andreasn)
bwinton: ui‑review-
Details | Diff | Review
patch (v14) (114.31 KB, text/plain)
2012-04-25 12:51 PDT, Richard Marti (:Paenglab)
no flags Details
patch (v14.1) (114.41 KB, patch)
2012-04-25 13:32 PDT, Richard Marti (:Paenglab)
no flags Details | Diff | Review
patch (v14.2) (119.31 KB, patch)
2012-05-02 04:48 PDT, Andreas Nilsson (:andreasn)
bwinton: ui‑review+
Details | Diff | Review
patch (v14.3) (119.19 KB, patch)
2012-05-02 11:09 PDT, Andreas Nilsson (:andreasn)
bugs: ui‑review+
Details | Diff | Review
patch (v14.4) (119.22 KB, patch)
2012-05-03 05:41 PDT, Andreas Nilsson (:andreasn)
bugs: ui‑review+
Details | Diff | Review
patch (v14.5) (119.21 KB, patch)
2012-05-09 05:48 PDT, Andreas Nilsson (:andreasn)
mconley: review+
bugs: ui‑review+
Details | Diff | Review
patch (v14.5) (119.21 KB, patch)
2012-05-09 13:34 PDT, Andreas Nilsson (:andreasn)
bugs: review+
bugs: ui‑review+
Details | Diff | Review

Description Andreas Nilsson (:andreasn) 2011-12-12 08:26:36 PST
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) 2012-01-10 12:51:17 PST
Created attachment 587436 [details] [diff] [review]
patch v1 (wip)

First cut at the patch. Graphics and some css-fixes.
Comment 2 Richard Marti (:Paenglab) 2012-02-21 09:47:56 PST
Created attachment 599228 [details]
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) 2012-04-02 05:07:51 PDT
Richard: Seems some bitrot have happened here. Can you post a updated patch?
Comment 4 Richard Marti (:Paenglab) 2012-04-02 10:19:58 PDT
Created attachment 611506 [details] [diff] [review]
Unbitrotted WIP patch with aero icons and now with chat

Here is the unbitrotted patch. Now updated with the chat icons.
Comment 5 Nomis101 2012-04-07 03:53:02 PDT
Created attachment 613091 [details]
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) 2012-04-07 04:11:29 PDT
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 2012-04-07 05:30:33 PDT
Aaaah, OK. Now I also understand what you mean if you say "Aero" icons. :-)
Comment 8 Andreas Nilsson (:andreasn) 2012-04-11 04:08:32 PDT
Created attachment 613944 [details] [diff] [review]
patch with updated icons

Lets see how this works.
Comment 9 Richard Marti (:Paenglab) 2012-04-11 05:06:06 PDT
You don't want ask someone for review?
Comment 10 Andreas Nilsson (:andreasn) 2012-04-11 05:19:06 PDT
(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) 2012-04-11 05:20:30 PDT
Oh, and combo buttons seems to have issues with the icon opacity when the window is inactive.
Comment 12 Andreas Nilsson (:andreasn) 2012-04-11 05:41:41 PDT
Created attachment 613952 [details] [diff] [review]
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) 2012-04-11 07:10:46 PDT
Created attachment 613982 [details] [diff] [review]
patch (v5)

This removes the message-header-specific toolbar icons, as they can and should use the same resource as the toolbar now.
Comment 14 Nomis101 2012-04-11 09:40:11 PDT
*** Bug 724324 has been marked as a duplicate of this bug. ***
Comment 15 Andreas Nilsson (:andreasn) 2012-04-11 12:55:43 PDT
Created attachment 614131 [details]
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) 2012-04-11 12:57:04 PDT
Created attachment 614132 [details]
chat toolbar graphics

and chat-toolbar to replace the one that's currently a copy of the aero one.
Comment 17 Richard Marti (:Paenglab) 2012-04-12 10:06:14 PDT
Created attachment 614423 [details] [diff] [review]
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) 2012-04-13 05:15:06 PDT
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) 2012-04-13 07:18:39 PDT
Created attachment 614767 [details] [diff] [review]
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) 2012-04-13 07:46:06 PDT
Created attachment 614778 [details] [diff] [review]
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) 2012-04-13 11:25:42 PDT
Created attachment 614864 [details] [diff] [review]
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) 2012-04-14 05:07:55 PDT
Created attachment 615022 [details] [diff] [review]
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) 2012-04-14 05:08:48 PDT
Created attachment 615023 [details]
Screenshot of v9
Comment 24 Nomis101 2012-04-14 15:11:15 PDT
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) 2012-04-15 00:48:53 PDT
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) 2012-04-16 12:52:05 PDT
Created attachment 615428 [details] [diff] [review]
patch (v10)

Active states for all toolbar buttons across all toolbars.
Comment 27 Andreas Nilsson (:andreasn) 2012-04-17 04:10:58 PDT
Created attachment 615657 [details] [diff] [review]
patch (v11)

Takes care of the lionized Download button and the contacts toggle in the compose window.
Comment 28 Andreas Nilsson (:andreasn) 2012-04-18 04:57:07 PDT
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) 2012-04-24 07:14:48 PDT
Created attachment 617856 [details] [diff] [review]
patch (v12)

Takes care of the two issues above.
Comment 30 Andreas Nilsson (:andreasn) 2012-04-24 12:36:23 PDT
Created attachment 617992 [details] [diff] [review]
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) 2012-04-25 08:01:02 PDT
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) (:☕️) 2012-04-25 09:20:57 PDT
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) (:☕️) 2012-04-25 10:38:59 PDT
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) 2012-04-25 12:51:19 PDT
Created attachment 618400 [details]
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) (:☕️) 2012-04-25 12:53:44 PDT
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) 2012-04-25 13:32:00 PDT
Created attachment 618413 [details] [diff] [review]
patch (v14.1)

Removed the small icons check mark.
Comment 37 Mike Conley (:mconley) - (Needinfo me!) 2012-04-27 12:32:35 PDT
I'm going to hold off on a review until this gets ui-r+.
Comment 38 Andreas Nilsson (:andreasn) 2012-05-02 04:48:21 PDT
Created attachment 620258 [details] [diff] [review]
patch (v14.2)

Richards css fixes and my icon fixes.
Comment 39 Andreas Nilsson (:andreasn) 2012-05-02 04:51:41 PDT
(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) (:☕️) 2012-05-02 10:29:41 PDT
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) 2012-05-02 11:09:04 PDT
Created attachment 620381 [details] [diff] [review]
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) - (Needinfo me!) 2012-05-02 12:36:56 PDT
Andreas:

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

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

-Mike
Comment 43 Andreas Nilsson (:andreasn) 2012-05-03 03:47:34 PDT
(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) 2012-05-03 05:41:26 PDT
Created attachment 620663 [details] [diff] [review]
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) - (Needinfo me!) 2012-05-03 07:54:09 PDT
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) 2012-05-04 00:19:07 PDT
Sure, I'll get on it!
Comment 47 Andreas Nilsson (:andreasn) 2012-05-09 05:48:51 PDT
Created attachment 622354 [details] [diff] [review]
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) - (Needinfo me!) 2012-05-09 13:10:46 PDT
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) 2012-05-09 13:34:44 PDT
Created attachment 622489 [details] [diff] [review]
patch (v14.5)

Addresses the space indentation nit from Mike's code review so ready for checkin!
Comment 50 Ryan VanderMeulen [:RyanVM] 2012-05-09 15:33:56 PDT
https://hg.mozilla.org/comm-central/rev/6649ed03ea99
Comment 51 Richard Marti (:Paenglab) 2012-11-26 01:04:37 PST
*** Bug 814446 has been marked as a duplicate of this bug. ***

Note You need to log in before you can comment on or make changes to this bug.