Bug 1825658 - Modify "addon_recommendation" CFR template to support Facebook container experiment r=jprickett,barret

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

browser/base/content/popup-notifications.inc

@@ -157,18 +157,19 @@
         </stack>
       </popupnotificationheader>
       <popupnotificationcontent>
+      <hbox>
         <description id="cfr-notification-author"></description>
+        <hbox id="cfr-notification-footer-addon-info">
+            <hbox id="cfr-notification-footer-filled-stars"/>
+            <hbox id="cfr-notification-footer-empty-stars"/>
+            <label id="cfr-notification-footer-users"/>
+          </hbox>
+      </hbox>
       </popupnotificationcontent>
       <popupnotificationfooter id="cfr-notification-footer" orient="vertical">
         <vbox id="cfr-notification-footer-text-and-addon-info">
           <description id="cfr-notification-footer-text"/>
-          <hbox id="cfr-notification-footer-addon-info">
-            <hbox id="cfr-notification-footer-filled-stars"/>
-            <hbox id="cfr-notification-footer-empty-stars"/>
-            <label id="cfr-notification-footer-users"/>
-            <spacer id="cfr-notification-footer-spacer" hidden="true"/>
-            <label id="cfr-notification-footer-learn-more-link" is="text-link"/>
-          </hbox>
+          <label id="cfr-notification-footer-learn-more-link" is="text-link"/>
         </vbox>
       </popupnotificationfooter>
     </popupnotification>

browser/components/newtab/content-src/asrouter/schemas/MessagingExperiment.schema.json

