Bug 1352075 - Add Photon arrow-panel animation for Mac+Windows. r?dao, r?mossop draft
authorSam Foster <sfoster@mozilla.com>
Wed, 14 Jun 2017 10:44:13 -0700
changeset 597753 03057ceb8e271c202287844c91cd8ff04df75d5a
parent 597455 464b2a3c25aa1065760d9ecbb0870bca4a66c62e
child 634310 dd7d002b789ba0586914882cd0474d55025e57e0
push id65018
push userbmo:sfoster@mozilla.com
push dateTue, 20 Jun 2017 22:44:02 +0000
reviewersdao, mossop
bugs1352075
milestone56.0a1
Bug 1352075 - Add Photon arrow-panel animation for Mac+Windows. r?dao, r?mossop * Use new panel animation when opening arrow-panels (including bookmarks menu) to fade in and drop into position * Linux/GTK is (still) excluded * The same element has its opacity and transform properties animated as before, so it doesnt change fundamentally * New animation is non-directional (i.e. LTR vs. RTL) * Fine-tune open/close transitions via :epang MozReview-Commit-ID: 8t5XXT8KmmD
browser/base/content/browser.css
toolkit/content/xul.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -1055,27 +1055,90 @@ toolbarpaletteitem[place="palette"] > #d
   -moz-appearance: none;
   -moz-binding: url("chrome://browser/content/places/menu.xml#places-popup-arrow");
   background: transparent;
   border: none;
   /* The popup inherits -moz-image-region from the button, must reset it */
   -moz-image-region: auto;
 }
 
-%ifdef MOZ_WIDGET_COCOA
-
+%if defined(MOZ_PHOTON_ANIMATIONS)
+/* Photon arrow-panel animations */
+%if defined(MOZ_WIDGET_COCOA)
 /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
    instead of "transform" and "opacity" for these animations.
    The -moz-window* properties apply to the whole window including the window's
    shadow, and they don't affect the window's "shape", so the system doesn't
    have to recompute the shadow shape during the animation. This makes them a
    lot faster. In fact, Gecko no longer triggers shadow shape recomputations
    for repaints.
    These properties are not implemented on other platforms. */
 #BMB_bookmarksPopup {
+  -moz-window-opacity: 0;
+  -moz-window-transform: translateY(-70px);
+  transition-property: -moz-window-transform, -moz-window-opacity;
+  transition-duration: 0.18s, 0.18s;
+  transition-timing-function:
+    var(--animation-easing-function), ease-out;
+}
+
+#BMB_bookmarksPopup[side="bottom"] {
+  -moz-window-transform: translateY(70px);
+}
+
+#BMB_bookmarksPopup[animate="open"] {
+  -moz-window-opacity: 1.0;
+  transition-duration: 0.20s, 0.10s;
+  -moz-window-transform: none;
+  transition-timing-function:
+    var(--animation-easing-function), ease-in-out;
+}
+
+#BMB_bookmarksPopup[animate="cancel"] {
+  -moz-window-transform: none;
+}
+
+#BMB_bookmarksPopup[arrowposition] {
+  -moz-window-transform-origin: 50% 50% 0;
+}
+%elif !defined(MOZ_WIDGET_GTK)
+#BMB_bookmarksPopup {
+  opacity: 0;
+  transform: translateY(-70px);
+  transition-property: transform, opacity;
+  transition-duration: 0.18s, 0.18s;
+  transition-timing-function:
+    var(--animation-easing-function), ease-out;
+}
+
+#BMB_bookmarksPopup[side="bottom"] {
+  transform: translateY(70px);
+}
+
+#BMB_bookmarksPopup[animate="open"] {
+  opacity: 1.0;
+  transition-duration: 0.20s, 0.10s;
+  transform: none;
+  transition-timing-function:
+    var(--animation-easing-function), ease-in-out;
+}
+
+#BMB_bookmarksPopup[animate="cancel"] {
+  transform: none;
+}
+
+#BMB_bookmarksPopup[arrowposition] {
+  transform-origin: 50% 50% 0;
+}
+%endif
+
+%else
+/* Original arrow-panel animations */
+%ifdef MOZ_WIDGET_COCOA
+#BMB_bookmarksPopup {
   -moz-window-transform: scale(.4);
   -moz-window-opacity: 0;
   transition-property: -moz-window-transform, -moz-window-opacity;
   transition-duration: 0.15s;
   transition-timing-function: ease-out;
 }
 
 #BMB_bookmarksPopup[animate="open"] {
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -438,27 +438,91 @@ tooltip {
   white-space: pre-wrap;
   margin-top: 21px;
 }
 
 panel[type="arrow"] {
   -moz-binding: url("chrome://global/content/bindings/popup.xml#arrowpanel");
 }
 
