[Supersize] HTML Viewer: Support viewing single milestone.

This CL updates the milestone selection page. Details:
* Add small drop-down to select between "compare" or "view" mode.
  "Compare" is the old behavior, and "view" shows only one select box.
* Under view mode, clicking "Open report" will open report to view
  single milestone.
* Opened report now appears on new tab.
* For "compare" mode with incompatible changes (version 1 equal or newer
  than version 2): Old behavior of graying out options was non-robust.
  This is repalced with disabling "Open report" button and showing error
  message.
* Extra change: generate_milestone_report.py: Correct gsutil.py rsync
  parameter.

Bug: 880671
Change-Id: Ie3c1e23c2f78ea4818f86f71954cf3ece0bea513
Reviewed-on: https://chromium-review.googlesource.com/1240503
Commit-Queue: Samuel Huang <huangs@chromium.org>
Reviewed-by: agrieve <agrieve@chromium.org>
Reviewed-by: Samuel Huang <huangs@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593610}

tools/binary_size/libsupersize/generate_milestone_report.py

@@ -254,7 +254,7 @@ def main():
                 skip_existing=args.skip_existing)
   _SetPushedReports(args.directory)
   logging.warning('Reports saved to %s', args.directory)
-  cmd = ['gsutil.py', '-m', 'rsync', '-J', '-a', 'publicRead', '-r',
+  cmd = ['gsutil.py', '-m', 'rsync', '-J', '-a', 'public-read', '-r',
          args.directory, PUSH_URL]
 
   if args.sync:

tools/binary_size/libsupersize/static/index.html

@@ -67,35 +67,63 @@ function isGreaterOrEqual(v1, v2) {
 
   /** @type {HTMLFormElement} */
   const form = document.getElementById('select-form');
-  const cpu = form.elements.namedItem('cpu');
-  const apk = form.elements.namedItem('apk');
-  const version1 = form.elements.namedItem('version1');
-  const version2 = form.elements.namedItem('version2');
+  const selMode = form.elements.namedItem('mode');
+  const selCpu = form.elements.namedItem('cpu');
+  const selApk = form.elements.namedItem('apk');
+  const selVersion1 = form.elements.namedItem('version1');
+  const selVersion2 = form.elements.namedItem('version2');
+  const btnOpen = form.querySelector('button[type="submit"]');
+  const msgBadCompare = form.querySelector('.msg-bad-compare');
 
-  cpu.appendChild(buildOptions(pushed.cpu));
-  apk.appendChild(buildOptions(pushed.apk));
+  selCpu.appendChild(buildOptions(pushed.cpu));
+  selApk.appendChild(buildOptions(pushed.apk));
   const versionOptions = buildOptions(pushed.version);
-  version1.appendChild(versionOptions.cloneNode(true));
-  version2.appendChild(versionOptions);
-  const version2Options = version2.querySelectorAll('option');
-  if (version2Options.length > 1) {
-    version2Options[1].selected = true;
+  selVersion1.appendChild(versionOptions.cloneNode(true));
+  selVersion2.appendChild(versionOptions);
+
+  function selectOption(optList, index) {
+    const n = optList.length;
+    if (n > 0) optList[((index % n) + n) % n].selected = true;
+  }
+  selectOption(selVersion1.querySelectorAll('option'), -2);
+  selectOption(selVersion2.querySelectorAll('option'), -1);
+
+  let viewMode = null;
+  function readViewMode() {
+    viewMode = document.querySelector('#sel-mode').value;
+    form.classList.toggle('mode-view', viewMode === 'view');
+  }
+  readViewMode();
+
+  function disableButtonIfNoDiffPair() {
+    const isDisabled = (viewMode === 'compare') &&
+        isGreaterOrEqual(selVersion1.value, selVersion2.value);
+    btnOpen.disabled = isDisabled;
+    msgBadCompare.classList.toggle('visible', isDisabled);
   }
+  disableButtonIfNoDiffPair();
+
+  selMode.addEventListener('change', () => {
+    readViewMode();
+    disableButtonIfNoDiffPair();
+  });
 
-  function disableSmallerAfterVersions() {
-    const newVersion = version1.value;
-    for (const opt of version2Options) {
-      opt.disabled = isGreaterOrEqual(newVersion, opt.value);
+  function getDataUrl() {
+    let ret = `${cpu.value}/${apk.value}/`;
+    if (viewMode === 'view') {
+      ret += `report_${selVersion2.value}.ndjson`;
+    } else if (viewMode === 'compare') {
+      ret += `report_${selVersion1.value}_${selVersion2.value}.ndjson`;
     }
+    return ret;
   }
 
-  disableSmallerAfterVersions();
-  version1.addEventListener('change', disableSmallerAfterVersions);
+  selVersion1.addEventListener('change', disableButtonIfNoDiffPair);
+  selVersion2.addEventListener('change', disableButtonIfNoDiffPair);
   form.addEventListener('submit', event => {
     event.preventDefault();
-    const dataUrl = `${cpu.value}/${apk.value}/` +
-        `report_${version1.value}_${version2.value}.ndjson`;
-    location.href = `viewer.html?load_url=milestones/${dataUrl}`;
+    const dataUrl = getDataUrl();
+    window.open(`viewer.html?load_url=milestones/${dataUrl}`);
   });
 })();
   </script>
@@ -110,27 +138,35 @@ function isGreaterOrEqual(v1, v2) {
   </header>
 
   <form id="select-form">
-    <h2 class="subhead">Select milestones to compare</h2>
+    <h2 class="subhead">Select milestones to
+      <select id="sel-mode" class="sel-small" name="mode">
+        <option value="view">view</option>
+        <option value="compare" selected="selected">compare</option>
+      </select>
+    </h2>
     <p class="select-wrapper">
-      <select id="cpu" name="cpu"></select>
+      <select id="cpu" class="sel-big" name="cpu"></select>
       <label class="select-label" for="cpu">Architecture</label>
     </p>
     <p class="select-wrapper">
-      <select id="apk" name="apk"></select>
+      <select id="apk" class="sel-big" name="apk"></select>
       <label class="select-label" for="apk">APK</label>
     </p>
-    <p class="select-wrapper">
-      <select id="version1" name="version1"></select>
+    <p class="select-wrapper hide-on-mode-view">
+      <select id="version1" class="sel-big" name="version1"></select>
       <label class="select-label" for="version1">Version 1</label>
     </p>
     <p class="select-wrapper">
-      <select id="version2" name="version2"></select>
-      <label class="select-label" for="version2">Version 2</label>
+      <select id="version2" class="sel-big" name="version2"></select>
+      <label class="select-label" for="version2">
+        Version <span class="hide-on-mode-view"> 2</span>
+      </label>
     </p>
 
     <button type="submit" class="text-button filled-button">
       Open report
     </button>
+    <div class="msg-bad-compare">Version 1 must be older than Version 2</div>
   </form>
 </body>
 

tools/binary_size/libsupersize/static/options.css

@@ -25,6 +25,11 @@
   background: #00000050;
 }
 
+/** Fix height to prevent vertical shift on view mode change. */
+#select-form {
+  min-height: 380px;
+}
+
 /** Options side panel */
 .options {
   z-index: 5; /* Side panel layer */
@@ -100,6 +105,13 @@ legend {
 .text-button:active {
   background: #d2e3fce6;
 }
+.text-button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+.text-button:disabled:hover {
+  background: #bbb;
+}
 
 .text-button.with-icon {
   display: flex;
@@ -130,6 +142,18 @@ input:focus + label.filled-button:active {
   box-shadow: 0 1px 2px #3c40434d, 0 2px 6px 2px #3c404326;
 }
 
+select {
+  cursor: pointer;
+}
+
+select.sel-small {
+  background: #fff;
+  color: #3c4043;
+  font-family: "Google Sans", Arial, sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+}
+
 /** <input type='text'> or <select> elements */
 .input-wrapper,
 .select-wrapper {
@@ -139,7 +163,7 @@ input:focus + label.filled-button:active {
 }
 input[type='text'],
 input[type='number'],
-select {
+select.sel-big {
   box-sizing: border-box;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -179,14 +203,17 @@ select {
 }
 input[type='text']:focus + .input-label,
 input[type='number']:focus + .input-label,
-select:focus + .select-label {
+select.sel-big:focus + .select-label {
   color: #1a73e8;
   bottom: -2px;
   border-width: 2px;
 }
-select:focus + .select-label::after {
+select.sel-big:focus + .select-label::after {
   transform: rotate(180deg);
 }
+.mode-view .hide-on-mode-view {
+  display: none;
+}
 
 .input-error {
   margin: 4px 0;
@@ -293,6 +320,16 @@ input[type='file'] {
   opacity: 0;
 }
 
+#select-form .msg-bad-compare {
+  color: #f00;
+  font-size: 0.7em;
+  margin-top: 5px;
+  visibility: hidden;
+}
+#select-form .msg-bad-compare.visible {
+  visibility: visible;
+}
+
 /** Tweaks for smaller screen sizes */
 @media (max-width: 700px) {
   .show-options {