Adding a toolbar button to the compose window in Thunderbird

Thunderbird Add-ons
#1

Hello all,

I am porting an extension for Thunderbird 68, Highlighter.
I need to add a dropdown button to the compose window, with just 6 text entries.

I have successfully added the button, and a HTML inside a popup, but it does not look at all like the other toolbar buttons.

Can someone post the code to put in the HTML popup, please?

I have this in my manifest:

“compose_action”: {
“default_area”: “formattoolbar”,
“default_popup”: “popup.html”,
“default_title”: “Highlight”,
“default_icon”: “img/edit.svg”
},

Thanks for your help,
Andre Rodier

#2

You seem to be posing three problems?

  1. The appearance of the toolbar button is different to the built in ones. Presumably you mean design features out of your control, so not your choice of icon?
  2. You need HTML to put in the popup. Sadly you’ve left out what this HTML should do and look like when rendered.
  3. You offered us an excerpt of your manifest, which I take as problem, since you think there’s something wrong with it and you expect a change to it may solve something, either a third issue or one of the two above.
#3

OK, let’s try like this:

Where can I find an example of a popup menu, with a basic CSS and a basic Hello world.

I just need an HTML and a CSS sample, nothing major!

Screenshot%20from%202019-11-02%2014-04-01|690x429

Thanks for your help.

Thanks.

#4

Your screenshot seems fine to me. As far as I’m aware there’s no real “baseline” that you can rely on here, you can design it however you want.

You can try to mimic the native dropdowns (which I think is what you’re asking for?) however you are a “panel” and not a dropdown menu. And since you’re in an html context you only get parts of what it takes to look like a native dropdown, like some of the colors and fonts the system uses. See for example https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#System_Colors or https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

Plus you’ll always have an arrow pointing at your button to make it very visually apparent that this is not a native menu list.

Much more importantly, it will work very differently from an accessibility standpoint, since you’re an HTML context, so you get HTML keyboard navigation and accessibility features etc. and not the native menu features.

#5

Thanks, I will have a look.
André

#6

Ah right, forgot to link the font one: