reactoradar 1.6.4 → 1.6.6

package/src/renderer/panels/network.js

@@ -1,559 +0,0 @@
-'use strict';
-
-const state = window.RNDebug.state;
-const $ = window.RNDebug.$;
-const esc = window.RNDebug.esc;
-const ts = window.RNDebug.ts;
-const tryURL = window.RNDebug.tryURL;
-const formatSize = window.RNDebug.formatSize;
-const renderJSON = window.RNDebug.renderJSON;
-const showContextMenu = window.RNDebug.showContextMenu;
-const createTreeNode = window.RNDebug.createTreeNode;
-const addConsoleLog = window.RNDebug.addConsoleLog;
-
-// ─────────────────────────────────────────────────────────────────────────────
-// NETWORK PANEL (Chrome DevTools-style)
-// ─────────────────────────────────────────────────────────────────────────────
-const NET_COLS = [
-  { key: 'name',      label: 'Name',      width: 260, min: 100 },
-  { key: 'status',    label: 'Status',    width: 60,  min: 40 },
-  { key: 'type',      label: 'Type',      width: 70,  min: 40 },
-  { key: 'initiator', label: 'Initiator', width: 90,  min: 50 },
-  { key: 'size',      label: 'Size',      width: 70,  min: 40 },
-  { key: 'time',      label: 'Time',      width: 70,  min: 40 },
-  { key: 'waterfall', label: 'Waterfall', width: 120, min: 60 },
-];
-
-function initNetworkPanel() {
-  const panel = $('panel-network');
-  panel.innerHTML = `
-    <div class="panel-toolbar">
-      <span class="panel-label">Network</span>
-      <span class="badge" id="nBadge">0</span>
-      <div class="ml-auto" style="display:flex;align-items:center;gap:6px">
-        <label class="toggle-label" for="netToggle">
-          <span class="toggle-text" id="netToggleText">Capture ON</span>
-          <input type="checkbox" id="netToggle" class="toggle-input" checked />
-          <span class="toggle-slider"></span>
-        </label>
-      </div>
-    </div>
-    <div class="net-filter-bar" id="netFilterBar">
-      <input id="netSearchInput" class="net-search-input" placeholder="Filter URLs..." />
-      <div class="net-type-filters" id="netTypeFilters">
-        <button class="net-type-btn active" data-type="all">All</button>
-        <button class="net-type-btn" data-type="fetch">Fetch/XHR</button>
-        <button class="net-type-btn" data-type="js">JS</button>
-        <button class="net-type-btn" data-type="css">CSS</button>
-        <button class="net-type-btn" data-type="img">Img</button>
-        <button class="net-type-btn" data-type="media">Media</button>
-        <button class="net-type-btn" data-type="font">Font</button>
-        <button class="net-type-btn" data-type="doc">Doc</button>
-        <button class="net-type-btn" data-type="ws">WS</button>
-      </div>
-      <div class="net-throttle" id="netThrottle">
-        <select id="netThrottleSelect" class="net-throttle-select">
-          <option value="none">No throttling</option>
-          <option value="fast3g">Fast 3G</option>
-          <option value="slow3g">Slow 3G</option>
-          <option value="offline">Offline</option>
-        </select>
-      </div>
-    </div>
-    <div class="net-layout">
-      <div class="net-table-wrap" id="netTableWrap">
-        <div class="net-header" id="netHeader"></div>
-        <div class="net-rows" id="netRows">
-          <div class="empty-state" id="networkEmpty">
-            <div class="icon">📡</div>
-            <div class="label">No requests yet</div>
-            <div class="hint">API calls will appear here automatically</div>
-          </div>
-        </div>
-      </div>
-      <div class="net-detail-pane" id="netDetailPane">
-        <div class="net-detail-bar">
-          <div class="detail-tabs" id="netDetailTabs"></div>
-          <button class="detail-close" id="netDetailClose" title="Close">&times;</button>
-        </div>
-        <div class="detail-content" id="netDetailContent"></div>
-      </div>
-    </div>`;
-
-  $('netToggle').addEventListener('change', (e) => {
-    state.network.enabled = e.target.checked;
-    $('netToggleText').textContent = e.target.checked ? 'Capture ON' : 'Capture OFF';
-    window.electronAPI?.setNetworkCapture(e.target.checked);
-  });
-
-  // Network search input
-  $('netSearchInput').addEventListener('input', (e) => {
-    state.network.searchFilter = e.target.value.toLowerCase().trim();
-    renderNetwork();
-  });
-
-  // Type filter buttons
-  $('netTypeFilters').addEventListener('click', (e) => {
-    const btn = e.target.closest('.net-type-btn');
-    if (!btn) return;
-    $('netTypeFilters').querySelectorAll('.net-type-btn').forEach(b => b.classList.remove('active'));
-    btn.classList.add('active');
-    state.network.typeFilter = btn.dataset.type;
-    renderNetwork();
-  });
-
-  // Throttle select
-  $('netThrottleSelect').addEventListener('change', (e) => {
-    state.network.throttle = e.target.value;
-    // Send throttle config to the RN app
-    window.electronAPI?.setNetworkThrottle(state.network.throttle);
-  });
-
-  // Close detail button
-  $('netDetailClose').addEventListener('click', closeNetDetail);
-
-  buildNetHeader();
-}
-
-// ─── Column header with sort icons + resize ─────────────────────────────────
-function buildNetHeader() {
-  const header = $('netHeader');
-  header.innerHTML = '';
-  NET_COLS.forEach((col, i) => {
-    const cell = document.createElement('div');
-    cell.className = 'net-hcell';
-    cell.style.width = col.width + 'px';
-    cell.dataset.col = col.key;
-
-    // Label
-    const label = document.createElement('span');
-    label.className = 'net-hcell-label';
-    label.textContent = col.label;
-    cell.appendChild(label);
-
-    // Sort icon
-    if (col.key !== 'waterfall') {
-      const sortIcon = document.createElement('span');
-      sortIcon.className = 'net-sort-icon';
-      if (state.network.sortCol === col.key) {
-        sortIcon.textContent = state.network.sortDir === 'asc' ? ' \u25B2' : ' \u25BC';
-        sortIcon.classList.add('active');
-      }
-      cell.appendChild(sortIcon);
-
-      // Click to sort
-      cell.addEventListener('click', (e) => {
-        if (e.target.closest('.net-hcell-resize')) return; // don't sort on resize drag
-        if (state.network.sortCol === col.key) {
-          state.network.sortDir = state.network.sortDir === 'asc' ? 'desc' : 'asc';
-        } else {
-          state.network.sortCol = col.key;
-          state.network.sortDir = col.key === 'name' ? 'asc' : 'desc';
-        }
-        buildNetHeader(); // refresh sort icons
-        renderNetwork();
-      });
-      cell.style.cursor = 'pointer';
-    }
-
-    // Resize handle (not on last column)
-    if (i < NET_COLS.length - 1) {
-      const handle = document.createElement('div');
-      handle.className = 'net-hcell-resize';
-      handle.addEventListener('mousedown', (e) => startColResize(e, col, cell));
-      cell.appendChild(handle);
-    }
-    header.appendChild(cell);
-  });
-}
-
-function startColResize(e, col, cell) {
-  e.preventDefault();
-  const startX = e.clientX;
-  const startW = col.width;
-  const handle = e.target;
-  handle.classList.add('active');
-
-  function onMove(ev) {
-    const delta = ev.clientX - startX;
-    col.width = Math.max(col.min, startW + delta);
-    cell.style.width = col.width + 'px';
-    // Update all rows for this column
-    document.querySelectorAll(`.net-cell[data-col="${col.key}"], .net-hcell[data-col="${col.key}"]`)
-      .forEach(el => el.style.width = col.width + 'px');
-  }
-  function onUp() {
-    handle.classList.remove('active');
-    document.removeEventListener('mousemove', onMove);
-    document.removeEventListener('mouseup', onUp);
-  }
-  document.addEventListener('mousemove', onMove);
-  document.addEventListener('mouseup', onUp);
-}
-
-// ─── Network type matching ──────────────────────────────────────────────────
-function matchNetType(r, type) {
-  const ct = (r.responseHeaders?.['content-type'] || r.responseHeaders?.['Content-Type'] || '').toLowerCase();
-  const url = (r.url || '').toLowerCase();
-  switch (type) {
-    case 'fetch': return true; // All XHR/fetch requests pass
-    case 'js':    return ct.includes('javascript') || url.endsWith('.js') || url.endsWith('.bundle');
-    case 'css':   return ct.includes('css') || url.endsWith('.css');
-    case 'img':   return ct.includes('image') || /\.(png|jpg|jpeg|gif|svg|webp|ico)(\?|$)/i.test(url);
-    case 'media':  return ct.includes('video') || ct.includes('audio') || /\.(mp4|mp3|wav|webm)(\?|$)/i.test(url);
-    case 'font':  return ct.includes('font') || /\.(woff2?|ttf|otf|eot)(\?|$)/i.test(url);
-    case 'doc':   return ct.includes('html') || ct.includes('xml');
-    case 'ws':    return url.startsWith('ws://') || url.startsWith('wss://');
-    default:      return true;
-  }
-}
-
-let _netRAF = null;
-
-function handleNetworkEvent(event) {
-  if (event.type === 'console') { addConsoleLog(event); return; }
-  if (event.type !== 'network') return;
-  if (!state.network.enabled) return;
-
-  const { id, phase } = event;
-  if (phase === 'request') {
-    state.network.requests[id] = { ...event, _tab: 'headers' };
-    if (!state.network.order.includes(id)) state.network.order.push(id);
-    $('nBadge').textContent = state.network.order.length;
-  } else {
-    Object.assign(state.network.requests[id] || (state.network.requests[id] = {}), event);
-  }
-  if (!_netRAF) {
-    _netRAF = requestAnimationFrame(() => {
-      _netRAF = null;
-      renderNetwork();
-    });
-  }
-}
-
-// ─── Sort network IDs ───────────────────────────────────────────────────────
-function sortNetworkIds(ids) {
-  const { sortCol, sortDir } = state.network;
-  const reqs = state.network.requests;
-  const sorted = [...ids].sort((a, b) => {
-    const ra = reqs[a], rb = reqs[b];
-    if (!ra || !rb) return 0;
-    let va, vb;
-    switch (sortCol) {
-      case 'name':
-        va = (ra.url || '').toLowerCase(); vb = (rb.url || '').toLowerCase();
-        return va < vb ? -1 : va > vb ? 1 : 0;
-      case 'status':
-        va = ra.status || 0; vb = rb.status || 0;
-        return va - vb;
-      case 'type':
-        va = (ra.responseHeaders?.['content-type'] || '').toLowerCase();
-        vb = (rb.responseHeaders?.['content-type'] || '').toLowerCase();
-        return va < vb ? -1 : va > vb ? 1 : 0;
-      case 'size':
-        va = typeof ra.responseBody === 'string' ? ra.responseBody.length : (ra.responseBody ? JSON.stringify(ra.responseBody).length : 0);
-        vb = typeof rb.responseBody === 'string' ? rb.responseBody.length : (rb.responseBody ? JSON.stringify(rb.responseBody).length : 0);
-        return va - vb;
-      case 'time':
-      default:
-        va = ra.ts || 0; vb = rb.ts || 0;
-        return va - vb;
-    }
-  });
-  if (sortDir === 'desc') sorted.reverse();
-  return sorted;
-}
-
-// ─── Render network rows ────────────────────────────────────────────────────
-function renderNetwork() {
-  const rows = $('netRows');
-  const empty = $('networkEmpty');
-  if (!rows) return;
-
-  const { statusFilter, typeFilter, searchFilter } = state.network;
-  const visible = state.network.order.filter(id => {
-    const r = state.network.requests[id];
-    if (!r) return false;
-    if (statusFilter === '2xx' && !(r.status >= 200 && r.status < 300)) return false;
-    if (statusFilter === 'errors' && !(r.phase === 'error' || r.status >= 400)) return false;
-    // Global filter OR network-specific search
-    const filterTerm = searchFilter || state.filter;
-    if (filterTerm && !r.url?.toLowerCase().includes(filterTerm)) return false;
-    if (typeFilter !== 'all' && !matchNetType(r, typeFilter)) return false;
-    return true;
-  });
-
-  // Sort: apply current sort, default = newest first
-  const sortedVisible = sortNetworkIds(visible);
-
-  empty.style.display = sortedVisible.length ? 'none' : 'flex';
-  rows.querySelectorAll('.net-row').forEach(e => e.remove());
-
-  // Waterfall scale: find min/max timestamps
-  let wfMin = Infinity, wfMax = 0;
-  sortedVisible.forEach(id => {
-    const r = state.network.requests[id];
-    if (r.ts) { wfMin = Math.min(wfMin, r.ts); wfMax = Math.max(wfMax, r.ts + (r.duration || 0)); }
-  });
-  const wfRange = Math.max(wfMax - wfMin, 1);
-
-  const frag = document.createDocumentFragment();
-  sortedVisible.forEach(id => {
-    const r = state.network.requests[id];
-    frag.appendChild(buildNetRow(r, wfMin, wfRange));
-  });
-  rows.appendChild(frag);
-}
-
-function buildNetRow(r, wfMin, wfRange) {
-  const row = document.createElement('div');
-  row.className = 'net-row' + (r.id === state.network.selectedId ? ' selected' : '') + (r.phase === 'error' ? ' error' : '');
-  row.dataset.id = r.id;
-
-  const urlObj = tryURL(r.url);
-  const pathname = urlObj ? urlObj.pathname : r.url || '';
-  const filename = pathname.split('/').filter(Boolean).pop() || pathname;
-  const host = urlObj ? urlObj.host : '';
-
-  // Name — show method + full path (expands with column)
-  const nameCell = document.createElement('div');
-  nameCell.className = 'net-cell net-cell-name';
-  nameCell.dataset.col = 'name';
-  nameCell.style.width = NET_COLS[0].width + 'px';
-  const method = r.method || '?';
-  const mClass = ['GET','POST','PUT','PATCH','DELETE'].includes(method) ? `m-${method}` : 'm-other';
-  const fullPath = urlObj ? urlObj.pathname + urlObj.search : r.url || '';
-  nameCell.innerHTML = `<span class="method-badge ${mClass}">${method}</span> <span class="net-path" title="${esc(r.url)}">${esc(fullPath)}</span><span class="net-host">${esc(host)}</span>`;
-  row.appendChild(nameCell);
-
-  // Status
-  const statusCell = document.createElement('div');
-  statusCell.className = 'net-cell net-status';
-  statusCell.dataset.col = 'status';
-  statusCell.style.width = NET_COLS[1].width + 'px';
-  let statusStr = '...', sCls = 's-pending';
-  if (r.phase === 'error') { statusStr = 'ERR'; sCls = 's-err'; }
-  else if (r.status) { statusStr = String(r.status); sCls = `s-${Math.floor(r.status/100)}`; }
-  statusCell.className += ` ${sCls}`;
-  statusCell.textContent = statusStr;
-  row.appendChild(statusCell);
-
-  // Type (content-type from response headers)
-  const typeCell = document.createElement('div');
-  typeCell.className = 'net-cell net-type';
-  typeCell.dataset.col = 'type';
-  typeCell.style.width = NET_COLS[2].width + 'px';
-  const ct = r.responseHeaders?.['content-type'] || r.responseHeaders?.['Content-Type'] || '';
-  typeCell.textContent = ct.split(';')[0].replace('application/', '').replace('text/', '') || '—';
-  row.appendChild(typeCell);
-
-  // Initiator
-  const initCell = document.createElement('div');
-  initCell.className = 'net-cell net-initiator';
-  initCell.dataset.col = 'initiator';
-  initCell.style.width = NET_COLS[3].width + 'px';
-  initCell.textContent = r.initiator || 'xhr';
-  row.appendChild(initCell);
-
-  // Size
-  const sizeCell = document.createElement('div');
-  sizeCell.className = 'net-cell net-size';
-  sizeCell.dataset.col = 'size';
-  sizeCell.style.width = NET_COLS[4].width + 'px';
-  const bodyStr = typeof r.responseBody === 'string' ? r.responseBody : (r.responseBody != null ? JSON.stringify(r.responseBody) : '');
-  sizeCell.textContent = bodyStr.length > 0 ? formatSize(bodyStr.length) : '—';
-  row.appendChild(sizeCell);
-
-  // Time
-  const timeCell = document.createElement('div');
-  timeCell.className = 'net-cell net-time' + ((r.duration || 0) > 1500 ? ' slow' : '');
-  timeCell.dataset.col = 'time';
-  timeCell.style.width = NET_COLS[5].width + 'px';
-  timeCell.textContent = r.duration != null ? (r.duration > 999 ? `${(r.duration/1000).toFixed(1)}s` : `${r.duration}ms`) : '...';
-  row.appendChild(timeCell);
-
-  // Waterfall
-  const wfCell = document.createElement('div');
-  wfCell.className = 'net-cell net-waterfall';
-  wfCell.dataset.col = 'waterfall';
-  wfCell.style.width = NET_COLS[6].width + 'px';
-  if (r.ts) {
-    const left = ((r.ts - wfMin) / wfRange) * 100;
-    const width = Math.max(2, ((r.duration || 50) / wfRange) * 100);
-    let barCls = 'pending';
-    if (r.phase === 'error') barCls = 'err';
-    else if (r.status) barCls = `s${Math.floor(r.status/100)}`;
-    wfCell.innerHTML = `<div class="wf-bar ${barCls}" style="left:${left}%;width:${width}%"></div>`;
-  }
-  row.appendChild(wfCell);
-
-  // Click to select and show detail
-  row.addEventListener('click', () => selectNetRequest(r.id));
-
-  // Right-click for context menu (copy as cURL)
-  row.addEventListener('contextmenu', (e) => {
-    e.preventDefault();
-    showNetContextMenu(e, r);
-  });
-
-  return row;
-}
-
-// ─── Select request → show detail pane below the table (same layout) ────────
-function selectNetRequest(id) {
-  state.network.selectedId = id;
-  const r = state.network.requests[id];
-  if (!r) return;
-
-  // Highlight selected row
-  document.querySelectorAll('#netRows .net-row').forEach(el =>
-    el.classList.toggle('selected', el.dataset.id === id)
-  );
-
-  // Show detail pane below
-  const pane = $('netDetailPane');
-  pane.classList.add('open');
-  r._tab = r._tab || 'headers';
-  renderNetDetailTabs(r);
-  renderNetDetailContent(r);
-}
-
-function closeNetDetail() {
-  state.network.selectedId = null;
-  const pane = $('netDetailPane');
-  if (pane) pane.classList.remove('open');
-  document.querySelectorAll('#netRows .net-row').forEach(el =>
-    el.classList.remove('selected')
-  );
-}
-
-function renderNetDetailTabs(r) {
-  const tabs = $('netDetailTabs');
-  tabs.innerHTML = '';
-  ['Headers', 'Request', 'Preview', 'Response'].forEach(label => {
-    const key = label.toLowerCase();
-    const btn = document.createElement('button');
-    btn.className = 'detail-tab' + (r._tab === key ? ' active' : '');
-    btn.textContent = label;
-    btn.addEventListener('click', () => {
-      r._tab = key;
-      tabs.querySelectorAll('.detail-tab').forEach(b => b.classList.remove('active'));
-      btn.classList.add('active');
-      renderNetDetailContent(r);
-    });
-    tabs.appendChild(btn);
-  });
-}
-
-function renderNetDetailContent(r) {
-  const body = $('netDetailContent');
-  if (!body) return;
-  const tab = r._tab || 'headers';
-
-  if (tab === 'headers') {
-    const rqH = r.requestHeaders || {};
-    const rsH = r.responseHeaders || {};
-    const renderH = (title, h) => {
-      const keys = Object.keys(h);
-      if (!keys.length) return `<div class="section-label">${title}</div><span style="color:var(--text-dim)">none</span>`;
-      return `<div class="section-label">${title}</div><div class="kv-grid">${keys.map(k => `<span class="kv-key">${esc(k)}</span><span class="kv-val">${esc(h[k])}</span>`).join('')}</div>`;
-    };
-    body.innerHTML = `<div class="section-label" style="margin-top:0">General</div>
-      <div class="kv-grid">
-        <span class="kv-key">Request URL</span><span class="kv-val">${esc(r.url)}</span>
-        <span class="kv-key">Method</span><span class="kv-val">${esc(r.method)}</span>
-        <span class="kv-key">Status</span><span class="kv-val ${r.status ? 's-' + Math.floor(r.status/100) : 's-pending'}">${r.status || 'Pending'} ${r.statusText || ''}</span>
-      </div>
-      ${renderH('Response Headers', rsH)}
-      ${renderH('Request Headers', rqH)}`;
-  } else if (tab === 'request') {
-    body.innerHTML = r.requestBody ? renderJSON(r.requestBody) : '<span style="color:var(--text-dim)">No request body</span>';
-  } else if (tab === 'preview') {
-    if (r.phase === 'error') { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
-    if (!r.responseBody && r.phase !== 'response') { body.innerHTML = '<span style="color:var(--text-dim)">Pending...</span>'; return; }
-    // Render as collapsible JSON tree with right-click copy
-    const val = r.responseBody;
-    let treeData = val;
-    if (typeof val === 'string') {
-      try { treeData = JSON.parse(val); } catch { body.textContent = val; return; }
-    }
-    if (treeData && typeof treeData === 'object') {
-      body.innerHTML = '';
-      body.appendChild(createTreeNode(null, treeData, false));
-      // Right-click on preview to copy the whole object or clicked node value
-      body.addEventListener('contextmenu', (e) => {
-        e.preventDefault();
-        showPreviewCopyMenu(e, treeData);
-      });
-    } else {
-      body.innerHTML = '<span style="color:var(--text-dim)">No preview available</span>';
-    }
-  } else if (tab === 'response') {
-    if (r.phase === 'error') { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
-    if (!r.responseBody && r.phase !== 'response') { body.innerHTML = '<span style="color:var(--text-dim)">Pending...</span>'; return; }
-    body.innerHTML = renderJSON(r.responseBody);
-  }
-}
-
-// ─── Network context menus ──────────────────────────────────────────────────
-function showNetContextMenu(e, r) {
-  const items = [
-    { label: 'Copy as cURL', action: () => navigator.clipboard.writeText(buildCurlCommand(r)) },
-    { label: 'Copy URL', action: () => navigator.clipboard.writeText(r.url || '') },
-  ];
-  if (r.responseBody) {
-    items.push({ label: 'Copy Response', action: () => {
-      const text = typeof r.responseBody === 'string' ? r.responseBody : JSON.stringify(r.responseBody, null, 2);
-      navigator.clipboard.writeText(text);
-    }});
-  }
-  showContextMenu(e, items);
-}
-
-function showPreviewCopyMenu(e, fullData) {
-  const items = [
-    { label: 'Copy Object', action: () => navigator.clipboard.writeText(JSON.stringify(fullData, null, 2)) },
-  ];
-  const sel = window.getSelection();
-  if (sel && sel.toString().length > 0) {
-    items.push({ label: 'Copy Selection', action: () => navigator.clipboard.writeText(sel.toString()) });
-  }
-  const keyEl = e.target.closest('.ov-key');
-  const leafEl = e.target.closest('.ov-leaf');
-  if (keyEl || leafEl) {
-    items.push({ label: 'Copy Value', action: () => navigator.clipboard.writeText((leafEl || keyEl.parentElement).textContent) });
-  }
-  showContextMenu(e, items);
-}
-
-function buildCurlCommand(r) {
-  let cmd = `curl '${r.url}'`;
-  if (r.method && r.method !== 'GET') cmd += ` -X ${r.method}`;
-  const headers = r.requestHeaders || {};
-  Object.entries(headers).forEach(([k, v]) => {
-    cmd += ` \\\n  -H '${k}: ${v}'`;
-  });
-  if (r.requestBody) {
-    const body = typeof r.requestBody === 'string' ? r.requestBody : JSON.stringify(r.requestBody);
-    cmd += ` \\\n  --data-raw '${body.replace(/'/g, "'\\''")}'`;
-  }
-  return cmd;
-}
-
-// ─── Export via window.RNDebug ────────────────────────────────────────────────
-window.RNDebug.NET_COLS = NET_COLS;
-window.RNDebug.initNetworkPanel = initNetworkPanel;
-window.RNDebug.buildNetHeader = buildNetHeader;
-window.RNDebug.startColResize = startColResize;
-window.RNDebug.matchNetType = matchNetType;
-window.RNDebug.sortNetworkIds = sortNetworkIds;
-window.RNDebug.handleNetworkEvent = handleNetworkEvent;
-window.RNDebug.renderNetwork = renderNetwork;
-window.RNDebug.buildNetRow = buildNetRow;
-window.RNDebug.selectNetRequest = selectNetRequest;
-window.RNDebug.closeNetDetail = closeNetDetail;
-window.RNDebug.renderNetDetailTabs = renderNetDetailTabs;
-window.RNDebug.renderNetDetailContent = renderNetDetailContent;
-window.RNDebug.showNetContextMenu = showNetContextMenu;
-window.RNDebug.showPreviewCopyMenu = showPreviewCopyMenu;
-window.RNDebug.buildCurlCommand = buildCurlCommand;