refactor: improve advanced section performance (#4215)

TrySound · web-flow · commit 0ceaac9ba8aa · 2024-10-04T17:17:41.000+03:00
Ref #3399 Here did a few things to improve performance of advanced panel with hundreds if css variables. - remove unused dom elements - replaced field-sizing polyfill with css property which is supported in chrome since March Here's perf stats from local test, both scripting and rendering cut 1s each ![Screenshot 2024-10-04 at 13 31 13](https://github.com/user-attachments/assets/122969f4-1ed8-4cc5-a7e9-8070c6d9bf2d) ![Screenshot 2024-10-04 at 14 20 55](https://github.com/user-attachments/assets/ceff3221-4b63-4467-a7de-cd845e2b351a) Here's the result in branch preview ![Screenshot 2024-10-04 at 14 30 19](https://github.com/user-attachments/assets/97939e31-9eba-465e-888c-ed89aa0d1205) ![Screenshot 2024-10-04 at 14 31 22](https://github.com/user-attachments/assets/dc3d116e-fef7-4e31-b054-17107e160590)
diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -176,41 +176,37 @@ const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
     styleDecl.source.name === "default" ? "code" : styleDecl.source.name;
   const [isOpen, setIsOpen] = useState(false);
   return (
-    <Flex align="center">
-      <Tooltip
-        open={isOpen}
-        onOpenChange={setIsOpen}
-        // prevent closing tooltip on content click
-        onPointerDown={(event) => event.preventDefault()}
-        triggerProps={{
-          onClick: (event) => {
-            if (event.altKey) {
-              event.preventDefault();
-              deleteProperty(property);
-              return;
-            }
-            setIsOpen(true);
-          },
-        }}
-        content={
-          <PropertyInfo
-            title={label}
-            description={description}
-            styles={[styleDecl]}
-            onReset={() => {
-              deleteProperty(property);
-              setIsOpen(false);
-            }}
-          />
-        }
-      >
-        <Flex shrink gap={1} align="center">
-          <Label color={color} text="mono" truncate>
-            {label}
-          </Label>
-        </Flex>
-      </Tooltip>
-    </Flex>
+    <Tooltip
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      // prevent closing tooltip on content click
+      onPointerDown={(event) => event.preventDefault()}
+      triggerProps={{
+        onClick: (event) => {
+          if (event.altKey) {
+            event.preventDefault();
+            deleteProperty(property);
+            return;
+          }
+          setIsOpen(true);
+        },
+      }}
+      content={
+        <PropertyInfo
+          title={label}
+          description={description}
+          styles={[styleDecl]}
+          onReset={() => {
+            deleteProperty(property);
+            setIsOpen(false);
+          }}
+        />
+      }
+    >
+      <Label color={color} text="mono">
+        {label}
+      </Label>
+    </Tooltip>
   );
 };
 
