Not so new addon to compact header pane in Thunderbird

[jmozmoz]

At the moment I am only working on the flat buttons. You can download a pre version. The windows version should work, the Linux version has not correctly sized buttons, there is no Mac OS X version at the moment (as I cannot test it there will probably be no working OS X version).

Whew (while breathing a huge sigh of relief), 1.1.0pre doesn't break my support for 1.0.0. Thank you for the file.

Update:
Uh oh, spoke too soon. Looks like the option for flat buttons breaks things all over again. Oh well.

Do you know, what makes it so complicated? Is there a better way, I should organize the css classes for the add-on? I know that this part of the add-on is not very elegant

[Stomp]

There's one thing, that still bothers me. When I open a collapsed pane, the from field starts on the left and then jumps to the right. Please fix it.

Should be fixed in version 1.0.1.

Thanks, a lot.

[cliffzilla]

The shot is from the standard header view.
Yes I removed all the buttons. I changed the color of the Header box (and a lot of other things) using userChrome.css.
If you want me to test something (changing the date location or removing it from the right) let me know.

This is from OSX.

Anyway to remove that block above the date? Anyway to remove the date? I'm still confused on why the date was moved to the right in the first place. It just kind of sits there and doesn't even line up with the baseline of the type on the left. I'd rather get rid of it than have it look like a mistake.

Is the screenshot from the expanded (standard) or the compact (2 lines) header view? The lighter area is where the buttons go. Did you remove all? Using the other OSs the header button toolbar space is only colored differently if the customization dialog is visible. Have you installed a nonstandard theme?

As I do not have access to an OS X running computer I cannot test it. So I need some (your?) help.

I left the date on the right side as it is the standard place in TB 3.0.

[jlcenter]

One problem I'm having on Linux (Ubuntu 9.04) is in the 2 line mode, a long From/To line will shove the buttons to the right. This often puts the delete button past the edge of the window, hiding it behind the Lightning Events window. Any idea why this happens & how it could be fixed?

Thanks for a great addon!

-John

[CatThief]

Update:
Uh oh, spoke too soon. Looks like the option for flat buttons breaks things all over again. Oh well.

Do you know, what makes it so complicated? Is there a better way, I should organize the css classes for the add-on? I know that this part of the add-on is not very elegant

If a theme contains the exact code as the default theme for the headers, buttons, and other global elements as well, then there are no issues. Customized styling in themes is where support for extensions becomes complicated. With CompactHeader, virtually everything involving the buttons requires specialized code to override the theme defaults. I really like your extension and I want to include support for it because I know it will be very popular with a lot of users, but the amount of time required to apply the code has forced me to abandon support.

Here's what I would love to see if it is possible:
The extension would remove the existing #header-view-toolbar and replace it with one that has an ID of it's own, along with unique IDs and classes for the elements within the toolbar, then unique styling would be applied for things like button (including those for menus), button-box, and everything else that relates to appearance (border, background, hover, active, disabled, focus, etc.), very much like what you are doing now in the 1.1.0pre version for flat buttons. If you include -moz-appearance-none, you can style anything you like and at the same time enable cross-platform compatibility. Basically the extension would not even be involved with a theme's styling or be dependent on system styling, but instead use it's own styling based on its own unique IDs and classes.

It is a simple enough process for a theme to replace images by simply defining them by name and location. And if conflicts happen to arise with anything global, an exclusion can simply be added similar to using button:not(.some-unique-class)

I know this is a lot to absorb, and you have already put in an incredible amount of time on development, but hopefully at the very least you will give this some thought.

Thank you for taking the time to look this over.

-------------------------------------------
EDIT:
Another thought is perhaps you could assign a unique class to #header-view-toolbar. The class could be used as an exclusion inside the theme's messageHeader.css and will force the theme to use global defaults for buttons when when CompactHeader is installed. This would work well for themes that only apply specialized code to the headers and not to global/button.css. It wouldn't require much work on your end and it would provide us themers with better extension support options.

2nd EDIT:
I applied some modifications to the extension to test my theories. Unfortunately things didn't work as well as I had hoped.

Keep up the good work, jmozmoz!

[jmozmoz]

You could get rid of the date field by disabling it in your userChrome.css. Probably something like

Code: Select all

#dateValueBox {
  display: none
}

The shot is from the standard header view.
Yes I removed all the buttons. I changed the color of the Header box (and a lot of other things) using userChrome.css.
If you want me to test something (changing the date location or removing it from the right) let me know.

[cliffzilla]

Hey that works! Thanks. I still have the gray box, but at least the date isn't aimlessly hanging out over there.

[jmozmoz]

You should get rid of the grey box with this:

Code: Select all

#header-view-toolbox {
  display: none;
}

[cliffzilla]

Excellent. Much appreciated!

[jmozmoz]

At the moment I "clone" the buttons from the main toolbar to be used in the header-view-toolbox. I could easily change the ids of the cloned buttons. But then I also had to clone css for the main toolbar buttons (as e.g. the icons are set not via classes but directly by the id in some css files). Is there a way to "clone" the computed css styles to a newly defined class using javascript?

