experimental: Advanced style panel mode (#4840)

#4816

## Description

- [x] added switch
- [x] full-size advaned panel

## Steps for reproduction

1. click button
3. 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

apps/builder/app/builder/features/inspector/inspector.tsx

@@ -33,7 +33,6 @@ import { getInstanceLabel } from "~/shared/instance-utils";
 import { BindingPopoverProvider } from "~/builder/shared/binding-popover";
 import { $activeInspectorPanel } from "~/builder/shared/nano-states";
 import { $selectedInstance, $selectedPage } from "~/shared/awareness";
-import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 
 const InstanceInfo = ({ instance }: { instance: Instance }) => {
   const metas = useStore($registeredComponentMetas);
@@ -177,7 +176,7 @@ export const Inspector = ({ navigatorLayout }: InspectorProps) => {
                   }}
                 >
                   <InstanceInfo instance={selectedInstance} />
-                  {isFeatureEnabled("stylePanelModes") && <ModeMenu />}
+                  <ModeMenu />
                 </Flex>
                 <StylePanel />
               </PanelTabsContent>

apps/builder/app/builder/features/navigator/css-preview.tsx

@@ -28,15 +28,15 @@ const preStyle = css(textVariants.mono, {
 // - Compiles a CSS string from the style engine
 // - Groups by category and separates categories with comments
 const getCssText = (
-  computedStyles: ComputedStyleDecl[],
+  definedComputedStyles: ComputedStyleDecl[],
   instanceId: string
 ) => {
   const sourceStyles: StyleMap = new Map();
   const cascadedStyles: StyleMap = new Map();
   const presetStyles: StyleMap = new Map();
 
   // Aggregate styles by category so we can group them when rendering.
-  for (const styleDecl of computedStyles) {
+  for (const styleDecl of definedComputedStyles) {
     const property = hyphenateProperty(styleDecl.property) as StyleProperty;
     let group;
     if (
@@ -77,15 +77,19 @@ const getCssText = (
 
 const $highlightedCss = computed(
   [$selectedInstance, $definedComputedStyles],
-  (instance, computedStyles) => {
+  (instance, definedComputedStyles) => {
     if (instance === undefined) {
       return;
     }
-    const cssText = getCssText(computedStyles, instance.id);
+    const cssText = getCssText(definedComputedStyles, instance.id);
     return highlightCss(cssText);
   }
 );
 
+/**
+ * Will be deleted soon in favor of advanced panel as soon as it has ability to select.
+ * @deprecated
+ */
 export const CssPreview = () => {
   const code = useStore($highlightedCss);
   if (code === undefined) {

apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx

@@ -72,6 +72,7 @@ import {
 } from "~/shared/nano-states";
 import { useClientSupports } from "~/shared/client-supports";
 import { $selectedInstancePath } from "~/shared/awareness";
+import { $settings } from "~/builder/shared/client-settings";
 
 // Only here to keep the same section module interface
 export const properties = [];
@@ -381,8 +382,16 @@ const $advancedProperties = computed(
     $styleSourceSelections,
     $matchingBreakpoints,
     $styles,
+    $settings,
   ],
-  (instancePath, metas, styleSourceSelections, matchingBreakpoints, styles) => {
+  (
+    instancePath,
+    metas,
+    styleSourceSelections,
+    matchingBreakpoints,
+    styles,
+    settings
+  ) => {
     if (instancePath === undefined) {
       return [];
     }
@@ -402,6 +411,11 @@ const $advancedProperties = computed(
     }
     const advancedProperties = new Set<StyleProperty>(initialProperties);
     for (const { property, listed } of definedStyles) {
+      // In advanced mode we show all defined properties
+      if (settings.stylePanelMode === "advanced") {
+        advancedProperties.add(property);
+        continue;
+      }
       // exclude properties from style panel UI unless edited in advanced section
       if (baseProperties.has(property) === false || listed) {
         advancedProperties.add(property);

apps/builder/app/builder/features/style-panel/shared/model.tsx

@@ -240,6 +240,10 @@ const $model = computed(
   }
 );
 
+/**
+ * Will be deleted along with CSS Preview.
+ * @deprecated
+ */
 export const $definedComputedStyles = computed(
   [
     $definedStyles,

apps/builder/app/builder/features/style-panel/style-panel.tsx

@@ -35,6 +35,7 @@ import {
   type Settings,
 } from "~/builder/shared/client-settings";
 import { useState } from "react";
+import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 
 const $selectedInstanceTag = computed(
   [$selectedInstance, $instanceTags],
@@ -83,10 +84,15 @@ export const ModeMenu = () => {
               <Text>Focus mode</Text> <Kbd value={["alt", "shift", "s"]} />
             </Flex>
           </DropdownMenuRadioItem>
-          {/*
-          <DropdownMenuRadioItem value="advanced" icon={<MenuCheckedIcon />}>
-            Advanced mode
-          </DropdownMenuRadioItem> */}
+          {isFeatureEnabled("stylePanelAdvancedMode") && (
+            <DropdownMenuRadioItem
+              value="advanced"
+              icon={<MenuCheckedIcon />}
+              onFocus={() => setFocusedValue("advanced")}
+            >
+              Advanced mode
+            </DropdownMenuRadioItem>
+          )}
         </DropdownMenuRadioGroup>
         <DropdownMenuSeparator />
 
@@ -100,6 +106,9 @@ export const ModeMenu = () => {
             Only one section is open at a time.
           </DropdownMenuItem>
         )}
+        {focusedValue === "advanced" && (
+          <DropdownMenuItem hint>Advanced section only.</DropdownMenuItem>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );
@@ -128,6 +137,10 @@ export const StylePanel = () => {
   const all = [];
 
   for (const [category, { Section }] of sections.entries()) {
+    // In advanced mode we only need to show advanced panel
+    if (stylePanelMode === "advanced" && category !== "advanced") {
+      continue;
+    }
     // show flex child UI only when parent is flex or inline-flex
     if (category === "flexChild" && displayValue.includes("flex") === false) {
       continue;

packages/feature-flags/src/flags.ts

@@ -9,4 +9,4 @@ export const staticExport = false;
 export const contentEditableMode = false;
 export const command = false;
 export const headSlotComponent = false;
-export const stylePanelModes = false;
+export const stylePanelAdvancedMode = false;