Closed Bug 781333 Opened 12 years ago Closed 11 years ago

Use 2x images for HiDPI Thunderbird UI

Categories

(Thunderbird :: Theme, defect)

All
macOS
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
Thunderbird 22.0

People

(Reporter: Nomis101, Assigned: Paenglab)

References

Details

Attachments

(27 files, 11 obsolete files)

53.25 KB, image/png
Details
12.05 KB, image/png
Details
5.52 KB, image/png
Details
20.66 KB, image/png
Details
11.15 KB, image/png
Details
5.57 KB, image/png
Details
16.56 KB, image/png
Details
8.49 KB, image/png
Details
1.32 KB, image/png
Details
675 bytes, image/png
Details
2.39 KB, image/png
Details
6.44 KB, image/png
Details
10.72 KB, image/png
Details
3.01 KB, image/png
Details
976 bytes, image/png
Details
12.87 KB, image/png
Details
914 bytes, image/png
Details
22.44 KB, image/png
Details
22.52 KB, image/png
Details
1.60 KB, image/png
Details
1.55 KB, image/png
Details
2.13 KB, image/png
Details
1.30 KB, image/png
Details
735 bytes, image/png
Details
868 bytes, image/png
Details
770 bytes, image/png
Details
407.94 KB, patch
Paenglab
: review+
Paenglab
: ui-review+
Details | Diff | Splinter Review
For full HiDPI support we also need to update the chrome to use higher resolution images, same as Firefox is doing it in Bug 781327.
As reference, shorlander has added HiDPI images in bug 781327.
Sorry not seen your link to this bug already.
Assignee: nobody → nisses.mail
Attached image main toolbar graphics (obsolete) —
Main toolbar graphics
Attached image mail-toolbar graphics
Attachment #658064 - Attachment is obsolete: true
Attached patch WIP (obsolete) — Splinter Review
WIP patch with the already available graphics.