-%ifdef MOZ_WIDGET_COCOA
-
+%if defined(MOZ_PHOTON_ANIMATIONS)
+/* Photon arrow-panel animations */
+%if defined(MOZ_WIDGET_COCOA)
 /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
    instead of "transform" and "opacity" for these animations.
    The -moz-window* properties apply to the whole window including the window's
    shadow, and they don't affect the window's "shape", so the system doesn't
    have to recompute the shadow shape during the animation. This makes them a
    lot faster. In fact, Gecko no longer triggers shadow shape recomputations
    for repaints.
    These properties are not implemented on other platforms. */
 panel[type="arrow"]:not([animate="false"]) {
+  -moz-window-opacity: 0;
+  -moz-window-transform: translateY(-70px);
+  transition-property: -moz-window-transform, -moz-window-opacity;
+  transition-duration: 0.18s, 0.18s;
+  transition-timing-function:
+    var(--animation-easing-function), ease-out;
+}
+
+panel[type="arrow"][side="bottom"]:not([animate="false"]) {
+  -moz-window-transform: translateY(70px);
+}
+
+panel[type="arrow"][animate="open"] {
+  -moz-window-opacity: 1.0;
+  transition-duration: 0.20s, 0.10s;
+  -moz-window-transform: none;
+  transition-timing-function:
+    var(--animation-easing-function), ease-in-out;
+}
+
+panel[type="arrow"][animate="cancel"] {
+  -moz-window-transform: none;
+}
+
+panel[arrowposition] {
+  -moz-window-transform-origin: 50% 50% 0;
+}
+
+%elif !defined(MOZ_WIDGET_GTK)
+
+panel[type="arrow"]:not([animate="false"]) {
+  opacity: 0;
+  transform: translateY(-70px);
+  transition-property: transform, opacity;
+  transition-duration: 0.18s, 0.18s;
+  transition-timing-function:
+    var(--animation-easing-function), ease-out;
+}
+
+panel[type="arrow"][side="bottom"]:not([animate="false"]) {
+  transform: translateY(70px);
+}
+
+panel[type="arrow"][animate="open"] {
+  opacity: 1.0;
+  transition-duration: 0.20s, 0.10s;
+  transform: none;
+  transition-timing-function:
+    var(--animation-easing-function), ease-in-out;
+}
+
+panel[type="arrow"][animate="cancel"] {
+  transform: none;
+}
+
+panel[arrowposition] {
+  transform-origin: 50% 50% 0;
+}
+%endif
+%else
+/* Original arrow-panel animations */
+%ifdef MOZ_WIDGET_COCOA
+panel[type="arrow"]:not([animate="false"]) {
   -moz-window-transform: scale(.4);
   -moz-window-opacity: 0;
   transition-property: -moz-window-transform, -moz-window-opacity;
   transition-duration: 0.15s;
   transition-timing-function: ease-out;
 }
 
 panel[type="arrow"][animate="open"] {
@@ -565,16 +629,17 @@ panel[arrowposition="start_before"]:-moz
 }
 
 panel[arrowposition="end_after"]:-moz-locale-dir(ltr),
 panel[arrowposition="start_after"]:-moz-locale-dir(rtl) {
   transform-origin: left calc(100% - 20px);
 }
 
 %endif
+%endif
 
 %ifdef XP_MACOSX
 .statusbar-resizerpanel {
   display: none;
 }
 %else
 window[sizemode="maximized"] statusbarpanel.statusbar-resizerpanel {
   visibility: collapse;