Function drawBox

internal/driver/html/stacks.js:418–464

(xscale, box)

  }

  function drawBox(xscale, box) {
    const srcIndex = box.src;
    const src = stacks.Sources[srcIndex];

    function makeRect(cl, x, y, w, h) {
      const r = document.createElement('div');
      r.style.left = x+'px';
      r.style.top = y+'px';
      r.style.width = w+'px';
      r.style.height = h+'px';
      r.classList.add(cl);
      return r;
    }

    // Background
    const w = box.width - 1; // Leave 1px gap
    const r = makeRect('boxbg', box.x, box.y, w, ROW);
    if (!diff) r.style.background = makeColor(src.Color);
    addElem(srcIndex, r);
    if (!src.Inlined) {
      r.classList.add('not-inlined');
    }

    // Positive/negative indicator for diff mode.
    if (diff) {
      const delta = box.sumpos - box.sumneg;
      const partWidth = xscale * Math.abs(delta);
      if (partWidth >= MIN_WIDTH) {
        r.appendChild(makeRect((delta < 0 ? 'negative' : 'positive'),
                               0, 0, partWidth, ROW-1));
      }
    }

    // Label
    if (box.width >= MIN_TEXT_WIDTH) {
      const t = document.createElement('div');
      t.classList.add('boxtext');
      fitText(t, box.width-2*TEXT_MARGIN, src.Display);
      r.appendChild(t);
    }

    onClick(r, () => { switchPivots(pprofQuoteMeta(src.UniqueName)); });
    r.addEventListener('mouseenter', () => { handleEnter(box, r); });
    r.addEventListener('mouseleave', () => { handleLeave(box); });
    r.addEventListener('contextmenu', (e) => { showActionMenu(e, box); });
    return r;
  }

  // Handle clicks, but only if the mouse did not move during the click.
  function onClick(target, handler) {