Changed Update button to refresh tree without page refresh

Makes your browser history cleaner by replacing the current query string with
Javascript rather than making a new request with the form. Updates the UI inline
rather than reloading the page.

Additionally fixed the select element so it renders properly on Mac.

Bug: 847599
Change-Id: I709cb71b184f271fdcfb7561cc56f9e1d29d059a
Reviewed-on: https://chromium-review.googlesource.com/1125284
Commit-Queue: Tiger Oakes <tigero@google.com>
Reviewed-by: agrieve <agrieve@chromium.org>
Reviewed-by: Eric Stevenson <estevenson@chromium.org>
Cr-Commit-Position: refs/heads/master@{#572579}

tools/binary_size/libsupersize/template_tree_view/index.html

@@ -292,7 +292,7 @@
         <main class="tree-container">
             <header class="tree-header">
                 <span class="subtitle">Name</span>
-                <span class="subtitle" id="size-header">{{size_header}}</span>
+                <span class="subtitle" id="size-header" data-value="{{size_header}}">{{size_header}}</span>
             </header>
             <ul id="symboltree" class="tree" role="tree" aria-labelledby="headline"></ul>
         </main>

tools/binary_size/libsupersize/template_tree_view/options.css

@@ -101,6 +101,7 @@
   background: rgba(0, 0, 0, 0.04);
 }
 select {
+  -webkit-appearance: none;
   font: inherit;
   background: transparent;
   border: 0;
@@ -120,13 +121,27 @@ select {
   color: #5f6368;
   border-bottom: 1px solid currentColor;
 }
-select:focus+.select-label {
+.select-label::after {
+  content: '';
+  position: absolute;
+  top: calc(50% - 5px);
+  right: 4px;
+  margin: 5px 7px 5px 8px;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: currentColor transparent transparent transparent;
+  transition: transform 0.2s ease-out;
+}
+select:focus + .select-label {
   color: #1a73e8;
   bottom: -2px;
   border-width: 2px;
 }
+select:focus + .select-label::after {
+  transform: rotate(180deg);
+}
 
-/** <input type='checkbox'> elements */
+/** <input type="checkbox"> elements */
 input[type='checkbox'] {
   display: none;
 }
@@ -138,7 +153,8 @@ input[type='checkbox'] {
   cursor: pointer;
   font-size: 14px;
 }
-.checkbox-label::before, .checkbox-label::after {
+.checkbox-label::before,
+.checkbox-label::after {
   position: absolute;
   content: '';
   border: 2px solid currentColor;
@@ -172,13 +188,13 @@ input[type='checkbox']:disabled + .checkbox-label {
 /** Tweaks for smaller screen sizes */
 @media (max-width: 700px) {
   .show-options {
-      grid-template-columns: auto 0;
+    grid-template-columns: auto 0;
   }
   .show-options .scrim {
-      display: block;
+    display: block;
   }
   .appbar,
   .symbols {
-      padding: 0 16px;
+    padding: 0 16px;
   }
 }

tools/binary_size/libsupersize/template_tree_view/state.js

@@ -42,7 +42,7 @@ function _initState() {
    * can be manipulated by this object. Keys in the query match with
    * input names.
    */
-  const _filterParams = new URLSearchParams(location.search.slice(1));
+  let _filterParams = new URLSearchParams(location.search.slice(1));
 
   const state = {
     /**
@@ -102,6 +102,15 @@ function _initState() {
      */
     set(name, value) {
       _filterParams.set(name, value);
+      state.setAll(_filterParams);
+    },
+    /**
+     * Replaces the current state with a new list of values. Afterwards
+     * display the new state in the URL by replacing the current history entry.
+     * @param {Iterable<[string, string]>} entries Iterator of key-value pairs
+     */
+    setAll(entries) {
+      _filterParams = new URLSearchParams(entries);
       history.replaceState(null, null, '?' + _filterParams.toString());
     },
   };
@@ -153,11 +162,21 @@ function _startListeners(state) {
     document.body.classList.add('show-options');
   }
 
-  // Disable some fields when method_count is set
-  if (state.has('method_count')) {
-    document.getElementById('size-header').textContent = 'Methods';
-    form.byteunit.setAttribute('disabled', '');
+  /**
+   * Disable some fields when method_count is set
+   */
+  function setMethodCountModeUI() {
+    const sizeHeader = document.getElementById('size-header');
+    if (form.method_count.checked) {
+      sizeHeader.textContent = 'Methods';
+      form.byteunit.setAttribute('disabled', '');
+    } else {
+      sizeHeader.textContent = sizeHeader.dataset.value;
+      form.byteunit.removeAttribute('disabled', '');
+    }
   }
+  setMethodCountModeUI();
+  form.method_count.addEventListener('change', setMethodCountModeUI);
 }
 
 /** Utilities for working with the state */

tools/binary_size/libsupersize/template_tree_view/ui.js

@@ -352,5 +352,11 @@
     );
   }
 
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    state.setAll(new FormData(event.currentTarget));
+    loadTree(tree_data);
+  })
+
   self.loadTree = loadTree;
 }