Bug 943765 - UITour: Make highlights circles if the height and width of the target are similar. r=Unfocused a=gavin
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Wed, 05 Feb 2014 01:02:32 -0800
changeset 176872 d4fb83c6c1fd5946ccb036be4f77cf6ece8b17f0
parent 176871 b23708e5db186ff03647f7da66040042a124d1f2
child 176873 8b8bd4fa5fd285c421d71659e680f098cba66ce0
push id5185
push usermozilla@noorenberghe.ca
push dateThu, 06 Feb 2014 00:51:56 +0000
treeherdermozilla-aurora@8b8bd4fa5fd2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersUnfocused, gavin
bugs943765
milestone29.0a2
Bug 943765 - UITour: Make highlights circles if the height and width of the target are similar. r=Unfocused a=gavin [Australis]
browser/modules/UITour.jsm
browser/modules/test/browser_UITour.js
--- a/browser/modules/UITour.jsm
+++ b/browser/modules/UITour.jsm
@@ -571,35 +571,50 @@ this.UITour = {
         if (randomEffect == this.highlightEffects.length)
           randomEffect--; // On the order of 1 in 2^62 chance of this happening.
         effect = this.highlightEffects[randomEffect];
       }
       highlighter.setAttribute("active", effect);
       highlighter.parentElement.hidden = false;
 
       let targetRect = aTargetEl.getBoundingClientRect();
+      let highlightHeight = targetRect.height;
+      let highlightWidth = targetRect.width;
+      let minDimension = Math.min(highlightHeight, highlightWidth);
+      let maxDimension = Math.max(highlightHeight, highlightWidth);
 
-      highlighter.style.height = targetRect.height + "px";
-      highlighter.style.width = targetRect.width + "px";
+      // If the dimensions are within 40% of eachother, make the highlight a circle with the
+      // largest dimension as the diameter.
+      if (maxDimension / minDimension <= 1.4) {
+        highlightHeight = highlightWidth = maxDimension;
+        highlighter.style.borderRadius = "100%";
+      } else {
+        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 == "open") {
         highlighter.parentElement.hidePopup();
       }
       /* 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 highlightHeightWithMin = Math.max(highlightHeight, parseFloat(highlightStyle.minHeight));
+      let highlightWidthWithMin = Math.max(highlightWidth, parseFloat(highlightStyle.minWidth));
       let offsetX = paddingTopPx
-                      - (Math.max(0, parseFloat(highlightStyle.minWidth) - targetRect.width) / 2);
+                      - (Math.max(0, highlightWidthWithMin - targetRect.width) / 2);
       let offsetY = paddingLeftPx
-                      - (Math.max(0, parseFloat(highlightStyle.minHeight) - targetRect.height) / 2);
+                      - (Math.max(0, highlightHeightWithMin - targetRect.height) / 2);
       highlighter.parentElement.openPopup(aTargetEl, "overlap", offsetX, offsetY);
     }
 
     // Prevent showing a panel at an undefined position.
     if (!_isElementVisible(aTarget.node))
       return;
 
     this._setAppMenuStateForAnnotation(aTarget.node.ownerDocument.defaultView, "highlight",
--- a/browser/modules/test/browser_UITour.js
+++ b/browser/modules/test/browser_UITour.js
@@ -76,16 +76,37 @@ let tests = [
     }
 
     let highlight = document.getElementById("UITourHighlight");
     is_element_hidden(highlight, "Highlight should initially be hidden");
 
     gContentAPI.showHighlight("urlbar");
     waitForElementToBeVisible(highlight, test_highlight_2, "Highlight should be shown after showHighlight()");
   },
+  function test_highlight_circle(done) {
+    function check_highlight_size() {
+      let panel = highlight.parentElement;
+      let anchor = panel.anchorNode;
+      let anchorRect = anchor.getBoundingClientRect();
+      info("addons target: width: " + anchorRect.width + " height: " + anchorRect.height);
+      let maxDimension = Math.round(Math.max(anchorRect.width, anchorRect.height));
+      let highlightRect = highlight.getBoundingClientRect();
+      info("highlight: width: " + highlightRect.width + " height: " + highlightRect.height);
+      is(Math.round(highlightRect.width), maxDimension, "The width of the highlight should be equal to the largest dimension of the target");
+      is(Math.round(highlightRect.height), maxDimension, "The height of the highlight should be equal to the largest dimension of the target");
+      is(Math.round(highlightRect.height), Math.round(highlightRect.width), "The height and width of the highlight should be the same to create a circle");
+      is(highlight.style.borderRadius, "100%", "The border-radius should be 100% to create a circle");
+      done();
+    }
+    let highlight = document.getElementById("UITourHighlight");
+    is_element_hidden(highlight, "Highlight should initially be hidden");
+
+    gContentAPI.showHighlight("addons");
+    waitForElementToBeVisible(highlight, check_highlight_size, "Highlight should be shown after showHighlight()");
+  },
   function test_highlight_customize_auto_open_close(done) {
     let highlight = document.getElementById("UITourHighlight");
     gContentAPI.showHighlight("customize");
     waitForElementToBeVisible(highlight, function checkPanelIsOpen() {
       isnot(PanelUI.panel.state, "closed", "Panel should have opened");
 
       // Move the highlight outside which should close the app menu.
       gContentAPI.showHighlight("appMenu");