Bug 971116 - Implement new Australis UITour highlight effect. ui-r=madhava, r=Unfocused
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -1004,20 +1004,23 @@ toolbarpaletteitem[place="palette"][hidd
width: 10em;
max-width: 10em;
}
/* UI Tour */
@keyframes uitour-wobble {
from {
- transform: rotate(0deg) translateX(2px) rotate(0deg);
+ transform: rotate(0deg) translateX(3px) rotate(0deg);
+ }
+ 50% {
+ transform: rotate(360deg) translateX(3px) rotate(-360deg);
}
to {
- transform: rotate(360deg) translateX(2px) rotate(-360deg);
+ transform: rotate(720deg) translateX(0px) rotate(-720deg);
}
}
@keyframes uitour-zoom {
from {
transform: scale(0.8);
}
50% {
@@ -1049,17 +1052,19 @@ toolbarpaletteitem[place="palette"][hidd
animation-delay: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#UITourHighlight[active="wobble"] {
animation-name: uitour-wobble;
- animation-duration: 1s;
+ animation-delay: 0s;
+ animation-duration: 1.5s;
+ animation-iteration-count: 1;
}
#UITourHighlight[active="zoom"] {
animation-name: uitour-zoom;
animation-duration: 1s;
}
#UITourHighlight[active="color"] {
animation-name: uitour-color;
animation-duration: 2s;
--- a/browser/modules/UITour.jsm
+++ b/browser/modules/UITour.jsm
@@ -66,17 +66,17 @@ this.UITour = {
let statusButton = aDocument.getElementById("PanelUI-fxa-status");
return aDocument.getAnonymousElementByAttribute(statusButton,
"class",
"toolbarbutton-icon");
},
widgetName: "PanelUI-fxa-status",
}],
["addons", {query: "#add-ons-button"}],
- ["appMenu", {query: "#PanelUI-menu-button"}],
+ ["appMenu", {query: "#PanelUI-button"}],
["backForward", {
query: "#back-button",
widgetName: "urlbar-container",
}],
["bookmarks", {query: "#bookmarks-menu-button"}],
["customize", {
query: (aDocument) => {
let customizeButton = aDocument.getElementById("PanelUI-customize");
@@ -698,17 +698,17 @@ this.UITour = {
let targetElement = aTarget.node;
// Use the widget for filtering if it exists since the target may be the icon inside.
if (aTarget.widgetName) {
targetElement = aTarget.node.ownerDocument.getElementById(aTarget.widgetName);
}
// Handle the non-customizable buttons at the bottom of the menu which aren't proper widgets.
return targetElement.id.startsWith("PanelUI-")
- && targetElement.id != "PanelUI-menu-button";
+ && targetElement.id != "PanelUI-button";
},
/**
* Called before opening or after closing a highlight or info panel to see if
* we need to open or close the appMenu to see the annotation's anchor.
*/
_setAppMenuStateForAnnotation: function(aWindow, aAnnotationType, aShouldOpenForHighlight, aCallback = null) {
// If the panel is in the desired state, we're done.
@@ -806,19 +806,19 @@ this.UITour = {
highlighter.parentElement.hidden = false;
let targetRect = aTargetEl.getBoundingClientRect();
let highlightHeight = targetRect.height;
let highlightWidth = targetRect.width;
let minDimension = Math.min(highlightHeight, highlightWidth);
let maxDimension = Math.max(highlightHeight, highlightWidth);
- // If the dimensions are within 40% of eachother, make the highlight a circle with the
- // largest dimension as the diameter.
- if (maxDimension / minDimension <= 1.4) {
+ // If the dimensions are within 110% of each other (to include the bookmarks button),
+ // make the highlight a circle with the largest dimension as the diameter.
+ if (maxDimension / minDimension <= 2.1) {
highlightHeight = highlightWidth = maxDimension;
highlighter.style.borderRadius = "100%";
} else {
highlighter.style.borderRadius = "";
}
highlighter.style.height = highlightHeight + "px";
highlighter.style.width = highlightWidth + "px";
--- a/browser/modules/test/browser_UITour_panel_close_annotation.js
+++ b/browser/modules/test/browser_UITour_panel_close_annotation.js
@@ -27,17 +27,17 @@ let tests = [
function test_highlight_move_outside_panel(done) {
gContentAPI.showInfo("urlbar", "test title", "test text");
gContentAPI.showHighlight("customize");
waitForElementToBeVisible(highlight, function checkPanelIsOpen() {
isnot(PanelUI.panel.state, "closed", "Panel should have opened");
// Move the highlight outside which should close the app menu.
gContentAPI.showHighlight("appMenu");
- waitForPopupAtAnchor(highlight.parentElement, document.getElementById("PanelUI-menu-button"), () => {
+ waitForPopupAtAnchor(highlight.parentElement, document.getElementById("PanelUI-button"), () => {
isnot(PanelUI.panel.state, "open",
"Panel should have closed after the highlight moved elsewhere.");
is(tooltip.state, "open", "The info panel should have remained open");
done();
}, "Highlight should move to the appMenu button and still be visible");
}, "Highlight should be shown after showHighlight() for fixed panel items");
},
@@ -138,17 +138,17 @@ let tests = [
gContentAPI.showInfo("addons", "test title", "test text");
gContentAPI.showHighlight("urlbar");
let addonsButton = document.getElementById("add-ons-button");
waitForPopupAtAnchor(tooltip, addonsButton, function checkPanelIsOpen() {
isnot(PanelUI.panel.state, "closed", "Panel should have opened");
// Move the info panel outside which should close the app menu.
gContentAPI.showInfo("appMenu", "Cool menu button", "It's three lines");
- waitForPopupAtAnchor(tooltip, document.getElementById("PanelUI-menu-button"), () => {
+ waitForPopupAtAnchor(tooltip, document.getElementById("PanelUI-button"), () => {
isnot(PanelUI.panel.state, "open",
"Menu should have closed after the highlight moved elsewhere.");
is(highlight.parentElement.state, "open", "The highlight should have remained visible");
done();
}, "Tooltip should move to the appMenu button and still be visible");
}, "Tooltip should be shown after showInfo() for a panel item");
},