static createChainNode(dom, segment, detailsRenderer) {
    const chainEl = dom.createComponent('crcChain');

    // This can be either the duration or the chain end time depending on the detail type.
    let nodeTiming;
    let nodeTransferSize;
    let nodeUrl;
    let alwaysShowTiming;
    let highlightLongest;

    // `segment.node.request` indicates that this is a legacy critical request chain details node.
    // For historical reasons, the legacy CRC will only show details for leaf nodes and will show
    // the leaf node request duration rather than the duration of the entire tree.
    if ('request' in segment.node) {
      nodeTransferSize = segment.node.request.transferSize;
      nodeUrl = segment.node.request.url;
      nodeTiming = (segment.node.request.endTime - segment.node.request.startTime) * 1000;
      alwaysShowTiming = false;
    } else {
      nodeTransferSize = segment.node.transferSize;
      nodeUrl = segment.node.url;
      nodeTiming = segment.node.navStartToEndTime;
      alwaysShowTiming = true;
      highlightLongest = segment.node.isLongest;
    }

    // Hovering over request shows full URL.
    const nodeEl = dom.find('.lh-crc-node', chainEl);
    nodeEl.setAttribute('title', nodeUrl);
    if (highlightLongest) {
      nodeEl.classList.add('lh-crc-node__longest');
    }

    const treeMarkeEl = dom.find('.lh-crc-node__tree-marker', chainEl);

    // Construct lines and add spacers for sub requests.
    segment.treeMarkers.forEach(separator => {
      const classSeparator = separator ?
        'lh-tree-marker lh-vert' :
        'lh-tree-marker';
      treeMarkeEl.append(
        dom.createElement('span', classSeparator),
        dom.createElement('span', 'lh-tree-marker')
      );
    });

    const classLastChild = segment.isLastChild ?
      'lh-tree-marker lh-up-right' :
      'lh-tree-marker lh-vert-right';
    const classHasChildren = segment.hasChildren ?
      'lh-tree-marker lh-horiz-down' :
      'lh-tree-marker lh-right';

    treeMarkeEl.append(
      dom.createElement('span', classLastChild),
      dom.createElement('span', 'lh-tree-marker lh-right'),
      dom.createElement('span', classHasChildren)
    );

    // Fill in url, host, and request size information.
    const linkEl = detailsRenderer.renderTextURL(nodeUrl);
    const treevalEl = dom.find('.lh-crc-node__tree-value', chainEl);
    treevalEl.append(linkEl);


    if (!segment.hasChildren || alwaysShowTiming) {
      const span = dom.createElement('span', 'lh-crc-node__chain-duration');
      span.textContent =
        ' - ' + Globals.i18n.formatMilliseconds(nodeTiming) + ', ';
      const span2 = dom.createElement('span', 'lh-crc-node__chain-size');
      span2.textContent = Globals.i18n.formatBytesToKiB(nodeTransferSize, 0.01);

      treevalEl.append(span, span2);
    }

    return chainEl;
  }
Creates the DOM for a tree segment.
@param {DOM} dom
@param {NetworkSegment} segment
@param {DetailsRenderer} detailsRenderer
@return {Node}