Bug 1384841 - Match the style of the UITour highlights with Photon style guide. r=Gijs

MozReview-Commit-ID: BT1o8O2A1Al

--HG--
extra : rebase_source : 099e6ba3d2cb941075ad8772825040b78e7757a0

browser/components/uitour/UITour.jsm

@@ -1147,16 +1147,19 @@ this.UITour = {
       let targetRect = highlightAnchor.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 200% of each other (to include the bookmarks button),
-      // make the highlight a circle with the largest dimension as the diameter.
-      if (maxDimension / minDimension <= 3.0) {
-        highlightHeight = highlightWidth = maxDimension;
-        highlighter.style.borderRadius = "100%";
+      if (this.targetIsInAppMenu(aTarget)) {
+        highlighter.classList.remove("rounded-highlight");
       } else {
-        highlighter.style.borderRadius = "";
+        highlighter.classList.add("rounded-highlight");
+      }
+      if (highlightAnchor.classList.contains("toolbarbutton-1") &&
+          highlightAnchor.getAttribute("cui-areatype") === "toolbar" &&
+          highlightAnchor.getAttribute("overflowedItem") !== "true") {
+        // A toolbar button in navbar has its clickable area an
+        // inner-contained square while the button component itself is a tall
+        // rectangle. We adjust the highlight area to a square as well.
+        highlightHeight = highlightWidth;
       }
 
       highlighter.style.height = highlightHeight + "px";
@@ -1173,8 +1176,8 @@ this.UITour = {
       let highlightStyle = highlightWindow.getComputedStyle(highlighter);
       let highlightHeightWithMin = Math.max(highlightHeight, parseFloat(highlightStyle.minHeight));
       let highlightWidthWithMin = Math.max(highlightWidth, parseFloat(highlightStyle.minWidth));
-      let offsetX = -(Math.max(0, highlightWidthWithMin - targetRect.width) / 2);
-      let offsetY = -(Math.max(0, highlightHeightWithMin - targetRect.height) / 2);
+      let offsetX = (targetRect.width - highlightWidthWithMin) / 2;
+      let offsetY = (targetRect.height - highlightHeightWithMin) / 2;
       this._addAnnotationPanelMutationObserver(highlighter.parentElement);
       highlighter.parentElement.openPopup(highlightAnchor, "overlap", offsetX, offsetY);
     };

browser/themes/shared/UITour.inc.css

@@ -19,14 +19,13 @@
 }
 
 #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;
-  /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
-     on Linux without an X compositor where opacity is either 0 or 1. */
-  box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
-  min-height: 32px;
-  min-width: 32px;
+  background-color: rgba(0, 200, 215, 0.3);
+  min-height: 24px;
+  min-width: 24px;
+}
+
+#UITourHighlight.rounded-highlight {
+  border-radius: 4px;
 }
 
 #UITourTooltipBody {