diff --git a/toolkit/mozapps/extensions/content/aboutaddons.css b/toolkit/mozapps/extensions/content/aboutaddons.css index f270a2faeaa0..5fa89e727f49 100644 --- a/toolkit/mozapps/extensions/content/aboutaddons.css +++ b/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; diff --git a/toolkit/mozapps/extensions/content/aboutaddons.html b/toolkit/mozapps/extensions/content/aboutaddons.html index a806b5f43a51..4a0fa5509ecf 100644 --- a/toolkit/mozapps/extensions/content/aboutaddons.html +++ b/toolkit/mozapps/extensions/content/aboutaddons.html @@ -60,9 +60,12 @@
+ + data-l10n-id="addon-badge-private-browsing-allowed" + hidden>
diff --git a/toolkit/mozapps/extensions/content/aboutaddons.js b/toolkit/mozapps/extensions/content/aboutaddons.js index 3779f3bf15ab..c914859e6588 100644 --- a/toolkit/mozapps/extensions/content/aboutaddons.js +++ b/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; diff --git a/toolkit/mozapps/extensions/test/browser/browser.ini b/toolkit/mozapps/extensions/test/browser/browser.ini index 44a2b490b6c0..c805f718f8a0 100644 --- a/toolkit/mozapps/extensions/test/browser/browser.ini +++ b/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 diff --git a/toolkit/mozapps/extensions/test/browser/browser_html_recommendations.js b/toolkit/mozapps/extensions/test/browser/browser_html_recommendations.js new file mode 100644 index 000000000000..333b92b9991d --- /dev/null +++ b/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); +}); diff --git a/toolkit/themes/shared/extensions/recommended.svg b/toolkit/themes/shared/extensions/recommended.svg new file mode 100644 index 000000000000..aa8dba434e1d --- /dev/null +++ b/toolkit/themes/shared/extensions/recommended.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css index 8ba4eca85400..545ad77e2d89 100644 --- a/toolkit/themes/shared/in-content/common.inc.css +++ b/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; diff --git a/toolkit/themes/shared/mozapps.inc.mn b/toolkit/themes/shared/mozapps.inc.mn index d286944857c1..f5a023c365c7 100644 --- a/toolkit/themes/shared/mozapps.inc.mn +++ b/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