Bug 1384841 - Match the style of the UITour highlights with Photon style guide. r=Gijs
authorRex Lee <rexboy@mozilla.com>
Tue, 01 Aug 2017 11:56:28 +0800
changeset 373591 cc5b627abbdd
parent 373590 76cefe3fcd44
child 373592 01ec784cbfd7
push id48331
push usercbook@mozilla.com
push dateWed, 09 Aug 2017 10:35:02 +0000
treeherderautoland@cc5b627abbdd [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/components/uitour/test/browser_UITour.js
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/components/uitour/test/browser_UITour.js
+++ b/browser/components/uitour/test/browser_UITour.js
@@ -99,42 +99,42 @@ var 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 test_highlight_toolbar_button(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 dimension = anchorRect.width;
       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");
+      is(Math.round(highlightRect.width), dimension, "The width of the highlight should be equal to the width of the target");
+      is(Math.round(highlightRect.height), dimension, "The height of the highlight should be equal to the width of the target");
+      is(highlight.classList.contains("rounded-highlight"), true, "Highlight should be rounded-rectangle styled");
       done();
     }
     let highlight = document.getElementById("UITourHighlight");
     is_element_hidden(highlight, "Highlight should initially be hidden");
 
     gContentAPI.showHighlight("home");
     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");
+      isnot(highlight.classList.contains("rounded-highlight"), true, "Highlight should not be round-rectangle styled.");
 
       // Move the highlight outside which should close the app menu.
       gContentAPI.showHighlight("appMenu");
       waitForElementToBeVisible(highlight, function checkPanelIsClosed() {
         isnot(PanelUI.panel.state, "open",
               "Panel should have closed after the highlight moved elsewhere.");
         done();
       }, "Highlight should move to the appMenu button");
--- 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;