Please open this project on desktop in firefox browser only because react dialogs uses firefox platform CSS!

Convert XUL to HTML(React)

Project introduction:

Lightning has traditionally been using XUL for its user interface. To modernize, we would like to convert dialogs, tab content and other parts of the user interface to HTML. The new components should use web standards as much as possible, avoiding extensive use of third party libraries.

I have been using React and Redux for making dialogs. I think React is really a very good choice for rapidly making user interfaces. Redux is also used for state management in all dialogs except the very simple ones. CSS file for XUL dialogs have been modified to work with HTML.

You can check out my proposal, blogs, and wiki to get detailed overview of project.

Project status:

I have converted 5 dialogs into their React equivalent so far. I have also submitted patches for Calendar Properties Dialog and Calendar Print Dialog. The third patch for Calendar Alarm Dialog is on the way.

What is this webapp for:

The idea is to first create and test dialogs using this webapp and then integrate it into Thunderbird. Working on dialog separately outside Thunderbird helps in making dialogs faster. On this webapp, you can see how dialogs will look in Thunderbird on your OS, by opening dialog links given on sidebar in Firefox browser. There is also an Iframe Testing Ground where you can experiment with the state of dialogs and see how dialog's UI changes depending upon the state.

To see patches submitted on Bugzilla, you can click on the Bug buttons given on sidebar.

How to start:

If you are interested in working on this project then please read for setting up development environment locally. Also read the code and wiki to learn about the component's architecture. You can contact me(IRC nickname: arshad) or my mentor Philipp Kewisch(IRC nickname: fallen) on #calendar channel of Mozilla IRC Server for more.

React Dialogs 5
calendar properties dialog
UI Done State Added Complete Bug 1391466
Print Dialog
UI Done Redux Added Complete Bug 1393694
Calendar Alarm Dialog
UI Done Redux Added
Event Dialog
UI Done Redux Added
Task Dialog
UI Done Redux Added