Bug 1539699 - Show a recommended badge for recommended add-ons (HTML) r=mixedpuppy

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

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

toolkit/mozapps/extensions/content/aboutaddons.css

@@ -120,12 +120,24 @@ addon-list addon-card > .addon.card {
   width: 16px;
   height: 16px;
   background-size: 16px;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-inline-end: 8px;
 }
 
 .addon-badge-private-browsing-allowed {
   background-image: url("chrome://browser/skin/private-browsing.svg");
 }
 
+.addon-badge-recommended {
+  background-color: var(--orange-50);
+  background-image: url("chrome://mozapps/skin/extensions/recommended.svg");
+  background-size: 10px;
+  border-radius: 8px;
+  fill: #fff;
+  -moz-context-properties: fill;
+}
+
 .addon-description {
   font-size: 14px;
   line-height: 20px;

toolkit/mozapps/extensions/content/aboutaddons.html

@@ -60,9 +60,12 @@
           <div class="card-contents">
             <div class="addon-name-container">
               <span class="addon-name"></span>
+              <div class="addon-badge addon-badge-recommended"
+                   data-l10n-id="addon-badge-recommended"
+                   hidden></div>
               <div class="addon-badge addon-badge-private-browsing-allowed"
-                    data-l10n-id="addon-badge-private-browsing-allowed"
-                    hidden></div>
+                   data-l10n-id="addon-badge-private-browsing-allowed"
+                   hidden></div>
             </div>
             <span class="addon-description"></span>
           </div>

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -1639,6 +1639,10 @@ class AddonCard extends HTMLElement {
       });
     }
 
+    // Show the recommended badge if needed.
+    card.querySelector(".addon-badge-recommended")
+      .hidden = !addon.isRecommended;
+
     // Update description.
     card.querySelector(".addon-description").textContent = addon.description;
 

toolkit/mozapps/extensions/test/browser/browser.ini

@@ -92,6 +92,7 @@ skip-if = os == 'linux' && !debug # Bug 1398766
 [browser_html_plugins.js]
 skip-if = (os == 'win' && processor == 'aarch64') # aarch64 has no plugin support, bug 1525174 and 1547495
 [browser_html_recent_updates.js]
+[browser_html_recommendations.js]
 [browser_html_updates.js]
 [browser_inlinesettings_browser.js]
 skip-if = os == 'mac' || os == 'linux' # Bug 1483347

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

@@ -0,0 +1,61 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint max-len: ["error", 80] */
+
+"use strict";
+
+add_task(async function setup() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["extensions.htmlaboutaddons.enabled", true]],
+  });
+});
+
+async function checkRecommendedBadge(id, hidden) {
+  function checkBadge() {
+    let card = win.document.querySelector(`addon-card[addon-id="${id}"]`);
+    let badge = card.querySelector(".addon-badge-recommended");
+    is(badge.hidden, hidden, `badge is ${hidden ? "hidden" : "shown"}`);
+    return card;
+  }
+
+  let win = await loadInitialView("extension");
+
+  // Check list view.
+  let card = checkBadge();
+
+  // Load detail view.
+  let loaded = waitForViewLoad(win);
+  card.querySelector('[action="expand"]').click();
+  await loaded;
+
+  // Check detail view.
+  checkBadge();
+
+  await closeView(win);
+}
+
+add_task(async function testNotRecommended() {
+  let id = "not-recommended@mochi.test";
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {applications: {gecko: {id}}},
+    useAddonManager: "temporary",
+  });
+  await extension.startup();
+
+  await checkRecommendedBadge(id, true);
+
+  await extension.unload();
+});
+
+add_task(async function testRecommended() {
+  let id = "recommended@mochi.test";
+  let provider = new MockProvider();
+  provider.createAddons([{
+    id,
+    isRecommended: true,
+    name: "Recommended",
+    type: "extension",
+  }]);
+
+  await checkRecommendedBadge(id, false);
+});

toolkit/themes/shared/extensions/recommended.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <g fill="context-fill">
+    <path d="M11.45 0H.55C.25 0 0 .22 0 .5V3c0 1.1.98 2 2.18 2h.05a3.67 3.67 0 0 0 3.22 2.96V9.5h1.1V7.96A3.67 3.67 0 0 0 9.77 5h.05C11.02 5 12 4.1 12 3V.5c0-.28-.24-.5-.55-.5zM1.1 3V1h1.1v3c-.61 0-1.1-.45-1.1-1zm9.82 0c0 .55-.49 1-1.1 1V1h1.1v2zM7.1 10H4.9c-2.72 0-2.72 2-2.72 2h7.64s0-2-2.73-2z"/>
+  </g>
+</svg>

toolkit/themes/shared/in-content/common.inc.css

@@ -78,6 +78,7 @@
   --green-70: #058b00;
   --green-80: #006504;
   --green-90: #003706;
+  --orange-50: #ff9400;
   --purple-70: #6200a4;
   --purple-70-a40: rgba(98, 0, 164, 0.4);
   --red-50: #ff0039;

toolkit/themes/shared/mozapps.inc.mn

@@ -23,6 +23,7 @@
   skin/classic/mozapps/extensions/alerticon-info-positive.svg (../../shared/extensions/alerticon-info-positive.svg)
   skin/classic/mozapps/extensions/alerticon-info-negative.svg (../../shared/extensions/alerticon-info-negative.svg)
   skin/classic/mozapps/extensions/category-legacy.svg        (../../shared/extensions/category-legacy.svg)
+  skin/classic/mozapps/extensions/recommended.svg            (../../shared/extensions/recommended.svg)
 #ifndef ANDROID
   skin/classic/mozapps/extensions/rating-star.svg            (../../shared/extensions/rating-star.svg)
 #endif