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

package/src/types/network.ts

@@ -1,153 +1,32 @@
-// Types for Chrome DevTools Protocol Network events
+// Network types for the simplified event structure - limited to XMLHttpRequest capturable properties
+import {
+  NetworkRequestId,
+  NetworkLoaderId,
+  NetworkResourceType,
+  NetworkRequest,
+  NetworkResponse,
+  NetworkInitiator,
+} from './client';
 
-export interface NetworkRequest {
-  requestId: string;
-  loaderId: string;
-  documentURL: string;
-  request: {
-    url: string;
-    method: string;
-    headers: Record<string, string>;
-    postData?: string;
-    hasPostData?: boolean;
-  };
-  timestamp: number;
-  wallTime: number;
-  initiator: {
-    type: string;
-    stack?: {
-      callFrames: Array<{
-        functionName: string;
-        scriptId: string;
-        url: string;
-        lineNumber: number;
-        columnNumber: number;
-      }>;
-    };
-  };
-  redirectHasExtraInfo: boolean;
-  redirectResponse?: any;
-  referrerPolicy: string;
-  type: string;
-  frameId: string;
-  hasUserGesture: boolean;
-}
-
-export interface NetworkRequestExtraInfo {
-  requestId: string;
-  blockedCookies: Array<{
-    blockedReasons: string[];
-    cookie: {
-      name: string;
-      value: string;
-      domain: string;
-      path: string;
-      expires: number;
-      size: number;
-      httpOnly: boolean;
-      secure: boolean;
-      session: boolean;
-      sameSite: string;
-    };
-  }>;
+export type NetworkEntry = {
+  requestId: NetworkRequestId;
+  loaderId?: NetworkLoaderId;
+  documentURL?: string;
+  url: string;
+  method: string;
   headers: Record<string, string>;
-  connectTiming: {
-    requestTime: number;
-  };
-  clientSecurityState?: {
-    initiatorIsSecureContext: boolean;
-    initiatorIPAddressSpace: string;
-    privateNetworkRequestPolicy: string;
-  };
-  siteHasCookieInOtherPartition: boolean;
-}
-
-export interface NetworkResponse {
-  requestId: string;
-  loaderId: string;
-  timestamp: number;
-  type: string;
-  response: {
-    url: string;
-    status: number;
-    statusText: string;
-    headers: Record<string, string>;
-    mimeType: string;
-    requestHeaders: Record<string, string>;
-    requestHeadersText?: string;
-    connectionReused: boolean;
-    connectionId: number;
-    remoteIPAddress?: string;
-    remotePort?: number;
-    protocol?: string;
-    securityState: string;
-    encodedDataLength: number;
-    timing?: {
-      requestTime: number;
-      proxyStart: number;
-      proxyEnd: number;
-      dnsStart: number;
-      dnsEnd: number;
-      connectStart: number;
-      connectEnd: number;
-      sslStart: number;
-      sslEnd: number;
-      workerStart: number;
-      workerReadyStart: number;
-      workerReadyEnd: number;
-      sendStart: number;
-      sendEnd: number;
-      pushStart: number;
-      pushEnd: number;
-      receiveHeadersEnd: number;
-    };
-    responseTime: number;
-    fromDiskCache: boolean;
-    fromServiceWorker: boolean;
-    fromPrefetchCache: boolean;
-    encodedBodySize: number;
-    decodedBodySize: number;
-    headersText?: string;
-    serviceWorkerResponseSource?: string;
-    responseSource: string;
-    statusCode: number;
-  };
-  hasExtraInfo: boolean;
-}
-
-export interface NetworkLoadingFinished {
-  requestId: string;
-  timestamp: number;
-  encodedDataLength: number;
-  shouldReportCorbBlocking: boolean;
-}
-
-export interface NetworkLoadingFailed {
-  requestId: string;
-  timestamp: number;
-  type: string;
-  errorText: string;
-  canceled?: boolean;
-  blockedReason?: string;
-}
-
-export interface NetworkEventMap extends Record<string, unknown> {
-  'Network.requestWillBeSent': NetworkRequest;
-  'Network.requestWillBeSentExtraInfo': NetworkRequestExtraInfo;
-  'Network.responseReceived': NetworkResponse;
-  'Network.loadingFinished': NetworkLoadingFinished;
-  'Network.loadingFailed': NetworkLoadingFailed;
-}
-
-export interface NetworkEntry {
-  requestId: string;
-  request: NetworkRequest;
-  extraInfo?: NetworkRequestExtraInfo;
-  response?: NetworkResponse;
-  loadingFinished?: NetworkLoadingFinished;
-  loadingFailed?: NetworkLoadingFailed;
+  postData?: string;
+  hasPostData?: boolean;
   status: 'pending' | 'loading' | 'finished' | 'failed';
   startTime: number;
   endTime?: number;
   duration?: number;
-} 
+  type?: NetworkResourceType;
+  initiator?: NetworkInitiator;
+  request?: NetworkRequest;
+  response?: NetworkResponse;
+  errorText?: string;
+  canceled?: boolean;
+  encodedDataLength?: number;
+  dataLength?: number;
+};

package/src/ui/components.tsx

