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 191673 187f55d9c2e589cf3a6993cc743ba06710ae655c
parent 191672 762cdef7ecb4dd33ca57c7fe2b8fbcf38c20426a
child 191674 c64ce8e54e04a0b73712a7d1492bbea325e8a13b
push id474
push userasasaki@mozilla.com
push dateMon, 02 Jun 2014 21:01:02 +0000
treeherdermozilla-release@967f4cf1b31c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmadhava, Unfocused
bugs971116
milestone30.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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");
   },