[Userscript] Show Total Lesson Count

[prouleau]

Something went wrong. Nothing shows up at the console.

I tried enabling the console debugging in the settings and the problem disappeared.

[LupoMikti]

Thanks for letting me know. I probably won’t be able to reproduce it, but given that the original bubble disappeared, I can try looking at the code and theorizing what could have caused it.

The debug log won’t capture anything to do with this because I don’t have any addToDebugLog() function calls to diagnose problems here, only a single one at the end to let me know all the previous lines of code in the if-block executed without error.

The debug log also includes a lot of unnecessary turbo event information from back when we were testing that at the end of 2023. Now the frameId I was searching for in code doesn’t even exist, and the navBar frameId shows up, but isn’t used/is removed from the dashboard; therefore, on the dashboard, none of that turbo-frame debug log needs to be present as it always uses the fallback method after the turbo events have settled.

To sum it up, if I ever have time to do more than quick fixes I’ll need to do some serious code clean up.

[prouleau]

For your information, when the problem occurs the div for the missing bubble doesn’t show in the DOM.

[prouleau]

In case it helps it could also happen in this case:

Again the div for the missing bubble doesn’t show up in the DOM.

[LupoMikti]

Thanks. I already know that the div should be missing when this happens though. This is because I am using functions that move the div into a new wrapper. I can surmise that there is an issue where the original div is not being moved. If you want to do some more detailed troubleshooting before I can get to it (I still cannot reproduce the issue on my end), the line in question is 362: wrapper0.prepend(countTextDiv);

[prouleau]

I have spend two afternoons debugging this bug. I reached the conclusion there is nothing wrong with your code. The problem is due to a bug either in the wanikani widget or in the browser. The bug is causing the first count bubble to disappear from the DOM at random points in time.

I was able to reproduce the bug with both Chrome and Firefox. This is suggestive of a Wanikani widget problem. Either that or the two browsers are sharing some piece of code.

I tried to produce some bug when tampermonkey is turned off. No problem were observed. So the bug require two bubbles being displayed to affect the first one. When there is only one bubble (your script is not running because tampermonkey is off) there is no bug. Because of this I am reluctant to submit a bug report to Wanikani. The bug occurs only when the script is running. The guys at Wanikani will say this is a script problem.

This bug is highly intermittent. To reproduce I must click on the advanced lesson button and click on the back arrow of the browser to cause the script to execute. Because the script is intermittent I had to click back and forth as many as sixty times before the problem occurs. This made troubleshooting a pain.

I cannot fix your script because it is not the problem but I can make it impervious to the effect of the problem. I introduce a spurious bubble at the beginning of the wrapper and hide it with display set to none in the styling. The bug only deletes the spurious bubble and leaves to two real ones intact.

code

                    const countTextDivBugGuard = titleContainer.querySelector(`.todays-lessons-widget__count-text`);
                    const countTextDiv = countTextDivBugGuard.cloneNode(true);
                    const countTextClone = countTextDivBugGuard.cloneNode(true);
                    countTextClone.firstElementChild.textContent = totalLessonCount;
                    const forwardSlash = document.createElement('div');
                    forwardSlash.classList.add("todays-lessons-widget__title-text");
                    forwardSlash.textContent = '/';
                    const forwardSlashBugGuard = forwardSlash.cloneNode(true);
                    forwardSlashBugGuard.style.display = "none";
                    countTextDivBugGuard.style.display = "none";
                    wrapper0.append(countTextDivBugGuard);
                    wrapper0.append(forwardSlashBugGuard);
                    wrapper0.append(countTextDiv);
                    wrapper0.append(forwardSlash);
                    wrapper0.append(countTextClone);

I will run this code a few days to make sure no unintended behavior show up. When I am confident I will submit a pull request on github.

I have found an unrelated bug. globalState.mainRetryCounter is never reset to 4. This means it keeps decreasing from one set of turbo event to another. When it reaches zero main would refuse to work unless the page is refreshed. This made debugging a pain greater than it needed be. A fix will be in the pull request.

