Bug 971116 - Implement new Australis UITour highlight effect. ui-r=madhava, r=Unfocused
authorBlake Winton <bwinton@latte.ca>
Thu, 13 Mar 2014 09:29:24 -0400
changeset 173457 187f55d9c2e589cf3a6993cc743ba06710ae655c
parent 173456 762cdef7ecb4dd33ca57c7fe2b8fbcf38c20426a
child 173458 c64ce8e54e04a0b73712a7d1492bbea325e8a13b
push id1
push userroot
push dateMon, 20 Oct 2014 17:29:22 +0000
reviewersmadhava, Unfocused
bugs971116
milestone30.0a1
Bug 971116 - Implement new Australis UITour highlight effect. ui-r=madhava, r=Unfocused
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
@@ -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");
   },