[tools] Improve heap stats tool documentation

Change-Id: I913e36afd76fe0f212e8c0c9b97e5ac52b2342d1
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/3437045Reviewed-by: Victor Gomes <victorgomes@chromium.org>
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/main@{#78926}

tools/heap-stats/index.html

@@ -80,23 +80,32 @@ function globalSelectionChangedA(e) {
 
   <p>Visualize object statistics that have been gathered using</p>
   <ul>
-    <li><code>--trace-gc-object-stats</code> on V8</li>
+    <li>Use <code>--trace-gc-object-stats</code> for V8 and load the contents of stdout</li>
     <li>
       <a
         href="https://www.chromium.org/developers/how-tos/trace-event-profiling-tool">Chrome's
         tracing infrastructure</a> collecting data for the category
-      <code>v8.gc_stats</code>.
+      <code>disabled-by-default-v8.gc_stats</code> and directly load the
+      results.html or trace.json.gzip file.
     </li>
   </ul>
-  <p>
-    Note that you only get a data point on major GCs. You can enforce this by
-    using the <code>--gc-global</code> flag.
-  </p>
-  <p>
-    Note that the visualizer needs to run on a web server due to HTML imports
-    requiring <a
-         href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>.
-  </p>
+
+  Additional information:
+  <ul>
+    <li>
+      You only get a data point on major GCs. You can enforce this by
+      using the <code>--gc-global</code> V8 flag.
+    </li>
+    <li>
+      For more frequent data points you can also the
+      <code>--gc-interval=$AFTER_N_ALLOCATIONS</code> V8.
+    </li>
+    <li>
+      The visualizer needs to run on a web server due to HTML imports
+      requiring <a
+          href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>.
+    </li>
+  <ul>
 </body>
 
 </html>

tools/heap-stats/trace-file-reader.js

@@ -78,6 +78,27 @@ defineCustomElement('trace-file-reader', (templateText) =>
       };
       // Delay the loading a bit to allow for CSS animations to happen.
       setTimeout(() => reader.readAsArrayBuffer(file), 0);
+    } else if (file.type == 'text/html') {
+      // try extracting the data from a results.html file
+      reader.onload = (e) => {
+        try {
+          let html = document.createElement('html');
+          html.innerHTML = e.target.result;
+          for (let dataScript of html.querySelectorAll('#viewer-data')) {
+            const base64 = dataScript.innerText.slice(1,-1);
+            const binary = globalThis.atob(base64);
+            const textResult = pako.inflate(binary, {to: 'string'});
+            this.processRawText(file, textResult);
+          }
+          this.section.className = 'success';
+          this.$('#fileReader').classList.add('done');
+        } catch (err) {
+          console.error(err);
+          this.section.className = 'failure';
+        }
+      };
+      // Delay the loading a bit to allow for CSS animations to happen.
+      setTimeout(() => reader.readAsText(file), 0);
     } else {
       reader.onload = (e) => {
         try {