Bug 948807 - [Australis] UITour: Fix highlight position and clipping when a dimension is smaller than the minimum. r=Unfocused

browser/base/content/browser.css

@@ -975,26 +975,26 @@ toolbarpaletteitem[place="palette"][hidden] {
 }
 
 #UITourHighlightContainer,
-html|div#UITourHighlight {
+#UITourHighlight {
   pointer-events: none;
 }
 
-html|div#UITourHighlight[active] {
+#UITourHighlight[active] {
   animation-delay: 2s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
 
-html|div#UITourHighlight[active="wobble"] {
+#UITourHighlight[active="wobble"] {
   animation-name: uitour-wobble;
   animation-duration: 1s;
 }
-html|div#UITourHighlight[active="zoom"] {
+#UITourHighlight[active="zoom"] {
   animation-name: uitour-zoom;
   animation-duration: 1s;
 }
-html|div#UITourHighlight[active="color"] {
+#UITourHighlight[active="color"] {
   animation-name: uitour-color;
   animation-duration: 2s;
 }

browser/base/content/browser.xul

@@ -209,7 +209,7 @@
            noautofocus="true"
            noautohide="true"
            consumeoutsideclicks="false">
-      <html:div id="UITourHighlight"></html:div>
+      <box id="UITourHighlight"></box>
     </panel>
 
     <panel id="socialActivatedNotification"

browser/modules/UITour.jsm

@@ -460,9 +460,18 @@ this.UITour = {
       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);
+      /* The "overlap" position anchors from the top-left but we want to centre highlights at their
+         minimum size. */
+      let highlightWindow = aTargetEl.ownerDocument.defaultView;
+      let containerStyle = highlightWindow.getComputedStyle(highlighter.parentElement);
+      let paddingTopPx = 0 - parseFloat(containerStyle.paddingTop);
+      let paddingLeftPx = 0 - parseFloat(containerStyle.paddingLeft);
+      let highlightStyle = highlightWindow.getComputedStyle(highlighter);
+      let offsetX = paddingTopPx
+                      - (Math.max(0, parseFloat(highlightStyle.minWidth) - targetRect.width) / 2);
+      let offsetY = paddingLeftPx
+                      - (Math.max(0, parseFloat(highlightStyle.minHeight) - targetRect.height) / 2);
+      highlighter.parentElement.openPopup(aTargetEl, "overlap", offsetX, offsetY);
     }
 
     this._setAppMenuStateForAnnotation(aTarget.node.ownerDocument.defaultView, "highlight",

browser/themes/shared/UITour.inc.css

@@ -13,7 +13,7 @@
   padding: 4px;
 }
 
-html|div#UITourHighlight {
+#UITourHighlight {
   background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%);
   border-radius: 40px;
   border: 1px solid white;