Bug 1529340 - CFR Pinned tabs popup animation r=k88hudson
☠☠ backed out by 989ecfe52f3a ☠ ☠
authorRicky Rosario <rickyrosario@gmail.com>
Wed, 06 Mar 2019 23:43:15 +0000
changeset 520681 b52eb25bbe9c8b4ecf2bdc807e0f71740ff0870c
parent 520680 5ad056528954bd501ceedf8d69c1e2554a924664
child 520682 e36d2c8de6c60732da41f4cef99c5c1a92d4b029
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersk88hudson
bugs1529340
milestone67.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 1529340 - CFR Pinned tabs popup animation r=k88hudson MozReview-Commit-ID: FTr5Pi7ySbY Differential Revision: https://phabricator.services.mozilla.com/D22398
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
@@ -91,24 +91,26 @@
             <xul:image id="cfr-notification-header-image"/>
           </label>
         </stack>
       </popupnotificationheader>
       <popupnotificationcontent>
         <description id="cfr-notification-author"></description>
       </popupnotificationcontent>
       <popupnotificationfooter id="cfr-notification-footer" orient="vertical">
-        <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>
+        <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>
+        </vbox>
       </popupnotificationfooter>
     </popupnotification>
 
     <popupnotification id="storage-access-notification" hidden="true">
       <popupnotificationcontent class="storage-access-notification-content">
         <xul:vbox flex="1">
           <!-- These need to be on the same line to avoid creating
                whitespace between them (whitespace is added in the
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -227,17 +227,18 @@
 #contextual-feature-recommendation-notification popupnotificationcontent {
   margin-top: 0;
 }
 
 #contextual-feature-recommendation-notification description {
   margin-bottom: 0;
 }
 
-#cfr-notification-footer {
+#cfr-notification-footer-text-and-addon-info {
+  display: block;
   padding: 10px var(--arrowpanel-padding);
 }
 
 #contextual-feature-recommendation-notification[data-notification-category="cfrFeatures"] .popup-notification-body-container,
 #contextual-feature-recommendation-notification[data-notification-category="cfrFeatures"] #cfr-notification-footer-addon-info,
 #contextual-feature-recommendation-notification[data-notification-category="cfrAddons"] #cfr-notification-feature-steps {
   display: none;
 }
@@ -289,11 +290,65 @@
 #cfr-notification-footer-users {
   opacity: 0.7;
 }
 
 #cfr-notification-footer-spacer {
   flex-grow: 1;
 }
 
+#cfr-notification-footer-pintab-animation-container {
+  background-image: url("resource://activity-stream/data/content/assets/cfr_pinnedtab_animated.png");
+  background-position: top center;
+  background-repeat: no-repeat;
+  height: 173px;
+  width: 343px;
+}
+
+#contextual-feature-recommendation-notification[data-notification-category="cfrAddons"] #cfr-notification-footer-pintab-animation-container {
+  display: none;
+}
+
+#cfr-notification-footer-pintab-animation-container:not([animate]),
+#cfr-notification-footer-pintab-animation-container[paused],
+:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container:not([animate]),
+:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container[paused] {
+  background-image: url("resource://activity-stream/data/content/assets/cfr_pinnedtab_static.png");
+}
+
+:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container {
+  background-image: url("resource://activity-stream/data/content/assets/cfr_pinnedtab_animated_darktheme.png");
+}
+
+#cfr-notification-footer-animation-controls {
+  background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.95) 35%);
+  padding: 20px var(--arrowpanel-padding) 10px;
+}
+
+:root[lwt-popup-brighttext] #cfr-notification-footer-animation-controls {
+  margin-left: 13px;
+}
+
+#cfr-notification-footer-pintab-animation-container:not([animate]) #cfr-notification-footer-animation-controls,
+#cfr-notification-footer-pintab-animation-container[paused] #cfr-notification-footer-animation-controls {
+  visibility: hidden;
+}
+
+#cfr-notification-footer-pause-button,
+#cfr-notification-footer-pause-label {
+  color: rgba(12, 12, 13, 0.8);
+  cursor: pointer;
+}
+
+#cfr-notification-footer-pause-icon {
+  background-image: url("resource://activity-stream/data/content/assets/glyph-pause-12.svg");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 12px;
+  -moz-context-properties: fill;
+  fill: rgba(12, 12, 13, 0.8);
+  height: 12px;
+  width: 12px;
+}
+
 #content-mask {
   background: rgba(0, 0, 0, 0.5);
 }