4.0.4 - small improvements

Author: AlemTuzlak

package.json

@@ -2,7 +2,7 @@
   "name": "remix-development-tools",
   "description": "Remix development tools - a set of tools for developing/debugging Remix.run apps",
   "author": "Alem Tuzlak",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "license": "MIT",
   "keywords": [
     "remix",

src/client/RemixDevTools.tsx

@@ -37,6 +37,8 @@ const DevTools = ({ plugins: pluginArray }: RemixDevToolsProps) => {
   useDevServerConnection();
   useOpenElementSource();
   useListenToRouteChange();
+  
+  const { setPersistOpen } = usePersistOpen();
   const url = useLocation().search;
   const { detachedWindowOwner, isDetached, setDetachedWindowOwner } = useDetachedWindowControls();
   const { settings } = useSettingsContext();
@@ -45,7 +47,7 @@ const DevTools = ({ plugins: pluginArray }: RemixDevToolsProps) => {
   const [isOpen, setIsOpen] = useState(isDetached || settings.defaultOpen || persistOpen);
   const leftSideOriented = position.includes("left");
   const plugins = pluginArray?.map((plugin) => (typeof plugin === "function" ? plugin() : plugin));
-  const debounceSetOpen = useDebounce(() => setIsOpen(!isOpen), 100);
+  const debounceSetOpen = useDebounce(() => {setIsOpen(!isOpen); setPersistOpen(!isOpen)}, 100);
   useAttachBodyListener("keydown", (e: any) => { 
 
     if(isOpen && e.key === "Escape"){
@@ -55,6 +57,7 @@ const DevTools = ({ plugins: pluginArray }: RemixDevToolsProps) => {
       debounceSetOpen();
     }
   });
+
   if (settings.requireUrlFlag && !url.includes(settings.urlFlag)) return null;
   // If the dev tools are detached, we don't want to render the main panel
   if (detachedWindowOwner) {

src/client/tabs/SettingsTab.tsx

@@ -29,11 +29,11 @@ export const SettingsTab = () => {
       </Checkbox>
       <Checkbox
         id="requireUrlFlag"
-        hint="Allows you to only show rdt when there is a flag in the URL search params set."
+        hint={`Allows you to only show rdt when there is a flag in the URL search params set. (${settings.urlFlag}=true)`}
         onChange={() => setSettings({ requireUrlFlag: !settings.requireUrlFlag })}
         value={settings.requireUrlFlag}
       >
-        Show dev tools only when URL flag is set
+        Show dev tools only when URL flag is set ?{settings.urlFlag}=true
       </Checkbox>
       <Checkbox
         id="hideUntilHover"

src/input.css

@@ -169,7 +169,7 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
   /* 1 */
   line-height: inherit;
   /* 1 */
-  color: inherit;
+  color: initial;
   /* 1 */
   margin: 0;
   /* 2 */