 Yesterday I was working on a panel's code bag and it was driving me crazy. I just couldn't understand why the code was, why the bag was there and what was causing it. And I spent hours on it and after hours I have still no solution. So let me explain what bag it is. So you have the panel and I'm sorry if it's messed up but you know I was working on it and let's say that you want to drag you know the applets around. You take the task manager and you do this to drag it around and everything is messed up like all the sizes are wrong. In this case they're particularly wrong because I haven't yet restarted Plasma Shell so there is a change that I did. But even in master and this that I'm going to show you is indeed master. You still get this bag slightly different and I want you to open up your panel and see if you also have it. Take the task manager. You can drag it around and it seems normal but when you go drag any other applet it becomes giant like for no reason whatsoever. Like I mean come on what is this. So what's happening. Let's see the code. So the idea is I'm sorry the idea is we have this code which is called the config overlay. What is the config overlay. The config overlay manages everything about applet overlay when it's you know hovered while editing the panel. So you see this white overlay but also the tooltip but also when you're dragging it around this placeholder that takes the same width of the applet in theory to allow you to you know to allow you to see where it's going and what's the idea. So let me show you this. When you're dragging an applet around like as an example the system tree well the the actual applet with all the icons you can drag it wherever you want but when you drag it like on the left of another applet there is like this preview of how much space it would take. So you see that there is this empty space. Let me zoom in. There is this empty space on the left of the clock which is not actually caused by the system tree itself but there is actually a placeholder which in theory has the same width of the system tree to show you how much space it's going to take in that particular particular position. So what's going off? What's going wrong? Well the idea is we can actually see where this placeholder is located. It's called placeholder very nicely and it's this element right here. So it has a property item dragging which is the actual item that's being dragged around. It has a height which is the height of the current applet which is also the applet that's been dragged around. Current applet and dragging are actually finally the same exact element. It has a visible which is if the configuration area contains mouse. The idea here is this item only exists if the mouse is on an applet that's being dragged around. Otherwise it doesn't which you know kind of makes sense. Then it fills with only if the element that's being dragged around actually fills with and it fills height only if the element that's being dragged around fills height which seems like it makes sense. So let's say that we are on master. How do we switch from master? So we take the terminal we go to the source code which is here and we do git checkout master like this. Can I actually zoom in? Git checkout master. Okay I need to actually git commit stuff git checkout master. Now we are on master. So we can see the actual code before I did any change whatsoever. We still have our placeholder but the code is slightly different. Whoops the code is here. We've got an item with the placeholder the dragging item is still there and thumb fact. This is I think one of the three lines of this entire file that's me like I did them in a previous merge request and the same property as before without the width and height because those two were actually set throughout the code. As an example you get placeholder with equals sorry item with placeholder height equals item height and so on but also down here with is current update with placeholder height is current update height. Okay so I started working on this code saying okay some things off with the way that's you know setting the width and height and I was optimistic that it was going to be an easy fix. So let's see these two first some things off maybe with them. So let's try to understand what it's doing. We are in a function that's called unposition changed. So basically this code gets fired up when you're dragging the applet around because the position of the config overlay which is the same position of the applet is changing. So what's this first part of code from here to like here. If current applet and current applet applet and current applet applet plugin name this sounds like a poem but it's actually saying if we have an applet that's been dragging around and if that applet also has an actual applet inside of it so we are actually dragging an applet and not an applet and not who knows I mean better check for sure right and the name of the applet that's being dragged around is arg.kd.plasma.spanel spacer then lots of complicated stuff that doesn't quite interest us because what this does is hard code something for the panel spacer specifically the panel spacer is you know the one that takes space in the panel and after a bit of consideration I personally decided to delete this code entirely because it does pretty bad. Then if pressed which means if mouse is being pressed which means if mouse is actually being dragged around well if the current applet and current applet applet plugin name is spacer then blah blah blah again things that doesn't quite interest us then what's this verb padding if current applet complicated stuff then what's this well basically saying if we set up a bit of padding and then we say if the mouse that's being dragged is outside the panel plus the padding which is this math right here then check what is the containment of the mouse properties what's a containment well it's a category like a big box when you can put widgets so like there is the panel and you can put widgets in there but there's also the desktop so if you're dragging an item from the panel to the desktop and then it's outside of the of the panel then it says okay what's the containment in the mouse proper coordinates and if it's different from the plus mind which is you know the actual panel then we move the applet there so if I'm dragging something to the desktop it will move it to the desktop it destroys it from the panel then it removes it from the panel then it adds it to the desktop what's next if a plus mind from factor is vertical so if the panel is vertical what basically we say that the current applet is the delta in mouse coordinates so we're basically saying okay the applet that we're dragging around should follow the mouse which makes sense I can't disagree there and then our item is the current layout child at mouse x mouse y what does this mean current layout is the list of applets in the panel child at is a function to know what widget is in a certain coordinate of the panel and mouse x and mouse y are the coordinates of the mouse so we're saying okay please as get us the element that the mouse is standing on top of which is let me make an example because it's not so easy to visualize let's say that I'm dragging the digital clock around so as I'm doing this you can see that my mouse right now is on top of the clock and of the system tree you can see it like there is my mouse there is the clock which I'm dragging around but underneath there is the system tree and in this case the item is the system tree because my mouse is hovering that element so basically it's saying okay fetch us the element that we're dragging on top of because it makes sense because well we'll see now that we have item if there is an item and the item item that we're dragging around is not the placeholder so there's an actual applet that we're hovering over well let's skip this code that highlighted for a sec well basically we're saying okay you either insert it before or after that element what the placeholder what's this insert the item sorry it's the opposite insert the placeholder before the item and insert the placeholder after the item depending on whether you're on the left or on the right of the item so you're saying okay if we're dragging over an applet then we should probably change the position of the placeholder which makes sense otherwise the placeholder wouldn't change position at all so what we're saying is let's actually try to visualize it in a better way okay let's drag the hello edit mode and if we start dragging something we are going to see this red thing which is the placeholder and we can see that if we drag the digital clock on the right of the system tree it's moved the placeholder is moved on the right of the system tree which is where it was but if we go on the left it's going to move on the left to go to the right it's going to go back to the right and so on so the placeholder is moved before the item if it's before and after the admin item if it's after and this is thanks to the code that i showed you earlier which is this one we either insert it before or after depending of the position in the item if it's less or more than the height okay so let's now finally try to understand these three lines line number one placeholder with equals item width so again there is an issue with the width of the placeholder so this might be it okay so we are setting the width of the red element which is the placeholder for the item that we're dragging around to the width of the item that we're dragging on top of okay so let's see what that means again let's move the clock on top of the system tree like here or here so we're saying okay the width of the placeholder which is the red element is the same as the width of the item that we're dragging on top of which is the system tree so the red element should be the same width of the system tree and if i go like here now the element is kickoff so it should be the same width as kickoff and if i go here now it's the task manager so the red element should be the same width of the task manager but that doesn't make any sense whatsoever the width of the placeholder should be the width of the item you're dragging around not the item that you're hovering on top of and here placeholder equals item height okay same issue why and then placeholder parent equals configuration area okay what's configuration area i have no clue whatsoever it's it's something which is not defined where is it here it's this one okay it's you know the root element of this entire criminal file why are we moving the why are we moving the placeholder there i'll tell you why there's no clear reason exactly why they're exactly like there's no clear reason we should change the width and height to the items width and height because what happens is that this placeholder is going to be inserted before the item which means that or after which means that the parent of the placeholder is going to be changed anyway in one of these two functions so what the hell is going on so in these cases i spent half an hour one hour trying to understand what this code was supposed to say and i gave up so what i did was i got to the source code and i blamed someone git blame and config the file is called config overlay and this is going to tell me for each line who wrote it so we go to that line which is line what is it 120 so we go to 120 here so this line was written by alex in 2014 okay let's actually see why we can copy paste sorry we can copy this id and it's going to be a commit so we can show that id and see what that commit was usually the commits also have an explanation on why they were made and the commit is initial import from the monolithic kt workspace oh no let's see what this commit is and it's hundreds hundreds of lines that were taken from another repository which means that this alex didn't actually write that code he just imported it from somewhere else which means that we cannot understand we cannot feasibly know who wrote that code we will never know i can only guess but i don't want to because going around being like i think you wrote that code in 2010 is not going to work so we now need to take as a given that this code we won't ever know what's in its ear and it also doesn't seem to make any sense whatsoever nice what happens if we actually remove it and what happens i'll tell you straight away it's nothing nothing changes nice okay let's try to switch to the next occurrence of the plasmoid placeholder sorry within height okay so in here we are setting the width and height to be the current tablet within our height okay where are we on pressed so when you press the button the mouse then we take the item that we are actually currently you know over we set the current applet to be that item then blah blah blah again lots of custom code for the spacer blah blah blah blah blah okay we set the width and height of the placeholder to the width and height of the applet that we're dragging okay this makes sense we even have that placeholder dragging equals current applet which is the applet that we're dragging everything makes sense here so what's going off so we might say okay maybe it's the code above that's you know screwing up with us but it clearly isn't because if that was the case then the width and height would keep changing depending on the item we're dragging on that doesn't happen so it must be something else okay where else because this code makes sense the above one doesn't but it's not the issue so let's switch to the next one so we have baron here not interesting the actual item not interesting and then that's it what I mean we set the width in just two places one makes sense and the other doesn't but if you take it off the bug is still there what's happening so what I did is I tried to refactor the code a bit and let's switch back to my super panel let's switch back to my super branch and we can see my custom code and what I did except you know removing all of the custom code for this spacer is say that the width is the current applet and current applet height okay makes sense right so easy also added when the width changes please tell me yo and then the new width if we have an app that does mean drag it around and if so the width of that applet and the stack trace which is actually useless so let's take it off okay well up and stand okay let's try it out so we have our log here so we go into edit mode let's try to drag around the test manager first and we can see that there's a yo already and in fact if we hover an item we get a yo which makes sense it's basically saying okay so you are over this element which is yo like 36 which means the width is the new width is 36 we do have an item that's being dragged around and the width of that item is 36 everything makes sense here so let's actually I don't know drag this one and we get two lines on one go with our day okay the first one is yo we set the width to 276 and in theory it should be 276 makes sense also yo we set the width to 1000 and something when it should be 276 so this is right but immediately after that we get this which is wrong or what's going on I was at this point quite desperate so what I did is I started stop using placeholder in some places to actually understand what part of the cause was causing this issue and I found out that the real lines of code that caused the issue in this file are this one and this one and this one okay if I take this three off the bug stops happening okay what are they sorry not this one it's this one okay what's happening in this line we're saying okay when we start dragging an element so on mouse press then insert the placeholder before the item that we're going to drag okay here is the same as before insert the placeholder before or after the item that we're dragging on top of so basically what the issue is that as soon as our placeholder actually gets put in the panel something messes up with this width which is weird so you might say okay what is this insert before function who wrote it okay it's here I do a bit what's happening in this function well basically we're seeing okay this function is used to insert item two before item one okay if they are the same item don't do anything okay we create a new ray of the a plus that we have removed sounds weird but we'll get to it now for each element in the panel which is the layout then we take that element we add it to the list of removed uploads and we will remove it from the panel entirely and then when we get to the one that we're looking for we stop okay then if the part we set the new item to the panel and then for each element in the removed list we actually add it back to the panel sounds weird we are taking off all the widgets starting from the right until we get the right one we insert back the new item and then we put back everything weird but okay works there's nothing about setting width and you might say okay but maybe it's calling something that you know actually sets a width to a wrong number but it isn't because we can actually check for that if we go back here I can do okay so this I know the bug is caused by the fact that these two lines are called okay I can go here and go console log after so if the bug happens before the after then I know that it happens while executing these two lines if it happens after well it could be anything that's caused by these two lines but it's not like directly called by these two lines and of course it happens after which means to rock up that as soon as we put the place order of an element inside the panel it is set to the right width and just after that something screws up with it something comes takes the width and sets it to the width of the first element that you dragged which makes no sense whatsoever why unheard would the panel change the width of an applet inside of it to be the width of the first element that you were dragging since you last clicked on edit panel doesn't make any sense so at this point I'm just going crazy and the fact is that there is no like solution there's no moment when I go oh no I don't know I honestly don't know I'm at this point I think that in the panel code which is really this one there is like I did one merge request to this code which is this part and my personal opinion is that the panel could got angry with got angry with me it got annoyed and now he hates me or she hates me or they hate me I don't know and now when wherever whenever I try to do something it screws up with me like that that's the best explanation I can give I have no clue what's going on also I have no clue what the code that was there was meant to do and also the code that was there was not working in first place so it's not like I broke anything but I couldn't fix either and I couldn't understand what the hell was going on or why the code that was there was there so anyway that was it if I managed to fix this I'll keep you updated and hopefully I will but at this point I don't know if you have any clue any clue whatsoever by the way a couple of names are missing sorry about that I'll get that fixed as up but if you have any clue what could be causing it please look at these three files I'm pretty sure it's something these three files it got a bit I don't know what so if you have any clue it's well accepted