Add an about:memory page (#35728)

This patch exposes a servo internal DOM API that is only made available to about:
pages on the navigator object to request memory reports. The about:memory page itself is
loaded like other html resources (eg. bad cert, net error) and makes use of this new API.

On the implementation side, notable changes:
- components/script/routed_promise.rs abstracts the setup used to fulfill a promise when the
  work needs to be routed through the constellation. The goal is to migrate other similar
  promise APIs in followup (eg. dom/webgpu/gpu.rs, bluetooth.rs).
- a new message is added to request a report from the memory reporter, and the memory reporter
  creates a json representation of the set of memory reports.
- the post-processing of memory reports is done in Javascript in the about-memory.html page,
  providing the same results as the current Rust code that outputs to stdout. We can decide
  later if we want to remove the current output.

Signed-off-by: webbeef <me@webbeef.org>

17 files changed, 425 insertions, 1 deletions

diff --git a/components/constellation/constellation.rs b/components/constellation/constellation.rs
index 3502709f078..4f49a5873fa 100644
--- a/components/constellation/constellation.rs
+++ b/components/constellation/constellation.rs
@@ -1735,6 +1735,11 @@ where
                 }
             },
             FromScriptMsg::IFrameSizes(iframe_sizes) => self.handle_iframe_size_msg(iframe_sizes),
+            FromScriptMsg::ReportMemory(sender) => {
+                // get memory report and send it back.
+                self.mem_profiler_chan
+                    .send(mem::ProfilerMsg::Report(sender));
+            },
         }
     }
 
diff --git a/components/constellation/tracing.rs b/components/constellation/tracing.rs
index 392a6bbcc70..9993dcb1686 100644
--- a/components/constellation/tracing.rs
+++ b/components/constellation/tracing.rs
@@ -185,6 +185,7 @@ mod from_script {
                 Self::GetWebGPUChan(..) => target!("GetWebGPUChan"),
                 Self::TitleChanged(..) => target!("TitleChanged"),
                 Self::IFrameSizes(..) => target!("IFrameSizes"),
+                Self::ReportMemory(..) => target!("ReportMemory"),
             }
         }
     }
diff --git a/components/net/fetch/methods.rs b/components/net/fetch/methods.rs
index 4d40cb78b15..a2c690fb53d 100644
--- a/components/net/fetch/methods.rs
+++ b/components/net/fetch/methods.rs
@@ -12,6 +12,7 @@ use base64::engine::general_purpose;
 use content_security_policy as csp;
 use crossbeam_channel::Sender;
 use devtools_traits::DevtoolsControlMsg;
+use embedder_traits::resources::{self, Resource};
 use headers::{AccessControlExposeHeaders, ContentType, HeaderMapExt};
 use http::header::{self, HeaderMap, HeaderName};
 use http::{HeaderValue, Method, StatusCode};
@@ -680,6 +681,17 @@ fn create_blank_reply(url: ServoUrl, timing_type: ResourceTimingType) -> Respons
     response
 }
 
