From e93dd15e9e3bf5829f02da7f0dc2b3ca9b583857 Mon Sep 17 00:00:00 2001
From: Matthew Noorenberghe <mozilla@noorenberghe.ca>
Date: Tue, 10 Dec 2013 23:35:31 -0800
Subject: [PATCH] Bug 948807 - [Australis] UITour: Fix highlight position and
 clipping when a dimension is smaller than the minimum. r=Unfocused

---
 browser/base/content/browser.css     | 10 +++++-----
 browser/base/content/browser.xul     |  2 +-
 browser/modules/UITour.jsm           | 15 ++++++++++++---
 browser/themes/shared/UITour.inc.css |  2 +-
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
index 48f2d8e9d5a..02854937c83 100644
--- a/browser/base/content/browser.css
+++ b/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;
 }
diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index 7dbca37c7c7..e9fcaa3c473 100644
--- a/browser/base/content/browser.xul
+++ b/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"
diff --git a/browser/modules/UITour.jsm b/browser/modules/UITour.jsm
index 6e709f6049f..741a82d4135 100644
--- a/browser/modules/UITour.jsm
+++ b/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",
diff --git a/browser/themes/shared/UITour.inc.css b/browser/themes/shared/UITour.inc.css
index 4d6b371d8d4..f6931191295 100644
--- a/browser/themes/shared/UITour.inc.css
+++ b/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;