Bug 1699613 - Allow the build resources usage report to display arbitrary resource usage json files. r=firefox-build-system-reviewers,sheehan,mhentges

AFAIK, while mochitests have resource-usage.json data with the same
format as build_resources.json, there isn't much of anything to display
that data in a human-friendly manner. As a helper of sort for all the
tasks that already expose their json data without a nice way to display
it, allow the build resources usage report UI that `mach resource-usage`
displays (or build_resources.html on build tasks on treeherder), to load
arbitrary json files if their url is dropped on the page (from e.g.
drag-and-dropping the link to the file from treeherder).

Differential Revision: https://phabricator.services.mozilla.com/D109030

python/mozbuild/mozbuild/resources/html-build-viewer/build_resources.html

@@ -472,30 +472,55 @@ function renderTimeline(id, resources) {
     ;
 }
 
-document.addEventListener("DOMContentLoaded", function() {
-  d3.json("build_resources.json", function onList(error, response) {
-    if (!response) {
+function initData(data) {
+  var list = d3.select("#list");
+  // Clear the list if it wasn't already empty.
+  list.selectAll("*").remove();
+  list.style("display", "none");
+
+  if (!data) {
     return;
   }
-    // If the response contains a list of files, use that list.
-    // Otherwise, we expect it's directly build resources data.
-    if (Object.keys(response).length == 1 && "files" in response) {
-      if (response.files.length > 1) {
-        var list = d3.select("#list");
-        for (file of response.files) {
+  // If the data contains a list of files, use that list.
+  // Otherwise, we expect it's directly resources info data.
+  if (Object.keys(data).length == 1 && "files" in data) {
+    if (data.files.length > 1) {
+      for (file of data.files) {
         list.append("option").attr("value", file).text(file);
       }
-        list.on("change", function() {renderKey(this.value);})
       list.style("display", "inline");
     }
-      renderKey(response.files[0]);
+    renderKey(data.files[0]);
   } else {
-      currentResources = new BuildResources(response);
+    currentResources = new BuildResources(data);
     updateResourcesGraph();
   }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  var list = d3.select("#list");
+  list.on("change", function() {renderKey(this.value);})
+  d3.json("build_resources.json", function onList(error, response) {
+    initData(response);
   });
 }, false);
 
+document.addEventListener("drop", function(event) {
+  event.preventDefault();
+  var uris = event.dataTransfer.getData("text/uri-list");
+  if (uris) {
+    var data = {
+      files: uris.split(/\r\n|\r|\n/).filter(uri => !uri.startsWith("#")),
+    };
+    initData(data);
+  }
+}, false);
+
+document.addEventListener("dragover", function(event) {
+  // prevent default to allow drop
+  event.preventDefault();
+}, false);
+
     </script>
     <h3>Build Resource Usage Report</h3>