517683 - Missing css/icons for Tasks and/or Events sidebar in SeaMonkey with Lightning

Status: RESOLVED FIXED

(SeaMonkey :: Themes, defect)

Description

[Ian Neal]

In both default and modern themes the Task, Events and Tasks and Events are missing the icons for switching between them and closing that sidebar.

Comment 1

[Philip Chee]

Attachment: Patch vC1.0. Fix the folder cycler.

Lightning uses the sidebar folder cycler CSS from Thunderbird. Since we don't yet have the cycler we don't have the styles to go with it either. Since Mnyromyr did say that we want a folder cycler/picker widget eventually I hope we can get some minimal CSS to support Lightning.

Comment 2

[Stefan [:stefanh]]

Note that there is suite/themes/classic/mac/messenger/mailWindow1.css too.

Comment 3

[Philip Chee]

> Note that there is suite/themes/classic/mac/messenger/mailWindow1.css too.
But I can't test it, so I thought I'd let you do that part instead :)

Comment 4

[Stefan [:stefanh]]

(In reply to comment #3)
> > Note that there is suite/themes/classic/mac/messenger/mailWindow1.css too.
> But I can't test it, so I thought I'd let you do that part instead :)

It should be quite straightforward just copying the .folderview-cycler style rules  (and icons) from pinstripe.

Comment 5

[Philip Chee]

Attachment: Patch vC1.1 Folder Cycler styles inc Mac.

> It should be quite straightforward just copying the .folderview-cycler style
> rules  (and icons) from pinstripe.
Done! I just cut and paste but I'm a bit dubious about the -moz-image-regions. Perhaps Mac does things differently?

Comment 6

[Stefan [:stefanh]]

(In reply to comment #5)
> Created an attachment (id=403029) [details]
> Patch vC1.1 Folder Cycler styles inc Mac.
> 
> > It should be quite straightforward just copying the .folderview-cycler style
> > rules  (and icons) from pinstripe.
> Done! I just cut and paste but I'm a bit dubious about the -moz-image-regions.
> Perhaps Mac does things differently?

Thanks for doing it :-) No, mac does not do things differently in this case. You are probably thinking of the issue with -moz-image-region in native mac menus (that is, menus in the windows menubar which are done by the widget code).

Comment 7

[Philip Chee]

Attachment: Screenshot of the folder cycler in the top right corner of the Today Pane.

Comment 8

[[e-mail]]

Comment on attachment 403029 [details] [diff] [review]
Patch vC1.1 Folder Cycler styles inc Mac.

