Bug 1590408 - Fix CSS for doorhanger HTMLTooltip to align the center of the arrow with the center of the anchor r=miker
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 12 Nov 2019 15:45:49 +0000
changeset 501664 5b26b747f3bd5be47e43b07531a88cc292dfdebb
parent 501663 f1293ec6b6da76ec757a420e2969f444d1531738
child 501665 2a0648ebfc029c7bc00232a565613eb10ff21e66
push id114172
push userdluca@mozilla.com
push dateTue, 19 Nov 2019 11:31:10 +0000
treeherdermozilla-inbound@b5c5ba07d3db [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmiker
bugs1590408
milestone72.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 1590408 - Fix CSS for doorhanger HTMLTooltip to align the center of the arrow with the center of the anchor r=miker Depends on D52647 Differential Revision: https://phabricator.services.mozilla.com/D52671
devtools/client/themes/tooltips.css
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -226,21 +226,32 @@ strong {
 }
 
 .tooltip-panel:-moz-locale-dir(rtl),
 .tooltip-panel:dir(rtl) {
   direction: rtl;
 }
 
 .tooltip-top .tooltip-arrow {
+  /**
+   * The -1px margin is there to make sure the middle of the arrow overlaps with
+   * the border of the tooltip container.
+   * The -2px is there because the rotated arrow is not visually as tall as its
+   * container. Since the positioning logic relies on measuring the size of the
+   * tooltip, this -2px ensures the measured size matches the visuals (and not
+   * simply the box model).
+   */
+  margin-bottom: -2px;
   margin-top: -1px;
 }
 
 .tooltip-bottom .tooltip-arrow {
+  /* See comment in .tooltip-top .tooltip-arrow (inverted here) */
   margin-bottom: -1px;
+  margin-top: -2px;
 }
 
 .tooltip-arrow:before {
   content: "";
   position: absolute;
   width: 21px;
   height: 21px;
   margin-left: 4px;
@@ -311,16 +322,22 @@ strong {
 
   /*
    * Crop the arrow region to show half the arrow plus allow room for margins.
    *
    * The ARROW_WIDTH in HTMLTooltip.js needs to match the following value.
    */
   width: calc(var(--arrow-width) + 2 * var(--shadow-margin));
   height: calc(var(--arrow-width) / 2 + var(--shadow-margin));
+
+  /**
+   * The rotated box slightly overlaps the left edge of the arrow container.
+   * This means the arrow is not centered in its own box by default.
+   */
+  padding-left: 1px;
 }
 
 .tooltip-container[type="doorhanger"] > .tooltip-arrow::before {
   /* Make sure the border is included in the size */
   box-sizing: border-box;
 
   /* Don't inherit any rounded corners. */
   border-radius: 0;