Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-12-01 00:32:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1352075 - Add Photon arrow-panel animation for Mac+Windows. r=dao,mossop

Browse Source 
* 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

--HG--
extra : rebase_source : d4a08653d80ff09145dd7f7a824d08550d9d177f
This commit is contained in:
Sam Foster 2017-06-14 10:44:13 -07:00
parent 4dc85c3032
commit fe0bdb5e71
2 changed files with 116 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
browser/base/content/browser.css
View File

@ -1054,6 +1054,7 @@ toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > #downloads-
-moz-image-region: auto;
}
%ifdef MOZ_PHOTON_ANIMATIONS
%ifdef MOZ_WIDGET_COCOA
/* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
@ -1064,6 +1065,61 @@ toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > #downloads-
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;
}
%elifndef 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;
}
%endif
%else
%ifdef MOZ_WIDGET_COCOA
#BMB_bookmarksPopup {
-moz-window-transform: scale(.4);
-moz-window-opacity: 0;
@ -1140,6 +1196,7 @@ toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > #downloads-
transform-origin: calc(100% - 20px) bottom;
}
%endif
%endif
/* Customize mode */
#navigator-toolbox,

59
toolkit/content/xul.css
View File

@ -441,6 +441,7 @@ panel[type="arrow"] {
-moz-binding: url("chrome://global/content/bindings/popup.xml#arrowpanel");
}
%ifdef MOZ_PHOTON_ANIMATIONS
%ifdef MOZ_WIDGET_COCOA
/* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
@ -451,6 +452,63 @@ panel[type="arrow"] {
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;
}
%elifndef 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;
}
%endif
%else
%ifdef MOZ_WIDGET_COCOA
panel[type="arrow"]:not([animate="false"]) {
-moz-window-transform: scale(.4);
-moz-window-opacity: 0;
@ -567,6 +625,7 @@ panel[arrowposition="start_after"]:-moz-locale-dir(rtl) {
transform-origin: left calc(100% - 20px);
}
%endif
%endif
%ifdef XP_MACOSX