Home
This project is supposed to start the modernisation of Thunderbird. Thunderbird has been using XUL(pronounced ZOOL commonly) for it UI, which is an old technology that was able to make UI rapidly. But now modern libraries and frameworks like React, Vue, Web Components etc. can be used to make such UI even faster. Firefox which is internally used by Thunderbird was also using XUL but it has started to migrate to HTML. Since Firefox and Thunderbird team are separate, Thunderbird has been lagging on technology modernization.
The goal of this project is to convert lightning(calendar add-on for TB) dialogs into equivalent React Components. For more project info, check my proposal.
Lightning is a pretty small project in comparison to whole Thunderbird. If we are able to convert it then it can be used as a guide path for converting the rest of Thunderbird.
Project mentor Philipp Kewisch first choice was Web Components but due to its unavailability in Mozilla Platform, we decided to go for React. React.js is very good for making reusable web components and it is quite efficient as well.
TB has not been using Babel or other modern build tools for providing modern features to project so we can only use JS features that are supported by Firefox Browser. JSX, file imports, and bundling are not supported at the moment, although one can compile code using JSX and other features into vanilla js files and then use it in Thunderbird. We are planning to add some modern build process very soon to support all these features.
Please check out README.md and feel free to open an issue if you get stuck.
Most of the documentation is in form of inline comments in code files. Below are some pages which give an abstract overview of dialogs converted so far.
For CSS, we have divided the css difference into respective OS/Platform folder. Most of the CSS code might be same as CSS files that are already present in Thunderbird project but due to differences between HTML and XUL, it was necessary to create a separate theme structure.
Some XUL tags aren't supported in html5 and html5 also supports attribute minimization which sometimes results in some drastic style changes with older styles. Firefox Toolkit themes is the source dir for all the toolkit browser styles and Calendar CSS is specifically related to lightning skins.
Components that lie in this global folder are the components that can be used in any dialogs. They are globally reusable. But the components that lie in respective dialog folder in pages are only dialog specific component. The difference between component in container and component folder is that former uses redux state while later are just presentational components.
Arshad Khan
Site | Github | Facebook | Twitter | LinkedIn | Medium | E-Mail