@@ -231,14 +231,11 @@
                   "description": "The icon displayed in the pop-over. Should be 64x64px and png/svg."
                 },
                 "rating": {
-                  "type": "number",
-                  "minimum": 0,
-                  "maximum": 5,
+                  "type": "string",
                   "description": "Star rating"
                 },
                 "users": {
-                  "type": "integer",
-                  "minimum": 0,
+                  "type": "string",
                   "description": "Installed users"
                 },
                 "amo_url": {

browser/components/newtab/content-src/asrouter/templates/CFR/templates/ExtensionDoorhanger.schema.json

@@ -120,14 +120,11 @@
               "description": "The icon displayed in the pop-over. Should be 64x64px and png/svg."
             },
             "rating": {
-              "type": "number",
-              "minimum": 0,
-              "maximum": 5,
+              "type": "string",
               "description": "Star rating"
             },
             "users": {
-              "type": "integer",
-              "minimum": 0,
+              "type": "string",
               "description": "Installed users"
             },
             "amo_url": {

browser/components/newtab/lib/CFRMessageProvider.jsm

@@ -96,8 +96,8 @@ const CFR_MESSAGES = [
         id: "954390",
         title: "Facebook Container",
         icon: "chrome://browser/skin/addons/addon-install-downloading.svg",
-        rating: 4.6,
-        users: 299019,
+        rating: "4.6",
+        users: "299019",
         author: "Mozilla",
         amo_url: "https://addons.mozilla.org/firefox/addon/facebook-container/",
       },
@@ -167,8 +167,8 @@ const CFR_MESSAGES = [
         id: "445852",
         title: "To Google Translate",
         icon: "chrome://browser/skin/addons/addon-install-downloading.svg",
-        rating: 4.1,
-        users: 313474,
+        rating: "4.1",
+        users: "313474",
         author: "Juan Escobar",
         amo_url:
           "https://addons.mozilla.org/firefox/addon/to-google-translate/",
@@ -239,8 +239,8 @@ const CFR_MESSAGES = [
         id: "700308",
         title: "Enhancer for YouTube\u2122",
         icon: "chrome://browser/skin/addons/addon-install-downloading.svg",
-        rating: 4.8,
-        users: 357328,
+        rating: "4.8",
+        users: "357328",
         author: "Maxime RF",
         amo_url:
           "https://addons.mozilla.org/firefox/addon/enhancer-for-youtube/",
@@ -312,8 +312,8 @@ const CFR_MESSAGES = [
         id: "659026",
         title: "Wikipedia Context Menu Search",
         icon: "chrome://browser/skin/addons/addon-install-downloading.svg",
-        rating: 4.9,
-        users: 3095,
+        rating: "4.9",
+        users: "3095",
         author: "Nick Diedrich",
         amo_url:
           "https://addons.mozilla.org/firefox/addon/wikipedia-context-menu-search/",
@@ -388,8 +388,8 @@ const CFR_MESSAGES = [
         id: "387429",
         title: "Reddit Enhancement Suite",
         icon: "chrome://browser/skin/addons/addon-install-downloading.svg",
-        rating: 4.6,
-        users: 258129,
+        rating: "4.6",
+        users: "258129",
         author: "honestbleeps",
         amo_url:
           "https://addons.mozilla.org/firefox/addon/reddit-enhancement-suite/",

browser/components/newtab/lib/CFRPageActions.jsm

@@ -354,10 +354,7 @@ class PageAction {
     return subAttribute ? mainString.attributes[subAttribute] : mainString;
   }
 
-  async _setAddonAuthorAndRating(document, content) {
-    const author = this.window.document.getElementById(
-      "cfr-notification-author"
-    );
+  async _setAddonRating(document, content) {
     const footerFilledStars = this.window.document.getElementById(
       "cfr-notification-footer-filled-stars"
     );
@@ -367,14 +364,6 @@ class PageAction {
     const footerUsers = this.window.document.getElementById(
       "cfr-notification-footer-users"
     );
-    const footerSpacer = this.window.document.getElementById(
-      "cfr-notification-footer-spacer"
-    );
-
-    author.textContent = await this.getStrings({
-      string_id: "cfr-doorhanger-extension-author",
-      args: { name: content.addon.author },
-    });
 
     const { rating } = content.addon;
     if (rating) {
@@ -407,23 +396,13 @@ class PageAction {
 
     const { users } = content.addon;
     if (users) {
-      footerUsers.setAttribute(
-        "value",
-        await this.getStrings({
-          string_id: "cfr-doorhanger-extension-total-users",
-          args: { total: users },
-        })
-      );
+      footerUsers.setAttribute("value", users);
       footerUsers.hidden = false;
     } else {
       // Prevent whitespace around empty label from affecting other spacing
       footerUsers.hidden = true;
       footerUsers.removeAttribute("value");
     }
-
-    // Spacer pushes the link to the opposite end when there's other content
-
-    footerSpacer.hidden = !rating && !users;
   }
 
   _createElementAndAppend({ type, id }, parent) {
@@ -638,18 +617,25 @@ class PageAction {
         };
         break;
       default:
+        const authorText = await this.getStrings({
+          string_id: "cfr-doorhanger-extension-author",
+          args: { name: content.addon.author },
+        });
         panelTitle = await this.getStrings(content.addon.title);
-        await this._setAddonAuthorAndRating(this.window.document, content);
+        await this._setAddonRating(this.window.document, content);
         if (footerText.firstChild) {
           footerText.firstChild.remove();
         }
+        if (footerText.lastChild) {
+          footerText.lastChild.remove();
+        }
+
         // Main body content of the dropdown
         footerText.appendChild(
           lazy.RemoteL10n.createElement(this.window.document, "span", {
             content: content.text,
           })
         );
-        options = { popupIconURL: content.addon.icon, ...options };
 
         footerLink.value = await this.getStrings({
           string_id: "cfr-doorhanger-extension-learn-more-link",
@@ -662,6 +648,14 @@ class PageAction {
             event: "LEARN_MORE",
           });
 
+        footerText.appendChild(footerLink);
+        options = {
+          popupIconURL: content.addon.icon,
+          popupIconClass: content.icon_class,
+          name: authorText,
+          ...options,
+        };
+
         primaryActionCallback = async () => {
           // eslint-disable-next-line no-use-before-define
           primary.action.data.url = await CFRPageActions._fetchLatestAddonVersion(

browser/components/newtab/test/browser/browser_asrouter_experimentsAPILoader.js

@@ -33,9 +33,9 @@ const MESSAGE_CONTENT = {
       icon:
         "chrome://activity-stream/content/data/content/assets/cfr_fb_container.png",
       title: "Facebook Container",
-      users: 1455872,
+      users: "1455872",
       author: "Mozilla",
-      rating: 4.5,
+      rating: "4.5",
       amo_url: "https://addons.mozilla.org/firefox/addon/facebook-container/",
     },
     buttons: {

browser/components/newtab/test/unit/asrouter/CFRPageActions.test.js

@@ -576,7 +576,7 @@ describe("CFRPageActions", () => {
         assert.isNull(footerUsers.getAttribute("hidden"));
         assert.equal(
           footerUsers.getAttribute("value"),
-          `${fakeRecommendation.content.addon.users} users`
+          `${fakeRecommendation.content.addon.users}`
         );
       });
       it("should send the right telemetry", async () => {
@@ -735,6 +735,11 @@ describe("CFRPageActions", () => {
             eventCallback: pageAction._popupStateChange,
             persistent: false,
             persistWhileVisible: false,
+            popupIconClass: fakeRecommendation.content.icon_class,
+            name: {
+              string_id: "cfr-doorhanger-extension-author",
+              args: { name: fakeRecommendation.content.addon.author },
+            },
           }
         );
       });

browser/components/newtab/test/unit/asrouter/constants.js

@@ -98,12 +98,13 @@ export const FAKE_RECOMMENDATION = {
       sumo_path: "a_help_path_fragment",
     },
     heading_text: "Fake Heading Text",
+    icon_class: "Fake Icon class",
     addon: {
       title: "Fake Addon Title",
       author: "Fake Addon Author",
       icon: "a_path_to_some_icon",
-      rating: 4.2,
-      users: 1234,
+      rating: "4.2",
+      users: "1234",
       amo_url: "a_path_to_amo",
     },
     descriptionDetails: {

browser/themes/shared/browser-shared.css

@@ -548,6 +548,12 @@ menupopup::part(drop-indicator) {
   margin-inline-end: 12px;
 }
 
+#contextual-feature-recommendation-notification .cfr-doorhanger-medium-icon {
+  width: 50px;
+  height: 50px;
+  margin-inline-end: 12px;
+}
+
 #contextual-feature-recommendation-notification .popup-notification-body-container {
   width: 100%;
   padding-bottom: 2px;
@@ -571,6 +577,23 @@ menupopup::part(drop-indicator) {
   display: none;
 }
 
+#contextual-feature-recommendation-notification[data-notification-category="addon_recommendation"] .popup-notification-description > b {
+  font-weight: 300;
+  padding-inline-start: 5px;
+}
+
+#contextual-feature-recommendation-notification[data-notification-category="addon_recommendation"] #cfr-notification-footer-learn-more-link {
+  margin-inline-start: 5px;
+}
+
+#contextual-feature-recommendation-notification[data-notification-category="addon_recommendation"] #cfr-notification-header-image {
+  display: none;
+}
+
+#contextual-feature-recommendation-notification[data-notification-category="addon_recommendation"] #cfr-notification-header-label {
+  margin-block-end: 9px;
+}
+
 /*
  * `icon_and_message` CFR doorhanger with: icon, title and subtitle.
  * No panel header is shown
@@ -588,7 +611,6 @@ menupopup::part(drop-indicator) {
   display: block; /* This forces the subtitle content to wrap */
 }
 
-
 #cfr-notification-feature-steps {
   display: flex;
   flex-direction: column;