Bug 971116 - Implement new Australis UITour highlight effect. ui-r=madhava, r=MattN a=gavin
authorBlake Winton <bwinton@latte.ca>
Thu, 13 Mar 2014 09:29:24 -0400
changeset 183366 8b69399eb024a846054f4545c6266f9fccdff9c2
parent 183365 4887c80c2f38f243341226677706462a4b2cebe6
child 183367 f48ddb6ad19ef49deac52f4fc235c35c1cfa7f67
push id3343
push userffxbld
push dateMon, 17 Mar 2014 21:55:32 +0000
treeherdermozilla-beta@2f7d3415f79f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmadhava, MattN, gavin
bugs971116
milestone29.0a2
Bug 971116 - Implement new Australis UITour highlight effect. ui-r=madhava, r=MattN a=gavin
browser/base/content/browser.css
browser/modules/UITour.jsm
browser/modules/test/browser_UITour_panel_close_annotation.js
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -987,20 +987,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% {
@@ -1032,17 +1035,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");
   },