Bug 1352075 - (WIP) Fade and slide in arrow-panel animation. r?jaws
* Use vertical offset in arrowpanel and its arrowbox, and slide in the container
* Add WIP notes
* Known TODOs:
* Apply similar treatment to bookmarks menu
* left/right side arrowpanel instances?
MozReview-Commit-ID: FZnvTAa0L97
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -433,33 +433,68 @@ tooltip {
}
panel[type="arrow"] {
-moz-binding: url("chrome://global/content/bindings/popup.xml#arrowpanel");
}
%ifndef MOZ_WIDGET_GTK
-panel[type="arrow"]:not([animate="false"]) {
- transform: scale(.4);
- opacity: 0;
- transition-property: transform, opacity;
- transition-duration: 0.15s;
- transition-timing-function: ease-out;
+panel[type="arrow"] .panel-arrowbox {
+ padding-top: 0;
+ padding-bottom: 0;
}
-panel[type="arrow"][animate="open"] {
+panel[type="arrow"] > .panel-arrowcontainer {
+ will-change: transform, opacity;
+ transition-property: opacity, transform;
+ transition-duration: 70ms, 100ms;
+ transition-timing-function: cubic-bezier(.07,.95,0,1);
+ transition-delay: 0ms,0ms;
+}
+panel[type="arrow"]:not([animate="false"]) > .panel-arrowcontainer {
+ opacity: 0;
+}
+panel[type="arrow"][animate="open"] > .panel-arrowcontainer,
+panel[type="arrow"][animate="false"] > .panel-arrowcontainer,
+panel[type="arrow"][side][animate="cancel"] > .panel-arrowcontainer {
transform: none;
opacity: 1.0;
}
-panel[type="arrow"][animate="cancel"] {
- transform: none;
+/* panel slides down */
+panel[type="arrow"][side="top"] {
+ /* NOTE: (sfoster) some panels adjust the alignment of the panel/arrow to their anchor icon using margin-top,
+ so I'm using important for now - margin-top may not be the right solution ; */
+ margin-top: -8px!important;
+}
+panel[type="arrow"][side="top"]:not([animate="false"]):not([animate="open"]) > .panel-arrowcontainer {
+ transform: translateY(-8px);
+}
+panel[type="arrow"][side="top"] .panel-arrowbox {
+ padding-top: 8px;
+ padding-bottom: 0;
}
+/* panel slides up */
+panel[type="arrow"][side="bottom"] {
+ /* NOTE: (sfoster) some panels adjust the alignment of the panel/arrow to their anchor icon using margin-top,
+ so I'm using important for now - margin-top may not be the right solution ; */
+ margin-bottom: -8px!important;
+}
+panel[type="arrow"][side="bottom"]:not([animate="false"]):not([animate="open"]) > .panel-arrowcontainer {
+ transform: translateY(8px);
+}
+panel[type="arrow"][side="bottom"] .panel-arrowbox {
+ padding-top: 0;
+ padding-bottom: 8px;
+}
+
+/* TODO: panel slides left/right? Not sure if we have any of these */
+
panel[arrowposition="after_start"]:-moz-locale-dir(ltr),
panel[arrowposition="after_end"]:-moz-locale-dir(rtl) {
transform-origin: 20px top;
}
panel[arrowposition="after_end"]:-moz-locale-dir(ltr),
panel[arrowposition="after_start"]:-moz-locale-dir(rtl) {
transform-origin: calc(100% - 20px) top;