From cd43d60b044dbad6aabad18c8891a7b5540a5e04 Mon Sep 17 00:00:00 2001 From: Jason Bonta Date: Wed, 17 Apr 2024 14:54:06 -0700 Subject: [PATCH] core changes --- .../src/devtools/constants.js | 14 ++++++++----- .../src/devtools/views/Components/Badge.css | 1 - .../src/devtools/views/Components/Element.css | 1 + .../devtools/views/Components/ForgetBadge.css | 20 ++++++++++++++++++- .../devtools/views/Components/ForgetBadge.js | 14 ++++++++++--- 5 files changed, 40 insertions(+), 10 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/constants.js b/packages/react-devtools-shared/src/devtools/constants.js index bc5323c6389de..173678251411f 100644 --- a/packages/react-devtools-shared/src/devtools/constants.js +++ b/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)', diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.css b/packages/react-devtools-shared/src/devtools/views/Components/Badge.css index 370409aeb9afe..aa0a36fd22762 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Badge.css +++ b/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); } diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.css b/packages/react-devtools-shared/src/devtools/views/Components/Element.css index ff53776a17597..b11e321e2e6d5 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Element.css +++ b/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); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css index 653a073deaeb3..e80f37083345e 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css +++ b/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; } diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js index c31fd70eade2f..00b4f0db13f9b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js +++ b/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 ? ( - + ) : ( - 'Forget' + 'Memo' ); - return {innerView}; + const onChange = () => {}; + const title = + '✨ This component has been auto-memoized by the React Compiler.'; + return ( + + {innerView} + + ); }