Skip to content

Commit

Permalink
Merge pull request #42 from jdi-testing/issue_36
Browse files Browse the repository at this point in the history
highlight elements on right click and on selection
  • Loading branch information
MariiaNebesnova committed Nov 1, 2021
2 parents 4d8a224 + f2a8129 commit 7bfbc03
Show file tree
Hide file tree
Showing 8 changed files with 77 additions and 6 deletions.
2 changes: 1 addition & 1 deletion manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"name": "JDN",
"description": "",
"devtools_page": "index.html",
"version": "3.0.64",
"version": "3.0.65",
"permissions": [
"activeTab",
"tabs",
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
13 changes: 13 additions & 0 deletions src/js/blocks/autoFind/components/autoFind.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 3 additions & 2 deletions src/js/blocks/autoFind/components/locatorsList/Locator.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down Expand Up @@ -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()}
Expand Down
21 changes: 20 additions & 1 deletion src/js/blocks/autoFind/contentScripts/contextMenu/contextmenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
};
Expand Down Expand Up @@ -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") {
Expand Down
20 changes: 19 additions & 1 deletion src/js/blocks/autoFind/contentScripts/highlight.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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);
}
Expand Down Expand Up @@ -380,5 +398,5 @@
border: 0;
transform: translate(-50%, -50%) scale(1);
opacity: 1;
content: ' ';
content: " ";
}
12 changes: 12 additions & 0 deletions src/js/blocks/autoFind/redux/predictionSlice.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -144,4 +154,6 @@ export const {
toggleBackdrop,
updateLocator,
xPathGenerationStarted,
addCmElementHighlight,
clearCmElementHighlight,
} = predictionSlice.actions;
8 changes: 8 additions & 0 deletions src/js/blocks/autoFind/utils/scriptListener.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
toggleDeleted,
toggleElementGeneration,
updateLocator,
clearCmElementHighlight,
addCmElementHighlight,
} from "../redux/predictionSlice";
import { connector, sendMessage } from "./connector";
import { getJdiClassName, JDIclasses } from "./generationClassesMap";
Expand Down Expand Up @@ -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)),
Expand Down

0 comments on commit 7bfbc03

Please sign in to comment.