Polish the display color styles for component diff

packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx

@@ -2,6 +2,10 @@ import { useMemo, Fragment, useState } from 'react'
 import type { ComponentStackFrame } from '../../helpers/parse-component-stack'
 import { CollapseIcon } from '../../icons/CollapseIcon'
 
+function getAdjacentProps(isAdj: boolean) {
+  return { 'data-nextjs-container-errors-pseudo-html--tag-adjacent': isAdj }
+}
+
 /**
  *
  * Format component stack into pseudo HTML
@@ -13,27 +17,42 @@ import { CollapseIcon } from '../../icons/CollapseIcon'
  * <pre>
  *  <code>{`
  *    <Page>
- *       <p>
- *       ^^^
- *         <p>
- *         ^^^
+ *       <p red>
+ *         <p red>
  *  `}</code>
  * </pre>
  * ```
  *
  * For text mismatch, it will render it for the code block
  *
- * ```diff
+ * ```
  * <pre>
  * <code>{`
  *   <Page>
  *     <p>
- * -     "Server Text"
- * +     "Client Text"
+ *       "Server Text" (green)
+ *       "Client Text" (red)
  *     </p>
  *   </Page>
  * `}</code>
  * ```
+ *
+ * For bad text under a tag it will render it for the code block,
+ * e.g. "Mismatched Text" under <p>
+ *
+ * ```
+ * <pre>
+ * <code>{`
+ *   <Page>
+ *     <div>
+ *       <p>
+ *         "Mismatched Text" (red)
+ *      </p>
+ *     </div>
+ *   </Page>
+ * `}</code>
+ * ```
+ *
  */
 export function PseudoHtmlDiff({
   componentStackFrames,
@@ -68,25 +87,30 @@ export function PseudoHtmlDiff({
         // When component is the server or client tag name, highlight it
 
         const isHighlightedTag = tagNames.includes(component)
-        const isRelatedTag =
+        const isAdjacentTag =
           isHighlightedTag ||
           tagNames.includes(prevComponent) ||
           tagNames.includes(nextComponent)
 
         const isLastFewFrames =
           !isHtmlTagsWarning && index >= componentList.length - 6
 
-        if ((isHtmlTagsWarning && isRelatedTag) || isLastFewFrames) {
+        const adjProps = getAdjacentProps(isAdjacentTag)
+
+        if ((isHtmlTagsWarning && isAdjacentTag) || isLastFewFrames) {
           const codeLine = (
             <span>
               {spaces}
               <span
-                {...(isHighlightedTag
-                  ? {
-                      'data-nextjs-container-errors-pseudo-html--tag-error':
-                        true,
-                    }
-                  : undefined)}
+                {...adjProps}
+                {...{
+                  ...(isHighlightedTag
+                    ? {
+                        'data-nextjs-container-errors-pseudo-html--tag-error':
+                          true,
+                      }
+                    : undefined),
+                }}
               >
                 {`<${component}>\n`}
               </span>
@@ -97,9 +121,11 @@ export function PseudoHtmlDiff({
           const wrappedCodeLine = (
             <Fragment key={nestedHtmlStack.length}>
               {codeLine}
-              {/* Add ^^^^ to the target tags */}
+              {/* Add ^^^^ to the target tags used for snapshots but not displayed for users */}
               {isHighlightedTag && (
-                <span>{spaces + '^'.repeat(component.length + 2) + '\n'}</span>
+                <span data-nextjs-container-errors-pseudo-html--hint>
+                  {spaces + '^'.repeat(component.length + 2) + '\n'}
+                </span>
               )}
             </Fragment>
           )
@@ -114,15 +140,15 @@ export function PseudoHtmlDiff({
 
           if (!isHtmlCollapsed || isLastFewFrames) {
             nestedHtmlStack.push(
-              <span key={nestedHtmlStack.length}>
+              <span {...adjProps} key={nestedHtmlStack.length}>
                 {spaces}
                 {'<' + component + '>\n'}
               </span>
             )
           } else if (isHtmlCollapsed && lastText !== '...') {
             lastText = '...'
             nestedHtmlStack.push(
-              <span key={nestedHtmlStack.length}>
+              <span {...adjProps} key={nestedHtmlStack.length}>
                 {spaces}
                 {'...\n'}
               </span>
@@ -151,7 +177,9 @@ export function PseudoHtmlDiff({
         // hydration type is "text-in-tag", represent [parent tag, mismatch content]
         wrappedCodeLine = (
           <Fragment key={nestedHtmlStack.length}>
-            <span>{spaces + `<${secondContent}>\n`}</span>
+            <span data-nextjs-container-errors-pseudo-html--tag-adjacent>
+              {spaces + `<${secondContent}>\n`}
+            </span>
             <span data-nextjs-container-errors-pseudo-html--diff-remove>
               {spaces + `  "${firstContent}"\n`}
             </span>

packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx

@@ -210,4 +210,12 @@ export const styles = css`
     color: var(--color-ansi-red);
     font-weight: bold;
   }
+  /* hide but text are still accessible in DOM */
+  [data-nextjs-container-errors-pseudo-html--hint] {
+    display: inline-block;
+    font-size: 0;
+  }
+  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {
+    color: var(--color-accents-3);
+  }
 `