diff --git a/packages/react-devtools-shared/src/devtools/constants.js b/packages/react-devtools-shared/src/devtools/constants.js index cfb73713b089e..5c90501d70f5c 100644 --- a/packages/react-devtools-shared/src/devtools/constants.js +++ b/packages/react-devtools-shared/src/devtools/constants.js @@ -136,8 +136,6 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-timeline-text-dim-color': '#ccc', '--color-timeline-react-work-border': '#eeeeee', '--color-timebar-background': '#f6f6f6', - '--color-timespan-background': '#62bc6a', - '--color-timespan-background-errored': '#d57066', '--color-search-match': 'yellow', '--color-search-match-current': '#f7923b', '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)', @@ -156,6 +154,14 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-warning-text-color': '#ffffff', '--color-warning-text-color-inverted': '#fd4d69', + '--color-suspense': '#0088fa', + '--color-transition': '#6a51b2', + '--color-suspense-server': '#62bc6a', + '--color-transition-server': '#3f7844', + '--color-suspense-other': '#f3ce49', + '--color-transition-other': '#917b2c', + '--color-suspense-errored': '#d57066', + // The styles below should be kept in sync with 'root.css' // They are repeated there because they're used by e.g. tooltips or context menus // which get rendered outside of the DOM subtree (where normal theme/styles are written). @@ -290,8 +296,6 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-timeline-text-dim-color': '#555b66', '--color-timeline-react-work-border': '#3d424a', '--color-timebar-background': '#1d2129', - '--color-timespan-background': '#62bc6a', - '--color-timespan-background-errored': '#d57066', '--color-search-match': 'yellow', '--color-search-match-current': '#f7923b', '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)', @@ -311,6 +315,14 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-warning-text-color': '#ffffff', '--color-warning-text-color-inverted': '#ee1638', + '--color-suspense': '#61dafb', + '--color-transition': '#6a51b2', + '--color-suspense-server': '#62bc6a', + '--color-transition-server': '#3f7844', + '--color-suspense-other': '#f3ce49', + '--color-transition-other': '#917b2c', + '--color-suspense-errored': '#d57066', + // The styles below should be kept in sync with 'root.css' // They are repeated there because they're used by e.g. tooltips or context menus // which get rendered outside of the DOM subtree (where normal theme/styles are written). diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css index 413554008fa53..6c56aec689986 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css @@ -128,13 +128,13 @@ .TimeBarSpan, .TimeBarSpanErrored { position: absolute; border-radius: 0.125rem; - background-color: var(--color-timespan-background); + background-color: var(--color-suspense); width: 100%; height: 100%; } .TimeBarSpanErrored { - background-color: var(--color-timespan-background-errored); + background-color: var(--color-suspense-errored); } .SmallHeader { diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index 591d908735efb..16d385d75231c 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -1,12 +1,20 @@ .SuspenseRectsContainer { padding: .25rem; cursor: pointer; - outline: 1px solid var(--color-component-name); + outline-color: var(--color-transition); + outline-style: solid; + outline-width: 1px; border-radius: 0.25rem; + background-color: color-mix(in srgb, var(--color-transition) 5%, transparent); +} + +.SuspenseRectsContainer:hover:not(:has(.SuspenseRectsBoundary:hover))[data-highlighted='false'] { + outline-width: 1px; } .SuspenseRectsContainer[data-highlighted='true'] { - background: var(--color-dimmest); + outline-style: solid; + outline-width: 4px; } .SuspenseRectsViewBox { @@ -15,6 +23,11 @@ .SuspenseRectsBoundary { pointer-events: all; + border-radius: 0.125rem; +} + +.SuspenseRectsBoundary[data-visible='false'] { + background-color: transparent; } .SuspenseRectsBoundaryChildren { @@ -28,15 +41,18 @@ .SuspenseRectsRect { box-shadow: var(--elevation-4); pointer-events: all; + cursor: pointer; + border-radius: 0.125rem; + background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-suspense) 25%); + backdrop-filter: grayscale(100%); + transition: background-color 0.2s ease-in; + outline-color: var(--color-suspense); outline-style: solid; outline-width: 1px; - border-radius: 0.125rem; - cursor: pointer; } .SuspenseRectsScaledRect { position: absolute; - outline-color: var(--color-background-selected); } .SuspenseRectsScaledRect[data-visible='false'] { @@ -44,15 +60,28 @@ outline-width: 0; } -.SuspenseRectsScaledRect[data-suspended='true'] { - opacity: 0.3; +.SuspenseRectsBoundary[data-suspended='true'] { + opacity: 0.33; } /* highlight this boundary */ -.SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect, .SuspenseRectsBoundary[data-highlighted='true'] > .SuspenseRectsRect { - background-color: var(--color-background-hover); +.SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect { + background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-suspense) 50%); + transition: background-color 0.2s ease-out; +} + +.SuspenseRectsBoundary[data-selected='true'] { + box-shadow: var(--elevation-4); +} + +.SuspenseRectOutline { + outline-color: var(--color-suspense); + outline-style: solid; + outline-width: 4px; + border-radius: 0.125rem; + pointer-events: none; } -.SuspenseRectsRect[data-highlighted='true'] { - background-color: var(--color-selected-tree-highlight-active); +.SuspenseRectsBoundary[data-selected='true'] > .SuspenseRectsRect { + box-shadow: none; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index c2a131916504c..4a45187d7fde3 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -36,6 +36,7 @@ function ScaledRect({ rect, visible, suspended, + selected, adjust, ...props }: { @@ -43,6 +44,7 @@ function ScaledRect({ rect: Rect, visible: boolean, suspended: boolean, + selected?: boolean, adjust?: boolean, ... }): React$Node { @@ -58,6 +60,7 @@ function ScaledRect({ className={styles.SuspenseRectsScaledRect + ' ' + className} data-visible={visible} data-suspended={suspended} + data-selected={selected} style={{ // Shrink one pixel so that the bottom outline will line up with the top outline of the next one. width: adjust ? 'calc(' + width + ' - 1px)' : width, @@ -152,6 +155,7 @@ function SuspenseRects({ rect={boundingBox} className={styles.SuspenseRectsBoundary} visible={visible} + selected={selected} suspended={suspense.isSuspended}> {visible && @@ -162,7 +166,6 @@ function SuspenseRects({ key={index} className={styles.SuspenseRectsRect} rect={rect} - data-highlighted={selected} adjust={true} onClick={handleClick} onDoubleClick={handleDoubleClick} @@ -182,6 +185,13 @@ function SuspenseRects({ })} )} + {selected ? ( + + ) : null} ); diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css index 932a23103f1a3..93740531a2139 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css @@ -40,22 +40,22 @@ .SuspenseScrubberBead { flex: 1; height: 0.5rem; - background: var(--color-background-selected); border-radius: 0.5rem; - background: var(--color-selected-tree-highlight-active); - transition: all 0.3s ease-in-out; + background: color-mix(in srgb, var(--color-suspense) 10%, transparent); + transition: all 0.3s ease-in; } .SuspenseScrubberBeadSelected { height: 1rem; - background: var(--color-background-selected); + background: var(--color-suspense); } .SuspenseScrubberBeadTransition { - background: var(--color-component-name); + background: var(--color-transition); } .SuspenseScrubberStepHighlight > .SuspenseScrubberBead, .SuspenseScrubberStep:hover > .SuspenseScrubberBead { height: 0.75rem; + transition: all 0.3s ease-out; }