Move restart button to the other side
Closed this issue · 4 comments
Jett mentioned also moving some of KA's other buttons from one side to the other, with the intention of putting frequently used buttons on the left, near the code editor and infrequently used buttons on the right. We would ideally move Save (and maybe Spin-off just because the two are grouped in HTML) and Restart from right to left, and move Request Help from right to left.
Additionally, the extension currently adds the Toggle Editor Settings button to the left, when that probably makes more sense on the right. The Toggle Editor button, which currently floats awkwardly above the program, could also be moved into this toolbar (since #141 the toolbar doesn't disappear with the program).
I've tried to accomplish all of these objectives, with varying degrees of success. The Toggle Editor Settings and Toggle Editor buttons have both been moved to the right of the toolbar. The restart button has been moved to the left.
The restart button is inconsistent though, because it can be added and removed from the DOM by KA, if the program needs or doesn't need a restart button. My current set up has a separate await for the restart button, so that if the program doesn't have a restart button when it loads, the timer keeps running waiting for one. This is inefficient, but the only alternative I see is not moving the restart button in the case that the code is modified such that the restart button is added. However, we still have a bug where the page crashes if the restart button is removed (by changing the code so that the restart button is no longer required), because KA looks for it on the right side, throws Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node., and the entire page goes blank because React is a baby and can't handle anything being messed with.
I haven't even gotten to moving the other elements yet.
Moving the rest of KA's elements gets ugly because they don't have ids, unlike the conveniently labeled #restart-code. But with some class selectors we should be able to do it. The bigger problem is that KA's CSS assumes they're on the right side, and the margin gets all messed up, so we need to overwrite a whole bunch of KA's CSS. This is made yet more difficult because the elements classes completely change when hovered, clicked, or disabled; so we'd end up with like 16 CSS rules. We might be able to fix that, and any possible issues with ambiguous selectors by adding a kae-moved-right class, and then selecting that. I'll try it and get back to you.
Edit: React overwrites the entire class attribute when you, say, hover over an element, so it's not going to be that simple. New, similar plan is to give the elements we move ids so that we can refer to them in CSS nicely.
Edit 2: Okay, that appears to have worked. So I have a solution, albeit an ugly one, for some CSS issues. Let's move on to other issues.
Still no solution for removing or inserting the restart button. And I'm afraid that's a major enough issue that I don't want to implement this with it broken.
Other possible issues include: I don't have any sort of await and I'm not using querySelectorPromise, just querySelector to get the toolbar. I haven't run into issues with it yet, but I don't know why not. It might be worth looking into.
Hmm, I thought I had another one. I'll see if it comes to me.
Theoretically, we could fix the restart button issues and still implement this by duplicating the restart button and adding our own clone to the left side of the page. We'd want to add a have a Mutation Observer watch for KA's restart button to be added or removed from the page, and toggle the visibility on our restart button manually. It wouldn't be too hard to bind clicking our restart button to trigger the real one. The CSS to keep KA's hidden would be trivial, but we'd probably have to copy a whole bunch of CSS to get our restart button to have proper hover and active styles.
I feel pretty confident saying this isn't going to happen.