Bug 1539699 - Show a recommended badge for recommended add-ons (HTML) r=mixedpuppy
authorMark Striemer <mstriemer@mozilla.com>
Thu, 13 Jun 2019 01:57:07 +0000
changeset 478618 02ee2cdf02b3c4bb4034ecaf6bf7bb2f4c7bc456
parent 478617 0b840940852459fabc57f263368d806b139aae63
child 478619 608cbcf44402ded22a267add82053ff6271eb2e7
push id87792
push usermstriemer@mozilla.com
push dateThu, 13 Jun 2019 02:51:09 +0000
treeherderautoland@02ee2cdf02b3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmixedpuppy
bugs1539699
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1539699 - Show a recommended badge for recommended add-ons (HTML) r=mixedpuppy Differential Revision: https://phabricator.services.mozilla.com/D34780
toolkit/mozapps/extensions/content/aboutaddons.css
toolkit/mozapps/extensions/content/aboutaddons.html
toolkit/mozapps/extensions/content/aboutaddons.js
toolkit/mozapps/extensions/test/browser/browser.ini
toolkit/mozapps/extensions/test/browser/browser_html_recommendations.js
toolkit/themes/shared/extensions/recommended.svg
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/shared/mozapps.inc.mn
--- a/toolkit/mozapps/extensions/content/aboutaddons.css
+++ b/toolkit/mozapps/extensions/content/aboutaddons.css
@@ -115,22 +115,34 @@ addon-list addon-card > .addon.card {
   line-height: 22px;
   margin-inline-end: 8px;
 }
 
 .addon-badge {
   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;
   color: var(--in-content-deemphasized-text);
   font-weight: 400;
 }
 
 /* Prevent the content from wrapping unless expanded. */
--- a/toolkit/mozapps/extensions/content/aboutaddons.html
+++ b/toolkit/mozapps/extensions/content/aboutaddons.html
@@ -55,19 +55,22 @@
     <template name="card">
       <div class="card addon">
         <img class="card-heading-image">
         <div class="addon-card-collapsed">
           <img class="card-heading-icon addon-icon">
           <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>
           <div class="more-options-menu">
             <button class="more-options-button ghost-button" action="more-options"></button>
           </div>
         </div>
       </div>
--- a/toolkit/mozapps/extensions/content/aboutaddons.js
+++ b/toolkit/mozapps/extensions/content/aboutaddons.js
@@ -1634,16 +1634,20 @@ class AddonCard extends HTMLElement {
         addon.incognito != "not_allowed") {
       // Keep update synchronous, the badge can appear later.
       isAllowedInPrivateBrowsing(addon).then(isAllowed => {
         card.querySelector(".addon-badge-private-browsing-allowed")
           .hidden = !isAllowed;
       });
     }
 
+    // Show the recommended badge if needed.
+    card.querySelector(".addon-badge-recommended")
+      .hidden = !addon.isRecommended;
+
     // Update description.
     card.querySelector(".addon-description").textContent = addon.description;
 
     // Update the details if they're shown.
     if (this.details) {
       this.details.update();
     }
 
--- a/toolkit/mozapps/extensions/test/browser/browser.ini
+++ b/toolkit/mozapps/extensions/test/browser/browser.ini
@@ -87,16 +87,17 @@ skip-if = os == 'linux' && !debug # Bug 
 [browser_html_list_view_recommendations.js]
 [browser_html_message_bar.js]
 [browser_html_named_deck.js]
 [browser_html_options_ui.js]
 [browser_html_options_ui_in_tab.js]
 [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
 [browser_installssl.js]
 skip-if = verify
 [browser_interaction_telemetry.js]
 [browser_langpack_signing.js]
 [browser_legacy.js]
new file mode 100644
--- /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);
+});
new file mode 100644
--- /dev/null
+++ b/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>
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -73,16 +73,17 @@
   --grey-90-a30: rgba(12, 12, 13, 0.3);
   --grey-90-a50: rgba(12, 12, 13, 0.5);
   --grey-90-a60: rgba(12, 12, 13, 0.6);
   --green-50: #30e60b;
   --green-60: #12bc00;
   --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;
   --red-50-a30: rgba(255, 0, 57, 0.3);
   --red-60: #d70022;
   --red-70: #a4000f;
   --red-80: #5a0002;
   --red-90: #3e0200;
--- a/toolkit/themes/shared/mozapps.inc.mn
+++ b/toolkit/themes/shared/mozapps.inc.mn
@@ -18,16 +18,17 @@
 
   skin/classic/mozapps/extensions/extensionGeneric-16.svg    (../../shared/extensions/extensionGeneric-16.svg)
   skin/classic/mozapps/extensions/utilities.svg              (../../shared/extensions/utilities.svg)
   skin/classic/mozapps/extensions/alerticon-warning.svg      (../../shared/extensions/alerticon-warning.svg)
   skin/classic/mozapps/extensions/alerticon-error.svg        (../../shared/extensions/alerticon-error.svg)
   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
   skin/classic/mozapps/aboutNetworking.css                   (../../shared/aboutNetworking.css)
 #ifndef ANDROID
   skin/classic/mozapps/aboutProfiles.css                     (../../shared/aboutProfiles.css)
 #endif
   skin/classic/mozapps/aboutServiceWorkers.css               (../../shared/aboutServiceWorkers.css)