[WIP] Faster & Better OldTwitter

[Ristellise]

This PR is pretty Big (& Experimental!)

As such, I'm opening it early as a draft PR for everyone to see what I've been up to.

In general, this PR's idea is to remove the massive and hard to maintain html string block in favour of building the structure using JavaScript directly. (named "templating" in the below section)

I'm currently not allowing edits by maintainers. Once it's done I'll open up contributions.

This has 2 benefits:

1. Reduced load times. (Using 6x CPU slowdown, rendering times has reduced from ~3s to ~0.7s from a previous experiment I did.)
2. Reduced HTML sanitization needed across the entire html element is needed.

Additionally, I've rolled in a couple new changes:

1. Updated twemoji to support unicode 16 emojis. (There's a new repo now maintained by the same ex-twitter staff that did twemojis)
2. Updated purify.min.js
3. Added JSdoc and comments where possible or I'm unsure.
4. Apply prettify across the entire project (I think this is quite controversial but it is helping me in formatting headaches so...)
5. Bumped the minor version to 1.9. I believe such a big change would need a minor version bump.

Potential concerns:

• This hasn't been tested on older browsers (Specifically Internet Explorer, the rest of the browsers appears to have wide support over required JS features. A shim was needed but I believe it shouldn't affect much.)
• Formatting might change. But I'll be fixing all the minor details.

What's done / not done:

• constructQuotedTweet is now mostly templated. While there is some changes in terms of cleanup, visually it should be the same as before
• [!] A lot of the html string based functions still emits strings for compatibility reasons
• Currently working on the main tweet conversion to templating
• Licensing? Probably? I used some StackOverflow code so...
• The reply formatting code feels quite finicky. I believe there shouldn't be an issue from my testing but I'm can't find a tweet with the right attributes.
• I havent wrote any changelogs yet. Someone could do it though.

What's after this?

• Unsure. I probably don't want to maintain it forever lol but I'll be around for visual bugfixes (i.e. issue like: "It looked like this before and now it's different!")

Various Odds & Ends & Notes:

• Before anyone asks: No, this isn't a LLM generated PR. This is an actual human that has been painstakingly converting a stringified html to a js templated version.

[Impeta]

Wow, this is great! Thank you!
Since this is looking to be majorly reducing load times, do you think you could please take in mind about these commits 455cf77 0063446 82c6820 and just revert them in your own PR? So we can have visible link colors on timeline back and instant loading thanks to you.

[Ristellise]

Wow, this is great! Thank you! Since this is looking to be majorly reducing load times, do you think you could please take in mind about these commits 455cf77 0063446 82c6820 and just revert them in your own PR? So we can have visible link colors on timeline back and instant loading thanks to you.

Thanks for the interest! I'll have to look into the colors issue and see whether is feasible. It appears to be but I don't want to get people's hopes up too high.

Just an edit / update: I've finished the full conversion to templating for the html. I haven't pushed the code for it just yet but it should land real soon.

[Impeta]

Thanks for the interest! I'll have to look into the colors issue and see whether is feasible. It appears to be but I don't want to get people's hopes up too high.

Just an edit / update: I've finished the full conversion to templating for the html. I haven't pushed the code for it just yet but it should land real soon.

Even better, appreciate it! At the very least, if you aren't able to fix it yourself or make it better, you can just revert said commits and leave it as is, and write a parenthesis on the link colors options description (pictured here), warning users about it potentially slowing OT overall on loading timelines if enabled.

[Ristellise]

Thanks for the interest! I'll have to look into the colors issue and see whether is feasible. It appears to be but I don't want to get people's hopes up too high.
Just an edit / update: I've finished the full conversion to templating for the html. I haven't pushed the code for it just yet but it should land real soon.

Even better, appreciate it! At the very least, if you aren't able to fix it yourself or make it better, you can just revert said commits and leave it as is, and write a parenthesis on the link colors options description (pictured here), warning users about it potentially slowing OT overall on loading timelines if enabled.

I just checked. seems like my PR doesn't contain those commits at all. I'll pull in those changes and uncomment those.

[dimdenGD]

If you want to return this option you'll have to rename its key to something different so that its reset for everyone and to make it off by default (and make it say that it can make oldtwitter like 5 times slower on some devices)

[Ristellise]

If you want to return this option you'll have to rename its key to something different so that its reset for everyone and to make it off by default (and make it say that it can make oldtwitter like 5 times slower on some devices)

Alrighty, sounds good to me.

[Ristellise]

Opening it up for contributions now. I don't want to expand scope too much beyond the main slowdown oldtwitter. It's plenty fast now when zooming timelines (except I think the popup tweet viewer, that seems to be seperate)

There's other things that could be further optimized:

• There's still a call to build the main html elements using raw tags. Ideally this could be converted but I think that might encroach on this PR a bit too much
• Probably others if I remember correctly.

Some final timings (without CPU slowdowns, identical profile scroll):

Before:

