Bug 1582751 - Show an error message when content blocking breakage reporting fails. r=nhnt11,fluent-reviewers,flod

Differential Revision: https://phabricator.services.mozilla.com/D51382

--HG--
extra : moz-landing-system : lando

browser/base/content/browser-siteProtections.js

@@ -1236,6 +1236,12 @@ var gProtectionsHandler = {
       "protections-popup-siteNotWorking-tp-switch"
     ));
   },
+  get _protectionsPopupSiteNotWorkingReportError() {
+    delete this._protectionsPopupSiteNotWorkingReportError;
+    return (this._protectionsPopupSiteNotWorkingReportError = document.getElementById(
+      "protections-popup-sendReportView-report-error"
+    ));
+  },
   get _protectionsPopupSendReportLearnMore() {
     delete this._protectionsPopupSendReportLearnMore;
     return (this._protectionsPopupSendReportLearnMore = document.getElementById(
@@ -1248,6 +1254,12 @@ var gProtectionsHandler = {
       "protections-popup-sendReportView-collection-url"
     ));
   },
+  get _protectionsPopupSendReportButton() {
+    delete this._protectionsPopupSendReportButton;
+    return (this._protectionsPopupSendReportButton = document.getElementById(
+      "protections-popup-sendReportView-submit"
+    ));
+  },
   get _trackingProtectionIconTooltipLabel() {
     delete this._trackingProtectionIconTooltipLabel;
     return (this._trackingProtectionIconTooltipLabel = document.getElementById(
@@ -2174,7 +2186,12 @@ var gProtectionsHandler = {
       "?" + this.reportURI.query,
       ""
     );
+    let commentsTextarea = document.getElementById(
+      "protections-popup-sendReportView-collection-comments"
+    );
+    commentsTextarea.value = "";
     this._protectionsPopupSendReportURL.value = urlWithoutQuery;
+    this._protectionsPopupSiteNotWorkingReportError.hidden = true;
     this._protectionsPopupMultiView.showSubView(
       "protections-popup-sendReportView"
     );
@@ -2270,28 +2287,30 @@ var gProtectionsHandler = {
       formData.set("labels", activatedBlockers.join(","));
     }
 
+    this._protectionsPopupSendReportButton.disabled = true;
+
     fetch(reportEndpoint, {
       method: "POST",
       credentials: "omit",
       body: formData,
     })
-      .then(function(response) {
+      .then(response => {
+        this._protectionsPopupSendReportButton.disabled = false;
         if (!response.ok) {
           Cu.reportError(
             `Content Blocking report to ${reportEndpoint} failed with status ${
               response.status
             }`
           );
+          this._protectionsPopupSiteNotWorkingReportError.hidden = false;
         } else {
-          // Clear the textarea value when the report is submitted
-          commentsTextarea.value = "";
+          this._protectionsPopup.hidePopup();
         }
       })
       .catch(Cu.reportError);
   },
 
   onSendReportClicked() {
-    this._protectionsPopup.hidePopup();
     this.submitBreakageReport(this.reportURI);
   },
 

browser/base/content/browser.xhtml

@@ -77,6 +77,7 @@
   <html:link rel="localization" href="browser/branding/sync-brand.ftl"/>
   <html:link rel="localization" href="browser/browser.ftl"/>
   <html:link rel="localization" href="browser/menubar.ftl"/>
+  <html:link rel="localization" href="browser/protectionsPanel.ftl"/>
   <html:link rel="localization" href="browser/appmenu.ftl"/>
   <html:link rel="localization" href="browser/readerView.ftl"/>
 </linkset>

browser/base/content/test/trackingUI/browser_trackingUI_report_breakage.js

@@ -122,6 +122,17 @@ add_task(async function testNoTracking() {
   });
 });
 
+add_task(async function testReportBreakageError() {
+  Services.prefs.setBoolPref(TP_PREF, true);
+  // Make sure that we correctly strip the query.
+  let url = TRACKING_PAGE + "?a=b&1=abc&unicode=🦊";
+  await BrowserTestUtils.withNewTab(url, async function() {
+    await testReportBreakage(TRACKING_PAGE, "trackingprotection", true);
+  });
+
+  Services.prefs.clearUserPref(TP_PREF);
+});
+
 add_task(async function testTP() {
   Services.prefs.setBoolPref(TP_PREF, true);
   // Make sure that we correctly strip the query.
@@ -185,7 +196,7 @@ add_task(async function testCM() {
   Services.prefs.clearUserPref(CB_PREF);
 });
 
-async function testReportBreakage(url, tags) {
+async function testReportBreakage(url, tags, error = false) {
   // Setup a mock server for receiving breakage reports.
   let server = new HttpServer();
   server.start(-1);
@@ -299,6 +310,12 @@ async function testReportBreakage(url, tags) {
         "Should send the correct form data"
       );
 
+      if (error) {
+        response.setStatusLine(request.httpVersion, 500, "Request failed");
+      } else {
+        response.setStatusLine(request.httpVersion, 201, "Entry created");
+      }
+
       resolve();
     });
 
@@ -306,6 +323,23 @@ async function testReportBreakage(url, tags) {
     submitButton.click();
   });
 
+  let errorMessage = document.getElementById(
+    "protections-popup-sendReportView-report-error"
+  );
+  if (error) {
+    await BrowserTestUtils.waitForCondition(() =>
+      BrowserTestUtils.is_visible(errorMessage)
+    );
+    is(
+      comments.value,
+      "This is a comment",
+      "Comment not cleared in case of an error"
+    );
+    gProtectionsHandler._protectionsPopup.hidePopup();
+  } else {
+    ok(BrowserTestUtils.is_hidden(errorMessage), "Error message not shown");
+  }
+
   await popuphidden;
 
   // Stop the server.

browser/components/controlcenter/content/protectionsPanel.inc.xul

@@ -310,6 +310,9 @@
             <label control="protections-popup-sendReportView-collection-comments">&contentBlocking.breakageReportView2.collection.comments.label;</label>
             <html:textarea id="protections-popup-sendReportView-collection-comments" aria-label="&contentBlocking.breakageReportView2.collection.comments.label;"/>
           </vbox>
+          <label id="protections-popup-sendReportView-report-error"
+            data-l10n-id="protections-panel-sendreportview-error"
+            hidden="true" role="alert"></label>
         </vbox>
         <vbox id="protections-popup-sendReportView-footer"
               class="panel-footer">

browser/locales/en-US/browser/protectionsPanel.ftl

@@ -0,0 +1,5 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+protections-panel-sendreportview-error = There was an error sending the report. Please try again later.

browser/themes/shared/controlcenter/panel.inc.css

@@ -479,6 +479,11 @@ description#identity-popup-content-verifier,
   margin-inline-start: 0;
 }
 
+#protections-popup-sendReportView-report-error {
+  margin-bottom: 24px;
+  color: #d74345;
+}
+
 .protections-popup-category {
   /* Overwrite toolbarbutton styles */
   -moz-appearance: none;