+fn create_about_memory(url: ServoUrl, timing_type: ResourceTimingType) -> Response {
+    let mut response = Response::new(url, ResourceFetchTiming::new(timing_type));
+    response
+        .headers
+        .typed_insert(ContentType::from(mime::TEXT_HTML_UTF_8));
+    *response.body.lock().unwrap() =
+        ResponseBody::Done(resources::read_bytes(Resource::AboutMemoryHTML));
+    response.status = HttpStatus::default();
+    response
+}
+
 /// Handle a request from the user interface to ignore validation errors for a certificate.
 fn handle_allowcert_request(request: &mut Request, context: &FetchContext) -> io::Result<()> {
     let error = |string| Err(io::Error::new(io::ErrorKind::Other, string));
@@ -739,6 +751,7 @@ async fn scheme_fetch(
     let scheme = url.scheme();
     match scheme {
         "about" if url.path() == "blank" => create_blank_reply(url, request.timing_type()),
+        "about" if url.path() == "memory" => create_about_memory(url, request.timing_type()),
 
         "chrome" if url.path() == "allowcert" => {
             if let Err(error) = handle_allowcert_request(request, context) {
diff --git a/components/profile/mem.rs b/components/profile/mem.rs
index 5890b3dbef5..389a989861c 100644
--- a/components/profile/mem.rs
+++ b/components/profile/mem.rs
@@ -15,7 +15,8 @@ use ipc_channel::ipc::{self, IpcReceiver};
 use ipc_channel::router::ROUTER;
 use parking_lot::{Condvar, Mutex};
 use profile_traits::mem::{
-    ProfilerChan, ProfilerMsg, ReportKind, Reporter, ReporterRequest, ReportsChan,
+    MemoryReportResult, ProfilerChan, ProfilerMsg, Report, ReportKind, Reporter, ReporterRequest,
+    ReportsChan,
 };
 use profile_traits::path;
 
@@ -143,10 +144,35 @@ impl Profiler {
                 true
             },
 
+            ProfilerMsg::Report(sender) => {
+                let reports = self.collect_reports();
+                let content = serde_json::to_string(&reports)
+                    .unwrap_or_else(|_| "{ error: \"failed to create memory report\"}".to_owned());
+                let _ = sender.send(MemoryReportResult { content });
+                // Notify the timer thread.
+                let (mutex, cvar) = &*self.notifier;
+                let mut done = mutex.lock();
+                *done = true;
+                cvar.notify_one();
+                true
+            },
+
             ProfilerMsg::Exit => false,
         }
     }
 
+    fn collect_reports(&self) -> Vec<Report> {
+        let mut result = vec![];
+        for reporter in self.reporters.values() {
+            let (chan, port) = ipc::channel().unwrap();
+            reporter.collect_reports(ReportsChan(chan));
+            if let Ok(mut reports) = port.recv() {
+                result.append(&mut reports);
+            }
+        }
+        result
+    }
+
     fn handle_print_msg(&self) {
         let elapsed = self.created.elapsed();
         println!("Begin memory reports {}", elapsed.as_secs());
diff --git a/components/script/dom/bindings/interface.rs b/components/script/dom/bindings/interface.rs
index c830d30d44d..a8d08a7727b 100644
--- a/components/script/dom/bindings/interface.rs
+++ b/components/script/dom/bindings/interface.rs
@@ -43,6 +43,8 @@ use crate::dom::bindings::principals::ServoJSPrincipals;
 use crate::dom::bindings::utils::{
     DOM_PROTOTYPE_SLOT, DOMJSClass, JSCLASS_DOM_GLOBAL, ProtoOrIfaceArray, get_proto_or_iface_array,
 };
+use crate::dom::globalscope::GlobalScope;
+use crate::realms::{AlreadyInRealm, InRealm};
 use crate::script_runtime::JSContext as SafeJSContext;
 
 /// The class of a non-callback interface object.
@@ -423,6 +425,16 @@ pub(crate) fn is_exposed_in(object: HandleObject, globals: Globals) -> bool {
     }
 }
 
+/// The navigator.servo api is only exposed to about: pages except about:blank
+pub(crate) fn is_servo_internal(cx: SafeJSContext, _object: HandleObject) -> bool {
+    unsafe {
+        let in_realm_proof = AlreadyInRealm::assert_for_cx(cx);
+        let global_scope = GlobalScope::from_context(*cx, InRealm::Already(&in_realm_proof));
+        let url = global_scope.get_url();
+        url.scheme() == "about" && url.as_str() != "about:blank"
+    }
+}
+
 /// Define a property with a given name on the global object. Should be called
 /// through the resolve hook.
 pub(crate) fn define_on_global_object(
diff --git a/components/script/dom/mod.rs b/components/script/dom/mod.rs
index 340734bfe5a..341b0bdd572 100644
--- a/components/script/dom/mod.rs
+++ b/components/script/dom/mod.rs
@@ -527,6 +527,7 @@ pub(crate) mod serviceworkercontainer;
 pub(crate) mod serviceworkerglobalscope;
 #[allow(dead_code)]
 pub(crate) mod serviceworkerregistration;
+pub(crate) mod servointernals;
 #[allow(dead_code)]
 pub(crate) mod servoparser;
 pub(crate) mod shadowroot;
diff --git a/components/script/dom/navigator.rs b/components/script/dom/navigator.rs
index f32edc364ee..492cb89fb0f 100644
--- a/components/script/dom/navigator.rs
+++ b/components/script/dom/navigator.rs
@@ -27,6 +27,7 @@ use crate::dom::navigatorinfo;
 use crate::dom::permissions::Permissions;
 use crate::dom::pluginarray::PluginArray;
 use crate::dom::serviceworkercontainer::ServiceWorkerContainer;
+use crate::dom::servointernals::ServoInternals;
 #[cfg(feature = "webgpu")]
 use crate::dom::webgpu::gpu::GPU;
 use crate::dom::window::Window;
@@ -59,6 +60,7 @@ pub(crate) struct Navigator {
     gpu: MutNullableDom<GPU>,
     /// <https://www.w3.org/TR/gamepad/#dfn-hasgamepadgesture>
     has_gamepad_gesture: Cell<bool>,
+    servo_internals: MutNullableDom<ServoInternals>,
 }
 
 impl Navigator {
@@ -79,6 +81,7 @@ impl Navigator {
             #[cfg(feature = "webgpu")]
             gpu: Default::default(),
             has_gamepad_gesture: Cell::new(false),
+            servo_internals: Default::default(),
         }
     }
 
@@ -301,4 +304,10 @@ impl NavigatorMethods<crate::DomTypeHolder> for Navigator {
     fn HardwareConcurrency(&self) -> u64 {
         hardware_concurrency()
     }
+
+    /// <https://servo.org/internal-no-spec>
+    fn Servo(&self) -> DomRoot<ServoInternals> {
+        self.servo_internals
+            .or_init(|| ServoInternals::new(&self.global(), CanGc::note()))
+    }
 }
diff --git a/components/script/dom/servointernals.rs b/components/script/dom/servointernals.rs
new file mode 100644
index 00000000000..7fe0bf85122
--- /dev/null
+++ b/components/script/dom/servointernals.rs
@@ -0,0 +1,62 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+use std::rc::Rc;
+
+use dom_struct::dom_struct;
+use profile_traits::mem::MemoryReportResult;
+use script_traits::ScriptMsg;
+
+use crate::dom::bindings::codegen::Bindings::ServoInternalsBinding::ServoInternalsMethods;
+use crate::dom::bindings::error::Error;
+use crate::dom::bindings::reflector::{DomGlobal, Reflector, reflect_dom_object};
+use crate::dom::bindings::root::DomRoot;
+use crate::dom::globalscope::GlobalScope;
+use crate::dom::promise::Promise;
+use crate::realms::InRealm;
+use crate::routed_promise::{RoutedPromiseListener, route_promise};
+use crate::script_runtime::CanGc;
+
+#[dom_struct]
+pub(crate) struct ServoInternals {
+    reflector_: Reflector,
+}
+
+impl ServoInternals {
+    pub fn new_inherited() -> ServoInternals {
+        ServoInternals {
+            reflector_: Reflector::new(),
+        }
+    }
+
+    pub(crate) fn new(global: &GlobalScope, can_gc: CanGc) -> DomRoot<ServoInternals> {
+        reflect_dom_object(Box::new(ServoInternals::new_inherited()), global, can_gc)
+    }
+}
+
+impl ServoInternalsMethods<crate::DomTypeHolder> for ServoInternals {
+    /// <https://servo.org/internal-no-spec>
+    fn ReportMemory(&self, comp: InRealm, can_gc: CanGc) -> Rc<Promise> {
+        let global = &self.global();
+        let promise = Promise::new_in_current_realm(comp, can_gc);
+        let sender = route_promise(&promise, self);
+        let script_to_constellation_chan = global.script_to_constellation_chan();
+        if script_to_constellation_chan
+            .send(ScriptMsg::ReportMemory(sender))
+            .is_err()
+        {
+            promise.reject_error(Error::Operation, can_gc);
+        }
+        promise
+    }
+}
+
+impl RoutedPromiseListener for ServoInternals {
+    type Response = MemoryReportResult;
+
+    #[cfg_attr(crown, allow(crown::unrooted_must_root))]
+    fn handle_response(&self, response: Self::Response, promise: &Rc<Promise>, can_gc: CanGc) {
+        promise.resolve_native(&response.content, can_gc);
+    }
+}
diff --git a/components/script/lib.rs b/components/script/lib.rs
index fdbe43d1ba7..8c09e30e6a1 100644
--- a/components/script/lib.rs
+++ b/components/script/lib.rs
@@ -52,6 +52,7 @@ mod navigation;
 mod network_listener;
 #[allow(dead_code)]
 mod realms;
+mod routed_promise;
 #[allow(dead_code)]
 mod script_module;
 pub(crate) mod script_runtime;
diff --git a/components/script/routed_promise.rs b/components/script/routed_promise.rs
new file mode 100644
index 00000000000..5a68287f450
--- /dev/null
+++ b/components/script/routed_promise.rs
@@ -0,0 +1,70 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+use std::rc::Rc;
+
+use ipc_channel::ipc::{self, IpcSender};
+use ipc_channel::router::ROUTER;
+use serde::Serialize;
+use serde::de::DeserializeOwned;
+
+use crate::dom::bindings::refcounted::{Trusted, TrustedPromise};
+use crate::dom::bindings::reflector::{DomGlobal, DomObject};
+use crate::dom::promise::Promise;
+use crate::script_runtime::CanGc;
+
+pub(crate) trait RoutedPromiseListener {
+    type Response: Serialize + DeserializeOwned + Send;
+
+    fn handle_response(&self, response: Self::Response, promise: &Rc<Promise>, can_gc: CanGc);
+}
+
+pub(crate) struct RoutedPromiseContext<T: RoutedPromiseListener + DomObject> {
+    trusted: TrustedPromise,
+    receiver: Trusted<T>,
+}
+
+impl<T: RoutedPromiseListener + DomObject> RoutedPromiseContext<T> {
+    #[cfg_attr(crown, allow(crown::unrooted_must_root))]
+    fn response(self, response: T::Response, can_gc: CanGc) {
+        let promise = self.trusted.root();
+        self.receiver
+            .root()
+            .handle_response(response, &promise, can_gc);
+    }
+}
+
+pub(crate) fn route_promise<T: RoutedPromiseListener + DomObject + 'static>(
+    promise: &Rc<Promise>,
+    receiver: &T,
+) -> IpcSender<T::Response> {
+    let (action_sender, action_receiver) = ipc::channel().unwrap();
+    let task_source = receiver
+        .global()
+        .task_manager()
+        .dom_manipulation_task_source()
+        .to_sendable();
+    let mut trusted: Option<TrustedPromise> = Some(TrustedPromise::new(promise.clone()));
+    let trusted_receiver = Trusted::new(receiver);
+    ROUTER.add_typed_route(
+        action_receiver,
+        Box::new(move |message| {
+            let trusted = if let Some(trusted) = trusted.take() {
+                trusted
+            } else {
+                error!("RoutedPromiseListener callback called twice!");
+                return;
+            };
+
+            let context = RoutedPromiseContext {
+                trusted,
+                receiver: trusted_receiver.clone(),
+            };
+            task_source.queue(task!(routed_promise_task: move|| {
+                context.response(message.unwrap(), CanGc::note());
+            }));
+        }),
+    );
+    action_sender
+}
diff --git a/components/script_bindings/codegen/Bindings.conf b/components/script_bindings/codegen/Bindings.conf
index 92a2ea52242..81cccd9769a 100644
--- a/components/script_bindings/codegen/Bindings.conf
+++ b/components/script_bindings/codegen/Bindings.conf
@@ -498,6 +498,11 @@ DOMInterfaces = {
     'canGc': ['Register'],
 },
 
+'ServoInternals': {
+    'inRealms': ['ReportMemory'],
+    'canGc': ['ReportMemory'],
+},
+
 'ShadowRoot': {
     'canGc': ['ElementFromPoint', 'ElementsFromPoint', 'SetInnerHTML'],
 },
diff --git a/components/script_bindings/webidls/ServoInternals.webidl b/components/script_bindings/webidls/ServoInternals.webidl
new file mode 100644
index 00000000000..af3dc7b35e6
--- /dev/null
+++ b/components/script_bindings/webidls/ServoInternals.webidl
@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+// Private interfaces that are only used for internal Servo usage
+// like about: pages.
+
+// This interface is entirely internal to Servo, and should not be accessible to
+// web pages.
+[Exposed=Window,
+Func="dom::bindings::interface::is_servo_internal"]
+interface ServoInternals {
+    Promise<object> reportMemory();
+};
+
+partial interface Navigator {
+    [Func="dom::bindings::interface::is_servo_internal"]
+    readonly attribute ServoInternals servo;
+};
diff --git a/components/shared/embedder/resources.rs b/components/shared/embedder/resources.rs
index 16f346a1663..a5c34a33f30 100644
--- a/components/shared/embedder/resources.rs
+++ b/components/shared/embedder/resources.rs
@@ -113,6 +113,8 @@ pub enum Resource {
     /// The page contains a js function `setData` that will then be used to build the list of directory.
     /// It can be empty but then nothing will be displayed when a directory listing is requested.
     DirectoryListingHTML,
+    /// A HTML page that is used for the about:memory url.
+    AboutMemoryHTML,
 }
 
 impl Resource {
@@ -132,6 +134,7 @@ impl Resource {
             Resource::MediaControlsJS => "media-controls.js",
             Resource::CrashHTML => "crash.html",
             Resource::DirectoryListingHTML => "directory-listing.html",
+            Resource::AboutMemoryHTML => "about-memory.html",
         }
     }
 }
@@ -189,6 +192,9 @@ fn resources_for_tests() -> Box<dyn ResourceReaderMethods + Sync + Send> {
                 Resource::DirectoryListingHTML => {
                     &include_bytes!("../../../resources/directory-listing.html")[..]
                 },
+                Resource::AboutMemoryHTML => {
+                    &include_bytes!("../../../resources/about-memory.html")[..]
+                },
             }
             .to_owned()
         }
diff --git a/components/shared/profile/mem.rs b/components/shared/profile/mem.rs
index 5b92d2eee17..f2d67dec43b 100644
--- a/components/shared/profile/mem.rs
+++ b/components/shared/profile/mem.rs
@@ -190,6 +190,13 @@ macro_rules! path {
     }}
 }
 