@@ -33,14 +33,26 @@ export const Button: React.FC<ButtonProps> = ({
   style,
   className,
 }) => {
-  const sizeClass = size === 'small' ? styles.buttonSmall : size === 'large' ? styles.buttonLarge : styles.buttonMedium;
-  const variantClass = styles[`button${variant.charAt(0).toUpperCase() + variant.slice(1)}` as keyof typeof styles];
+  const sizeClass =
+    size === 'small'
+      ? styles.buttonSmall
+      : size === 'large'
+      ? styles.buttonLarge
+      : styles.buttonMedium;
+  const variantClass =
+    styles[
+      `button${
+        variant.charAt(0).toUpperCase() + variant.slice(1)
+      }` as keyof typeof styles
+    ];
 
   return (
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`${styles.button} ${sizeClass} ${variantClass} ${className || ''}`}
+      className={`${styles.button} ${sizeClass} ${variantClass} ${
+        className || ''
+      }`}
       style={style}
     >
       {children}
@@ -68,11 +80,12 @@ interface BadgeProps {
   style?: React.CSSProperties;
 }
 
-export const Badge: React.FC<BadgeProps> = ({ children, color = '#007AFF', style }) => (
-  <span
-    className={styles.badge}
-    style={{ backgroundColor: color, ...style }}
-  >
+export const Badge: React.FC<BadgeProps> = ({
+  children,
+  color = '#007AFF',
+  style,
+}) => (
+  <span className={styles.badge} style={{ backgroundColor: color, ...style }}>
     {children}
   </span>
 );
@@ -95,7 +108,10 @@ interface PanelHeaderProps {
   style?: React.CSSProperties;
 }
 
-export const PanelHeader: React.FC<PanelHeaderProps> = ({ children, style }) => (
+export const PanelHeader: React.FC<PanelHeaderProps> = ({
+  children,
+  style,
+}) => (
   <div className={styles.panelHeader} style={style}>
     {children}
   </div>
@@ -120,10 +136,10 @@ interface LoadingSpinnerProps {
   style?: React.CSSProperties;
 }
 
-export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({ 
-  size = 16, 
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  size = 16,
   color = '#007AFF',
-  style 
+  style,
 }) => (
   <div
     className={styles.loadingSpinner}
@@ -146,13 +162,13 @@ interface TooltipProps {
   variant?: 'default' | 'info' | 'warning' | 'error';
 }
 
-export const Tooltip: React.FC<TooltipProps> = ({ 
-  children, 
-  content, 
-  style, 
+export const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  content,
+  style,
   showOnlyWhenTruncated = false,
   placement = 'top',
-  variant = 'default'
+  variant = 'default',
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isTruncated, setIsTruncated] = useState(false);
@@ -173,7 +189,11 @@ export const Tooltip: React.FC<TooltipProps> = ({
   const dismiss = useDismiss(context);
   const role = useRole(context, { role: 'tooltip' });
 
-  const { getReferenceProps, getFloatingProps } = useInteractions([hover, dismiss, role]);
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    hover,
+    dismiss,
+    role,
+  ]);
 
   React.useEffect(() => {
     if (showOnlyWhenTruncated && refs.reference.current) {
@@ -186,7 +206,12 @@ export const Tooltip: React.FC<TooltipProps> = ({
 
   const shouldShowTooltip = showOnlyWhenTruncated ? isTruncated : true;
 
-  const variantClass = styles[`tooltip${variant.charAt(0).toUpperCase() + variant.slice(1)}` as keyof typeof styles];
+  const variantClass =
+    styles[
+      `tooltip${
+        variant.charAt(0).toUpperCase() + variant.slice(1)
+      }` as keyof typeof styles
+    ];
 
   return (
     <>
@@ -198,8 +223,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
       >
         {children}
       </div>
-    
-        <FloatingPortal>
+
+      <FloatingPortal>
         {isOpen && (
           <div
             ref={refs.setFloating}
@@ -209,11 +234,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
           >
             {content}
           </div>
-           )}
-        </FloatingPortal>
-     
+        )}
+      </FloatingPortal>
     </>
   );
 };
-
- 

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

@@ -34,6 +34,14 @@
   word-break: break-all;
 }
 
+.infoRowSub {
+  margin-bottom: 2px;
+  margin-left: 16px;
+  word-break: break-all;
+  font-size: 11px;
+  color: #666;
+}
+
 .urlText {
   cursor: help;
   border-bottom: 1px dotted #666;
@@ -54,4 +62,136 @@
 
 .headerValue {
   word-break: break-all;
+}
+
+.postDataContainer {
+  background-color: #f5f5f5;
+  padding: 8px;
+  border-radius: 4px;
+  max-height: 200px;
+  overflow: auto;
+}
+
+.postDataText {
+  margin: 0;
+  font-size: 12px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.responseBodyContainer {
+  background-color: #f5f5f5;
+  padding: 8px;
+  border-radius: 4px;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.responseBodyText {
+  margin: 0;
+  font-size: 12px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.loadResponseBodyButton {
+  background-color: #007acc;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.loadResponseBodyButton:hover:not(:disabled) {
+  background-color: #005a9e;
+}
+
+.loadResponseBodyButton:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.symbolicateButton {
+  background-color: #28a745;
+  color: white;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 11px;
+  margin-top: 4px;
+}
+
+.symbolicateButton:hover:not(:disabled) {
+  background-color: #218838;
+}
+
+.symbolicateButton:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.symbolicatedContainer {
+  font-size: 12px;
+  font-family: monospace;
+}
+
+.codeFrameContainer {
+  margin-bottom: 16px;
+}
+
+.codeFrameTitle {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.codeFrameContent {
+  background-color: #f5f5f5;
+  padding: 8px;
+  border-radius: 4px;
+  margin: 0;
+  font-size: 11px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 200px;
+  overflow: auto;
+}
+
+.stackContainer {
+  background-color: #f5f5f5;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.stackTitle {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.stackFrame {
+  margin-bottom: 8px;
+  padding: 4px 0;
+  border-bottom: 1px solid #ddd;
+}
+
+.stackFrame:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.stackFrameHeader {
+  margin-bottom: 2px;
+  color: #333;
+}
+
+.stackFrameLocation {
+  font-size: 11px;
+  color: #666;
+  word-break: break-all;
 }