Move options to top-level

extension/src/background/index.ts

@@ -2,7 +2,7 @@ import { Store } from 'redux';
 import configureStore, { BackgroundAction } from './store/backgroundStore';
 import openDevToolsWindow, { DevToolsPosition } from './openWindow';
 import { createMenu, removeMenu } from './contextMenus';
-import syncOptions from '../browser/extension/options/syncOptions';
+import syncOptions from '../options/syncOptions';
 import { BackgroundState } from './store/backgroundReducer';
 
 declare global {

extension/src/background/store/apiMiddleware.ts

@@ -15,7 +15,7 @@ import syncOptions, {
   Options,
   OptionsMessage,
   SyncOptions,
-} from '../../browser/extension/options/syncOptions';
+} from '../../options/syncOptions';
 import openDevToolsWindow, { DevToolsPosition } from '../openWindow';
 import { getReport } from '../logging';
 import { Action, Dispatch, MiddlewareAPI } from 'redux';

extension/src/browser/extension/inject/contentScript.ts

@@ -2,7 +2,7 @@ import {
   injectOptions,
   getOptionsFromBg,
   isAllowed,
-} from '../options/syncOptions';
+} from '../../../options/syncOptions';
 import type { TabMessage } from '../../../background/store/apiMiddleware';
 import {
   PageScriptToContentScriptMessage,

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

@@ -28,7 +28,7 @@ import {
   Features,
 } from '@redux-devtools/app';
 import configureStore, { getUrlParam } from '../../../app/stores/enhancerStore';
-import { isAllowed, Options } from '../options/syncOptions';
+import { isAllowed, Options } from '../../../options/syncOptions';
 import Monitor from '../../../app/service/Monitor';
 import {
   noFiltersApplied,

extension/src/options/FilterGroup.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FilterState } from '../../../app/api/filters';
+import { FilterState } from '../app/api/filters';
 import { OptionsProps } from './Options';
 
 export default ({ options, saveOption }: OptionsProps) => {

extension/src/options/index.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import OptionsComponent from './Options';
 import { Options } from './syncOptions';
 
-import '../../views/options.pug';
+import './options.pug';
 
 chrome.runtime.getBackgroundPage((background) => {
   const syncOptions = background!.syncOptions;

extension/src/options/options.pug

@@ -1,93 +1,93 @@
-doctype html
+doctype html
-
+
-html
+html
-  head
+  head
-    meta(charset='UTF-8')
+    meta(charset='UTF-8')
-  title Redux DevTools Options
+  title Redux DevTools Options
-  style.
+  style.
-    body {
+    body {
-      padding: 2px;
+      padding: 2px;
-      min-width: 380px;
+      min-width: 380px;
-    }
+    }
-
+
-    .option-group {
+    .option-group {
-      /* Reset the default fieldset styles */
+      /* Reset the default fieldset styles */
-      margin: initial;
+      margin: initial;
-      border: initial;
+      border: initial;
-      padding: initial;
+      padding: initial;
-    }
+    }
-
+
-    .option-group + .option-group {
+    .option-group + .option-group {
-      margin-top: 30px;
+      margin-top: 30px;
-    }
+    }
-
+
-    .option-group__title {
+    .option-group__title {
-      /* Reset the default legend styles */
+      /* Reset the default legend styles */
-      margin: initial;
+      margin: initial;
-      padding: initial;
+      padding: initial;
-
+
-      margin-bottom: 8px;
+      margin-bottom: 8px;
-      font-weight: bold;
+      font-weight: bold;
-      font-size: 30px;
+      font-size: 30px;
-    }
+    }
-
+
-    .option + .option {
+    .option + .option {
-      margin-top: 5px;
+      margin-top: 5px;
-    }
+    }
-
+
-    .option__textarea {
+    .option__textarea {
-      margin-top: 2px;
+      margin-top: 2px;
-      width: 300px;
+      width: 300px;
-      min-height: 50px;
+      min-height: 50px;
-    }
+    }
-
+
-    .option__hint {
+    .option__hint {
-      margin-top: 2px;
+      margin-top: 2px;
-      font-size: 10px;
+      font-size: 10px;
-    }
+    }
-
+
-    .option__textarea + .option__hint {
+    .option__textarea + .option__hint {
-      margin-top: -2px;
+      margin-top: -2px;
-    }
+    }
-
+
-    /* Checkbox and radio styling */
+    /* Checkbox and radio styling */
-    .option_type_checkbox .option__element,
+    .option_type_checkbox .option__element,
-    .option_type_radio .option__element {
+    .option_type_radio .option__element {
-      vertical-align: bottom;
+      vertical-align: bottom;
-    }
+    }
-
+
-    .option_type_checkbox .option__label,
+    .option_type_checkbox .option__label,
-    .option_type_radio .option__label {
+    .option_type_radio .option__label {
-      margin-left: 4px;
+      margin-left: 4px;
-    }
+    }
-
+
-    .option_type_checkbox .option__textarea,
+    .option_type_checkbox .option__textarea,
-    .option_type_checkbox .option__hint,
+    .option_type_checkbox .option__hint,
-    .option_type_radio .option__textarea,
+    .option_type_radio .option__textarea,
-    .option_type_radio .option__hint {
+    .option_type_radio .option__hint {
-      margin-left: 20px;
+      margin-left: 20px;
-    }
+    }
-
+
-
+
-    /* Checkbox styling */
+    /* Checkbox styling */
-    .option_type_checkbox .option__element {
+    .option_type_checkbox .option__element {
-      /* Checkboxes in Chrome are 2px narrower than radio buttons.
+      /* Checkboxes in Chrome are 2px narrower than radio buttons.
-         These margins align them. */
+         These margins align them. */
-      margin-left: 1px;
+      margin-left: 1px;
-      /* ...margin-right is 2px instead of 1px
+      /* ...margin-right is 2px instead of 1px
-         because both radios and checkboxes have initial margin-right of 1px */
+         because both radios and checkboxes have initial margin-right of 1px */
-      margin-right: 2px;
+      margin-right: 2px;
-    }
+    }
-
+
-    /* Value-based styling */
+    /* Value-based styling */
-    .option_value_max-age {
+    .option_value_max-age {
-      margin-left: 20px;
+      margin-left: 20px;
-    }
+    }
-
+
-    .option_value_max-age .option__element {
+    .option_value_max-age .option__element {
-      width: 50px;
+      width: 50px;
-    }
+    }
-
+
-  body
+  body
-    #root
+    #root
-    script(src='/options.bundle.js')
+    script(src='/options.bundle.js')

extension/src/options/syncOptions.ts

@@ -1,4 +1,4 @@
-import { FilterState, FilterStateValue } from '../../../app/api/filters';
+import { FilterState, FilterStateValue } from '../app/api/filters';
 
 export interface Options {
   readonly useEditor: number;

extension/webpack/base.config.js

@@ -11,11 +11,11 @@ const baseConfig = (params) => ({
   mode: params.mode,
   entry: params.input || {
     background: [mock, '../src/background/index'],
-    options: [mock, `${extpath}options/index`],
+    options: [mock, '../src/options/index'],
     window: [`${extpath}window/index`],
     remote: [`${extpath}window/remote`],
     devpanel: [mock, '../src/devpanel/index'],
-    devtools: [`${extpath}devtools/index`],
+    devtools: ['../src/devtools/index'],
     content: [mock, `${extpath}inject/contentScript`],
     pagewrap: [`${extpath}inject/pageScriptWrap`],
     ...params.inputExtra,