Unify web_viewer/index.html and index_bundled.html (#4720)

jprochazk · web-flow · commit 6131375ec8e7 · 2024-01-08T20:40:17.000+01:00
### What It turns out this was already mostly done. The only change needed was removing the analytics script and adding it via JS when we are served on `app.rerun.io`. Fixes #2156 Fixes #2428 ### Checklist * [x] I have read and agree to [Contributor Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and the [Code of Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md) * [x] I've included a screenshot or gif (if applicable) * [x] I have tested the web demo (if applicable): * Using newly built examples: [app.rerun.io](https://app.rerun.io/pr/4720/index.html) * Using examples from latest `main` build: [app.rerun.io](https://app.rerun.io/pr/4720/index.html?manifest_url=https://app.rerun.io/version/main/examples_manifest.json) * Using full set of examples from `nightly` build: [app.rerun.io](https://app.rerun.io/pr/4720/index.html?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json) * [x] The PR title and labels are set such as to maximize their usefulness for the next release's CHANGELOG - [PR Build Summary](https://build.rerun.io/pr/4720) - [Docs preview](https://rerun.io/preview/9d10741f8a8a21de05f24fca7f82ebb130d2d063/docs)  - [Examples preview](https://rerun.io/preview/9d10741f8a8a21de05f24fca7f82ebb130d2d063/examples)  - [Recent benchmark results](https://build.rerun.io/graphs/crates.html) - [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)
diff --git a/crates/re_web_viewer_server/Cargo.toml b/crates/re_web_viewer_server/Cargo.toml
@@ -18,7 +18,7 @@ include = [
 
   # Matches the files in crates/re_web_viewer_server/src/lib.rs
   "web_viewer/favicon.svg",
-  "web_viewer/index_bundled.html",
+  "web_viewer/index.html",
   "web_viewer/re_viewer_bg.wasm",
   "web_viewer/re_viewer.js",
   "web_viewer/sw.js",
diff --git a/crates/re_web_viewer_server/src/lib.rs b/crates/re_web_viewer_server/src/lib.rs
@@ -24,7 +24,7 @@ mod data {
     #![allow(clippy::large_include_file)]
 
     // If you add/remove/change the paths here, also update the include-list in `Cargo.toml`!
-    pub const INDEX_HTML: &[u8] = include_bytes!("../web_viewer/index_bundled.html");
+    pub const INDEX_HTML: &[u8] = include_bytes!("../web_viewer/index.html");
     pub const FAVICON: &[u8] = include_bytes!("../web_viewer/favicon.svg");
     pub const SW_JS: &[u8] = include_bytes!("../web_viewer/sw.js");
     pub const VIEWER_JS: &[u8] = include_bytes!("../web_viewer/re_viewer.js");
diff --git a/web_viewer/index.html b/web_viewer/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<!-- The version of index.html that will be served by app.rerun.io -->
+<!-- Rerun SDK-bundled web viewer. -->
 <html>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
@@ -146,12 +146,6 @@
     <!-- The Wasm code will resize the canvas dynamically -->
     <canvas id="the_canvas_id" class="hidden"></canvas>
 
-    <script
-      src="https://fifteen-thirtyeight.rerun.io/script.js"
-      data-site="QKMCQFTQ"
-      defer
-    ></script>
-
     <script>
       // The `--no-modules`-generated JS from `wasm-bindgen` attempts to use
       // `WebAssembly.instantiateStreaming` to instantiate the wasm module,
@@ -169,6 +163,14 @@
     <script src="re_viewer.js"></script>
 
     <script>
+      if (window.location.hostname == "app.rerun.io") {
+        const script = document.createElement("script");
+        script.src = "https://fifteen-thirtyeight.rerun.io/script.js";
+        script.dataset.site = "QKMCQFTQ";
+        script.defer = true;
+        document.body.appendChild(script);
+      }
+
       function show_center_html(html) {
         center_text_elem = document.getElementById("center_text");
         center_text_elem.innerHTML = html;
@@ -199,12 +201,13 @@
         )
       ) {
         show_center_html(`
-                <p>
-                    Rerun is not yet supported on mobile browsers.
-                </p>
-                <p>
-                    <a class="button" href="#" id="try_anyways">Try anyways</a>
-                </p>`);
+          <p>
+              Rerun is not yet supported on mobile browsers.
+          </p>
+          <p>
+              <a class="button" href="#" id="try_anyways">Try anyways</a>
+          </p>
+        `);
         document
           .querySelector("#try_anyways")
           .addEventListener("click", function (event) {
@@ -312,13 +315,14 @@
             "`navigator.gpu` is undefined. This indicates lack of WebGPU support.",
           );
           show_center_html(`
-                    <p class="strong">
-                        Missing WebGPU support.
-                    </p>
-                    <p class="subdued">
-                        This version of Rerun requires WebGPU support which is not available in your browser.
-                        Either try a different browser or use the WebGL version of Rerun.
-                    </p>`);
+            <p class="strong">
+                Missing WebGPU support.
+            </p>
+            <p class="subdued">
+                This version of Rerun requires WebGPU support which is not available in your browser.
+                Either try a different browser or use the WebGL version of Rerun.
+            </p>
+          `);
           return;
         }
 
@@ -333,16 +337,17 @@
             document.getElementById("the_canvas_id").remove();
 
             show_center_html(`
-                        <p class="strong">
-                            Rerun has crashed.
-                        </p>
-                        <pre align="left">${handle.panic_message()}</pre>
-                        <p>
-                            See the console for details.
-                        </p>
-                        <p>
-                            Reload the page to try again.
-                        </p>`);
+              <p class="strong">
+                  Rerun has crashed.
+              </p>
+              <pre align="left">${handle.panic_message()}</pre>
+              <p>
+                  See the console for details.
+              </p>
+              <p>
+                  Reload the page to try again.
+              </p>
+            `);
           } else {
             let delay_ms = 1000;
             setTimeout(check_for_panic, delay_ms);
@@ -381,15 +386,16 @@
 
         hide_canvas();
         show_center_html(`
-                <p>
-                    An error occurred during loading:
-                </p>
-                <p style="font-family:Courier New">
-                    ${error}
-                </p>
-                <p style="font-size:14px">
-                        Make sure you use a modern browser with ${render_backend_name} and Wasm enabled.
-                </p>`);
+          <p>
+              An error occurred during loading:
+          </p>
+          <p style="font-family:Courier New">
+              ${error}
+          </p>
+          <p style="font-size:14px">
+                  Make sure you use a modern browser with ${render_backend_name} and Wasm enabled.
+          </p>
+        `);
       }
     </script>
   </body>
diff --git a/web_viewer/index_bundled.html b/web_viewer/index_bundled.html
