Supersize: Improving performance by storing fetch results

We now cache the data file as binary data, which can be cached in
memory without crashing the page. When streaming, we build the final
cache by tracking the total size of the bytes streamed in. This
cache allows us to reuse the data on subsequent runs
(such as when filters change) rather than calling fetch again.

Bug: 847599
Change-Id: I09fb9f45c992984ed56c1270c1c015d274c4c167
Reviewed-on: https://chromium-review.googlesource.com/1136852
Commit-Queue: Tiger Oakes <tigero@google.com>
Reviewed-by: agrieve <agrieve@chromium.org>
Cr-Commit-Position: refs/heads/master@{#576490}

tools/binary_size/libsupersize/template_tree_view/index.html

@@ -67,7 +67,6 @@
         }
 
         .options {
-            display: none;
             grid-area: options;
         }
 

tools/binary_size/libsupersize/template_tree_view/shared.js

@@ -84,7 +84,7 @@ const _CONTAINER_TYPES = {
 const _CONTAINER_TYPE_SET = new Set(Object.values(_CONTAINER_TYPES));
 
 /** Type for a dex method symbol */
-const _DEX_METHOD_SYMBOL_TYPE = 'm'
+const _DEX_METHOD_SYMBOL_TYPE = 'm';
 /** Type for an 'other' symbol */
 const _OTHER_SYMBOL_TYPE = 'o';
 
@@ -122,3 +122,20 @@ function* types(typesList) {
     }
   }
 }
+
+/**
+ * Limit how frequently `func` is called.
+ * @template {T}
+ * @param {T & Function} func
+ * @param {number} wait Time to wait before func can be called again (ms).
+ * @returns {T}
+ */
+function debounce(func, wait) {
+  /** @type {number} */
+  let timeoutId;
+  function debounced (...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func(...args), wait);
+  };
+  return /** @type {any} */ (debounced);
+}

tools/binary_size/libsupersize/template_tree_view/tree-ui.js

@@ -322,16 +322,36 @@
 }
 
 {
+  class ProgressBar {
+    /** @param {string} id */
+    constructor(id) {
+      /** @type {HTMLProgressElement} */
+      this._element = document.getElementById(id);
+      this.lastValue = this._element.value;
+    }
+
+    setValue(val) {
+      if (val === 0 || val >= this.lastValue) {
+        this._element.value = val;
+        this.lastValue = val;
+      } else {
+        // Reset to 0 so the progress bar doesn't animate backwards.
+        this.setValue(0);
+        requestAnimationFrame(() => this.setValue(val));
+      }
+    }
+  }
+
   /** @type {HTMLUListElement} */
   const _symbolTree = document.getElementById('symboltree');
-  /** @type {HTMLProgressElement} */
-  const _progress = document.getElementById('progress');
+  const _progress = new ProgressBar('progress');
 
   /**
    * Displays the given data as a tree view
-   * @param {TreeProgress} param0
+   * @param {TreeProgress} message
    */
-  function displayTree({root, percent, diffMode, error}) {
+  function displayTree(message) {
+    const {root, percent, diffMode, error} = message;
     /** @type {DocumentFragment | null} */
     let rootElement = null;
     if (root) {
@@ -344,21 +364,25 @@
     }
     state.set('diff_mode', diffMode ? 'on' : null);
 
-    requestAnimationFrame(() => {
-      _progress.value = percent;
-      if (error) {
-        document.body.classList.add('error');
-      } else {
-        document.body.classList.remove('error');
-      }
-      if (diffMode) {
-        document.body.classList.add('diff');
-      } else {
-        document.body.classList.remove('diff');
-      }
+    // Double requestAnimationFrame ensures that the code inside executes in a
+    // different frame than the above tree element creation.
+    requestAnimationFrame(() =>
+      requestAnimationFrame(() => {
+        _progress.setValue(percent);
+        if (error) {
+          document.body.classList.add('error');
+        } else {
+          document.body.classList.remove('error');
+        }
+        if (diffMode) {
+          document.body.classList.add('diff');
+        } else {
+          document.body.classList.remove('diff');
+        }
 
-      dom.replace(_symbolTree, rootElement);
-    });
+        dom.replace(_symbolTree, rootElement);
+      })
+    );
   }
 
   treeReady.then(displayTree);
@@ -366,13 +390,13 @@
 
   form.addEventListener('change', event => {
     if (event.target.dataset.dynamic == null) {
-      _progress.value = 0;
+      _progress.setValue(0);
       worker.loadTree().then(displayTree);
     }
   });
   form.addEventListener('submit', event => {
     event.preventDefault();
-    _progress.value = 0;
+    _progress.setValue(0);
     worker.loadTree().then(displayTree);
   });
 }