Separate icon for zero-sized divs (#4280)

* scaffolding for zero-sized div icon

* icons upload

* switch out new icon

* add testId for icon

* fix test to check for correct icon

* fix mistake

* fixed naming confusion

* update tests, but really

---------

Co-authored-by: lankaukk <[email protected]>

editor/src/components/navigator/navigator-item/layout-icon.tsx

@@ -11,6 +11,17 @@ import { WarningIcon } from '../../../uuiui/warning-icon'
 import { invalidGroupStateToString } from '../../canvas/canvas-strategies/strategies/group-helpers'
 import { ChildWithPercentageSize } from '../../common/size-warnings'
 import { useLayoutOrElementIcon } from '../layout-element-icons'
+import { MetadataUtils } from '../../../core/model/element-metadata-utils'
+import type { ElementPath } from '../../../core/shared/project-file-types'
+import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template'
+import { isInfinityRectangle } from '../../../core/shared/math-utils'
+import { isZeroSizedElement } from '../../canvas/controls/outline-utils'
+import { optionalMap } from '../../../core/shared/optional-utils'
+import createCachedSelector from 're-reselect'
+import { metadataSelector } from '../../inspector/inpector-selectors'
+import type { MetadataSubstate } from '../../editor/store/store-hook-substore-types'
+import * as EP from '../../../core/shared/element-path'
+import { Substores, useEditorState } from '../../editor/store/store-hook'
 
 interface LayoutIconProps {
   navigatorEntry: NavigatorEntry
@@ -23,11 +34,40 @@ export function layoutIconTestIdForEntry(navigatorEntry: NavigatorEntry): string
   return `layout-icn-${navigatorEntryToKey(navigatorEntry)}`
 }
 
+export function isZeroSizedDiv(elementPath: ElementPath, metadata: ElementInstanceMetadataMap) {
+  const bounds = MetadataUtils.getFrameInCanvasCoords(elementPath, metadata)
+  if (bounds == null || isInfinityRectangle(bounds)) {
+    return false
+  }
+
+  const isElementDiv =
+    optionalMap(
+      (i) => MetadataUtils.isDiv(i),
+      MetadataUtils.findElementByElementPath(metadata, elementPath),
+    ) ?? false
+
+  return isZeroSizedElement(bounds) && isElementDiv
+}
+
+const isZeroSizedDivSelector = createCachedSelector(
+  metadataSelector,
+  (_: MetadataSubstate, x: ElementPath) => x,
+  (metadata, elementPath) => {
+    return isZeroSizedDiv(elementPath, metadata)
+  },
+)((_, x) => EP.toString(x))
+
 export const LayoutIcon: React.FunctionComponent<React.PropsWithChildren<LayoutIconProps>> =
   React.memo((props) => {
     const { elementWarnings, color, warningText: propsWarningText, navigatorEntry } = props
     const { iconProps, isPositionAbsolute } = useLayoutOrElementIcon(navigatorEntry)
 
+    const isZeroSized = useEditorState(
+      Substores.metadata,
+      (store) => isZeroSizedDivSelector(store, props.navigatorEntry.elementPath),
+      'LayoutIcon isZeroSized',
+    )
+
     const warningText = React.useMemo(() => {
       if (elementWarnings == null) {
         return propsWarningText ?? null
@@ -67,6 +107,18 @@ export const LayoutIcon: React.FunctionComponent<React.PropsWithChildren<LayoutI
         color: color,
         style: { opacity: 'var(--iconOpacity)' },
       }
+      if (isZeroSized) {
+        return (
+          <Icn
+            category='element'
+            type='zerosized-div'
+            testId={iconTestId}
+            color={'main'}
+            width={18}
+            height={18}
+          />
+        )
+      }
       if (isInvalidOverrideNavigatorEntry(navigatorEntry)) {
         return (
           <Icons.WarningTriangle
@@ -87,13 +139,14 @@ export const LayoutIcon: React.FunctionComponent<React.PropsWithChildren<LayoutI
         return <WarningIcon tooltipText={warningText} testId={iconTestId} />
       }
     }, [
-      isErroredGroup,
-      isErroredGroupChild,
-      warningText,
       iconProps,
       color,
-      iconTestId,
+      isZeroSized,
       navigatorEntry,
+      warningText,
+      isErroredGroup,
+      isErroredGroupChild,
+      iconTestId,
     ])
 
     const marker = React.useMemo(() => {

editor/src/components/navigator/navigator-item/navigator-item.spec.browser2.tsx

@@ -1,7 +1,5 @@
-import { wait } from '../../../utils/utils.test-utils'
 import { renderTestEditorWithCode } from '../../canvas/ui-jsx.test-utils'
 import type { NavigatorEntry } from '../../editor/store/editor-state'
-import { createElementIconPropsFromMetadata } from '../layout-element-icons'
 import { itemLabelTestIdForEntry } from './item-label'
 import { layoutIconTestIdForEntry } from './layout-icon'
 
@@ -175,7 +173,6 @@ describe('Navigator item row icons', () => {
 
   it('Should show the correct icons for each type of row', async () => {
     const editor = await renderTestEditorWithCode(testProjectCode, 'await-first-dom-report')
-    const { jsxMetadata, elementPathTree, allElementProps } = editor.getEditorState().editor
     const visibleNavigatorTargets = editor.getEditorState().derived.visibleNavigatorTargets
 
     async function checkNavigatorIcon(
@@ -189,39 +186,17 @@ describe('Navigator item row icons', () => {
       if (expectedIcnProps === 'no-icon') {
         await expect(async () => editor.renderedDOM.getByTestId(testId)).rejects.toThrow()
       } else {
-        const icnProps = createElementIconPropsFromMetadata(
-          navigatorEntry.elementPath,
-          jsxMetadata,
-          elementPathTree,
-          navigatorEntry,
-          allElementProps,
-        ).iconProps
-
-        expect({
-          description: description,
-          category: icnProps.category,
-          type: icnProps.type,
-        }).toEqual({
-          description: description,
-          category: expectedIcnProps.category,
-          type: expectedIcnProps.type,
-        })
-
         const imgElement = editor.renderedDOM.getByTestId(testId)
         const imgData = imgElement.dataset
 
-        const renderedIconDescription = `${description} renderedIcon`
-
         const expectedCategory =
           expectWarningIcon === 'expect-warning-icon' ? undefined : expectedIcnProps.category
         const expectedType =
           expectWarningIcon === 'expect-warning-icon' ? 'warningtriangle' : expectedIcnProps.type
         expect({
-          description: renderedIconDescription,
           category: imgData['category'],
           type: imgData['type'],
         }).toEqual({
-          description: renderedIconDescription,
           category: expectedCategory,
           type: expectedType,
         })
@@ -305,12 +280,10 @@ describe('Navigator item row icons', () => {
       { category: 'element', type: 'fragment' },
       visibleNavigatorTargets[16],
     )
-    // Sizeless divs now display a warning icon rather than their expected icon
     await checkNavigatorIcon(
       'Sizeless div',
-      { category: 'element', type: 'group-open' },
+      { category: 'element', type: 'zerosized-div' },
       visibleNavigatorTargets[17],
-      'expect-warning-icon',
     )
     await checkNavigatorIcon(
       'Generated text',