Bug 1599444, allow users to delete past telemetry data within about:preferences#privacy r=fluent-reviewers,Gijs,flod

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

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

browser/components/preferences/in-content/privacy.inc.xhtml

@@ -853,6 +853,21 @@
            class="learnMore" is="text-link"
            data-l10n-id="collection-privacy-notice"/>
   </description>
+  <description>
+    <hbox id="telemetry-container" align="stretch" flex="1" hidden="true">
+      <hbox align="top">
+        <image class="info-icon-telemetry" flex="1"></image>
+      </hbox>
+      <hbox align="center" id="dataDescriptionBox" flex="1">
+        <html:span id="telemetryDisabledDescription" class="tail-with-learn-more" data-l10n-id="collection-health-report-telemetry-disabled"/>
+      </hbox>
+      <hbox>
+          <button id="telemetryDataDeletionLearnMore"
+                 class="learnMore" is="text-link"
+                 data-l10n-id="collection-health-report-telemetry-disabled-link"/>
+      </hbox>
+    </hbox>
+  </description>
   <vbox data-subcategory="reports">
     <description flex="1">
       <checkbox id="submitHealthReportBox"

browser/components/preferences/in-content/privacy.js

@@ -501,6 +501,11 @@ var gPrivacyPane = {
       "command",
       gPrivacyPane.showSecurityDevices
     );
+    setEventListener(
+      "telemetryDataDeletionLearnMore",
+      "command",
+      gPrivacyPane.showDataDeletion
+    );
 
     this._pane = document.getElementById("panePrivacy");
 
@@ -2154,6 +2159,16 @@ var gPrivacyPane = {
     gSubDialog.open("chrome://pippki/content/device_manager.xhtml");
   },
 
+  /**
+   * Displays the learn more health report page when a user opts out of data collection.
+   */
+  showDataDeletion() {
+    let url = Services.urlFormatter.formatURLPref(
+      "datareporting.healthreport.infoURL"
+    );
+    window.open(url, "_blank");
+  },
+
   initDataCollection() {
     this._setupLearnMoreLink(
       "toolkit.datacollection.infoURL",
@@ -2215,7 +2230,15 @@ var gPrivacyPane = {
    */
   updateSubmitHealthReport() {
     let checkbox = document.getElementById("submitHealthReportBox");
+    let telemetryContainer = document.getElementById("telemetry-container");
+
     Services.prefs.setBoolPref(PREF_UPLOAD_ENABLED, checkbox.checked);
+
+    if (!checkbox.checked) {
+      telemetryContainer.hidden = checkbox.checked;
+    } else {
+      telemetryContainer.hidden = checkbox.checked;
+    }
   },
 
   /**

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

@@ -1163,6 +1163,9 @@ collection-header = { -brand-short-name } Data Collection and Use
 collection-description = We strive to provide you with choices and collect only what we need to provide and improve { -brand-short-name } for everyone. We always ask permission before receiving personal information.
 collection-privacy-notice = Privacy Notice
 
+collection-health-report-telemetry-disabled = You’re no longer allowing { -vendor-short-name } to capture technical and interaction data. All past data will be deleted within 30 days. 
+collection-health-report-telemetry-disabled-link = Learn more
+
 collection-health-report =
     .label = Allow { -brand-short-name } to send technical and interaction data to { -vendor-short-name }
     .accesskey = r

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -841,6 +841,13 @@ image.update-throbber {
   margin-top: calc((32px - 16px) / 2);
 }
 
+.info-icon-telemetry {
+  list-style-image: url("chrome://browser/skin/identity-icon.svg");
+  width: 16px;
+  height: 16px;
+  margin-inline: 2px 8px;
+}
+
 .sticky-container {
   position: sticky;
   background-color: var(--in-content-page-background);

browser/themes/shared/incontentprefs/privacy.css

@@ -299,6 +299,20 @@
   margin-inline-start: 56px;
 }
 
+#telemetry-container {
+  border-radius: 4px;
+  background-color: rgba(12,12,13,0.2);
+  font-size: 85%;
+  padding: 3px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  width: 100%;
+}
+
+#dataDescriptionBox {
+  line-height: 1.3;
+}
+
 .content-blocking-category-description {
   font-size: 90%;
   opacity: 0.6;