Bug 936187 - [Australis] UITour: Switch highlight to a <panel> so it overlays the menu panel. r=Unfocused

browser/base/content/browser.css

@@ -952,13 +952,13 @@ toolbarpaletteitem[place="palette"][hidden] {
 
 @keyframes uitour-zoom {
   from {
-    transform: scale(0.9);
+    transform: scale(0.8);
   }
   50% {
-    transform: scale(1.1);
+    transform: scale(1.0);
   }
   to {
-    transform: scale(0.9);
+    transform: scale(0.8);
   }
 }
 
@@ -974,10 +974,9 @@ toolbarpaletteitem[place="palette"][hidden] {
   }
 }
 
+#UITourHighlightContainer,
 html|div#UITourHighlight {
-  display: none;
-  position: absolute;
-  z-index: 10000000000;
+  pointer-events: none;
 }
 
 html|div#UITourHighlight[active] {
@@ -985,7 +984,6 @@ html|div#UITourHighlight[active] {
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
-  display: block;
 }
 
 html|div#UITourHighlight[active="wobble"] {

browser/base/content/browser.xul

@@ -197,17 +197,20 @@
     <!-- UI tour experience -->
     <panel id="UITourTooltip"
            type="arrow"
-           hidden="true"
            noautofocus="true"
+           noautohide="true"
            align="start"
            orient="vertical"
            role="alert">
       <label id="UITourTooltipTitle" flex="1"/>
       <description id="UITourTooltipDescription" flex="1"/>
     </panel>
-    <html:div id="UITourHighlightContainer" style="position:relative">
+    <panel id="UITourHighlightContainer"
+           noautofocus="true"
+           noautohide="true"
+           consumeoutsideclicks="false">
       <html:div id="UITourHighlight"></html:div>
-    </html:div>
+    </panel>
 
     <panel id="socialActivatedNotification"
            type="arrow"

browser/components/customizableui/content/panelUI.inc.xul

@@ -5,7 +5,6 @@
 <panel id="PanelUI-popup"
        role="group"
        type="arrow"
-       level="top"
        hidden="true"
        noautofocus="true">
   <panelmultiview id="PanelUI-multiView" mainViewId="PanelUI-mainView">

browser/modules/UITour.jsm

@@ -456,12 +456,13 @@ this.UITour = {
       highlighter.style.height = targetRect.height + "px";
       highlighter.style.width = targetRect.width + "px";
 
-      let highlighterRect = highlighter.getBoundingClientRect();
-
-      let top = targetRect.top + (targetRect.height / 2) - (highlighterRect.height / 2);
-      highlighter.style.top = top + "px";
-      let left = targetRect.left + (targetRect.width / 2) - (highlighterRect.width / 2);
-      highlighter.style.left = left + "px";
+      // Close a previous highlight so we can relocate the panel.
+      if (highlighter.parentElement.state == "open") {
+        highlighter.parentElement.hidePopup();
+      }
+      /* -4 offsets come from the padding in CSS for UITourHighlightContainer
+         for the wobble animation */
+      highlighter.parentElement.openPopup(aTargetEl, "overlap", -4, -4);
     }
 
     this._setAppMenuStateForAnnotation(aTarget.node.ownerDocument.defaultView, "highlight",
@@ -475,6 +476,7 @@ this.UITour = {
       this.removePinnedTab(aWindow);
 
     let highlighter = aWindow.document.getElementById("UITourHighlight");
+    highlighter.parentElement.hidePopup();
     highlighter.removeAttribute("active");
 
     this._setAppMenuStateForAnnotation(aWindow, "highlight", false);
@@ -496,7 +498,9 @@ this.UITour = {
 
       let alignment = "bottomcenter topright";
 
-      tooltip.hidden = false;
+      if (tooltip.state == "open") {
+        tooltip.hidePopup();
+      }
       tooltip.openPopup(aAnchorEl, alignment);
     }
 

browser/modules/test/browser_UITour.js

@@ -14,6 +14,8 @@ function is_hidden(element) {
     return true;
   if (style.visibility != "visible")
     return true;
+  if (style.display == "-moz-popup")
+    return ["hiding","closed"].indexOf(element.state) != -1;
 
   // Hiding a parent element will hide all its children
   if (element.parentNode != element.ownerDocument)
@@ -93,11 +95,11 @@ function test() {
       gBrowser.removeTab(gTestTab);
     gTestTab = null;
 
-    let highlight = document.getElementById("UITourHighlight");
-    is_element_hidden(highlight, "Highlight should be hidden after UITour tab is closed");
+    let highlight = document.getElementById("UITourHighlightContainer");
+    is_element_hidden(highlight, "Highlight should be closed/hidden after UITour tab is closed");
 
-    let popup = document.getElementById("UITourTooltip");
-    isnot(["hidding","closed"].indexOf(popup.state), -1, "Popup should be closed/hidding after UITour tab is closed");
+    let tooltip = document.getElementById("UITourTooltip");
+    is_element_hidden(tooltip, "Tooltip should be closed/hidden after UITour tab is closed");
 
     ok(!PanelUI.panel.hasAttribute("noautohide"), "@noautohide on the menu panel should have been cleaned up");
 
@@ -112,7 +114,7 @@ function test() {
       return;
     }
     let test = tests.shift();
-
+    info("Starting " + test.name);
     loadTestPage(function() {
       test(done);
     });

browser/themes/shared/UITour.inc.css

@@ -6,6 +6,13 @@
 
 /* UI Tour */
 
+#UITourHighlightContainer {
+  -moz-appearance: none;
+  background-color: transparent;
+  /* This is a buffer to compensate for the movement in the "wobble" effect */
+  padding: 4px;
+}
+
 html|div#UITourHighlight {
   background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%);
   border-radius: 40px;