[Devtools] Rename Forget badge (#28858)

## Summary

The Forget codename needs to be hidden from the UI to avoid confusion.
Going forward, we'll be referring to this set of features as part of the
larger React compiler. We'll be describing the primary feature that
we've built so far as auto-memoization, and this badge helps devs see
which components have been automatically memoized by the compiler.

## How did you test this change?

- force Forget badge on with and without the presence of other badges
- confirm colors/UI in light and dark modes
- force badges on for `ElementBadges`, `InspectableElementBadges`,
`IndexableElementBadges`
- Running yarn start in packages/react-devtools-shell

[demo
video](https://github.com/facebook/react/assets/973058/fa829018-7644-4425-8395-c5cd84691f3c)

Author: jbonta

packages/react-devtools-shared/src/devtools/constants.js

@@ -77,7 +77,9 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
     '--color-error-border': 'hsl(0, 100%, 92%)',
     '--color-error-text': '#ff0000',
     '--color-expand-collapse-toggle': '#777d88',
-    '--color-forget-badge': '#2683E2',
+    '--color-forget-badge-background': '#2683e2',
+    '--color-forget-badge-background-inverted': '#1a6bbc',
+    '--color-forget-text': '#fff',
     '--color-link': '#0000ff',
     '--color-modal-background': 'rgba(255, 255, 255, 0.75)',
     '--color-bridge-version-npm-background': '#eff0f1',
@@ -195,10 +197,10 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
     '--color-commit-gradient-text': '#000000',
     '--color-component-name': '#61dafb',
     '--color-component-name-inverted': '#282828',
-    '--color-component-badge-background': 'rgba(255, 255, 255, 0.25)',
-    '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)',
+    '--color-component-badge-background': '#5e6167',
+    '--color-component-badge-background-inverted': '#46494e',
     '--color-component-badge-count': '#8f949d',
-    '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
+    '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.85)',
     '--color-console-error-badge-text': '#000000',
     '--color-console-error-background': '#290000',
     '--color-console-error-border': '#5c0000',
@@ -222,7 +224,9 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
     '--color-error-border': '#900',
     '--color-error-text': '#f55',
     '--color-expand-collapse-toggle': '#8f949d',
-    '--color-forget-badge': '#2683E2',
+    '--color-forget-badge-background': '#2683e2',
+    '--color-forget-badge-background-inverted': '#1a6bbc',
+    '--color-forget-text': '#fff',
     '--color-link': '#61dafb',
     '--color-modal-background': 'rgba(0, 0, 0, 0.75)',
     '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',

packages/react-devtools-shared/src/devtools/views/Components/Badge.css

@@ -5,7 +5,6 @@
   padding: 0.125rem 0.25rem;
   line-height: normal;
   border-radius: 0.125rem;
-  margin-right: 0.25rem;
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-small);
 }

packages/react-devtools-shared/src/devtools/views/Components/Element.css

@@ -32,6 +32,7 @@
   --color-component-badge-background: var(
     --color-component-badge-background-inverted
   );
+  --color-forget-badge-background: var(--color-forget-badge-background-inverted);
   --color-component-badge-count: var(--color-component-badge-count-inverted);
   --color-attribute-name: var(--color-attribute-name-inverted);
   --color-attribute-value: var(--color-attribute-value-inverted);

packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css

@@ -1,3 +1,21 @@
 .Root {
-  background-color: var(--color-forget-badge);
+  background-color: var(--color-forget-badge-background);
+  color: var(--color-forget-text);
+  padding-right: 1.75em;
+  position: relative;
+}
+
+.Root::after {
+  bottom: 0;
+  content: '✨';
+  position: absolute;
+  right: 0.25em;
+}
+
+.ForgetToggle {
+  display: flex;
+}
+
+.ForgetToggle > span { /* targets .ToggleContent */
+  padding: 0;
 }

packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js

@@ -11,6 +11,7 @@ import * as React from 'react';
 
 import Badge from './Badge';
 import IndexableDisplayName from './IndexableDisplayName';
+import Toggle from '../Toggle';
 
 import styles from './ForgetBadge.css';
 
@@ -34,10 +35,17 @@ export default function ForgetBadge(props: Props): React.Node {
   const {className = ''} = props;
 
   const innerView = props.indexable ? (
-    <IndexableDisplayName displayName="Forget" id={props.elementID} />
+    <IndexableDisplayName displayName="Memo" id={props.elementID} />
   ) : (
-    'Forget'
+    'Memo'
   );
 
-  return <Badge className={`${styles.Root} ${className}`}>{innerView}</Badge>;
+  const onChange = () => {};
+  const title =
+    '✨ This component has been auto-memoized by the React Compiler.';
+  return (
+    <Toggle onChange={onChange} className={styles.ForgetToggle} title={title}>
+      <Badge className={`${styles.Root} ${className}`}>{innerView}</Badge>
+    </Toggle>
+  );
 }