Add some comments.

ronyeh · ronyeh · commit 8c29e03728cc · 2022-12-14T17:16:45.000-08:00
diff --git a/tools/compare/compare.js b/tools/compare/compare.js
@@ -1,7 +1,16 @@
 // Author: Ron B. Yeh
-
+// MIT License
 // See: https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API
 
+// To generate current/ and reference/ images, follow these steps:
+// `git checkout` a stable "reference" version of VexFlow (e.g., a recent release).
+// `grunt reference` builds VexFlow and copies the build/ to the reference/ folder
+// `git checkout` the new branch you are working on.
+// `grunt` builds your latest "current" version.
+// `grunt generate:current`
+// `grunt generate:reference`
+// Now you can use this tool to compare the current/ and reference/ images.
+
 // store a reference to our file handle
 let fileHandle;
 
@@ -241,3 +250,10 @@ function updateLabelsForViewMode() {
     }
   }
 }
+
+function showInfoTemporarily() {
+  document.getElementById('info').style.display = 'block';
+  setTimeout(() => {
+    document.getElementById('info').style.display = 'none';
+  }, 6500);
+}
diff --git a/tools/compare/index.html b/tools/compare/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <script src="compare.js"></script>
+    <meta name="author" content="Ron B. Yeh" />
     <style>
       body {
         font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
@@ -78,6 +79,12 @@
         color: #ddd;
         z-index: 10;
       }
+
+      #info {
+        background-color: #444;
+        color: #bbb;
+        padding: 20px;
+      }
     </style>
     <script>
       document.addEventListener('DOMContentLoaded', () => {
@@ -90,7 +97,17 @@
       <a href="#" onclick="openTheFolder()"
         >Click here to open the <b><code>vexflow/build/images/</code></b> folder</a
       >
-      (the one which contains <code>current/, diff/, reference/</code>).
+      (the one which contains <code>current/, diff/, reference/</code>). [<a
+        href="#"
+        onclick="showInfoTemporarily(); return false;"
+        title="Use commands like `grunt reference`, `grunt generate:current`, and `grunt generate:reference` to generate the necessary images."
+      >
+        ? </a
+      >]
+    </p>
+    <p id="info" style="display: none">
+      Use commands like `grunt reference`, `grunt generate:current`, and `grunt generate:reference` to generate the
+      necessary images.
     </p>
     <p>If a "Let site view files?" pop-up appears, choose <b>View Files</b>.</p>
     <p>
