--- 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;