It wouldn't be a problem to add a customize-header-toolbar class to all buttons in the header-view-toolbox. I could also automatically add an individual class to each button in the header-view-toolbox, i.g. the class header-toolbox-button-forward for the button #button-forward. Could you use these classes to overwrite the style settings?

Here's what I would love to see if it is possible:
The extension would remove the existing #header-view-toolbar and replace it with one that has an ID of it's own, along with unique IDs and classes for the elements within the toolbar, then unique styling would be applied for things like button (including those for menus), button-box, and everything else that relates to appearance (border, background, hover, active, disabled, focus, etc.), very much like what you are doing now in the 1.1.0pre version for flat buttons. If you include -moz-appearance-none, you can style anything you like and at the same time enable cross-platform compatibility. Basically the extension would not even be involved with a theme's styling or be dependent on system styling, but instead use it's own styling based on its own unique IDs and classes.

It is a simple enough process for a theme to replace images by simply defining them by name and location. And if conflicts happen to arise with anything global, an exclusion can simply be added similar to using button:not(.some-unique-class)

I know this is a lot to absorb, and you have already put in an incredible amount of time on development, but hopefully at the very least you will give this some thought.

Thank you for taking the time to look this over.

-------------------------------------------
EDIT:
Another thought is perhaps you could assign a unique class to #header-view-toolbar. The class could be used as an exclusion inside the theme's messageHeader.css and will force the theme to use global defaults for buttons when when CompactHeader is installed. This would work well for themes that only apply specialized code to the headers and not to global/button.css. It wouldn't require much work on your end and it would provide us themers with better extension support options.

2nd EDIT:
I applied some modifications to the extension to test my theories. Unfortunately things didn't work as well as I had hoped.

Keep up the good work, jmozmoz!

[dnpyles]

I'm having a problem using this addon with TB 3.0RC1. Clicking on the minus icon reduces the header like I would expect, but when I click the plus icon to toggle the header size, the header disappears completely. Does anyone else have this problem?

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.1.23) Gecko/20090812 Thunderbird/2.0.0.23 Mnenhy/0.7.6.0

[CatThief]

At the moment I "clone" the buttons from the main toolbar to be used in the header-view-toolbox. I could easily change the ids of the cloned buttons. But then I also had to clone css for the main toolbar buttons (as e.g. the icons are set not via classes but directly by the id in some css files). Is there a way to "clone" the computed css styles to a newly defined class using javascript?

I only know enough javascript to do damage but I do know that if styles are defined inside js, nothing can be changed with a theme.

It wouldn't be a problem to add a customize-header-toolbar class to all buttons in the header-view-toolbox. I could also automatically add an individual class to each button in the header-view-toolbox, i.g. the class header-toolbox-button-forward for the button #button-forward. Could you use these classes to overwrite the style settings?

I think using a customize-header-toolbar class would do the trick if it was attached to the header-view-toolbar. I don't think it would be necessary to give each button a class of its own. If you do decide to do that, though, it might be easier to assign a class that would group buttons according to type (buttons without menus vs toolbarbutton-menubutton-button vs menu-button). Those classes could be used to style the appearance, while their IDs would be used to apply their images.

I really hate to see you go through all this trouble. On my test sample I ran into some issues, but I admit I didn't spend a lot of time with it since I had to boot back and forth a lot between Windows and Linux to compare the results.

[neandr]

Just posted this to news://news.mozilla.com/mozilla.dev.apps.thunderbird:

Just downloaded TB3rc2 and found using the F8 to switch the message pane doesn't work right after startup of TB3. The same was already with TB3rc1.
Just opening the main menu with 'View' without any further action with the menu pop-up will fix the situation. Any further use of F8 will toggle the pane.
Note: I have installed the 'Compact header' xpi version 1.0.1.
Günter

on: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5) Gecko/20091130 Thunderbird/3.0

[jmozmoz]

I'm having a problem using this addon with TB 3.0RC1. Clicking on the minus icon reduces the header like I would expect, but when I click the plus icon to toggle the header size, the header disappears completely. Does anyone else have this problem?

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.1.23) Gecko/20090812 Thunderbird/2.0.0.23 Mnenhy/0.7.6.0

Do you see any error messages in the error console? I cannot reproduce this. Have you installed any other add-ons?

[jmozmoz]

Just posted this to news://news.mozilla.com/mozilla.dev.apps.thunderbird:

Just downloaded TB3rc2 and found using the F8 to switch the message pane doesn't work right after startup of TB3. The same was already with TB3rc1.
Just opening the main menu with 'View' without any further action with the menu pop-up will fix the situation. Any further use of F8 will toggle the pane.
Note: I have installed the 'Compact header' xpi version 1.0.1.
Günter

on: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5) Gecko/20091130 Thunderbird/3.0

I see the same problem, but also with CompactHeader not installed. So it seems to be a bug in TB itself. Have you checked bugzilla? If this has not been reported you should file a bug there.