This document tries to cover all the changes that may by needed to make add-ons compatible with Thunderbird 68. If you find stuff that is no longer working but is not yet on this list, check our communication channels.
The changes are grouped by category and are listed in the order we became aware of them.
A bunch of global variables available in some window scopes were removed. If you have used any of these, there are still available as the same names underneath Components.interfaces.
- nsMsgFolderFlags
nsIMsgCompDeliverMode
nsIMsgCompSendFormat
nsIMsgCompConvertible
nsIMsgCompType
nsIMsgCompFormat
nsIAbPreferMailFormat
nsIPlaintextEditorMail
nsISupportsString
mozISpellCheckingEngine
XBL is on death row. Many XBL bindings have been replaced or simply no longer exist. The remainder are being removed. This may result in slight behavior changes for some UI components.
With this query, you can see all the bugs related to de-XBL-ing Thunderbird, and see how the removal of each binding is handled.
{% hint style="info" %} If you have your own XBL bindings, you can convert them to custom elements. Here are some notes on the process of converting an XBL binding into a custom element. {% endhint %}
{% hint style="info" %} As part of the de-XBL effort, the usage of the nsIDOMDocumentXBL Interface has also been deprecated. This includes:
- getAnonymousElementByAttribute()
- getAnonymousNodes()
They have to be replaced by document.getElementById(), document.querySelectorAll() or similar methods. The documents these methods have been used with have probably changed dramatically. Check out searchfox.org to learn about the current layouts. {% endhint %}
Some XUL elements (or some of their attributes) no longer exist and must be replaced by an HTML element or some other XUL element. It does not matter, if you use these elements in a XUL file (as in overlay extensions) or create them via JavaScript (as in bootstrapped extensions).
In order to use HTML elements in a XUL file, you must load the HTML namespace into your overlay or dialog:
<dialog
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
The following list also includes deprecated elements, which could still be used but Thunderbird has already started to purge their usage. In that case you must update your overlay files which are overlaying such elements, otherwise your overlay will not be applied. Check SearchFox for the current state of the files you are overlaying.
{% hint style="info" %} The replacements listed here might work in subtly different ways. Check your functionality! {% endhint %}
Removed. Use
<html:input type="color">
Removed. Use
<html:progress max="100">
All <listbox>
related elements have been removed. Use instead. A <richlistbox>
does not support cells or columns, just one <richlistitem>
per row (which can contain multiple other elements like hbox
, vbox
, label
or image
elements)
Furthermore, a few dedicated listbox/richtlistbox
methods have been removed and can be replaced as follows:
listbox.appendItem(label, value)
:
let newNode = document.createXULElement("richlistitem");
// Store the value in the list item as before.
newNode.value = value;
let newLabel = document.createXULElement("label");
// The label is now stored in the value attribute of the label element.
newLabel.value = label;
newNode.appendChild(newLabel);
listbox.appendChild(newNode);
listbox.insertItemAt(index, label, value)
:
let newNode = document.createXULElement("richlistitem");
// See above example.
let refNode = listbox.getItemAtIndex(index);
refNode.parentNode.insertBefore(newNode, refNode);
listbox.removeItemAt(index)
:
listbox.getItemAtIndex(index).remove();
Removed. Use
<html:textarea>
All preference related XUL elements have been removed. If you have something like this in your add-on:
{% tabs %} {% tab title="preferences.xul" %}
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<?xml-stylesheet type="text/css" href="chrome://messenger/skin/preferences/preferences.css"?>
<!DOCTYPE prefwindow SYSTEM "chrome://path/to/locale.dtd">
<prefwindow
id="appPreferences"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<prefpane
id="pane1"
label="&title">
<preferences>
<preference
id="pref1"
name="extensions.nameOfAddon.pref1"
type="bool"/>
<preference
id="pref2"
name="extensions.nameOfAddon.pref2"
type="string"/>
</preferences>
<checkbox
id="checkbox1"
preference="pref1"
label="&checkbox1.label;"
accesskey="&checkbox1.accesskey;"/>
<textbox
id="textbox1"
preference="pref2"/>
</prefpane>
</prefwindow>
{% endtab %} {% endtabs %}
it must be replaced by a dialog
as follows:
{% tabs %} {% tab title="preferences.xul" %}
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<?xml-stylesheet type="text/css" href="chrome://messenger/skin/preferences/preferences.css"?>
<!DOCTYPE dialog SYSTEM "chrome://path/to/locale.dtd">
<dialog
id="appPreferences"
buttons="accept"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox>
<checkbox
id="checkbox1"
preference="extensions.nameOfAddon.pref1"
label="&checkbox1.label;"
accesskey="&checkbox1.accesskey;"/>
<textbox
id="textbox1"
preference="extensions.nameOfAddon.pref2"/>
</vbox>
<script
src="chrome://global/content/preferencesBindings.js"
type="application/javascript"/>
<script
src="chrome://path/to/preferences.js"
type="application/javascript"/>
</dialog>
{% endtab %} {% endtabs %}
Note that the DOCTYPE
changed and the preference
attribute now contains the full ID of the preference. If you used more than one prefpane
you need to rework the UI into tabs.
Furthermore, note the included JavaScript file preferencesBindings.js at the bottom, which is mandatory to recreate the functionality of the preference
attribute. It is also mandatory, that you include a custom JavaScript file (aspreferences.js
in the above example) afterwards, which defines the types of the used preferences (which was formerly done inside the preferences
tag). The file can be as short as this:
{% tabs %} {% tab title="preferences.js" %}
Preferences.addAll([
{ id: "extensions.nameOfAddon.pref1", type: "bool" },
{ id: "extensions.nameOfAddon.pref2", type: "string" },
{ id: "extensions.nameOfAddon.pref3", type: "int" },
]);
{% endtab %} {% endtabs %}
Per default, all preferences will be saved instantly after they have been changed. If you want to postpone saving until the user clicks the OK button, add a type
attribute and a cancel button to the dialog:
{% tabs %} {% tab title="preferences.xul" %}
<dialog
id="appPreferences"
type="child"
buttons="accept, cancel"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
{% endtab %} {% endtabs %}
{% hint style="info" %}
If you are doing or plan to do any advanced stuff with the preferences in JavaScript, like validating user entered values and such, it is recommended to abandon the usage of the preference
attribute (and preferencesBindings.js
) and directly use the preferences service instead.
{% endhint %}
Both elements have been removed. To load and access your own string property files, include the following in your JavaScript:
let bundle = Services.strings.createBundle("chrome://path/to/your/string.property");
let stringProp = bundle.GetStringFromName("...");
Both elements are deprecated and its usage in Thunderbird is removed. They can be replaced by hbox
elements with an appropriate class
identifier:
<hbox class="statusbar">
<label class="statusbarpanel"
context="..."
popup="..."
value="label" />
</hbox>
You may actually use other elements besides hbox
as a replacement for the statusbarpanel
, like label
or image
.
The XUL element menulist
no longer supports the editable
attribute. However, editable menulists have been re-implemented as custom elements. To be able to use it, you need some extra files to be linked from your document:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/global.css"?>
<!-- New stylesheet needed: -->
<?xml-stylesheet type="text/css" href="chrome://messenger/skin/menulist.css"?>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- New script needed: -->
<script type="application/javascript" src="chrome://messenger/content/customElements.js"/>
<!-- Note the additional "is" attribute: -->
<menulist is="menulist-editable" editable="true">
<menupopup>
<menuitem value="foo" label="foo"/>
<menuitem value="bar" label="bar"/>
</menupopup>
</menulist>
</page>
An editable menulist can also be created via JavaScript:
let menulist = document.createXULElement("menulist", { is : "menulist-editable" });
menulist.setAttribute("is", "menulist-editable");
menulist.setAttribute("editable", "true");
Even though the menupopup
element is defined as a direct child of the menulist
element in the above example, it cannot be accessed by
menuListElement.firstChild
anymore. You may assign its own ID to the menupop
element, or get it by
menuListElement.getElementsByTagName("menupopup")
You may use the inspector of the developer tools to see the full DOM structure of the menulist
element.
These two do not display as before. You now need to include the following css file:
<?xml-stylesheet type="text/css" href="chrome://messenger/skin/messenger.css"?>
While the groupbox
tag continues to work, the caption
tag has been removed. Use the following now:
<groupbox>
<hbox class="groupbox-title">
<label class="header">Your caption label</label>
</hbox>
Your groupbox body content.
</groupbox>
{% hint style="info" %} In the current Thunderbird 68 Beta, this still looks a bit wrong, but will be fixed in Beta 3. More details can be found in bug 1559964. {% endhint %}
Removed. Currently there is no working replacement part of Thunderbird itself, but Lightning has its own datetimepicker
, which can be used.
<datetimepicker id="myDateTimePicker" />
Its value is a JavaScript Date
object:
document.getElementById("myDateTimePicker").value = new Date('December 17, 1995 03:24:00');
To be able to use the datetimepicker
, the following CSS files need to be included:
<?xml-stylesheet type="text/css" href="chrome://calendar-common/skin/widgets/minimonth.css"?>
<?xml-stylesheet type="text/css" href="chrome://calendar/content/widgets/calendar-widget-bindings.css"?>
<?xml-stylesheet type="text/css" href="chrome://lightning-common/skin/datetimepickers.css"?>
The following JavaScript files also need to be included:
<script src="chrome://calendar/content/calendar-ui-utils.js"/>
<script src="chrome://messenger/content/customElements.js"/>
<script src="chrome://calendar/content/datetimepickers/datetimepickers.js"/>
If you do not want to be dependent on Lightning being installed, you need to include the above files with your add-on.
Removed. Thunderbird now has fixed build in notification boxes, where notifications can be added. The following list shows how to access some of them:
- Main window:
let notifyBox = specialTabs.msgNotificationBar;
- Message composer window:
let notifyBox = gNotification.notificationbox;
- Below the recipient list in the message composer window:
let notifyBox = gMessageNotificationBar.msgNotificationBar;
- Most calendar dialogs:
let notifyBox = gNotification.notificationbox;
{% hint style="warning" %} Since you no longer "own" notification boxes, you should not clear them by calling
notifyBox.removeAllNotifications();
as that would remove notifications added by others. You can get a specific notification by calling
let notification = notifyBox.getNotificationWithValue(value);
and remove only that via
notificationbox.removeNotification(notification);
{% endhint %}
You can still add notification boxes wherever you want, if you do not want to use the build in notification boxes (or if there is none). More details can be found here.
Removed. Use:
<textbox is="search-textbox" class="searchBox">
The element mail-multi-emailHeaderField
has been renamed into mail-multi-emailheaderfield
(no camelCase anymore).
See e.g. https://searchfox.org/comm-esr68/source/mail/base/content/msgHdrView.inc.xul#282
<mail-multi-emailheaderfield id="expandedfromBox" flex="1"/>
Each treecol
can be either shown or hidden via the column picker. Up to TB68 the column picker closed after a column had been selected/toggled. By adding closemenu="none"
to a treecol
, the column picker stays open after the display state of associated treecol
has been toggled.
Previously, if you had a <dialog>
and you wanted to respond to the buttons being pressed, you’d have something like this:
<dialog buttons="accept,cancel"
ondialogaccept="return onAccept();">
<!-- dialog contents -->
</dialog>
The event handler would return true if the dialog should close, or false to prevent closing. This no longer works. Instead, add the event handlers in JavaScript:
document.addEventListener("dialogaccept", function(event) {
event.preventDefault(); // Prevent the dialog closing.
});
To prevent closing of the dialog, call preventDefault()
. A return value is not needed.
This is valid for ondialogaccept
, ondialogextra1
, ondialogextra2
and ondialogcancel
.
The section about <dialog>
events also applies to all onwizard…
events on <wizard>
, and onpage…
events on <wizardpage>
.
As JavaScript itself evolves, browser engines will change accordingly. The following changes represent changes that affect JavaScript extension developers.
The nonstandard generic string methods have been deprecated and removed in the Geko engine and therefore Thunderbird 68+. A deprecation exception is issued if any methods are used. The updated paradigm uses String instance methods allowing for the use on any object.
Deprecated Generics Syntax:
var strWithPadding = " Hello There ";
String.trim(strWithPadding);
Instance Method Replacement:
var strWithPadding = " Hello There ";
strWithPadding.trim();
The following String methods are affected by the change:
contains(), substring(), toLowerCase(), toUpperCase(), charAt(),
charCodeAt(), indexOf(), lastIndexOf(), startsWith(), endsWith(),
trim(), trimLeft(), trimRight(), toLocaleLowerCase(), normalize(),
toLocaleUpperCase(), localeCompare(), match(), search(), slice(),
replace(), split(), substr(), concat(), localeCompare()
(All other String methods use the instance paradigm already)
A number of JavaScript modules have been renamed with the .jsm
extension. Most notably:
mailServices.js
has been renamed toMailServices.jsm
. This change was originally backwards-compatible with a deprecation warning, but the changes to module importing (see below) made that pointless and the old file has now been removed completely.MailUtils.js
is nowMailUtils.jsm
.MailUtils.getFolderForUri
was renamed toMailUtils.getExistingFolder
.
In Thunderbird 67, a major backwards-incompatible change was made to importing JavaScript modules. Where once you used any of these:
Components.utils.import("resource://foo/modules/Foo.jsm");
// or…
Cu.import("resource://foo/modules/Foo.jsm");
// or…
ChromeUtils.defineModuleGetter(this, "Foo", "resource://foo/modules/Foo.jsm");
Or the two-argument variation:
var { Foo } = Cu.import("resource://foo/modules/Foo.jsm", null);
// or…
var scope = {}; Cu.import("resource://foo/modules/Foo.jsm", scope); // scope.Foo…
You should now do this:
var { Foo } = ChromeUtils.import("resource://foo/modules/Foo.jsm");
// or…
var scope = ChromeUtils.import("resource://foo/modules/Foo.jsm"); // scope.Foo…
ChromeUtils.import
is a replacement for Components.utils.import
(which was also changed in this way). Note that no second argument is supplied. The returned object is a dictionary of only the objects listed in EXPORTED_SYMBOLS
.
The function to retrieve passwords has lost its first parameter. Instead of
var logins = Services.logins.findLogins({}, origin, formOrigin, realm);
call it as
var logins = Services.logins.findLogins(origin, formOrigin, realm);
Removed, use:
Services.xulStore.persist(node, attribute);
Note: document.persist()
used the ID attribute whereas xulStore.persist()
uses the actual DOM node. More details in bug 1476678.
All methods of the AddonManager API now return a Promise instead of executing a callback. Instead of calling it as
AddonManager.getAddonByID(addon_id, callback_function)
you need to call it as
AddonManager.getAddonByID(addon_id).then(callback_function)
The defaultAccount
member can (since TB 65) have a null
value - if for some reason it doesn't have, or can't work out, the default account.
Hence you need to null-check it, and possibly handle not having an account at all (if in no other way than by an error message).
Removed. Use
Services.strings.createBundle("chrome://...")
The onDataAvailable
method lost its context
argument. This was removed in bug 1525319 which breaks the API.
To be backward compatible you need to probe the parameters. In case the third parameter is an nsIInputStream it is the old API. If the second one is an input stream it is the new API.
onDataAvailable(...args) {
// The old API passes the stream as third parameter.
if (args[2] instanceof Ci.nsIInputStream)
return this.onOldDataAvailableCalled(args[2], args[3], args[4]);
// The new API uses the second parameter.
if (args[1] instanceof Ci.nsIInputStream)
return this.onNewDataAvailableCalled(args[1], args[2], args[3]);
throw new Error("Unknown signature for nsIStreamListener.onDataAvailable()");
}
The onStartRequest
and onStopRequest
methods also no longer have a context
argument, which could be detected in a similar way.
The obsolete method newChannel
was removed and newChannel2
was renamed to newChannel
. (Bug 1528971.)
As newChannel
has been unused for a long time it should be safe to just replace the old newChannel
implementation with the newChannel2
and forward calls from newChannel2
.
// Change the signature to the new one...
// ... you'll need to add the loadInfo parameter.
//
// Note loadInfo may be null in Thunderbird 60.
newChannel(URI, loadInfo) {
// Do your logic here
}
// Keep the old method as it will be needed for backward compatibility...
// ... and forward the request to the new method.
newChannel2(URI, loadInfo) {
return this.newChannel(URI, loadInfo);
}
The method convertFromByteArray
has been removed. The new preferred way to deal with unicode is through the TextEncoder
and TextDecoder
classes.
To convert byte arrays to different charsets, use
let charset = 'utf-8';
let encodedByteArray = [ /* ... */ ];
let decoder = new TextDecoder(charset); // charset can be omitted, default is utf-8
let decodedString = decoder.decode(new Uint8Array(encodedByteArray));
Removed. Use Element
, Node
, etc. instead, which are now available in all scopes.
These no longer need to be created by Cc[...].createInstance(Ci....)
, but simply via the new
keyword:
new DOMParser();
new XMLSerializer();
new XMLHttpRequest();
They should be available in all scopes now. If not, the following is needed:
Cu.importGlobalProperties(["DOMParser"]);
Cu.importGlobalProperties(["XMLSerializer"]);
Cu.importGlobalProperties(["XMLHttpRequest"]);
Trees have changed a lot. The tree
object is now a XULTreeElement
. It has lost thetreeBoxObject
property, because the nsITreeBoxObject
has been removed. Most of its methods can now be accessed directly through the tree
object. For example:
// The treeBoxObject has been removed.
// tree.treeBoxObject.getLastVisibleRow();
tree.getLastVisibleRow();
Furthermore, nsITreeColumn
has been replaced by the TreeColumn
object. Even though their interfaces look the same, they could behave differently. Check your implementation, as this affects almost all methods of nsITreeView
.
Some noteworthy changes:
- tree.getCellAt() now returns a TreeCellInfo.
- If a method requires a
TreeColumn
parameter, a simple{ id: columnName }
object no longer works. Get a properTreeColumn
object viatree.columns.getNamedColumn(columnName)
. - Trees no longer support selecting individual cells. The
TreeColumn
object no longer has aselectable
attribute andnsITreeView
has lost itsisSelectable()
method.
In general, check searchfox.com to see the current definitions of tree related implementations:
Removed. Use
ChromeUtils.generateQI()
Renamed to
Services.io.newChannelFromURI()
A long time ago newChannelFromURI2() has been added as an alternative to newChannelFromURI(), which as become deprecated by now. With ESR68 the old name is used again.