monochrome toolbar icons to match Lion

RESOLVED FIXED in Thunderbird 15.0

Status

Thunderbird
Theme
RESOLVED FIXED
6 years ago
5 years ago

People

(Reporter: andreasn, Assigned: andreasn)

Tracking

Trunk
Thunderbird 15.0
All
Mac OS X
Dependency tree / graph
Bug Flags:
in-testsuite -

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments, 24 obsolete attachments)

29.20 KB, image/png
Details
119.21 KB, patch
andreasn
: review+
andreasn
: ui-review+
Details | Diff | Splinter Review
(Assignee)

Description

6 years ago
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.
(Assignee)

Updated

6 years ago
Assignee: nobody → nisses.mail
(Assignee)

Comment 1

6 years ago
Created attachment 587436 [details] [diff] [review]
patch v1 (wip)

First cut at the patch. Graphics and some css-fixes.
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).
(Assignee)

Comment 3

5 years ago
Richard: Seems some bitrot have happened here. Can you post a updated patch?
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.
Attachment #599228 - Attachment is obsolete: true

Comment 5

5 years ago
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.
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

5 years ago
Aaaah, OK. Now I also understand what you mean if you say "Aero" icons. :-)
(Assignee)

Comment 8

5 years ago
Created attachment 613944 [details] [diff] [review]
patch with updated icons

Lets see how this works.
Attachment #611506 - Attachment is obsolete: true
You don't want ask someone for review?
(Assignee)

Comment 10

5 years ago
(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.
(Assignee)

Comment 11

5 years ago
Oh, and combo buttons seems to have issues with the icon opacity when the window is inactive.
(Assignee)

Comment 12

5 years ago
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.
Attachment #587436 - Attachment is obsolete: true
Attachment #613944 - Attachment is obsolete: true
(Assignee)

Comment 13

5 years ago
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.
Attachment #613952 - Attachment is obsolete: true

Updated

5 years ago
Duplicate of this bug: 724324
(Assignee)

Comment 15

5 years ago
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
(Assignee)

Comment 16

5 years ago
Created attachment 614132 [details]
chat toolbar graphics

and chat-toolbar to replace the one that's currently a copy of the aero one.
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?
Attachment #613982 - Attachment is obsolete: true
(Assignee)

Comment 18

5 years ago
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.
(Assignee)

Comment 19

5 years ago
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.
Attachment #614423 - Attachment is obsolete: true
(Assignee)

Comment 20

5 years ago
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.
Attachment #614767 - Attachment is obsolete: true
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.
Attachment #614131 - Attachment is obsolete: true
Attachment #614132 - Attachment is obsolete: true
Attachment #614778 - Attachment is obsolete: true
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.
Attachment #614864 - Attachment is obsolete: true
Created attachment 615023 [details]
Screenshot of v9

Updated

5 years ago
Attachment #613091 - Attachment is obsolete: true

Comment 24

5 years ago
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. :-)
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.
(Assignee)

Comment 26

5 years ago
Created attachment 615428 [details] [diff] [review]
patch (v10)

Active states for all toolbar buttons across all toolbars.
Attachment #615022 - Attachment is obsolete: true
(Assignee)

Comment 27

5 years ago
Created attachment 615657 [details] [diff] [review]
patch (v11)

Takes care of the lionized Download button and the contacts toggle in the compose window.
Attachment #615428 - Attachment is obsolete: true
(Assignee)

Comment 28

5 years ago
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.
(Assignee)

Comment 29

5 years ago
Created attachment 617856 [details] [diff] [review]
patch (v12)

Takes care of the two issues above.
Attachment #615657 - Attachment is obsolete: true
(Assignee)

Comment 30

5 years ago
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.
Attachment #617856 - Attachment is obsolete: true
(Assignee)

Comment 31

5 years ago
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.
Attachment #617992 - Flags: ui-review?(bwinton)
Attachment #617992 - Flags: review?(mconley)
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.
Attachment #617992 - Flags: ui-review?(bwinton) → ui-review-
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.
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.
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.
Created attachment 618413 [details] [diff] [review]
patch (v14.1)

Removed the small icons check mark.
Attachment #618400 - Attachment is obsolete: true
I'm going to hold off on a review until this gets ui-r+.
(Assignee)

Comment 38

5 years ago
Created attachment 620258 [details] [diff] [review]
patch (v14.2)

Richards css fixes and my icon fixes.
Attachment #617992 - Attachment is obsolete: true
Attachment #618413 - Attachment is obsolete: true
Attachment #617992 - Flags: review?(mconley)
(Assignee)

Comment 39

5 years ago
(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)
(Assignee)

Updated

5 years ago
Attachment #620258 - Flags: ui-review?(bwinton)
Attachment #620258 - Flags: review?(mconley)
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.
Attachment #620258 - Flags: ui-review?(bwinton) → ui-review+
(Assignee)

Comment 41

5 years ago
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.
Attachment #620258 - Attachment is obsolete: true
Attachment #620381 - Flags: ui-review+
Attachment #620381 - Flags: review?(mconley)
Attachment #620258 - Flags: review?(mconley)
Andreas:

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

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

-Mike
(Assignee)

Comment 43

5 years ago
(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.
(Assignee)

Comment 44

5 years ago
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.
Attachment #620381 - Attachment is obsolete: true
Attachment #620663 - Flags: ui-review+
Attachment #620663 - Flags: review?(mconley)
Attachment #620381 - Flags: review?(mconley)
(Assignee)

Updated

5 years ago
Blocks: 751299
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
(Assignee)

Comment 46

5 years ago
Sure, I'll get on it!
(Assignee)

Comment 47

5 years ago
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).
Attachment #620663 - Attachment is obsolete: true
Attachment #622354 - Flags: ui-review+
Attachment #622354 - Flags: review?(mconley)
Attachment #620663 - Flags: review?(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

Updated

5 years ago
Attachment #622354 - Flags: review?(mconley) → review+
(Assignee)

Comment 49

5 years ago
Created attachment 622489 [details] [diff] [review]
patch (v14.5)

Addresses the space indentation nit from Mike's code review so ready for checkin!
Attachment #622354 - Attachment is obsolete: true
Attachment #622489 - Flags: ui-review+
Attachment #622489 - Flags: review+
(Assignee)

Updated

5 years ago
Keywords: checkin-needed
https://hg.mozilla.org/comm-central/rev/6649ed03ea99
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Flags: in-testsuite-
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 15.0
(Assignee)

Updated

5 years ago
Blocks: 733856
Depends on: 761970
Depends on: 794880

Updated

5 years ago
Blocks: 803724
Duplicate of this bug: 814446
You need to log in before you can comment on or make changes to this bug.