I can't test this. Please can somebody with a Retina display test this patch?
I don't know if the .toolbarbutton-icon also needs a width/height change from 18px to 36px.
Oops, forgot to say this patch needs Bug 794880 applied first.
(In reply to Richard Marti [:Paenglab] from comment #8)
> I can't test this. Please can somebody with a Retina display test this patch?
> I don't know if the .toolbarbutton-icon also needs a width/height change
> from 18px to 36px.

Can you push the appropriate patches to the try server, and post a link to the builds here?  I'll get someone to give it a run through on Monday…

Thanks,
Blake.
I've never pushed to Try. It's better if someone else can do this.
Attached image folder-pane graphics (obsolete) —
Attached image server graphics (folder pane) (obsolete) —
(Adding sancus, who has a retina Macbook, for possible future try-build testing… ;)
Attached patch WIP v2 (obsolete) — Splinter Review
Next version with all available images used. Needs Bug 795989 applied first.

For testing you can find a try build here: http://ftp.mozilla.org/pub/mozilla.org/thunderbird/try-builds/richard.marti@gmail.com-a90763dbde8e

I fixed the to big icons for Chat and AppMenu and also the disappearing icons when active. The QFB button no more squishes on hover.

I made myself the Cut/Copy/Paste icons for the AppMenu. Please check if it looks good.

Andreas, please can you create HiDPI icons for this?
contact-generic.png
contact-generic-tiny.png
insert-menu.png

and add
RSS icons for folder-pane@2x.png (message-news.png)
Icons for server@2x.png (server-newsblog.png folder-newsgroup.png)

Are other images needed to add in this patch?
Attachment #666327 - Attachment is obsolete: true
Attachment #666550 - Attachment is obsolete: true
Attached image folder-pane graphics
Attachment #666549 - Attachment is obsolete: true
Attached patch WIP v3 (obsolete) — Splinter Review
Latest patch with all images from Andreas except contact-generic.png and contact-generic-tiny.png which are hard coded in XUL and JS and I can't change through CSS.

This patch still needs Bug 795989 applied first.
Attachment #668894 - Attachment is obsolete: true
With the try-build from comment 23:

The mailbox icon in the account central page is low-res.  https://dl.dropbox.com/u/2301433/Retina/AccountCentral.png

The checkmark in the customize menu is low-res.  https://dl.dropbox.com/u/2301433/Retina/MenuCheckmark.png

The activity indicator in the customize pane seems off.  Low-res, maybe?  https://dl.dropbox.com/u/2301433/Retina/ActivityIndicator.png

The checked version of the quick filter star is off.  https://dl.dropbox.com/u/2301433/Retina/QuickFilter.png

The star in the list view, and the attachment icon seem low-res.  https://dl.dropbox.com/u/2301433/Retina/StarAndAttachment.png

The formatting buttons, when checked, are too small.  https://dl.dropbox.com/u/2301433/Retina/SmileyButton.png

Is that save icon low-res?  https://dl.dropbox.com/u/2301433/Retina/SaveAlert.png

About Daily seems to have a low-res background.  https://dl.dropbox.com/u/2301433/Retina/About.png

The Formatting button in Preferences is way too big.  https://dl.dropbox.com/u/2301433/Retina/FormattingButton.png  (And I think all the icons on the top are low-res.)

The FileLink Provider icons are low-res.  https://dl.dropbox.com/u/2301433/Retina/FileLinkProviders.png

The Tag button in the message header customization is low-res  https://dl.dropbox.com/u/2301433/Retina/MessageHeaderCustomization.png

The GoogleTalk chat icon is low-res (and probably the others, too).  https://dl.dropbox.com/u/2301433/Retina/GoogleChat.png

And since we're re-doing the graphics, we should probably make the tab dropdown match the new Australis tabs, instead of the old blocky tabs.  ;)


That's all I saw with my first run through.  I look forward to trying a newer version sometime tomorrow or Friday.  :)

Thanks,
Blake.
(In reply to Blake Winton (:bwinton - Thunderbird UX) from comment #30)
> With the try-build from comment 23:
> 
> The mailbox icon in the account central page is low-res. 
> https://dl.dropbox.com/u/2301433/Retina/AccountCentral.png

Correct, no HiDPI icons yet.

> The checkmark in the customize menu is low-res. 
> https://dl.dropbox.com/u/2301433/Retina/MenuCheckmark.png

Checkmark is from toolkit and be addressed there.

> The activity indicator in the customize pane seems off.  Low-res, maybe? 
> https://dl.dropbox.com/u/2301433/Retina/ActivityIndicator.png

Correct. Who is able to create a HiDPI throbber?

> The checked version of the quick filter star is off. 
> https://dl.dropbox.com/u/2301433/Retina/QuickFilter.png

Already fixed in latest patch.

> The star in the list view, and the attachment icon seem low-res. 
> https://dl.dropbox.com/u/2301433/Retina/StarAndAttachment.png

Yes, needs HiDPI images.

> The formatting buttons, when checked, are too small. 
> https://dl.dropbox.com/u/2301433/Retina/SmileyButton.png

I can't say what happens here. I apply only the list-style-image. The buttons are -moz-appearance: toolbarbutton.

> Is that save icon low-res? 
> https://dl.dropbox.com/u/2301433/Retina/SaveAlert.png

Again, this is from toolkit. Should we fix this in TB?

> About Daily seems to have a low-res background. 
> https://dl.dropbox.com/u/2301433/Retina/About.png

This can be done, but is in branding. Is this needed?

> The Formatting button in Preferences is way too big. 
> https://dl.dropbox.com/u/2301433/Retina/FormattingButton.png  (And I think
> all the icons on the top are low-res.)

I haven't touched the formatting button and this is also toolkit. Does this happen also with a normal TB on Retina Mac?

> The FileLink Provider icons are low-res. 
> https://dl.dropbox.com/u/2301433/Retina/FileLinkProviders.png

These icons are hard-coded. I see no way to change this without changing the JS files.

> The Tag button in the message header customization is low-res 
> https://dl.dropbox.com/u/2301433/Retina/MessageHeaderCustomization.png

Strange, my TB with inverted media query is using the HiDPI icon. I can't say if it looks good as it is downscaled. When the button is on the toolbar, does it look okay?

> The GoogleTalk chat icon is low-res (and probably the others, too). 
> https://dl.dropbox.com/u/2301433/Retina/GoogleChat.png

Most of the icons in Chat are hard-coded and not changeable by CSS.

> And since we're re-doing the graphics, we should probably make the tab
> dropdown match the new Australis tabs, instead of the old blocky tabs.  ;)
> 
> 
> That's all I saw with my first run through.  I look forward to trying a
> newer version sometime tomorrow or Friday.  :)
> 
> Thanks,
> Blake.
Andreas, please can you add HiDPI images for following:

