diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 1e24a68d02d2..96d4bb51939b 100755
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -4988,6 +4988,16 @@ var CombinedStopReload = {
});
},
+ /* This function is necessary to correctly vertically center the animation
+ within the toolbar, which uses -moz-pack-align:stretch; and thus a height
+ which is dependant on the font-size. */
+ setAnimationImageHeightRelativeToToolbarButtonHeight() {
+ let dwu = window.getInterface(Ci.nsIDOMWindowUtils);
+ let toolbarItem = this.stopReloadContainer.closest(".customization-target > toolbaritem");
+ let bounds = dwu.getBoundsWithoutFlushing(toolbarItem);
+ toolbarItem.style.setProperty("--toolbarbutton-height", bounds.height + "px");
+ },
+
switchToStop(aRequest, aWebProgress) {
if (!this._initialized)
return;
@@ -5000,7 +5010,7 @@ var CombinedStopReload = {
this._cancelTransition();
if (shouldAnimate) {
- BrowserUtils.setToolbarButtonHeightProperty(this.stopReloadContainer);
+ this.setAnimationImageHeightRelativeToToolbarButtonHeight();
this.stopReloadContainer.setAttribute("animate", "true");
} else {
this.stopReloadContainer.removeAttribute("animate");
@@ -5019,7 +5029,7 @@ var CombinedStopReload = {
this.animate;
if (shouldAnimate) {
- BrowserUtils.setToolbarButtonHeightProperty(this.stopReloadContainer);
+ this.setAnimationImageHeightRelativeToToolbarButtonHeight();
this.stopReloadContainer.setAttribute("animate", "true");
} else {
this.stopReloadContainer.removeAttribute("animate");
diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index ada2da0ff141..f5bf89a1daca 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1220,11 +1220,7 @@
-
-
-
-
+ label="&places.library.title;"/>
#endif
diff --git a/browser/extensions/pocket/bootstrap.js b/browser/extensions/pocket/bootstrap.js
index c39f4787d01a..98252ac4a4f9 100644
--- a/browser/extensions/pocket/bootstrap.js
+++ b/browser/extensions/pocket/bootstrap.js
@@ -9,7 +9,6 @@ const {classes: Cc, interfaces: Ci, utils: Cu, manager: Cm} = Components;
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
Cu.import("resource://services-common/utils.js");
-Cu.import("resource://gre/modules/AppConstants.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "Services",
"resource://gre/modules/Services.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "RecentWindow",
@@ -93,13 +92,6 @@ function CreatePocketWidget(reason) {
label: gPocketBundle.GetStringFromName("pocket-button.label"),
tooltiptext: gPocketBundle.GetStringFromName("pocket-button.tooltiptext"),
// Use forwarding functions here to avoid loading Pocket.jsm on startup:
- onBeforeCommand() {
- // We need to use onBeforeCommand to calculate the height
- // of the pocket-button before it is opened since we need
- // the height of the button to perform the animation that is
- // triggered off of [open="true"].
- return Pocket.onBeforeCommand.apply(this, arguments);
- },
onViewShowing() {
return Pocket.onPanelViewShowing.apply(this, arguments);
},
@@ -116,20 +108,7 @@ function CreatePocketWidget(reason) {
panel.setAttribute("class", "panel-subview-body");
view.appendChild(panel);
doc.getElementById("PanelUI-multiView").appendChild(view);
- },
- onCreated(node) {
- if (Services.prefs.getBoolPref("toolkit.cosmeticAnimations.enabled") &&
- AppConstants.MOZ_PHOTON_ANIMATIONS) {
- let doc = node.ownerDocument;
- let box = doc.createElement("box");
- box.classList.add("toolbarbutton-animatable-box");
- let image = doc.createElement("image");
- image.classList.add("toolbarbutton-animatable-image");
- box.appendChild(image);
- node.appendChild(box);
- node.setAttribute("animationsenabled", "true");
- }
- },
+ }
};
CustomizableUI.createWidget(pocketButton);
diff --git a/browser/extensions/pocket/content/Pocket.jsm b/browser/extensions/pocket/content/Pocket.jsm
index 84797c135bc0..54f9cdf11b4b 100644
--- a/browser/extensions/pocket/content/Pocket.jsm
+++ b/browser/extensions/pocket/content/Pocket.jsm
@@ -10,8 +10,6 @@ this.EXPORTED_SYMBOLS = ["Pocket"];
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
Cu.import("resource://gre/modules/Services.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "BrowserUtils",
- "resource://gre/modules/BrowserUtils.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "CustomizableUI",
"resource:///modules/CustomizableUI.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "ReaderMode",
@@ -24,18 +22,11 @@ var Pocket = {
/**
* Functions related to the Pocket panel UI.
*/
- onBeforeCommand(event) {
- BrowserUtils.setToolbarButtonHeightProperty(event.target);
- },
-
onPanelViewShowing(event) {
let document = event.target.ownerDocument;
let window = document.defaultView;
let iframe = window.pktUI.getPanelFrame();
- let libraryButton = document.getElementById("library-button");
- BrowserUtils.setToolbarButtonHeightProperty(libraryButton);
-
let urlToSave = Pocket._urlToSave;
let titleToSave = Pocket._titleToSave;
Pocket._urlToSave = null;
diff --git a/browser/extensions/pocket/content/main.js b/browser/extensions/pocket/content/main.js
index cc2bf0e426e9..84acc10a728f 100644
--- a/browser/extensions/pocket/content/main.js
+++ b/browser/extensions/pocket/content/main.js
@@ -68,8 +68,6 @@ var pktUI = (function() {
var savePanelWidth = 350;
var savePanelHeights = {collapsed: 153, expanded: 272};
- var _lastAddSucceeded = false;
-
// -- Event Handling -- //
/**
@@ -90,34 +88,8 @@ var pktUI = (function() {
// clear the panel
getPanelFrame().setAttribute("src", "about:blank");
-
- if (_lastAddSucceeded) {
- var libraryButton = document.getElementById("library-button");
- if (!Services.prefs.getBoolPref("toolkit.cosmeticAnimations.enabled") ||
- !libraryButton ||
- libraryButton.getAttribute("cui-areatype") == "menu-panel" ||
- libraryButton.getAttribute("overflowedItem") == "true" ||
- !libraryButton.closest("toolbar") ||
- libraryButton.closest("toolbar").id != "nav-bar") {
- return;
- }
- libraryButton.removeAttribute("fade");
- libraryButton.setAttribute("animate", "pocket");
- libraryButton.addEventListener("animationend", onLibraryButtonAnimationEnd);
- }
}
- function onLibraryButtonAnimationEnd(event) {
- let doc = event.target.ownerDocument;
- let libraryButton = doc.getElementById("library-button");
- if (event.animationName.startsWith("library-pocket-animation")) {
- libraryButton.setAttribute("fade", "true");
- } else if (event.animationName == "library-pocket-fade") {
- libraryButton.removeEventListener("animationend", onLibraryButtonAnimationEnd);
- libraryButton.removeAttribute("animate");
- libraryButton.removeAttribute("fade");
- }
- }
// -- Communication to API -- //
@@ -225,7 +197,6 @@ var pktUI = (function() {
var panelId = showPanel("about:pocket-saved?pockethost=" + Services.prefs.getCharPref("extensions.pocket.site") + "&premiumStatus=" + (pktApi.isPremiumUser() ? "1" : "0") + "&inoverflowmenu=" + inOverflowMenu + "&locale=" + getUILocale(), {
onShow() {
var saveLinkMessageId = "saveLink";
- _lastAddSucceeded = false;
// Send error message for invalid url
if (!isValidURL) {
@@ -257,7 +228,6 @@ var pktUI = (function() {
item
};
pktUIMessaging.sendMessageToPanel(panelId, saveLinkMessageId, successResponse);
- _lastAddSucceeded = true;
},
error(error, request) {
// If user is not authorized show singup page
diff --git a/browser/extensions/pocket/skin/shared/library-pocket-animation.svg b/browser/extensions/pocket/skin/shared/library-pocket-animation.svg
deleted file mode 100644
index 32d499748cdf..000000000000
--- a/browser/extensions/pocket/skin/shared/library-pocket-animation.svg
+++ /dev/null
@@ -1,986 +0,0 @@
-
-
diff --git a/browser/extensions/pocket/skin/shared/pocket-animation.svg b/browser/extensions/pocket/skin/shared/pocket-animation.svg
deleted file mode 100644
index 0987c07beab9..000000000000
--- a/browser/extensions/pocket/skin/shared/pocket-animation.svg
+++ /dev/null
@@ -1,157 +0,0 @@
-
-
diff --git a/browser/extensions/pocket/skin/shared/pocket.css b/browser/extensions/pocket/skin/shared/pocket.css
index 7146af674030..caeed25583a1 100644
--- a/browser/extensions/pocket/skin/shared/pocket.css
+++ b/browser/extensions/pocket/skin/shared/pocket.css
@@ -23,170 +23,6 @@ toolbar[brighttext] #pocket-button {
fill: var(--toolbarbutton-icon-fill-inverted);
}
-#pocket-button[open="true"][animationsenabled] > .toolbarbutton-icon {
- fill: transparent;
-}
-
-@keyframes pocket-animation {
- from {
- transform: translateX(0);
- }
- to {
- transform: translateX(-220px);
- }
-}
-
-@keyframes pocket-animation-rtl {
- from {
- transform: scaleX(-1) translateX(0);
- }
- to {
- transform: scaleX(-1) translateX(-220px);
- }
-}
-
-#pocket-button > .toolbarbutton-animatable-box {
- position: absolute;
- overflow: hidden;
- top: calc(50% - 9px); /* 9px is half the height of the sprite */
- /* Since .toolbarbutton-icon uses a different width than the animatable box,
- we need to set a padding relative to the difference in widths. */
- margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 20px) / 2);
- width: 20px; /* Width of each frame within the SVG sprite */
- height: 18px; /* Height of each frame within the SVG sprite */
-}
-
-#pocket-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
- height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
-}
-
-#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) {
- position: relative;
-}
-
-/* Preload pocket-animation.svg and library-pocket-animation.svg to prevent
- a flicker at the start of either animation. The preloading of the library
- animation is triggered off of hovering the pocket button since the pocket
- button always animates before the library button. */
-#pocket-button[animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):not([open="true"]):hover > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
- background-image: url("chrome://pocket-shared/skin/pocket-animation.svg"),
- url("chrome://pocket-shared/skin/library-pocket-animation.svg");
- background-size: 0, 0;
-}
-
-#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
- animation-name: pocket-animation;
- animation-timing-function: steps(11);
- animation-duration: 184ms;
- background-image: url("chrome://pocket-shared/skin/pocket-animation.svg");
- width: 240px;
-}
-
-#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
- animation-name: pocket-animation-rtl;
-}
-
-#library-button[animate="pocket"] > .toolbarbutton-icon {
- fill: transparent;
-}
-
-@keyframes library-pocket-animation {
- from {
- transform: translateX(0);
- fill: inherit;
- }
- 25% {
- fill: inherit;
- }
- 50% {
- fill: rgb(213,32,20);
- }
- to {
- transform: translateX(-1056px);
- fill: rgb(213,32,20);
- }
-}
-
-@keyframes library-pocket-animation-rtl {
- from {
- transform: scaleX(-1) translateX(0);
- fill: inherit;
- }
- 25% {
- fill: inherit;
- }
- 50% {
- fill: rgb(213,32,20);
- }
- to {
- transform: scaleX(-1) translateX(-1056px);
- fill: rgb(213,32,20);
- }
-}
-
-/* The animations for the pocket-button and library-button are disabled
- outside of the nav-bar due to bug 1382894. */
-:-moz-any(#pocket-button, #library-button) > .toolbarbutton-animatable-box {
- display: none;
-}
-#nav-bar :-moz-any(#pocket-button, #library-button) > .toolbarbutton-animatable-box {
- display: -moz-box;
-}
-
-/* We need to use an animation here instead of a transition
- to guarantee that the animation succeeds. With transitions
- if the starting value is already equal to the end value
- then no transition will occur and thus no transitionend event. */
-@keyframes library-pocket-fade {
- from {
- fill: rgb(213,32,20);
- }
- to {
- fill: inherit;
- }
-}
-
-#library-button[animate="pocket"] {
- position: relative;
-}
-
-#library-button[animate="pocket"] > .toolbarbutton-animatable-box {
- position: absolute;
- overflow: hidden;
- top: calc(50% - 27px); /* 27px is half the height of the sprite */
- /* Since .toolbarbutton-icon uses a different width than the animatable box,
- we need to set a padding relative to the difference in widths. */
- margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 22px) / 2);
- width: 22px; /* Width of each frame within the SVG sprite */
- /* Height of each frame within the SVG sprite. The sprite must have equal amount
- of space above and below the icon to allow it to vertically center with the
- sprite's icon on top of the toolbar icon when using position:absolute;. */
- height: 54px;
-}
-
-#library-button[animate="pocket"] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
- height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
-}
-
-#library-button[animate="pocket"] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
- background-image: url("chrome://pocket-shared/skin/library-pocket-animation.svg");
- width: 1078px;
- animation-name: library-pocket-animation;
- animation-duration: 768ms;
- animation-timing-function: steps(48);
-}
-
-#library-button[animate="pocket"]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
- animation-name: library-pocket-animation-rtl;
- transform: scaleX(-1);
-}
-
-#library-button[animate="pocket"][fade] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
- animation-name: library-pocket-fade;
- animation-duration: 2s;
- animation-timing-function: ease-out;
-}
-
#pocket-button[cui-areatype="toolbar"][open] {
fill: rgb(213,32,20);
}
diff --git a/browser/themes/shared/toolbarbutton-icons.inc.css b/browser/themes/shared/toolbarbutton-icons.inc.css
index dc398af61378..500cb09e111d 100644
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -17,7 +17,6 @@ toolbar[brighttext] .toolbarbutton-1 {
%ifdef MOZ_PHOTON_THEME
#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
-#library-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
%endif
#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
@@ -38,12 +37,6 @@ toolbar[brighttext] .toolbarbutton-1 {
%ifdef MOZ_PHOTON_THEME
%ifdef MOZ_PHOTON_ANIMATIONS
-.toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
- animation-fill-mode: forwards;
- animation-iteration-count: 1;
- list-style-image: none;
-}
-
#stop-reload-button[animate] > #reload-button > .toolbarbutton-icon,
#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-icon {
fill: transparent;
@@ -111,6 +104,9 @@ toolbar[brighttext] .toolbarbutton-1 {
#reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
#stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
+ animation-fill-mode: forwards;
+ animation-iteration-count: 1;
+ list-style-image: none;
}
#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
@@ -384,6 +380,9 @@ toolbar:not([brighttext]) #bookmarks-menu-button@attributeSelectorForToolbar@[st
#nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
height: 24px; /* Height of each frame within the SVG sprite */
+ animation-fill-mode: forwards;
+ animation-iteration-count: 1;
+ list-style-image: none;
}
#nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
diff --git a/toolkit/modules/BrowserUtils.jsm b/toolkit/modules/BrowserUtils.jsm
index e97995c3b72b..53a7041a8229 100644
--- a/toolkit/modules/BrowserUtils.jsm
+++ b/toolkit/modules/BrowserUtils.jsm
@@ -366,35 +366,6 @@ this.BrowserUtils = {
return !!toolbars && toolbars.has(which);
},
- /**
- * Sets the --toolbarbutton-button-height CSS property on the closest
- * toolbar to the provided element. Useful if you need to vertically
- * center a position:absolute element within a toolbar that uses
- * -moz-pack-align:stretch, and thus a height which is dependant on
- * the font-size.
- *
- * @param element An element within the toolbar whose height is desired.
- *
- */
- setToolbarButtonHeightProperty(element) {
- let window = element.ownerGlobal;
- let dwu = window.getInterface(Ci.nsIDOMWindowUtils);
- let toolbarItem = element;
- let urlBarContainer = element.closest("#urlbar-container");
- if (urlBarContainer) {
- // The stop-reload-button, which is contained in #urlbar-container,
- // needs to use #urlbar-container to calculate the bounds.
- toolbarItem = urlBarContainer;
- }
- if (!toolbarItem) {
- return;
- }
- let bounds = dwu.getBoundsWithoutFlushing(toolbarItem);
- if (bounds.height) {
- toolbarItem.style.setProperty("--toolbarbutton-height", bounds.height + "px");
- }
- },
-
/**
* Track whether a toolbar is visible for a given a docShell.
*