Bug 1511751 - Part 2 - Always show all categories in the cookies subpanel and note if they are empty. r=ewright

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

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

browser/base/content/browser-contentblocking.js

@@ -304,17 +304,26 @@ var ThirdPartyCookies = {
     this.subViewList.textContent = "";
 
     for (let category of ["firstParty", "trackers", "thirdParty"]) {
-      if (categories[category].length) {
-        let box = document.createXULElement("vbox");
-        let label = document.createXULElement("label");
-        label.className = "identity-popup-cookiesView-list-header";
-        label.textContent = gNavigatorBundle.getString(`contentBlocking.cookiesView.${category}.label`);
-        box.appendChild(label);
-        for (let info of categories[category]) {
-          box.appendChild(this._createListItem(info));
-        }
-        this.subViewList.appendChild(box);
+      let box = document.createXULElement("vbox");
+      let label = document.createXULElement("label");
+      label.className = "identity-popup-cookiesView-list-header";
+      label.textContent = gNavigatorBundle.getString(`contentBlocking.cookiesView.${category}.label`);
+      box.appendChild(label);
+
+      for (let info of categories[category]) {
+        box.appendChild(this._createListItem(info));
       }
+
+      // If the category is empty, add a label noting that to the user.
+      if (categories[category].length == 0) {
+        let emptyLabel = document.createXULElement("label");
+        emptyLabel.classList.add("identity-popup-content-blocking-empty-label");
+        emptyLabel.textContent =
+          gNavigatorBundle.getString(`contentBlocking.cookiesView.${category}.empty.label`);
+        box.appendChild(emptyLabel);
+      }
+
+      this.subViewList.appendChild(box);
     }
   },
 

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

@@ -34,10 +34,10 @@ async function assertSitesListed(trackersBlocked, thirdPartyBlocked, firstPartyB
     ok(true, "Cookies view was shown");
 
     let listHeaders = cookiesView.querySelectorAll(".identity-popup-cookiesView-list-header");
-    is(listHeaders.length, 1, "We have 1 list header");
-    is(listHeaders[0].textContent,
-       gNavigatorBundle.getString(`contentBlocking.cookiesView.trackers.label`),
-       "The list header is for tracking cookies.");
+    is(listHeaders.length, 3, "We have 3 list headers");
+
+    let emptyLabels = cookiesView.querySelectorAll(".identity-popup-content-blocking-empty-label");
+    is(emptyLabels.length, 2, "We have 2 empty labels");
 
     let listItems = cookiesView.querySelectorAll(".identity-popup-content-blocking-list-item");
     is(listItems.length, 1, "We have 1 cookie in the list");
@@ -73,11 +73,8 @@ async function assertSitesListed(trackersBlocked, thirdPartyBlocked, firstPartyB
 
     ok(true, "Cookies view was shown");
 
-    listHeaders = cookiesView.querySelectorAll(".identity-popup-cookiesView-list-header");
-    is(listHeaders.length, 2, "We now have 2 list headers");
-    is(listHeaders[1].textContent,
-       gNavigatorBundle.getString(`contentBlocking.cookiesView.thirdParty.label`),
-       "The new list header is for third party cookies.");
+    emptyLabels = cookiesView.querySelectorAll(".identity-popup-content-blocking-empty-label");
+    is(emptyLabels.length, 1, "We have 1 empty label");
 
     listItems = cookiesView.querySelectorAll(".identity-popup-content-blocking-list-item");
     is(listItems.length, 2, "We have 2 cookies in the list");
@@ -111,11 +108,8 @@ async function assertSitesListed(trackersBlocked, thirdPartyBlocked, firstPartyB
 
     ok(true, "Cookies view was shown");
 
-    listHeaders = cookiesView.querySelectorAll(".identity-popup-cookiesView-list-header");
-    is(listHeaders.length, 3, "We now have 3 list headers");
-    is(listHeaders[0].textContent,
-       gNavigatorBundle.getString(`contentBlocking.cookiesView.firstParty.label`),
-       "The new list header is for first party cookies.");
+    emptyLabels = cookiesView.querySelectorAll(".identity-popup-content-blocking-empty-label");
+    is(emptyLabels.length, 0, "We have 0 empty label");
 
     listItems = cookiesView.querySelectorAll(".identity-popup-content-blocking-list-item");
     is(listItems.length, 3, "We have 2 cookies in the list");
@@ -164,12 +158,6 @@ add_task(async function testCookiesSubViewAllowed() {
 
     ok(true, "Cookies view was shown");
 
-    let listHeaders = cookiesView.querySelectorAll(".identity-popup-cookiesView-list-header");
-    is(listHeaders.length, 1, "We have 1 list header");
-    is(listHeaders[0].textContent,
-       gNavigatorBundle.getString(`contentBlocking.cookiesView.trackers.label`),
-       "The list header is for tracking cookies.");
-
     let listItems = cookiesView.querySelectorAll(".identity-popup-content-blocking-list-item");
     is(listItems.length, 1, "We have 1 cookie in the list");
 

browser/locales/en-US/chrome/browser/browser.properties

@@ -530,8 +530,23 @@ contentBlocking.cookies.blockingUnvisited.label=Blocking Unvisited Site Cookies
 contentBlocking.cookies.blockingAll.label=Blocking All Cookies
 
 contentBlocking.cookiesView.firstParty.label=From This Site
+# LOCALIZATION NOTE (contentBlocking.cookiesView.firstParty.empty.label):
+#  This references the header from contentBlocking.cookiesView.firstParty.label:
+#  "[Cookies] From This Site: None detected on this site".
+contentBlocking.cookiesView.firstParty.empty.label=None detected on this site
+
 contentBlocking.cookiesView.trackers.label=Tracking Cookies
+# LOCALIZATION NOTE (contentBlocking.cookiesView.trackers.empty.label):
+#  This references the header from contentBlocking.cookiesView.trackers.label:
+#  "Tracking Cookies: None detected on this site".
+contentBlocking.cookiesView.trackers.empty.label=None detected on this site
+
 contentBlocking.cookiesView.thirdParty.label=Third-Party Cookies
+# LOCALIZATION NOTE (contentBlocking.cookiesView.thirdParty.empty.label):
+#  This references the header from contentBlocking.cookiesView.thirdParty.label:
+#  "Third-Party Cookies: None detected on this site".
+contentBlocking.cookiesView.thirdParty.empty.label=None detected on this site
+
 # LOCALIZATION NOTE (contentBlocking.cookiesView.allowed.label):
 #   This label is shown next to a cookie origin in the cookies subview.
 #   It forms the end of the (imaginary) sentence "www.example.com [was] Allowed"

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

@@ -161,6 +161,7 @@
 
 /* CONTENT */
 
+.identity-popup-content-blocking-empty-label,
 #tracking-protection-preferences-button > .toolbarbutton-text,
 .identity-popup-footer,
 .tracking-protection-button,
@@ -439,6 +440,16 @@ description#identity-popup-content-verifier,
   max-height: 600px;
 }
 
+.identity-popup-content-blocking-empty-label {
+  color: var(--panel-disabled-color);
+}
+
+#identity-popup-cookiesView .identity-popup-content-blocking-empty-label {
+  margin-inline-start: 24px;
+  margin-top: 2px;
+  margin-bottom: 4px;
+}
+
 .identity-popup-cookiesView-list-header {
   color: var(--panel-disabled-color);
   margin: 5px 0;