Function createMessageRow

devtools/panel.bundle.js:702–740

(msg)

  }

  function createMessageRow(msg) {
    const row = document.createElement('div');
    const time = formatTime(msg.timestamp);
    const hasSearch = state.searchQuery.length > 0;
    const isPinned = isMessagePinned(state.selectedConnectionId, msg.id);

    const isSelected = state.selectedMessageId === msg.id;

    row.className = `message-row ${hasSearch ? 'search-highlight' : ''} ${isPinned ? 'pinned' : ''} ${isSelected ? 'selected' : ''}`;
    row.dataset.id = msg.id;

    const idCell = document.createElement('div');
    idCell.className = 'message-cell col-id';
    idCell.textContent = `${isPinned ? '📌' : ''}${msg.id}`;

    const typeCell = document.createElement('div');
    typeCell.className = 'message-cell col-type';
    typeCell.innerHTML = hasSearch ? highlightSearchMatches(msg.eventType || '', state.searchQuery) : escapeHtml(msg.eventType || '');

    const dataCell = document.createElement('div');
    dataCell.className = 'message-cell col-data';
    const displayData = getMessageDisplayData(msg);
    dataCell.title = displayData.title;
    dataCell.classList.toggle('field-empty', displayData.isEmpty);
    dataCell.innerHTML = hasSearch
      ? highlightSearchMatches(displayData.text, state.searchQuery)
      : escapeHtml(displayData.text);

    const timeCell = document.createElement('div');
    timeCell.className = 'message-cell col-time';
    timeCell.textContent = time;

    row.appendChild(idCell);
    row.appendChild(typeCell);
    row.appendChild(dataCell);
    row.appendChild(timeCell);

    return row;
  }

  function setupMessageListEventDelegation() {
    elements$6.messageTbody.addEventListener('click', (e) => {