Add a performance track for Nebula marks/measures for the Chrome DevTools Performance tab

[chrisblakley]

Chrome now allows frameworks/libraries to have their own "Tracks" in the performance report in DevTools.

https://developer.chrome.com/docs/devtools/performance/extension

Example Track:

// Mark used to represent the start of an image processing task
performance.mark("Image Processing Start");

// ... later in your code

// Track entry representing the completion of image processing
// with additional details and a tooltip
performance.measure("Image Processing Complete", "Image Processing Start", {
  detail: {
    devtools: {
      dataType: "track-entry",
      track: "Image Processing Tasks",
      trackGroup: "My Tracks", // Group related tracks together
      color: "tertiary-dark",
      properties: [
        ["Filter Type", "Gaussian Blur"],
        ["Resize Dimensions", "500x300"]
      ],
      tooltipText: "Image processed successfully"
    }
  }
});

Example Marker:

// Marker indicating when the processed image was uploaded
performance.mark("Image Upload", {
  detail: {
    devtools: {
      dataType: "marker",
      color: "secondary",
      properties: [
        ["Image Size", "2.5MB"],
        ["Upload Destination", "Cloud Storage"]
      ],
      tooltipText: "Processed image uploaded"
    }
  }
});

Nebula already has a lot of marks and measures, so all that would be needed here is to specify the Nebula track.

Keep in mind that within the Nebula track, it can have additional groups.

[chrisblakley]

The markers are working, but while the measures still appear and are correct, they are not in their own track... Even when I use the code provided explicitly from the demo I get a console error because of the expectation of the parameters.