From 9675eda2fa26d54e6b457e5bb595126437ede018 Mon Sep 17 00:00:00 2001
From: Rob Wu <rob@robwu.nl>
Date: Wed, 8 May 2019 23:36:32 +0000
Subject: [PATCH] Bug 1546980 - Add ratings and user counts to discopane
 r=mstriemer,flod

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

--HG--
extra : moz-landing-system : lando
---
 .../en-US/toolkit/about/aboutAddons.ftl       |  4 ++++
 .../extensions/content/aboutaddons.css        |  8 +++++++
 .../extensions/content/aboutaddons.html       |  4 ++++
 .../mozapps/extensions/content/aboutaddons.js | 21 ++++++++++++++++++-
 .../extensions/content/rating-star.css        |  4 ++++
 .../browser/browser_html_discover_view.js     | 20 ++++++++++++++++++
 6 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/toolkit/locales/en-US/toolkit/about/aboutAddons.ftl b/toolkit/locales/en-US/toolkit/about/aboutAddons.ftl
index 660f2f251141..d44e92e58a31 100644
--- a/toolkit/locales/en-US/toolkit/about/aboutAddons.ftl
+++ b/toolkit/locales/en-US/toolkit/about/aboutAddons.ftl
@@ -367,6 +367,10 @@ privacy-policy = Privacy Policy
 # Variables:
 #   $author (string) - The name of the add-on developer.
 created-by-author = by <a data-l10n-name="author">{ $author }</a>
+# Shows the number of daily users of the add-on.
+# Variables:
+#   $dailyUsers (number) - The number of daily users.
+user-count = Users: { $dailyUsers }
 install-extension-button = Add to { -brand-product-name }
 install-theme-button = Install Theme
 # The label of the button that appears after installing an add-on. Upon click,
diff --git a/toolkit/mozapps/extensions/content/aboutaddons.css b/toolkit/mozapps/extensions/content/aboutaddons.css
index d96da4a22f6d..9f02f64dc990 100644
--- a/toolkit/mozapps/extensions/content/aboutaddons.css
+++ b/toolkit/mozapps/extensions/content/aboutaddons.css
@@ -157,6 +157,14 @@ recommended-addon-card .addon-description:not(:empty) {
   font-weight: normal;
 }
 
+.disco-description-statistics {
+  margin-top: 1em;
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+  grid-column-gap: 2em;
+  align-items: center;
+}
+
 .disco-cta-button {
   font-size: 14px;
   flex-shrink: 0;
diff --git a/toolkit/mozapps/extensions/content/aboutaddons.html b/toolkit/mozapps/extensions/content/aboutaddons.html
index 1837fbf86eb0..59a97af93e1a 100644
--- a/toolkit/mozapps/extensions/content/aboutaddons.html
+++ b/toolkit/mozapps/extensions/content/aboutaddons.html
@@ -76,6 +76,10 @@
         <strong class="disco-description-intro"></strong>
         <span class="disco-description-main"></span>
       </div>
+      <div class="disco-description-statistics">
+        <five-star-rating></five-star-rating>
+        <span class="disco-user-count"></span>
+      </div>
     </template>
 
     <template name="addon-details">
diff --git a/toolkit/mozapps/extensions/content/aboutaddons.js b/toolkit/mozapps/extensions/content/aboutaddons.js
index f11ca272d93f..c5aadc871714 100644
--- a/toolkit/mozapps/extensions/content/aboutaddons.js
+++ b/toolkit/mozapps/extensions/content/aboutaddons.js
@@ -208,6 +208,9 @@ class DiscoAddonWrapper {
     this.screenshots = repositoryAddon.screenshots;
     this.sourceURI = repositoryAddon.sourceURI;
     this.creator = repositoryAddon.creator;
+    this.averageRating = repositoryAddon.averageRating;
+
+    this.dailyUsers = details.addon.average_daily_users;
 
     this.editorialHeading = details.heading_text;
     this.editorialDescription = details.description_text;
@@ -1277,7 +1280,23 @@ class RecommendedAddonCard extends HTMLElement {
         addon.editorialHeading;
     }
 
-    // TODO: Append ratings and user count to description.
+    let hasStats = false;
+    if (addon.averageRating) {
+      hasStats = true;
+      card.querySelector("five-star-rating").rating = addon.averageRating;
+    } else {
+      card.querySelector("five-star-rating").hidden = true;
+    }
+
+    if (addon.dailyUsers) {
+      hasStats = true;
+      let userCountElem = card.querySelector(".disco-user-count");
+      document.l10n.setAttributes(userCountElem, "user-count", {
+        dailyUsers: addon.dailyUsers,
+      });
+    }
+
+    card.querySelector(".disco-description-statistics").hidden = !hasStats;
   }
 
   registerButtons(card, addon) {
diff --git a/toolkit/mozapps/extensions/content/rating-star.css b/toolkit/mozapps/extensions/content/rating-star.css
index e9c98928e42d..2755c404f57c 100644
--- a/toolkit/mozapps/extensions/content/rating-star.css
+++ b/toolkit/mozapps/extensions/content/rating-star.css
@@ -8,6 +8,10 @@
   align-content: center;
 }
 
+:host([hidden]) {
+  display: none;
+}
+
 .rating-star {
   display: inline-block;
   width: var(--rating-star-size);
diff --git a/toolkit/mozapps/extensions/test/browser/browser_html_discover_view.js b/toolkit/mozapps/extensions/test/browser/browser_html_discover_view.js
index d25148f7da94..f7c8fb8b5b23 100644
--- a/toolkit/mozapps/extensions/test/browser/browser_html_discover_view.js
+++ b/toolkit/mozapps/extensions/test/browser/browser_html_discover_view.js
@@ -44,6 +44,8 @@ function getTestExpectationFromApiResult(result) {
     authorName: result.addon.authors[0].name,
     editorialHead: result.heading_text,
     editorialBody: result.description_text,
+    dailyUsers: result.addon.average_daily_users,
+    rating: result.addon.ratings.average,
   };
 }
 
@@ -339,6 +341,24 @@ add_task(async function discopane_with_real_api_data() {
          "Has extension install button");
       checkContent(".disco-description-intro", expectations.editorialHead);
       checkContent(".disco-description-main", expectations.editorialBody);
+
+      let ratingElem = card.querySelector("five-star-rating");
+      if (expectations.rating) {
+        is(ratingElem.rating, expectations.rating, "Expected rating value");
+        ok(ratingElem.offsetWidth, "Rating element is visible");
+      } else {
+        is(ratingElem.offsetWidth, 0, "Rating element is not visible");
+      }
+
+      let userCountElem = card.querySelector(".disco-user-count");
+      if (expectations.dailyUsers) {
+        Assert.deepEqual(
+          win.document.l10n.getAttributes(userCountElem),
+          {id: "user-count", args: {dailyUsers: expectations.dailyUsers}},
+          "Card count should be rendered");
+      } else {
+        is(userCountElem.offsetWidth, 0, "User count element is not visible");
+      }
     }
   }