+/// The results produced by the memory reporter.
+#[derive(Debug, Deserialize, Serialize)]
+pub struct MemoryReportResult {
+    /// The stringified output.
+    pub content: String,
+}
+
 /// Messages that can be sent to the memory profiler thread.
 #[derive(Debug, Deserialize, Serialize)]
 pub enum ProfilerMsg {
@@ -208,4 +215,7 @@ pub enum ProfilerMsg {
 
     /// Tells the memory profiler to shut down.
     Exit,
+
+    /// Triggers sending back the memory profiling metrics,
+    Report(IpcSender<MemoryReportResult>),
 }
diff --git a/components/shared/script/script_msg.rs b/components/shared/script/script_msg.rs
index 5519fd915df..21ddd4fce18 100644
--- a/components/shared/script/script_msg.rs
+++ b/components/shared/script/script_msg.rs
@@ -27,6 +27,7 @@ use style_traits::CSSPixel;
 #[cfg(feature = "webgpu")]
 use webgpu::{WebGPU, WebGPUResponse, wgc};
 
+use crate::mem::MemoryReportResult;
 use crate::{
     AnimationState, AuxiliaryWebViewCreationRequest, BroadcastMsg, DocumentState,
     IFrameLoadInfoWithData, LoadData, MessagePortMsg, NavigationHistoryBehavior, PortMessageTask,
@@ -248,6 +249,8 @@ pub enum ScriptMsg {
     TitleChanged(PipelineId, String),
     /// Notify the constellation that the size of some `<iframe>`s has changed.
     IFrameSizes(Vec<IFrameSizeMsg>),
+    /// Request results from the memory reporter.
+    ReportMemory(IpcSender<MemoryReportResult>),
 }
 
 impl fmt::Debug for ScriptMsg {
@@ -308,6 +311,7 @@ impl fmt::Debug for ScriptMsg {
             GetWebGPUChan(..) => "GetWebGPUChan",
             TitleChanged(..) => "TitleChanged",
             IFrameSizes(..) => "IFramSizes",
+            ReportMemory(..) => "ReportMemory",
         };
         write!(formatter, "ScriptMsg::{}", variant)
     }
diff --git a/ports/servoshell/egl/android/resources.rs b/ports/servoshell/egl/android/resources.rs
index c6653bf0bc0..d39015aece1 100644
--- a/ports/servoshell/egl/android/resources.rs
+++ b/ports/servoshell/egl/android/resources.rs
@@ -42,6 +42,9 @@ impl ResourceReaderMethods for ResourceReaderInstance {
             Resource::DirectoryListingHTML => {
                 &include_bytes!("../../../../resources/directory-listing.html")[..]
             },
+            Resource::AboutMemoryHTML => {
+                &include_bytes!("../../../../resources/about-memory.html")[..]
+            },
         })
     }
 
