 Hello, my name is Srimon Kwas and I'm a software engineer at Collabora Productivity. In this talk, I would like to present you the recent improvements in the JS Dialogues. I will split my presentation into two parts. In the first part, I will explain what the JS Dialogues is and also what we achieved in Collabora Online, thanks to that. In the second part, I will show you the recent development and improvements I did over the past year. We can describe JS Dialogues as a framework to share user interface components between the LibreOffice and Collabora Online. It allows us to improve both products at the same time. For example, when we add a new feature to the Collabora Online, we also add that to LibreOffice. The general idea is very simple. We take the desktop application user interface, we describe it in JSON format, then we send that JSON to the client web browser and we recreate the new interface using that description. Communication works in both directions, so when user does some input into controls, then the message is sent back to the server and processed by the original widgets. Because we send only the abstract description in our JSON messages, we can interpret that in many ways. So for example, for mobile users, we can prepare different user interfaces for the desktop ones. Initially, JS Dialogues were introduced to provide advanced editing options to the mobile Collabora Online. We reused for that the sidebar transformed to mobile-friendly user. From the technical point of view, it wasn't a perfect solution as it was using the full JSON for the whole sidebar. So every time we did an action, we had to receive a big file. Also we supported only the Synchronous mode, so we didn't know about any asynchronous event which could be present in the meantime between our requests. Also we needed to implement some complex widgets in JavaScript because it wasn't possible to send all the needed information inside the JSON. Later JS Dialogues were extended to notebook bar and Dialogues. Thanks to reusing the welding mechanism introduced by Kailan McNamara for GTK3, we were able to introduce the asynchronous events. And at that moment it was possible to receive information about actions user did on the widgets. On this slide you can see an example of welded widget reused in the Collabora Online. It was the style previous widget from the notebook bar which shows the currently used styles for paragraphs in Writer. Now we will take a look what was changed since the last conference. First I was focused on the optimization. To avoid sending the full JSON every time we do some actions, I prepared three different types of messages. First a full window update, it's used for the initial creation of Dialogues or some other component. It's sent only one time and later when we receive some updates from any widget, we use the second type, a single widget update. It sends only the updated widget content so we don't have to waste time on generating the JSON for the full dialogue. The last type of messages is action message which is used only for small updates inside one widget when it doesn't need to redraw everything. So for example when we have the icon view and we only change the selection, we send the action with actual position to select. Thanks to that optimization we reduced transfer size a lot and also now we receive faster updates. It was visible especially for the widgets where we draw something on the canvas like in icon views or for example the previews in the notebook bar. Now it's also possible to update some other widget when we are typing inside the input field. So it was also a big change in the user experience because we see the updates in real time, not only after we finish typing. Next optimization was introduced by using the shared queue for messages. Thanks to that we can reduce number of messages because we can remove few of them from the queue. For example when we receive the full update we don't want and we don't need all the previous messages so we can simply remove them. Another small update is lazy message generation. So in the queue we have only the information which widget was updated and what kind of update it was. But we generate JSON just before we send it. After I finished with optimizations I looked at missing widgets. One of them was icon view which is very useful to present a set of custom previews. For example font works. Originally in the font work dialogue canvas was used for presenting the previews but I decided to rework that to reuse icon view. Because it's 90-widget supported for example in GTK3 so it will be better to reuse the system widget for that. Also it helped with the online because we can have smaller updates not we don't have to draw the whole canvas every time we select some preview. Online previews in the notebook bar also were converted into icon view because it helped with the user experience when we have a lot of styles and we want to find a correct one in the long list. Previously we had to click many times in the buttons but now we can just scroll and see all the styles we have in the document. The most complex widget which was missing on the online site was the preview. It appears in many different dialogues and can have multiple modes of displaying the content. For example it can be a list view, it can be a preview with checkboxes or without, it can show notes on demand and also it supports drag and drop in some dialogues like for example the pivot table dialogue. We implemented all these different modes and thanks to that now we have many useful features converted to JS dialogues like auto filter pop-ups with a preview for selecting filters and also pivot table dialogue where we can compose a table using drag and drops between many triggers. When we finished with implementing increasing widgets for JS dialogues I switched the sidebar to use the JS dialogues so now we have native HTML controls for the sidebar and we can style it using the CSS. It also improves the user experience for example on tabs devices because previously we used the canvas on which we were drawing the images of the sidebar. Now the scrolling and also list boxes are handled by the browser. With sidebar I introduced to the JS dialogue support for drop-downs. Now in both toolboxes and also menu buttons we can open the drop-down with some complex content. Also I introduced new sidebar panel where we can edit the selected font work. JS dialogue now as a framework looks almost complete I think only few small less important widgets are missing. I think the next step is to switch all the dialogues in the online to use the JS dialogues instead of pixel based dialogues. That's all I have for today thank you very much for listening.