From 994a414863f8bd8c1b3eedd3e6fda4a852f12b5a Mon Sep 17 00:00:00 2001
From: Blake Winton <bwinton@latte.ca>
Date: Thu, 13 Mar 2014 09:29:24 -0400
Subject: [PATCH] Bug 971116 - Implement new Australis UITour highlight effect.
 ui-r=madhava, r=Unfocused

---
 browser/base/content/browser.css                      | 11 ++++++++---
 browser/modules/UITour.jsm                            | 10 +++++-----
 .../test/browser_UITour_panel_close_annotation.js     |  4 ++--
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
index bb55d31fd37..411f850c932 100644
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -1009,10 +1009,13 @@ toolbarpaletteitem[place="palette"][hidden] {
 
 @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);
   }
 }
 
@@ -1054,7 +1057,9 @@ toolbarpaletteitem[place="palette"][hidden] {
 
 #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;
diff --git a/browser/modules/UITour.jsm b/browser/modules/UITour.jsm
index 0394c0d576c..6c24c4e123f 100644
--- a/browser/modules/UITour.jsm
+++ b/browser/modules/UITour.jsm
@@ -71,7 +71,7 @@ this.UITour = {
       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",
@@ -703,7 +703,7 @@ this.UITour = {
 
     // 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";
   },
 
   /**
@@ -811,9 +811,9 @@ this.UITour = {
       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 {
diff --git a/browser/modules/test/browser_UITour_panel_close_annotation.js b/browser/modules/test/browser_UITour_panel_close_annotation.js
index 6d54a5fd68f..0775ad4e2df 100644
--- a/browser/modules/test/browser_UITour_panel_close_annotation.js
+++ b/browser/modules/test/browser_UITour_panel_close_annotation.js
@@ -32,7 +32,7 @@ let tests = [
 
       // 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");
@@ -143,7 +143,7 @@ let tests = [
 
       // 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");