diff --git a/resources/about-memory.html b/resources/about-memory.html
new file mode 100644
index 00000000000..380cee3d6ec
--- /dev/null
+++ b/resources/about-memory.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>about:memory</title>
+    <script>
+      document.addEventListener("DOMContentLoaded", start);
+
+      function insertNode(root, report) {
+        let currentNode = root;
+        for (let path of report.path) {
+          if (!currentNode[path]) {
+            currentNode[path] = { total: 0, container: true };
+          }
+          currentNode = currentNode[path];
+          currentNode.total += report.size;
+        }
+        currentNode.size = report.size;
+        currentNode.container = false;
+      }
+
+      function formatBytes(bytes) {
+        if (bytes < 1024) {
+          return bytes + " B";
+        } else if (bytes < 1024 * 1024) {
+          return (bytes / 1024).toFixed(2) + " KiB";
+        } else if (bytes < 1024 * 1024 * 1024) {
+          return (bytes / (1024 * 1024)).toFixed(2) + " MiB";
+        } else {
+          return (bytes / (1024 * 1024 * 1024)).toFixed(2) + " GiB";
+        }
+      }
+
+      function formattedSize(size) {
+        // Use enough padding to take into account the "MiB" part.
+        return formatBytes(size).padStart(10);
+      }
+
+      function convertNodeToDOM(node, name = null) {
+        let result = document.createDocumentFragment();
+
+        if (node.container) {
+          let details = document.createElement("details");
+          let summary = document.createElement("summary");
+          summary.textContent = `${formattedSize(node.total)} -- ${name}`;
+          details.append(summary);
+          result.append(details);
+
+          // Add the children in descending order of total size.
+          let entries = Object.entries(node)
+            .filter((item) => {
+              return !["total", "size", "container"].includes(item[0]);
+            })
+            .sort((a, b) => b[1].total - a[1].total)
+            .forEach((item) =>
+              details.append(convertNodeToDOM(item[1], item[0]))
+            );
+        } else {
+          let inner = document.createElement("div");
+          inner.textContent = `${formattedSize(node.size)} -- ${name}`;
+          result.append(inner);
+        }
+
+        return result;
+      }
+
+      function start() {
+        window.startButton.onclick = async () => {
+          let content = await navigator.servo.reportMemory();
+          let reports = JSON.parse(content);
+          if (reports.error) {
+            console.error(reports.error);
+            return;
+          }
+          window.report.innerHTML = "";
+          window.report.classList.remove("hidden");
+
+          let explicitRoot = {};
+          let nonExplicitRoot = {};
+
+          let jemallocHeapReportedSize = 0;
+          let systemHeapReportedSize = 0;
+
+          let jemallocHeapAllocatedSize = NaN;
+          let systemHeapAllocatedSize = NaN;
+
+          reports.forEach((report) => {
+            // Add "explicit" to the start of the path, when appropriate.
+            if (report.kind.startsWith("Explicit")) {
+              report.path.unshift("explicit");
+            }
+
+            // Update the reported fractions of the heaps, when appropriate.
+            if (report.kind == "ExplicitJemallocHeapSize") {
+              jemallocHeapReportedSize += report.size;
+            } else if (report.kind == "ExplicitSystemHeapSize") {
+              systemHeapReportedSize += report.size;
+            }
+
+            // Record total size of the heaps, when we see them.
+            if (report.path.length == 1) {
+              if (report.path[0] == "jemalloc-heap-allocated") {
+                jemallocHeapAllocatedSize = report.size;
+              } else if (report.path[0] == "system-heap-allocated") {
+                systemHeapAllocatedSize = report.size;
+              }
+            }
+
+            // Insert this report at the proper position.
+            insertNode(
+              report.kind.startsWith("Explicit")
+                ? explicitRoot
+                : nonExplicitRoot,
+              report
+            );
+          });
+
+          // Compute and insert the heap-unclassified values.
+          if (!isNaN(jemallocHeapAllocatedSize)) {
+            insertNode(explicitRoot, {
+              path: ["explicit", "jemalloc-heap-unclassified"],
+              size: jemallocHeapAllocatedSize - jemallocHeapReportedSize,
+            });
+          }
+          if (!isNaN(systemHeapAllocatedSize)) {
+            insertNode(explicitRoot, {
+              path: ["explicit", "system-heap-unclassified"],
+              size: systemHeapAllocatedSize - systemHeapReportedSize,
+            });
+          }
+
+          window.report.append(
+            convertNodeToDOM(explicitRoot.explicit, "explicit")
+          );
+
+          for (let prop in nonExplicitRoot) {
+            window.report.append(convertNodeToDOM(nonExplicitRoot[prop], prop));
+          }
+        };
+      }
+    </script>
+    <style>
+      html {
+        font-family: sans-serif;
+      }
+
+      details,
+      details div {
+        margin-left: 1em;
+      }
+
+      summary:hover {
+        cursor: pointer;
+      }
+
+      #report {
+        line-height: 1.5em;
+        border: 2px solid gray;
+        border-radius: 10px;
+        padding: 5px;
+        background-color: lightgray;
+      }
+
+      #report > details {
+        margin-bottom: 1em;
+      }
+
+      .hidden {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <h2>Memory Reports</h2>
+    <button id="startButton">Measure</button>
+    <pre id="report" class="hidden"></pre>
+  </body>
+</html>