Merge branch 'main' into renovate/react-monorepo

.github/workflows/CI.yml

@@ -2,9 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [master]
+    branches: [main]
   pull_request:
-    branches: [master]
+    branches: [main]
 
 jobs:
   build:

extension/README.md

@@ -100,7 +100,7 @@ To specify [extension’s options](https://github.com/zalmoxisus/redux-devtools-
 const composeEnhancers =
   typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
     ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
-        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
+        // Specify extension’s options like name, actionsDenylist, actionsCreators, serialize...
       })
     : compose;
 
@@ -143,7 +143,7 @@ import { createStore, applyMiddleware } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension';
 
 const composeEnhancers = composeWithDevTools({
-  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
+  // Specify name here, actionsDenylist, actionsCreators and other options if needed
 });
 const store = createStore(
   reducer,
@@ -165,7 +165,7 @@ import { devToolsEnhancer } from 'redux-devtools-extension';
 const store = createStore(
   reducer,
   /* preloadedState, */ devToolsEnhancer()
-  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
+  // Specify name here, actionsDenylist, actionsCreators and other options if needed
 );
 ```
 

extension/docs/API/Arguments.md

@@ -240,9 +240,9 @@ const store = createStore(
 );
 ```
 
-### `actionsBlacklist` / `actionsWhitelist`
+### `actionsDenylist` / `actionsAllowlist`
 
-_string or array of strings as regex_ - actions types to be hidden / shown in the monitors (while passed to the reducers). If `actionsWhitelist` specified, `actionsBlacklist` is ignored.
+_string or array of strings as regex_ - actions types to be hidden / shown in the monitors (while passed to the reducers). If `actionsAllowlist` specified, `actionsDenylist` is ignored.
 
 Example:
 
@@ -251,16 +251,16 @@ createStore(
   reducer,
   remotedev({
     sendTo: 'http://localhost:8000',
-    actionsBlacklist: 'SOME_ACTION',
+    actionsDenylist: 'SOME_ACTION',
-    // or actionsBlacklist: ['SOME_ACTION', 'SOME_OTHER_ACTION']
+    // or actionsDenylist: ['SOME_ACTION', 'SOME_OTHER_ACTION']
-    // or just actionsBlacklist: 'SOME_' to omit both
+    // or just actionsDenylist: 'SOME_' to omit both
   })
 );
 ```
 
 ### `predicate`
 
-_function_ - called for every action before sending, takes `state` and `action` object, and returns `true` in case it allows sending the current data to the monitor. Use it as a more advanced version of `actionsBlacklist`/`actionsWhitelist` parameters.
+_function_ - called for every action before sending, takes `state` and `action` object, and returns `true` in case it allows sending the current data to the monitor. Use it as a more advanced version of `actionsDenylist`/`actionsAllowlist` parameters.
 Example of usage:
 
 ```js

extension/docs/Recipes.md

@@ -65,13 +65,13 @@ const store = createStore(
   /* preloadedState, */ compose(
     devToolsEnhancer({
       instaceID: 1,
-      name: 'Blacklisted',
+      name: 'Denylisted',
-      actionsBlacklist: '...',
+      actionsDenylist: '...',
     }),
     devToolsEnhancer({
       instaceID: 2,
-      name: 'Whitelisted',
+      name: 'Allowlisted',
-      actionsWhitelist: '...',
+      actionsAllowlist: '...',
     })
   )
 );

extension/src/app/api/filters.ts

@@ -5,13 +5,13 @@ import { LiftedState, PerformAction } from '@redux-devtools/instrument';
 
 export type FilterStateValue =
   | 'DO_NOT_FILTER'
-  | 'BLACKLIST_SPECIFIC'
+  | 'DENYLIST_SPECIFIC'
-  | 'WHITELIST_SPECIFIC';
+  | 'ALLOWLIST_SPECIFIC';
 
 export const FilterState: { [K in FilterStateValue]: FilterStateValue } = {
   DO_NOT_FILTER: 'DO_NOT_FILTER',
-  BLACKLIST_SPECIFIC: 'BLACKLIST_SPECIFIC',
+  DENYLIST_SPECIFIC: 'DENYLIST_SPECIFIC',
-  WHITELIST_SPECIFIC: 'WHITELIST_SPECIFIC',
+  ALLOWLIST_SPECIFIC: 'ALLOWLIST_SPECIFIC',
 };
 
 function isArray(arg: unknown): arg is readonly unknown[] {
@@ -19,19 +19,17 @@ function isArray(arg: unknown): arg is readonly unknown[] {
 }
 
 interface LocalFilter {
-  readonly whitelist: string | undefined;
+  readonly allowlist: string | undefined;
-  readonly blacklist: string | undefined;
+  readonly denylist: string | undefined;
 }
 
 export function getLocalFilter(config: Config): LocalFilter | undefined {
-  if (config.actionsBlacklist || config.actionsWhitelist) {
+  const denylist = config.actionsDenylist ?? config.actionsBlacklist;
+  const allowlist = config.actionsAllowlist ?? config.actionsWhitelist;
+  if (denylist || allowlist) {
     return {
-      whitelist: isArray(config.actionsWhitelist)
+      allowlist: isArray(allowlist) ? allowlist.join('|') : allowlist,
-        ? config.actionsWhitelist.join('|')
+      denylist: isArray(denylist) ? denylist.join('|') : denylist,
-        : config.actionsWhitelist,
-      blacklist: isArray(config.actionsBlacklist)
-        ? config.actionsBlacklist.join('|')
-        : config.actionsBlacklist,
     };
   }
   return undefined;
@@ -56,11 +54,11 @@ export function isFiltered<A extends Action<unknown>>(
     return false;
   }
 
-  const { whitelist, blacklist } = localFilter || window.devToolsOptions || {};
+  const { allowlist, denylist } = localFilter || window.devToolsOptions || {};
   const actionType = ((action as A).type || action) as string;
   return (
-    (whitelist && !actionType.match(whitelist)) ||
+    (allowlist && !actionType.match(allowlist)) ||
-    (blacklist && actionType.match(blacklist))
+    (denylist && actionType.match(denylist))
   );
 }
 

extension/src/app/middlewares/api.ts

@@ -3,6 +3,8 @@ import {
   UPDATE_STATE,
   REMOVE_INSTANCE,
   LIFTED_ACTION,
+  TOGGLE_PERSIST,
+  SET_PERSIST,
 } from '@redux-devtools/app/lib/constants/actionTypes';
 import { nonReduxDispatch } from '@redux-devtools/app/lib/utils/monitorActions';
 import syncOptions, {
@@ -18,8 +20,9 @@ import {
   CustomAction,
   DispatchAction as AppDispatchAction,
   LibConfig,
+  SetPersistAction,
 } from '@redux-devtools/app/lib/actions';
-import { Action, Dispatch } from 'redux';
+import { Action, Dispatch, MiddlewareAPI } from 'redux';
 import {
   ContentScriptToBackgroundMessage,
   SplitMessage,
@@ -35,6 +38,7 @@ import {
   LiftedActionAction,
 } from '../stores/backgroundStore';
 import { Position } from '../api/openWindow';
+import { BackgroundState } from '../reducers/background';
 
 interface TabMessageBase {
   readonly type: string;
@@ -183,8 +187,13 @@ export type TabMessage =
 export type PanelMessage<S, A extends Action<unknown>> =
   | NAAction
   | ErrorMessage
-  | UpdateStateAction<S, A>;
+  | UpdateStateAction<S, A>
-export type MonitorMessage = NAAction | ErrorMessage | EmptyUpdateStateAction;
+  | SetPersistAction;
+export type MonitorMessage =
+  | NAAction
+  | ErrorMessage
+  | EmptyUpdateStateAction
+  | SetPersistAction;
 
 type TabPort = Omit<chrome.runtime.Port, 'postMessage'> & {
   postMessage: (message: TabMessage) => void;
@@ -224,7 +233,8 @@ const getId = (sender: chrome.runtime.MessageSender, name?: string) =>
 type MonitorAction<S, A extends Action<unknown>> =
   | NAAction
   | ErrorMessage
-  | UpdateStateAction<S, A>;
+  | UpdateStateAction<S, A>
+  | SetPersistAction;
 
 function toMonitors<S, A extends Action<unknown>>(
   action: MonitorAction<S, A>,
@@ -233,7 +243,9 @@ function toMonitors<S, A extends Action<unknown>>(
 ) {
   Object.keys(connections.monitor).forEach((id) => {
     connections.monitor[id].postMessage(
-      verbose || action.type === 'ERROR' ? action : { type: UPDATE_STATE }
+      verbose || action.type === 'ERROR' || action.type === SET_PERSIST
+        ? action
+        : { type: UPDATE_STATE }
     );
   });
   Object.keys(connections.panel).forEach((id) => {
@@ -582,9 +594,18 @@ declare global {
 
 window.syncOptions = syncOptions(toAllTabs); // Expose to the options page
 
-export default function api() {
+export default function api(
+  store: MiddlewareAPI<Dispatch<BackgroundAction>, BackgroundState>
+) {
   return (next: Dispatch<BackgroundAction>) => (action: BackgroundAction) => {
     if (action.type === LIFTED_ACTION) toContentScript(action);
+    else if (action.type === TOGGLE_PERSIST) {
+      togglePersist();
+      toMonitors({
+        type: SET_PERSIST,
+        payload: !store.getState().instances.persisted,
+      });
+    }
     return next(action);
   };
 }

extension/src/app/middlewares/panelSync.ts

@@ -2,6 +2,7 @@ import {
   LIFTED_ACTION,
   UPDATE_STATE,
   SELECT_INSTANCE,
+  TOGGLE_PERSIST,
 } from '@redux-devtools/app/lib/constants/actionTypes';
 import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
 import { Dispatch, MiddlewareAPI } from 'redux';
@@ -23,7 +24,7 @@ function panelDispatcher(bgConnection: chrome.runtime.Port) {
           next({ type: SELECT_INSTANCE, selected: connections[0] });
         }
       }
-      if (action.type === LIFTED_ACTION) {
+      if (action.type === LIFTED_ACTION || action.type === TOGGLE_PERSIST) {
         const instances = store.getState().instances;
         const instanceId = getActiveInstance(instances);
         const id = instances.options[instanceId].connectionId;

extension/src/app/middlewares/windowSync.ts

@@ -1,6 +1,7 @@
 import {
   UPDATE_STATE,
   LIFTED_ACTION,
+  TOGGLE_PERSIST,
 } from '@redux-devtools/app/lib/constants/actionTypes';
 import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
 import { Dispatch, MiddlewareAPI, Store } from 'redux';
@@ -21,7 +22,7 @@ const syncStores =
         instances: baseStore.getState().instances,
       });
     }
-    if (action.type === LIFTED_ACTION) {
+    if (action.type === LIFTED_ACTION || action.type === TOGGLE_PERSIST) {
       const instances = store.getState().instances;
       const instanceId = getActiveInstance(instances);
       const id = instances.options[instanceId].connectionId;

extension/src/app/reducers/window/instances.ts

@@ -6,6 +6,7 @@ import {
   UPDATE_STATE,
   SELECT_INSTANCE,
   LIFTED_ACTION,
+  SET_PERSIST,
 } from '@redux-devtools/app/lib/constants/actionTypes';
 import {
   ExpandedUpdateStateAction,
@@ -27,6 +28,8 @@ export default function instances(
       return state;
     case SELECT_INSTANCE:
       return { ...state, selected: action.selected };
+    case SET_PERSIST:
+      return { ...state, persisted: action.payload };
     default:
       return state;
   }

extension/src/app/stores/windowStore.ts

@@ -66,16 +66,13 @@ export default function configureStore(
     );
   }
   const store = createStore(persistedReducer, enhancer);
-  const persistor = persistStore(store);
+  const persistor = persistStore(store, null, () => {
-
+    if (store.getState().connection.type !== 'disabled') {
-  if (
-    store.getState().connection.options.hostname &&
-    store.getState().connection.options.port
-  ) {
       store.dispatch({
         type: CONNECT_REQUEST,
       });
     }
+  });
 
   return { store, persistor };
 }

extension/src/browser/extension/inject/pageScript.ts

@@ -72,7 +72,7 @@ let reportId: string | null | undefined;
 function deprecateParam(oldParam: string, newParam: string) {
   /* eslint-disable no-console */
   console.warn(
-    `${oldParam} parameter is deprecated, use ${newParam} instead: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md`
+    `${oldParam} parameter is deprecated, use ${newParam} instead: https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md`
   );
   /* eslint-enable no-console */
 }
@@ -84,8 +84,16 @@ export interface SerializeWithImmutable extends Serialize {
 
 export interface ConfigWithExpandedMaxAge {
   instanceId?: number;
+  /**
+   * @deprecated Use actionsDenylist instead.
+   */
   readonly actionsBlacklist?: string | readonly string[];
+  /**
+   * @deprecated Use actionsAllowlist instead.
+   */
   readonly actionsWhitelist?: string | readonly string[];
+  readonly actionsDenylist?: string | readonly string[];
+  readonly actionsAllowlist?: string | readonly string[];
   serialize?: boolean | SerializeWithImmutable;
   readonly serializeState?:
     | boolean
@@ -213,6 +221,14 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
     latency = 500,
   } = config;
 
+  // Deprecate actionsWhitelist and actionsBlacklist
+  if (config.actionsWhitelist) {
+    deprecateParam('actionsWhiteList', 'actionsAllowlist');
+  }
+  if (config.actionsBlacklist) {
+    deprecateParam('actionsBlacklist', 'actionsDenylist');
+  }
+
   // Deprecate statesFilter and actionsFilter
   if (statesFilter) {
     deprecateParam('statesFilter', 'stateSanitizer');

extension/src/browser/extension/manifest.json

@@ -3,7 +3,7 @@
   "name": "Redux DevTools",
   "short_name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
-  "homepage_url": "https://github.com/zalmoxisus/redux-devtools-extension",
+  "homepage_url": "https://github.com/reduxjs/redux-devtools",
   "manifest_version": 2,
   "page_action": {
     "default_icon": "img/logo/gray.png",

extension/src/browser/extension/options/FilterGroup.tsx

@@ -29,8 +29,8 @@ export default ({ options, saveOption }: OptionsProps) => {
           id="filter-hide"
           name="filter"
           type="radio"
-          checked={options.filter === FilterState.BLACKLIST_SPECIFIC}
+          checked={options.filter === FilterState.DENYLIST_SPECIFIC}
-          onChange={() => saveOption('filter', FilterState.BLACKLIST_SPECIFIC)}
+          onChange={() => saveOption('filter', FilterState.DENYLIST_SPECIFIC)}
         />
         <label className="option__label" htmlFor="filter-hide">
           Hide the following:
@@ -38,9 +38,9 @@ export default ({ options, saveOption }: OptionsProps) => {
         <br />
         <textarea
           className="option__textarea"
-          value={options.blacklist}
+          value={options.denylist}
-          disabled={options.filter !== FilterState.BLACKLIST_SPECIFIC}
+          disabled={options.filter !== FilterState.DENYLIST_SPECIFIC}
-          onChange={(e) => saveOption('blacklist', e.target.value)}
+          onChange={(e) => saveOption('denylist', e.target.value)}
         />
         <div className="option__hint">Each action from the new line</div>
       </div>
@@ -51,8 +51,8 @@ export default ({ options, saveOption }: OptionsProps) => {
           id="filter-show"
           name="filter"
           type="radio"
-          checked={options.filter === FilterState.WHITELIST_SPECIFIC}
+          checked={options.filter === FilterState.ALLOWLIST_SPECIFIC}
-          onChange={() => saveOption('filter', FilterState.WHITELIST_SPECIFIC)}
+          onChange={() => saveOption('filter', FilterState.ALLOWLIST_SPECIFIC)}
         />
         <label className="option__label" htmlFor="filter-show">
           Show the following:
@@ -60,9 +60,9 @@ export default ({ options, saveOption }: OptionsProps) => {
         <br />
         <textarea
           className="option__textarea"
-          value={options.whitelist}
+          value={options.allowlist}
-          disabled={options.filter !== FilterState.WHITELIST_SPECIFIC}
+          disabled={options.filter !== FilterState.ALLOWLIST_SPECIFIC}
-          onChange={(e) => saveOption('whitelist', e.target.value)}
+          onChange={(e) => saveOption('allowlist', e.target.value)}
         />
         <div className="option__hint">Each action from the new line</div>
       </div>

extension/src/browser/extension/options/syncOptions.ts

@@ -6,8 +6,8 @@ export interface Options {
   readonly projectPath: string;
   readonly maxAge: number;
   readonly filter: FilterStateValue;
-  readonly whitelist: string;
+  readonly allowlist: string;
-  readonly blacklist: string;
+  readonly denylist: string;
   readonly shouldCatchErrors: boolean;
   readonly inject: boolean;
   readonly urls: string;
@@ -19,7 +19,13 @@ interface OldOrNewOptions {
   readonly editor: string;
   readonly projectPath: string;
   readonly maxAge: number;
-  readonly filter: FilterStateValue | boolean;
+  readonly filter:
+    | FilterStateValue
+    | 'WHITELIST_SPECIFIC'
+    | 'BLACKLIST_SPECIFIC'
+    | boolean;
+  readonly allowlist: string;
+  readonly denylist: string;
   readonly whitelist: string;
   readonly blacklist: string;
   readonly shouldCatchErrors: boolean;
@@ -54,10 +60,14 @@ const migrateOldOptions = (oldOptions: OldOrNewOptions): Options => ({
     // Migrate the old `filter` option from 2.2.1
     typeof oldOptions.filter === 'boolean'
       ? oldOptions.filter && oldOptions.whitelist.length > 0
-        ? FilterState.WHITELIST_SPECIFIC
+        ? FilterState.ALLOWLIST_SPECIFIC
         : oldOptions.filter
-        ? FilterState.BLACKLIST_SPECIFIC
+        ? FilterState.DENYLIST_SPECIFIC
         : FilterState.DO_NOT_FILTER
+      : oldOptions.filter === 'WHITELIST_SPECIFIC'
+      ? FilterState.ALLOWLIST_SPECIFIC
+      : oldOptions.filter === 'BLACKLIST_SPECIFIC'
+      ? FilterState.DENYLIST_SPECIFIC
       : oldOptions.filter,
 });
 
@@ -73,6 +83,8 @@ const get = (callback: (options: Options) => void) => {
         filter: FilterState.DO_NOT_FILTER,
         whitelist: '',
         blacklist: '',
+        allowlist: '',
+        denylist: '',
         shouldCatchErrors: false,
         inject: true,
         urls: '^https?://localhost|0\\.0\\.0\\.0:\\d+\n^https?://.+\\.github\\.io',
@@ -98,14 +110,14 @@ export const injectOptions = (newOptions: Options) => {
 
   options = {
     ...newOptions,
-    whitelist:
+    allowlist:
       newOptions.filter !== FilterState.DO_NOT_FILTER
-        ? toReg(newOptions.whitelist)!
+        ? toReg(newOptions.allowlist)!
-        : newOptions.whitelist,
+        : newOptions.allowlist,
-    blacklist:
+    denylist:
       newOptions.filter !== FilterState.DO_NOT_FILTER
-        ? toReg(newOptions.blacklist)!
+        ? toReg(newOptions.denylist)!
-        : newOptions.blacklist,
+        : newOptions.denylist,
   };
   let s = document.createElement('script');
   s.type = 'text/javascript';

extension/src/browser/firefox/manifest.json

@@ -3,7 +3,7 @@
   "name": "Redux DevTools",
   "manifest_version": 2,
   "description": "Redux Developer Tools for debugging application state changes.",
-  "homepage_url": "https://github.com/zalmoxisus/redux-devtools-extension",
+  "homepage_url": "https://github.com/reduxjs/redux-devtools",
   "applications": {
     "gecko": {
       "id": "extension@redux.devtools",

extension/test/app/inject/enhancer.spec.js

@@ -181,7 +181,7 @@ describe('Redux enhancer', () => {
       window.store = createStore(
         counter,
         window.__REDUX_DEVTOOLS_EXTENSION__({
-          actionsBlacklist: ['SOME_ACTION'],
+          actionsDenylist: ['SOME_ACTION'],
           statesFilter: (state) => state,
           serializeState: (key, value) => value,
         })

extension/test/chrome/extension.spec.js

@@ -43,7 +43,7 @@ describe('Chrome extension', function () {
   });
 
   it("should contain inspector monitor's component", async () => {
-    await delay(500);
+    await delay(1000);
     const val = await driver
       .findElement(webdriver.By.xpath('//div[contains(@class, "inspector-")]'))
       .getText();

packages/devui/src/Select/Select.tsx

@@ -73,6 +73,10 @@ export class Select<
               borderColor: props.theme.colors.neutral10,
             },
           }),
+          menu: (base) => ({
+            ...base,
+            zIndex: 10,
+          }),
         }}
       />
     );

packages/devui/tests/__snapshots__/Select.test.tsx.snap

@@ -333,6 +333,7 @@ exports[`Select should select another option 1`] = `
           Object {
             "container": [Function],
             "control": [Function],
+            "menu": [Function],
           }
         }
         theme={[Function]}
@@ -396,6 +397,7 @@ exports[`Select should select another option 1`] = `
             Object {
               "container": [Function],
               "control": [Function],
+              "menu": [Function],
             }
           }
           tabIndex="0"
@@ -493,6 +495,7 @@ exports[`Select should select another option 1`] = `
                 "styles": Object {
                   "container": [Function],
                   "control": [Function],
+                  "menu": [Function],
                 },
                 "tabIndex": "0",
                 "tabSelectsValue": true,
@@ -650,6 +653,7 @@ exports[`Select should select another option 1`] = `
                       "styles": Object {
                         "container": [Function],
                         "control": [Function],
+                        "menu": [Function],
                       },
                       "tabIndex": "0",
                       "tabSelectsValue": true,
@@ -810,6 +814,7 @@ exports[`Select should select another option 1`] = `
                       "styles": Object {
                         "container": [Function],
                         "control": [Function],
+                        "menu": [Function],
                       },
                       "tabIndex": "0",
                       "tabSelectsValue": true,
@@ -968,6 +973,7 @@ exports[`Select should select another option 1`] = `
                             "styles": Object {
                               "container": [Function],
                               "control": [Function],
+                              "menu": [Function],
                             },
                             "tabIndex": "0",
                             "tabSelectsValue": true,
@@ -1120,6 +1126,7 @@ exports[`Select should select another option 1`] = `
                                   "styles": Object {
                                     "container": [Function],
                                     "control": [Function],
+                                    "menu": [Function],
                                   },
                                   "tabIndex": "0",
                                   "tabSelectsValue": true,
@@ -1353,6 +1360,7 @@ exports[`Select should select another option 1`] = `
                             "styles": Object {
                               "container": [Function],
                               "control": [Function],
+                              "menu": [Function],
                             },
                             "tabIndex": "0",
                             "tabSelectsValue": true,
@@ -1492,6 +1500,7 @@ exports[`Select should select another option 1`] = `
                                   "styles": Object {
                                     "container": [Function],
                                     "control": [Function],
+                                    "menu": [Function],
                                   },
                                   "tabIndex": "0",
                                   "tabSelectsValue": true,
@@ -1642,6 +1651,7 @@ exports[`Select should select another option 1`] = `
                                   "styles": Object {
                                     "container": [Function],
                                     "control": [Function],
+                                    "menu": [Function],
                                   },
                                   "tabIndex": "0",
                                   "tabSelectsValue": true,
@@ -1839,6 +1849,7 @@ exports[`Select should select another option 1`] = `
                       "styles": Object {
                         "container": [Function],
                         "control": [Function],
+                        "menu": [Function],
                       },
                       "tabIndex": "0",
                       "tabSelectsValue": true,
@@ -1973,6 +1984,7 @@ exports[`Select should select another option 1`] = `
                         "styles": Object {
                           "container": [Function],
                           "control": [Function],
+                          "menu": [Function],
                         },
                         "tabIndex": "0",
                         "tabSelectsValue": true,
@@ -2027,14 +2039,14 @@ exports[`Select should select another option 1`] = `
                           "position": "absolute",
                           "top": "100%",
                           "width": "100%",
-                          "zIndex": 1,
+                          "zIndex": 10,
                         }
                       }
                       onMouseDown={[Function]}
                       onMouseMove={[Function]}
                     >
                       <div
-                        className=" css-1uhnaxp-menu"
+                        className=" css-17wpf85-menu"
                         onMouseDown={[Function]}
                         onMouseMove={[Function]}
                       >
@@ -2133,6 +2145,7 @@ exports[`Select should select another option 1`] = `
                                 "styles": Object {
                                   "container": [Function],
                                   "control": [Function],
+                                  "menu": [Function],
                                 },
                                 "tabIndex": "0",
                                 "tabSelectsValue": true,
@@ -2293,6 +2306,7 @@ exports[`Select should select another option 1`] = `
                                       "styles": Object {
                                         "container": [Function],
                                         "control": [Function],
+                                        "menu": [Function],
                                       },
                                       "tabIndex": "0",
                                       "tabSelectsValue": true,
@@ -2489,6 +2503,7 @@ exports[`Select shouldn't find any results 1`] = `
           Object {
             "container": [Function],
             "control": [Function],
+            "menu": [Function],
           }
         }
         theme={[Function]}
@@ -2552,6 +2567,7 @@ exports[`Select shouldn't find any results 1`] = `
             Object {
               "container": [Function],
               "control": [Function],
+              "menu": [Function],
             }
           }
           tabIndex="0"
@@ -2649,6 +2665,7 @@ exports[`Select shouldn't find any results 1`] = `
                 "styles": Object {
                   "container": [Function],
                   "control": [Function],
+                  "menu": [Function],
                 },
                 "tabIndex": "0",
                 "tabSelectsValue": true,
@@ -2793,6 +2810,7 @@ exports[`Select shouldn't find any results 1`] = `
                       "styles": Object {
                         "container": [Function],
                         "control": [Function],
+                        "menu": [Function],
                       },
                       "tabIndex": "0",
                       "tabSelectsValue": true,
@@ -2953,6 +2971,7 @@ exports[`Select shouldn't find any results 1`] = `
                       "styles": Object {
                         "container": [Function],
                         "control": [Function],
+                        "menu": [Function],
                       },
                       "tabIndex": "0",
                       "tabSelectsValue": true,
@@ -3111,6 +3130,7 @@ exports[`Select shouldn't find any results 1`] = `
                             "styles": Object {
                               "container": [Function],
                               "control": [Function],
+                              "menu": [Function],
                             },
                             "tabIndex": "0",
                             "tabSelectsValue": true,
@@ -3263,6 +3283,7 @@ exports[`Select shouldn't find any results 1`] = `
                                   "styles": Object {
                                     "container": [Function],
                                     "control": [Function],
+                                    "menu": [Function],
                                   },
                                   "tabIndex": "0",
                                   "tabSelectsValue": true,
@@ -3496,6 +3517,7 @@ exports[`Select shouldn't find any results 1`] = `
                             "styles": Object {
                               "container": [Function],
                               "control": [Function],
+                              "menu": [Function],
                             },
                             "tabIndex": "0",
                             "tabSelectsValue": true,
@@ -3635,6 +3657,7 @@ exports[`Select shouldn't find any results 1`] = `
                                   "styles": Object {
                                     "container": [Function],
                                     "control": [Function],
+                                    "menu": [Function],
                                   },
                                   "tabIndex": "0",
                                   "tabSelectsValue": true,
@@ -3785,6 +3808,7 @@ exports[`Select shouldn't find any results 1`] = `
                                   "styles": Object {
                                     "container": [Function],
                                     "control": [Function],
+                                    "menu": [Function],
                                   },
                                   "tabIndex": "0",
                                   "tabSelectsValue": true,
@@ -3982,6 +4006,7 @@ exports[`Select shouldn't find any results 1`] = `
                       "styles": Object {
                         "container": [Function],
                         "control": [Function],
+                        "menu": [Function],
                       },
                       "tabIndex": "0",
                       "tabSelectsValue": true,
@@ -4116,6 +4141,7 @@ exports[`Select shouldn't find any results 1`] = `
                         "styles": Object {
                           "container": [Function],
                           "control": [Function],
+                          "menu": [Function],
                         },
                         "tabIndex": "0",
                         "tabSelectsValue": true,
@@ -4170,14 +4196,14 @@ exports[`Select shouldn't find any results 1`] = `
                           "position": "absolute",
                           "top": "100%",
                           "width": "100%",
-                          "zIndex": 1,
+                          "zIndex": 10,
                         }
                       }
                       onMouseDown={[Function]}
                       onMouseMove={[Function]}
                     >
                       <div
-                        className=" css-1uhnaxp-menu"
+                        className=" css-17wpf85-menu"
                         onMouseDown={[Function]}
                         onMouseMove={[Function]}
                       >
@@ -4270,6 +4296,7 @@ exports[`Select shouldn't find any results 1`] = `
                                 "styles": Object {
                                   "container": [Function],
                                   "control": [Function],
+                                  "menu": [Function],
                                 },
                                 "tabIndex": "0",
                                 "tabSelectsValue": true,
@@ -4409,6 +4436,7 @@ exports[`Select shouldn't find any results 1`] = `
                                       "styles": Object {
                                         "container": [Function],
                                         "control": [Function],
+                                        "menu": [Function],
                                       },
                                       "tabIndex": "0",
                                       "tabSelectsValue": true,

packages/redux-devtools-app/src/actions/index.ts

@@ -23,6 +23,7 @@ import {
   GET_REPORT_ERROR,
   GET_REPORT_SUCCESS,
   ERROR,
+  SET_PERSIST,
 } from '../constants/actionTypes';
 import {
   AUTH_ERROR,
@@ -302,6 +303,14 @@ export function togglePersist(): TogglePersistAction {
   return { type: TOGGLE_PERSIST };
 }
 
+export interface SetPersistAction {
+  type: typeof SET_PERSIST;
+  payload: boolean;
+}
+export function setPersist(persist: boolean): SetPersistAction {
+  return { type: SET_PERSIST, payload: persist };
+}
+
 export interface ToggleSyncAction {
   type: typeof TOGGLE_SYNC;
 }
@@ -323,7 +332,7 @@ export function toggleDispatcher(): ToggleDispatcherAction {
   return { type: TOGGLE_DISPATCHER };
 }
 
-export type ConnectionType = 'disabled' | 'remotedev' | 'custom';
+export type ConnectionType = 'disabled' | 'custom';
 export interface ConnectionOptions {
   readonly type: ConnectionType;
   readonly hostname: string;
@@ -561,6 +570,7 @@ export type StoreActionWithoutUpdateStateOrLiftedAction =
   | UpdateMonitorStateAction
   | ExportAction
   | TogglePersistAction
+  | SetPersistAction
   | ToggleSyncAction
   | ToggleSliderAction
   | ToggleDispatcherAction

packages/redux-devtools-app/src/components/Header.tsx

@@ -34,7 +34,9 @@ class Header extends Component<Props> {
         <Button
           title="Documentation"
           tooltipPosition="bottom"
-          onClick={this.openLink('http://extension.remotedev.io')}
+          onClick={this.openLink(
+            'https://github.com/reduxjs/redux-devtools/blob/main/README.md'
+          )}
         >
           <GoBook />
         </Button>
@@ -42,7 +44,7 @@ class Header extends Component<Props> {
           title="Feedback"
           tooltipPosition="bottom"
           onClick={this.openLink(
-            'http://extension.remotedev.io/docs/Feedback.html'
+            'https://github.com/reduxjs/redux-devtools/discussions'
           )}
         >
           <IoMdText />

packages/redux-devtools-app/src/components/Settings/Connection.tsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { connect, ResolveThunks } from 'react-redux';
 import { Container, Form } from 'devui';
 import {
-  JSONSchema7,
   JSONSchema7Definition,
   JSONSchema7Type,
   JSONSchema7TypeName,
@@ -33,12 +32,8 @@ const defaultSchema: Schema = {
     type: {
       title: 'Connection settings (for getting reports and remote debugging)',
       type: 'string',
-      enum: ['disabled', 'remotedev', 'custom'],
+      enum: ['disabled', 'custom'],
-      enumNames: [
+      enumNames: ['no remote connection', 'use local (custom) server'],
-        'no remote connection',
-        'connect via remotedev.io',
-        'use local (custom) server',
-      ],
     },
     hostname: {
       type: 'string',

packages/redux-devtools-app/src/components/buttons/PersistButton.tsx

@@ -26,8 +26,8 @@ class LockButton extends Component<Props> {
         mark={this.props.persisted && 'base0D'}
         title={
           this.props.persisted
-            ? 'Persist state history'
+            ? 'Disable state persisting'
-            : 'Disable state persisting'
+            : 'Persist state history'
         }
         onClick={this.props.onClick}
       >

packages/redux-devtools-app/src/constants/actionTypes.ts

@@ -9,6 +9,7 @@ export const LIFTED_ACTION = 'devTools/LIFTED_ACTION';
 export const MONITOR_ACTION = 'devTools/MONITOR_ACTION';
 export const TOGGLE_SYNC = 'devTools/TOGGLE_SYNC';
 export const TOGGLE_PERSIST = 'devTools/TOGGLE_PERSIST';
+export const SET_PERSIST = 'devTools/SET_PERSIST';
 export const SELECT_MONITOR = 'devTools/SELECT_MONITOR';
 export const UPDATE_MONITOR_STATE = 'devTools/UPDATE_MONITOR_STATE';
 export const TOGGLE_SLIDER = 'devTools/TOGGLE_SLIDER';

packages/redux-devtools-app/src/constants/socketOptions.ts

@@ -1,12 +0,0 @@
-const socketOptions = {
-  hostname: 'remotedev.io',
-  port: 443,
-  protocol: 'https',
-  autoReconnect: true,
-  secure: true,
-  autoReconnectOptions: {
-    randomness: 30000,
-  },
-};
-
-export default socketOptions;

packages/redux-devtools-app/src/containers/monitors/Dispatcher.tsx

@@ -92,8 +92,8 @@ class Dispatcher extends Component<Props, State> {
   selectActionCreator = (selected: 'default' | 'actions-help' | number) => {
     if (selected === 'actions-help') {
       window.open(
-        'https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/' +
+        'https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/' +
-          'basics/Dispatcher.md'
+          'API/Arguments.md#actioncreators'
       );
       return;
     }

packages/redux-devtools-app/src/index.tsx

@@ -14,13 +14,18 @@ class Root extends Component {
   persistor?: Persistor;
 
   UNSAFE_componentWillMount() {
-    const { store, persistor } = configureStore();
+    const { store, persistor } = configureStore(
-    this.store = store;
+      (store: Store<StoreState, StoreAction>) => {
-    this.persistor = persistor;
+        if (store.getState().connection.type !== 'disabled') {
           store.dispatch({
             type: CONNECT_REQUEST,
           });
         }
+      }
+    );
+    this.store = store;
+    this.persistor = persistor;
+  }
 
   render() {
     if (!this.store) return null;

packages/redux-devtools-app/src/middlewares/api.ts

@@ -1,7 +1,6 @@
 import socketCluster, { SCClientSocket } from 'socketcluster-client';
 import { stringify } from 'jsan';
 import { Dispatch, MiddlewareAPI } from 'redux';
-import socketOptions from '../constants/socketOptions';
 import * as actions from '../constants/socketActionTypes';
 import { getActiveInstance } from '../reducers/instances';
 import {
@@ -193,9 +192,7 @@ function connect() {
   if (process.env.NODE_ENV === 'test') return;
   const connection = store.getState().connection;
   try {
-    socket = socketCluster.create(
+    socket = socketCluster.create(connection.options);
-      connection.type === 'remotedev' ? socketOptions : connection.options
-    );
     handleConnection();
   } catch (error) {
     store.dispatch({ type: actions.CONNECT_ERROR, error });
@@ -204,8 +201,10 @@ function connect() {
 }
 
 function disconnect() {
+  if (socket) {
     socket.disconnect();
     socket.off();
+  }
 }
 
 function login() {

packages/redux-devtools-app/src/reducers/connection.ts

@@ -14,7 +14,7 @@ export interface ConnectionState {
 export default function connection(
   state: ConnectionState = {
     options: { hostname: 'localhost', port: 8000, secure: false },
-    type: 'remotedev',
+    type: 'disabled',
   },
   action: StoreAction
 ) {

packages/redux-devtools-app/src/reducers/instances.ts

@@ -8,6 +8,7 @@ import {
   REMOVE_INSTANCE,
   TOGGLE_PERSIST,
   TOGGLE_SYNC,
+  SET_PERSIST,
 } from '../constants/actionTypes';
 import { DISCONNECTED } from '../constants/socketActionTypes';
 import parseJSON from '../utils/parseJSON';
@@ -349,6 +350,8 @@ export default function instances(
       };
     case TOGGLE_PERSIST:
       return { ...state, persisted: !state.persisted };
+    case SET_PERSIST:
+      return { ...state, persisted: action.payload };
     case TOGGLE_SYNC:
       return { ...state, sync: !state.sync };
     case SELECT_INSTANCE:

packages/redux-devtools-app/src/store/configureStore.ts

@@ -1,4 +1,4 @@
-import { createStore, compose, applyMiddleware, Reducer } from 'redux';
+import { createStore, compose, applyMiddleware, Reducer, Store } from 'redux';
 import localForage from 'localforage';
 import { persistReducer, persistStore } from 'redux-persist';
 import api from '../middlewares/api';
@@ -17,7 +17,9 @@ const persistedReducer: Reducer<StoreState, StoreAction> = persistReducer(
   rootReducer
 ) as any;
 
-export default function configureStore() {
+export default function configureStore(
+  callback: (store: Store<StoreState, StoreAction>) => void
+) {
   let composeEnhancers = compose;
   if (process.env.NODE_ENV !== 'production') {
     if (
@@ -47,6 +49,8 @@ export default function configureStore() {
     persistedReducer,
     composeEnhancers(applyMiddleware(exportState, api))
   );
-  const persistor = persistStore(store);
+  const persistor = persistStore(store, null, () => {
+    callback(store);
+  });
   return { store, persistor };
 }

packages/redux-devtools-extension/README.md

@@ -32,7 +32,7 @@ import { createStore, applyMiddleware } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension';
 
 const composeEnhancers = composeWithDevTools({
-  // Specify here name, actionsBlacklist, actionsCreators and other options
+  // Specify here name, actionsDenylist, actionsCreators and other options
 });
 const store = createStore(
   reducer,

packages/redux-devtools-extension/index.d.ts

@@ -56,16 +56,28 @@ export interface EnhancerOptions {
   /**
    * *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).
    * If `actionsWhitelist` specified, `actionsBlacklist` is ignored.
+   * @deprecated Use actionsDenylist instead.
    */
   actionsBlacklist?: string | string[];
   /**
    * *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).
    * If `actionsWhitelist` specified, `actionsBlacklist` is ignored.
+   * @deprecated Use actionsAllowlist instead.
    */
   actionsWhitelist?: string | string[];
+  /**
+   * *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).
+   * If `actionsAllowlist` specified, `actionsDenylist` is ignored.
+   */
+  actionsDenylist?: string | string[];
+  /**
+   * *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).
+   * If `actionsAllowlist` specified, `actionsDenylist` is ignored.
+   */
+  actionsAllowlist?: string | string[];
   /**
    * called for every action before sending, takes `state` and `action` object, and returns `true` in case it allows sending the current data to the monitor.
-   * Use it as a more advanced version of `actionsBlacklist`/`actionsWhitelist` parameters.
+   * Use it as a more advanced version of `actionsDenylist`/`actionsAllowlist` parameters.
    */
   predicate?: <S, A extends Action>(state: S, action: A) => boolean;
   /**

packages/redux-devtools-inspector-monitor-test-tab/src/index.tsx

@@ -128,7 +128,7 @@ export default class TestTab<S, A extends Action<unknown>> extends Component<
     return (
       <Container>
         <Toolbar>
-          <div style={{ flexGrow: 1, zIndex: 10 }}>
+          <div style={{ flexGrow: 1 }}>
             <Select
               options={templates}
               getOptionValue={(template: Template) => template.name!}

packages/redux-devtools-inspector-monitor-trace-tab/package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@babel/code-frame": "^7.14.5",
-    "@types/chrome": "^0.0.155",
+    "@types/chrome": "^0.0.156",
     "anser": "^1.4.10",
     "html-entities": "^2.3.2",
     "redux-devtools-themes": "^1.0.0"

packages/redux-devtools-utils/src/filters.ts

@@ -10,8 +10,8 @@ interface State {
 
 export const FilterState = {
   DO_NOT_FILTER: 'DO_NOT_FILTER',
-  BLACKLIST_SPECIFIC: 'BLACKLIST_SPECIFIC',
+  DENYLIST_SPECIFIC: 'DENYLIST_SPECIFIC',
-  WHITELIST_SPECIFIC: 'WHITELIST_SPECIFIC',
+  ALLOWLIST_SPECIFIC: 'ALLOWLIST_SPECIFIC',
 };
 
 export function arrToRegex(v: string | string[]) {
@@ -41,20 +41,20 @@ function filterStates(
 }
 
 interface Config {
-  actionsBlacklist?: string[];
+  actionsDenylist?: string[];
-  actionsWhitelist?: string[];
+  actionsAllowlist?: string[];
 }
 
 interface LocalFilter {
-  whitelist?: string;
+  allowlist?: string;
-  blacklist?: string;
+  denylist?: string;
 }
 
 export function getLocalFilter(config: Config): LocalFilter | undefined {
-  if (config.actionsBlacklist || config.actionsWhitelist) {
+  if (config.actionsDenylist || config.actionsAllowlist) {
     return {
-      whitelist: config.actionsWhitelist && config.actionsWhitelist.join('|'),
+      allowlist: config.actionsAllowlist && config.actionsAllowlist.join('|'),
-      blacklist: config.actionsBlacklist && config.actionsBlacklist.join('|'),
+      denylist: config.actionsDenylist && config.actionsDenylist.join('|'),
     };
   }
   return undefined;
@@ -63,10 +63,10 @@ export function getLocalFilter(config: Config): LocalFilter | undefined {
 interface DevToolsOptions {
   filter?:
     | typeof FilterState.DO_NOT_FILTER
-    | typeof FilterState.BLACKLIST_SPECIFIC
+    | typeof FilterState.DENYLIST_SPECIFIC
-    | typeof FilterState.WHITELIST_SPECIFIC;
+    | typeof FilterState.ALLOWLIST_SPECIFIC;
-  whitelist?: string;
+  allowlist?: string;
-  blacklist?: string;
+  denylist?: string;
 }
 function getDevToolsOptions() {
   return (
@@ -90,12 +90,12 @@ export function isFiltered(
   )
     return false;
 
-  const { whitelist, blacklist } = localFilter || opts;
+  const { allowlist, denylist } = localFilter || opts;
   return (
     // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
-    (whitelist && !(type as string).match(whitelist)) ||
+    (allowlist && !(type as string).match(allowlist)) ||
     // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
-    (blacklist && (type as string).match(blacklist))
+    (denylist && (type as string).match(denylist))
   );
 }
 

yarn.lock

@@ -4674,7 +4674,7 @@ __metadata:
     "@redux-devtools/core": ^3.9.0
     "@redux-devtools/inspector-monitor": ^1.0.0
     "@types/babel__code-frame": ^7.0.3
-    "@types/chrome": ^0.0.155
+    "@types/chrome": ^0.0.156
     "@types/enzyme": ^3.10.9
     "@types/enzyme-adapter-react-16": ^1.0.6
     "@types/html-entities": ^1.3.4
@@ -6179,13 +6179,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/chrome@npm:^0.0.155":
+"@types/chrome@npm:^0.0.156":
-  version: 0.0.155
+  version: 0.0.156
-  resolution: "@types/chrome@npm:0.0.155"
+  resolution: "@types/chrome@npm:0.0.156"
   dependencies:
     "@types/filesystem": "*"
     "@types/har-format": "*"
-  checksum: bdded7b4548396933155ee2129d73a932971c1bf7e5a8bc53729d2bb438185621d1585d4b9d6cf4c7a7665b5f64d3d808bd9507eb5baeb0bc90907e3754be0dc
+  checksum: 4baca9bbd44a9af4e9e393ecd2d581838a3228bf73477eda7b0bc3b1ca382055e66e83458f5d95cc5fba47607ca9f8939ae22c7fcb0df6f9f733543cae76d1a5
   languageName: node
   linkType: hard