experimental: Advanced style panel mode

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/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/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;