Merge pull request #266 from jdi-testing/issue-262

Issue-262: Taking a screenshot and saving a file at the same time

manifest.json

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

package.json

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

src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx

@@ -10,7 +10,6 @@ import {
   requestXpathes,
 } from "./pageDataHandlers";
 import { reportProblemPopup } from "./contentScripts/reportProblemPopup/reportProblemPopup";
-import { saveJson } from './contentScripts/saveJson';
 import { JDIclasses, getJdiClassName } from "./generationClassesMap";
 import { connector, sendMessage } from "./connector";
 
@@ -102,8 +101,10 @@ const AutoFindProvider = inject("mainModel")(
     };
 
     const reportProblem = (predictedElements) => {
-      connector.attachContentScript(reportProblemPopup)
-        .then(saveJson(JSON.stringify(predictedElements)));
+      chrome.storage.sync.set(
+        { predictedElements }, 
+        connector.attachContentScript(reportProblemPopup)
+      );
     };
 
     const updateElements = ([predicted, page]) => {

src/js/blocks/autoFind/autoFindProvider/contentScripts/reportProblemPopup/reportProblemPopup.js

@@ -13,12 +13,20 @@ export const reportProblemPopup = () => {
     }
 
     function saveImage(frame) {
-        var imageLink = document.createElement('a');
+        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');
 
@@ -30,9 +38,9 @@ export const reportProblemPopup = () => {
 
     const descriptionText = document.createElement('p');
     descriptionText.innerHTML = `
-        To find the real problem, we need to get the TXT-file (json.txt, it was just downloaded) and a screenshot of the site with the identified elements on it (screenshot.jpg). <br> <br>
+        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). <br> <br>
 
-        To take a screenshot, you need: <br>
+        To take a screenshot and get the json file, you need: <br>
             - press the OK button in this window <br>
             - select the 'Window' tab in the newly appeared window <br>
             - select the Chrome browser <br>
@@ -69,8 +77,11 @@ export const reportProblemPopup = () => {
                 const frame = canvas.toDataURL("image/png");
                 captureStream.getTracks().forEach(track => track.stop());
 
-                saveImage(frame);
-                mailTo();
+                chrome.storage.sync.get(["predictedElements"], ({predictedElements}) => {
+                    saveJson(predictedElements);
+                    saveImage(frame);
+                    mailTo();
+                });
             }
         };