--- 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 {