From b839e3fa4cec7898dd49989c3bf1bbd74e96bbfc Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Tue, 17 Dec 2024 09:00:50 +0000
Subject: [PATCH] fix: improve complex value detection to show maximize button
 (#4602)

## Description

Added a bunch of other value types for which we show maximize button in
css value input

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 .../css-value-input/css-value-input.tsx       | 33 ++++++++++---------
 .../css-value-input/value-editor-dialog.tsx   | 24 +++++++++++++-
 2 files changed, 41 insertions(+), 16 deletions(-)

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
index 34785afbe2..1a34223326 100644
--- 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
@@ -53,7 +53,11 @@ import { mergeRefs } from "@react-aria/utils";
 import { composeEventHandlers } from "~/shared/event-utils";
 import type { StyleValueSourceColor } from "~/shared/style-object-model";
 import { ColorThumb } from "../color-thumb";
-import { cssButtonDisplay, ValueEditorDialog } from "./value-editor-dialog";
+import {
+  cssButtonDisplay,
+  isComplexValue,
+  ValueEditorDialog,
+} from "./value-editor-dialog";
 
 // We need to enable scrub on properties that can have numeric value.
 const canBeNumber = (property: StyleProperty, value: CssValueInputValue) => {
@@ -822,20 +826,19 @@ export const CssValueInput = ({
   );
 
   const suffixRef = useRef<HTMLDivElement | null>(null);
-  const valueEditorButtonElement =
-    value.type === "unparsed" ? (
-      <ValueEditorDialog
-        property={property}
-        value={inputProps.value}
-        onChangeComplete={(value) => {
-          onChangeComplete({
-            type: "dialog-change-complete",
-            value,
-            close: false,
-          });
-        }}
-      />
-    ) : undefined;
+  const valueEditorButtonElement = isComplexValue(value) ? (
+    <ValueEditorDialog
+      property={property}
+      value={inputProps.value}
+      onChangeComplete={(value) => {
+        onChangeComplete({
+          type: "dialog-change-complete",
+          value,
+          close: false,
+        });
+      }}
+    />
+  ) : undefined;
   const invalidValueElement = value.type === "invalid" ? <></> : undefined;
   const suffixElement =
     invalidValueElement ??
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/value-editor-dialog.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/value-editor-dialog.tsx
index 55c690db56..ebe5badc33 100644
--- a/apps/builder/app/builder/features/style-panel/shared/css-value-input/value-editor-dialog.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/css-value-input/value-editor-dialog.tsx
@@ -7,7 +7,10 @@ import { MaximizeIcon } from "@webstudio-is/icons";
 import { useEffect, useRef, useState } from "react";
 import { EditorDialog } from "~/builder/shared/code-editor-base";
 import { CssFragmentEditorContent } from "../css-fragment";
-import type { IntermediateStyleValue } from "./css-value-input";
+import type {
+  CssValueInputValue,
+  IntermediateStyleValue,
+} from "./css-value-input";
 import {
   type InvalidValue,
   type StyleProperty,
@@ -17,6 +20,25 @@ import { parseIntermediateOrInvalidValue } from "./parse-intermediate-or-invalid
 
 export const cssButtonDisplay = "--ws-css-value-input-maximize-button-display";
 
+// Hand-picking values that are considered complex and should get a maximize button for the dialog.
+// Not showing the maximize everywhere because most values don't need that and it takes space.
+export const isComplexValue = (value: CssValueInputValue) => {
+  if (value.type === "unparsed" || value.type === "function") {
+    return true;
+  }
+
+  if (value.type === "tuple" || value.type === "layers") {
+    for (const nestedValue of value.value) {
+      const nestedValueIsComplex = isComplexValue(nestedValue);
+      if (nestedValueIsComplex) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+
 const width = parseFloat(rawTheme.sizes.sidebarWidth);
 
 export const ValueEditorDialog = ({