Highlight elements that user searched for

app/main/appium-method-handler.js

@@ -58,7 +58,7 @@ export default class AppiumMethodHandler {
     return {variableName, variableType, strategy, selector, elements};
   }
 
-  async executeElementCommand (elementId, methodName, args = []) {
+  async executeElementCommand (elementId, methodName, args = [], skipScreenshot = false) {
     const cachedEl = this.elementCache[elementId];
 
     // Give the cached element a variable name (el1, el2, el3,...) the first time it's used
@@ -70,7 +70,10 @@ export default class AppiumMethodHandler {
     // Give the source/screenshot time to change before taking the screenshot
     await Bluebird.delay(500);
 
-    let sourceAndScreenshot = await this._getSourceAndScreenshot();
+    let sourceAndScreenshot;
+    if (!skipScreenshot) {
+      sourceAndScreenshot = await this._getSourceAndScreenshot();
+    }
 
     return {
       ...sourceAndScreenshot,
@@ -79,7 +82,7 @@ export default class AppiumMethodHandler {
     };
   }
 
-  async executeMethod (methodName, args = []) {
+  async executeMethod (methodName, args = [], skipScreenshot = false) {
     let res = {};
 
     // Specially handle the tap and swipe method
@@ -101,7 +104,11 @@ export default class AppiumMethodHandler {
     // Give the source/screenshot time to change before taking the screenshot
     await Bluebird.delay(500);
 
-    let sourceAndScreenshot = await this._getSourceAndScreenshot();
+    let sourceAndScreenshot;
+
+    if (!skipScreenshot) {
+      sourceAndScreenshot = await this._getSourceAndScreenshot();
+    }
 
     return {
       ...sourceAndScreenshot,

app/main/appium.js

@@ -301,6 +301,7 @@ function connectClientMethodListener () {
       fetchArray = false, // Optional. Are we fetching an array of elements or just one?
       elementId, // Optional. Element being operated on 
       args = [], // Optional. Arguments passed to method
+      skipScreenshot = false, // Optional. Do we want the updated source and screenshot?
     } = data;
 
     let renderer = evt.sender;
@@ -322,15 +323,15 @@ function connectClientMethodListener () {
         if (methodName) {
           if (elementId) {
             console.log(`Handling client method request with method '${methodName}', args ${JSON.stringify(args)} and elementId ${elementId}`);
-            res = await methodHandler.executeElementCommand(elementId, methodName, args);
+            res = await methodHandler.executeElementCommand(elementId, methodName, args, skipScreenshot);
           } else {
             console.log(`Handling client method request with method '${methodName}' and args ${JSON.stringify(args)}`);
-            res = await methodHandler.executeMethod(methodName, args);
+            res = await methodHandler.executeMethod(methodName, args, skipScreenshot);
           }
         } else  if (strategy && selector) {
           if (fetchArray) {
             console.log(`Fetching elements with selector '${selector}' and strategy ${strategy}`);
-            res = await methodHandler.fetchElements(strategy, selector);
+            res = await methodHandler.fetchElements(strategy, selector, skipScreenshot);
           } else {
             console.log(`Fetching an element with selector '${selector}' and strategy ${strategy}`);
             res = await methodHandler.fetchElement(strategy, selector);

app/renderer/actions/Inspector.js

@@ -2,6 +2,7 @@ import { ipcRenderer } from 'electron';
 import { notification } from 'antd';
 import { push } from 'react-router-redux';
 import _ from 'lodash';
+import B from 'bluebird';
 import { getLocators } from '../components/Inspector/shared';
 import { showError } from './Session';
 import { callClientMethod } from './shared';
@@ -46,11 +47,14 @@ export const CLEAR_SEARCH_RESULTS = 'CLEAR_SEARCH_RESULTS';
 export const ADD_ASSIGNED_VAR_CACHE = 'ADD_ASSIGNED_VAR_CACHE';
 export const CLEAR_ASSIGNED_VAR_CACHE = 'CLEAR_ASSIGNED_VAR_CACHE';
 export const SET_SCREENSHOT_INTERACTION_MODE = 'SET_SCREENSHOT_INTERACTION_MODE';
+export const SET_SEARCHED_FOR_ELEMENT_BOUNDS = 'SET_SEARCHED_FOR_ELEMENT_BOUNDS';
+export const CLEAR_SEARCHED_FOR_ELEMENT_BOUNDS = 'CLEAR_SEARCHED_FOR_ELEMENT_BOUNDS';
 
 export const SET_SWIPE_START = 'SET_SWIPE_START';
 export const SET_SWIPE_END = 'SET_SWIPE_END';
 export const CLEAR_SWIPE_ACTION = 'CLEAR_SWIPE_ACTION';
 
+
 // Attributes on nodes that we know are unique to the node
 const uniqueAttributes = [
   'name',
@@ -335,6 +339,7 @@ export function showLocatorTestModal () {
 export function hideLocatorTestModal () {
   return (dispatch) => {
     dispatch({type: HIDE_LOCATOR_TEST_MODAL});
+    dispatch({type: CLEAR_SEARCHED_FOR_ELEMENT_BOUNDS});
   };
 }
 
@@ -377,11 +382,19 @@ export function findAndAssign (strategy, selector, variableName, isArray) {
   };
 }
 
-
-// TODO: Is this obsolete? I don't think we use this.
 export function setLocatorTestElement (elementId) {
-  return (dispatch) => {
+  return async (dispatch) => {
     dispatch({type: SET_LOCATOR_TEST_ELEMENT, elementId});
+    dispatch({type: CLEAR_SEARCHED_FOR_ELEMENT_BOUNDS});
+    if (elementId) {
+      try {
+        const [location, size] = await(B.all([
+          callClientMethod({methodName: 'getLocation', args: [elementId], skipScreenshot: true, skipRecord: true}),
+          callClientMethod({methodName: 'getSize', args: [elementId], skipScreenshot: true, skipRecord: true}),
+        ]));
+        dispatch({type: SET_SEARCHED_FOR_ELEMENT_BOUNDS, location: location.res, size: size.res});
+      } catch (ign) { }
+    }
   };
 }
 

app/renderer/components/Inspector/HighlighterRect.js

@@ -10,31 +10,44 @@ import { parseCoordinates } from './shared';
 export default class HighlighterRect extends Component {
 
   render () {
-    const {selectedElement = {}, selectHoveredElement, unselectHoveredElement, hoveredElement = {}, selectElement, unselectElement, element, zIndex, scaleRatio, xOffset} = this.props;
+    const {selectedElement = {}, selectHoveredElement, unselectHoveredElement, hoveredElement = {}, selectElement, unselectElement, element, 
+      zIndex, scaleRatio, xOffset, elLocation, elSize} = this.props;
     const {path: hoveredPath} = hoveredElement;
     const {path: selectedPath} = selectedElement;
 
-    // Calculate left, top, width and height coordinates
-    const {x1, y1, x2, y2} = parseCoordinates(element);
-    const left = x1 / scaleRatio + xOffset;
-    const top = y1 / scaleRatio;
-    const width = (x2 - x1) / scaleRatio;
-    const height = (y2 - y1) / scaleRatio;
+    let width, height, left, top, highlighterClasses, key;
+    highlighterClasses = [InspectorCSS['highlighter-box']];
 
-    // Add class + special classes to hovered and selected elements
-    const highlighterClasses = [InspectorCSS['highlighter-box']];
-    if (hoveredPath === element.path) {
-      highlighterClasses.push(InspectorCSS['hovered-element-box']);
-    }
-    if (selectedPath === element.path) {
+    if (element) {
+      // Calculate left, top, width and height coordinates
+      const {x1, y1, x2, y2} = parseCoordinates(element);
+      left = x1 / scaleRatio + xOffset;
+      top = y1 / scaleRatio;
+      width = (x2 - x1) / scaleRatio;
+      height = (y2 - y1) / scaleRatio;
+
+      // Add class + special classes to hovered and selected elements
+      if (hoveredPath === element.path) {
+        highlighterClasses.push(InspectorCSS['hovered-element-box']);
+      }
+      if (selectedPath === element.path) {
+        highlighterClasses.push(InspectorCSS['inspected-element-box']);
+      }
+      key = element.path;
+    } else if (elLocation && elSize) {
+      width = elSize.width / scaleRatio;
+      height = elSize.height / scaleRatio;
+      top = elLocation.y / scaleRatio;
+      left = elLocation.x / scaleRatio + xOffset;
+      key = 'searchedForElement';
       highlighterClasses.push(InspectorCSS['inspected-element-box']);
     }
 
     return <div className={highlighterClasses.join(' ').trim()}
-      onMouseOver={() => selectHoveredElement(element.path)}
+      onMouseOver={() => selectHoveredElement(key)}
       onMouseOut={unselectHoveredElement}
-      onClick={() => element.path === selectedPath ? unselectElement() : selectElement(element.path)}
-      key={element.path}
+      onClick={() => key === selectedPath ? unselectElement() : selectElement(key)}
+      key={key}
       style={{zIndex, left: (left || 0), top: (top || 0), width: (width || 0), height: (height || 0)}}>
       <div></div>
     </div>;

app/renderer/components/Inspector/HighlighterRects.js

@@ -98,7 +98,7 @@ export default class HighlighterRects extends Component {
   }
 
   render () {
-    const {source, screenshotInteractionMode, containerEl} = this.props;
+    const {source, screenshotInteractionMode, containerEl, searchedForElementBounds, isLocatorTestModalVisible} = this.props;
     const {scaleRatio} = this.state;
 
     // Recurse through the 'source' JSON and render a highlighter rect for each element
@@ -111,7 +111,6 @@ export default class HighlighterRects extends Component {
                            containerEl.getBoundingClientRect().left;
     }
 
-    // TODO: Refactor this into a separate component
     let recursive = (element, zIndex = 0) => {
       if (!element) {
         return;
@@ -129,13 +128,22 @@ export default class HighlighterRects extends Component {
       }
     };
 
+    // If the use selected an element that they searched for, highlight that element
+    if (searchedForElementBounds && isLocatorTestModalVisible) {
+      const {location:elLocation, size} = searchedForElementBounds;
+      highlighterRects.push(<HighlighterRect elSize={size} elLocation={elLocation} scaleRatio={scaleRatio} xOffset={highlighterXOffset} />);
+    }
+
     // If we're tapping or swiping, show the 'crosshair' cursor style
     const screenshotStyle = {};
     if (screenshotInteractionMode === 'tap' || screenshotInteractionMode === 'swipe') {
       screenshotStyle.cursor = 'crosshair';
     }
 
-    recursive(source);
+    // Don't show highlighter rects when Search Elements modal is open
+    if (!isLocatorTestModalVisible) {
+      recursive(source);
+    }
 
     return <div>{ highlighterRects }</div>;
   }

app/renderer/components/Inspector/Screenshot.js

@@ -17,6 +17,8 @@ export default class Screenshot extends Component {
     this.containerEl = null;
     this.state = {
       scaleRatio: 1,
+      x: null,
+      y: null,
     };
     this.updateScaleRatio = debounce(this.updateScaleRatio.bind(this), 1000);
   }

app/renderer/reducers/Inspector.js

@@ -9,7 +9,7 @@ import { SET_SOURCE_AND_SCREENSHOT, QUIT_SESSION_REQUESTED, QUIT_SESSION_DONE,
   SHOW_LOCATOR_TEST_MODAL, HIDE_LOCATOR_TEST_MODAL, SET_LOCATOR_TEST_STRATEGY, SET_LOCATOR_TEST_VALUE,
   SEARCHING_FOR_ELEMENTS, SEARCHING_FOR_ELEMENTS_COMPLETED, SET_LOCATOR_TEST_ELEMENT, CLEAR_SEARCH_RESULTS, 
   ADD_ASSIGNED_VAR_CACHE, CLEAR_ASSIGNED_VAR_CACHE, SET_SCREENSHOT_INTERACTION_MODE,
-  SET_SWIPE_START, SET_SWIPE_END, CLEAR_SWIPE_ACTION
+  SET_SWIPE_START, SET_SWIPE_END, CLEAR_SWIPE_ACTION, SET_SEARCHED_FOR_ELEMENT_BOUNDS, CLEAR_SEARCHED_FOR_ELEMENT_BOUNDS,
 } from '../actions/Inspector';
 
 const DEFAULT_FRAMEWORK = 'java';
@@ -28,6 +28,7 @@ const INITIAL_STATE = {
   isSearchingForElements: false,
   assignedVarCache: {},
   screenshotInteractionMode: 'select',
+  searchedForElementBounds: null,
 };
 
 /**
@@ -287,6 +288,21 @@ export default function inspector (state=INITIAL_STATE, action) {
         swipeEnd: null,
       };
 
+    case SET_SEARCHED_FOR_ELEMENT_BOUNDS:
+      return {
+        ...state,
+        searchedForElementBounds: {
+          location: action.location,
+          size: action.size,
+        }
+      };
+
+    case CLEAR_SEARCHED_FOR_ELEMENT_BOUNDS:
+      return {
+        ...state,
+        searchedForElementBounds: null,
+      };
+
     default:
       return {...state};
   }