Bug 1553472 - Ensure that all DevTools tooltips should conform with the Proton theme r=pbro
☠☠ backed out by ebe7fdd19be5 ☠ ☠
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Mon, 03 Jun 2019 14:38:58 +0000
changeset 476844 96ea626be10a554da81d4938ecc01b9180e7fe7f
parent 476843 9cf36b46d6c3b52274bde46327ad82534178b339
child 476845 730d572b582371eceea642bc04ba19e53c8a8473
push id87078
push usermratcliffe@mozilla.com
push dateTue, 04 Jun 2019 16:03:32 +0000
treeherderautoland@96ea626be10a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1553472
milestone69.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 1553472 - Ensure that all DevTools tooltips should conform with the Proton theme r=pbro Differential Revision: https://phabricator.services.mozilla.com/D32309
devtools/client/shared/widgets/tooltip/HTMLTooltip.js
devtools/client/themes/tooltips.css
--- a/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
@@ -29,21 +29,21 @@ const TYPE = {
   ARROW: "arrow",
   DOORHANGER: "doorhanger",
 };
 
 module.exports.TYPE = TYPE;
 
 const ARROW_WIDTH = {
   "normal": 0,
-  "arrow": 32,
+  "arrow": 30,
   // This is the value calculated for the .tooltip-arrow element in tooltip.css
   // which includes the arrow width (20px) plus the extra margin added so that
   // the drop shadow is not cropped (2px each side).
-  "doorhanger": 24,
+  "doorhanger": 21,
 };
 
 const ARROW_OFFSET = {
   "normal": 0,
   // Default offset between the tooltip's edge and the tooltip arrow.
   "arrow": 20,
   // Match other Firefox menus which use 10px from edge (but subtract the 2px
   // margin included in the ARROW_WIDTH above).
@@ -55,17 +55,17 @@ const EXTRA_HEIGHT = {
   // The arrow is 16px tall, but merges on 3px with the panel border
   "arrow": 13,
   // The doorhanger arrow is 10px tall, but merges on 1px with the panel border
   "doorhanger": 9,
 };
 
 const EXTRA_BORDER = {
   "normal": 0,
-  "arrow": 3,
+  "arrow": -0.5,
   "doorhanger": 0,
 };
 
 /**
  * Calculate the vertical position & offsets to use for the tooltip. Will attempt to
  * respect the provided height and position preferences, unless the available height
  * prevents this.
  *
@@ -119,17 +119,17 @@ const calculateVerticalPosition = (
   const availableHeight = pos === TOP ? availableTop : availableBottom;
   height = Math.min(height, availableHeight - offset);
   height = Math.floor(height);
 
   // Calculate TOP.
   let top = pos === TOP ? anchorTop - height - offset : anchorTop + anchorHeight + offset;
 
   // Translate back to absolute coordinates by re-including viewport top margin.
-  top += viewportRect.top;
+  top += viewportRect.top + 1;
 
   return {top, height, computedPosition: pos};
 };
 
 /**
  * Calculate the horizontal position & offsets to use for the tooltip. Will
  * attempt to respect the provided width and position preferences, unless the
  * available width prevents this.
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -13,17 +13,17 @@
 .theme-dark {
   --bezier-diagonal-color: #eee;
   --bezier-grid-color: rgba(0, 0, 0, 0.2);
   --onboarding-link-color: var(--theme-highlight-blue);
   --onboarding-link-active-color: var(--blue-40);
 
   /* Tooltips */
   --theme-tooltip-border: #434850;
-  --theme-tooltip-background: rgba(19, 28, 38, .9);
+  --theme-tooltip-background: var(--theme-popup-background);
   --theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
 
   /* Doorhangers */
   /* These colors are based on the colors used for doorhangers elsewhere in
    * Firefox. */
   --theme-arrowpanel-background: var(--theme-popup-background);
   --theme-arrowpanel-color: var(--theme-popup-color);
   --theme-arrowpanel-border-color: var(--theme-popup-border-color);
@@ -36,17 +36,17 @@
 .theme-light {
   --bezier-diagonal-color: rgba(0, 0, 0, 0.2);
   --bezier-grid-color: rgba(0, 0, 0, 0.05);
   --onboarding-link-color: var(--blue-60);
   --onboarding-link-active-color: var(--blue-70);
 
   /* Tooltips */
   --theme-tooltip-border: #d9e1e8;
-  --theme-tooltip-background: rgba(255, 255, 255, .9);
+  --theme-tooltip-background: rgb(255, 255, 255);
   --theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
 
   /* Doorhangers */
   /* These colors are based on the colors used for doorhangers elsewhere in
    * Firefox. */
   --theme-arrowpanel-background: var(--theme-popup-background);
   --theme-arrowpanel-color: var(--theme-popup-color);
   --theme-arrowpanel-border-color: var(--theme-popup-border-color);
@@ -200,18 +200,16 @@ strong {
   filter: none;
 }
 
 .tooltip-container[type="arrow"] > .tooltip-panel {
   position: relative;
   min-height: 10px;
   box-sizing: border-box;
   width: 100%;
-
-  border: 3px solid var(--theme-tooltip-border);
   border-radius: 5px;
 }
 
 .tooltip-top[type="arrow"] .tooltip-panel {
   top: 0;
 }
 
 .tooltip-bottom[type="arrow"] .tooltip-panel {
@@ -246,20 +244,17 @@ strong {
 .tooltip-arrow:before {
   content: "";
   position: absolute;
   width: 21px;
   height: 21px;
   margin-left: 4px;
   background: linear-gradient(-45deg,
     var(--theme-tooltip-background) 50%, transparent 50%);
-  border-color: var(--theme-tooltip-border);
-  border-style: solid;
-  border-width: 0px 3px 3px 0px;
-  border-radius: 3px;
+  border: 0 none;
   pointer-events: all;
 }
 
 .tooltip-bottom .tooltip-arrow:before {
   margin-top: 4px;
   transform: rotate(225deg);
 }
 
@@ -485,21 +480,22 @@ strong {
   border: none;
   border-top: 1px solid var(--theme-arrowpanel-separator);
   margin: 6px 0;
   padding: 0;
 }
 
 /* Tooltip: Events */
 
-.event-header {
+.devtools-tooltip-events-container .event-header {
   display: flex;
   align-items: center;
   cursor: pointer;
   overflow: hidden;
+  background-color: var(--theme-tooltip-background);
 }
 
 .event-header:before {
   content: "▶︎";
   padding-inline-end: 5px;
 }
 
 .event-header.content-expanded:before {