{children}
diff --git a/packages/redux-devtools-inspector-monitor/src/index.ts b/packages/redux-devtools-inspector-monitor/src/index.ts
index 92e5091a..b1a87be5 100644
--- a/packages/redux-devtools-inspector-monitor/src/index.ts
+++ b/packages/redux-devtools-inspector-monitor/src/index.ts
@@ -3,7 +3,7 @@ export type { LabelRenderer } from 'react-json-tree';
export { default as InspectorMonitor } from './DevtoolsInspector';
export type { Tab, TabComponentProps } from './ActionPreview';
export type { DevtoolsInspectorState } from './redux';
-export type { Base16ThemeName } from './utils/createStylingFromTheme';
+export type { Base16ThemeName } from './utils/themes';
export * as inspectorThemes from './themes/index';
export { default as ActionTab } from './tabs/ActionTab';
export { default as DiffTab } from './tabs/DiffTab';
diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx b/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx
index 68142f93..cff1c58d 100644
--- a/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx
@@ -4,18 +4,10 @@ import type { LabelRenderer, ShouldExpandNodeInitially } from 'react-json-tree';
import { stringify } from 'javascript-stringify';
import { Delta } from 'jsondiffpatch';
import { Base16Theme } from 'redux-devtools-themes';
+import { css } from '@emotion/react';
+import type { Interpolation, Theme } from '@emotion/react';
import getItemString from './getItemString';
import getJsonTreeTheme from './getJsonTreeTheme';
-import {
- diffAddCss,
- diffCss,
- diffRemoveCss,
- diffUpdateArrowCss,
- diffUpdateFromCss,
- diffUpdateToCss,
- diffWrapCss,
- stateDiffEmptyCss,
-} from '../utils/createStylingFromTheme';
function stringifyAndShrink(val: any, isWideLayout?: boolean) {
if (val === null) {
@@ -55,6 +47,16 @@ function prepareDelta(value: any) {
return value;
}
+const diffCss: Interpolation
= (theme) => ({
+ padding: '2px 3px',
+ borderRadius: '3px',
+ position: 'relative',
+
+ color: theme.TEXT_COLOR,
+});
+
+const diffWrapCss = css({ position: 'relative', zIndex: 1 });
+
interface Props {
delta: Delta | null | undefined | false;
base16Theme: Base16Theme;
@@ -93,7 +95,16 @@ export default class JSONDiff extends Component {
const { base16Theme, ...props } = this.props;
if (!this.state.data) {
- return (states are equal)
;
+ return (
+ ({
+ padding: '10px',
+ color: theme.TEXT_PLACEHOLDER_COLOR,
+ })}
+ >
+ (states are equal)
+
+ );
}
return (
@@ -128,7 +139,13 @@ export default class JSONDiff extends Component {
case 1:
return (
-
+ ({ backgroundColor: theme.DIFF_ADD_COLOR }),
+ ]}
+ >
{stringifyAndShrink(value[0], isWideLayout)}
@@ -136,13 +153,31 @@ export default class JSONDiff extends Component {
case 2:
return (
-
+ ({
+ textDecoration: 'line-through',
+ backgroundColor: theme.DIFF_REMOVE_COLOR,
+ }),
+ ]}
+ >
{stringifyAndShrink(value[0], isWideLayout)}
-
+ ({ color: theme.DIFF_ARROW_COLOR })]}
+ >
{' => '}
-
+ ({ backgroundColor: theme.DIFF_ADD_COLOR }),
+ ]}
+ >
{stringifyAndShrink(value[1], isWideLayout)}
@@ -150,7 +185,16 @@ export default class JSONDiff extends Component {
case 3:
return (
-
+ ({
+ textDecoration: 'line-through',
+ backgroundColor: theme.DIFF_REMOVE_COLOR,
+ }),
+ ]}
+ >
{stringifyAndShrink(value[0])}
diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx b/packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx
index ec5b4d1f..2fb7f33b 100644
--- a/packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import { isCollection, isIndexed, isKeyed } from 'immutable';
import isIterable from '../utils/isIterable';
-import { treeItemHintCss } from '../utils/createStylingFromTheme';
const IS_IMMUTABLE_KEY = '@@__IS_IMMUTABLE__@@';
@@ -78,7 +77,7 @@ const getItemString = (
isWideLayout: boolean,
isDiff?: boolean,
) => (
-
+ ({ color: theme.ITEM_HINT_COLOR })}>
{data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
{dataTypeKey && data[dataTypeKey] ? `${data[dataTypeKey] as string} ` : ''}
{getText(type, data, isWideLayout, isDiff)}
diff --git a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
deleted file mode 100644
index 3a642f58..00000000
--- a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
+++ /dev/null
@@ -1,384 +0,0 @@
-import { css } from '@emotion/react';
-import type { Interpolation, Theme } from '@emotion/react';
-import rgba from 'hex-rgba';
-import { Base16Theme } from 'redux-devtools-themes';
-import * as reduxThemes from 'redux-devtools-themes';
-import * as inspectorThemes from '../themes';
-import { getBase16Theme, invertBase16Theme } from 'react-base16-styling';
-
-declare module '@emotion/react' {
- export interface Theme {
- TEXT_COLOR: string;
- TEXT_PLACEHOLDER_COLOR: string;
- BACKGROUND_COLOR: string;
- SELECTED_BACKGROUND_COLOR: string;
- SKIPPED_BACKGROUND_COLOR: string;
- HEADER_BACKGROUND_COLOR: string;
- HEADER_BORDER_COLOR: string;
- BORDER_COLOR: string;
- LIST_BORDER_COLOR: string;
- ACTION_TIME_BACK_COLOR: string;
- ACTION_TIME_COLOR: string;
- PIN_COLOR: string;
- ITEM_HINT_COLOR: string;
- TAB_BACK_SELECTED_COLOR: string;
- TAB_BACK_COLOR: string;
- TAB_BACK_HOVER_COLOR: string;
- TAB_BORDER_COLOR: string;
- DIFF_ADD_COLOR: string;
- DIFF_REMOVE_COLOR: string;
- DIFF_ARROW_COLOR: string;
- LINK_COLOR: string;
- LINK_HOVER_COLOR: string;
- ERROR_COLOR: string;
- }
-}
-
-export const colorMap = (theme: Base16Theme) => ({
- TEXT_COLOR: theme.base06,
- TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60),
- BACKGROUND_COLOR: theme.base00,
- SELECTED_BACKGROUND_COLOR: rgba(theme.base03, 20),
- SKIPPED_BACKGROUND_COLOR: rgba(theme.base03, 10),
- HEADER_BACKGROUND_COLOR: rgba(theme.base03, 30),
- HEADER_BORDER_COLOR: rgba(theme.base03, 20),
- BORDER_COLOR: rgba(theme.base03, 50),
- LIST_BORDER_COLOR: rgba(theme.base03, 50),
- ACTION_TIME_BACK_COLOR: rgba(theme.base03, 20),
- ACTION_TIME_COLOR: theme.base04,
- PIN_COLOR: theme.base04,
- ITEM_HINT_COLOR: rgba(theme.base0F, 90),
- TAB_BACK_SELECTED_COLOR: rgba(theme.base03, 20),
- TAB_BACK_COLOR: rgba(theme.base00, 70),
- TAB_BACK_HOVER_COLOR: rgba(theme.base03, 40),
- TAB_BORDER_COLOR: rgba(theme.base03, 50),
- DIFF_ADD_COLOR: rgba(theme.base0B, 40),
- DIFF_REMOVE_COLOR: rgba(theme.base08, 40),
- DIFF_ARROW_COLOR: theme.base0E,
- LINK_COLOR: rgba(theme.base0E, 90),
- LINK_HOVER_COLOR: theme.base0E,
- ERROR_COLOR: theme.base08,
-});
-
-export const inspectorCss: Interpolation = (theme) => ({
- display: 'flex',
- flexDirection: 'column',
- width: '100%',
- height: '100%',
- fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
- fontSize: '12px',
- WebkitFontSmoothing: 'antialiased',
- lineHeight: '1.5em',
-
- backgroundColor: theme.BACKGROUND_COLOR,
- color: theme.TEXT_COLOR,
-});
-
-export const inspectorWideCss = css({ flexDirection: 'row' });
-
-export const actionListCss: Interpolation = (theme) => ({
- flexBasis: '40%',
- flexShrink: 0,
- overflowX: 'hidden',
- overflowY: 'auto',
- borderBottomWidth: '3px',
- borderBottomStyle: 'double',
- display: 'flex',
- flexDirection: 'column',
-
- backgroundColor: theme.BACKGROUND_COLOR,
- borderColor: theme.LIST_BORDER_COLOR,
-});
-
-export const actionListWideCss = css({
- flexBasis: '40%',
- borderBottom: 'none',
- borderRightWidth: '3px',
- borderRightStyle: 'double',
-});
-
-export const actionListHeaderCss: Interpolation = (theme) => ({
- display: 'flex',
- flex: '0 0 auto',
- alignItems: 'center',
- borderBottomWidth: '1px',
- borderBottomStyle: 'solid',
-
- borderColor: theme.LIST_BORDER_COLOR,
-});
-
-export const actionListRowsCss = css({ overflow: 'auto' });
-
-export const actionListHeaderSelectorCss = css({
- display: 'inline-flex',
- marginRight: '10px',
-});
-
-export const actionListItemCss: Interpolation = (theme) => ({
- borderBottomWidth: '1px',
- borderBottomStyle: 'solid',
- display: 'flex',
- justifyContent: 'space-between',
- padding: '5px 10px',
- cursor: 'pointer',
- userSelect: 'none',
-
- borderBottomColor: theme.BORDER_COLOR,
-});
-
-export const actionListItemSelectedCss: Interpolation = (theme) => ({
- backgroundColor: theme.SELECTED_BACKGROUND_COLOR,
-});
-
-export const actionListItemSkippedCss: Interpolation = (theme) => ({
- backgroundColor: theme.SKIPPED_BACKGROUND_COLOR,
-});
-
-export const actionListFromFutureCss = css({ opacity: '0.6' });
-
-export const actionListItemButtonsCss = css({
- position: 'relative',
- height: '20px',
- display: 'flex',
-});
-
-export const actionListItemTimeCss: Interpolation = (theme) => ({
- display: 'inline',
- padding: '4px 6px',
- borderRadius: '3px',
- fontSize: '0.8em',
- lineHeight: '1em',
- flexShrink: 0,
-
- backgroundColor: theme.ACTION_TIME_BACK_COLOR,
- color: theme.ACTION_TIME_COLOR,
-});
-
-export const actionListItemSelectorCss = css({ display: 'inline-flex' });
-
-export const actionListItemNameCss = css({
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- lineHeight: '20px',
-});
-
-export const actionListItemNameSkippedCss = css({
- textDecoration: 'line-through',
- opacity: 0.3,
-});
-
-export const actionListHeaderSearchCss: Interpolation = (theme) => ({
- outline: 'none',
- border: 'none',
- width: '100%',
- padding: '5px 10px',
- fontSize: '1em',
- fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
-
- backgroundColor: theme.BACKGROUND_COLOR,
- color: theme.TEXT_COLOR,
-
- '&::-webkit-input-placeholder': {
- color: theme.TEXT_PLACEHOLDER_COLOR,
- },
-
- '&::-moz-placeholder': {
- color: theme.TEXT_PLACEHOLDER_COLOR,
- },
-});
-
-export const actionListHeaderWrapperCss = css({
- position: 'relative',
- height: '20px',
-});
-
-export const actionPreviewCss: Interpolation = (theme) => ({
- flex: 1,
- display: 'flex',
- flexDirection: 'column',
- flexGrow: 1,
- overflowY: 'hidden',
-
- '& pre': {
- border: 'inherit',
- borderRadius: '3px',
- lineHeight: 'inherit',
- color: 'inherit',
- },
-
- backgroundColor: theme.BACKGROUND_COLOR,
-});
-
-export const actionPreviewContentCss = css({ flex: 1, overflowY: 'auto' });
-
-export const stateDiffEmptyCss: Interpolation = (theme) => ({
- padding: '10px',
-
- color: theme.TEXT_PLACEHOLDER_COLOR,
-});
-
-export const stateErrorCss: Interpolation = (theme) => ({
- padding: '10px',
- marginLeft: '14px',
- fontWeight: 'bold',
-
- color: theme.ERROR_COLOR,
-});
-
-export const inspectedPathCss = css({ padding: '6px 0' });
-
-export const inspectedPathKeyCss = css({
- '&:not(:last-child):after': {
- content: '" > "',
- },
-});
-
-export const inspectedPathKeyLinkCss: Interpolation = (theme) => ({
- cursor: 'pointer',
- color: theme.LINK_COLOR,
- '&:hover': {
- textDecoration: 'underline',
- color: theme.LINK_HOVER_COLOR,
- },
-});
-
-export const treeItemPinCss: Interpolation = (theme) => ({
- fontSize: '0.7em',
- paddingLeft: '5px',
- cursor: 'pointer',
- '&:hover': {
- textDecoration: 'underline',
- },
-
- color: theme.PIN_COLOR,
-});
-
-export const treeItemHintCss: Interpolation = (theme) => ({
- color: theme.ITEM_HINT_COLOR,
-});
-
-export const previewHeaderCss: Interpolation = (theme) => ({
- flex: '0 0 30px',
- padding: '5px 10px',
- alignItems: 'center',
- borderBottomWidth: '1px',
- borderBottomStyle: 'solid',
-
- backgroundColor: theme.HEADER_BACKGROUND_COLOR,
- borderBottomColor: theme.HEADER_BORDER_COLOR,
-});
-
-export const tabSelectorCss = css({
- position: 'relative',
- display: 'inline-flex',
- float: 'right',
-});
-
-export const selectorButtonCss: Interpolation = (theme) => ({
- cursor: 'pointer',
- position: 'relative',
- padding: '5px 10px',
- borderStyle: 'solid',
- borderWidth: '1px',
- borderLeftWidth: 0,
-
- '&:first-child': {
- borderLeftWidth: '1px',
- borderTopLeftRadius: '3px',
- borderBottomLeftRadius: '3px',
- },
-
- '&:last-child': {
- borderTopRightRadius: '3px',
- borderBottomRightRadius: '3px',
- },
-
- backgroundColor: theme.TAB_BACK_COLOR,
-
- '&:hover': {
- backgroundColor: theme.TAB_BACK_HOVER_COLOR,
- },
-
- borderColor: theme.TAB_BORDER_COLOR,
-});
-
-export const selectorButtonSmallCss = css({
- padding: '0px 8px',
- fontSize: '0.8em',
-});
-
-export const selectorButtonSelectedCss: Interpolation = (theme) => ({
- backgroundColor: theme.TAB_BACK_SELECTED_COLOR,
-});
-
-export const diffCss: Interpolation = (theme) => ({
- padding: '2px 3px',
- borderRadius: '3px',
- position: 'relative',
-
- color: theme.TEXT_COLOR,
-});
-
-export const diffWrapCss = css({ position: 'relative', zIndex: 1 });
-
-export const diffAddCss: Interpolation = (theme) => ({
- backgroundColor: theme.DIFF_ADD_COLOR,
-});
-
-export const diffRemoveCss: Interpolation = (theme) => ({
- textDecoration: 'line-through',
- backgroundColor: theme.DIFF_REMOVE_COLOR,
-});
-
-export const diffUpdateFromCss: Interpolation = (theme) => ({
- textDecoration: 'line-through',
- backgroundColor: theme.DIFF_REMOVE_COLOR,
-});
-
-export const diffUpdateToCss: Interpolation = (theme) => ({
- backgroundColor: theme.DIFF_ADD_COLOR,
-});
-
-export const diffUpdateArrowCss: Interpolation = (theme) => ({
- color: theme.DIFF_ARROW_COLOR,
-});
-
-export const rightSliderCss = css({
- WebkitFontSmoothing: 'subpixel-antialiased', // http://stackoverflow.com/a/21136111/4218591
- position: 'absolute',
- right: 0,
- transform: 'translateX(150%)',
- transition: 'transform 0.2s ease-in-out',
-});
-
-export const rightSliderRotateCss = css({
- transform: 'rotateX(90deg)',
- transition: 'transform 0.2s ease-in-out 0.08s',
-});
-
-export const rightSliderShownCss = css({
- position: 'static',
- transform: 'translateX(0)',
-});
-
-export const rightSliderRotateShownCss = css({
- transform: 'rotateX(0)',
- transition: 'transform 0.2s ease-in-out 0.18s',
-});
-
-const base16Themes = { ...reduxThemes, ...inspectorThemes };
-export type Base16ThemeName = keyof typeof base16Themes;
-
-export function resolveBase16Theme(theme: Base16ThemeName | Base16Theme) {
- return getBase16Theme(theme, base16Themes);
-}
-
-export function createInspectorMonitorThemeFromBase16Theme(
- base16Theme: Base16Theme,
- invertTheme: boolean,
-) {
- const finalBase16Theme = invertTheme
- ? invertBase16Theme(base16Theme)
- : base16Theme;
- return colorMap(finalBase16Theme);
-}
diff --git a/packages/redux-devtools-inspector-monitor/src/utils/selectorButtonStyles.ts b/packages/redux-devtools-inspector-monitor/src/utils/selectorButtonStyles.ts
new file mode 100644
index 00000000..beed1ca5
--- /dev/null
+++ b/packages/redux-devtools-inspector-monitor/src/utils/selectorButtonStyles.ts
@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+import type { Interpolation, Theme } from '@emotion/react';
+
+export const selectorButtonCss: Interpolation = (theme) => ({
+ cursor: 'pointer',
+ position: 'relative',
+ padding: '5px 10px',
+ borderStyle: 'solid',
+ borderWidth: '1px',
+ borderLeftWidth: 0,
+
+ '&:first-child': {
+ borderLeftWidth: '1px',
+ borderTopLeftRadius: '3px',
+ borderBottomLeftRadius: '3px',
+ },
+
+ '&:last-child': {
+ borderTopRightRadius: '3px',
+ borderBottomRightRadius: '3px',
+ },
+
+ backgroundColor: theme.TAB_BACK_COLOR,
+
+ '&:hover': {
+ backgroundColor: theme.TAB_BACK_HOVER_COLOR,
+ },
+
+ borderColor: theme.TAB_BORDER_COLOR,
+});
+
+export const selectorButtonSmallCss = css({
+ padding: '0px 8px',
+ fontSize: '0.8em',
+});
+
+export const selectorButtonSelectedCss: Interpolation = (theme) => ({
+ backgroundColor: theme.TAB_BACK_SELECTED_COLOR,
+});
diff --git a/packages/redux-devtools-inspector-monitor/src/utils/themes.ts b/packages/redux-devtools-inspector-monitor/src/utils/themes.ts
new file mode 100644
index 00000000..d4ce67c6
--- /dev/null
+++ b/packages/redux-devtools-inspector-monitor/src/utils/themes.ts
@@ -0,0 +1,76 @@
+import rgba from 'hex-rgba';
+import { Base16Theme } from 'redux-devtools-themes';
+import * as reduxThemes from 'redux-devtools-themes';
+import * as inspectorThemes from '../themes';
+import { getBase16Theme, invertBase16Theme } from 'react-base16-styling';
+
+const base16Themes = { ...reduxThemes, ...inspectorThemes };
+export type Base16ThemeName = keyof typeof base16Themes;
+
+export function resolveBase16Theme(theme: Base16ThemeName | Base16Theme) {
+ return getBase16Theme(theme, base16Themes);
+}
+
+declare module '@emotion/react' {
+ export interface Theme {
+ TEXT_COLOR: string;
+ TEXT_PLACEHOLDER_COLOR: string;
+ BACKGROUND_COLOR: string;
+ SELECTED_BACKGROUND_COLOR: string;
+ SKIPPED_BACKGROUND_COLOR: string;
+ HEADER_BACKGROUND_COLOR: string;
+ HEADER_BORDER_COLOR: string;
+ BORDER_COLOR: string;
+ LIST_BORDER_COLOR: string;
+ ACTION_TIME_BACK_COLOR: string;
+ ACTION_TIME_COLOR: string;
+ PIN_COLOR: string;
+ ITEM_HINT_COLOR: string;
+ TAB_BACK_SELECTED_COLOR: string;
+ TAB_BACK_COLOR: string;
+ TAB_BACK_HOVER_COLOR: string;
+ TAB_BORDER_COLOR: string;
+ DIFF_ADD_COLOR: string;
+ DIFF_REMOVE_COLOR: string;
+ DIFF_ARROW_COLOR: string;
+ LINK_COLOR: string;
+ LINK_HOVER_COLOR: string;
+ ERROR_COLOR: string;
+ }
+}
+
+const colorMap = (theme: Base16Theme) => ({
+ TEXT_COLOR: theme.base06,
+ TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60),
+ BACKGROUND_COLOR: theme.base00,
+ SELECTED_BACKGROUND_COLOR: rgba(theme.base03, 20),
+ SKIPPED_BACKGROUND_COLOR: rgba(theme.base03, 10),
+ HEADER_BACKGROUND_COLOR: rgba(theme.base03, 30),
+ HEADER_BORDER_COLOR: rgba(theme.base03, 20),
+ BORDER_COLOR: rgba(theme.base03, 50),
+ LIST_BORDER_COLOR: rgba(theme.base03, 50),
+ ACTION_TIME_BACK_COLOR: rgba(theme.base03, 20),
+ ACTION_TIME_COLOR: theme.base04,
+ PIN_COLOR: theme.base04,
+ ITEM_HINT_COLOR: rgba(theme.base0F, 90),
+ TAB_BACK_SELECTED_COLOR: rgba(theme.base03, 20),
+ TAB_BACK_COLOR: rgba(theme.base00, 70),
+ TAB_BACK_HOVER_COLOR: rgba(theme.base03, 40),
+ TAB_BORDER_COLOR: rgba(theme.base03, 50),
+ DIFF_ADD_COLOR: rgba(theme.base0B, 40),
+ DIFF_REMOVE_COLOR: rgba(theme.base08, 40),
+ DIFF_ARROW_COLOR: theme.base0E,
+ LINK_COLOR: rgba(theme.base0E, 90),
+ LINK_HOVER_COLOR: theme.base0E,
+ ERROR_COLOR: theme.base08,
+});
+
+export function createInspectorMonitorThemeFromBase16Theme(
+ base16Theme: Base16Theme,
+ invertTheme: boolean,
+) {
+ const finalBase16Theme = invertTheme
+ ? invertBase16Theme(base16Theme)
+ : base16Theme;
+ return colorMap(finalBase16Theme);
+}