_drawSingleNetworkMeasure(context, networkMeasure, baseY, scaleFactor, showHoverHighlight) {
    const {
      frame,
      visibleArea
    } = this;
    const {
      depth,
      finishTimestamp,
      firstReceivedDataTimestamp,
      lastReceivedDataTimestamp,
      receiveResponseTimestamp,
      sendRequestTimestamp,
      url
    } = networkMeasure; // Account for requests that did not complete while we were profiling.
    // As well as requests that did not receive data before finish (cached?).

    const duration = this._profilerData.duration;
    const timestampBegin = sendRequestTimestamp;
    const timestampEnd = finishTimestamp || lastReceivedDataTimestamp || duration;
    const timestampMiddle = receiveResponseTimestamp || firstReceivedDataTimestamp || timestampEnd; // Convert all timestamps to x coordinates.

    const xStart = timestampToPosition(timestampBegin, scaleFactor, frame);
    const xMiddle = timestampToPosition(timestampMiddle, scaleFactor, frame);
    const xStop = timestampToPosition(timestampEnd, scaleFactor, frame);
    const width = durationToWidth(xStop - xStart, scaleFactor);

    if (width < 1) {
      return; // Too small to render at this zoom level
    }

    baseY += depth * NetworkMeasuresView_ROW_WITH_BORDER_HEIGHT;
    const outerRect = {
      origin: {
        x: xStart,
        y: baseY
      },
      size: {
        width: xStop - xStart,
        height: HEIGHT
      }
    };

    if (!rectIntersectsRect(outerRect, visibleArea)) {
      return; // Not in view
    } // Draw the secondary rect first (since it also shows as a thin border around the primary rect).


    let rect = {
      origin: {
        x: xStart,
        y: baseY
      },
      size: {
        width: xStop - xStart,
        height: HEIGHT
      }
    };

    if (rectIntersectsRect(rect, visibleArea)) {
      context.beginPath();
      context.fillStyle = this._hoveredNetworkMeasure === networkMeasure ? COLORS.NETWORK_SECONDARY_HOVER : COLORS.NETWORK_SECONDARY;
      context.fillRect(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
    }

    rect = {
      origin: {
        x: xStart + BORDER_SIZE,
        y: baseY + BORDER_SIZE
      },
      size: {
        width: xMiddle - xStart - BORDER_SIZE,
        height: HEIGHT - BORDER_SIZE * 2
      }
    };

    if (rectIntersectsRect(rect, visibleArea)) {
      context.beginPath();
      context.fillStyle = this._hoveredNetworkMeasure === networkMeasure ? COLORS.NETWORK_PRIMARY_HOVER : COLORS.NETWORK_PRIMARY;
      context.fillRect(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
    }

    const baseUrl = url.match(BASE_URL_REGEX);
    const displayUrl = baseUrl !== null ? baseUrl[1] : url;
    const durationLabel = finishTimestamp !== 0 ? `${formatting_formatDuration(finishTimestamp - sendRequestTimestamp)} - ` : '';
    const label = durationLabel + displayUrl;
    drawText(label, context, outerRect, visibleArea);
  }
Draw a single `NetworkMeasure` as a box/span with text inside of it.