 The idea of this talk is to share with you the effort that went into moving the sidebar and make it available in collaboration online and on the web and specifically I want to make this interesting to the technical minded Amongst us, and I hope that's everybody In that I share a little bit of the technical challenges there So this is this is the overview of my talk. It's it's not an extremely Long or detailed talk. So so hopefully there's going to be something for everybody and we have time for questions I'm going to skip introductions. I'm guessing most people know me by now and if that's not the case just approach me Approach me after after the talk. Is this better? Is this better? Okay, if it's not just let me know Just approach me if you if you if you don't know me and introduce yourself. I'll be happy to talk to you We'll take a quick look at what what really is the sidebar and why we need it Quickly just to make sure we're all on the same page And then we'll talk a little bit about the challenges. Why is this even something to talk about right? I mean you would think it's it's there It's working we have all the functionality implemented. How hard can it be and those are usually famous last words The idea is that I don't want to give you just a superficial taste of things But I also want to talk a little bit about some of the technical details. So So what is this? What is the sidebar? This is a sidebar that we see it on the desktop It it's it's typically on the right side. It's docked and nice and You get to undock it if you want and move it around It has all the context sensitive properties That you would need depending on what you're doing So if you're if you're typing a bit of text and you want a quick way to change the font size there There it is. It's it's right on the sidebar Change a color if you select an image Maybe you would get slightly different properties and so it's it's actually, you know moving with you so that whenever you need to Make any adjustments. It's accessible and it's always where you need them to be so much much better than menus And this this would be our end product, right? This is this is what we're trying to do We're trying to bring the same functionality Hopefully in a slightly refined UI Elements on the web and and here you can see that we have two two different cases. This is this is calc, right? And this is right here You see them both of them are working in the same way except that you you do get a different context Because here we have the graph selected, right? So you get area and shadow Whereas over there It's clearly some text where the cursor is because you get text style and character properties and spacing As your context, okay? so this this effort is is is Not trivial, right and and we always have to Take a moment and remember that it wouldn't happen automatically and it takes a lot of partnership and Funding to make this happen. So thank you to our partners there So really how hard is it to bring this kind of interface and functionality and make it work on the web you would think you have the same kind of you know environment as on the desktop you have a An application that renders UI elements for you. You have mouse and keyboard input, right? And so you get you have you have pretty much the foundation But in fact what what really happens is is that the similarities end very quickly Much sooner than you would have liked them to so for example the sidebar is very much like a dialogue, right? Like a pop-up dialogue you would get when you're you go into the menu Paragraph right you get this dialogue nice tabs and whatnot. So, you know what this is reasonable thing to Use the dialogue infrastructure that we already had in collaborate online working To build essentially the sidebar functionality However, it's not quiet like it dialogue The sidebar in that it is it is not really Something you bring up to the front Changes setting and then dismiss it you actually want it to be around and you want it to be updated automatically Based on the context like you expect on the desktop But also on the desktop it's docked so you get it, you know Flexibly resized based on the height of your window and so on so you would want that kind of behavior as well so you don't want something extremely rigid either and unlike the the Unlike the the dialogues the sidebar needs to push your content out of the way Right in a way that you're what you're actually doing is you're not covering the content because now you have the sidebar rather You're resizing the content to make it shrink because you want to just to maintain the same view Right as you had but now slightly smaller to accommodate for the real estate that the sidebar is going to take So there is a little you know a bit of You know differences there and then a bit of challenge so I want to take a small step back and people who have missed The presentations in the past years on the dialogue tunneling work So again, we make sure that we're on a similar footing here What really happens under the hood is that when you have a dialogue pop up really what is happening is We have Infrastructure we built this API where what we do is we figure out. Oh, we are actually Running this whole show online on the web and so we need to know that a new window has been created and then that the window has been Resized and then that the there is an update in the UI. So we need to invalidate certain areas And then oh the the mouse actually is moving, right? So if that changes the rendering of the UI you also want to update that so there is a whole plumbing Going on even with the mouse movement let along when you type or when you click all of these events go back to the core and then we have new events generated to notify The web that well, you know things change what you want to do now and then the javascript part would come in and say Oh, why don't you render this area because I hear you invalidated the last one and I got the you know The old version so just give me the latest one and so that's what happens We render whatever area that that is being requested as a PNG image and we Send that along to the browser and then the browser will know where to Make sure that is rendered in the UI and everything works Nice and smooth and you don't even notice that you're actually dealing with images all the time now Having said that the dialogue is really a very close Relative to the sidebar. It means we can't actually reuse it, but we have to be careful So one of the things we want to do is we want to differentiate between creating a sidebar which you can only create one of right so if there is more than one sidebar Creation that is happening. It just means that you are replacing the previous one right unlike dialogues dialogues You can have multiple ones on the on the screen, but the sidebar. You really want to have one This just doesn't make any sense to have multiple ones and that is not supported in in core Anyway, so we do track that we have a new type that tells you this is not a dialogue really And you will see that we have a third type as well. I'll get to that So we have one for sidebar and the one for dialogues in general and we remembered This fact and we track sidebar separately from dialogue so you can dismiss dialogues. You can't dismiss sidebars simply by do by going around you know editing your document you actually need to From the menu say view and then you click on sidebar and it toggles if it was hidden You see it if it was visible you hide it. That's that's how you react to this, you know deal with the sidebar as I mentioned we need it docked and that means we need to push around the contents So again, this is a bit of special handling where we say oh now we're showing the sidebar It is a special kind of a dialogue where we move around the HTML elements such that we make room for our sidebar And we push everything out of the way so that there is no overlap between them And then we need to revert this process where when we hide the sidebar You want to bring everything back to 100% and your content takes the whole Available real estate To support resizing automatically we had to add a bit of an API to support that functionality where in the browser when we notice that the the HTML elements where we embed the sidebar Got their dimensions changed. We also need to let core know That the sidebar now has a different Height the width for now is fixed, but it is supported You can't actually change it, but we don't have that implemented in the UI. So the user is unable to change it But but but the height is automatically resized and now and I'll talk a little bit more about that because it's It's quite interesting the challenges we have there So this is roughly how you break down the sidebar. This is obviously floating. It's it's not docked so it's undocked and And it's it has multiple sections in reality What is really interesting here is that this this whole red Area that's the sidebar docking window in core. That's that's how it's identified and within it You have the panels in the UI level Right and the panels are the ones that that you can collapse with the arrow like style character and paragraph, right? and these are essentially Flexible in there in their dimension. So when you collapse them, they only take the heading size In in space Otherwise you can expand them and you can scroll around. This is on desktop. You can you can notice that you can't undock In the browser and you see if it's if it takes more Height than you have in your main floating window. There's a there's a scroll bar nice and neat This is a nightmare. I'll come to later You can see that in in the code actually it's For those who are interested in mapping this to the code There is actually a hierarchy. So the docking window has a controller and the controller has decks and Each deck is essentially one of those icons on the side. So You can switch between the properties and gallery and the other ones And that switches the decks and every deck has a number of panels in it, right? And you also have the tab bar, which is that blue block. That's that's the side tab bar So the tab bar we really don't need in the browser Instead we have those icons as Toolbar icons and you can you can switch from the toolbar Primarily because there is not that much real estate and we we need to be a little bit conservative Just as a as a side point the the parent of the docking window is called sidebar child window and just a an interesting trick of mind to Leave you know that lead people astray essentially Waste a bunch of time so this is the the Interesting challenge or one of the challenges that you get when you're trying to move a UI element like a dialogue to the web which Part of that UI control or or window or in this case the the Dockable floating window that you want to render online. That's the real question, right and as you saw you have you have this docking window inside it you have Decks and every deck has its own panels and so what how do you want this rendering process to happen? You really want to render everything and lose control over Which deck is now visible or you want to maybe render the panels separately then you can arrange them how you want and you have more control What is the right answer? And so one of the first things we tried is we tried rendering the decks so every deck gets its own plumbing and tunneling to the To the JavaScript That didn't really work out very well and you might guess why that happened and in hindsight it makes sense The problem there is that the decks really are not created and destroyed and that's what we we we want to Track we want to track the lifetime of the dialogue But in in the sidebar what's happening is you show a deck and then you hide the deck And then you show the other deck and you hide the deck and so you need to track this In in the JavaScript, which it just is a nightmare. It doesn't make sense. So we said okay Let's actually move one level higher and render the parent that has the decks in it And that's the docking window and that's what we did next Incidentally what that meant ultimately is that the type To identify the sidebar is now called deck So you get type you create a window of type dialogue That's all the dialogues and you create a window that has type deck and that is the sidebar That's an artifact that we just just stayed there a bit a bit more Details as I mentioned we need to resize the sidebar and we need to resize it I mean in a very special way only when the browser is resizing so really we Can't leave the sidebar docked in core So liberal office core starts sidebar in the docked state So the first thing we do is we figure out okay now. This is this is not the desktop And so we need to have full control over the dimensions of the sidebar So we make it floating right all of this is invisible in the background, right? So it is floating so we can control its dimensions however we want right there is no limitation because it's not part of the frame Next we implement the API to control its size so we can do this programmatically however we want Next we say we don't want the tab bar right that is useless for us and We just have the Toolbar entries for all the decks that we are interested in and We are not interested in the gallery for example in navigation. Those are not implemented at the moment So those are not there and we don't need to worry about them and we make sure that we Maximize the height of the sidebar so that we can render everything nice and neat and this is one of the technical challenges I'm going to get to in a bit, but first Let's deal with another problem Which is pop-ups this this is you can see I clicked on the color button and that brings up the I'm not sure what the name of this one is they I guess the color palette Where you can select the color of your text and this is a pop-up? It's exactly like a context menu Or for that matter a drop-down list like the list of the font names that you have over there And that is a separate window right in the in the HTML What is happening is you have your dialogue or sidebar and that's your parent and then you have a Child of that on the desktop. It's the same you have this relationship. So if you kill or the parent dies You your child goes away as well So you don't have a thing your window floating around like that on its own So what we do is we differentiate when we create a child window from a dialogue and from The sidebar which is called the deck and this one would be called child and the child when it's created It says what is the ID of its parent? So in the JavaScript, we can track them nicely and everything works just fine The only difference is that the child goes away when you move your cursor or you Click somewhere else etc. Etc. As you would expect so that's that's fine Now let's look at some of the challenges. This is this is where it gets technical and interesting So one of the interesting challenges is that you don't have a nice sequence of events. This is a nightmare You spend a lot of time trying to iron out these seemingly an Acronistic Events that you are getting from core So normally what you would want is you would want an announcement that a dialogue or the sidebar has been created Updates based on the input events and then that it is closed and everything is nice and fun But in reality that doesn't happen. What happens is you get some create with Often a bogus size and this is the case for most dialogues So you get a dimension that is 0 0 by 0 0 Okay So I created a hidden window fine and then you get an update for the size right to get an event size Changed and you get now a new dimension. So you go all right great Let's now create something for the user to see and then oops it changed again. Well, I Fine fine will do that too, but then you have user experience problems, right? You get flickers you get all all this noise and traffic on the network. So you need to iron these out so This makes it really really much harder to manage things. Why is this not a problem on the desktop? You should ask Well, because the desktop it's much faster. You don't have network. You don't have multiple languages JavaScript You know it the user does not see this right? It happens so fast that it just is irrelevant So one of the things that we do for the sidebar is we can't rely on create because at creation time the sidebar has no size and that is completely useless instead what we do we Create the sidebar with a sensible dimensions on the notification for the resize which happens Multiple times as you would expect that creates another nightmare that I will get to in in a minute Another challenge is that the sidebar Will take the focus as you would expect for input So you when you open the sidebar you would expect that the sidebar now is active So anything I do will probably go to the sidebar in terms of typing something or even the mouse, right? That's reasonable However, this is a problem because now the sidebar has the focus and what you want to do is you want to go back and type in your in your document and this Coordination between the two Can be tricky dialogues don't have that problem because you dismissed them typically, right? But the sidebar can actually still the focus thinking that oh, I you just you know want to Have me in the foreground So it starts essentially getting in the way and and cause again user experience problem So we had to deal with that and in a better way often LibreOffice being a large piece of software it throws at you curveballs. So one of the big ones that came our way when we were working on this is that we found out that the Initialization sequence in impress is wildly different than in calc and writer And this is the kind of thing that you are hoping That you would never have to deal with it, right? Because I mean this is the worst kind of Discrimination in the code, right? You need to actually worry about the context of which type of document the user is using We're in your you're in the sidebar like well why and We'll see why so a bit of background You can have multiple users Working on the same document at the same time. That's the whole idea of having the web, right? Otherwise just work on your desktop and that means that each user will get their own view In the code these are referenced by the view shell and the frame view And every user they have their own and everything is nice and fine because one user can have the sidebar visible The other one does not right one user can be working in one dialogue The user is enough the other user is working in another so you need this a nice segregation and so you need to track every window Based on the view that owns it, right? So what happens when you have a Document with a sidebar everything is nice and fine and you're you know, you're finishing your PhD and then you're I don't know your Supervisor logs in and they open the same thing and now they want to play with the sidebar to highlight something in red maybe What happens is normally you would expect that the view for this new user will be created and then the sidebar will be created Right the sidebar belongs to this new view So it gets attached to it and everything is working nice and fine and this happens in Calc and writer not an impress so if you're doing a Presentation or working on your slides What happens is the sidebar is created before the frame and the View shell is switched to the new user. So it's at that point. You have the old one not the new So if you actually create the machinery for the sidebar At that point in time you will show the sidebar to the to the old user and not the new one This is a nightmare you See so We had to handle it in a special way and I'm going to show you this is this is how we handle it The the comment explaining the why we need to do all these Checks is essentially explaining that we don't have the right view and what we need to do is Figure out if really the view has already changed or not But this is this is ugly because Because if you are the first view There is no all than you there is only one So you need to special case the special case, right? If you if you are a second or subsequent view There is always an old one and the sidebar is being created whilst the old one is still active So you want to wait until you get this size notification On the new one so you track the old one with this empty old view shell and you compare it with the current one And if it is changed you're like yay, but what do you do if you're the first one? There is no old right so so again You need you need to take that into account and this is what what it's trying to do and there isn't a long Explanation that you know we need to do this so that we avoid messing the sidebar Last point is the vertical scroll bar as I promised that I will return to So normally when you say this is the dimensions of my sidebar You expect things to just you know flow in it and if it's bigger than your size you get the scroll bar But we don't want that scroll bar because it's extremely slow to scroll the window and render Multiple times whilst you're doing this. It's it's really horrible So what we really want to do is we want to figure out the actual size of the sidebar how high it is And then we say render it give me the image and I will just show it and scroll in the browser And that's nice and easy right so we render once the whole thing and whenever there is an update We only need to render that part of the sidebar, and we have the whole thing with us This gets really really tricky Because some of these panels they don't have a maximum size They just take as much space as is left in your sidebar So you tell it I am three thousand pixels high And they would yeah, I need three thousand pixels and you say okay. I'm five thousand now Yeah, yeah, I'm five thousand now and there is no way to control them So it becomes a nightmare and what happens is that you need to do a little bit of a hackery where you say If it's this kind of a deck Actually, no, I'm no more than 600 pixels You just need to do something and scroll or whatever hide the rest and so Unfortunately this this kind of behavior of never ending, you know height Gives you a useless sidebar like that In some cases that we had to spend a lot of time trying to fight it and I'm fairly certain We haven't found all the cases and this is a layout in Nightmare because what is really happening is the layout or is is going through all the element figuring out the their height And then comparing that with the height of the actual sidebar which we set and then figuring out with they fit Yes, or no, and if not how much is the overflow and then it's doing this at least twice it's a two-path Algorithm and ultimately it decides whether to show the scroll bar or not in this case It decided to show it and it's completely useless because it you can only scroll it one pixel that that's it Right, it's just there to annoy you or the user right in this case so this is this is one of the The the the nasty challenges that you don't really see on the desktop But you get it here and the reason is because we don't want the scrolling to happen in the Backhand rather we want it to happen in the browser And with that thank you so much