diff --git a/.changeset/plenty-gifts-watch.md b/.changeset/plenty-gifts-watch.md
new file mode 100644
index 0000000000..51f97d207b
--- /dev/null
+++ b/.changeset/plenty-gifts-watch.md
@@ -0,0 +1,7 @@
+---
+'remotedev-redux-devtools-extension': minor
+'@redux-devtools/inspector-monitor': minor
+---
+
+Option to sort State Tree keys alphabetically
+Option to disable collapsing of object keys
diff --git a/extension/src/options/Options.tsx b/extension/src/options/Options.tsx
index 579dd3ac41..6d84da5982 100644
--- a/extension/src/options/Options.tsx
+++ b/extension/src/options/Options.tsx
@@ -5,6 +5,7 @@ import AllowToRunGroup from './AllowToRunGroup';
import MiscellaneousGroup from './MiscellaneousGroup';
import ContextMenuGroup from './ContextMenuGroup';
import { Options } from './syncOptions';
+import JsonTree from './StateTree';
export interface OptionsProps {
readonly options: Options;
@@ -18,6 +19,7 @@ export default (props: OptionsProps) => (
+
diff --git a/extension/src/options/StateTree.tsx b/extension/src/options/StateTree.tsx
new file mode 100644
index 0000000000..222d0bce3b
--- /dev/null
+++ b/extension/src/options/StateTree.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { OptionsProps } from './Options';
+
+export default ({ options, saveOption }: OptionsProps) => {
+ return (
+
+ );
+};
diff --git a/extension/src/options/syncOptions.ts b/extension/src/options/syncOptions.ts
index e523c598a1..ca803821c5 100644
--- a/extension/src/options/syncOptions.ts
+++ b/extension/src/options/syncOptions.ts
@@ -12,6 +12,8 @@ export interface Options {
readonly inject: boolean;
readonly urls: string;
readonly showContextMenus: boolean;
+ readonly sortStateTreeAlphabetically: boolean;
+ readonly disableStateTreeCollection: boolean;
}
interface OldOrNewOptions {
@@ -32,6 +34,8 @@ interface OldOrNewOptions {
readonly inject: boolean;
readonly urls: string;
readonly showContextMenus: boolean;
+ readonly sortStateTreeAlphabetically: boolean;
+ readonly disableStateTreeCollection: boolean;
}
let options: Options | undefined;
diff --git a/packages/redux-devtools-inspector-monitor/package.json b/packages/redux-devtools-inspector-monitor/package.json
index f036194908..f43bb84b1c 100644
--- a/packages/redux-devtools-inspector-monitor/package.json
+++ b/packages/redux-devtools-inspector-monitor/package.json
@@ -39,6 +39,7 @@
"@types/dragula": "^3.7.1",
"@types/lodash": "^4.14.186",
"@types/prop-types": "^15.7.5",
+ "@types/chrome": "^0.0.198",
"dateformat": "^4.6.3",
"hex-rgba": "^1.0.2",
"immutable": "^4.1.0",
diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx b/packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx
index dbc37f0695..c107c20b8d 100644
--- a/packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { JSONTree } from 'react-json-tree';
import { Action } from 'redux';
@@ -6,6 +6,8 @@ import getItemString from './getItemString';
import getJsonTreeTheme from './getJsonTreeTheme';
import { TabComponentProps } from '../ActionPreview';
+const isFF = navigator.userAgent.indexOf('Firefox') !== -1;
+
const StateTab: React.FunctionComponent<
TabComponentProps
>
> = ({
@@ -16,18 +18,39 @@ const StateTab: React.FunctionComponent<
labelRenderer,
dataTypeKey,
isWideLayout,
-}) => (
-
- getItemString(styling, type, data, dataTypeKey, isWideLayout)
- }
- invertTheme={invertTheme}
- hideRoot
- />
-);
+}) => {
+ const [sortObjectKeys, setSortObjectKeys] = useState(false);
+ const [disableCollection, setDisableCollection] = useState(false);
+
+ useEffect(() => {
+ if (!chrome || !chrome.storage) return;
+ const storage = isFF
+ ? chrome.storage.local
+ : chrome.storage.sync || chrome.storage.local;
+ storage.get(
+ ['sortStateTreeAlphabetically', 'disableStateTreeCollection'],
+ function (result) {
+ setSortObjectKeys(!!result.sortStateTreeAlphabetically);
+ setDisableCollection(!!result.disableStateTreeCollection);
+ }
+ );
+ }, []);
+
+ return (
+
+ getItemString(styling, type, data, dataTypeKey, isWideLayout)
+ }
+ invertTheme={invertTheme}
+ hideRoot
+ sortObjectKeys={sortObjectKeys}
+ {...(disableCollection ? { collectionLimit: 0 } : {})}
+ />
+ );
+};
StateTab.propTypes = {
nextState: PropTypes.any.isRequired,
diff --git a/packages/redux-devtools-inspector-monitor/tsconfig.json b/packages/redux-devtools-inspector-monitor/tsconfig.json
index 67c88df506..545767ddf7 100644
--- a/packages/redux-devtools-inspector-monitor/tsconfig.json
+++ b/packages/redux-devtools-inspector-monitor/tsconfig.json
@@ -2,7 +2,8 @@
"extends": "../../tsconfig.react.base.json",
"compilerOptions": {
"outDir": "lib/types",
- "resolveJsonModule": true
+ "resolveJsonModule": true,
+ "types": ["chrome"]
},
"include": ["src"]
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 26811798d3..1ff3190901 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1198,6 +1198,7 @@ importers:
'@babel/preset-typescript': ^7.18.6
'@babel/runtime': ^7.19.4
'@redux-devtools/core': ^3.13.1
+ '@types/chrome': ^0.0.198
'@types/dateformat': ^3.0.1
'@types/dragula': ^3.7.1
'@types/hex-rgba': ^1.0.1
@@ -1233,6 +1234,7 @@ importers:
typescript: ~4.8.4
dependencies:
'@babel/runtime': 7.19.4
+ '@types/chrome': 0.0.198
'@types/dragula': 3.7.1
'@types/lodash': 4.14.186
'@types/prop-types': 15.7.5
@@ -22736,18 +22738,6 @@ packages:
signal-exit: 3.0.7
dev: true
- /ws/7.5.9:
- resolution: {integrity: sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==}
- engines: {node: '>=8.3.0'}
- peerDependencies:
- bufferutil: ^4.0.1
- utf-8-validate: ^5.0.2
- peerDependenciesMeta:
- bufferutil:
- optional: true
- utf-8-validate:
- optional: true
-
/ws/8.9.0:
resolution: {integrity: sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==}
engines: {node: '>=10.0.0'}