renderTimeline 0.27229999999701976s
renderTimeline 0.22879999999701978s
renderTimeline 0.22059999999403954s
renderTimeline 0.2806000000089407s
renderTimeline 0.20079999999701978s

After:

[renderTimeline@profile] Took 0.053s to complete
[renderTimeline@profile] Took 0.046s to complete
[renderTimeline@profile] Took 0.045s to complete
[renderTimeline@profile] Took 0.043s to complete

[Impeta]

Testing through your own OldTwitter build and yeah, everything's working so far, no issues. I can tell the sheer reduced loading speed, nice.
Just one thing; if you have tackled on emoji coding inside, you might like to take a look on its emoji picker, that's been non-functioning for a while. More info: #820 (comment)

[Ristellise]

Testing through your own OldTwitter build and yeah, everything's working so far, no issues. I can tell the sheer reduced loading speed, nice. Just one thing; if you have tackled on emoji coding inside, you might like to take a look on its emoji picker, that's been non-functioning for a while. More info: #820 (comment)

Did some digging. This warrants further look into tbh. Seems like when extending HTMLElement and calling an class(?) function when constructing the element doesn't seem to be supported in firefox. No idea why is the case. Doing some inital digging doesn't yield anything useful for me 😕

Doing a bit more digging, I came across this article. I'll try to implement the fix later when I'm not busy procrastinating away work 🤣

[Impeta]

@Ristellise Seems that for tweets with more than one uploaded video, it won't do anything if you click on them, play and so. Happens only on (your own) OT build.
Tweet for reference: https://twitter.com/zhenzhiwang/status/1933002826864578872

[Ristellise]

@Ristellise Seems that for tweets with more than one uploaded video, it won't do anything if you click on them, play and so. Happens only on (your own) OT build. Tweet for reference: https://twitter.com/zhenzhiwang/status/1933002826864578872

Thanks for bug report. I'll look into fixing it. Fixed. was a pretty simple mistake 🤣 (i.e. forgetting to set controls.)

Other than this, @dimdenGD, what else is needed for this to be merged into main?

[dimdenGD]

Seems like if you enable both views and bookmarks on posts, for some reason views appear as a second bookmark button

[Ristellise]

Seems like if you enable both views and bookmarks on posts, for some reason views appear as a second bookmark button

That's... Interesting. I'll give it a lookie.

[Ristellise]

Fixed. Seems like a simple mistake of copying and pasting bookmarks classList. Thanks for noticing it!

[dimdenGD]

Liking main tweets seems to be broken on separate tweet pages (for example https://x.com/notexttospeech/status/1937604725601673467)

[dimdenGD]

Also code should be formatted back to 4 spaces

[Ristellise]

Reformatted to 4 spaces & fixed the missing element. Thanks for the catch.

[dimdenGD]

Well and last one thing is to fix what's failing the locales test

[dimdenGD]

I'm not sure what causes this, but some posts randomly get marked as if I bookmarked them, even though I didn't

[Ristellise]

I'm not sure what causes this, but some posts randomly get marked as if I bookmarked them, even though I didn't

Super weird, did it happen previously?

[Ristellise]

I'm not sure what causes this, but some posts randomly get marked as if I bookmarked them, even though I didn't

Oh I see it now.

[Ristellise]

Reminder to self to create PR fix. This returns an error, even though the tweet seems to be valid.

https://x.com/burny_tech/status/1845504728353939618

[dimdenGD]

Might gonna revert this PR. For some reason gifs dont properly load on my phone until I click on them, making it really annoying. It's really weird because it works fine on PC.

Also there's missing "Not interested in this post" and no fast Delete button on Bookmarks page

[Ristellise]

Might gonna revert this PR. For some reason gifs dont properly load on my phone until I click on them, making it really annoying. It's really weird because it works fine on PC.

Also there's missing "Not interested in this post" and no fast Delete button on Bookmarks page

I'll have a look when I've the spare time.

[Ristellise]

Might gonna revert this PR. For some reason gifs dont properly load on my phone until I click on them, making it really annoying. It's really weird because it works fine on PC.

Weird. It's not even showing up on the devtools emulation. What phone and browser version? (Browser version is probably more important.)

Also there's missing "Not interested in this post" and no fast Delete button on Bookmarks page

Spotted and fixed both of these issues. PR #1076 is here.

[dimdenGD]

Last Kiwi Browser version on Android. It only happens with tweet viewer tweets (need to click on tweet and see its comments). Also I noticed that tweets with multiple videos dont have controls attribute.

Also "Separate text" button in context menu should only appear on phone. It shows up on computer too ever since the update.

[Ristellise]

Also "Separate text" button in context menu should only appear on phone. It shows up on computer too ever since the update.

Fixed. Was done in css since ideally we should not be modifying the dom on screen sizes.

It only happens with tweet viewer tweets (need to click on tweet and see its comments)
I noticed that tweets with multiple videos dont have controls attribute.

Got tweets i can use to reproduce for both of these?