Fix #5155: add commandlineterriblewebsitefix setting to workaround server-side vandalism

I am not going to add detection for every bazillion ways web frameworks
can break Tridactyl, so let's add a setting so that people who insist
on visiting bad websites can still do so

doc/troubleshooting.md

@@ -8,6 +8,8 @@ If changing one of these settings fixes your bug, please visit the corresponding
 
 -   `:seturl $URL_OF_THE_WEBSITE superignore true` and then reload the page. This totally disables Tridactyl from loading on the page. No specific issue, please make a new one: https://github.com/tridactyl/tridactyl/issues/821
 
+-   "i can't open the commandline :((" `:seturl [the website you're on] commmandlineterriblewebsitefix true`. No need to file an issue with us, but maybe consider telling the website owner that they should [make their website less bad](https://infrequently.org/2024/11/if-not-react-then-what/). Our relevant issue is [#5050](https://github.com/tridactyl/tridactyl/issues/5050)
+
 # Firefox settings that can break Tridactyl
 
 If you have `privacy.resistFingerprinting` set to `true` in `about:config`, Tridactyl will have a lot of trouble understanding your keypresses. See [#760](https://github.com/tridactyl/tridactyl/issues/760#issuecomment-433679201) and [#1699](https://github.com/tridactyl/tridactyl/issues/1699). We strongly recommend setting it to `false`, as it is by default.

src/content/commandline_content.ts

@@ -47,16 +47,22 @@ async function init() {
         await theme(window.document.querySelector(":root"))
 
         // Fix #5050: reinsert iframe after React throws a tantrum
-        new MutationObserver(changes =>
-            changes.find(change => {
-                for (const addedNode of change.addedNodes) {
-                    // detect React server-side render failure by added <link rel='modulepreload'>
-                    if (addedNode instanceof HTMLLinkElement && addedNode.rel === "modulepreload") {
-                        reactIsCrap()
-                    }
-                }
-            })
-        ).observe(cmdline_iframe.parentNode, { childList: true, subtree: true })
+        config.getAsync("commandlineterriblewebsitefix").then(enabled => {
+            if (enabled == "true") {
+                reactIsCrap()
+            } else {
+                new MutationObserver(changes =>
+                    changes.find(change => {
+                        for (const addedNode of change.addedNodes) {
+                            // detect React server-side render failure by added <link rel='modulepreload'>
+                            if (addedNode instanceof HTMLLinkElement && addedNode.rel === "modulepreload") {
+                                reactIsCrap()
+                            }
+                        }
+                    })
+                ).observe(cmdline_iframe.parentNode, { childList: true, subtree: true })
+            }
+        })
     }
 }
 

src/lib/config.ts

@@ -863,6 +863,13 @@ export class default_config {
      */
     preventautofocusjackhammer: "true" | "false" = "false"
 
+    /**
+     * Run a loop forcing the commandline to be reinserted if it is deleted as is typically the case after server-side rendering of bloated web frameworks such as React. Uses some CPU, so enable only on specific websites with `:seturl https://badwebsite\.com commandlineterriblewebsitefix true`.
+     *
+     * A better workaround is to stop visiting websites that have so little respect for their users.
+     */
+    commandlineterriblewebsitefix: "true" | "false" = "false"
+
     /**
      * Whether to use Tridactyl's (bad) smooth scrolling.
      */