[DevTools] Added resize support for Components panel.

[hristo-kanchev]

Summary

Adding support for resizing the components panel.

Changes are remembered when the user refreshes.

Solves: #17389

Demo:

Horizontal Resize:

Vertical Resize:

PS:
I saw something weird happening. I'm seeing vertical scroll bars in the components / inspected component areas.
This is happening as well in master so I am pretty sure that these changes aren't causing the issue. (Chrome / Firefox extension)

Can you check if it's happening for you as well @bvaughn ?
⚠️ Update: Now I'm not seeing the above issue. 🤷‍♂ Still it would be good if someone also checked. ⚠️

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 267f242:

Sandbox	Source
quirky-stonebraker-1yiww	Configuration

[sizebot]

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against 267f242

[sizebot]

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against 267f242

[hristo-kanchev]

I've added the changes, @bvaughn. If you want you can do a quick test run in this PR and tell me how it feels and if there are further changes needed? Cheers!

[bvaughn]

There was a with switching between orientations:

I took a pass at a fixing this and also tweaking a few other things:

1. Moving side effects out of the reducer
2. Moving inline things (like constants and the reducer) to module level
3. Lazily initialize reducer state from local storage
4. Tightening up the Flow types

...but I've run out of time- so I wanted to share my progress with you for your thoughts! 🙇

ComponentsResizer.js

import type {ElementRef} from 'react';

import * as React from 'react';
import {useEffect, useLayoutEffect, useReducer, useRef} from 'react';
import {
  localStorageGetItem,
  localStorageSetItem,
} from 'react-devtools-shared/src/storage';
import styles from './ComponentsResizer.css';

const LOCAL_STORAGE_KEY = 'React::DevTools::createResizeReducer';
const VERTICAL_MODE_MAX_WIDTH = 600;
const MINIMUM_SIZE = 50;

type Props = {|
  children: ({
    resizeElementRef: ElementRef<HTMLElement>,
    onResizeStart: () => void,
  }) => React$Node,
|};

export default function ComponentsResizer({children}: Props) {
  const wrapperElementRef = useRef<HTMLDivElement>(null);
  const resizeElementRef = useRef<HTMLElement>(null);
  const [state, dispatch] = createResizeReducer(
    wrapperElementRef,
    resizeElementRef,
  );

  const {isResizing} = state;

  const onResizeStart = () =>
    dispatch({type: 'ACTION_SET_IS_RESIZING', payload: true});
  const onResizeEnd = () =>
    dispatch({type: 'ACTION_SET_IS_RESIZING', payload: false});

  const onResize = event => {
    const resizeElement = resizeElementRef.current;
    const wrapperElement = wrapperElementRef.current;

    if (!isResizing || wrapperElement === null || resizeElement === null) {
      return;
    }

    event.preventDefault();

    const orientation = getOrientation(wrapperElementRef);

    const {height, width, left, top} = wrapperElement.getBoundingClientRect();

    const currentMousePosition =
      orientation === 'horizontal' ? event.clientX - left : event.clientY - top;

    const boundaryMin = MINIMUM_SIZE;
    const boundaryMax =
      orientation === 'horizontal'
        ? width - MINIMUM_SIZE
        : height - MINIMUM_SIZE;

    const isMousePositionInBounds =
      currentMousePosition > boundaryMin && currentMousePosition < boundaryMax;

    if (isMousePositionInBounds) {
      const resizedElementDimension =
        orientation === 'horizontal' ? width : height;
      const actionType =
        orientation === 'horizontal'
          ? 'ACTION_SET_HORIZONTAL_PERCENTAGE'
          : 'ACTION_SET_VERTICAL_PERCENTAGE';

      resizeElement.style.flexBasis = `${(currentMousePosition /
        resizedElementDimension) *
        100}%`;

      dispatch({
        type: actionType,
        payload: currentMousePosition / resizedElementDimension,
      });
    }
  };

  return (
    <div
      ref={wrapperElementRef}
      className={styles.ComponentsWrapper}
      {...(isResizing && {
        onMouseMove: onResize,
        onMouseLeave: onResizeEnd,
        onMouseUp: onResizeEnd,
      })}>
      {children({resizeElementRef, onResizeStart})}
    </div>
  );
}

type Orientation = 'horizontal' | 'vertical';

type ResizeActionType =
  | 'ACTION_SET_DID_MOUNT'
  | 'ACTION_SET_IS_RESIZING'
  | 'ACTION_SET_HORIZONTAL_PERCENTAGE'
  | 'ACTION_SET_VERTICAL_PERCENTAGE';

type ResizeAction = {|
  type: ResizeActionType,
  payload: any,
|};

type ResizeState = {|
  horizontalPercentage: number,
  isResizing: boolean,
  verticalPercentage: number,
|};

