Adjust source and stack components

Author: pchalupa

packages/react-native/Libraries/LogBox/UI/AnsiHighlight.js

@@ -87,7 +87,7 @@ export default function Ansi({
     <View style={styles.container}>
       {parsedLines.map((items, i) => (
         <View style={styles.line} key={i}>
-          <Text style={styles.text}>
+          <Text maxFontSizeMultiplier={1.5} style={styles.text}>
             {items.map((bundle, key) => {
               const textStyle =
                 bundle.fg && COLORS[bundle.fg]
@@ -101,6 +101,7 @@ export default function Ansi({
               return (
                 <Text
                   id="logbox_codeframe_contents_text"
+                  maxFontSizeMultiplier={1.5}
                   style={[style, textStyle]}
                   key={key}>
                   {getText(bundle.content, key)}

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js

@@ -32,7 +32,10 @@ component LogBoxInspectorMessageHeader(
       return null;
     }
     return (
-      <Text style={messageStyles.collapse} onPress={() => onPress()}>
+      <Text
+        maxFontSizeMultiplier={1.5}
+        style={messageStyles.collapse}
+        onPress={() => onPress()}>
         ... See More
       </Text>
     );
@@ -42,12 +45,16 @@ component LogBoxInspectorMessageHeader(
     <View style={messageStyles.body}>
       <View style={messageStyles.heading}>
         <Text
+          maxFontSizeMultiplier={1.5}
           style={[messageStyles.headingText, messageStyles[level]]}
           id="logbox_message_title_text">
           {title}
         </Text>
       </View>
-      <Text style={messageStyles.bodyText} id="logbox_message_contents_text">
+      <Text
+        maxFontSizeMultiplier={1.5}
+        style={messageStyles.bodyText}
+        id="logbox_message_contents_text">
         <LogBoxMessage
           maxLength={collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
           message={message}

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -101,13 +101,24 @@ component LogBoxInspectorReactFrames(log: LogBoxLog) {
             <View style={componentStyles.component}>
               <Text
                 id="logbox_component_stack_frame_text"
+                maxFontSizeMultiplier={1.5}
                 style={componentStyles.frameName}>
-                <Text style={componentStyles.bracket}>{'<'}</Text>
+                <Text
+                  maxFontSizeMultiplier={1.5}
+                  style={componentStyles.bracket}>
+                  {'<'}
+                </Text>
                 {frame.methodName}
-                <Text style={componentStyles.bracket}>{' />'}</Text>
+                <Text
+                  maxFontSizeMultiplier={1.5}
+                  style={componentStyles.bracket}>
+                  {' />'}
+                </Text>
               </Text>
             </View>
-            <Text style={componentStyles.frameLocation}>
+            <Text
+              maxFontSizeMultiplier={1.5}
+              style={componentStyles.frameLocation}>
               {frame.file != null ? getPrettyFileName(frame.file) : ''}
               {frame.lineNumber != null ? `:${frame.lineNumber}` : ''}
             </Text>
@@ -122,7 +133,9 @@ component LogBoxInspectorReactFrames(log: LogBoxLog) {
           }}
           onPress={() => setCollapsed(!collapsed)}
           style={componentStyles.collapseButton}>
-          <Text style={componentStyles.collapse}>{getCollapseMessage()}</Text>
+          <Text maxFontSizeMultiplier={1.5} style={componentStyles.collapse}>
+            {getCollapseMessage()}
+          </Text>
         </LogBoxButton>
       </View>
     </LogBoxInspectorSection>

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSection.js

@@ -22,7 +22,9 @@ component LogBoxInspectorSection(
   return (
     <View style={styles.section}>
       <View style={styles.heading}>
-        <Text style={styles.headingText}>{heading}</Text>
+        <Text maxFontSizeMultiplier={1.5} style={styles.headingText}>
+          {heading}
+        </Text>
         {action}
       </View>
       <View style={styles.body}>{children}</View>

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -103,7 +103,9 @@ component LogBoxInspectorSourceMapStatus(
             : {transform: [{rotate: state.rotate}]},
         ]}
       />
-      <Text style={[styles.text, {color}]}>Source Map</Text>
+      <Text maxFontSizeMultiplier={1.5} style={[styles.text, {color}]}>
+        Source Map
+      </Text>
     </LogBoxButton>
   );
 }

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js

@@ -44,11 +44,13 @@ component LogBoxInspectorStackFrame(
         style={styles.frame}>
         <Text
           id="logbox_stack_frame_text"
+          maxFontSizeMultiplier={1.5}
           style={[styles.name, frame.collapse === true && styles.dim]}>
           {frame.methodName}
         </Text>
         <Text
           ellipsizeMode="middle"
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           style={[styles.location, frame.collapse === true && styles.dim]}>
           {location}

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js

@@ -89,7 +89,7 @@ component LogBoxInspectorStackFrames(log: LogBoxLog, onRetry: () => void) {
       }>
       {log.symbolicated.status !== 'COMPLETE' && (
         <View style={stackStyles.hintBox}>
-          <Text style={stackStyles.hintText}>
+          <Text maxFontSizeMultiplier={1.5} style={stackStyles.hintText}>
             This call stack is not symbolicated. Some features are unavailable
             such as viewing the function name or tapping to open files.
           </Text>
@@ -138,7 +138,9 @@ component StackFrameFooter(message: string, onPress: () => void) {
         }}
         onPress={onPress}
         style={stackStyles.collapseButton}>
-        <Text style={stackStyles.collapse}>{message}</Text>
+        <Text maxFontSizeMultiplier={1.5} style={stackStyles.collapse}>
+          {message}
+        </Text>
       </LogBoxButton>
     </View>
   );

packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js

@@ -43,7 +43,11 @@ component TappableLinks(content: string, style: void | TextStyleProp) {
 
   if (matches.length === 0) {
     // No URLs detected. Just return the content.
-    return <Text style={style}>{content}</Text>;
+    return (
+      <Text maxFontSizeMultiplier={1.5} style={style}>
+        {content}
+      </Text>
+    );
   }
 
   // URLs were detected. Construct array of Text nodes.
@@ -55,7 +59,11 @@ component TappableLinks(content: string, style: void | TextStyleProp) {
   for (const linkRange of matches) {
     if (startIndex < linkRange.lowerBound) {
       const text = content.substring(startIndex, linkRange.lowerBound);
-      fragments.push(<Text key={++indexCounter}>{text}</Text>);
+      fragments.push(
+        <Text key={++indexCounter} maxFontSizeMultiplier={1.5}>
+          {text}
+        </Text>,
+      );
     }
 
     const link = content.substring(linkRange.lowerBound, linkRange.upperBound);
@@ -66,6 +74,7 @@ component TappableLinks(content: string, style: void | TextStyleProp) {
           Linking.openURL(link);
         }}
         key={++indexCounter}
+        maxFontSizeMultiplier={1.5}
         style={styles.linkText}>
         {link}
       </Text>,
@@ -77,13 +86,20 @@ component TappableLinks(content: string, style: void | TextStyleProp) {
   if (startIndex < content.length) {
     const text = content.substring(startIndex);
     fragments.push(
-      <Text key={++indexCounter} style={style}>
+      <Text
+        key={++indexCounter}
+        maxFontSizeMultiplier={1.5}
+        style={style}>
         {text}
       </Text>,
     );
   }
 
-  return <Text style={style}>{fragments}</Text>;
+  return (
+    <Text maxFontSizeMultiplier={1.5} style={style}>
+      {fragments}
+    </Text>
+  );
 }
 
 const cleanContent = (content: string) =>
@@ -98,7 +114,9 @@ component LogBoxMessage(
   const {content, substitutions}: Message = message;
 
   if (plaintext === true) {
-    return <Text>{cleanContent(content)}</Text>;
+    return (
+      <Text maxFontSizeMultiplier={1}>{cleanContent(content)}</Text>
+    );
   }
 
   const resolvedMaxLength = maxLength != null ? maxLength : Infinity;