Create a range selection by clicking on a screenshot

As a ~PM stumbling through a profile~ user investigating a responsiveness issue, I want to be able to select the nsRefreshDriver::Tick for a screenshot, so that I can quickly and accurately focus on the code that produced the frame.

I can currently select nsRefreshDriver::Tick by double clicking on the entry in the Stack Chart. It would nice if I could create the range selection by, for example, clicking a screenshot. This would allow me to remain on my current view and to more quickly and accurately create the selection than trying to eyeball the correct Tick below (and starting slightly before) a screenshot.

[julienw]

I think your outline looks good.

Just a quick precision from looking at the code: I think we’ll have to change a bit HoverPreview too. Indeed, I believe the new code you’ll add will be in Screenshots. Therefore I suggest that findScreenshotAtMouse will be moved to Screenshots: then Screenshots will retrieve the current hovered screenshot, and pass directly a ScreenshotPayload to HoverPreview.

About the 2 remarks from Greg:

• You may need to compare the start time of the marker at that point, and the next marker.

He meant that, to find the new range, you might need to look at the next screenshot. I think that should be OK to look at start and start + dur which should already take that into account, but Greg’s comment was that this might not be the case.

• Make sure to handle clicking the last or first screenshot correctly.

This is only a warning that the last or first screenshot in a track may behave differently. So just take care that they work. Again I think that start and start+dur should already take that into account, but please just double-check these cases.

Hope this helps!

[nibble0101]

Therefore I suggest that findScreenshotAtMouse will be moved to Screenshots: then Screenshots will retrieve the current hovered screenshot, and pass directly a ScreenshotPayload to HoverPreview

Since the above comment, I have made some major changes.

1. I wanted to do the extraction in the render method but then essentially I will have to do something like:

    const { pageX, offsetX, containerTop } = this.state;
    let payload: ScreenshotPayload | null;
    if (offsetX !== null) {
      const screenshotIndex = this.findScreenshotAtMouse(offsetX);
      if (screenshotIndex === null) {
        payload = null;
      } else {
        payload = (screenshots[screenshotIndex].data: any);
      }
    } else {
      payload = null;
    }

and then pass payload to HoverPreview. 2) Have payload in state and then pass it to HoverPreview.

I prefer the first one over the second one because I think payload will just be redundant in state because it is derived from offsetX.

This is what is left in HoverPreview after moving findScreenshotAtMouse to Screenshots.

if (
      isMakingPreviewSelection ||
      offsetX === null ||
      pageX === null ||
      payload === null
    ) {
      return null;
    }
    const { url, windowWidth, windowHeight } = payload;