react-native-debug-toolkit 0.1.6 → 0.2.0

package/lib/views/ConsoleLogDetails.js

@@ -0,0 +1,314 @@
+import React from 'react'
+import { View, Text, StyleSheet, Clipboard } from 'react-native'
+import { ScrollView, Pressable } from 'react-native'
+import JSONTree from 'react-native-json-tree'
+
+// Re-using the theme from HttpLogDetails for consistency
+const theme = {
+  scheme: 'monokai',
+  author: 'wimer hazenberg (http://www.monokai.nl)',
+  base00: '#272822',
+  base01: '#383830',
+  base02: '#49483e',
+  base03: '#75715e',
+  base04: '#a59f85',
+  base05: '#f8f8f2',
+  base06: '#f5f4f1',
+  base07: '#f9f8f5',
+  base08: '#f92672',
+  base09: '#fd971f',
+  base0A: '#f4bf75',
+  base0B: '#a6e22e',
+  base0C: '#a1efe4',
+  base0D: '#66d9ef',
+  base0E: '#ae81ff',
+  base0F: '#cc6633'
+};
+
+const CopyButton = ({ text, style }) => {
+  const [copied, setCopied] = React.useState(false)
+
+  const handleCopy = async () => {
+    await Clipboard.setString(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <Pressable style={[styles.copyButton, style]} onPress={handleCopy}>
+      <Text style={styles.copyButtonText}>{copied ? 'Copied!' : 'Copy'}</Text>
+    </Pressable>
+  )
+}
+
+const CollapsibleSection = ({ title, children, initiallyExpanded = false }) => {
+  const [expanded, setExpanded] = React.useState(initiallyExpanded)
+
+  return (
+    <View style={styles.collapsibleSection}>
+      <Pressable
+        style={styles.sectionHeader}
+        onPress={() => setExpanded(!expanded)}>
+        <Text style={styles.sectionTitle}>{title}</Text>
+        <Text style={styles.expandIcon}>{expanded ? '▼' : '▶'}</Text>
+      </Pressable>
+      {expanded && children}
+    </View>
+  )
+}
+
+// Basic JSONValue renderer, might need adjustments for console log specifics
+const JSONValue = ({ value }) => {
+  if (value === null) {
+    return <Text style={styles.jsonNull}>null</Text>
+  }
+
+  if (value === undefined) {
+    return <Text style={styles.jsonNull}>undefined</Text>
+  }
+
+  if (typeof value === 'boolean') {
+    return <Text style={styles.jsonBoolean}>{value.toString()}</Text>
+  }
+
+  if (typeof value === 'number') {
+    return <Text style={styles.jsonNumber}>{value}</Text>
+  }
+
+  if (typeof value === 'string') {
+    return (
+      <Text style={styles.jsonString} selectable={true}>
+        "{value}"
+      </Text>
+    )
+  }
+
+  if (typeof value === 'object') {
+    return (
+      <JSONTree
+         data={value}
+         theme={theme}
+         invertTheme={true}
+         hideRoot={true}
+         shouldExpandNode={(keyPath, nodeData, currentLevel) => currentLevel < 1}
+      />
+    )
+  }
+
+  return <Text style={styles.jsonOther}>{String(value)}</Text>
+}
+
+
+const ConsoleLogDetails = ({ log }) => {
+  if (!log) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>Log data is missing</Text>
+      </View>
+    )
+  }
+
+  const logData = log.data || [] // Console logs can have multiple arguments
+  const timestamp = log.timestamp
+  const level = log.level || 'log' // Default to 'log' if level is not provided
+
+  // Simple function to format log data for display and copying
+  const formatLogData = (dataArray) => {
+    return dataArray.map(item => {
+      if (typeof item === 'object') {
+        try {
+          return JSON.stringify(item, null, 2);
+        } catch (e) {
+          return '[unserializable object]';
+        }
+      }
+      return String(item);
+    }).join(' ');
+  }
+
+  const formattedLog = formatLogData(logData);
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      showsVerticalScrollIndicator={true}
+      scrollEventThrottle={16}
+      keyboardShouldPersistTaps='handled'>
+
+      <View style={styles.header}>
+        <View style={styles.headerInfo}>
+           <Text style={[styles.levelIndicator, { color: getLevelColor(level) }]}>
+            {level.toUpperCase()}
+          </Text>
+          <Text style={styles.timestamp}>
+            {timestamp
+              ? new Date(timestamp).toLocaleString()
+              : 'Unknown time'}
+          </Text>
+        </View>
+        <CopyButton text={formattedLog} />
+      </View>
+
+      <CollapsibleSection title='Log Data' initiallyExpanded={true}>
+         <View style={styles.dataContentWrapper}>
+            <View style={styles.dataContent}>
+              {logData.map((item, index) => (
+                <View key={index} style={[styles.logDataItem, index === logData.length - 1 && styles.logDataItemLast]}>
+                   <JSONValue value={item} />
+                </View>
+              ))}
+            </View>
+          </View>
+      </CollapsibleSection>
+
+    </ScrollView>
+  )
+}
+
+const getLevelColor = (level) => {
+  switch (level?.toLowerCase()) {
+    case 'log':
+      return '#333'; // Dark gray for standard log
+    case 'info':
+      return '#0D96F2'; // Blue for info
+    case 'warn':
+      return '#FCA130'; // Orange for warning
+    case 'error':
+      return '#F93E3E'; // Red for error
+    default:
+      return '#666666'; // Default gray
+  }
+};
+
+const getLevelTextStyle = (level) => {
+    const baseStyle = { fontSize: 14, fontFamily: 'monospace' }; // Use monospace font
+    return { ...baseStyle, color: getLevelColor(level) };
+}
+
+// Re-using and adapting styles from HttpLogDetails
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  contentContainer: {
+    paddingBottom: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    padding: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    alignItems: 'center', // Align items vertically
+    justifyContent: 'space-between', // Space out items
+  },
+  headerInfo: {
+    flexDirection: 'row', // Arrange level and timestamp horizontally
+    alignItems: 'center',
+    flexShrink: 1, // Allow info to shrink if needed
+    marginRight: 10,
+  },
+   levelIndicator: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginRight: 10,
+  },
+  timestamp: {
+    fontSize: 13,
+    color: '#666',
+  },
+  collapsibleSection: {
+    marginBottom: 1,
+    backgroundColor: '#fff',
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 15,
+    backgroundColor: '#f5f5f5',
+  },
+  sectionTitle: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  expandIcon: {
+    fontSize: 14,
+    color: '#666',
+  },
+  content: {
+    padding: 15,
+  },
+   dataContentWrapper: {
+    flex: 1,
+    padding: 10, // Add padding around the scroll view
+  },
+  dataContent: {
+    backgroundColor: '#f8f9fa',
+    padding: 10,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+  },
+  logDataItem: {
+      borderBottomWidth: 1,
+      borderBottomColor: '#eee',
+      paddingVertical: 8,
+  },
+  logDataItemLast: {
+      borderBottomWidth: 0,
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  errorText: {
+    color: '#ff4444',
+    fontSize: 16,
+  },
+   copyButton: {
+    backgroundColor: '#e9ecef',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+    flexShrink: 0, // Prevent button from shrinking
+  },
+  copyButtonText: {
+    fontSize: 12,
+    color: '#666',
+  },
+  // JSON Value Styles (simplified)
+  jsonString: {
+    color: '#CB772F',
+    fontFamily: 'monospace',
+    fontSize: 13,
+  },
+  jsonNumber: {
+    color: '#AE81FF',
+    fontFamily: 'monospace',
+     fontSize: 13,
+  },
+  jsonBoolean: {
+    color: '#66D9EF',
+    fontWeight: 'bold',
+    fontFamily: 'monospace',
+     fontSize: 13,
+  },
+  jsonNull: {
+    color: '#F92672',
+    fontStyle: 'italic',
+    fontFamily: 'monospace',
+     fontSize: 13,
+  },
+  jsonOther: {
+    color: '#75715e',
+    fontFamily: 'monospace',
+    fontSize: 13,
+  },
+});
+
+export default ConsoleLogDetails

