Bug 1384841 - Match the style of the UITour highlights with Photon style guide. r=Gijs
☠☠ backed out by 8c7788eda00e ☠ ☠
authorRex Lee <rexboy@mozilla.com>
Tue, 01 Aug 2017 11:56:28 +0800
changeset 373310 7c3e4a58c61c
parent 373309 46706e14de5b
child 373311 64adea19eb04
push id48215
push usercbook@mozilla.com
push dateTue, 08 Aug 2017 07:00:29 +0000
treeherderautoland@7c3e4a58c61c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1384841
milestone57.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 1384841 - Match the style of the UITour highlights with Photon style guide. r=Gijs MozReview-Commit-ID: BT1o8O2A1Al
browser/components/uitour/UITour.jsm
browser/themes/shared/UITour.inc.css
--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@@ -1142,44 +1142,47 @@ this.UITour = {
       highlighter.setAttribute("active", effect);
       highlighter.parentElement.setAttribute("targetName", aTarget.targetName);
       highlighter.parentElement.hidden = false;
 
       let highlightAnchor = aAnchorEl;
       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";
       highlighter.style.width = highlightWidth + "px";
 
       // Close a previous highlight so we can relocate the panel.
       if (highlighter.parentElement.state == "showing" || highlighter.parentElement.state == "open") {
         log.debug("showHighlight: Closing previous highlight first");
         highlighter.parentElement.hidePopup();
       }
       /* The "overlap" position anchors from the top-left but we want to centre highlights at their
          minimum size. */
       let highlightWindow = aChromeWindow;
       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);
     };
 
     try {
       await this._ensureTarget(aChromeWindow, aTarget);
       let anchorEl = await this._correctAnchor(aChromeWindow, aTarget);
       showHighlightPanel(anchorEl);
--- a/browser/themes/shared/UITour.inc.css
+++ b/browser/themes/shared/UITour.inc.css
@@ -14,24 +14,23 @@
   /* This is a buffer to compensate for the movement in the "wobble" effect,
      and for the box-shadow of #UITourHighlight. */
   padding: 4px;
   /* Compensate the displacement caused by padding. */
   margin: -4px;
 }
 
 #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 {
   -moz-box-align: start;
 }
 
 #UITourTooltipTitleContainer {
   -moz-box-align: start;