function initResizeState(): ResizeState {
  let horizontalPercentage = 0.65;
  let verticalPercentage = 0.5;

  try {
    let data = localStorageGetItem(LOCAL_STORAGE_KEY);
    if (data != null) {
      data = JSON.parse(data);
      horizontalPercentage = data.horizontalPercentage;
      verticalPercentage = data.verticalPercentage;
    }
  } catch (error) {}

  return {
    horizontalPercentage,
    isResizing: false,
    verticalPercentage,
  };
}

function resizeReducer(state: ResizeState, action: ResizeAction): ResizeState {
  switch (action.type) {
    case 'ACTION_SET_IS_RESIZING':
      return {
        ...state,
        isResizing: action.payload,
      };
    case 'ACTION_SET_HORIZONTAL_PERCENTAGE':
      return {
        ...state,
        horizontalPercentage: action.payload,
      };
    case 'ACTION_SET_VERTICAL_PERCENTAGE':
      return {
        ...state,
        verticalPercentage: action.payload,
      };
    default:
      return state;
  }
}

function getOrientation(
  wrapperElementRef: ElementRef<HTMLElement>,
): null | Orientation {
  const wrapperElement = wrapperElementRef.current;
  if (wrapperElement != null) {
    const {width} = wrapperElement.getBoundingClientRect();
    return width > VERTICAL_MODE_MAX_WIDTH ? 'horizontal' : 'vertical';
  }
  return null;
}

function createResizeReducer(wrapperElementRef, resizeElementRef) {
  const [state, dispatch] = useReducer<ResizeState, ResizeAction>(
    resizeReducer,
    null,
    initResizeState,
  );
  const {horizontalPercentage, verticalPercentage} = state;
  const orientationRef = useRef(null);

  useLayoutEffect(() => {
    const orientation = getOrientation(wrapperElementRef);

    if (orientation !== orientationRef.current) {
      orientationRef.current = orientation;

      const percentage =
        orientation === 'horizontal'
          ? horizontalPercentage
          : verticalPercentage;
      const resizeElement = resizeElementRef.current;
      resizeElement.style.flexBasis = `${percentage * 100}%`;
    }
  });

  useEffect(() => {
    const timeoutID = setTimeout(() => {
      localStorageSetItem(
        LOCAL_STORAGE_KEY,
        JSON.stringify({
          horizontalPercentage,
          verticalPercentage,
        }),
      );
    }, 500);

    return () => clearTimeout(timeoutID);
  }, [horizontalPercentage, verticalPercentage]);

  return [state, dispatch];
}

The one thing that isn't working right as of yet is that orientation changes (when you resize to go from horizontal to vertical or vice versa) don't trigger any effects, since they don't trigger any state change. Have not thought enough about how to handle this. Thoughts?

[hristo-kanchev]

...but I've run out of time- so I wanted to share my progress with you for your thoughts! 🙇

The one thing that isn't working right as of yet is that orientation changes (when you resize to go from horizontal to vertical or vice versa) don't trigger any effects, since they don't trigger any state change. Have not thought enough about how to handle this. Thoughts?

Oh wow, thanks for the improvements! I'll try and put some time aside during the work week to figure out the orientation changes issue.
I should have something in the PR by the end of the week.

I'll ping you again when it's ready for another round of reviews.

Thanks Brian!

[bvaughn]

No worries at all! Thanks for helping with this! 🙇

[hristo-kanchev]

We are now setting css variables based on the orientation.

Possible values:
--horizontal-resize-percentage
--vertical-resize-percentage

We use these two variables in CSS to determine the correct resize percentage based on the orientation using the media query that we have set up there. 🎊

I initially thought of using a ResizeObserver but it's far too complex, I think. 🙅‍♂

This was the cleanest solution that I could come up with.

Thoughts, @bvaughn ?

P.S.:
When you test this make sure you have cleaned your previous resize values in the local storage or you will initially see some funky behavior when you first resize. (This only happens if you have anything set).

[hristo-kanchev]

Hiya @bvaughn!

I managed to find some time yesterday evening to address the issue that you highlighted.

Can you please check again? (I've incorporated the suggested changes that you highlighted as well 😍 )

[bvaughn]

Looks like the issue of orientation changing still exists. Resizing between orientations often leaves the size set for the wrong orientation.

[hristo-kanchev]

Ahh.. I saw the issue..

It was happening because we weren't reading and setting the data from the local storage for both the vertical and horizontal orientations on initial mount.

Sorry to bother you again, but can you please check again, @bvaughn ?

[bvaughn]

Overall this looks great now. Thanks!

[hristo-kanchev]

Happy to help, Brian! Thanks for the support!

[bvaughn]

FYI this change has just been released to Chrome/Firefox/Edge/NPM in] version 4.5.

https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#450-march-3-2020

Thank you!

[codercodingthecode]

Thanks for all your work, this is an awesome and much-awaited feature to have!!!