core changes

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