>+.folderview-cycler,
>+.folderview-cycler .toolbarbutton-icon,
>+.folderview-cycler .toolbarbutton-text {
These need to use > (and the text should be display: none?)

>+.folderview-cycler[dir="prev"],
>+.folderview-cycler[dir="next"][chromedir="rtl"] {
>+  list-style-image: url("chrome://messenger/skin/icons/spin-buttons.png");
Why are we using these images rather than the global arrow.css images?

>+  padding: 0 !important;
>+  margin: 0 !important;
Aren't you repeating yourself?

>+  -moz-margin-end: 4px !important;
Why?

>+sidebarheader .toolbarbutton-text:not(value) {
Should be .folderview-cycler > .toolbarbutton-text

>+.folderview-cycler {
>+  -moz-padding-end: 0px;
I think this needs to be
.folderview-cycler > .toolbarbutton-icon {
  margin: 0px; /* !important ? */
}

(Same applies to Modern of course.)

Comment 10

[Philip Chee]

Attachment: Patch vC1.2 Fix review comments [Checkin: Comment 19]

> >+.folderview-cycler,
> >+.folderview-cycler .toolbarbutton-icon,
> >+.folderview-cycler .toolbarbutton-text {
> These need to use >
Fixed.

> (and the text should be display: none?)
Fixed.

> >+.folderview-cycler[dir="prev"],
> >+.folderview-cycler[dir="next"][chromedir="rtl"] {
> >+  list-style-image: url("chrome://messenger/skin/icons/spin-buttons.png");
> Why are we using these images rather than the global arrow.css images?

Thunderbird switched from arrow graphics to custom spin images in Bug 366842 (Land Pinstripe Theme Update for Mac OS X)

> >+  padding: 0 !important;
> >+  margin: 0 !important;
> Aren't you repeating yourself?
Removed.

> >+  -moz-margin-end: 4px !important;
> Why?
No idea. I don't have a Mac to test. Anyway removed. Lets see if Stefan will complain.

> >+sidebarheader .toolbarbutton-text:not(value) {
> Should be .folderview-cycler > .toolbarbutton-text
Fixed.

> >+.folderview-cycler {
> >+  -moz-padding-end: 0px;
> I think this needs to be
> .folderview-cycler > .toolbarbutton-icon {
>   margin: 0px; /* !important ? */
> }
Fixed (!important didn't seem necessary).

> (Same applies to Modern of course.)
Fixed.

Comment 11

[Philip Chee]

Attachment: Patch vM1.0 Mac Cycler using global arrow images.

As discussed over IRC with Neil. Here is an alternative for the Mac Cycler using the global arrow images. Obviously not tested at all.

+.folderview-cycler[dir="prev"]:active,
+.folderview-cycler[dir="next"][chromedir="rtl"]:active {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft-hov.gif");
+}
+
+.folderview-cycler[dir="next"]:active,
+.folderview-cycler[dir="prev"][chromedir="rtl"]:active {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit-hov.gif");
+}

Just a wild guess as to what to use for the :active images.

Comment 12

[Philip Chee]

Comment on attachment 403442 [details] [diff] [review]
Patch vC1.2 Fix review comments
[Checkin: Comment 19]

requesting review from Stefan for the Mac cycler.

Comment 13

[Stefan [:stefanh]]

Comment on attachment 403442 [details] [diff] [review]
Patch vC1.2 Fix review comments
[Checkin: Comment 19]

I've tried both patches and I think the pinstripe icons are better suited. They're not optional, but the problem with the global images is that they seem to look a bit smaller and more "plain" than the other arrows used to shift days. I have nothing against plain arrows, but it just feels that the cycler arrows should be larger. There's also no real hover:active icon since that one should ideally be darker.

Comment 14

[Philip Chee]

Comment on attachment 403442 [details] [diff] [review]
Patch vC1.2 Fix review comments
[Checkin: Comment 19]

> I've tried both patches and I think the pinstripe icons are better suited.
Since Stefanh likes this one better, requesting sr.

Comment 15

[[e-mail]]

Comment on attachment 403442 [details] [diff] [review]
Patch vC1.2 Fix review comments
[Checkin: Comment 19]

>+  padding: 0 !important;
>+  margin: 0 !important;
>+  border: none !important;
Bah, I forgot to ask whether these were... important ;-)

Comment 16

[Philip Chee]

Comment on attachment 403442 [details] [diff] [review]
Patch vC1.2 Fix review comments
[Checkin: Comment 19]

>>+  padding: 0 !important;
>>+  margin: 0 !important;
>>+  border: none !important;
> Bah, I forgot to ask whether these were... important ;-)
I was going to ask Stefan this as well, but I forgot too.

Comment 17

[Sivaram Kannan]

I tried applying this patch on my Debian machine with Seamonkey 21a1Pre, but that does not seems to work. Can some one confirm whether this had been tried with Linux and anything other than applying the patch needs to be done.

Comment 18

[Philip Chee]

This patch adds the cycler images to the Today pane panel and doesn't address any other UI problems. Also you need to have a recent nightly build of Lightning 1.0pre.

Comment 19

[Serge Gautherie (:sgautherie)]

Comment on attachment 403442 [details] [diff] [review]
Patch vC1.2 Fix review comments
[Checkin: Comment 19]


http://hg.mozilla.org/comm-central/rev/681e87a38edb

Comment 20

[Sivaram Kannan]

Got it working. It should have been working when I first compiled itself, but it just that the buttons are not visible. Only when I hover over the buttons, it is visible. Thanks a lot.

Comment 21

[Philip Chee]

> Got it working. It should have been working when I first compiled itself, but
> it just that the buttons are not visible. Only when I hover over the buttons,
> it is visible. Thanks a lot.

That should not be the case. They should always be visible. If you know how to use the DOM Inspector, you can use it to see what CSS file/rule is interfering with the rules in this patch.