Merge pull request #258 from jdi-testing/issue_255

redesign highlight
jdi-testing · Jul 20, 2021 · 26737af · 26737af
2 parents 122d5e5 + 8d998cb
commit 26737af
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 69 deletions.
diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,7 @@
   "name": "JDN",
   "description": "",
   "devtools_page": "index.html",
-  "version": "3.0.28",
+  "version": "3.0.29",
   "permissions": [
     "activeTab",
     "tabs",
@@ -21,12 +21,12 @@
   "content_scripts": [
     {
       "matches": [
-        "http://*/*", 
+        "http://*/*",
         "https://*/*"
       ],
       "css": [
-        "reportProblemPopup.css", 
-        "contextmenu.css"
+        "reportProblemPopup.css",
+        "highlight.css"
       ]
     }
   ]

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jdi-react-extension",
-  "version": "3.0.28",
+  "version": "3.0.29",
   "description": "jdi react extension",
   "scripts": {
     "start": "npm run webpack",

diff --git a/src/js/blocks/autoFind/AutoFind.jsx b/src/js/blocks/autoFind/AutoFind.jsx
@@ -112,9 +112,7 @@ const AutoFind = ({ classes }) => {
         <div>{pageElements || 0} found on page.</div>
         <div>{getPredictedElements()} predicted.</div>
         <div>
-          {availableForGeneration.length -
-            (unreachableNodes ? unreachableNodes.length : 0)}{" "}
-          available for generation.
+          {availableForGeneration.length} available for generation.
         </div>
         <div>{xpathStatus}</div>
         {unreachableNodes && unreachableNodes.length ? (

diff --git a/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx b/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx
@@ -5,7 +5,6 @@ import { useContext } from "react";
 import {
   getElements,
   highlightElements,
-  highlightUnreached,
   runDocumentListeners,
   generatePageObject,
   requestXpathes,
@@ -159,19 +158,25 @@ const AutoFindProvider = inject("mainModel")(
 
     useEffect(() => {
       if (predictedElements) {
+        const onHighlighted = () => {
+          setStatus(autoFindStatus.success);
+          setAvailableForGeneration(
+            predictedElements.filter(
+              (e) =>
+                e.predicted_probability >= perception &&
+                !e.skipGeneration &&
+                !e.hidden &&
+                !unreachableNodes.includes(e.element_id)
+            )
+          );
+        }
+
         highlightElements(
           predictedElements,
-          () => setStatus(autoFindStatus.success),
+          onHighlighted,
           perception
         );
-        setAvailableForGeneration(
-          predictedElements.filter(
-            (e) =>
-              e.predicted_probability >= perception &&
-              !e.skipGeneration &&
-              !e.hidden
-          )
-        );
+
       }
     }, [predictedElements, perception]);
 
@@ -207,7 +212,7 @@ const AutoFindProvider = inject("mainModel")(
 
     useEffect(() => {
       if (!unreachableNodes.length) return;
-      highlightUnreached(unreachableNodes);
+      sendMessage.highlightUnreached(unreachableNodes);
     }, [unreachableNodes]);
 
     const data = [

diff --git a/src/js/blocks/autoFind/autoFindProvider/connector.js b/src/js/blocks/autoFind/autoFindProvider/connector.js
@@ -110,6 +110,7 @@ export const sendMessage = {
     connector.sendMessage("GENERATE_XPATHES", payload, onResponse),
   pingScript: (payload, onResponse) =>
     connector.sendMessage("PING_SCRIPT", payload, onResponse),
+  highlightUnreached: (payload) => connector.sendMessage("HIGHLIGHT_ERRORS", payload),
 };
 
 export default Connector;
diff --git a/src/js/blocks/autoFind/autoFindProvider/contentScripts/contextMenu/contextmenu.js b/src/js/blocks/autoFind/autoFindProvider/contentScripts/contextMenu/contextmenu.js
@@ -341,7 +341,7 @@ export const runContextMenu = () => {
   };
 
   const contextMenuListener = (event) => {
-    const highlightTarget = event.target.closest("[jdn-highlight=true]");
+    const highlightTarget = event.target.closest("[jdn-highlight=true]:not(.jdn-error)");
     if (highlightTarget) {
       event.preventDefault();
       contextEvent = event;

diff --git a/src/js/blocks/autoFind/autoFindProvider/contentScripts/generationData.js b/src/js/blocks/autoFind/autoFindProvider/contentScripts/generationData.js
@@ -402,7 +402,7 @@ export const generateXpathes = () => {
   };
 
   const mapElements = (elements) => {
-    const xpathElements = elements.map((predictedElement, index) => {
+    const xpathElements = (elements.map((predictedElement, index) => {
       let element = document.querySelector(
         `[jdn-hash='${predictedElement.element_id}']`
       );
@@ -422,7 +422,7 @@ export const generateXpathes = () => {
         ...predictedElement,
         xpath: robula.getRobustXPath(element, document),
       };
-    });
+    })).filter(el => !!el);
     return {
       xpathElements,
       unreachableNodes,

diff --git a/...ontentScripts/contextMenu/contextmenu.css → ...FindProvider/contentScripts/highlight.css b/...ontentScripts/contextMenu/contextmenu.css → ...FindProvider/contentScripts/highlight.css
@@ -105,3 +105,49 @@
 .cm_container li[disabled=""]:hover {
   background-color: inherit;
 }
+
+.jdn-highlight {
+  position: absolute;
+  z-index: 5000;
+  color: rgba(255, 255, 255, 1);
+}
+
+.jdn-highlight div {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.jdn-label {
+  font-weight: 700;
+  font-size: 9px;
+  line-height: 12px;
+  padding: 0 4px;
+  white-space: nowrap;
+}
+
+.jdn-primary {
+  background-color: rgba(21, 130, 216, 0.4);
+  border: 1px solid rgba(21, 130, 216, 1);
+}
+
+.jdn-primary .jdn-label {
+  background-color: rgba(21, 130, 216, 1);
+}
+
+.jdn-secondary {
+  border: 1px solid rgba(216, 161, 21, 1);
+  background-color: rgba(216, 161, 21, 0.2);
+}
+
+.jdn-secondary .jdn-label {
+  background-color: rgba(216, 161, 21, 1);
+}
+
+.jdn-error {
+  border: 1px solid rgba(216, 44, 21, 1);
+  background-color: rgba(216, 44, 21, 0.2);
+}
+
+.jdn-error .jdn-label {
+  background-color: rgba(216, 44, 21, 1);
+}
diff --git a/src/js/blocks/autoFind/autoFindProvider/contentScripts/highlight.js b/src/js/blocks/autoFind/autoFindProvider/contentScripts/highlight.js
@@ -7,17 +7,6 @@ export const highlightOnPage = () => {
   let isHighlightElementsReverse = false;
   let port;
 
-  const primaryColor = `rgba(74, 207, 237, 0.5)`;
-  const secondaryColor = `rgba(250, 238, 197, 0.5)`;
-
-  const divPrimaryStyle = {
-    backgroundColor: primaryColor,
-  };
-
-  const divSecondaryStyle = {
-    backgroundColor: secondaryColor,
-  };
-
   const isInViewport = (element) => {
     const { top, right, bottom, left } = element.getBoundingClientRect();
 
@@ -33,8 +22,7 @@ export const highlightOnPage = () => {
 
   const toggleElement = (element) => {
     const div = document.getElementById(element.element_id);
-    if (element.skipGeneration) Object.assign(div.style, divSecondaryStyle);
-    else Object.assign(div.style, divPrimaryStyle);
+    div.className = `jdn-highlight ${element.skipGeneration ? 'jdn-secondary' : 'jdn-primary'}`;
   };
 
   const removeElement = (element) => {
@@ -48,7 +36,7 @@ export const highlightOnPage = () => {
 
   const assignType = (element) => {
     const div = document.getElementById(element.element_id);
-    div.querySelector(".jdn-label").textContent = element.jdi_class_name;
+    div.querySelector(".jdn-class").textContent = element.jdi_class_name;
   };
 
   const drawRectangle = (
@@ -57,28 +45,21 @@ export const highlightOnPage = () => {
   ) => {
     const divDefaultStyle = (rect) => {
       const { top, left, height, width } = rect || {};
-      const coords = rect
+      return rect
         ? {
-            left: `${left + window.pageXOffset}px`,
-            top: `${top + window.pageYOffset}px`,
-            height: `${height}px`,
-            width: `${width}px`,
-          }
+          left: `${left + window.pageXOffset}px`,
+          top: `${top + window.pageYOffset}px`,
+          height: `${height}px`,
+          width: `${width}px`,
+        }
         : {};
-      return {
-        ...coords,
-        ...divPrimaryStyle,
-        position: "absolute",
-        border: `3px solid ${primaryColor}`,
-        zIndex: 5000,
-        color: "red",
-      };
     };
 
     const div = document.createElement("div");
     div.id = element_id;
+    div.className = "jdn-highlight jdn-primary"
     div.setAttribute("jdn-highlight", true);
-    div.innerHTML = `<span class="jdn-label">${jdi_class_name}</span>: ${predicted_probability}`;
+    div.innerHTML = `<div><span class="jdn-label"><span class="jdn-class">${jdi_class_name}</span> ${predicted_probability}</span></div>`;
     Object.assign(div.style, divDefaultStyle(element.getBoundingClientRect()));
 
     div.onclick = () => {
@@ -197,13 +178,10 @@ export const highlightOnPage = () => {
   };
 
   const highlightErrors = (ids) => {
-    const errorStyle = {
-      backgroundColor: "rgba(250, 0, 0, 0.5)",
-    };
     ids.forEach((id) => {
       const div = document.getElementById(id);
-      div.onclick = () => {};
-      Object.assign(div.style, errorStyle);
+      div.onclick = () => { };
+      div.className = "jdn-highlight jdn-error";
     });
   };
 
@@ -233,7 +211,7 @@ export const highlightOnPage = () => {
       assignType(param);
     }
 
-    if (message === "PING_SCRIPT" && (param.scriptName === "highlightOnPage")) {      
+    if (message === "PING_SCRIPT" && (param.scriptName === "highlightOnPage")) {
       sendResponse({ message: true });
     }
   };

diff --git a/src/js/blocks/autoFind/autoFindProvider/pageDataHandlers.js b/src/js/blocks/autoFind/autoFindProvider/pageDataHandlers.js
@@ -86,10 +86,3 @@ export const generatePageObject = (elements, mainModel) => {
     mainModel.conversionModel.downloadPageCode(page, ".java");
   });
 };
-
-export const highlightUnreached = (ids) => {
-  connector.port.postMessage({
-    message: "HIGHLIGHT_ERRORS",
-    param: ids,
-  });
-};
diff --git a/webpack.config.js b/webpack.config.js
@@ -129,15 +129,15 @@ const indexConfig = {
   },
 };
 
-const contextMenuCssConfig = {
+const highlightCssConfig = {
   entry:
-    "./src/js/blocks/autoFind/autoFindProvider/contentScripts/contextMenu/contextmenu.css",
+    "./src/js/blocks/autoFind/autoFindProvider/contentScripts/highlight.css",
   mode: "production",
-  plugins: [new MiniCssExtractPlugin({ filename: "contextmenu.css" })],
+  plugins: [new MiniCssExtractPlugin({ filename: "highlight.css" })],
   module: {
     rules: [
       {
-        test: /contextmenu.css$/i,
+        test: /highlight.css$/i,
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
@@ -175,4 +175,4 @@ const reportProblemPopupCssConfig = {
   },
 };
 
-module.exports = [mainConfig, indexConfig, contextMenuCssConfig, reportProblemPopupCssConfig];
+module.exports = [mainConfig, indexConfig, highlightCssConfig, reportProblemPopupCssConfig];