SuperSize: A few minor UI fixes

* Remove no-longer-relevant default exclude filter for assets/unwind_cfi
* Fix diff size colorings not being correct upon first load
* Make method count mode size colorings a thing
* Add a devtools log message to show how to query the web worker

Bug: None
Change-Id: I27344c50ee0c6d1a93b97055fa7d2176fff263c4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2032807
Commit-Queue: Samuel Huang <huangs@chromium.org>
Reviewed-by: Samuel Huang <huangs@chromium.org>
Auto-Submit: Andrew Grieve <agrieve@chromium.org>
Cr-Commit-Position: refs/heads/master@{#737476}

tools/binary_size/libsupersize/static/index.js

@@ -25,9 +25,7 @@ function setSubmitListener(form, fetchDataUrl) {
   form.addEventListener('submit', event => {
     event.preventDefault();
     const dataUrl = fetchDataUrl();
-    // Exclude unwind_cfi via a filter as a work-around for it being included
-    // in the size data. It's a file that exists in dev but not beta/stable.
-    window.open(`viewer.html?load_url=${dataUrl}&exclude=assets%2Funwind_cfi`);
+    window.open(`viewer.html?load_url=${dataUrl}`);
   });
 }
 

tools/binary_size/libsupersize/static/state.js

@@ -13,6 +13,9 @@
 /** @type {HTMLFormElement} Form containing options and filters */
 const form = document.getElementById('options');
 
+/** @type {HTMLInputElement} */
+const methodCountInput = form.elements.namedItem('method_count');
+
 /** Utilities for working with the DOM */
 const dom = {
   /**
@@ -169,8 +172,6 @@ function _startListeners() {
 
   /** @type {HTMLFieldSetElement} */
   const typesFilterContainer = document.getElementById('types-filter');
-  /** @type {HTMLInputElement} */
-  const methodCountInput = form.elements.namedItem('method_count');
   /** @type {HTMLFieldSetElement} */
   const byteunit = form.elements.namedItem('byteunit');
   /** @type {HTMLCollectionOf<HTMLInputElement>} */
@@ -349,8 +350,6 @@ function _makeIconTemplateGetter() {
 }
 
 function _makeSizeTextGetter() {
-  const _SIZE_CHANGE_CUTOFF = 50000;
-
   /**
    * Create the contents for the size element of a tree node.
    * The unit to use is selected from the current state.
@@ -411,8 +410,10 @@ function _makeSizeTextGetter() {
    * @param {number} value
    */
   function setSizeClasses(sizeElement, value) {
+    const cutOff = methodCountInput.checked ? 10 : 50000;
     const shouldHaveStyle =
-      state.has('diff_mode') && Math.abs(value) > _SIZE_CHANGE_CUTOFF;
+      state.has('diff_mode') && Math.abs(value) > cutOff;
+
     if (shouldHaveStyle) {
       if (value < 0) {
         sizeElement.classList.add('shrunk');

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

@@ -405,12 +405,16 @@ const newTreeElement = (() => {
   const _dataUrlInput = form.elements.namedItem('load_url');
   const _progress = new ProgressBar('progress');
 
+  /** @type {boolean} */
+  let _doneLoad = false;
+
   /**
    * Displays the given data as a tree view
    * @param {TreeProgress} message
    */
   function displayTree(message) {
     const {root, percent, diffMode, error} = message;
+    state.set('diff_mode', diffMode ? 'on' : null);
     /** @type {DocumentFragment | null} */
     let rootElement = null;
     if (root) {
@@ -421,7 +425,6 @@ const newTreeElement = (() => {
       link.click();
       link.tabIndex = 0;
     }
-    state.set('diff_mode', diffMode ? 'on' : null);
 
     // Double requestAnimationFrame ensures that the code inside executes in a
     // different frame than the above tree element creation.
@@ -440,6 +443,10 @@ const newTreeElement = (() => {
         }
 
         dom.replace(_symbolTree, rootElement);
+        if (!_doneLoad && percent === 1) {
+          _doneLoad = true;
+          console.log('Pro Tip: await worker.openNode("$FILE_PATH")')
+        }
       })
     );
   }