Issue 5917 - Improve display of report data in the issue reporter

issue-reporter.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 281 matching lines @@
       commentElement.parentNode.removeChild(commentElement);
 
     let value = event.target.value.trim();
     commentElement.textContent = value.substr(0, 1000);
     if (value)
       reportData.documentElement.appendChild(commentElement);
     document.getElementById("commentLengthWarning")
             .setAttribute("data-invisible", value.length <= 1000);
   });
 
+  let showDataOverlay = document.getElementById("showDataOverlay");
   document.getElementById("showData").addEventListener("click", event =>
   {
     event.preventDefault();
 
-    // window.open() won't open data: URIs in Chrome
-    browser.tabs.getCurrent().then(tab =>
+    showDataOverlay.hidden = false;
+
+    let element = document.getElementById("showDataValue");
+    element.value = serializeReportData();
+    element.focus();
+  });
+
+  document.getElementById("showDataClose").addEventListener("click", event =>
+  {
+    showDataOverlay.hidden = true;
+    document.getElementById("showData").focus();
+  });
+
+  showDataOverlay.addEventListener("keydown", event =>
+  {
+    if (event.key == "Enter" || event.key == "Escape")
     {
-      browser.tabs.create({
-        url: "data:text/xml;charset=utf-8," +
-             encodeURIComponent(serializeReportData()),
-        openerTabId: tab.id
-      });

[Wladimir Palant, 2017/10/24 11:58:29]

It would have been possible to merely fix this call. However, showing report
data in a new tab was only meant to be a stopgap solution anyway, we can replace
it by something more usable while at it.

[kzar, 2017/10/24 13:39:57]

Acknowledged.

-    });
+      // Stop propagation to prevent higher level event handler from processing
+      // this event.
+      event.stopPropagation();
+      document.getElementById("showDataClose").click();
+    }
+  });
+
+  showDataOverlay.addEventListener("click", event =>
+  {
+    if (event.eventPhase == event.AT_TARGET)
+    {
+      // User clicked outside overlay content
+      document.getElementById("showDataClose").click();
+    }
   });
 
   emailField.focus();
 }
 
 function leaveCommentPage()
 {
   setCurrentPage("sendPage");
 }
 
@@ skipping 121 matching lines @@
       progress.value = event.loaded;
     }
   });
   request.send(serializeReportData());
 }
 
 function leaveSendPage()
 {
   window.close();
 }