Polish the display color styles for component diff (#63342)

### What
In component diff view, dim the indirect components so that users can
focus on the adjacent ones, and can easily locate the bad tags in
visual.

We still have the `^^^` text for jest snapshots, but they'll not
visually displayed for users, as the red text is enough for users to
notice the incorrect one and `^^^` was more like a terminal text styles
that we don't need to bring them in the web UI.

#### After

<img width="400"
src="https://github.com/vercel/next.js/assets/4800338/9a24f830-14b4-49a2-948a-5afbced8ec6f">

#### Before

<img width="400"
src="https://github.com/vercel/next.js/assets/4800338/c3ee593a-956b-447e-bad2-88007159d00f">


Closes NEXT-2826
Closes NEXT-2771

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);
+  }
 `