Bug 1590656 - About Protection explains why there is no info in private browsing mode. r=fluent-reviewers,nhnt11,flod

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

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

browser/components/about/AboutProtectionsHandler.jsm

@@ -22,6 +22,7 @@ XPCOMUtils.defineLazyModuleGetters(this, {
   AddonManager: "resource://gre/modules/AddonManager.jsm",
   LoginBreaches: "resource:///modules/LoginBreaches.jsm",
   LoginHelper: "resource://gre/modules/LoginHelper.jsm",
+  PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.jsm",
 });
 
 XPCOMUtils.defineLazyServiceGetter(
@@ -340,13 +341,38 @@ var AboutProtectionsHandler = {
         win.openTrustedLinkIn("about:preferences#sync", "tab");
         break;
       case "FetchContentBlockingEvents":
+        let dataToSend = {};
+        let weekdays = Services.intl.getDisplayNames(undefined, {
+          style: "short",
+          keys: [
+            "dates/gregorian/weekdays/sunday",
+            "dates/gregorian/weekdays/monday",
+            "dates/gregorian/weekdays/tuesday",
+            "dates/gregorian/weekdays/wednesday",
+            "dates/gregorian/weekdays/thursday",
+            "dates/gregorian/weekdays/friday",
+            "dates/gregorian/weekdays/saturday",
+            "dates/gregorian/weekdays/sunday",
+          ],
+        });
+        weekdays = Object.values(weekdays.values);
+        dataToSend.weekdays = weekdays;
+
+        if (PrivateBrowsingUtils.isWindowPrivate(win)) {
+          dataToSend.isPrivate = true;
+          this.sendMessage(
+            aMessage.target,
+            "SendContentBlockingRecords",
+            dataToSend
+          );
+          return;
+        }
         let sumEvents = await TrackingDBService.sumAllEvents();
         let earliestDate = await TrackingDBService.getEarliestRecordedDate();
         let eventsByDate = await TrackingDBService.getEventsByDateRange(
           aMessage.data.from,
           aMessage.data.to
         );
-        let dataToSend = {};
         let largest = 0;
 
         for (let result of eventsByDate) {
@@ -366,22 +392,6 @@ var AboutProtectionsHandler = {
         dataToSend.earliestDate = earliestDate;
         dataToSend.sumEvents = sumEvents;
 
-        let weekdays = Services.intl.getDisplayNames(undefined, {
-          style: "short",
-          keys: [
-            "dates/gregorian/weekdays/sunday",
-            "dates/gregorian/weekdays/monday",
-            "dates/gregorian/weekdays/tuesday",
-            "dates/gregorian/weekdays/wednesday",
-            "dates/gregorian/weekdays/thursday",
-            "dates/gregorian/weekdays/friday",
-            "dates/gregorian/weekdays/saturday",
-            "dates/gregorian/weekdays/sunday",
-          ],
-        });
-        weekdays = Object.values(weekdays.values);
-        dataToSend.weekdays = weekdays;
-
         this.sendMessage(
           aMessage.target,
           "SendContentBlockingRecords",

browser/components/protections/content/protections.css

@@ -259,9 +259,23 @@ a.hidden,
   margin-block-end: 10px;
 }
 
+#private-window-message {
+  border: 1px solid #D7D7DB;
+  grid-area: 1 / 2 / 1 / 7;
+  background-color: #F9F9FA;
+  padding: 13px 45px;
+  font-size: 13px;
+  margin-bottom: 25px;
+  text-align: center;
+}
+
+#graph:not(.private-window) #private-window-message {
+  display: none;
+}
+
 /* Graph Bars */
 .graph-bar {
-  grid-row: 1 / -2;
+  grid-row: 2 / -2;
   align-self: flex-end;
   width: var(--column-width);
   position: relative;
@@ -332,6 +346,7 @@ a.hidden,
   margin-block-start: 5px;
   font-size: 0.9em;
   width: var(--column-width);
+  grid-row: -1;
 }
 
 .bar-count {

browser/components/protections/content/protections.html

@@ -43,7 +43,9 @@
           <div class="body-wrapper">
             <p id="graph-week-summary"></p>
             <div id="graph-wrapper">
-              <div id="graph" role="table" aria-labelledby="graphLegendDescription"></div>
+              <div id="graph" role="table" aria-labelledby="graphLegendDescription">
+                <div id="private-window-message" data-l10n-id="graph-private-window"></div>
+              </div>
               <div id="legend">
                 <label id="graphLegendDescription" data-l10n-id="graph-legend-description"></label>
                 <input id="tab-social" data-type="social" type="radio" name="tabs" aria-labelledby="socialLabel socialTitle" aria-describedby="socialContent" checked>

browser/components/protections/content/protections.js

@@ -73,14 +73,21 @@ document.addEventListener("DOMContentLoaded", e => {
   document.sendTelemetryEvent("show", "protection_report");
 
   let createGraph = data => {
-    let earliestDate = data.earliestDate || Date.now();
-
+    let graph = document.getElementById("graph");
     let summary = document.getElementById("graph-total-summary");
-    summary.setAttribute(
-      "data-l10n-args",
-      JSON.stringify({ count: data.sumEvents, earliestDate })
-    );
-    summary.setAttribute("data-l10n-id", "graph-total-tracker-summary");
+    let weekSummary = document.getElementById("graph-week-summary");
+
+    // User is in private mode, show no data on the graph
+    if (data.isPrivate) {
+      graph.classList.add("private-window");
+    } else {
+      let earliestDate = data.earliestDate || Date.now();
+      summary.setAttribute(
+        "data-l10n-args",
+        JSON.stringify({ count: data.sumEvents, earliestDate })
+      );
+      summary.setAttribute("data-l10n-id", "graph-total-tracker-summary");
+    }
 
     // Set a default top size for the height of the graph bars so that small
     // numbers don't fill the whole graph.
@@ -105,13 +112,10 @@ document.addEventListener("DOMContentLoaded", e => {
     // But we need to caclulate the actual number of the most cells in a row to give accurate information.
     let maxColumnCount = 0;
     let date = new Date();
-    // The graph is already a role "table" from the HTML file.
-    let graph = document.getElementById("graph");
     for (let i = 0; i <= 6; i++) {
       let dateString = date.toISOString().split("T")[0];
       let ariaOwnsString = ""; // Get the row's colummns in order
       let currentColumnCount = 0;
-
       let bar = document.createElement("div");
       bar.className = "graph-bar";
       bar.setAttribute("role", "row");
@@ -170,12 +174,19 @@ document.addEventListener("DOMContentLoaded", e => {
       }
       bar.appendChild(innerBar);
       graph.prepend(bar);
-      let weekSummary = document.getElementById("graph-week-summary");
-      weekSummary.setAttribute(
-        "data-l10n-args",
-        JSON.stringify({ count: weekCount })
-      );
-      weekSummary.setAttribute("data-l10n-id", "graph-week-summary");
+
+      if (data.isPrivate) {
+        weekSummary.setAttribute(
+          "data-l10n-id",
+          "graph-week-summary-private-window"
+        );
+      } else {
+        weekSummary.setAttribute(
+          "data-l10n-args",
+          JSON.stringify({ count: weekCount })
+        );
+        weekSummary.setAttribute("data-l10n-id", "graph-week-summary");
+      }
 
       let label = document.createElement("span");
       label.className = "column-label";

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

@@ -20,6 +20,11 @@ graph-total-tracker-summary =
     *[other] <b>{ $count }</b> trackers blocked since { DATETIME($earliestDate, day: "numeric", month: "long", year: "numeric") }
   }
 
+# Text displayed instead of the graph when in Private Mode
+graph-private-window = { -brand-short-name } continues to  block trackers in Private Windows, but does not keep a record of what was blocked.
+# Weekly summary of the graph when the graph is empty in Private Mode
+graph-week-summary-private-window = Trackers { -brand-short-name } blocked this week
+
 # The terminology used to refer to categories of Content Blocking is also used in chrome/browser/browser.properties and should be translated consistently.
 # "Standard" in this case is an adjective, meaning "default" or "normal".
 # The category name in the <b> tag will be bold.