Usage of DOM to create HTML

[An0n3m0us]

Related to #190
Conflicting changes with #201

The aim of this PR is simply to convert all of the strings used to create HTML code into JS DOM.
I have opened this as a draft PR for discussion and clarification purposes.

• Convert all HTML strings to DOM
• Check that nothing has been lost in conversion
• Clean parts of the code that have been added

[An0n3m0us]

@JettBurns14 #201 is kinda bothering me as its code needs to be converted too.
Shall I just leave it for now or implement it into this PR?

[An0n3m0us]

Need to work out how to convert this part to DOM:
https://github.com/ka-extension/ka-extension-ts/pull/211/files#diff-248ec50f84308b93508694104399e054557d9335b712e479bda100feaaced45dR110

Then remove this unused variable after:
https://github.com/ka-extension/ka-extension-ts/pull/211/files#diff-248ec50f84308b93508694104399e054557d9335b712e479bda100feaaced45dR90

Also, I don't really like this code:
https://github.com/ka-extension/ka-extension-ts/pull/211/files#diff-6162d8c9873071bf9f26293887dc9669d8c375d34f5e3457fc57e2cbc17cbb60R108-R125
Need to work out a better method of doing it.

[JettBurns14]

I like this, but question: can you check some of our other code and see which way we created HTML there? JS DOM or strings? I can't remember the overall method we used, though I can tell we have a mix in this area.

I like strings, since it's more compact and visual, but JS DOM may be more "correct". TBH we should technically use a lib like React DOM, designed exactly for this. Not sure if we can import just that part of React, otherwise if it's too large we should use something else. But yeah, let me know how we've mostly done it so far.

[An0n3m0us]

I think I don't quite understand what you mean by other code.

I went through most of the files and I changed the HTML strings but left the JS DOM parts of the code that already existed.
But yeah, it seems there was a mix of JS DOM and HTML strings used.

For instance, in buttons.ts, DOM was used to create a button, but <span> was use in the innerHTML code for the button.
https://github.com/ka-extension/ka-extension-ts/pull/211/files#diff-93a2269acab5a1e96b066b36204a2085f266ac93c1fed5affbe566c7bdc3c345R72

There are still one or two files left that I need to do the conversions for though.

[JettBurns14]

I just meant check other code in src/, but it's fine, looks like we mostly use JS DOM with string literals mixed in when we got lazy haha.

Yeah, go ahead and switch the string literals with HTML tags inside to JS DOM for all files. There are obviously places we don't need to convert the literals, like here, since they don't contain HTML. Be sure to double check all the elements you're re-writing, I believe you missed something earlier, which I'll point out.

[MatthiasPortzel]

You shouldn’t need to use innerHTML at all. If it’s not HTML content, don’t worry about how to escape it, just set .textContent instead.

[MatthiasPortzel]

I don’t know what @JettBurns14 is talking about, I don’t know what escapeHTML is.

[JettBurns14]

Good point @matthiassaihttam, textContent would work better here. No need to escape that data then.

escapeHTML is imported from ./util/text-util here. Ethan built most of the utilities.

[An0n3m0us]

I have now completed the conversion of all of the HTML strings that I have found, so I've removed the draft status on the PR.
If someone could do a once-over on the code, that would be great.

[MatthiasPortzel]

This looked mostly good when I tested it. There were issues that arose from not properly rendering HTML in the notifications. I'll need to go through the code at some point and figure out where that issue is, and how Firefox would have us fix it.

[An0n3m0us]

Hmm, I'm pretty sure I checked everything when I last updated this PR though.
But as with my other PRs, I'm planning to get back to this one sometime in mid May.