Bug 1085330 - UITour: Highlight positioning breaks when icon target moves into "more tools" overflow panel. r=Unfocused
authorJustin Dolske <dolske@mozilla.com>
Tue, 28 Oct 2014 14:37:46 -0700
changeset 212834 c53739a065d9526d584d0e3f4c10d3869be27bb9
parent 212833 7c582981a0b0f284c2dbd1b741d0c539acf63854
child 212835 86a90b65186803537fccb8ed87240fa03643479c
push id27731
push usercbook@mozilla.com
push dateWed, 29 Oct 2014 12:31:53 +0000
treeherdermozilla-central@e5e6847c2988 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersUnfocused
bugs1085330
milestone36.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 1085330 - UITour: Highlight positioning breaks when icon target moves into "more tools" overflow panel. r=Unfocused
browser/modules/UITour.jsm
--- a/browser/modules/UITour.jsm
+++ b/browser/modules/UITour.jsm
@@ -833,17 +833,27 @@ this.UITour = {
       }
       // Toggle the effect attribute to "none" and flush layout before setting it so the effect plays.
       highlighter.setAttribute("active", "none");
       aTarget.node.ownerDocument.defaultView.getComputedStyle(highlighter).animationName;
       highlighter.setAttribute("active", effect);
       highlighter.parentElement.setAttribute("targetName", aTarget.targetName);
       highlighter.parentElement.hidden = false;
 
-      let targetRect = aTarget.node.getBoundingClientRect();
+      let highlightAnchor;
+      // If the target is in the overflow panel, just highlight the overflow button.
+      if (aTarget.node.getAttribute("overflowedItem")) {
+        let doc = aTarget.node.ownerDocument;
+        let placement = CustomizableUI.getPlacementOfWidget(aTarget.widgetName || aTarget.node.id);
+        let areaNode = doc.getElementById(placement.area);
+        highlightAnchor = areaNode.overflowable._chevron;
+      } else {
+        highlightAnchor = aTarget.node;
+      }
+      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) {
@@ -869,17 +879,17 @@ 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 = paddingTopPx
                       - (Math.max(0, highlightWidthWithMin - targetRect.width) / 2);
       let offsetY = paddingLeftPx
                       - (Math.max(0, highlightHeightWithMin - targetRect.height) / 2);
       this._addAnnotationPanelMutationObserver(highlighter.parentElement);
-      highlighter.parentElement.openPopup(aTarget.node, "overlap", offsetX, offsetY);
+      highlighter.parentElement.openPopup(highlightAnchor, "overlap", offsetX, offsetY);
     }
 
     // Prevent showing a panel at an undefined position.
     if (!this.isElementVisible(aTarget.node))
       return;
 
     this._setAppMenuStateForAnnotation(aTarget.node.ownerDocument.defaultView, "highlight",
                                        this.targetIsInAppMenu(aTarget),