Show in popover where remote style comes from (#715)

Ref https://github.com/webstudio-is/webstudio-designer/issues/29

Here added info in popover where cascaded and inherited styles come
from.

<img width="304" alt="Screenshot 2022-12-28 at 14 47 01"
src="https://user-images.githubusercontent.com/5635476/209816321-edeebc17-c905-497e-8501-f5eb02103c60.png">
<img width="243" alt="Screenshot 2022-12-28 at 14 47 07"
src="https://user-images.githubusercontent.com/5635476/209816325-abdc766d-f8cb-415d-b784-ed70940aa150.png">
<img width="281" alt="Screenshot 2022-12-28 at 14 47 19"
src="https://user-images.githubusercontent.com/5635476/209816327-cc5bc70b-3c76-4273-867b-b13c32c1522a.png">
<img width="268" alt="Screenshot 2022-12-28 at 14 47 47"
src="https://user-images.githubusercontent.com/5635476/209816329-dd2d674f-39bd-4565-ab43-249c853909b3.png">

apps/designer/app/designer/features/style-panel/shared/property-name.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import type { StyleProperty } from "@webstudio-is/css-data";
+import { toValue } from "@webstudio-is/css-engine";
 import {
   Button,
   Flex,
@@ -14,8 +15,109 @@ import {
   Separator,
 } from "@webstudio-is/design-system";
 import { UndoIcon } from "@webstudio-is/icons";
+import { utils } from "@webstudio-is/project";
 import { isFeatureEnabled } from "~/shared/feature-flags";
-import { getStyleSource, StyleInfo } from "./style-info";
+import { useBreakpoints, useRootInstance } from "~/shared/nano-states";
+import { type StyleInfo, type StyleSource, getStyleSource } from "./style-info";
+
+const PropertyPopoverContent = ({
+  properties,
+  style,
+  styleSource,
+  onReset,
+}: {
+  properties: StyleProperty[];
+  style: StyleInfo;
+  styleSource: StyleSource;
+  onReset: () => void;
+}) => {
+  const [breakpoints] = useBreakpoints();
+  const [rootInstance] = useRootInstance();
+
+  if (styleSource === "local") {
+    return (
+      <>
+        <Flex align="start" css={{ px: "$spacing$4", py: "$spacing$3" }}>
+          <Button onClick={onReset}>
+            <UndoIcon /> &nbsp; Reset
+          </Button>
+        </Flex>
+        <Separator />
+        <Box css={{ px: "$spacing$4", py: "$spacing$3" }}>
+          {properties.map((property) => {
+            const styleValueInfo = style[property];
+
+            if (styleValueInfo?.cascaded) {
+              const { value, breakpointId } = styleValueInfo.cascaded;
+              const breakpoint = breakpoints.find(
+                (item) => item.id === breakpointId
+              );
+              return (
+                <Text key={property} color="hint">
+                  Resetting will change {property} to cascaded {toValue(value)}{" "}
+                  from {breakpoint?.label}
+                </Text>
+              );
+            }
+
+            if (styleValueInfo?.inherited) {
+              const { value, instanceId } = styleValueInfo.inherited;
+              const instance =
+                rootInstance === undefined
+                  ? undefined
+                  : utils.tree.findInstanceById(rootInstance, instanceId);
+              return (
+                <Text key={property} color="hint">
+                  Resetting will change {property} to inherited {toValue(value)}{" "}
+                  from {instance?.component}
+                </Text>
+              );
+            }
+
+            return (
+              <Text key={property} color="hint">
+                Resetting will change to initial value
+              </Text>
+            );
+          })}
+        </Box>
+      </>
+    );
+  }
+
+  return (
+    <Box css={{ px: "$spacing$4", py: "$spacing$3" }}>
+      {properties.map((property) => {
+        const styleValueInfo = style[property];
+
+        if (styleValueInfo?.cascaded) {
+          const { breakpointId } = styleValueInfo.cascaded;
+          const breakpoint = breakpoints.find(
+            (item) => item.id === breakpointId
+          );
+          return (
+            <Text key={property} color="hint">
+              {property} value is cascaded from {breakpoint?.label}
+            </Text>
+          );
+        }
+
+        if (styleValueInfo?.inherited) {
+          const { instanceId } = styleValueInfo.inherited;
+          const instance =
+            rootInstance === undefined
+              ? undefined
+              : utils.tree.findInstanceById(rootInstance, instanceId);
+          return (
+            <Text key={property} color="hint">
+              {property} value is inherited from {instance?.component}
+            </Text>
+          );
+        }
+      })}
+    </Box>
+  );
+};
 
 type PropertyNameProps = {
   style: StyleInfo;
@@ -25,18 +127,19 @@ type PropertyNameProps = {
 };
 
 export const PropertyName = ({
-  style: currentStyle,
+  style,
   property,
   label,
   onReset,
 }: PropertyNameProps) => {
   const properties = Array.isArray(property) ? property : [property];
   const styleSource = getStyleSource(
-    ...properties.map((property) => currentStyle[property])
+    ...properties.map((property) => style[property])
   );
   const [isOpen, setIsOpen] = useState(false);
   const isPopoverEnabled =
-    isFeatureEnabled("propertyReset") && styleSource === "local";
+    isFeatureEnabled("propertyReset") &&
+    (styleSource === "local" || styleSource === "remote");
 
   const labelElement = (
     <Label
@@ -71,17 +174,12 @@ export const PropertyName = ({
           </PopoverTrigger>
           <PopoverPortal>
             <PopoverContent align="start" onClick={() => setIsOpen(false)}>
-              <Flex align="start" css={{ px: "$spacing$4", py: "$spacing$3" }}>
-                <Button onClick={onReset}>
-                  <UndoIcon /> &nbsp; Reset
-                </Button>
-              </Flex>
-              <Separator />
-              <Box css={{ px: "$spacing$4", py: "$spacing$3" }}>
-                <Text color="hint">
-                  Resetting will revert to initial or inherited value
-                </Text>
-              </Box>
+              <PropertyPopoverContent
+                properties={properties}
+                style={style}
+                styleSource={styleSource}
+                onReset={onReset}
+              />
             </PopoverContent>
           </PopoverPortal>
         </Popover>