From 3d8ed0b4102ef64ca2af7afa8af30ad11112a337 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <trysound@yandex.ru>
Date: Mon, 14 Oct 2024 16:13:34 +0300
Subject: [PATCH] experimental: add more hints about css variables

Ref https://github.com/webstudio-is/webstudio/issues/3399

Added a few hints
---
 .../panels/navigator/navigator-tree.tsx       | 22 ++++++++++++++++++-
 .../sections/advanced/advanced.tsx            |  4 ++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/builder/app/builder/features/sidebar-left/panels/navigator/navigator-tree.tsx b/apps/builder/app/builder/features/sidebar-left/panels/navigator/navigator-tree.tsx
index 746831a7d75..63144d4960d 100644
--- a/apps/builder/app/builder/features/sidebar-left/panels/navigator/navigator-tree.tsx
+++ b/apps/builder/app/builder/features/sidebar-left/panels/navigator/navigator-tree.tsx
@@ -10,6 +10,7 @@ import {
   ScrollArea,
   SmallIconButton,
   styled,
+  Text,
   theme,
   toast,
   Tooltip,
@@ -26,7 +27,11 @@ import {
   WsComponentMeta,
 } from "@webstudio-is/react-sdk";
 import { ROOT_INSTANCE_ID, type Instance } from "@webstudio-is/sdk";
-import { EyeconClosedIcon, EyeconOpenIcon } from "@webstudio-is/icons";
+import {
+  EyeconClosedIcon,
+  EyeconOpenIcon,
+  InfoCircleIcon,
+} from "@webstudio-is/icons";
 import {
   $dragAndDropState,
   $editingItemSelector,
@@ -476,6 +481,21 @@ export const NavigatorTree = () => {
               onClick: () => $selectedInstanceSelector.set([ROOT_INSTANCE_ID]),
               onFocus: () => $selectedInstanceSelector.set([ROOT_INSTANCE_ID]),
             }}
+            action={
+              <Tooltip
+                variant="wrapped"
+                side="bottom"
+                disableHoverableContent={true}
+                content={
+                  <Text>
+                    Variables defined on Global Root are available on every
+                    instance on every page.
+                  </Text>
+                }
+              >
+                <InfoCircleIcon />
+              </Tooltip>
+            }
           >
             <TreeNodeLabel prefix={<MetaIcon icon={rootMeta.icon} />}>
               {rootMeta.label}
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
index 70331256f32..bf97095f639 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -157,7 +157,7 @@ const AdvancedSearch = ({
       itemToString={(item) => item?.label ?? ""}
       getItemProps={() => ({ text: "sentence" })}
       getDescription={(item) => {
-        let description = `Unknown CSS property.`;
+        let description = `Create CSS variable.`;
         if (item && item.value in propertyDescriptions) {
           description =
             propertyDescriptions[
@@ -201,7 +201,7 @@ const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
       }}
       content={
         <PropertyInfo
-          title={label}
+          title={property.startsWith("--") ? "CSS Variable" : label}
           description={description}
           styles={[styleDecl]}
           onReset={() => {