- Account Central images
- Preferences icons
- new icons for alltabs-button (the one at top right) and if possible in 
  Australis shape for low-res and HiDPI
- Thread pane cols icons in one image like I made a low-res example in this
  attachment
- Thread pane icons like attachment, read, junk etc.

Thanks
Hey - I have the Retina now.

I've noticed that the curve in the tabs is also a bit blurry:

http://i.imgur.com/EwlBb.png
I've filed bug 800948 for the really tall tabs bug.
Attached patch WIP v4 (obsolete) — Splinter Review
Added HiDPI tabs. Also the tab overflow arrows are in hi-res. On message headers the email star and the online presence indicator have HiDPI graphics.
Attachment #670070 - Attachment is obsolete: true
Attached image old headers
(In reply to Andreas Nilsson (:andreasn) from comment #39)
> Created attachment 678784 [details]
> column headers graphics

The normal size headers aren't that black and attachment, junk and thread are looking different. When a user moves TB from a HiDPI monitor to a normal DPI monitor he will see the difference.

Andreas, please can you update the column headers graphics?
(In reply to Richard Marti [:Paenglab] from comment #40)
> Created attachment 679332 [details]
> old headers
> 
> (In reply to Andreas Nilsson (:andreasn) from comment #39)
> > Created attachment 678784 [details]
> > column headers graphics
> 
> The normal size headers aren't that black and attachment, junk and thread
> are looking different. When a user moves TB from a HiDPI monitor to a normal
> DPI monitor he will see the difference.
> 
> Andreas, please can you update the column headers graphics?

Yeah, I want to make them like this to get closer to the other themes. I'll update and attach the regularly sized graphics as well.
Attached patch patch (obsolete) — Splinter Review
This patch needs Bug 795989 applied first.

I think this patch is now ready for review. Additional graphics should be done in follow-up bugs. I think this patch is big enough with his 7600 lines.

To make the review easier I made a try build: http://ftp.mozilla.org/pub/mozilla.org/thunderbird/try-builds/richard.marti@gmail.com-1c472e1a52e0
Attachment #671258 - Attachment is obsolete: true
Attachment #682566 - Flags: ui-review?(bwinton)
Attachment #682566 - Flags: review?(bwinton)
Bug 817366 will add HiDPI images in toolkit for e.g. extensionGeneric and pluginGeneric. We also have this png's in mail.
(In reply to Nomis101 from comment #48)
> Bug 817366 will add HiDPI images in toolkit for e.g. extensionGeneric and
> pluginGeneric. We also have this png's in mail.

As I wrote in comment 46, this patch is big enough and should not be expanded again.
extensionGeneric is only in toolkit and this will be made in bug 817366. pluginGeneric is on one place in applications.css. Only change this one in this file would look weird for the other, still low-res, images in this part. Better is, change all icons in this file in one step. Please file a new bug for this, and other parts. Then they can be fixed faster one after the other.
Attached patch updated patch (obsolete) — Splinter Review
Unbitrotted patch and also working after applying bug 815220 and bug 813218.

As the only change to the previous patch I've added to the normal DPI images folder-pane.png and server.png the same icons for archives and RSS-server like the HiDPI images have.

Newest try build: http://ftp.mozilla.org/pub/mozilla.org/thunderbird/try-builds/richard.marti@gmail.com-0ed3fdc6437e
Attachment #682566 - Attachment is obsolete: true
Attachment #682566 - Flags: ui-review?(bwinton)
Attachment #682566 - Flags: review?(bwinton)
Attachment #687538 - Flags: ui-review?(bwinton)
Attachment #687538 - Flags: review?(bwinton)
Attached patch patch (obsolete) — Splinter Review
Florian tested the try build on his Retina-Mac and found in Chat a squished status icon and no HiDPI icons in tabs/Alltabs popup for Chat and Gloda search. Both Chat issues are fixed in this patch.

Andreas, please can you create a HiDPI search-tab.png icon? Then all tab related icons should be HiDPI and the patch really complete for end-review.
Attachment #687538 - Attachment is obsolete: true
Attachment #687538 - Flags: ui-review?(bwinton)
Attachment #687538 - Flags: review?(bwinton)
(In reply to Richard Marti [:Paenglab] from comment #49)
> (In reply to Nomis101 from comment #48)
> > Bug 817366 will add HiDPI images in toolkit for e.g. extensionGeneric and
> > pluginGeneric. We also have this png's in mail.
> 
> As I wrote in comment 46, this patch is big enough and should not be
> expanded again.
> extensionGeneric is only in toolkit and this will be made in bug 817366.
> pluginGeneric is on one place in applications.css. Only change this one in
> this file would look weird for the other, still low-res, images in this
> part. Better is, change all icons in this file in one step. Please file a
> new bug for this, and other parts. Then they can be fixed faster one after
> the other.

HiDPI for the other icons is now Bug 819750.
I'm right, that the last thing missing here is search-tab.png, to complete this patch and (hopefully) get it in?
Attached patch patch (obsolete) — Splinter Review
I think this can be the final patch. All icons are now in this patch.

Blake, I hope you have still access to a Retina Mac.
Assignee: bugs → richard.marti
Attachment #687927 - Attachment is obsolete: true
Status: NEW → ASSIGNED
Attachment #696886 - Flags: ui-review?(bwinton)
Attachment #696886 - Flags: review?(bwinton)
Comment on attachment 696886 [details] [diff] [review]
patch

The one thing I saw that was old and ugly was the checkmark beside the tab name in the tablist dropdown at the top-right of the tab bar…

Having said that, it's a huge improvement, and has been waiting for me for too long, so ui-r=me, and we can fix the other things in followup bugs!

>+++ b/mail/themes/pinstripe/mail/compose/messengercompose.css
>@@ -209,115 +222,200 @@
> #button-send {
>   list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
>   -moz-image-region: rect(0px 18px 18px 0px);
> }
> 
> #button-send:not([disabled="true"]):active {
>-  list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
>   -moz-image-region: rect(18px 18px 36px 0px);
> }

Nice cleanup!

>-/* ::::: end small primary toolbar buttons ::::: */

Why remove this comment?

Other than that one question, I'm pretty happy with the patch, so r=me, as well!

Thanks, and I apologize for the delay in reviewing!

Later,
Blake.
Attachment #696886 - Flags: ui-review?(bwinton)
Attachment #696886 - Flags: ui-review+
Attachment #696886 - Flags: review?(bwinton)
Attachment #696886 - Flags: review+
(In reply to Blake Winton (:bwinton) from comment #56)
> Comment on attachment 696886 [details] [diff] [review]
> patch
> 
> The one thing I saw that was old and ugly was the checkmark beside the tab
> name in the tablist dropdown at the top-right of the tab bar…

I suppose this checkmark comes from global. This isn't HiDPIified (chrome://global/skin/menu/menu-check.png).

> >-/* ::::: end small primary toolbar buttons ::::: */
> 
> Why remove this comment?

Because no /* ::::: start small primary toolbar buttons ::::: */ exists and we only have one icon size now.

I have a new patch which I'll upload after landing of bug 844432. The only change is the addition of the HiDPI icon for appmenu-icons-active.png with the needed CSS. I hope it's okay.
Yeah, that sounds fine.  You can totally carry over the r=me, and ui-r=me.  :)
r+ and ui-r+ carried over from previous patch.

The only change is, I added a HiDPI image for appmenu-icons-active.png
Attachment #696886 - Attachment is obsolete: true
Attachment #717907 - Flags: ui-review+
Attachment #717907 - Flags: review+
Keywords: checkin-needed
https://hg.mozilla.org/comm-central/rev/5a0c56e7e9a7
Status: ASSIGNED → RESOLVED
Closed: 11 years ago
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 22.0
Theme looks ugly on my 10.0.7 machine - it looks like windows spam instead of the nice green ones :(
(In reply to Ludovic Hirlimann [:Usul] from comment #61)
> Theme looks ugly on my 10.0.7 machine - it looks like windows spam instead
> of the nice green ones :(

sorry got upset by a theme - probably the first time in my life.

Why did this change the theme for nonw HiDPI users ?
Depends on: 845377
Blocks: 764083
No longer depends on: 764083
Depends on: 929279
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: