allow resize of prop viewer

Author: RobPruzan

src/core/web/inspect-element/inspect-state-machine.ts

@@ -9,25 +9,26 @@ import {
   updateCanvasSize,
 } from './overlay';
 import { getCompositeComponentFromElement, hasValidParent } from './utils';
+import { restoreSizeFromLocalStorage } from '../toolbar';
 
 export type States =
   | {
-      kind: 'inspecting';
-      hoveredDomElement: HTMLElement | null;
-      propContainer: HTMLDivElement;
-    }
+    kind: 'inspecting';
+    hoveredDomElement: HTMLElement | null;
+    propContainer: HTMLDivElement;
+  }
   | {
-      kind: 'inspect-off';
-      propContainer: HTMLDivElement;
-    }
+    kind: 'inspect-off';
+    propContainer: HTMLDivElement;
+  }
   | {
-      kind: 'focused';
-      focusedDomElement: HTMLElement;
-      propContainer: HTMLDivElement;
-    }
+    kind: 'focused';
+    focusedDomElement: HTMLElement;
+    propContainer: HTMLDivElement;
+  }
   | {
-      kind: 'uninitialized';
-    };
+    kind: 'uninitialized';
+  };
 
 export const INSPECT_TOGGLE_ID = 'react-scan-inspect-element-toggle';
 export const INSPECT_OVERLAY_CANVAS_ID = 'react-scan-inspect-canvas';
@@ -191,6 +192,7 @@ export const createInspectElementStateMachine = () => {
 
               drawHoverOverlay(el as HTMLElement, canvas, ctx, 'locked');
 
+              restoreSizeFromLocalStorage(inspectState.propContainer)
               ReactScanInternals.inspectState = {
                 kind: 'focused',
                 focusedDomElement: el as HTMLElement,
@@ -255,13 +257,16 @@ export const createInspectElementStateMachine = () => {
               );
             });
             if (!document.contains(inspectState.focusedDomElement)) {
-              clearCanvas();
+              setTimeout(() => {
+
+                // potential race condition solution for some websites 
+                clearCanvas();
+              }, 500)
               inspectState.propContainer.style.maxHeight = '0';
               inspectState.propContainer.style.width = 'fit-content';
               inspectState.propContainer.innerHTML = '';
               ReactScanInternals.inspectState = {
-                kind: 'inspecting',
-                hoveredDomElement: null,
+                kind: 'inspect-off',
                 propContainer: inspectState.propContainer,
               };
               return;
@@ -333,7 +338,7 @@ export const createInspectElementStateMachine = () => {
               if (
                 adjustedX >= currentLockIconRect.x &&
                 adjustedX <=
-                  currentLockIconRect.x + currentLockIconRect.width &&
+                currentLockIconRect.x + currentLockIconRect.width &&
                 adjustedY >= currentLockIconRect.y &&
                 adjustedY <= currentLockIconRect.y + currentLockIconRect.height
               ) {

src/core/web/toolbar.ts

@@ -1,5 +1,5 @@
 import { ReactScanInternals } from '../../index';
-import { createElement } from './utils';
+import { createElement, throttle } from './utils';
 import { MONO_FONT } from './outline';
 import { INSPECT_TOGGLE_ID } from './inspect-element/inspect-state-machine';
 import {
@@ -8,6 +8,21 @@ import {
 } from './inspect-element/utils';
 
 let isDragging = false;
+let isResizing = false;
+let initialWidth = 0;
+let initialMouseX = 0;
+
+export const persistSizeToLocalStorage = throttle((width: number) => {
+  localStorage.setItem('react-scan-toolbar-width', String(width));
+}, 100);
+
+
+export const restoreSizeFromLocalStorage = (el: HTMLDivElement) => {
+  const width = localStorage.getItem('react-scan-toolbar-width');
+  el.style.width = `${width ?? 360}px`;
+
+};
+
 export const createToolbar = () => {
   if (typeof window === 'undefined') {
     return;
@@ -52,6 +67,7 @@ export const createToolbar = () => {
       overflow: hidden;
       width: fit-content;
       min-width: min-content;
+      position: relative;
     ">
       <div style="display: flex; align-items: center; height: 36px; width: 100%;">
         <button id="${INSPECT_TOGGLE_ID}" style="
@@ -136,13 +152,23 @@ export const createToolbar = () => {
         pointer-events: auto;
         background: #000;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
+        min-width: 100%;
         width: 360px;
         overflow: auto;
         max-height: 0;
         transition: max-height 500ms cubic-bezier(0, 0.95, 0.1, 1);
       ">
         <!-- Props content will be injected here -->
       </div>
+      <div id="react-scan-resize-handle" style="
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        cursor: ew-resize;
+        dis
+      "></div>
     </div>
   </div>
 `) as HTMLDivElement;
@@ -153,10 +179,12 @@ export const createToolbar = () => {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   }
 
+
   .react-scan-inspector {
     font-size: 13px;
     width: 360px;
     color: #fff;
+    width: 100%;
   }
 
   .react-scan-header {
@@ -388,6 +416,11 @@ export const createToolbar = () => {
   const toolbarContent = toolbar.querySelector<HTMLElement>(
     '#react-scan-toolbar-content',
   )!;
+  const resizeHandle = toolbar.querySelector<HTMLElement>(
+    '#react-scan-resize-handle',
+  )!;
+
+
 
   let isActive = !ReactScanInternals.isPaused;
 
@@ -408,7 +441,8 @@ export const createToolbar = () => {
     if (
       event.target === inspectBtn ||
       event.target === powerBtn ||
-      event.target === parentFocusBtn
+      event.target === parentFocusBtn ||
+      event.target === resizeHandle
     )
       return;
 
@@ -424,21 +458,38 @@ export const createToolbar = () => {
     event.preventDefault();
   });
 
+  resizeHandle.addEventListener('mousedown', (e) => {
+    isResizing = true;
+    initialWidth = propContainer.offsetWidth;
+    initialMouseX = e.clientX;
+    e.preventDefault();
+  });
+
   document.addEventListener('mousemove', (e) => {
-    if (!isDragging) return;
+    if (isDragging) {
+      const x = e.clientX - initialX;
+      const y = e.clientY - initialY;
 
-    const x = e.clientX - initialX;
-    const y = e.clientY - initialY;
+      currentX = x;
+      currentY = y;
+      updateToolbarPosition(x, y);
+    }
 
-    currentX = x;
-    currentY = y;
-    updateToolbarPosition(x, y);
+    if (isResizing) {
+      const width = initialWidth - (e.clientX - initialMouseX);
+      propContainer.style.width = `${Math.max(360, width)}px`;
+      persistSizeToLocalStorage(width);
+    }
   });
 
   document.addEventListener('mouseup', () => {
-    if (!isDragging) return;
-    isDragging = false;
-    toolbar.style.transition = '';
+    if (isDragging) {
+      isDragging = false;
+      toolbar.style.transition = '';
+    }
+    if (isResizing) {
+      isResizing = false;
+    }
   });
 
   const updateNavigationButtons = () => {
@@ -486,6 +537,9 @@ export const createToolbar = () => {
       propContainer.style.maxHeight = '0';
       propContainer.style.width = 'fit-content';
       propContainer.innerHTML = '';
+      resizeHandle.style.display = 'none';
+    } else if (focusActive) {
+      resizeHandle.style.display = 'block';
     }
 
     updateNavigationButtons();