Merge pull request #42 from jdi-testing/issue_36

highlight elements on right click and on selection

manifest.json

@@ -3,7 +3,7 @@
   "name": "JDN",
   "description": "",
   "devtools_page": "index.html",
-  "version": "3.0.64",
+  "version": "3.0.65",
   "permissions": [
     "activeTab",
     "tabs",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jdi-react-extension",
-  "version": "3.0.64",
+  "version": "3.0.65",
   "description": "jdi react extension",
   "scripts": {
     "start": "npm run webpack",

src/js/blocks/autoFind/components/autoFind.less

@@ -379,6 +379,19 @@
     }
 
     &__xpath {
+      &_container {
+        &--selected {
+          background-color: #ecf7ff;
+
+          &.jdn__xpath_container--cm-selected {
+            background-color: #d4eefa;
+          }
+        }
+
+        &--cm-selected {
+          background-color: #f2f2f2;
+        }
+      }
       &_item {
         font-size: 12px;
         word-break: break-all;

src/js/blocks/autoFind/components/locatorsList/Locator.jsx

@@ -27,7 +27,7 @@ import { toggleDeleted, toggleElementGeneration } from "../../redux/predictionSl
 export const Locator = ({ element, xpathConfig, stopXpathGeneration, runXpathGenerationHandler }) => {
   const dispatch = useDispatch();
 
-  const { element_id, type, name, locator, generate } = element;
+  const { element_id, type, name, locator, generate, isCmHighlighted} = element;
 
   const handleOnChange = (value) => {
     dispatch(toggleElementGeneration(element_id));
@@ -109,7 +109,8 @@ export const Locator = ({ element, xpathConfig, stopXpathGeneration, runXpathGen
   };
 
   return (
-    <div>
+    <div className={`${generate ? 'jdn__xpath_container--selected' : ''}
+     ${isCmHighlighted ? 'jdn__xpath_container--cm-selected' : ''}`}>
       <Checkbox checked={generate} onChange={handleOnChange}>
         <Text className="jdn__xpath_item">
           {renderIcon()}

src/js/blocks/autoFind/contentScripts/contextMenu/contextmenu.js

@@ -31,6 +31,17 @@ export const runContextMenu = () => {
       }
     }
 
+    function removeHighlight() {
+      const el = document.querySelector('.cm--selected');
+      if (el) {
+        el.classList.remove('cm--selected');
+        chrome.runtime.sendMessage({
+          message: "CM_ELEMENT_HIGHLIGHT_OFF",
+          param: el.id,
+      });
+      }
+    }
+
     window.addEventListener("resize", onResize);
 
     this.setOptions = function(_options) {
@@ -217,11 +228,13 @@ export const runContextMenu = () => {
 
     this.hide = function() {
       document.getElementById("cm_" + num).classList.remove("display");
+      removeHighlight();
       window.removeEventListener("click", documentClick);
     };
-
+    
     this.remove = function() {
       document.getElementById("cm_" + num).remove();
+      removeHighlight();
       window.removeEventListener("click", documentClick);
       window.removeEventListener("resize", onResize);
     };
@@ -476,6 +489,12 @@ export const runContextMenu = () => {
       elementMenu && elementMenu.remove();
       elementMenu = new ContextMenu(menuItems(param.element, param.types));
       elementMenu.display(contextEvent);
+      const el = document.getElementById(predictedElement.element_id);
+      chrome.runtime.sendMessage({
+        message: "CM_ELEMENT_HIGHLIGHT_ON",
+        param: predictedElement.element_id,
+      });
+        el?.classList?.add('cm--selected');
     }
 
     if (message === "HIGHLIGHT_TOGGLED") {

src/js/blocks/autoFind/contentScripts/highlight.css

@@ -226,6 +226,15 @@
   border: 1px solid rgba(21, 130, 216, 1);
 }
 
+.jdn-primary.cm--selected {
+  border: 2px solid #10b6db;
+  background-color: rgba(16, 182, 219, 0.2);
+}
+
+.jdn-primary.cm--selected .jdn-label {
+  background-color: #10b6db;
+}
+
 .jdn-primary .jdn-label {
   background-color: rgba(21, 130, 216, 1);
 }
@@ -235,6 +244,15 @@
   background-color: rgba(216, 161, 21, 0.2);
 }
 
+.jdn-secondary.cm--selected {
+  border: 1px solid #f18b14;
+  background-color: rgba(241, 139, 20, 0.2);
+}
+
+.jdn-secondary.cm--selected .jdn-label {
+  background-color: #f18b14;
+}
+
 .jdn-secondary .jdn-label {
   background-color: rgba(216, 161, 21, 1);
 }
@@ -380,5 +398,5 @@
   border: 0;
   transform: translate(-50%, -50%) scale(1);
   opacity: 1;
-  content: ' ';
+  content: " ";
 }

src/js/blocks/autoFind/redux/predictionSlice.js

@@ -101,6 +101,16 @@ const predictionSlice = createSlice({
     xPathGenerationStarted(state) {
       state.xpathStatus = xpathGenerationStatus.started;
     },
+    addCmElementHighlight(state, { payload }) {
+      const locators = state.locators;
+      const elem = locators.find((e) => e.element_id === payload);
+      elem.isCmHighlighted = true;
+    },
+    clearCmElementHighlight(state, { payload }) {
+      const locators = state.locators;
+      const elem = locators.find((e) => e.element_id === payload);
+      elem.isCmHighlighted = false;
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -144,4 +154,6 @@ export const {
   toggleBackdrop,
   updateLocator,
   xPathGenerationStarted,
+  addCmElementHighlight,
+  clearCmElementHighlight,
 } = predictionSlice.actions;

src/js/blocks/autoFind/utils/scriptListener.js

@@ -10,6 +10,8 @@ import {
   toggleDeleted,
   toggleElementGeneration,
   updateLocator,
+  clearCmElementHighlight,
+  addCmElementHighlight,
 } from "../redux/predictionSlice";
 import { connector, sendMessage } from "./connector";
 import { getJdiClassName, JDIclasses } from "./generationClassesMap";
@@ -56,6 +58,12 @@ export const createListeners = (dispatch, state) => {
     HIGHLIGHT_OFF: () => {
       dispatch(clearAll());
     },
+    CM_ELEMENT_HIGHLIGHT_ON: (payload) => {
+      dispatch(addCmElementHighlight(payload));
+    },
+    CM_ELEMENT_HIGHLIGHT_OFF: (payload) => {
+      dispatch(clearCmElementHighlight(payload));
+    },
     IS_OPEN_XPATH_CONFIG_MODAL: (payload) => dispatch(toggleBackdrop(payload)),
     OPEN_XPATH_CONFIG: (payload) => openSettingsMenu(xpathConfig, payload),
     PREDICTION_IS_UNACTUAL: () => dispatch(setUnactualPrediction(true)),