chore: tidy up highlighter creation (#989)

* chore: do not render invisible element highlights

* chore: split element & bound highlighters

* chore: remove unused function variable

app/renderer/actions/Inspector.js

@@ -196,9 +196,9 @@ export function selectHoveredElement (path) {
   };
 }
 
-export function unselectHoveredElement (path) {
+export function unselectHoveredElement () {
   return (dispatch) => {
-    dispatch({type: UNSELECT_HOVERED_ELEMENT, path});
+    dispatch({type: UNSELECT_HOVERED_ELEMENT});
   };
 }
 

app/renderer/components/Inspector/HighlighterRectForBounds.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import InspectorCSS from './Inspector.css';
+
+/**
+ * Single absolute positioned div that overlays the app screenshot and highlights the bounding
+ * box of the element found through element search
+ */
+const HighlighterRectForBounds = ({ elSize, elLocation, scaleRatio, xOffset }) => (
+  <div className={`${InspectorCSS['highlighter-box']} ${InspectorCSS['inspected-element-box']}`}
+    // Unique keys are assigned to elements by their x & y coordinates
+    key={`searchedForElement{x: ${elLocation.x}, y: ${elLocation.y}}`}
+    style={{
+      left: elLocation.x / scaleRatio + xOffset,
+      top: elLocation.y / scaleRatio,
+      width: elSize.width / scaleRatio,
+      height: elSize.height / scaleRatio
+    }}>
+    <div></div>
+  </div>
+);
+
+export default HighlighterRectForBounds;

app/renderer/components/Inspector/HighlighterRectForElem.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import InspectorCSS from './Inspector.css';
+
+/**
+ * Absolute positioned divs that overlay the app screenshot and highlight the bounding
+ * boxes of the elements in the app
+ */
+const HighlighterRectForElem = (props) => {
+  const { hoveredElement = {}, selectHoveredElement, unselectHoveredElement,
+          selectedElement = {}, selectElement, unselectElement, dimensions, element } = props;
+
+  const { width, height, left, top } = dimensions;
+  const key = element.path;
+  let highlighterClasses = [InspectorCSS['highlighter-box']];
+
+  // Add class + special classes to hovered and selected elements
+  if (hoveredElement.path === element.path) {
+    highlighterClasses.push(InspectorCSS['hovered-element-box']);
+  }
+  if (selectedElement.path === element.path) {
+    highlighterClasses.push(InspectorCSS['inspected-element-box']);
+  }
+
+  return <div className={highlighterClasses.join(' ').trim()}
+    onMouseOver={() => selectHoveredElement(key)}
+    onMouseOut={unselectHoveredElement}
+    onClick={() => key === selectedElement.path ? unselectElement() : selectElement(key)}
+    key={key}
+    style={{left: (left || 0), top: (top || 0), width: (width || 0), height: (height || 0)}}>
+    <div></div>
+  </div>;
+};
+
+export default HighlighterRectForElem;

app/renderer/components/Inspector/HighlighterRects.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import HighlighterRect from './HighlighterRect';
+import HighlighterRectForElem from './HighlighterRectForElem';
+import HighlighterRectForBounds from './HighlighterRectForBounds';
 import HighlighterCentroid from './HighlighterCentroid';
 import { parseCoordinates, RENDER_CENTROID_AS } from './shared';
 
@@ -153,13 +154,13 @@ const HighlighterRects = (props) => {
   // Displays element rectangles only
   const renderElements = (source) => {
     for (const elem of source) {
+      // only render elements with non-zero height and width
+      if (!elem.properties.width || !elem.properties.height) { continue; }
       highlighterRects.push(
-        <HighlighterRect {...props}
+        <HighlighterRectForElem {...props}
           dimensions={elem.properties}
           element={elem.element}
-          scaleRatio={scaleRatio}
-          key={elem.properties.path}
-          xOffset={highlighterXOffset} />
+          key={elem.properties.path} />
       );
     }
   };
@@ -188,13 +189,13 @@ const HighlighterRects = (props) => {
 
   // If the user selected an element that they searched for, highlight that element
   if (searchedForElementBounds && isLocatorTestModalVisible) {
-    const {location: elLocation, size} = searchedForElementBounds;
+    const { location, size } = searchedForElementBounds;
     highlighterRects.push(
-      <HighlighterRect
+      <HighlighterRectForBounds
         elSize={size}
-        elLocation={elLocation}
+        elLocation={location}
         scaleRatio={scaleRatio}
-        key={`el.${elLocation.x}.${elLocation.y}.${size.width}.${size.height}`}
+        key={`el.${location.x}.${location.y}.${size.width}.${size.height}`}
         xOffset={highlighterXOffset} />
     );
   }