From 0be98c5836c6f3f5f2add13308439ca2553fc2b3 Mon Sep 17 00:00:00 2001 From: Ruslan Galiev Date: Tue, 24 Aug 2021 09:35:29 +0300 Subject: [PATCH 1/5] Issue-288: Re-design extension --- src/css/main.less | 146 +++++++++++++++++- src/index.html | 3 + src/js/blocks/autoFind/AutoFind.jsx | 102 +++++++----- .../autoFindProvider/AutoFindProvider.jsx | 4 - .../autoFindProvider/pageDataHandlers.js | 1 - src/js/blocks/autoFind/slider.less | 24 ++- src/js/blocks/autoFind/tests/autoFind.test.js | 6 - src/js/blocks/generate/GenerateBlock.jsx | 2 +- src/js/main.jsx | 130 +++++++++------- 9 files changed, 300 insertions(+), 118 deletions(-) diff --git a/src/css/main.less b/src/css/main.less index 64bffcc..a57ec99 100644 --- a/src/css/main.less +++ b/src/css/main.less @@ -9,14 +9,152 @@ ul { list-style: nont; } -.urls-list { - margin: 0 0 0 10px; -} - #chromeExtensionReactApp { + height: 100%; + font-family: 'Noto Sans', sans-serif; + background-color: #F7FAFF; overflow-x: hidden; } +.jdn { + + /* + COMMON CLASSES + */ + &__hidden { height: 0; overflow: hidden; } + + /* + HEADER + */ + &__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 30px; + background-color: #000; + } + + &__header-title { + flex-grow: 0.8; + font-size: 13px; + line-height: 1.3; + } + + &__header-text { + margin: 0; + padding: 0; + font-size: 13px; + color: #fff; + } + + &__header-version { + color: #fff; + } + + &__header-link { + font-size: 12px; + font-weight: 700; + color: #fff; + } + + /* + BUTTONS + */ + &__button { + position: relative; + height: 36px; + margin: 16px 0 25px 16px; + padding: 0 15px 0 35px; + font-size: 14px; + font-weight: 700; + color: #fff; + background-color: #1582D8; + border-radius: 4px; + border: none; + cursor: pointer; + } + + &__button--reset, + &__button--generate { + color: #1582D8; + background-color: #fff; + border: 1px solid #1582D8; + } + + &__button--identify::after, + &__button--reset::after, + &__button--generate::after { + content: ""; + position: absolute; + top: 9px; + left: 9px; + width: 17px; + height: 17px; + } + + &__button--identify::after {background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='5' stroke='white' stroke-width='2'/%3E%3Cpath d='M16.0707 16.0708C16.4612 15.6802 16.4612 15.0471 16.0707 14.6565L11.4142 10L9.99997 11.4142L14.6565 16.0708C15.047 16.4613 15.6802 16.4613 16.0707 16.0708Z' fill='white'/%3E%3C/svg%3E%0A");} + &__button--reset::after {background-image: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='1' width='16' height='3' rx='1' fill='%231582D8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 6H14V16C14 17.1046 13.1046 18 12 18H4C2.89543 18 2 17.1046 2 16V6ZM5 9C5 8.44772 5.44772 8 6 8C6.55228 8 7 8.44772 7 9V15C7 15.5523 6.55228 16 6 16C5.44772 16 5 15.5523 5 15V9ZM10 8C9.44772 8 9 8.44772 9 9V15C9 15.5523 9.44772 16 10 16C10.5523 16 11 15.5523 11 15V9C11 8.44772 10.5523 8 10 8Z' fill='%231582D8'/%3E%3Crect x='5' width='6' height='2' rx='1' fill='%231582D8'/%3E%3C/svg%3E%0A");} + &__button--generate::after {background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='14' width='16' height='2' rx='1' fill='%231582D8'/%3E%3Crect x='7' y='10' width='10' height='2' rx='1' transform='rotate(-90 7 10)' fill='%231582D8'/%3E%3Cpath d='M4 7L7.29289 10.2929C7.68342 10.6834 8.31658 10.6834 8.70711 10.2929L12 7' stroke='%231582D8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");} + + /* + PERCEPTION TRESHOLD + */ + &__perception-treshold { + margin: 0 0 0 16px; + font-size: 13px; + font-weight: 700; + } + + &__perception-min, + &__perception-max { + font-weight: 400; + line-height: 1.75; + } + + &__perception-min { margin: 0 7px 0 0; } + &__perception-max { margin: 0 0 0 7px; } + + /* + SLIDER + */ + &__slider { + display: flex; + margin: 0 16px 10px 0; + } + + /* + RESULTS + */ + &__result { + padding: 17px 16px; + border-top: 1px solid #C4C4C4; + border-bottom: 1px solid #C4C4C4; + } + &__result-status { + font-size: 18px; + font-weight: 700; + color: #1582D8; + } + &__result-indicators { + display: flex; + } + &__result-indicator { + margin: 0 36px 0 0; + } + &__result-count { + display: block; + font-size: 36px; + } + + /* + URL LIST + */ + &__urls-list { margin: 0 0 0 10px; } + +} + +.ant-layout { background-color: inherit; } + .ant-select-selection-item { color: #008ace; font-size: 13px; diff --git a/src/index.html b/src/index.html index dcc809a..176d780 100644 --- a/src/index.html +++ b/src/index.html @@ -5,6 +5,9 @@ + + + diff --git a/src/js/blocks/autoFind/AutoFind.jsx b/src/js/blocks/autoFind/AutoFind.jsx index 89d1bff..f47527b 100644 --- a/src/js/blocks/autoFind/AutoFind.jsx +++ b/src/js/blocks/autoFind/AutoFind.jsx @@ -80,56 +80,80 @@ const AutoFind = ({ classes }) => { return ( - + - - - - - - - - -
{status}
-
{pageElements || 0} found on page.
-
{getPredictedElements()} predicted.
-
- {availableForGeneration.length} available for generation. +
+ +
+ + + +
-
{xpathStatus}
- {unreachableNodes && unreachableNodes.length ? ( - - ) : null} - {unactualPrediction ? - () - : null - } + + +
diff --git a/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx b/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx index d35de19..f7195ea 100644 --- a/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx +++ b/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx @@ -18,9 +18,7 @@ import { connector, sendMessage } from "./connector"; export const autoFindStatus = { noStatus: "", - loading: "Loading...", success: "Successful!", - removed: "Removed", error: "An error occured", blocked: "Script is blocked. Close all popups" }; @@ -137,14 +135,12 @@ const AutoFindProvider = inject("mainModel")( const identifyElements = () => { setAllowIdentifyElements(!allowIdentifyElements); - setStatus(autoFindStatus.loading); getElements(updateElements, setStatus); }; const removeHighlighs = () => { const callback = () => { clearElementsState(); - setStatus(autoFindStatus.removed); }; sendMessage.killHighlight(null, callback); diff --git a/src/js/blocks/autoFind/autoFindProvider/pageDataHandlers.js b/src/js/blocks/autoFind/autoFindProvider/pageDataHandlers.js index 8494a3b..5acf9cd 100644 --- a/src/js/blocks/autoFind/autoFindProvider/pageDataHandlers.js +++ b/src/js/blocks/autoFind/autoFindProvider/pageDataHandlers.js @@ -61,7 +61,6 @@ export const getElements = (callback, setStatus) => { connector.updateMessageListener((payload) => { if (payload.message === "START_COLLECT_DATA") { clearTimeout(pageAccessTimeout); - setStatus(autoFindStatus.loading); overlayID = payload.param.overlayID; } }); diff --git a/src/js/blocks/autoFind/slider.less b/src/js/blocks/autoFind/slider.less index 0cf5660..3a1e113 100644 --- a/src/js/blocks/autoFind/slider.less +++ b/src/js/blocks/autoFind/slider.less @@ -1,16 +1,32 @@ .ant-slider-track { - background-color: #f5f5f5; + height: 2px; + background-color: #C4C4C4; } .ant-slider-rail { - background-color: #76d7f5; + height: 2px; + background-color: #1582D8; +} + +.ant-slider { + padding: 0; } .ant-slider:hover { .ant-slider-track { - background-color: #e1e1e1; + background-color: #C4C4C4; } .ant-slider-rail { - background-color: #4abee8; + background-color: #1582D8; } } + +.ant-slider-handle, +.ant-slider-handle:focus { + width: 15px; + height: 15px; + margin: -6px 0 0; + border: none; + background-color: #1582D8; + box-shadow: none; +} diff --git a/src/js/blocks/autoFind/tests/autoFind.test.js b/src/js/blocks/autoFind/tests/autoFind.test.js index f6643ed..4b6e058 100644 --- a/src/js/blocks/autoFind/tests/autoFind.test.js +++ b/src/js/blocks/autoFind/tests/autoFind.test.js @@ -74,12 +74,6 @@ describe("AutoFind Identify functionality", () => { container = null; }); - test("changes status to Loading", () => { - const button = container.querySelector("#identify"); - button.dispatchEvent(new MouseEvent("click", { bubbles: true })); - expect(container.querySelector("#status").textContent).toBe(autoFindStatus.loading); - }); - test("predicted elements are received, updated properly and passed to component", async () => { const button = container.querySelector("#identify"); await act(async () => { diff --git a/src/js/blocks/generate/GenerateBlock.jsx b/src/js/blocks/generate/GenerateBlock.jsx index 1f92462..f350824 100644 --- a/src/js/blocks/generate/GenerateBlock.jsx +++ b/src/js/blocks/generate/GenerateBlock.jsx @@ -117,7 +117,7 @@ export default class GenerateBlock extends React.Component { Export URLs
-
    +
      {urlsList.map((url) =>
    • + +
      +
      +

      JDN

      +
      version
      +
      + Report a problem + Readme + Upgrade +
      -
      - - Auto Find Objects - Settings - URLs - Results - - - - Warnings - - - {this.tab === "settings" && ( -
      - - - - - + + Auto Find Objects + Settings + URLs + Results + +
      - )} - - {this.tab === "urls" && ( - - )} - - {this.tab === "results" && ( - - )} - - {this.tab === "warnings" && ( - - )} - - {this.tab === "auto_find" && ( - - )} -
      + GENERATE + + + Warnings + + + {this.tab === "settings" && ( +
      + + + + + + + + +
      + )} + + {this.tab === "urls" && ( + + )} + + {this.tab === "results" && ( + + )} + + {this.tab === "warnings" && ( + + )} + + {this.tab === "auto_find" && ( + + )} +
); From a179a6def7faef9861118e4a9d5997a573b42eb4 Mon Sep 17 00:00:00 2001 From: MariiaNebesnova Date: Tue, 24 Aug 2021 11:22:08 +0300 Subject: [PATCH 2/5] refactor project structure --- package-lock.json | 2 +- .../blocks/autoFind/autoFindProvider/AutoFindProvider.jsx | 6 +++--- .../blocks/autoFind/{ => components/autoFind}/AutoFind.jsx | 4 ++-- .../blocks/autoFind/{ => components/autoFind}/slider.less | 0 src/js/blocks/autoFind/{ => components/autoFind}/styles.jsx | 0 .../{ => components}/xPathSettings/XPathSettings.jsx | 3 ++- .../contentScripts/contextMenu/contextmenu.js | 0 .../{autoFindProvider => }/contentScripts/generationData.js | 0 .../{autoFindProvider => }/contentScripts/highlight.css | 0 .../{autoFindProvider => }/contentScripts/highlight.js | 0 .../{autoFindProvider => }/contentScripts/highlightOrder.js | 0 .../{autoFindProvider => }/contentScripts/pageData.js | 0 .../reportProblemPopup/reportProblemPopup.css | 0 .../contentScripts/reportProblemPopup/reportProblemPopup.js | 0 .../{autoFindProvider => }/contentScripts/urlListener.js | 0 .../autoFind/{autoFindProvider => utils}/connector.js | 0 .../{autoFindProvider => utils}/generationClassesMap.js | 0 .../{autoFindProvider => utils}/pageDataHandlers.js | 2 +- .../autoFind/{autoFindProvider => utils}/pageObject.js | 0 src/js/main.jsx | 2 +- webpack.config.js | 4 ++-- 21 files changed, 12 insertions(+), 11 deletions(-) rename src/js/blocks/autoFind/{ => components/autoFind}/AutoFind.jsx (96%) rename src/js/blocks/autoFind/{ => components/autoFind}/slider.less (100%) rename src/js/blocks/autoFind/{ => components/autoFind}/styles.jsx (100%) rename src/js/blocks/autoFind/{ => components}/xPathSettings/XPathSettings.jsx (95%) rename src/js/blocks/autoFind/{autoFindProvider => }/contentScripts/contextMenu/contextmenu.js (100%) rename src/js/blocks/autoFind/{autoFindProvider => }/contentScripts/generationData.js (100%) rename src/js/blocks/autoFind/{autoFindProvider => }/contentScripts/highlight.css (100%) rename src/js/blocks/autoFind/{autoFindProvider => }/contentScripts/highlight.js (100%) rename src/js/blocks/autoFind/{autoFindProvider => }/contentScripts/highlightOrder.js (100%) rename src/js/blocks/autoFind/{autoFindProvider => }/contentScripts/pageData.js (100%) rename src/js/blocks/autoFind/{autoFindProvider => }/contentScripts/reportProblemPopup/reportProblemPopup.css (100%) rename src/js/blocks/autoFind/{autoFindProvider => }/contentScripts/reportProblemPopup/reportProblemPopup.js (100%) rename src/js/blocks/autoFind/{autoFindProvider => }/contentScripts/urlListener.js (100%) rename src/js/blocks/autoFind/{autoFindProvider => utils}/connector.js (100%) rename src/js/blocks/autoFind/{autoFindProvider => utils}/generationClassesMap.js (100%) rename src/js/blocks/autoFind/{autoFindProvider => utils}/pageDataHandlers.js (98%) rename src/js/blocks/autoFind/{autoFindProvider => utils}/pageObject.js (100%) diff --git a/package-lock.json b/package-lock.json index 9aa708e..2aa0d87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "jdi-react-extension", - "version": "3.0.42", + "version": "3.0.44", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx b/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx index cc9e835..dc11d97 100644 --- a/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx +++ b/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx @@ -9,10 +9,10 @@ import { runDocumentListeners, generatePageObject, requestGenerationData, -} from "./pageDataHandlers"; +} from "./../utils/pageDataHandlers"; import { reportProblemPopup } from "./contentScripts/reportProblemPopup/reportProblemPopup"; -import { JDIclasses, getJdiClassName } from "./generationClassesMap"; -import { connector, sendMessage } from "./connector"; +import { JDIclasses, getJdiClassName } from "./../utils/generationClassesMap"; +import { connector, sendMessage } from "../utils/connector"; /* global chrome */ diff --git a/src/js/blocks/autoFind/AutoFind.jsx b/src/js/blocks/autoFind/components/autoFind/AutoFind.jsx similarity index 96% rename from src/js/blocks/autoFind/AutoFind.jsx rename to src/js/blocks/autoFind/components/autoFind/AutoFind.jsx index a6a33f7..e176ce7 100644 --- a/src/js/blocks/autoFind/AutoFind.jsx +++ b/src/js/blocks/autoFind/components/autoFind/AutoFind.jsx @@ -1,12 +1,12 @@ import React, { useEffect, useState } from "react"; import injectSheet from "react-jss"; import { Slider, Row, Alert } from "antd"; -import { useAutoFind, xpathGenerationStatus } from "./autoFindProvider/AutoFindProvider"; +import { useAutoFind, xpathGenerationStatus } from "../../autoFindProvider/AutoFindProvider"; +import { XPathSettings } from "../xPathSettings/XPathSettings"; import "./slider.less"; import Layout, { Content, Footer } from "antd/lib/layout/layout"; import { styles } from "./styles"; -import { XPathSettings } from "./xPathSettings/XPathSettings"; let sliderTimer; const AutoFind = ({ classes }) => { diff --git a/src/js/blocks/autoFind/slider.less b/src/js/blocks/autoFind/components/autoFind/slider.less similarity index 100% rename from src/js/blocks/autoFind/slider.less rename to src/js/blocks/autoFind/components/autoFind/slider.less diff --git a/src/js/blocks/autoFind/styles.jsx b/src/js/blocks/autoFind/components/autoFind/styles.jsx similarity index 100% rename from src/js/blocks/autoFind/styles.jsx rename to src/js/blocks/autoFind/components/autoFind/styles.jsx diff --git a/src/js/blocks/autoFind/xPathSettings/XPathSettings.jsx b/src/js/blocks/autoFind/components/xPathSettings/XPathSettings.jsx similarity index 95% rename from src/js/blocks/autoFind/xPathSettings/XPathSettings.jsx rename to src/js/blocks/autoFind/components/xPathSettings/XPathSettings.jsx index b396261..f09573e 100644 --- a/src/js/blocks/autoFind/xPathSettings/XPathSettings.jsx +++ b/src/js/blocks/autoFind/components/xPathSettings/XPathSettings.jsx @@ -1,10 +1,11 @@ import React from "react"; -import { useAutoFind } from "../autoFindProvider/AutoFindProvider"; import { Collapse, InputNumber } from "antd"; import CollapsePanel from "antd/lib/collapse/CollapsePanel"; import Checkbox from "antd/lib/checkbox/Checkbox"; +import { useAutoFind } from "../../autoFindProvider/AutoFindProvider"; + export const XPathSettings = () => { const [{ xpathConfig }, { setXpathConfig }] = useAutoFind(); diff --git a/src/js/blocks/autoFind/autoFindProvider/contentScripts/contextMenu/contextmenu.js b/src/js/blocks/autoFind/contentScripts/contextMenu/contextmenu.js similarity index 100% rename from src/js/blocks/autoFind/autoFindProvider/contentScripts/contextMenu/contextmenu.js rename to src/js/blocks/autoFind/contentScripts/contextMenu/contextmenu.js diff --git a/src/js/blocks/autoFind/autoFindProvider/contentScripts/generationData.js b/src/js/blocks/autoFind/contentScripts/generationData.js similarity index 100% rename from src/js/blocks/autoFind/autoFindProvider/contentScripts/generationData.js rename to src/js/blocks/autoFind/contentScripts/generationData.js diff --git a/src/js/blocks/autoFind/autoFindProvider/contentScripts/highlight.css b/src/js/blocks/autoFind/contentScripts/highlight.css similarity index 100% rename from src/js/blocks/autoFind/autoFindProvider/contentScripts/highlight.css rename to src/js/blocks/autoFind/contentScripts/highlight.css diff --git a/src/js/blocks/autoFind/autoFindProvider/contentScripts/highlight.js b/src/js/blocks/autoFind/contentScripts/highlight.js similarity index 100% rename from src/js/blocks/autoFind/autoFindProvider/contentScripts/highlight.js rename to src/js/blocks/autoFind/contentScripts/highlight.js diff --git a/src/js/blocks/autoFind/autoFindProvider/contentScripts/highlightOrder.js b/src/js/blocks/autoFind/contentScripts/highlightOrder.js similarity index 100% rename from src/js/blocks/autoFind/autoFindProvider/contentScripts/highlightOrder.js rename to src/js/blocks/autoFind/contentScripts/highlightOrder.js diff --git a/src/js/blocks/autoFind/autoFindProvider/contentScripts/pageData.js b/src/js/blocks/autoFind/contentScripts/pageData.js similarity index 100% rename from src/js/blocks/autoFind/autoFindProvider/contentScripts/pageData.js rename to src/js/blocks/autoFind/contentScripts/pageData.js diff --git a/src/js/blocks/autoFind/autoFindProvider/contentScripts/reportProblemPopup/reportProblemPopup.css b/src/js/blocks/autoFind/contentScripts/reportProblemPopup/reportProblemPopup.css similarity index 100% rename from src/js/blocks/autoFind/autoFindProvider/contentScripts/reportProblemPopup/reportProblemPopup.css rename to src/js/blocks/autoFind/contentScripts/reportProblemPopup/reportProblemPopup.css diff --git a/src/js/blocks/autoFind/autoFindProvider/contentScripts/reportProblemPopup/reportProblemPopup.js b/src/js/blocks/autoFind/contentScripts/reportProblemPopup/reportProblemPopup.js similarity index 100% rename from src/js/blocks/autoFind/autoFindProvider/contentScripts/reportProblemPopup/reportProblemPopup.js rename to src/js/blocks/autoFind/contentScripts/reportProblemPopup/reportProblemPopup.js diff --git a/src/js/blocks/autoFind/autoFindProvider/contentScripts/urlListener.js b/src/js/blocks/autoFind/contentScripts/urlListener.js similarity index 100% rename from src/js/blocks/autoFind/autoFindProvider/contentScripts/urlListener.js rename to src/js/blocks/autoFind/contentScripts/urlListener.js diff --git a/src/js/blocks/autoFind/autoFindProvider/connector.js b/src/js/blocks/autoFind/utils/connector.js similarity index 100% rename from src/js/blocks/autoFind/autoFindProvider/connector.js rename to src/js/blocks/autoFind/utils/connector.js diff --git a/src/js/blocks/autoFind/autoFindProvider/generationClassesMap.js b/src/js/blocks/autoFind/utils/generationClassesMap.js similarity index 100% rename from src/js/blocks/autoFind/autoFindProvider/generationClassesMap.js rename to src/js/blocks/autoFind/utils/generationClassesMap.js diff --git a/src/js/blocks/autoFind/autoFindProvider/pageDataHandlers.js b/src/js/blocks/autoFind/utils/pageDataHandlers.js similarity index 98% rename from src/js/blocks/autoFind/autoFindProvider/pageDataHandlers.js rename to src/js/blocks/autoFind/utils/pageDataHandlers.js index bf96f83..39254d2 100644 --- a/src/js/blocks/autoFind/autoFindProvider/pageDataHandlers.js +++ b/src/js/blocks/autoFind/utils/pageDataHandlers.js @@ -6,7 +6,7 @@ import { getPageData } from "./contentScripts/pageData"; import { urlListener } from "./contentScripts/urlListener"; import { getPage, predictedToConvert } from "./pageObject"; import { autoFindStatus } from "./AutoFindProvider"; -import { highlightOrder } from "./contentScripts/highlightOrder"; +import { highlightOrder } from "./../contentScripts/highlightOrder"; /* global chrome*/ let documentListenersStarted; diff --git a/src/js/blocks/autoFind/autoFindProvider/pageObject.js b/src/js/blocks/autoFind/utils/pageObject.js similarity index 100% rename from src/js/blocks/autoFind/autoFindProvider/pageObject.js rename to src/js/blocks/autoFind/utils/pageObject.js diff --git a/src/js/main.jsx b/src/js/main.jsx index 4a8d970..a33a818 100644 --- a/src/js/main.jsx +++ b/src/js/main.jsx @@ -19,7 +19,7 @@ import "antd/lib/style/themes/default.less"; import "antd/dist/antd.less"; import "../css/main.less"; import LogComponentWrapper from "./blocks/log/LogComponent"; -import AutoFind from "./blocks/autoFind/AutoFind"; +import AutoFind from "./blocks/autoFind/components/autoFind/AutoFind"; import { AutoFindProvider } from "./blocks/autoFind/autoFindProvider/AutoFindProvider"; const styles = { diff --git a/webpack.config.js b/webpack.config.js index 470d5f0..5f49f0d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -131,7 +131,7 @@ const indexConfig = { const highlightCssConfig = { entry: - "./src/js/blocks/autoFind/autoFindProvider/contentScripts/highlight.css", + "./src/js/blocks/autoFind/contentScripts/highlight.css", mode: "production", plugins: [new MiniCssExtractPlugin({ filename: "highlight.css" })], module: { @@ -154,7 +154,7 @@ const highlightCssConfig = { const reportProblemPopupCssConfig = { entry: - "./src/js/blocks/autoFind/autoFindProvider/contentScripts/reportProblemPopup/reportProblemPopup.css", + "./src/js/blocks/autoFind/contentScripts/reportProblemPopup/reportProblemPopup.css", mode: "production", plugins: [new MiniCssExtractPlugin({ filename: "reportproblempopup.css" })], module: { From eba5f5cc7f9459106d3de3274ee07fb09534534f Mon Sep 17 00:00:00 2001 From: MariiaNebesnova Date: Thu, 26 Aug 2021 15:21:45 +0300 Subject: [PATCH 3/5] rework plugin ux --- src/css/main.less | 148 +-------------- src/icons/clear-all.svg | 5 + src/icons/download.svg | 5 + src/icons/index.js | 2 + src/icons/question-filled.svg | 4 + .../autoFindProvider/AutoFindProvider.jsx | 50 ++--- .../blocks/autoFind/components/ControlBar.jsx | 58 ++++++ .../autoFind/components/GenerationButtons.jsx | 40 ++++ .../components/PerceptionTreshold.jsx | 50 +++++ src/js/blocks/autoFind/components/Result.jsx | 65 +++++++ .../{xPathSettings => }/XPathSettings.jsx | 2 +- .../blocks/autoFind/components/autoFind.less | 172 +++++++++++++++++ .../autoFind/components/autoFind/AutoFind.jsx | 173 +++--------------- .../autoFind/components/autoFind/slider.less | 15 +- .../autoFind/components/autoFind/styles.jsx | 11 -- .../blocks/autoFind/utils/pageDataHandlers.js | 17 +- src/js/main.jsx | 46 ++--- webpack.config.js | 5 +- 18 files changed, 485 insertions(+), 383 deletions(-) create mode 100644 src/icons/clear-all.svg create mode 100644 src/icons/download.svg create mode 100644 src/icons/question-filled.svg create mode 100644 src/js/blocks/autoFind/components/ControlBar.jsx create mode 100644 src/js/blocks/autoFind/components/GenerationButtons.jsx create mode 100644 src/js/blocks/autoFind/components/PerceptionTreshold.jsx create mode 100644 src/js/blocks/autoFind/components/Result.jsx rename src/js/blocks/autoFind/components/{xPathSettings => }/XPathSettings.jsx (96%) create mode 100644 src/js/blocks/autoFind/components/autoFind.less delete mode 100644 src/js/blocks/autoFind/components/autoFind/styles.jsx diff --git a/src/css/main.less b/src/css/main.less index a57ec99..5907392 100644 --- a/src/css/main.less +++ b/src/css/main.less @@ -12,145 +12,7 @@ ul { #chromeExtensionReactApp { height: 100%; font-family: 'Noto Sans', sans-serif; - background-color: #F7FAFF; - overflow-x: hidden; -} - -.jdn { - - /* - COMMON CLASSES - */ - &__hidden { height: 0; overflow: hidden; } - - /* - HEADER - */ - &__header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px 30px; - background-color: #000; - } - - &__header-title { - flex-grow: 0.8; - font-size: 13px; - line-height: 1.3; - } - - &__header-text { - margin: 0; - padding: 0; - font-size: 13px; - color: #fff; - } - - &__header-version { - color: #fff; - } - - &__header-link { - font-size: 12px; - font-weight: 700; - color: #fff; - } - - /* - BUTTONS - */ - &__button { - position: relative; - height: 36px; - margin: 16px 0 25px 16px; - padding: 0 15px 0 35px; - font-size: 14px; - font-weight: 700; - color: #fff; - background-color: #1582D8; - border-radius: 4px; - border: none; - cursor: pointer; - } - - &__button--reset, - &__button--generate { - color: #1582D8; - background-color: #fff; - border: 1px solid #1582D8; - } - - &__button--identify::after, - &__button--reset::after, - &__button--generate::after { - content: ""; - position: absolute; - top: 9px; - left: 9px; - width: 17px; - height: 17px; - } - - &__button--identify::after {background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='5' stroke='white' stroke-width='2'/%3E%3Cpath d='M16.0707 16.0708C16.4612 15.6802 16.4612 15.0471 16.0707 14.6565L11.4142 10L9.99997 11.4142L14.6565 16.0708C15.047 16.4613 15.6802 16.4613 16.0707 16.0708Z' fill='white'/%3E%3C/svg%3E%0A");} - &__button--reset::after {background-image: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='1' width='16' height='3' rx='1' fill='%231582D8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 6H14V16C14 17.1046 13.1046 18 12 18H4C2.89543 18 2 17.1046 2 16V6ZM5 9C5 8.44772 5.44772 8 6 8C6.55228 8 7 8.44772 7 9V15C7 15.5523 6.55228 16 6 16C5.44772 16 5 15.5523 5 15V9ZM10 8C9.44772 8 9 8.44772 9 9V15C9 15.5523 9.44772 16 10 16C10.5523 16 11 15.5523 11 15V9C11 8.44772 10.5523 8 10 8Z' fill='%231582D8'/%3E%3Crect x='5' width='6' height='2' rx='1' fill='%231582D8'/%3E%3C/svg%3E%0A");} - &__button--generate::after {background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='14' width='16' height='2' rx='1' fill='%231582D8'/%3E%3Crect x='7' y='10' width='10' height='2' rx='1' transform='rotate(-90 7 10)' fill='%231582D8'/%3E%3Cpath d='M4 7L7.29289 10.2929C7.68342 10.6834 8.31658 10.6834 8.70711 10.2929L12 7' stroke='%231582D8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");} - - /* - PERCEPTION TRESHOLD - */ - &__perception-treshold { - margin: 0 0 0 16px; - font-size: 13px; - font-weight: 700; - } - - &__perception-min, - &__perception-max { - font-weight: 400; - line-height: 1.75; - } - - &__perception-min { margin: 0 7px 0 0; } - &__perception-max { margin: 0 0 0 7px; } - - /* - SLIDER - */ - &__slider { - display: flex; - margin: 0 16px 10px 0; - } - - /* - RESULTS - */ - &__result { - padding: 17px 16px; - border-top: 1px solid #C4C4C4; - border-bottom: 1px solid #C4C4C4; - } - &__result-status { - font-size: 18px; - font-weight: 700; - color: #1582D8; - } - &__result-indicators { - display: flex; - } - &__result-indicator { - margin: 0 36px 0 0; - } - &__result-count { - display: block; - font-size: 36px; - } - - /* - URL LIST - */ - &__urls-list { margin: 0 0 0 10px; } - + background-color: #f7faff; } .ant-layout { background-color: inherit; } @@ -242,10 +104,10 @@ button svg { cursor: pointer; } -.ant-btn-primary { - color: #fff; - border: none; -} +// .ant-btn-primary { +// color: #fff; +// border: none; +// } .ant-btn-sm { font-size: 12px; diff --git a/src/icons/clear-all.svg b/src/icons/clear-all.svg new file mode 100644 index 0000000..0ae079f --- /dev/null +++ b/src/icons/clear-all.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/icons/download.svg b/src/icons/download.svg new file mode 100644 index 0000000..6e17202 --- /dev/null +++ b/src/icons/download.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/icons/index.js b/src/icons/index.js index 2caf5bb..4981ff8 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -8,6 +8,7 @@ const arrowDown = require("./arrow-down.png"); const errorIcon = require("./error.png"); const successIcon = require("./success.png"); const warningIcon = require("./warning.png"); +const questionFilled = require("./question-filled.svg"); export { settings, @@ -20,4 +21,5 @@ export { errorIcon, successIcon, warningIcon, + questionFilled, }; diff --git a/src/icons/question-filled.svg b/src/icons/question-filled.svg new file mode 100644 index 0000000..c2ccae2 --- /dev/null +++ b/src/icons/question-filled.svg @@ -0,0 +1,4 @@ + +​​​​​​​ + + \ No newline at end of file diff --git a/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx b/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx index dc11d97..3f72fc9 100644 --- a/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx +++ b/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx @@ -10,17 +10,16 @@ import { generatePageObject, requestGenerationData, } from "./../utils/pageDataHandlers"; -import { reportProblemPopup } from "./contentScripts/reportProblemPopup/reportProblemPopup"; import { JDIclasses, getJdiClassName } from "./../utils/generationClassesMap"; import { connector, sendMessage } from "../utils/connector"; -/* global chrome */ - export const autoFindStatus = { noStatus: "", + loading: "Loading...", success: "Successful!", + removed: "Removed", error: "An error occured", - blocked: "Script is blocked. Close all popups" + blocked: "Script is blocked. Close all popups", }; export const xpathGenerationStatus = { @@ -41,15 +40,13 @@ const AutoFindProvider = inject("mainModel")( const [perception, setPerception] = useState(0.5); const [unreachableNodes, setUnreachableNodes] = useState([]); const [availableForGeneration, setAvailableForGeneration] = useState([]); - const [xpathStatus, setXpathStatus] = useState( - xpathGenerationStatus.noStatus - ); + const [xpathStatus, setXpathStatus] = useState(xpathGenerationStatus.noStatus); const [unactualPrediction, setUnactualPrediction] = useState(false); const [xpathConfig, setXpathConfig] = useState({ - "maximum_generation_time": 10, - "allow_indexes_at_the_beginning": false, - "allow_indexes_in_the_middle": false, - "allow_indexes_at_the_end": true + maximum_generation_time: 10, + allow_indexes_at_the_beginning: false, + allow_indexes_in_the_middle: false, + allow_indexes_at_the_end: true, }); connector.onerror = () => { @@ -121,13 +118,6 @@ const AutoFindProvider = inject("mainModel")( }); }; - const reportProblem = (predictedElements) => { - chrome.storage.sync.set( - { predictedElements }, - connector.attachContentScript(reportProblemPopup) - ); - }; - const updateElements = ([predicted, page]) => { const rounded = predicted.map((el) => ({ ...el, @@ -141,12 +131,14 @@ const AutoFindProvider = inject("mainModel")( const identifyElements = () => { setAllowIdentifyElements(!allowIdentifyElements); + setStatus(autoFindStatus.loading); getElements(updateElements, setStatus); }; const removeHighlighs = () => { const callback = () => { clearElementsState(); + setStatus(autoFindStatus.removed); }; sendMessage.killHighlight(null, callback); @@ -194,15 +186,12 @@ const AutoFindProvider = inject("mainModel")( !e.skipGeneration && !e.hidden && !unreachableNodes.includes(e.element_id) - ).value() + ) + .value() ); }; - highlightElements( - predictedElements, - onHighlighted, - perception - ); + highlightElements(predictedElements, onHighlighted, perception); } }, [predictedElements, perception]); @@ -214,16 +203,14 @@ const AutoFindProvider = inject("mainModel")( useEffect(() => { if (!availableForGeneration) return; - const noXpath = availableForGeneration.filter( - (element) => !element.xpath - ); + const noXpath = availableForGeneration.filter((element) => !element.xpath); if (!noXpath.length) return; setXpathStatus(xpathGenerationStatus.started); requestGenerationData(noXpath, xpathConfig, ({ generationData, unreachableNodes }) => { setAvailableForGeneration( _.chain(availableForGeneration) .map((el) => _.chain(generationData).find({ element_id: el.element_id }).merge(el).value()) - .differenceBy(unreachableNodes, 'element_id') + .differenceBy(unreachableNodes, "element_id") .value() ); setUnreachableNodes(unreachableNodes); @@ -255,16 +242,11 @@ const AutoFindProvider = inject("mainModel")( removeHighlighs, generateAndDownload, onChangePerception, - reportProblem, setXpathConfig, }, ]; - return ( - - {children} - - ); + return {children}; }) ); diff --git a/src/js/blocks/autoFind/components/ControlBar.jsx b/src/js/blocks/autoFind/components/ControlBar.jsx new file mode 100644 index 0000000..39ee468 --- /dev/null +++ b/src/js/blocks/autoFind/components/ControlBar.jsx @@ -0,0 +1,58 @@ +import { Divider, Space } from "antd"; +import React, { useState, useEffect } from "react"; +import { useAutoFind } from "../autoFindProvider/AutoFindProvider"; +import { reportProblem } from "../utils/pageDataHandlers"; + +export const ControlBar = () => { + const [backendVer, setBackendVer] = useState(""); + const [pluginVer, setPluginVer] = useState(""); + const [{ predictedElements, allowRemoveElements }] = useAutoFind(); + + useEffect(() => { + const fetchData = async () => { + const result = await fetch("http:localhost:5000/build", { + method: "GET", + }); + const r = await result.json(); + setBackendVer(r); + }; + + fetchData(); + + const manifest = chrome.runtime.getManifest(); + setPluginVer(manifest.version); + }, []); + + const handleReportProblem = () => { + reportProblem(predictedElements); + }; + + return ( + +
+

JDN

+
+ } + > + version {pluginVer} + backend {backendVer} + +
+
+ + + + Readme + + + Upgrade + + + + ); +}; diff --git a/src/js/blocks/autoFind/components/GenerationButtons.jsx b/src/js/blocks/autoFind/components/GenerationButtons.jsx new file mode 100644 index 0000000..2a1ba0e --- /dev/null +++ b/src/js/blocks/autoFind/components/GenerationButtons.jsx @@ -0,0 +1,40 @@ +import Icon, { SearchOutlined } from "@ant-design/icons"; +import { Button, Space } from "antd"; +import React from "react"; +import { autoFindStatus, useAutoFind, xpathGenerationStatus } from "../autoFindProvider/AutoFindProvider"; + +// import "./GenerationButtons.less"; +import ClearAllSvg from "../../../../icons/clear-all.svg"; +import DownloadSvg from "../../../../icons/download.svg"; +import { Content } from "antd/lib/layout/layout"; + +export const GenerationButtons = () => { + const [ + { status, allowIdentifyElements, allowRemoveElements, xpathStatus }, + { identifyElements, removeHighlighs, generateAndDownload }, + ] = useAutoFind(); + + return ( + + + + + + + + ); +}; diff --git a/src/js/blocks/autoFind/components/PerceptionTreshold.jsx b/src/js/blocks/autoFind/components/PerceptionTreshold.jsx new file mode 100644 index 0000000..582ea7a --- /dev/null +++ b/src/js/blocks/autoFind/components/PerceptionTreshold.jsx @@ -0,0 +1,50 @@ +import React from "react"; +import Text from "antd/lib/typography/Text"; +import { Col, Row, Slider, Tooltip } from "antd"; +import { useAutoFind } from "../autoFindProvider/AutoFindProvider"; +import { useState } from "react"; +import { Content } from "antd/lib/layout/layout"; +import Icon from "@ant-design/icons"; + +import QuestionFilled from "../../../../icons/question-filled.svg"; + +let sliderTimer; +export const PerceptionTreshold = () => { + const [{ perception }, { onChangePerception }] = useAutoFind(); + const [perceptionOutput, setPerceptionOutput] = useState(0.5); + + const handlePerceptionChange = (value) => { + setPerceptionOutput(value); + if (sliderTimer) clearTimeout(sliderTimer); + sliderTimer = setTimeout(() => { + onChangePerception(value); + }, 300); + }; + + return ( + + + Perception treshold: {perception} + + + + + + + 0.0 + + + + + + 1.0 + + + + ); +}; diff --git a/src/js/blocks/autoFind/components/Result.jsx b/src/js/blocks/autoFind/components/Result.jsx new file mode 100644 index 0000000..cf94ccb --- /dev/null +++ b/src/js/blocks/autoFind/components/Result.jsx @@ -0,0 +1,65 @@ +import { Space } from "antd"; +import { Content } from "antd/lib/layout/layout"; +import Text from "antd/lib/typography/Text"; +import React from "react"; +import { autoFindStatus, useAutoFind } from "../autoFindProvider/AutoFindProvider"; + +const hideStatus = [autoFindStatus.loading, autoFindStatus.removed]; + +export const Result = () => { + const [ + { + status, + predictedElements, + pageElements, + allowRemoveElements, + unreachableNodes, + availableForGeneration, + xpathStatus, + unactualPrediction, + }, + ] = useAutoFind(); + + const getPredictedElements = () => { + return predictedElements && allowRemoveElements ? predictedElements.length : 0; + }; + + const renderStatus = () => { + if (hideStatus.includes(status)) return null; + if (unactualPrediction) { + return ( + + Prediction is not actual anymore. Please, remove highlight and re-run identification. + + ); + } else if (unreachableNodes && unreachableNodes.length) { + return {`${unreachableNodes.length} controls are unreachable due to DOM updates.`}; + } else { + return {status}; + } + }; + + return ( + + ); +}; diff --git a/src/js/blocks/autoFind/components/xPathSettings/XPathSettings.jsx b/src/js/blocks/autoFind/components/XPathSettings.jsx similarity index 96% rename from src/js/blocks/autoFind/components/xPathSettings/XPathSettings.jsx rename to src/js/blocks/autoFind/components/XPathSettings.jsx index f09573e..de01a9c 100644 --- a/src/js/blocks/autoFind/components/xPathSettings/XPathSettings.jsx +++ b/src/js/blocks/autoFind/components/XPathSettings.jsx @@ -4,7 +4,7 @@ import { Collapse, InputNumber } from "antd"; import CollapsePanel from "antd/lib/collapse/CollapsePanel"; import Checkbox from "antd/lib/checkbox/Checkbox"; -import { useAutoFind } from "../../autoFindProvider/AutoFindProvider"; +import { useAutoFind } from "../autoFindProvider/AutoFindProvider"; export const XPathSettings = () => { const [{ xpathConfig }, { setXpathConfig }] = useAutoFind(); diff --git a/src/js/blocks/autoFind/components/autoFind.less b/src/js/blocks/autoFind/components/autoFind.less new file mode 100644 index 0000000..9ed5f2e --- /dev/null +++ b/src/js/blocks/autoFind/components/autoFind.less @@ -0,0 +1,172 @@ +@primary-color: #1582d8; +@primary-active-color: #0f73c1; +@disabled-color: #b2b5c2; + +.jdn__autofind { + min-width: 694px; + overflow-x: auto; + background-color: #f7faff; + + .ant-btn, + .ant-btn:focus, + .ant-btn:active { + height: 36px; + font-size: 14px; + font-weight: 700; + border: 1px solid @primary-color; + color: @primary-color; + background: transparent; + + .anticon { + vertical-align: baseline; + } + } + + .ant-btn:hover { + color: @primary-active-color; + border: 1px solid @primary-active-color; + background: transparent; + } + + .ant-btn-primary { + color: #fff; + background: @primary-color; + } + + .ant-btn-primary:hover { + color: #fff; + background-color: @primary-active-color; + } + + .ant-btn-primary[disabled], + .ant-btn-primary[disabled]:hover, + .ant-btn-primary[disabled]:focus, + .ant-btn-primary[disabled]:active { + background: @disabled-color; + border-color: @disabled-color; + } + + .ant-btn.ant-btn-loading::before { + display: none; + } + + .ant-space-vertical { + width: 100%; + } + + .ant-space-align-center { + align-items: flex-start; + } + + .ant-layout-content { + padding: 0 16px; + } + + .ant-typography-success { + color: @primary-color !important; + } + + .ant-typography-warning { + color: #d8a115; + } + + .ant-typography-danger { + color: #d82c15; + } + + .jdn { + /* + COMMON CLASSES + */ + &__hidden { + height: 0; + overflow: hidden; + } + + /* + HEADER + */ + &__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 30px; + background-color: #000; + } + + &__header-title { + flex-grow: 0.8; + font-size: 13px; + line-height: 1.3; + } + + &__header-text { + margin: 0; + padding: 0; + font-size: 13px; + color: #fff; + } + + &__header-version { + color: #fff; + } + + &__header-link { + font-size: 12px; + font-weight: 700; + color: #fff; + } + + &__content { + margin: 16px 0; + } + + &__divider { + margin: 16px 0; + background-color: #000; + opacity: 0.2; + } + + &__perception-treshold { + font-size: 13px; + line-height: 17.71px; + } + + /* + SLIDER + */ + &__slider { + display: flex; + + &__perception-min { + text-align: left; + } + + &__perception-max { + text-align: right; + } + } + + /* + RESULTS + */ + + &__result-status { + min-height: 25px; + font-size: 18px; + font-weight: 700; + color: @primary-color; + } + &__result-count { + display: block; + font-size: 36px; + } + + /* + URL LIST + */ + &__urls-list { + margin: 0 0 0 10px; + } + } +} diff --git a/src/js/blocks/autoFind/components/autoFind/AutoFind.jsx b/src/js/blocks/autoFind/components/autoFind/AutoFind.jsx index e176ce7..e32431a 100644 --- a/src/js/blocks/autoFind/components/autoFind/AutoFind.jsx +++ b/src/js/blocks/autoFind/components/autoFind/AutoFind.jsx @@ -1,158 +1,35 @@ -import React, { useEffect, useState } from "react"; -import injectSheet from "react-jss"; -import { Slider, Row, Alert } from "antd"; -import { useAutoFind, xpathGenerationStatus } from "../../autoFindProvider/AutoFindProvider"; -import { XPathSettings } from "../xPathSettings/XPathSettings"; +import React from "react"; import "./slider.less"; -import Layout, { Content, Footer } from "antd/lib/layout/layout"; -import { styles } from "./styles"; +import "./../autoFind.less"; -let sliderTimer; -const AutoFind = ({ classes }) => { - const [perceptionOutput, setPerceptionOutput] = useState(0.5); - const [backendVer, setBackendVer] = useState(""); - const [ - { - status, - predictedElements, - pageElements, - allowIdentifyElements, - allowRemoveElements, - perception, - unreachableNodes, - availableForGeneration, - xpathStatus, - unactualPrediction, - }, - { identifyElements, removeHighlighs, generateAndDownload, onChangePerception, reportProblem }, - ] = useAutoFind(); - - useEffect(() => { - const fetchData = async () => { - const result = await fetch("http:localhost:5000/build", { - method: "GET", - }); - const r = await result.json(); - setBackendVer(r); - }; - - fetchData(); - }, []); - - const handleGetElements = () => { - identifyElements(); - }; - - const handleRemove = () => { - removeHighlighs(); - }; - - const handleGenerate = () => { - generateAndDownload(perception); - }; - - const handlePerceptionChange = (value) => { - setPerceptionOutput(value); - if (sliderTimer) clearTimeout(sliderTimer); - sliderTimer = setTimeout(() => { - onChangePerception(value); - }, 300); - }; - - const getPredictedElements = () => { - return predictedElements && allowRemoveElements ? predictedElements.length : 0; - }; - - const handleReportProblem = () => { - reportProblem(predictedElements); - }; +import Layout, { Header } from "antd/lib/layout/layout"; +import { GenerationButtons } from "../GenerationButtons"; +import { PerceptionTreshold } from "../PerceptionTreshold"; +import { Result } from "../Result"; +import { Divider, Space } from "antd"; +import { ControlBar } from "../ControlBar"; +import { XPathSettings } from "../XPathSettings"; +const AutoFind = () => { return ( - - - - - - - + +
+ +
+ } + className="jdn__content" + > + + -
- -
- - - -
-
- - - + + ); }; -const AutoFindWrapper = injectSheet(styles)(AutoFind); -export default AutoFindWrapper; +export default AutoFind; diff --git a/src/js/blocks/autoFind/components/autoFind/slider.less b/src/js/blocks/autoFind/components/autoFind/slider.less index 3a1e113..66f0148 100644 --- a/src/js/blocks/autoFind/components/autoFind/slider.less +++ b/src/js/blocks/autoFind/components/autoFind/slider.less @@ -1,3 +1,5 @@ +@import "../autoFind.less"; + .ant-slider-track { height: 2px; background-color: #C4C4C4; @@ -5,7 +7,7 @@ .ant-slider-rail { height: 2px; - background-color: #1582D8; + background-color: @primary-color; } .ant-slider { @@ -17,16 +19,19 @@ background-color: #C4C4C4; } .ant-slider-rail { - background-color: #1582D8; + background-color: @primary-active-color; } } -.ant-slider-handle, -.ant-slider-handle:focus { +.ant-slider-handle { width: 15px; height: 15px; margin: -6px 0 0; border: none; - background-color: #1582D8; + background-color: @primary-color; box-shadow: none; } + +.ant-slider-handle:focus { + background-color: @primary-active-color; +} diff --git a/src/js/blocks/autoFind/components/autoFind/styles.jsx b/src/js/blocks/autoFind/components/autoFind/styles.jsx deleted file mode 100644 index 50d2a03..0000000 --- a/src/js/blocks/autoFind/components/autoFind/styles.jsx +++ /dev/null @@ -1,11 +0,0 @@ -export const styles = { - content: { - backgroundColor: '#fff', - }, - footer: { - position: 'fixed', - right: 0, - bottom: 0, - backgroundColor: '#fff', - } -} \ No newline at end of file diff --git a/src/js/blocks/autoFind/utils/pageDataHandlers.js b/src/js/blocks/autoFind/utils/pageDataHandlers.js index 39254d2..5a14e06 100644 --- a/src/js/blocks/autoFind/utils/pageDataHandlers.js +++ b/src/js/blocks/autoFind/utils/pageDataHandlers.js @@ -1,12 +1,13 @@ import { connector, sendMessage } from "./connector"; -import { runContextMenu } from "./contentScripts/contextMenu/contextmenu"; -import { getGenerationAttributes } from "./contentScripts/generationData"; -import { highlightOnPage } from "./contentScripts/highlight"; -import { getPageData } from "./contentScripts/pageData"; -import { urlListener } from "./contentScripts/urlListener"; +import { runContextMenu } from "./../contentScripts/contextMenu/contextmenu"; +import { getGenerationAttributes } from "./../contentScripts/generationData"; +import { highlightOnPage } from "./../contentScripts/highlight"; +import { getPageData } from "./../contentScripts/pageData"; +import { urlListener } from "./../contentScripts/urlListener"; import { getPage, predictedToConvert } from "./pageObject"; -import { autoFindStatus } from "./AutoFindProvider"; +import { autoFindStatus } from "./../autoFindProvider/AutoFindProvider"; import { highlightOrder } from "./../contentScripts/highlightOrder"; +import { reportProblemPopup } from "../contentScripts/reportProblemPopup/reportProblemPopup"; /* global chrome*/ let documentListenersStarted; @@ -165,3 +166,7 @@ export const generatePageObject = (elements, mainModel) => { mainModel.conversionModel.downloadPageCode(page, ".java"); }); }; + +export const reportProblem = (predictedElements) => { + chrome.storage.sync.set({ predictedElements }, connector.attachContentScript(reportProblemPopup)); +}; diff --git a/src/js/main.jsx b/src/js/main.jsx index a33a818..49d99fd 100644 --- a/src/js/main.jsx +++ b/src/js/main.jsx @@ -25,7 +25,6 @@ import { AutoFindProvider } from "./blocks/autoFind/autoFindProvider/AutoFindPro const styles = { commonContainer: { position: "relative", - overflowX: "hidden", }, contentContainerDesktopTablet: { display: "flex", @@ -49,13 +48,13 @@ class App extends React.Component { handleClick = (e) => { this.mainModel.setTab(e.key); - this.setState({tab: e.key}); + this.setState({ tab: e.key }); }; @action handleGenerate = (mainModel) => { mainModel.generateBlockModel.generate(mainModel, () => { - this.handleClick({key: 'results'}); + this.handleClick({ key: "results" }); this.mainModel.generationId++; }); }; @@ -67,27 +66,14 @@ class App extends React.Component { render() { const { classes } = this.props; return ( - -
-
-

JDN

-
version
-
- Report a problem - Readme - Upgrade -
+
- + {/* UNCOMMENT THIS PART + TO MAKE THE REST FUNCTIONALITY AVAILABLE */} + {/* Auto Find Objects + Settings URLs Results @@ -103,7 +89,7 @@ class App extends React.Component { Warnings - + */} {this.tab === "settings" && (
@@ -125,21 +111,13 @@ class App extends React.Component {
)} - {this.tab === "urls" && ( - - )} + {this.tab === "urls" && } - {this.tab === "results" && ( - - )} + {this.tab === "results" && } - {this.tab === "warnings" && ( - - )} + {this.tab === "warnings" && } - {this.tab === "auto_find" && ( - - )} + {this.tab === "auto_find" && }
diff --git a/webpack.config.js b/webpack.config.js index 5f49f0d..6b22005 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -67,7 +67,10 @@ const mainConfig = { // important extra layer for less-loader^6.0.0 javascriptEnabled: true, modifyVars: { - "primary-color": "#008ace", + "primary-color": "#1582d8", + "normal-color": "#b2b5C2", + "btn-default-color": "#1582d8", + "btn-default-border": "#1582d8", "menu-horizontal-line-height": "26px", "menu-bg": "#f3f3f2", "border-radius-base": "3px", From b212a9d12bab4b95333396e5ce7e77a339f1d3b3 Mon Sep 17 00:00:00 2001 From: MariiaNebesnova Date: Fri, 27 Aug 2021 14:23:07 +0300 Subject: [PATCH 4/5] context menu ux --- .../autoFindProvider/AutoFindProvider.jsx | 9 +- .../blocks/autoFind/components/ControlBar.jsx | 2 +- .../contentScripts/contextMenu/contextmenu.js | 154 ++++++++-------- .../autoFind/contentScripts/highlight.css | 38 +++- .../reportProblemPopup/reportProblemPopup.css | 32 +++- .../reportProblemPopup/reportProblemPopup.js | 164 +++++++++--------- .../autoFind/utils/generationClassesMap.js | 2 +- 7 files changed, 227 insertions(+), 174 deletions(-) diff --git a/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx b/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx index 3f72fc9..a101e4c 100644 --- a/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx +++ b/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx @@ -1,5 +1,5 @@ /* eslint-disable indent */ -import _ from "lodash"; +import _, { sortBy } from "lodash"; import React, { useState, useEffect } from "react"; import { inject, observer } from "mobx-react"; import { useContext } from "react"; @@ -156,7 +156,12 @@ const AutoFindProvider = inject("mainModel")( const element = predictedElements.find((e) => e.element_id === id); sendMessage.elementData({ element, - types: Object.keys(JDIclasses).map(getJdiClassName), + types: sortBy( + Object.keys(JDIclasses).map((label) => { + return { label, jdi: getJdiClassName(label) }; + }), + ["jdi"] + ), }); }; diff --git a/src/js/blocks/autoFind/components/ControlBar.jsx b/src/js/blocks/autoFind/components/ControlBar.jsx index 39ee468..2161e5b 100644 --- a/src/js/blocks/autoFind/components/ControlBar.jsx +++ b/src/js/blocks/autoFind/components/ControlBar.jsx @@ -46,7 +46,7 @@ export const ControlBar = () => { - + Readme diff --git a/src/js/blocks/autoFind/contentScripts/contextMenu/contextmenu.js b/src/js/blocks/autoFind/contentScripts/contextMenu/contextmenu.js index a021cec..1c6bac1 100644 --- a/src/js/blocks/autoFind/contentScripts/contextMenu/contextmenu.js +++ b/src/js/blocks/autoFind/contentScripts/contextMenu/contextmenu.js @@ -5,8 +5,8 @@ export const runContextMenu = () => { */ function ContextMenu(menu, options) { - var self = this; - var num = ContextMenu.count++; + const self = this; + const num = ContextMenu.count++; this.menu = menu; this.contextTarget = null; @@ -31,7 +31,7 @@ export const runContextMenu = () => { window.addEventListener("resize", onResize); - this.setOptions = function (_options) { + this.setOptions = function(_options) { if (typeof _options === "object") { options = _options; } else { @@ -39,7 +39,7 @@ export const runContextMenu = () => { } }; - this.changeOption = function (option, value) { + this.changeOption = function(option, value) { if (typeof option === "string") { if (typeof value !== "undefined") { options[option] = value; @@ -51,71 +51,74 @@ export const runContextMenu = () => { } }; - this.getOptions = function () { + this.getOptions = function() { return options; }; - this.reload = function () { + this.reload = function() { if (document.getElementById("cm_" + num) == null) { - var cnt = document.createElement("div"); + const cnt = document.createElement("div"); cnt.className = "cm_container"; cnt.id = "cm_" + num; document.body.appendChild(cnt); } - var container = document.getElementById("cm_" + num); + const container = document.getElementById("cm_" + num); container.innerHTML = ""; container.appendChild(renderLevel(menu)); }; function renderLevel(level) { - var ul_outer = document.createElement("ul"); + const ul_outer = document.createElement("ul"); - level.forEach(function (item) { - var li = document.createElement("li"); + level.forEach(function(item) { + const li = document.createElement("li"); li.menu = self; if (typeof item.type === "undefined") { - var icon_span = document.createElement("span"); + const icon_span = document.createElement("span"); icon_span.className = "cm_icon_span"; if (ContextUtil.getProperty(item, "icon", "") != "") { icon_span.innerHTML = ContextUtil.getProperty(item, "icon", ""); } else { icon_span.innerHTML = ContextUtil.getProperty( - options, - "default_icon", - "" + options, + "default_icon", + "" ); } - var text_span = document.createElement("span"); + const text_span = document.createElement("span"); text_span.className = "cm_text"; if (ContextUtil.getProperty(item, "text", "") != "") { text_span.innerHTML = ContextUtil.getProperty(item, "text", ""); } else { text_span.innerHTML = ContextUtil.getProperty( - options, - "default_text", - "item" + options, + "default_text", + "item" ); } - var sub_span = document.createElement("span"); + const sub_span = document.createElement("span"); sub_span.className = "cm_sub_span"; if (typeof item.sub !== "undefined") { if (ContextUtil.getProperty(options, "sub_icon", "") != "") { sub_span.innerHTML = ContextUtil.getProperty( - options, - "sub_icon", - "" + options, + "sub_icon", + "" ); } else { - sub_span.innerHTML = "›"; + sub_span.innerHTML = ` + + + `; } } @@ -127,9 +130,9 @@ export const runContextMenu = () => { li.setAttribute("disabled", ""); } else { if (typeof item.events === "object") { - var keys = Object.keys(item.events); + const keys = Object.keys(item.events); - for (var i = 0; i < keys.length; i++) { + for (let i = 0; i < keys.length; i++) { li.addEventListener(keys[i], item.events[keys[i]]); } } @@ -150,27 +153,27 @@ export const runContextMenu = () => { return ul_outer; } - this.display = function (e, target) { + this.display = function(e, target) { if (typeof target !== "undefined") { self.contextTarget = target; } else { self.contextTarget = e.target; } - var menu = document.getElementById("cm_" + num); + const menu = document.getElementById("cm_" + num); - var clickCoords = { x: e.clientX, y: e.clientY }; - var clickCoordsX = clickCoords.x; - var clickCoordsY = clickCoords.y; + const clickCoords = { x: e.clientX, y: e.clientY }; + const clickCoordsX = clickCoords.x; + const clickCoordsY = clickCoords.y; - var menuWidth = menu.offsetWidth + 4; - var menuHeight = menu.offsetHeight + 4; + const menuWidth = menu.offsetWidth + 4; + const menuHeight = menu.offsetHeight + 4; - var windowWidth = window.innerWidth; - var windowHeight = window.innerHeight; + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; - var mouseOffset = parseInt( - ContextUtil.getProperty(options, "mouse_offset", 2) + const mouseOffset = parseInt( + ContextUtil.getProperty(options, "mouse_offset", 2) ); if (windowWidth - clickCoordsX < menuWidth) { @@ -187,7 +190,7 @@ export const runContextMenu = () => { menu.style.position = "absolute"; - var sizes = ContextUtil.getSizes(menu); + const sizes = ContextUtil.getSizes(menu); if (windowWidth - clickCoordsX < sizes.width) { menu.classList.add("cm_border_right"); @@ -210,12 +213,12 @@ export const runContextMenu = () => { e.preventDefault(); }; - this.hide = function () { + this.hide = function() { document.getElementById("cm_" + num).classList.remove("display"); window.removeEventListener("click", documentClick); }; - this.remove = function () { + this.remove = function() { document.getElementById("cm_" + num).remove(); window.removeEventListener("click", documentClick); window.removeEventListener("resize", onResize); @@ -232,7 +235,7 @@ export const runContextMenu = () => { ContextMenu.DIVIDER = "cm_divider"; const ContextUtil = { - getProperty: function (options, opt, def) { + getProperty: function(options, opt, def) { if (typeof options[opt] !== "undefined") { return options[opt]; } else { @@ -240,11 +243,11 @@ export const runContextMenu = () => { } }, - getSizes: function (obj) { - var lis = obj.getElementsByTagName("li"); + getSizes: function(obj) { + const lis = obj.getElementsByTagName("li"); - var width_def = 0; - var height_def = 0; + let width_def = 0; + let height_def = 0; for (var i = 0; i < lis.length; i++) { var li = lis[i]; @@ -258,15 +261,15 @@ export const runContextMenu = () => { } } - var width = width_def; - var height = height_def; + let width = width_def; + let height = height_def; for (var i = 0; i < lis.length; i++) { var li = lis[i]; - var ul = li.getElementsByTagName("ul"); + const ul = li.getElementsByTagName("ul"); if (typeof ul[0] !== "undefined") { - var ul_size = ContextUtil.getSizes(ul[0]); + const ul_size = ContextUtil.getSizes(ul[0]); if (width_def + ul_size.width > width) { width = width_def + ul_size.width; @@ -286,7 +289,6 @@ export const runContextMenu = () => { }; const changeElementNameModal = (element_id, jdi_class_name) => { - // MODAL const modal = document.createElement('div'); modal.classList.add("jdn-change-element-name-modal"); @@ -302,7 +304,7 @@ export const runContextMenu = () => { modalTitle.innerText = "Change Name"; modalTitle.classList.add('jdn-change-element-name-modal__title'); modal.append(modalTitle); - + // MODAL FORM const form = document.createElement('form'); @@ -322,7 +324,7 @@ export const runContextMenu = () => { modal.append(form); document.body.appendChild(modal); formInput.focus(); - + // ACTION: CHANGE ELEMENT NAME formButton.addEventListener("click", (event) => { event.preventDefault(); @@ -347,18 +349,23 @@ export const runContextMenu = () => { // <----- - /*global chrome*/ + /* global chrome */ let elementMenu; let contextEvent; let predictedElement; const menuItems = ( - { jdi_class_name, jdi_custom_class_name = null, element_id, skipGeneration }, - types + { jdi_class_name, jdi_custom_class_name = null, element_id, skipGeneration }, + types ) => [ { - text: `Change name: ${jdi_custom_class_name ? jdi_custom_class_name : jdi_class_name} ✎`, + text: `Change name: ${jdi_custom_class_name ? jdi_custom_class_name : jdi_class_name} + + + + + `, events: { click: () => changeElementNameModal(element_id, jdi_class_name), }, @@ -390,7 +397,7 @@ export const runContextMenu = () => { }, }, { - text: "Remove", + text: `Remove`, events: { click: () => chrome.runtime.sendMessage({ @@ -402,20 +409,24 @@ export const runContextMenu = () => { ]; const typesMenu = (types) => { - return types.map((type) => { - return { - text: type, - icon: - type === predictedElement.predicted_label ? "✔" : "", - events: { - click: () => - chrome.runtime.sendMessage({ - message: "CHANGE_TYPE", - param: { id: predictedElement.element_id, newType: type }, - }), - }, - }; - }); + return types + .map((type) => { + return { + text: type.jdi, + icon: + type.label === predictedElement.predicted_label ? ` + + + ` : "", + events: { + click: () => + chrome.runtime.sendMessage({ + message: "CHANGE_TYPE", + param: { id: predictedElement.element_id, newType: type.jdi }, + }), + }, + }; + }); }; const contextMenuListener = (event) => { @@ -441,7 +452,6 @@ export const runContextMenu = () => { const messageHandler = ({ message, param }, sender, sendResponse) => { if (message === "ELEMENT_DATA") { - // element can be undefined in case of outdated event listener (after refresh, for example). better solution is to kill listener, but I can't implement it for now if (!param.element) return; predictedElement = param.element; types = param.types; diff --git a/src/js/blocks/autoFind/contentScripts/highlight.css b/src/js/blocks/autoFind/contentScripts/highlight.css index d0de398..7b5290f 100644 --- a/src/js/blocks/autoFind/contentScripts/highlight.css +++ b/src/js/blocks/autoFind/contentScripts/highlight.css @@ -33,7 +33,7 @@ .cm_container li { padding: 10px 17px; - padding-right: 1.7em; + padding-right: 3em; cursor: pointer; white-space: nowrap; } @@ -43,19 +43,17 @@ color: #1582D8; } -.cm_container li:last-child { +.cm_container li .cm_container_warning-option { color: #D82C15; } .cm_container li .cm_icon_span { - width: 1.5em; - height: 1.2em; - vertical-align: bottom; + right: 12px; + top: 50%; + transform: translateY(-50%); + right: 6px; + position: absolute; display: inline-block; - border-right: 1px solid #aaa; - margin-right: 5px; - padding-right: 5px; - text-align: center; } .cm_container li .cm_text_icon { @@ -64,6 +62,11 @@ transform: scale(-1, 1); } +.cm_container li .cm_text .cm_text_edit_icon { + position: absolute; + right: -2.8em; +} + .cm_container li .cm_sub_span { width: 1em; display: inline-block; @@ -81,6 +84,23 @@ opacity: 0; transition: opacity 0.2s; visibility: hidden; + max-height: 190px; + overflow-y: auto; +} + +.cm_container li > ul::-webkit-scrollbar { + width: 4px; +} +.cm_container li > ul::-webkit-scrollbar-thumb { + background-color: rgba(102, 104, 118, 1); + border-radius: 10px; +} +.cm_container li > ul::-webkit-scrollbar-thumb:active { + background-color: rgb(157, 157, 163); + border-radius: 10px; +} +.cm_container li > ul::-webkit-scrollbar-track { + background-color: #000; } .cm_container li:hover > ul { diff --git a/src/js/blocks/autoFind/contentScripts/reportProblemPopup/reportProblemPopup.css b/src/js/blocks/autoFind/contentScripts/reportProblemPopup/reportProblemPopup.css index 29999ef..a7b7627 100644 --- a/src/js/blocks/autoFind/contentScripts/reportProblemPopup/reportProblemPopup.css +++ b/src/js/blocks/autoFind/contentScripts/reportProblemPopup/reportProblemPopup.css @@ -9,18 +9,34 @@ background-color: #00000073; } .jdn-report-problem-popup__modal { + top: 50%; + transform: translateY(-50%); + margin: auto; padding: 16px 24px; - max-width: 500px; - margin: 200px auto; + width: 270px; position: relative; display: block; - width: 500px; - background-color: #fff; - border: 1px solid rgba(0,0,0,.2); - border-radius: .3rem; + color: #fff; + background-color: #000; + border: 1px solid rgba(0, 0, 0, 0.2); } .jdn-report-problem-popup__button { - margin: 0 15px 0 0; padding: 5px 10px; -} \ No newline at end of file + background-color: #000; + border: none; +} + +.jdn-report-problem-popup__button--ok { + background-color: #1582d8; +} + +.jdn-report-problem-popup__button--ok:hover { + background-color: #0f73c1; +} + +.jdn-report-problem-popup__button-container { + display: flex; + justify-content: flex-end; + gap: 16px; +} diff --git a/src/js/blocks/autoFind/contentScripts/reportProblemPopup/reportProblemPopup.js b/src/js/blocks/autoFind/contentScripts/reportProblemPopup/reportProblemPopup.js index ba97fbc..12f03dd 100644 --- a/src/js/blocks/autoFind/contentScripts/reportProblemPopup/reportProblemPopup.js +++ b/src/js/blocks/autoFind/contentScripts/reportProblemPopup/reportProblemPopup.js @@ -1,43 +1,42 @@ export const reportProblemPopup = () => { - - function removePopup() { - backgroundModal.remove(); - modal.remove(); - } - - function mailTo() { - let mailToLink = document.createElement("a"); - mailToLink.target = "_blank"; - mailToLink.href = `mailto:JDI-support+JDN@epam.com?subject=Some%20elements%20were%20not%20identified%20on%20page%3A%20${window.location.href}&body=Hi%2C%0D%0ASome%20elements%20were%20not%20identified%20on%20the%20page%2C%20please%20have%20a%20look.%0D%0A%3CPlease%20save%20provided%20archive%20to%20disk%20and%20attach%20it%20to%20this%20email%3E%0D%0A%3CPROVIDE%20ADDITIONAL%20DETAILS%20IF%20NEEDED%3E`; - mailToLink.click(); - } - - function saveImage(frame) { - let imageLink = document.createElement('a'); - imageLink.href = frame; - imageLink.download = 'screenshot.jpg'; - imageLink.click(); - } - - saveJson = (content) => { - let a = document.createElement("a"); - let file = new Blob([content], {type: 'text/plain'}); - a.href = URL.createObjectURL(file); - a.download = 'json.txt'; - a.click(); - } - - const backgroundModal = document.createElement('div'); - backgroundModal.classList.add('jdn-report-problem-popup__background'); - - const modal = document.createElement('div'); - modal.classList.add('jdn-report-problem-popup__modal'); - - const title = document.createElement('h4'); - title.innerText = 'Report Problem'; - - const descriptionText = document.createElement('p'); - descriptionText.innerHTML = ` + function removePopup() { + backgroundModal.remove(); + modal.remove(); + } + + function mailTo() { + const mailToLink = document.createElement("a"); + mailToLink.target = "_blank"; + mailToLink.href = `mailto:JDI-support+JDN@epam.com?subject=Some%20elements%20were%20not%20identified%20on%20page%3A%20${window.location.href}&body=Hi%2C%0D%0ASome%20elements%20were%20not%20identified%20on%20the%20page%2C%20please%20have%20a%20look.%0D%0A%3CPlease%20save%20provided%20archive%20to%20disk%20and%20attach%20it%20to%20this%20email%3E%0D%0A%3CPROVIDE%20ADDITIONAL%20DETAILS%20IF%20NEEDED%3E`; + mailToLink.click(); + } + + function saveImage(frame) { + const imageLink = document.createElement("a"); + imageLink.href = frame; + imageLink.download = "screenshot.jpg"; + imageLink.click(); + } + + saveJson = (content) => { + const a = document.createElement("a"); + const file = new Blob([content], { type: "text/plain" }); + a.href = URL.createObjectURL(file); + a.download = "json.txt"; + a.click(); + }; + + const backgroundModal = document.createElement("div"); + backgroundModal.classList.add("jdn-report-problem-popup__background"); + + const modal = document.createElement("div"); + modal.classList.add("jdn-report-problem-popup__modal"); + + const title = document.createElement("h4"); + title.innerText = "Report Problem"; + + const descriptionText = document.createElement("p"); + descriptionText.innerHTML = ` To find the real problem, we need to get the txt-file (json.txt) and a screenshot of the site with the identified elements on it (screenshot.jpg).

To take a screenshot and get the json file, you need:
@@ -49,58 +48,61 @@ export const reportProblemPopup = () => { After that, send a letter in which you describe the problem and attach the downloaded files. `; - const buttonOk = document.createElement('button'); - buttonOk.classList.add('jdn-report-problem-popup__button'); - buttonOk.innerText = 'Ok'; + const buttonOk = document.createElement("button"); + buttonOk.classList.add("jdn-report-problem-popup__button"); + buttonOk.classList.add("jdn-report-problem-popup__button--ok"); + buttonOk.innerText = "Ok"; + + buttonOk.addEventListener("click", () => { + removePopup(); - buttonOk.addEventListener('click', () => { + const capture = async () => { + const canvas = document.createElement("canvas"); + const context = canvas.getContext("2d"); + const video = document.createElement("video"); - removePopup(); + video.width = window.outerWidth; + video.height = window.outerHeight; - const capture = async () => { - const canvas = document.createElement("canvas"); - const context = canvas.getContext("2d"); - const video = document.createElement("video"); + canvas.width = window.outerWidth; + canvas.height = window.outerHeight; - video.width = window.outerWidth; - video.height = window.outerHeight; + const captureStream = await navigator.mediaDevices.getDisplayMedia(); + video.srcObject = captureStream; - canvas.width = window.outerWidth; - canvas.height = window.outerHeight; - - const captureStream = await navigator.mediaDevices.getDisplayMedia(); - video.srcObject = captureStream; + video.onloadedmetadata = () => { + video.play(); + context.drawImage(video, 0, 0, window.outerWidth, window.outerHeight); + const frame = canvas.toDataURL("image/png"); + captureStream.getTracks().forEach((track) => track.stop()); - video.onloadedmetadata = () => { - video.play(); - context.drawImage(video, 0, 0, window.outerWidth, window.outerHeight); - const frame = canvas.toDataURL("image/png"); - captureStream.getTracks().forEach(track => track.stop()); + chrome.storage.sync.get(["predictedElements"], ({ predictedElements }) => { + saveJson(JSON.stringify(predictedElements)); + saveImage(frame); + mailTo(); + }); + }; + }; - chrome.storage.sync.get(["predictedElements"], ({predictedElements}) => { - saveJson(JSON.stringify(predictedElements)); - saveImage(frame); - mailTo(); - }); - } - }; - - capture(); - }); + capture(); + }); - const buttonCancel = document.createElement('button'); - buttonCancel.classList.add('jdn-report-problem-popup__button'); - buttonCancel.innerText = 'Cancel'; + const buttonCancel = document.createElement("button"); + buttonCancel.classList.add("jdn-report-problem-popup__button"); + buttonCancel.innerText = "Cancel"; - buttonCancel.addEventListener('click', () => removePopup()); + buttonCancel.addEventListener("click", () => removePopup()); - modal.append(title); - modal.append(descriptionText); - modal.append(buttonOk); - modal.append(buttonCancel); + const buttonContainer = document.createElement("div"); + buttonContainer.classList.add("jdn-report-problem-popup__button-container"); + buttonContainer.append(buttonCancel); + buttonContainer.append(buttonOk); - backgroundModal.append(modal); + modal.append(title); + modal.append(descriptionText); + modal.append(buttonContainer); - document.body.append(backgroundModal); + backgroundModal.append(modal); -}; \ No newline at end of file + document.body.append(backgroundModal); +}; diff --git a/src/js/blocks/autoFind/utils/generationClassesMap.js b/src/js/blocks/autoFind/utils/generationClassesMap.js index c5d970c..a7009cc 100644 --- a/src/js/blocks/autoFind/utils/generationClassesMap.js +++ b/src/js/blocks/autoFind/utils/generationClassesMap.js @@ -17,7 +17,7 @@ export const JDIclasses = { progressbar: defaultClass, datetimeselector: defaultClass, numberselector: defaultClass, - dropdownselector: "Dropdown", + dropdownselector: "Dropdown selector", checklist: "CheckList", radiobutton: "RadioButtons", table: "Table", From 6ef3f90b3ba381e13732f4b108d22b13457d6fa2 Mon Sep 17 00:00:00 2001 From: MariiaNebesnova Date: Fri, 27 Aug 2021 14:29:20 +0300 Subject: [PATCH 5/5] fix tests --- manifest.json | 2 +- package.json | 2 +- src/js/blocks/autoFind/tests/autoFind.test.js | 5 +++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/manifest.json b/manifest.json index 608bd45..6c26328 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "name": "JDN", "description": "", "devtools_page": "index.html", - "version": "3.0.44", + "version": "3.0.45", "permissions": [ "activeTab", "tabs", diff --git a/package.json b/package.json index d6892d2..33a0a3f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jdi-react-extension", - "version": "3.0.44", + "version": "3.0.45", "description": "jdi react extension", "scripts": { "start": "npm run webpack", diff --git a/src/js/blocks/autoFind/tests/autoFind.test.js b/src/js/blocks/autoFind/tests/autoFind.test.js index 21ffc2b..fde6965 100644 --- a/src/js/blocks/autoFind/tests/autoFind.test.js +++ b/src/js/blocks/autoFind/tests/autoFind.test.js @@ -1,9 +1,10 @@ import React from "react"; import { AutoFindProvider, autoFindStatus, useAutoFind } from "../autoFindProvider/AutoFindProvider"; -import { connector } from "../autoFindProvider/connector"; + import { act } from "react-dom/test-utils"; import { render, unmountComponentAtNode } from "react-dom"; -import * as pageDataHandlers from "../autoFindProvider/pageDataHandlers"; +import * as pageDataHandlers from "../utils/pageDataHandlers"; +import { connector } from "../utils/connector"; import { abovePerception, generationData,