Bug 1553472 - Ensure that all DevTools tooltips should conform with the Proton theme r=pbro
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Thu, 06 Jun 2019 15:09:48 +0000
changeset 477778 6a7b8a2a7f8498eba939ce3bcd4b902b2449ee5d
parent 477777 acb124d3fd5e28f60eb320b007b590f0d4de21be
child 477779 b686d09763cc39f32f8120771fc4c04812158b4f
push id87351
push usermratcliffe@mozilla.com
push dateFri, 07 Jun 2019 08:42:50 +0000
treeherderautoland@6a7b8a2a7f84 [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/test/browser_html_tooltip_arrow-01.js
devtools/client/shared/widgets/tooltip/HTMLTooltip.js
devtools/client/themes/tooltips.css
--- a/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
+++ b/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
@@ -60,16 +60,17 @@ async function runTests(doc) {
                      arrowBounds.right >= anchorBounds.left;
     const isBlockedByViewport = arrowBounds.left == 0 ||
                               arrowBounds.right == docRight;
     ok(intersects || isBlockedByViewport,
       "Tooltip arrow is aligned with the anchor, or stuck on viewport's edge.");
 
     const isInPanel = arrowBounds.left >= panelBounds.left &&
                     arrowBounds.right <= panelBounds.right;
+
     ok(isInPanel,
       "The tooltip arrow remains inside the tooltip panel horizontally");
 
     await hideTooltip(tooltip);
   }
 
   tooltip.destroy();
 }
--- a/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
@@ -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.
  *
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -12,18 +12,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);
@@ -35,18 +34,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 +198,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 +242,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 +478,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 {