@@ -374,7 +370,7 @@ export const Section = () => {
       )}
       <Box>
         {advancedProperties.map((property) => (
-          <Flex key={property} wrap="wrap" align="center">
+          <Flex key={property} wrap="wrap" align="center" justify="start">
             <AdvancedPropertyLabel property={property} />
             <Text>:</Text>
             <AdvancedPropertyValue
diff --git a/apps/builder/app/builder/features/style-panel/sections/borders/border-property.tsx b/apps/builder/app/builder/features/style-panel/sections/borders/border-property.tsx
@@ -1,12 +1,7 @@
 import { type ReactNode } from "react";
 import type { StyleProperty } from "@webstudio-is/css-engine";
 import { toValue } from "@webstudio-is/css-engine";
-import {
-  Box,
-  Grid,
-  NestedIconLabel,
-  ToggleButton,
-} from "@webstudio-is/design-system";
+import { Box, Grid, ToggleButton } from "@webstudio-is/design-system";
 import { CssValueInputContainer } from "../../shared/css-value-input";
 import { styleConfigByName } from "../../shared/configs";
 import { rowCss } from "./utils";
@@ -124,12 +119,7 @@ export const BorderProperty = ({
             <CssValueInputContainer
               key={styleDecl.property}
               icon={
-                <NestedIconLabel>
-                  {
-                    borderPropertyOptions[styleDecl.property as StyleProperty]
-                      ?.icon
-                  }
-                </NestedIconLabel>
+                borderPropertyOptions[styleDecl.property as StyleProperty]?.icon
               }
               property={styleDecl.property as StyleProperty}
               styleSource={styleDecl.source.name}
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx
@@ -1,6 +1,5 @@
 import { type ComponentProps, useState } from "react";
 import type { StyleValue } from "@webstudio-is/css-engine";
-import { Box } from "@webstudio-is/design-system";
 import { CssValueInput, type IntermediateStyleValue } from "./css-value-input";
 import type { DeleteProperty, SetValue } from "../use-style-data";
 
@@ -28,39 +27,37 @@ export const CssValueInputContainer = ({
   >();
 
   return (
-    <Box>
-      <CssValueInput
-        {...props}
-        property={property}
-        intermediateValue={intermediateValue}
-        keywords={keywords}
-        onChange={(styleValue) => {
-          setIntermediateValue(styleValue);
+    <CssValueInput
+      {...props}
+      property={property}
+      intermediateValue={intermediateValue}
+      keywords={keywords}
+      onChange={(styleValue) => {
+        setIntermediateValue(styleValue);
 
-          if (styleValue === undefined) {
-            deleteProperty(property, { isEphemeral: true });
-            return;
-          }
+        if (styleValue === undefined) {
+          deleteProperty(property, { isEphemeral: true });
+          return;
+        }
 
-          if (styleValue.type !== "intermediate") {
-            setValue(styleValue, { isEphemeral: true });
-          }
-        }}
-        onHighlight={(styleValue) => {
-          if (styleValue !== undefined) {
-            setValue(styleValue, { isEphemeral: true });
-          } else {
-            deleteProperty(property, { isEphemeral: true });
-          }
-        }}
-        onChangeComplete={({ value }) => {
-          setValue(value);
-          setIntermediateValue(undefined);
-        }}
-        onAbort={() => {
+        if (styleValue.type !== "intermediate") {
+          setValue(styleValue, { isEphemeral: true });
+        }
+      }}
+      onHighlight={(styleValue) => {
+        if (styleValue !== undefined) {
+          setValue(styleValue, { isEphemeral: true });
+        } else {
           deleteProperty(property, { isEphemeral: true });
-        }}
-      />
-    </Box>
+        }
+      }}
+      onChangeComplete={({ value }) => {
+        setValue(value);
+        setIntermediateValue(undefined);
+      }}
+      onAbort={() => {
+        deleteProperty(property, { isEphemeral: true });
+      }}
+    />
   );
 };
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx
@@ -692,8 +692,8 @@ export const CssValueInput = ({
 
   return (
     <ComboboxRoot open={isOpen}>
-      <Box {...getComboboxProps()} css={{ width: "100%" }}>
-        <ComboboxAnchor>
+      <Box {...getComboboxProps()}>
+        <ComboboxAnchor asChild>
           <InputField
             size={size}
             variant={variant}
@@ -716,7 +716,7 @@ export const CssValueInput = ({
             color={value.type === "invalid" ? "error" : undefined}
             prefix={finalPrefix}
             suffix={suffix}
-            css={{ cursor: "default", minWidth: "3em" }}
+            css={{ cursor: "default", minWidth: "2em" }}
             text={text}
           />
         </ComboboxAnchor>
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -65,7 +65,6 @@
     "change-case": "^5.4.4",
     "downshift": "^6.1.7",
     "match-sorter": "^6.3.4",
-    "react-field-sizing-content": "^1.0.0",
     "react-hot-toast": "^2.4.1",
     "token-transformer": "^0.0.28",
     "use-debounce": "^9.0.4",
diff --git a/packages/design-system/src/components/input-field.tsx b/packages/design-system/src/components/input-field.tsx
@@ -17,10 +17,6 @@ import { css, theme, type CSS } from "../stitches.config";
 import { ArrowFocus } from "./primitives/arrow-focus";
 import { mergeRefs } from "@react-aria/utils";
 import { useFocusWithin } from "@react-aria/interactions";
-import {
-  type InputProps as InputWithFieldSizingProps,
-  Input as InputWithFieldSizing,
-} from "react-field-sizing-content";
 
 // we only support types that behave more or less like a regular text input
 export const inputFieldTypes = [
@@ -66,6 +62,14 @@ const inputStyle = css({
       regular: textVariants.regular,
       mono: textVariants.mono,
     },
+    fieldSizing: {
+      content: {
+        fieldSizing: "content",
+      },
+      fixed: {
+        fieldSizing: "fixed",
+      },
+    },
   },
   defaultVariants: {
     text: "regular",
@@ -193,42 +197,26 @@ const Container = forwardRef(
 );
 Container.displayName = "Container";
 
-type InputProps = {
-  type?: (typeof inputFieldTypes)[number];
-  color?: (typeof inputFieldColors)[number];
-  css?: CSS;
-  text?: "regular" | "mono";
-} & Omit<InputWithFieldSizingProps, "prefix" | "onFocus" | "onBlur" | "size">;
-
-const Input = forwardRef(
-  (
-    { css, className, color, disabled = false, text, ...props }: InputProps,
-    ref: Ref<HTMLInputElement>
-  ) => {
-    return (
-      <InputWithFieldSizing
-        {...props}
-        spellCheck={false}
-        data-input-field-input // to distinguish from potential other inputs in prefix/suffix
-        data-color={color}
-        disabled={disabled}
-        className={inputStyle({ className, css, text })}
-        ref={ref}
-      />
-    );
-  }
-);
-Input.displayName = "Input";
+type InputProps = Omit<
+  ComponentProps<"input">,
+  "onFocus" | "onBlur" | "prefix" | "size"
+> & {
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
+};
 
 type InputFieldProps = {
   prefix?: ReactNode;
   suffix?: ReactNode;
   containerRef?: Ref<HTMLDivElement>;
   inputRef?: Ref<HTMLInputElement>;
-  onFocus?: FocusEventHandler;
-  onBlur?: FocusEventHandler;
   variant?: "chromeless";
   size?: "1" | "2" | "3";
+  type?: (typeof inputFieldTypes)[number];
+  color?: (typeof inputFieldColors)[number];
+  css?: CSS;
+  text?: "regular" | "mono";
+  fieldSizing?: "content" | "fixed";
 };
 
 export const InputField = forwardRef(
@@ -244,6 +232,9 @@ export const InputField = forwardRef(
       onBlur,
       variant,
       size,
+      color,
+      text,
+      fieldSizing,
       onKeyDown,
       ...inputProps
     }: InputProps & InputFieldProps,
@@ -283,7 +274,15 @@ export const InputField = forwardRef(
           // When managing focus with ArrowFocus, we don't want to focus this element.
           data-no-arrow-focus
         />
-        <Input {...inputProps} onKeyDown={handleKeyDown} ref={inputRef} />
+        <input
+          {...inputProps}
+          ref={inputRef}
+          spellCheck={false}
+          data-input-field-input // to distinguish from potential other inputs in prefix/suffix
+          data-color={color}
+          className={inputStyle({ className, css, text, fieldSizing })}
+          onKeyDown={handleKeyDown}
+        />
       </Container>
     );
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
