 Native GTK UI. My name is Quela McMara and I've done a number of these over the last couple of years but these are, this is the update. So the idea is to use the native GTK widgets for the GTK port of LibreOffice instead of using the traditional VCL widgets rendered to look like GTK widgets. So I'll just run down what's native and in what version that became native. The file dialogue has been native for a very, very long time. The one most recent native thing after that then is native tooltips. After native tooltips all in 6.0 we had native popovers which we will see in calc and you see them in the slide pane of Impress as well and after that as well bootstrapping on the Unity menu integration we reused that to feed native GTK menu bar and menus as well all native in 6.0. The slide transitions are all the traditional and new OpenGL slide transitions hosted in a native GTK GL window. The requirements there are that I think it's the core profile is the only thing that's supported there so there was a number of modifications to the older OpenGL transitions to get them to work within that core profile. So all of these nice new transitions that I think are mostly sponsored by a collaborate that work here worked out of the box and it was the very, very old ones including the really, really cheesy slide transition that actually caused the most difficulty because they were so old that they wouldn't work in the supported core profiles. In 6.0.1 then what we brought online was the native warning dialogue so that was a pretty big but simple change just to change all of the message dialogues and one go over to launch native dialogue and then we have that. The small dialogue here the insert break dialogue is one of the poor little unfortunate dialogues that always gets experimented on because it's small and it's simple and that was converted in 6.1 as well. What we get here as well we start seeing is that we get the native button ordering of okay and the far right followed by cancel and the left and then help on the far left after that. 6.1 then also had this is another warning dialogue but it's a demonstration of a warning dialogue that contains extra widgets inside it as well so this is in the PDF export if it warns about things it lists what things are warned in or just to show that the warning dialogues can host other widgets within them as well. Moving on to 6.2 that's the kind of amount of things that were converted at this stage. The dialogue controller is each simple dialogue that just contains one single pane shall we say is a generic dialogue so a generic dialogue controller talking 180 dialogues and all of those multi tab page dialogues it's impossible to convert all of them in one go so what you have to do here is come up with a scheme where a tab page can live inside a new native GTK dialogue and live within the existing VCL dialogues as well so you convert them one at a time so you have to have some kind of a incremental process there so you get a hundred tab pages converted though you might not see any of them in the native dialogue as of yet but at that stage then there's 41 SFX tab dialogues which are the multi tab dialogues. Back in 6.2 we had well I got the ones that I was most interested in converted over to native dialogues the former character former paragraph former page those those big headline ones yeah so there's former character a multi tab dialogue each tab is able to exist in a native dialogue in a non-native dialogue in this case all of them are native when all the tabs are native then the dialogue can become native and we have here a native GTK dialogue which have the bottom then is a preview widget that's implemented in GTK site a GTK drawing area and then all our existing preview stuff is able to render an output device and the output device is connected to the drawing area so you can draw all of those old previews and classic dialogues and they'll appear in a a welded dialogue such as this one of the things we discussed last year was the difficulties of those multi tab dialogues when there's so many tabs that they don't fit on one line and what to do about that so it's most obvious in themes like this one where the tabs are quite large and there's a large amount of space around them and the font is large so the tabs are huge so the available built-in stuff in the GTK dialogues for our GTK notebooks for this is that once you get beyond a certain point you get little scroll arrows and the left and right you can scroll through what tabs are available to display all the multiple tabs a small section at a time along the top there's a lot of them that's attempt one should we say the default approach the problem there of course you can't see all the tabs at the same time this is a lot of a push back there saying that they want to see all of them number two approach then is that if you get which is along the the H the HIG standards for for GNOME if I recall quickly you said if you have more than eight tabs along the top that you put them down the left inside instead so experiment with that for a while but while in the Adwaita team there you can only fit about five or six things in the top in other themes you could fit maybe 10 or 15 so now you have a lot of pushback saying you know you could have fitted all of those tabs at the top why didn't you so try that approach put all the tabs along the top if they fit but if you get to a certain point where the dialogue begins to grow wide give up on that and put them down the left inside again problem there then is that once you get to a certain number of entries down the left inside they don't fit either so you get the same problem that you can see all the tabs at the same time and there's significant pushback so then we go ahead and we try to do something like we have existently we have two layers of tabs and that way then you get two notebooks put one above the other and you get this double-decker like appearance and catch with that though is that in the GTK notebook there has to be at least one active tab so if you put two notebooks together that are pretending to be one notebook you will have an active tab in your upper one as well as your lower one all right so there's a couple things I've tried there back in the time things were getting a little bit ridiculous at this point you're trying to remove that active tab tried to make it look visually like it's not there bunch of approaches there nothing really properly works so nothing works so they say maybe we'll try and pretend that an active tab is there for a reason you end up with something like this you have your two layers of tabs and you have this additional tab there that it doesn't do anything at all it just looks a bit weird but you know if you if you click on it it swaps the orders of the tabs it does something so try and pretend that it's there for some constructive constructive purpose but yeah nobody was buying that I came up with that's that's that's that discussion again now you have all the tabs for people want them but nobody likes that little indicator tab because it doesn't do anything at all so what we have now is that indicator tab is actually still there it still exists but it's been themed into invisibility it's been themed to have no existence whatsoever no wish no height no background no foreground it exists for the purpose of having an active tab but it doesn't exist and when you tab through the tabs it skips this invisible not their tab so that gives you what people want us which was pretty much the status quo except that it's now native and you can do all the other existing native things and you can do all the team things and you can you can curse or true it and it all works perfectly well and the magic extra tab is gone so yeah so now you have your your native GTK dialogues but with double decor support so that was the crisis last year with GTK notebooks that was GTK 2 GTK 3 and the number of generic dialogues controllers has expanded gigantically number tab pages expanded a lot as well and this big tab controller dialogues I think is in 6 3 it was nearly complete but not quite so that's 6 3 which has gone out the door recently enough now included in 6 3 is the calc range dialogues the way they work is they start off fully expanded on the left side like that they have a little button and then the shrinks them down and when they shrink the the edit box and the button remain visible everything else is hidden and all remains visible is the two widgets there and the your container ancestor the dialogue then shrinks down at that point on the left hand side it's a model dialogue once shrunk down or actually once you focus in the edit area it becomes a modulus dialogue and you can go and you can select a range of cells in calc and then when you let go of the mouse it pops back up and it's a model again so they change modality depending on where your focus is there's a lot of them there's a really huge amount of them in calc so before the ability to do that there was like it maybe like 50 60 calc dialogues once you implement that then you have so many statistics dialogues and sampling dialogues and those loads of them like that at this stage then you have about two windows that are like this contour editor there are basically full-blown applications they have a status bar they have a tool bar and the interact totally and you have here as a native gtk toolbar native gtk status bar and again this drawing area which then all the existing logic that exists for the contour editor is pretty much unchanged so it uses the VCL APIs and there's a little intermediate widget that manages that so where it's traditionally the whole top level window is your the window that gives you all the events and transposes them to the VCL ones that same logic now exists just at a smaller widget level so you can put what used to be the top level entire window logic down as a as a widget level logic so you can host those widgets within an otherwise native dialogue what we have now in yes just in the border of 6364 is the edit engine that's where we have the the edit engine inside a widget so here we have this is the calc one header photo editing think what feels into them and you can select them you can change the color of regions and things like that so that's pretty complicated affair the rendering here is backing on to Arman's work to be able to host edit engines within the drawing layer infrastructure has been reused to do the exact same thing within the native widget infrastructure so that's pretty pretty cool there the same one is used in the spellchecker as well I think in 64 or 63 there's an outstanding issue with accessibility but I have a back port for that in Garrett so that layer of patches and garages to give accessibility support to edit engines within widgets this is the pivot table and for the pivot table you have to support drag and drop between elements so this is an example of that and this works perfectly while this is a snapshot in time of actually dragging that three from the available fields to the raw fields highlights the destination widget caught their flight and the dragon the case so there's a dragon drag and drop working in welded widgets as well welded dialogues yeah this is very new in 6.4 this is the wizards also I've been working on for the last week or two this is now working on master for the selected database wizard and the mail merge wizard and a few other ones as quite a few other ones in forms as well and there was one outstanding one that I'm working on which is the copy tables between databases one that was mentioned in the database talk yesterday the the logic for going forward and back is the existing logic we already have so if any of those cases where we have for people were going back and it was very strange things going on they'll continue to go on so it spoke for both compatible for a far and back also noon six at four color does not hear so I'll steal his thunder on this one for six four we have a working color emojis as well I'm pretty sure that the existence of emojis will be recorded as directly as the fall of civilization but nevertheless here they are working they're interesting in the sense that they nearly always require more than one utf-16 point to describe them so we find bugs in our input in the engine where it says the underlying that needs to be put underneath that the e in the cat there it says it's a it's too too it needs to be led to two but even e and then you two utf-16 blocks and then if you put your line underneath the e and the first half of the cat then the two parts of the cat are split when they're rendered so they don't combine together to give you a catch you get two random lifts so it demonstrates interesting parts of the input engine and our utf-16 being a difficulty there and the other part of getting that to work is the font config fallback so that when you get this block that this emoji code point and your font is Times New Roman that it will actually go off and find an emoji font to render it and not attempt to render it in some font that is close to Times New Roman because these emojis do exist in a number of fonts but people expect them in their preferred font so for the font config fallback we take away the text English or German whatever the surrounding text is and we say no no this is actually an undefined ZSYE which is the emoji indicator and then there tends to be one font on your Linux box which is tagged as your preferred emoji font and you get this one the the Android emoji one color or whatever it is notal color I think it is a walkthrough yeah so let me just demonstrate some of that and I have a cheat sheet of what the demo just so we can keep track so I'm seeing our classically in calc there's just a native tooltip if I knew how to use calc this would help yeah and there's your native popover which is like a tooltip except different and doesn't have some of the difficulties but having multiple ones at the same time so that's that if we just have a look at maybe define a range has one doesn't yeah here's one of these shrinking dialogues and shrinks down like that you can select your range you come back up again if I go here that so it all works perfectly fine if I move over to what I'm more familiar with in calc and we go format say insert no format water map the signature line here has got an example of shadow text for the placeholder text issues like that format paragraph we'll have another example of yeah here's another case of where we have a combo box which has custom content in it so you have a popover again and you have a whole set of custom rendered lines as we had in the older case similarly you can host your color selector inside a popover as well and there you have a classic value set being hosted inside something like that and again we have a custom another custom widget the classic vcl originally vcl layer custom widget which is now reimagined to work inside and that and crucially as well the accessibility stuff that we did for all of this it works as well so you have your native gtk accessibility stuff for the native gtk widgets and then when you come to the custom widgets it's bridged again so that you get accessibility that was written specifically for these custom widgets also works so as traditionally again we plugged our accessibility in at the top level widget for the entire top level window now we can also plug it in at a per widget level so you get accessibility for the custom widgets there also and if we show insert table it's another case as well of the overlay scroll bar so it's a native gtk tree view and then we have the scroll bar widget out that appears and goes that's all works very well and high dpi as well we're not running high dpi here but when you are if you get all that goodness for free as well and it's quite nice and the scrolling benefits and all that and we see a former character the combo boxes can include pictures as well so you can continue to show your spell checking images that it's available like that and if we insert a section if we insert a section and for example we go to the password protection there get the caps lock indicator is on comes for free you get all those small little improvements as well this is tools options the more obscure features as well such as the Firefox persona integration right we have here now of course is everything that you see in the main window is VCL pretending to be gtk except for the menu bar the menu bar is a native gtk menu bar but when you select a persona the menu bar is colored as well along with anything else you get Missila persona integration and if there is an image then the image is offset so that it's one image not duplicates it on both parts of it but continuous across the whole thing as that's persona integration as well table of contents was the other one I mentioned at the last time I was presenting this as being a difficult one this now one functions as well the preview widget was particularly difficult in this case because of how it uses a right or back end in a particular way that nothing else does to render stuff so your preview widget works there as well beautifully fine and then there's a small animation that is built into gtk when you add widgets while it's visible so you should see a little kind of a sliding effect there and on that you get that as well obviously you get like whatever animations exist exist so that that comes in gradually like that yeah so my most recent thing is the wizards so database is a wizard yeah so now you have a native gtk assistant for the wizards as well you get the road map down the left hand side and if you do interesting if you change what database you use that the road map obviously updates to see what the next few steps are going to be and you can next and back to it and so all fine the assistant is not a gtk dialogue it's a gtk window we assume that all dialogues with gtk dialogue so doing this was a little bit more complicated than I anticipated but it works perfectly fine now let me just demonstrate at a larger font size maybe an even bigger font size the emoji stuff so you got a cat you hit a spacebar again you got a multitude of cats to slick from yeah there you go lots of cats so very beautiful so I am I demoed I demoed the cat to my youngest and he said how long did I take you and I said I suppose it took me about 20 years really to get the get the cat render 20 years you said yeah took you 20 years took me two minutes to get a dog plenty of dogs right it was worth the time now yeah so that's emojis the most recent thing there okay so that's the end of the demo so it gets kind of boring again that's the walk through yeah so what's left to do I think you find probably find it hard to find a dialogue that isn't converted to this point these are the ones that I know about from the bottom the print dialogue because when I went to do the print dialogue it was still being modified by summer code so I just put it to the back of the queue again so there's no reason except for the timing that's not converted there's the calc comma separated value dialogue which is just a big dialogue because it has a large custom widget and it's large then kind of intricate accessibility for the custom widget all the custom widgets are very expensive to do I wanted to complete the wizards because there's a copy table wizard in base that I needed to do I did that yesterday the day before so I think I'm finished with wizards so that's great and then going back to the top then the male merge dialogue that we all see the wizard does actually another male merge dialogue that's older than that that still exists at that dialogue and this database preview dialogue and writer both have that database selector widget you might have seen where you select the tables from it so that particular widget appears in two or three dialogues so that needs to be done as well and then the options dialogue the large options dialogue I believe all the tab pages are converted but that dialogue itself allows extensions particularly dictionary extensions as an example to host their own options pages inside that dialogue so we'll have to come up with a mechanism for that I have a way I know what way I'm going to do it but it'll take some implementation yeah but it's looking reasonably good at I'd hope to be finished by now but I'm not far away but I'm always never far away so yeah that's that's all I've got