Backed out changeset 7c3e4a58c61c (bug 1384841) or failing browser_UITour.js, at least on OS X. r=backout
authorSebastian Hengst <archaeopteryx@coole-files.de>
Tue, 08 Aug 2017 10:04:52 +0200
changeset 373316 8c7788eda00e
parent 373315 1d99d21fbb19
child 373317 dab6cd53b9a6
child 373377 a921bfb8a2cf
push id48220
push userarchaeopteryx@coole-files.de
push dateTue, 08 Aug 2017 08:05:07 +0000
treeherderautoland@8c7788eda00e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbackout
bugs1384841
milestone57.0a1
backs out7c3e4a58c61c
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
Backed out changeset 7c3e4a58c61c (bug 1384841) or failing browser_UITour.js, at least on OS X. r=backout
browser/components/uitour/UITour.jsm
browser/themes/shared/UITour.inc.css
--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@@ -1142,47 +1142,44 @@ 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 (this.targetIsInAppMenu(aTarget)) {
-        highlighter.classList.remove("rounded-highlight");
+      // 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%";
       } else {
-        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.borderRadius = "";
       }
 
       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 = (targetRect.width - highlightWidthWithMin) / 2;
-      let offsetY = (targetRect.height - highlightHeightWithMin) / 2;
+      let offsetX = -(Math.max(0, highlightWidthWithMin - targetRect.width) / 2);
+      let offsetY = -(Math.max(0, highlightHeightWithMin - targetRect.height) / 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,23 +14,24 @@
   /* 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-color: rgba(0, 200, 215, 0.3);
-  min-height: 24px;
-  min-width: 24px;
-}
-
-#UITourHighlight.rounded-highlight {
-  border-radius: 4px;
+  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;
 }
 
 #UITourTooltipBody {
   -moz-box-align: start;
 }
 
 #UITourTooltipTitleContainer {
   -moz-box-align: start;