Fix the YouTube text not updating issue

[basshelal]

See this, I'm thinking we might be able to solve this by adding another attribute to each affected node called "oldValue" where we can store the old value before update.

This is the exact function, updateNode where we updating a node.

The main problem though is we'd need a callback of some sort to know when to change it back to it's old value, we have to look into that part, but if we figure something out then this is pretty much solved.

[basshelal]

Ok BIG BRAIN TIME.

So we could redesign this entire extension to use the webRequest API instead of the current implementation which executes after the DOM content is loaded (hence why it's sometimes late).

The WebRequest API will read the web response before the user sees it, allowing us the opportunity to update it before it's even shown. This would also probably fix the YouTube issue but even if it doesn't this is still a much much better way of doing things since this guarantees that the user will never see ugly non updated text. I believe this is how most adblocks do things too.

Also I think this code would be on the background script and not on the content script, this should also modify any dynamic text (like YouTube comments) since they too are called from some kind of web request, but I'm not sure this needs testing and reading.

This will take a lot of time and research and testing, best to reserve time to do this properly, but it's well worth it because it could have huge performance and usability improvements.

This is no longer valid, see below comment

[basshelal]

Ok so we can only use content scripts to update the DOM, so the way we're doing it is the right way and so we must optimize that way. The webRequest and webNavigation APIs do not allow us to modify the DOM, only content scripts do.

[basshelal]

New discovery!

Currently we're updating the HTML of any node with Arabic text, we're not even updating it, we're actually replacing it and resetting it. This is probably unnecessary and so we should look into just updating the styling of an Arabic node. That way, in the worst case, only the styling will be off but the content will be exactly the same so YouTube should behave nicely then.

Not to mention this would probably have huge performance improvements!

[basshelal]

OK so I've tried updating only the styling and it mostly worked but introduced new issues along the way. So we have 2 ways of updating an HTMLElement;
we either add a new span with the styling applied, we'll call this Adding. (This is the original way)
Or we can just update the element's styling, we'll call this Styling.

Reddit with Adding:

Reddit with Styling:

Notice that the entire heading had its styling updated when use styling, this doesn't happen with adding because we add a new span as a child of the heading containing only the Arabic content. This is the same reason why the extension will have small size number or symbol in the middle of any large Arabic content because the extension will just ignore that non Arabic symbol.

YouTube is annoying because it does things so goddamn differently! It's so fucking annoying I don't even understand! They don't update their document when you go to another page, it just updates what's already showing. Which is the fucking reason for the stupid bug we have currently. Why the fuck are you like this YouTube??! Anyway here's YouTube with both methods:

YouTube with Adding:

YouTube with Styling:

Again note the weird style changes to the non Arabic content, this is definitely better of course, but Reddit or Twitter users may find it a little jarring when the font of any non-Arabic content next to Arabic content will switch fonts. It does make a lot of sense though because any adjacent symbols or fonts will also update to match the Arabic, making it more seamless altogether, it's just that the non-Arabic font will be different from the entire site. But then again a lot of games do this with foreign language text, particularly CJK but I've seen some Cyrillic do this as well.

Stealth is in a different font because it uses a few different characters from ASCII.

Even though not all characters are foreign, the whole thing changes font anyway.

A better example of when Arabic and non-Arabic text mix in the same HTMLElement:

Whereas it usually looks like this:

I mean honestly it's not much but it is noticeable.

There's also a little more to the story, each website uses different font values, Wikipedia is HUGE when you use the 125, 125 defaults with styling only but YouTube is tiny.

Wikipedia with Adding:

Wikipedia with Styling:

This shit is very very weird and even more so annoying. Anyway the new feature #8 should make this "feature" fixable by the user since they will be able to reduce the font on Wikipedia and increase it on YouTube to their liking.

So I'm mostly preferring the Styling method over the old adding method but I have to be absolutely sure about it.

Testing websites now, the best one is Twitter and Reddit is second, so responsive and clean, it always worked well. If anyone working in Twitter is reading this, good job guys, your site is dope!

Anyway long note but it's necessary because this is a fundamental change to the extension. We have to be somewhat careful with this.

[basshelal]

Minor update:

After much testing, I've found that the Styling method is generally a bad idea as it's inconsistent and has weird behaviour, Adding is much more consistent.

Also, it seems the only website that has weird behavior is YouTube. We may either make YouTube use styling or find some other fix for the one fucking site that doesn't behave like everyone else, in which case the fix probably won't come out until another update.

I think going with styling for YouTube may be a decent idea until we find a better fix.

Adding should be used over Styling everywhere except maybe YouTube.

[basshelal]

Accidentally closed, this hasn't been fixed yet

[basshelal]

Removed the Styling method for now, it's very inconsistent and has strange behaviors.

I have no idea what to do with this bug now.

Like I said, YouTube is the only place where this is an issue because they're the only place that does things the way they do!

Twitter is also single page, as is reddit, but they remove and add HTMLElements, YouTube doesn't remove or add HTMLElements, it keeps the same ones and just changes their attributes and data, which is fine if it removed rogue elements but IT DOESN'T!!! Which is just bizarre!

Wudooh adds new HTMLElements with the new styling and the old data, YouTube is ok with this and everything is fine, which is why everything works on YouTube initially.

Then we go to another page on YouTube similar to the one we're on (playlist to playlist, video to video etc) and suddenly rogue or new HTMLElements (like those Wudooh adds) are completely ignored and left untouched, it's so strange.

I'm starting to give up to be honest, I don't know how to properly fix this anymore and I don't even know if it's worth it since a page reload fixes it and YouTube isn't the most text heavy website anyway. It's taking too much time and too much stress for ONE outlier website.

I need help!