@rozenite/network-activity-plugin 1.0.0-alpha.5 → 1.0.0-alpha.7

package/src/ui/network-details.tsx

@@ -1,345 +0,0 @@
-import React, { useState } from 'react';
-import { NetworkEntry } from '../types/network';
-import { formatFileSize, formatDuration, formatLongUrl } from './utils';
-import { Card, EmptyState, Tooltip } from './components';
-import styles from './network-details.module.css';
-
-// Enhanced network entry type to match the panel
-type EnhancedNetworkEntry = NetworkEntry & {
-  type?: string;
-  initiator?: {
-    type: string;
-    url?: string;
-    lineNumber?: number;
-    columnNumber?: number;
-  };
-  request?: {
-    url: string;
-    method: string;
-    headers: Record<string, string>;
-    postData?: string;
-    hasPostData?: boolean;
-  };
-  response?: {
-    url: string;
-    status: number;
-    statusText: string;
-    headers: Record<string, string>;
-    mimeType: string;
-    encodedDataLength: number;
-    responseTime: number;
-  };
-  responseBody?: {
-    body: string;
-    base64Encoded: boolean;
-  };
-  dataLength?: number;
-};
-
-// Symbolication response types
-interface SymbolicatedStackFrame {
-  column: number;
-  file: string;
-  lineNumber: number;
-  methodName: string;
-  collapse: boolean;
-}
-
-interface CodeFrame {
-  content: string;
-  location: {
-    row: number;
-    column: number;
-  };
-  fileName: string;
-}
-
-interface SymbolicationResponse {
-  codeFrame: CodeFrame;
-  stack: SymbolicatedStackFrame[];
-}
-
-interface NetworkDetailsProps {
-  entry: EnhancedNetworkEntry | null;
-  onRequestResponseBody?: (requestId: string) => void;
-}
-
-export const NetworkDetails: React.FC<NetworkDetailsProps> = ({
-  entry,
-  onRequestResponseBody,
-}) => {
-  const [isSymbolicating, setIsSymbolicating] = useState(false);
-  const [, forceUpdate] = useState({});
-
-  const symbolicateCaller = async () => {
-    if (!entry?.initiator) return;
-
-    setIsSymbolicating(true);
-    try {
-      const stackData = {
-        stack: [
-          {
-            column: entry.initiator.columnNumber || 0,
-            file: entry.initiator.url || '',
-            lineNumber: entry.initiator.lineNumber || 0,
-          },
-        ],
-      };
-
-      const response = await fetch(`${window.location.origin}/symbolicate`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(stackData),
-      });
-
-      if (response.ok) {
-        const data: SymbolicationResponse = await response.json();
-
-        // Update the entry.initiator with symbolicated data
-        if (data.stack && data.stack.length > 0) {
-          const symbolicatedFrame = data.stack[0];
-          if (entry.initiator) {
-            entry.initiator.url = symbolicatedFrame.file;
-            entry.initiator.lineNumber = symbolicatedFrame.lineNumber;
-            entry.initiator.columnNumber = symbolicatedFrame.column;
-            // Add method name to initiator
-            (entry.initiator as any).methodName = symbolicatedFrame.methodName;
-          }
-        }
-        forceUpdate({});
-      } else {
-        console.error('Symbolication failed:', response.statusText);
-      }
-    } catch (error) {
-      console.error('Symbolication error:', error);
-    } finally {
-      setIsSymbolicating(false);
-    }
-  };
-
-  if (!entry) {
-    return <EmptyState message="Select a request to view details" />;
-  }
-
-  return (
-    <div className={styles.container}>
-      {/* General Information */}
-      <Card className={styles.card}>
-        <h3 className={styles.cardTitle}>General</h3>
-        <div className={styles.infoText}>
-          <div className={styles.infoRowUrl}>
-            <strong>Request URL:</strong>
-            <Tooltip content={entry.url} showOnlyWhenTruncated>
-              <span className={styles.urlText}>
-                {formatLongUrl(entry.url, 100)}
-              </span>
-            </Tooltip>
-          </div>
-          <div className={styles.infoRow}>
-            <strong>Request Method:</strong> {entry.method}
-          </div>
-          <div className={styles.infoRow}>
-            <strong>Status Code:</strong> {entry.response?.status || 'Pending'}
-          </div>
-          <div className={styles.infoRow}>
-            <strong>Status:</strong> {entry.status}
-          </div>
-          {entry.type && (
-            <div className={styles.infoRow}>
-              <strong>Resource Type:</strong> {entry.type}
-            </div>
-          )}
-          {entry.initiator && (
-            <div className={styles.infoRow}>
-              <strong>Initiator:</strong> {entry.initiator.type}
-              {(entry.initiator as any).methodName && (
-                <div className={styles.infoRowSub}>
-                  <strong>Method:</strong> {(entry.initiator as any).methodName}
-                </div>
-              )}
-              {entry.initiator.url && (
-                <div className={styles.infoRowSub}>
-                  <strong>URL:</strong> {entry.initiator.url}
-                </div>
-              )}
-              {entry.initiator.lineNumber && (
-                <div className={styles.infoRowSub}>
-                  <strong>Line:</strong> {entry.initiator.lineNumber}:
-                  {entry.initiator.columnNumber || 0}
-                </div>
-              )}
-              <div className={styles.infoRowSub}>
-                <button
-                  className={styles.symbolicateButton}
-                  onClick={symbolicateCaller}
-                  disabled={isSymbolicating}
-                >
-                  {isSymbolicating
-                    ? 'Symbolicating...'
-                    : 'Symbolicate initiator'}
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      </Card>
-
-      {/* Response Headers */}
-      {entry.response && (
-        <Card className={styles.card}>
-          <h3 className={styles.cardTitle}>Response Headers</h3>
-          <div className={styles.headersContainer}>
-            {Object.entries(entry.response.headers).map(([key, value]) => (
-              <div key={key} className={styles.headerRow}>
-                <strong>{key}:</strong>
-                <Tooltip content={value} showOnlyWhenTruncated>
-                  <span className={styles.headerValue}>{value}</span>
-                </Tooltip>
-              </div>
-            ))}
-          </div>
-        </Card>
-      )}
-
-      {/* Request Headers */}
-      <Card className={styles.card}>
-        <h3 className={styles.cardTitle}>Request Headers</h3>
-        <div className={styles.headersContainer}>
-          {Object.entries(entry.headers).map(([key, value]) => (
-            <div key={key} className={styles.headerRow}>
-              <strong>{key}:</strong>
-              <Tooltip content={value} showOnlyWhenTruncated>
-                <span className={styles.headerValue}>{value}</span>
-              </Tooltip>
-            </div>
-          ))}
-        </div>
-      </Card>
-
-      {/* Size Information */}
-      {(entry.encodedDataLength || entry.dataLength) && (
-        <Card className={styles.card}>
-          <h3 className={styles.cardTitle}>Size Information</h3>
-          <div className={styles.infoText}>
-            {entry.dataLength && (
-              <div className={styles.infoRow}>
-                <strong>Data Length:</strong> {formatFileSize(entry.dataLength)}
-              </div>
-            )}
-            {entry.encodedDataLength && (
-              <div className={styles.infoRow}>
-                <strong>Encoded Data Length:</strong>{' '}
-                {formatFileSize(entry.encodedDataLength)}
-              </div>
-            )}
-            {entry.response?.mimeType && (
-              <div className={styles.infoRow}>
-                <strong>MIME Type:</strong> {entry.response.mimeType}
-              </div>
-            )}
-          </div>
-        </Card>
-      )}
-
-      {/* Timing Information */}
-      {entry.duration && (
-        <Card className={styles.card}>
-          <h3 className={styles.cardTitle}>Timing</h3>
-          <div className={styles.infoText}>
-            <div className={styles.infoRow}>
-              <strong>Duration:</strong> {formatDuration(entry.duration)}
-            </div>
-            <div className={styles.infoRow}>
-              <strong>Start Time:</strong>{' '}
-              {new Date(entry.startTime).toLocaleTimeString()}
-            </div>
-            {entry.endTime && (
-              <div className={styles.infoRow}>
-                <strong>End Time:</strong>{' '}
-                {new Date(entry.endTime).toLocaleTimeString()}
-              </div>
-            )}
-            {entry.response?.responseTime && (
-              <div className={styles.infoRow}>
-                <strong>Response Time:</strong>{' '}
-                {new Date(entry.response.responseTime).toLocaleTimeString()}
-              </div>
-            )}
-          </div>
-        </Card>
-      )}
-
-      {/* Error Information */}
-      {entry.status === 'failed' && (
-        <Card className={styles.card}>
-          <h3 className={styles.cardTitle}>Error Information</h3>
-          <div className={styles.infoText}>
-            <div className={styles.infoRow}>
-              <strong>Error:</strong> {entry.errorText || 'Unknown error'}
-            </div>
-            <div className={styles.infoRow}>
-              <strong>Canceled:</strong> {entry.canceled ? 'Yes' : 'No'}
-            </div>
-          </div>
-        </Card>
-      )}
-
-      {/* Post Data */}
-      {entry.postData && (
-        <Card className={styles.card}>
-          <h3 className={styles.cardTitle}>Post Data</h3>
-          <div className={styles.postDataContainer}>
-            <pre className={styles.postDataText}>{entry.postData}</pre>
-          </div>
-        </Card>
-      )}
-
-      {/* Response Body */}
-      {entry.response && (
-        <Card className={styles.card}>
-          <h3 className={styles.cardTitle}>Response Body</h3>
-          {entry.responseBody ? (
-            <div className={styles.responseBodyContainer}>
-              <pre className={styles.responseBodyText}>
-                {entry.responseBody.base64Encoded
-                  ? atob(entry.responseBody.body)
-                  : entry.responseBody.body}
-              </pre>
-            </div>
-          ) : (
-            <div className={styles.responseBodyContainer}>
-              <button
-                className={styles.loadResponseBodyButton}
-                onClick={() => onRequestResponseBody?.(entry.requestId)}
-                disabled={!onRequestResponseBody}
-              >
-                Load Response Body
-              </button>
-            </div>
-          )}
-        </Card>
-      )}
-
-      {/* Request Details */}
-      {entry.request && (
-        <Card className={styles.card}>
-          <h3 className={styles.cardTitle}>Request Details</h3>
-          <div className={styles.infoText}>
-            <div className={styles.infoRow}>
-              <strong>Has Post Data:</strong>{' '}
-              {entry.request.hasPostData ? 'Yes' : 'No'}
-            </div>
-            {entry.request.postData && (
-              <div className={styles.infoRow}>
-                <strong>Post Data Length:</strong>{' '}
-                {entry.request.postData.length} characters
-              </div>
-            )}
-          </div>
-        </Card>
-      )}
-    </div>
-  );
-};

package/src/ui/network-list.module.css

@@ -1,128 +0,0 @@
-.container {
-  height: 100%;
-  overflow: auto;
-}
-
-.virtualContainer {
-  height: 100%;
-  width: 100%;
-  position: relative;
-}
-
-.virtualItem {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 60px;
-}
-
-.listItem {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  border-bottom: 1px solid #e0e0e0;
-  background-color: white;
-  cursor: pointer;
-  font-size: 12px;
-  font-family: monospace;
-  height: 60px;
-  box-sizing: border-box;
-  min-width: 0;
-}
-
-.listItemSelected {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  border-bottom: 1px solid #e0e0e0;
-  background-color: #f5f5f5;
-  cursor: pointer;
-  font-size: 12px;
-  font-family: monospace;
-  height: 60px;
-  box-sizing: border-box;
-  min-width: 0;
-}
-
-.statusColumn {
-  width: 60px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.methodColumn {
-  width: 80px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.urlColumn {
-  flex: 1;
-  overflow: hidden;
-  min-width: 0;
-}
-
-.typeColumn {
-  width: 100px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.domainText {
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.pathText {
-  color: #666;
-  font-size: 11px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.fullUrlText {
-  color: #999;
-  font-size: 10px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-top: 1px;
-}
-
-.durationColumn {
-  width: 80px;
-  text-align: right;
-  margin-right: 8px;
-  flex-shrink: 0;
-}
-
-.sizeColumn {
-  width: 80px;
-  text-align: right;
-  flex-shrink: 0;
-}
-
-.columnText {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-}
-
-.emptyContainer {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.emptyText {
-  color: #666;
-  font-size: 14px;
-} 

package/src/ui/network-list.tsx

@@ -1,240 +0,0 @@
-import React from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { NetworkEntry } from '../types/network';
-import {
-  getStatusColor,
-  getMethodColor,
-  formatDuration,
-  formatFileSize,
-  parseUrl,
-} from './utils';
-import { Badge, Tooltip } from './components';
-import styles from './network-list.module.css';
-
-// Enhanced network entry type to match the panel
-type EnhancedNetworkEntry = NetworkEntry & {
-  type?: string;
-  initiator?: {
-    type: string;
-    url?: string;
-    lineNumber?: number;
-    columnNumber?: number;
-  };
-  request?: {
-    url: string;
-    method: string;
-    headers: Record<string, string>;
-    postData?: string;
-    hasPostData?: boolean;
-  };
-  response?: {
-    url: string;
-    status: number;
-    statusText: string;
-    headers: Record<string, string>;
-    mimeType: string;
-    encodedDataLength: number;
-    responseTime: number;
-  };
-  dataLength?: number;
-};
-
-interface NetworkListProps {
-  entries: EnhancedNetworkEntry[];
-  selectedRequestId: string | null;
-  onSelect: (requestId: string) => void;
-  height: number;
-}
-
-const ITEM_HEIGHT = 60; // Height of each network list item
-
-const getResourceTypeColor = (type: string): string => {
-  switch (type) {
-    case 'Document':
-      return '#4285f4';
-    case 'Stylesheet':
-      return '#34a853';
-    case 'Script':
-      return '#fbbc04';
-    case 'Image':
-      return '#ea4335';
-    case 'Font':
-      return '#9c27b0';
-    case 'XHR':
-      return '#ff9800';
-    case 'Fetch':
-      return '#2196f3';
-    case 'WebSocket':
-      return '#00bcd4';
-    case 'Media':
-      return '#e91e63';
-    default:
-      return '#757575';
-  }
-};
-
-const getStatusDisplay = (
-  entry: EnhancedNetworkEntry
-): { text: string; color: string } => {
-  if (entry.status === 'failed') {
-    return { text: 'Failed', color: '#d32f2f' };
-  }
-  if (entry.status === 'pending') {
-    return { text: 'Pending', color: '#ff9800' };
-  }
-  if (entry.status === 'loading') {
-    return { text: 'Loading', color: '#2196f3' };
-  }
-  if (entry.status === 'finished') {
-    const status = entry.response?.status || 0;
-    if (status >= 400) {
-      return { text: status.toString(), color: '#d32f2f' };
-    }
-    if (status >= 300) {
-      return { text: status.toString(), color: '#ff9800' };
-    }
-    return { text: status.toString(), color: '#4caf50' };
-  }
-  return { text: '...', color: '#757575' };
-};
-
-export const NetworkList: React.FC<NetworkListProps> = ({
-  entries,
-  selectedRequestId,
-  onSelect,
-  height,
-}) => {
-  const parentRef = React.useRef<HTMLDivElement>(null);
-
-  const virtualizer = useVirtualizer({
-    count: entries.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => ITEM_HEIGHT,
-    overscan: 5,
-  });
-
-  const NetworkListItem: React.FC<{
-    entry: EnhancedNetworkEntry;
-    index: number;
-  }> = ({ entry, index }) => {
-    const method = entry.method;
-    const url = entry.url;
-    const { domain, path } = parseUrl(url);
-    const resourceType = entry.type || 'Other';
-
-    // Get size information - prefer dataLength over encodedDataLength for display
-    const displaySize = entry.dataLength || entry.encodedDataLength || 0;
-    const statusDisplay = getStatusDisplay(entry);
-
-    const isSelected = selectedRequestId === entry.requestId;
-
-    return (
-      <div
-        className={isSelected ? styles.listItemSelected : styles.listItem}
-        onClick={() => onSelect(entry.requestId)}
-      >
-        <div className={styles.statusColumn}>
-          <Tooltip
-            content={`Status: ${statusDisplay.text}`}
-            showOnlyWhenTruncated
-            variant={
-              statusDisplay.color === '#d32f2f'
-                ? 'error'
-                : statusDisplay.color === '#ff9800'
-                ? 'warning'
-                : 'info'
-            }
-          >
-            <Badge color={statusDisplay.color}>{statusDisplay.text}</Badge>
-          </Tooltip>
-        </div>
-        <div className={styles.methodColumn}>
-          <Tooltip
-            content={`Method: ${method}`}
-            showOnlyWhenTruncated
-            variant="info"
-          >
-            <Badge color={getMethodColor(method)}>{method}</Badge>
-          </Tooltip>
-        </div>
-        <div className={styles.urlColumn}>
-          <Tooltip content={domain} showOnlyWhenTruncated>
-            <div className={styles.domainText}>{domain}</div>
-          </Tooltip>
-          <Tooltip content={path} showOnlyWhenTruncated>
-            <div className={styles.pathText}>{path}</div>
-          </Tooltip>
-          <Tooltip content={url} showOnlyWhenTruncated>
-            <div className={styles.fullUrlText}>{url}</div>
-          </Tooltip>
-        </div>
-        <div className={styles.typeColumn}>
-          <Tooltip
-            content={`Resource Type: ${resourceType}`}
-            showOnlyWhenTruncated
-            variant="info"
-          >
-            <Badge color={getResourceTypeColor(resourceType)}>
-              {resourceType}
-            </Badge>
-          </Tooltip>
-        </div>
-        <div className={styles.durationColumn}>
-          <Tooltip
-            content={`Duration: ${
-              entry.duration ? formatDuration(entry.duration) : 'Pending'
-            }`}
-            showOnlyWhenTruncated
-          >
-            <span className={styles.columnText}>
-              {entry.duration ? formatDuration(entry.duration) : '...'}
-            </span>
-          </Tooltip>
-        </div>
-        <div className={styles.sizeColumn}>
-          <Tooltip
-            content={`Size: ${
-              displaySize > 0 ? formatFileSize(displaySize) : 'Unknown'
-            }`}
-            showOnlyWhenTruncated
-          >
-            <span className={styles.columnText}>
-              {displaySize > 0 ? formatFileSize(displaySize) : '...'}
-            </span>
-          </Tooltip>
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <div ref={parentRef} className={styles.networkList} style={{ height }}>
-      <div
-        style={{
-          height: `${virtualizer.getTotalSize()}px`,
-          width: '100%',
-          position: 'relative',
-        }}
-      >
-        {virtualizer.getVirtualItems().map((virtualItem) => (
-          <div
-            key={virtualItem.key}
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              width: '100%',
-              height: `${virtualItem.size}px`,
-              transform: `translateY(${virtualItem.start}px)`,
-            }}
-          >
-            <NetworkListItem
-              entry={entries[virtualItem.index]}
-              index={virtualItem.index}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};