Bug 1561538 - Render message when there are no addons. r=robwu,flod

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

toolkit/locales/en-US/toolkit/about/aboutAddons.ftl

@@ -11,6 +11,9 @@ search-header =
 search-header-shortcut =
     .key = f
 
+list-empty-get-extensions-message =
+    Get extensions and themes on <a data-l10n-name="get-extensions">{ $domain }</a>
+
 list-empty-installed =
     .value = You don’t have any add-ons of this type installed
 

toolkit/mozapps/extensions/content/aboutaddons.css

@@ -737,6 +737,10 @@ panel-list {
   font: menu;
 }
 
+section:not(:empty) ~ #empty-addons-message {
+  display: none;
+}
+
 @media (max-width: 830px) {
   .category[badge-count]::after {
     content: "";

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -3958,6 +3958,24 @@ class AddonList extends HTMLElement {
     return heading;
   }
 
+  createEmptyListMessage() {
+    let messageContainer = document.createElement("p");
+    messageContainer.id = "empty-addons-message";
+    let a = document.createElement("a");
+    a.href = Services.urlFormatter.formatURLPref(
+      "extensions.getAddons.link.url"
+    );
+    a.setAttribute("target", "_blank");
+    a.setAttribute("data-l10n-name", "get-extensions");
+    document.l10n.setAttributes(
+      messageContainer,
+      "list-empty-get-extensions-message",
+      { domain: a.hostname }
+    );
+    messageContainer.appendChild(a);
+    return messageContainer;
+  }
+
   updateSectionIfEmpty(section) {
     // The header is added before any add-on cards, so if there's only one
     // child then it's the header. In that case we should empty out the section.
@@ -4199,6 +4217,13 @@ class AddonList extends HTMLElement {
       frag.appendChild(this.sections[i].node);
     }
 
+    // Render the placeholder that is shown when all sections are empty.
+    // This call is after rendering the sections, because its visibility
+    // is controlled through the general sibling combinator relative to
+    // the sections (section ~).
+    let message = this.createEmptyListMessage();
+    frag.appendChild(message);
+
     // Make sure fluent has set all the strings before we render. This will
     // avoid the height changing as strings go from 0 height to having text.
     await document.l10n.translateFragment(frag);

toolkit/mozapps/extensions/test/browser/browser_html_list_view.js

@@ -988,3 +988,29 @@ add_task(async function testDisabledDimming() {
   await closeView(win);
   await extension.unload();
 });
+
+add_task(async function testEmptyMessage() {
+  let win = await loadInitialView("extension");
+  let doc = win.document;
+  let enabledSection = getSection(doc, "enabled");
+  let disabledSection = getSection(doc, "disabled");
+  const message = doc.querySelector("#empty-addons-message");
+
+  // With 3 enabled addons and 1 disabled, the message is hidden
+  is_element_hidden(message, "Empty addons message hidden");
+
+  // The test runner (Mochitest) relies on add-ons that should not be removed.
+  // Simulate the scenario of zero add-ons by clearing all rendered sections.
+  while (enabledSection.firstChild) {
+    enabledSection.firstChild.remove();
+  }
+
+  while (disabledSection.firstChild) {
+    disabledSection.firstChild.remove();
+  }
+
+  // Message should now be displayed
+  is_element_visible(message, "Empty addons message visible");
+
+  await closeView(win);
+});