Function createMessageRow

devtools/modules/messageRenderer.js:137–175

(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.messageTbody.addEventListener('click', (e) => {