Bug 1485422 - Add rating stars to CFR r=ahillier
authorEd Lee <edilee@mozilla.com>
Thu, 30 Aug 2018 21:25:30 +0000
changeset 482494 0cdebe3c53f883266962a601a78baaa08cd62d0f
parent 482493 f4ca43d3fc1b14fc56a13a3be6ce877873196ed4
child 482495 962a34323e709b36f5e46cc89c5a603ab859b5ff
push id232
push userfmarier@mozilla.com
push dateWed, 05 Sep 2018 20:45:54 +0000
reviewersahillier
bugs1485422
milestone63.0a1
Bug 1485422 - Add rating stars to CFR r=ahillier Depends on D4532 Differential Revision: https://phabricator.services.mozilla.com/D4714
browser/base/content/popup-notifications.inc
browser/themes/shared/browser.inc.css
--- a/browser/base/content/popup-notifications.inc
+++ b/browser/base/content/popup-notifications.inc
@@ -95,11 +95,17 @@
           </label>
         </stack>
       </popupnotificationheader>
       <popupnotificationcontent>
         <description id="cfr-notification-author"></description>
       </popupnotificationcontent>
       <popupnotificationfooter id="cfr-notification-footer" orient="vertical">
         <description id="cfr-notification-footer-text"/>
-        <label id="cfr-notification-footer-learn-more-link" class="text-link"/>
+        <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" class="text-link"/>
+        </hbox>
       </popupnotificationfooter>
     </popupnotification>
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -165,16 +165,17 @@
 #widget-overflow .webextension-popup-browser {
   background: #fff;
 }
 
 /* Contextual Feature Recommendation popup-notification */
 
 :root {
   --cfr-notification-header-image: url(resource://activity-stream/data/content/assets/glyph-help-24.svg);
+  --cfr-notification-footer-star: url(resource://activity-stream/data/content/assets/glyph-star-17.svg);
 }
 
 #cfr-notification-header {
   width: 100%;
   text-align: center;
   box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
 }
 
@@ -225,16 +226,52 @@
   margin-bottom: 0;
 }
 
 #cfr-notification-footer {
   padding: 10px var(--arrowpanel-padding);
 }
 
 #cfr-notification-footer-text,
+#cfr-notification-footer-users,
 #cfr-notification-footer-learn-more-link {
   margin: 0;
 }
 
-#cfr-notification-footer-learn-more-link {
+#cfr-notification-footer-addon-info {
+  align-items: center;
+  display: flex;
   margin-top: 10px;
   margin-bottom: 6px;
 }
+
+#cfr-notification-footer-filled-stars,
+#cfr-notification-footer-empty-stars {
+  -moz-context-properties: fill, fill-opacity;
+  background-image: var(--cfr-notification-footer-star);
+  background-size: 17px;
+  fill: var(--lwt-text-color);
+  fill-opacity: 0.7;
+  height: 16px;
+}
+
+#cfr-notification-footer-filled-stars:-moz-locale-dir(rtl),
+#cfr-notification-footer-empty-stars {
+  background-position-x: right;
+}
+
+#cfr-notification-footer-filled-stars,
+#cfr-notification-footer-empty-stars:-moz-locale-dir(rtl) {
+  background-position-x: left;
+}
+
+#cfr-notification-footer-empty-stars[tooltiptext] {
+  margin-inline-end: 6px;
+  opacity: 0.3;
+}
+
+#cfr-notification-footer-users {
+  opacity: 0.7;
+}
+
+#cfr-notification-footer-spacer {
+  flex-grow: 1;
+}