package/lib/views/FloatPanelView.js

@@ -12,7 +12,9 @@ import {
 } from 'react-native'
 import { IconRadius, DebugColors } from '../utils/DebugConst'
 import SubViewHTTPLogs from './SubViewHTTPLogs'
+import SubViewPerformance from './SubViewPerformance'
 import TabView from './TabView'
+import SubViewConsoleLogs from './SubViewConsoleLogs'
 
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window')
 
@@ -272,6 +274,15 @@ export default class FloatPanelView extends Component {
     if (feature.name === 'network') {
       return <SubViewHTTPLogs logs={data} />
     }
+    
+    // Special handling for performance view
+    if (feature.name === 'performance') {
+      return <SubViewPerformance />
+    }
+
+    if (feature.name === 'console') {
+      return <SubViewConsoleLogs logs={data} />
+    }
 
     // Generic fallback for other feature types
     return (

package/lib/views/HttpLogDetails.js

@@ -74,8 +74,6 @@ const LongTextContent = ({ text }) => {
 }
 
 const JSONValue = ({ value, path = '', level = 0, maxExpandLevel = 2 }) => {
-  const [expanded, setExpanded] = useState(level < maxExpandLevel)
-
   if (value === null) {
     return <Text style={styles.jsonNull}>null</Text>
   }
@@ -95,9 +93,7 @@ const JSONValue = ({ value, path = '', level = 0, maxExpandLevel = 2 }) => {
   if (typeof value === 'string') {
     if (value.length > 150) {
       return (
-        <CollapsibleSection
-          title={`String (${value.length} chars)`}
-          initiallyExpanded={false}>
+        <CollapsibleSection title={`String (${value.length} chars)`} initiallyExpanded={false}>
           <LongTextContent text={value} />
         </CollapsibleSection>
       )
@@ -110,88 +106,16 @@ const JSONValue = ({ value, path = '', level = 0, maxExpandLevel = 2 }) => {
     )
   }
 
-  if (Array.isArray(value)) {
-    if (value.length === 0) {
-      return <Text style={styles.jsonArray}>[]</Text>
-    }
-
-    return (
-      <View style={styles.jsonContainer}>
-        <Pressable
-          onPress={() => setExpanded(!expanded)}
-          style={styles.jsonToggle}>
-          <Text style={styles.jsonBrackets}>
-            [{!expanded && '...'}
-            {expanded && value.length > 0 && ''}
-          </Text>
-          {!expanded && (
-            <Text style={styles.jsonCollapsed}> Array({value.length}) </Text>
-          )}
-        </Pressable>
-
-        {expanded && (
-          <View style={styles.jsonChildren}>
-            {value.map((item, index) => (
-              <View key={`${path}-${index}`} style={styles.jsonArrayItem}>
-                <Text style={styles.jsonKey}>{index}: </Text>
-                <View style={styles.jsonValue}>
-                  <JSONValue
-                    value={item}
-                    path={`${path}[${index}]`}
-                    level={level + 1}
-                  />
-                </View>
-              </View>
-            ))}
-          </View>
-        )}
-
-        {expanded && <Text style={styles.jsonBrackets}>]</Text>}
-      </View>
-    )
-  }
-
+  // For objects and arrays, use JSONTree for improved large data handling
   if (typeof value === 'object') {
-    const keys = Object.keys(value)
-
-    if (keys.length === 0) {
-      return <Text style={styles.jsonObject}>{'{}'}</Text>
-    }
-
     return (
-      <View style={styles.jsonContainer}>
-        <Pressable
-          onPress={() => setExpanded(!expanded)}
-          style={styles.jsonToggle}>
-          <Text style={styles.jsonBrackets}>
-            {'{'}
-            {!expanded && '...'}
-            {expanded && keys.length > 0 && ''}
-          </Text>
-          {!expanded && (
-            <Text style={styles.jsonCollapsed}> Object({keys.length}) </Text>
-          )}
-        </Pressable>
-
-        {expanded && (
-          <View style={styles.jsonChildren}>
-            {keys.map((key) => (
-              <View key={`${path}-${key}`} style={styles.jsonProperty}>
-                <Text style={styles.jsonKey}>{key}: </Text>
-                <View style={styles.jsonValue}>
-                  <JSONValue
-                    value={value[key]}
-                    path={`${path}.${key}`}
-                    level={level + 1}
-                  />
-                </View>
-              </View>
-            ))}
-          </View>
-        )}
-
-        {expanded && <Text style={styles.jsonBrackets}>{'}'}</Text>}
-      </View>
+      <JSONTree 
+         data={value} 
+         theme={theme} 
+         invertTheme={true} 
+         hideRoot={true}
+         shouldExpandNode={(keyPath, nodeData, currentLevel) => currentLevel < maxExpandLevel}
+      />
     )
   }
 
@@ -407,7 +331,7 @@ const HttpLogDetails = ({ log }) => {
                   nestedScrollEnabled={true}
                   bounces={false}
                   showsVerticalScrollIndicator={true}>
-                  <JSONTree data={responseData} theme={theme} invertTheme={true} />
+                  <JSONValue value={responseData} maxExpandLevel={2} />
                 </ScrollView>
               </View>
             </View>

package/lib/views/SubViewConsoleLogs.js

@@ -0,0 +1,209 @@
+import React, { useState, useMemo } from 'react'
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+} from 'react-native'
+import ConsoleLogDetails from './ConsoleLogDetails' // Import the new details component
+import { getLogLevelColor } from '../utils/DebugConst' // Assuming you move color logic
+
+const SubViewConsoleLogs = ({ logs = [] }) => {
+  const [selectedLog, setSelectedLog] = useState(null)
+
+  // Memoize the sorted logs
+  const sortedLogs = useMemo(() => {
+    // Create a stable copy before sorting if FlatList relies on reference equality
+    return [...logs].sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+  }, [logs]);
+
+  // Helper to format log data for preview
+   const formatLogPreview = (dataArray = []) => {
+      if (!Array.isArray(dataArray)) return ''; // Handle cases where data might not be an array
+      return dataArray.map(item => {
+        if (typeof item === 'string') return item;
+        if (typeof item === 'number' || typeof item === 'boolean') return String(item);
+        if (item === null) return 'null';
+        if (item === undefined) return 'undefined';
+        if (typeof item === 'object' && item !== null) {
+            try {
+                // Attempt a brief JSON stringification, handle potential circular refs?
+                const preview = JSON.stringify(item);
+                return preview.length > 50 ? preview.substring(0, 47) + '...' : preview;
+            } catch (e) {
+                return '{...}'; // Fallback for complex/circular objects
+            }
+        }
+        return String(item); // Fallback
+      }).join(' ');
+    };
+
+
+  const renderLogItem = ({ item }) => {
+    const level = item.level || 'log';
+    const levelColor = getLogLevelColor(level);
+    const previewText = formatLogPreview(item.data);
+    const timestamp = item.timestamp
+      ? new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
+      : '';
+
+    return (
+      <TouchableOpacity
+        style={styles.logItem}
+        onPress={() => setSelectedLog(item)}>
+        <View style={styles.logItemContainer}>
+          <View
+            style={[styles.levelIndicator, { backgroundColor: levelColor }]}
+          />
+
+          <View style={styles.logContent}>
+             <View style={styles.logHeader}>
+                <Text style={[styles.levelText, { color: levelColor }]}>
+                  {level.toUpperCase()}
+                </Text>
+                 <Text style={styles.time}>{timestamp}</Text>
+            </View>
+
+            <Text style={styles.logMessage} numberOfLines={3}>
+              {previewText}
+            </Text>
+
+          </View>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  // If a log is selected, show the details view
+  if (selectedLog) {
+    const selectedLevel = selectedLog.level || 'log';
+    const timestamp = selectedLog.timestamp
+       ? new Date(selectedLog.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
+       : '';
+    return (
+      <View style={styles.container}>
+        <View style={styles.detailsHeader}>
+          <TouchableOpacity
+            style={styles.backButton}
+            onPress={() => setSelectedLog(null)}>
+            <Text style={styles.backButtonText}>← Back</Text>
+          </TouchableOpacity>
+           <View style={styles.headerLevelTime}>
+              <Text style={[styles.headerLevel, { color: getLogLevelColor(selectedLevel) }]}>
+                {selectedLevel.toUpperCase()}
+              </Text>
+               <Text style={styles.headerTimestamp}>{timestamp}</Text>
+           </View>
+        </View>
+        <ConsoleLogDetails log={selectedLog} />
+      </View>
+    )
+  }
+
+  // Otherwise show the list view
+  return (
+    <View style={styles.container}>
+      {sortedLogs.length === 0 ? (
+        <Text style={styles.emptyText}>No console messages logged yet</Text>
+      ) : (
+        <FlatList
+          data={sortedLogs} // Use the memoized sorted list
+          renderItem={renderLogItem}
+          keyExtractor={(item, index) => `${item.timestamp}-${index}`} // Use timestamp and index for key
+          style={styles.list}
+        />
+      )}
+    </View>
+  )
+}
+
+// Adapted styles from SubViewHTTPLogs
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  list: {
+    flex: 1,
+  },
+  emptyText: {
+    textAlign: 'center',
+    color: '#999',
+    marginTop: 20,
+  },
+  logItem: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  logItemContainer: {
+    flexDirection: 'row',
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+  },
+  levelIndicator: {
+    width: 4,
+    borderRadius: 2,
+    marginRight: 10,
+  },
+  logContent: {
+    flex: 1,
+  },
+  logHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 5,
+  },
+  levelText: {
+    fontSize: 13,
+    fontWeight: 'bold',
+  },
+  time: {
+    fontSize: 12,
+    color: '#888',
+  },
+  logMessage: {
+    fontSize: 14,
+    color: '#333',
+    lineHeight: 18,
+    fontFamily: 'monospace', // Use monospace for log messages
+  },
+  // Details Header Styles
+  detailsHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    backgroundColor: '#f8f9fa',
+  },
+  backButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+    backgroundColor: '#eee',
+    marginRight: 15, // More space after back button
+  },
+  backButtonText: {
+    color: '#333',
+    fontWeight: '500',
+    fontSize: 14,
+  },
+  headerLevelTime: {
+    flexDirection: 'row',
+    alignItems: 'baseline', // Align baseline of text
+  },
+  headerLevel: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    marginRight: 8,
+  },
+   headerTimestamp: {
+      fontSize: 13,
+      color: '#666',
+  },
+})
+
+export default SubViewConsoleLogs