[LupoMikti]

Version 0.6.2 of the script was just pushed to repo, so should update on GreasyFork at some point.

This is not a very notable release and does not address the above conversation about the intermittent issue with the first node of the new wrapper being deleted.

This release set up some maintenance foundations by adding a deno.json to the repo folder for linting and formatting. If you are contributing, you do not need to use deno or format before submitting; I will always run these myself before pushing a release.

It added back in functionality for the navigation bar, which while gone from the dashboard is still present on other pages. It now displays “daily / total” or just “total” if you have the Show Only Total Lessons setting enabled.

It attempts to properly add in a reset for the number of retries of the main function.

Overall, my next goal for this little script is going to be to clean up everything related to the turbo events. It’s been 2 years, and I have to wonder if by now better solutions have not been thought up than our experimentation with the Turbo Events Library script. Not to mention how so much of that code isn’t needed for the dashboard specifically; it always uses the fallback method after determining that all the turbo events have settled.

[LupoMikti]

Thank you for your very thorough investigation. I’ll accept your proposed changes when you submit them since they shouldn’t cause any issue for those who do not observe the problem.

[prouleau]

Looking at the code over again I noticed two things.

1. You don’t have code to handle one-half sized widgets.
2. You don’t handle multiple Lessons widgets.

I don’t plan to fix these issues. I just felt they are worth mentionning.

[LupoMikti]

Thank you,

1. One-half widgets don’t need special handling. As seen from the screenshots on the v0.6.1 post above, one-half works fine with the other layout.
2. Yes, also in the v0.6.1 post I mentioned that I discovered I was not handling this case and would fix it when I have time

[prouleau]

I just made a Pull Request for the bug fix. There is one thing I want you to know.

This bug fixes introduces two dummy elements that are hidden with display: none. One is a dummy lesson count bubble and the other is a dummy forward slash bubble. I have tested how they respond to the bug by letting the display not being set to none and reproducing the bug. I have verified that the bug just kill the lesson count bubble leaving all the other elements in the wrapper intact.

I have also tested the configuration where there is only one dummy element, that is the lesson count. In this config there is no dummy forward slash. I am unable to reproduce the bug in this config. This can mean two things.

1. The bug doesn’t occur in this configuration.
2. The bug is intermittent. It occurs very rarely but still occur sometimes. I am just not trying hard enough to reproduce it.

Possibility 2 bothers me. If I don’t reproduce the bug I don’t know whether more that one bubble is affected when it occurs. For this reason I chose to use the two dummy elements configuration for the Pull Request. I know how this configuration reacts to the bug.

You may want to choose the other option. Here is the code for it.

                    const countTextDivDummy = titleContainer.querySelector(`.todays-lessons-widget__count-text`);
                    const countTextDiv = countTextDivDummy.cloneNode(true);
                    const countTextClone = countTextDivDummy.cloneNode(true);
                    countTextClone.firstElementChild.textContent = totalLessonCount;
                    const forwardSlash = document.createElement('div');
                    forwardSlash.classList.add("todays-lessons-widget__title-text");
                    forwardSlash.textContent = '/';
                    countTextDivDummy.style.display = "none";
                    wrapper0.append(countTextDivDummy);
                    wrapper0.append(countTextDiv);
                    wrapper0.append(forwardSlash);
                    wrapper0.append(countTextClone);

[LupoMikti]

Thanks prouleau. It looks like you accidentally submitted your pull request to your own fork (no worries, I think I do that by accident at least once every few times I’ve made a PR). I’ve been making some updates and will incorporate your fix soon. For now, could you tell me if version 0.6.3 still produces the problem for you? I’ve switched from using append() and prepend() to only insertAdjacentHTML() and insertAdjacentElement() and there are a lot more checks for things existing thanks to the type checking and linting I added.

[prouleau]

I can’t reproduce the problem with version 0.6.3. It seems that inserting HTML as opposed to cloned nodes does the job.