Merge pull request #3788 from webcompat/issue/3785/1

Fixes #3785 - Prefill description from the new in-product reporter

tests/functional/reporting-postMessage.js

@@ -12,13 +12,21 @@ const url = intern.config.functionalBaseUrl + "issues/new";
 // This string is executed by calls to `execute()` in various tests
 // it postMessages a small green test square.
 const POSTMESSAGE_TEST =
-  'postMessage({screenshot:{}, message: {"url":"http://example.com","utm_source":"desktop-reporter","utm_campaign":"report-site-issue-button","src":"desktop-reporter","details":{"gfx.webrender.all":false,"gfx.webrender.blob-images":true,"gfx.webrender.enabled":false,"image.mem.shared":true,"buildID":"20191016225400","channel":"default","consoleLog":[],"hasTouchScreen":false,"mixed active content blocked":false,"mixed passive content blocked":false,"tracking content blocked":"false","hasMarfeel":true},"extra_labels":["type-marfeel"]}}, "http://localhost:5000")';
+  'postMessage({screenshot:{}, message: {"url":"http://example.com","utm_source":"desktop-reporter","utm_campaign":"report-site-issue-button","src":"desktop-reporter","details":{"gfx.webrender.all":false,"gfx.webrender.blob-images":true,"gfx.webrender.enabled":false,"image.mem.shared":true,"buildID":"20191016225400","channel":"default","consoleLog":[],"hasTouchScreen":false,"mixed active content blocked":false,"mixed passive content blocked":false,"tracking content blocked":"false","hasMarfeel":true},"extra_labels":["type-marfeel"], "description": "site is broken, please fix"}}, "http://localhost:5000")';
 
 registerSuite("Reporting through postMessage", {
   tests: {
     "postMessaged object"() {
       return (
         FunctionalHelpers.openPage(this, url, "#js-ReportForm")
+          .execute(() => "wrtReady" in window)
+          .then((value) =>
+            assert.equal(
+              value,
+              true,
+              "wrtReady variable exists in window object"
+            )
+          )
           // send data object through postMessage
           .execute(POSTMESSAGE_TEST)
           .sleep(1000)
@@ -52,6 +60,12 @@ registerSuite("Reporting through postMessage", {
             assert.include(value, "type-marfeel");
           })
           .end()
+          .findByCssSelector("#steps_reproduce")
+          .getProperty("value")
+          .then(function (value) {
+            assert.include(value, "site is broken, please fix");
+          })
+          .end()
           .findByCssSelector("#desc-url")
           .getAttribute("class")
           .then((className) => {

webcompat/form.py

@@ -157,7 +157,7 @@
 browser_test_label = 'Did you test in another browser?'
 textarea_label = 'Please describe what happened, including any steps you took before you saw the problem'  # noqa
 
-other_problem_label = 'Briefly describe the issue:'
+other_problem_label = 'Briefly summarize the issue:'
 other_browser_label = 'Browser tested'
 
 

webcompat/static/js/lib/wizard/helpers/postMessageParser.js

@@ -9,17 +9,24 @@ import { sendAnalyticsCS } from "../analytics.js";
 
 const updateStep = (id, data) => notify.publish("updateStep", { id, data });
 const updateUrl = (url) => updateStep("url", { url });
+const updateDescription = (description) =>
+  updateStep("description", { description });
 const updateHidden = (data) => updateStep("hidden", { data });
 const updateScreenshot = (dataURI) => updateStep("screenshot", { dataURI });
 
 const handleMessage = (message) => {
   if (!message) return;
-  const { url, utm_campaign, utm_source, ...additional } = message;
+  const { url, description, utm_campaign, utm_source, ...additional } = message;
 
   sendAnalyticsCS(utm_campaign, utm_source);
   if (url) {
     updateUrl(url);
   }
+
+  if (description && description.length) {
+    updateDescription(description);
+  }
+
   updateHidden(additional);
 };
 

webcompat/static/js/lib/wizard/prefill.js

@@ -6,9 +6,10 @@ import { parseGetParams } from "./helpers/getParamParser.js";
 import { onMessageReceived } from "./helpers/postMessageParser.js";
 
 export default {
-  init: () => {
+  init: (wrtResolve) => {
     // This module supports form prefilling with GET params or postMessage
     document.addEventListener("DOMContentLoaded", parseGetParams);
     window.addEventListener("message", onMessageReceived, false);
+    wrtResolve();
   },
 };

webcompat/static/js/lib/wizard/steps/description.js

@@ -50,7 +50,7 @@ const onChange = (value) => {
   create the markdown with the URL of a newly uploaded
   image and add it to the bug description
 */
-const updateDescription = (url) => {
+const addScreenshotUrl = (url) => {
   const imageURL = `<details>
       <summary>View the screenshot</summary>
       <img alt="Screenshot" src="${url}">
@@ -59,6 +59,11 @@ const updateDescription = (url) => {
   descriptionField.val((idx, value) => value + "\n" + imageURL);
 };
 
+const addDescription = (description) => {
+  descriptionField.val(description);
+  descriptionField.trigger("input");
+};
+
 const showProgress = () => {
   progress.removeClass("is-hidden");
   $(".char-limit").text(`Minimum ${MIN_CHARACTERS} characters`);
@@ -79,7 +84,15 @@ export default {
   show: () => {
     showContainer(container);
   },
-  update: ({ url }) => {
-    updateDescription(url);
+  update: (data) => {
+    const { screenshotUrl, description } = data;
+
+    if (description) {
+      addDescription(description);
+    }
+
+    if (screenshotUrl) {
+      addScreenshotUrl(screenshotUrl);
+    }
   },
 };

webcompat/static/js/lib/wizard/steps/upload-helper/image-upload.js

@@ -18,7 +18,10 @@ const previewEl = $(".js-image-upload");
 
 const addImageURL = ({ url }) => {
   if (!url) return;
-  notify.publish("updateStep", { id: "description", data: { url } });
+  notify.publish("updateStep", {
+    id: "description",
+    data: { screenshotUrl: url },
+  });
 };
 
 const handleUploadError = function (response) {

webcompat/static/js/lib/wizard/wizard.js

@@ -6,6 +6,13 @@ import stepper from "./stepper.js";
 import prefill from "./prefill.js";
 import progress from "./progress.js";
 
-prefill.init();
+// Set a window variable to let the in-browser reporting tool
+// know that the site is ready for the postMessage
+let wrtResolve;
+window.wrtReady = new Promise((r) => {
+  wrtResolve = r;
+});
+
+prefill.init(wrtResolve);
 stepper.init();
 progress.init();