@rozenite/network-activity-plugin 1.0.0-alpha.1 → 1.0.0-alpha.10

package/src/ui/network-details.tsx

@@ -1,134 +0,0 @@
-import React 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';
-
-interface NetworkDetailsProps {
-  entry: NetworkEntry | null;
-}
-
-export const NetworkDetails: React.FC<NetworkDetailsProps> = ({ entry }) => {
-  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.request.request.url} showOnlyWhenTruncated>
-              <span className={styles.urlText}>
-                {formatLongUrl(entry.request.request.url, 100)}
-              </span>
-            </Tooltip>
-          </div>
-          <div className={styles.infoRow}>
-            <strong>Request Method:</strong> {entry.request.request.method}
-          </div>
-          <div className={styles.infoRow}>
-            <strong>Status Code:</strong> {entry.response?.response.status || 'Pending'}
-          </div>
-          <div className={styles.infoRow}>
-            <strong>Remote Address:</strong> {entry.response?.response.remoteIPAddress || 'Unknown'}
-          </div>
-          <div className={styles.infoRow}>
-            <strong>Referrer Policy:</strong> {entry.request.request.headers['referer'] || 'no-referrer'}
-          </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.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.request.request.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.response && (
-        <Card className={styles.card}>
-          <h3 className={styles.cardTitle}>Size Information</h3>
-          <div className={styles.infoText}>
-            <div className={styles.infoRow}>
-              <strong>Decoded Body Size:</strong> {formatFileSize(entry.response.response.decodedBodySize)}
-            </div>
-          </div>
-        </Card>
-      )}
-
-      {/* Timing Information */}
-      {entry.response?.response.timing && (
-        <Card className={styles.card}>
-          <h3 className={styles.cardTitle}>Timing</h3>
-          <div className={styles.infoText}>
-            <div className={styles.infoRow}>
-              <strong>Time to First Byte:</strong> {entry.response.response.timing.receiveHeadersEnd - entry.response.response.timing.sendEnd}ms
-            </div>
-            <div className={styles.infoRow}>
-              <strong>Total Duration:</strong> {entry.duration ? formatDuration(entry.duration) : 'Unknown'}
-            </div>
-          </div>
-        </Card>
-      )}
-
-      {/* Error Information */}
-      {entry.loadingFailed && (
-        <Card className={styles.card}>
-          <h3 className={styles.cardTitleError}>Error</h3>
-          <div className={styles.infoText}>
-            <div className={styles.infoRow}>
-              <strong>Error Text:</strong> {entry.loadingFailed.errorText}
-            </div>
-            <div className={styles.infoRow}>
-              <strong>Type:</strong> {entry.loadingFailed.type}
-            </div>
-            {entry.loadingFailed.blockedReason && (
-              <div className={styles.infoRow}>
-                <strong>Blocked Reason:</strong> {entry.loadingFailed.blockedReason}
-              </div>
-            )}
-            {entry.loadingFailed.canceled && (
-              <div className={styles.infoRow}>
-                <strong>Canceled:</strong> Yes
-              </div>
-            )}
-          </div>
-        </Card>
-      )}
-    </div>
-  );
-}; 

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

@@ -1,122 +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;
-}
-
-.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,145 +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';
-
-interface NetworkListProps {
-  entries: NetworkEntry[];
-  selectedRequestId: string | null;
-  onSelect: (requestId: string) => void;
-  height: number;
-}
-
-const ITEM_HEIGHT = 60; // Height of each network list item
-
-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: NetworkEntry; index: number }> = ({ entry, index }) => {
-    const status = entry.response?.response.status || 0;
-    const method = entry.request.request.method;
-    const url = entry.request.request.url;
-    const { domain, path } = parseUrl(url);
-    
-    // Get size information
-    const encodedSize = entry.response?.response.encodedDataLength || 0;
-    const decodedSize = entry.response?.response.decodedBodySize || 0;
-    const displaySize = decodedSize > 0 ? decodedSize : encodedSize;
-
-    const isSelected = selectedRequestId === entry.requestId;
-
-    return (
-      <div
-        className={isSelected ? styles.listItemSelected : styles.listItem}
-        onClick={() => onSelect(entry.requestId)}
-      >
-        <div className={styles.statusColumn}>
-          <Tooltip 
-            content={`Status: ${status || 'Pending'}`} 
-            showOnlyWhenTruncated
-            variant={status >= 400 ? 'error' : status >= 300 ? 'warning' : 'info'}
-          >
-            <Badge color={getStatusColor(status)}>
-              {status || '...'}
-            </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.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>
-    );
-  };
-
-  if (entries.length === 0) {
-    return (
-      <div className={styles.emptyContainer} style={{ height }}>
-        <div className={styles.emptyText}>
-          No network requests recorded
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      ref={parentRef}
-      className={styles.container}
-      style={{ height }}
-    >
-      <div
-        className={styles.virtualContainer}
-        style={{ height: `${virtualizer.getTotalSize()}px` }}
-      >
-        {virtualizer.getVirtualItems().map((virtualItem: any) => (
-          <div
-            key={virtualItem.key}
-            className={styles.virtualItem}
-            style={{
-              height: `${virtualItem.size}px`,
-              transform: `translateY(${virtualItem.start}px)`,
-            }}
-          >
-            <NetworkListItem
-              entry={entries[virtualItem.index]}
-              index={virtualItem.index}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}; 

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

@@ -1,9 +0,0 @@
-.recordingButton {
-  margin-right: 8px;
-}
-
-.requestCount {
-  margin-left: auto;
-  font-size: 12px;
-  color: #666;
-} 

package/src/ui/network-toolbar.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Button, Toolbar } from './components';
-import styles from './network-toolbar.module.css';
-
-interface NetworkToolbarProps {
-  isRecording: boolean;
-  onToggleRecording: () => void;
-  onClear: () => void;
-  requestCount: number;
-}
-
-export const NetworkToolbar: React.FC<NetworkToolbarProps> = ({
-  isRecording,
-  onToggleRecording,
-  onClear,
-  requestCount,
-}) => {
-  return (
-    <Toolbar>
-      <Button
-        onClick={onToggleRecording}
-        variant={isRecording ? 'danger' : 'success'}
-        size="small"
-        className={styles.recordingButton}
-      >
-        {isRecording ? 'Stop' : 'Start'} Recording
-      </Button>
-      <Button
-        onClick={onClear}
-        variant="secondary"
-        size="small"
-      >
-        Clear
-      </Button>
-      <div className={styles.requestCount}>
-        {requestCount} requests
-      </div>
-    </Toolbar>
-  );
-}; 

package/src/ui/panel.module.css

@@ -1,61 +0,0 @@
-.container {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  font-family: system-ui, -apple-system, sans-serif;
-}
-
-.mainContent {
-  flex: 1;
-  display: flex;
-  overflow: hidden;
-  min-height: 0;
-}
-
-.networkListContainer {
-  width: 60%;
-  border-right: 1px solid #e0e0e0;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.listContent {
-  flex: 1;
-}
-
-.detailsContainer {
-  width: 40%;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.headerStatus {
-  width: 60px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.headerMethod {
-  width: 80px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.headerName {
-  flex: 1;
-  min-width: 0;
-}
-
-.headerTime {
-  width: 80px;
-  text-align: right;
-  flex-shrink: 0;
-}
-
-.headerSize {
-  width: 80px;
-  text-align: right;
-  flex-shrink: 0;
-}