Bug 1561304 - Add border to HTML tooltip when not using XUL wrapper r=fvsch
authorJulian Descottes <jdescottes@mozilla.com>
Fri, 05 Jul 2019 07:08:17 +0000
changeset 544310 eb1f46404114367b499ec71dbc2f706e8f226bf8
parent 544309 2916482ae45442419bd5d7b8a29883fdad06731e
child 544311 a7cba3c133952c0ec93852431545aa34069b4c40
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfvsch
bugs1561304
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 1561304 - Add border to HTML tooltip when not using XUL wrapper r=fvsch Also changed the border radius to be consistent between doorhanger and arrow style tooltips. There are still subtle differences between the XUL+arrow/HTML+arrow/XUL+doorhanger, but for now I would just like to fix this before we merge to 70. Strictly using the photon shadow for doorhangers is too subtle and too inconsistent with our other tooltips, so I used shadow-20. Differential Revision: https://phabricator.services.mozilla.com/D36767
devtools/client/shared/widgets/tooltip/HTMLTooltip.js
devtools/client/themes/tooltips.css
devtools/client/themes/variables.css
--- a/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
@@ -351,16 +351,17 @@ function HTMLTooltip(
 
   this._position = null;
 
   this._onClick = this._onClick.bind(this);
   this._onMouseup = this._onMouseup.bind(this);
   this._onXulPanelHidden = this._onXulPanelHidden.bind(this);
 
   this.container = this._createContainer();
+  this.container.classList.toggle("tooltip-container-xul", this.useXulWrapper);
 
   if (this.useXulWrapper) {
     // When using a XUL panel as the wrapper, the actual markup for the tooltip is as
     // follows :
     // <panel> <!-- XUL panel used to position the tooltip anywhere on screen -->
     //   <div> <!-- div wrapper used to isolate the tooltip container -->
     //     <div> <! the actual tooltip.container element -->
     this.xulPanelWrapper = this._createXulPanelWrapper();
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -37,17 +37,17 @@
   --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-color: var(--theme-body-color);
   --theme-tooltip-background: rgb(255, 255, 255);
-  --theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
+  --theme-tooltip-shadow: var(--grey-90-a10);
 
   /* 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);
   --theme-arrowpanel-separator: ThreeDShadow;
@@ -122,17 +122,17 @@ strong {
 
 .tooltip-container {
   display: none;
   position: fixed;
   z-index: 9999;
   background: transparent;
   pointer-events: none;
   overflow: hidden;
-  filter: drop-shadow(0 3px 4px var(--theme-tooltip-shadow));
+  filter: drop-shadow(0 2px 8px var(--theme-tooltip-shadow));
 }
 
 .tooltip-xul-wrapper {
   -moz-appearance: none;
   background: transparent;
   overflow: visible;
   border-style: none;
 }
@@ -200,17 +200,17 @@ strong {
   filter: none;
 }
 
 .tooltip-container[type="arrow"] > .tooltip-panel {
   position: relative;
   min-height: 10px;
   box-sizing: border-box;
   width: 100%;
-  border-radius: 5px;
+  border-radius: var(--theme-arrowpanel-border-radius);
 }
 
 .tooltip-top[type="arrow"] .tooltip-panel {
   top: 0;
 }
 
 .tooltip-bottom[type="arrow"] .tooltip-panel {
   bottom: 0;
@@ -229,45 +229,51 @@ strong {
   direction: ltr;
 }
 
 .tooltip-panel:-moz-locale-dir(rtl) {
   direction: rtl;
 }
 
 .tooltip-top .tooltip-arrow {
-  margin-top: -3px;
+  margin-top: -1px;
 }
 
 .tooltip-bottom .tooltip-arrow {
-  margin-bottom: -3px;
+  margin-bottom: -1px;
 }
 
 .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: 0 none;
   pointer-events: all;
 }
 
 .tooltip-bottom .tooltip-arrow:before {
-  margin-top: 4px;
+  margin-top: 5px;
   transform: rotate(225deg);
 }
 
 .tooltip-top .tooltip-arrow:before {
   margin-top: -12px;
   transform: rotate(45deg);
 }
 
+/* XUL panels have a default border, but pure HTML tooltips don't have one. */
+.tooltip-container[type="arrow"]:not(.tooltip-container-xul) > .tooltip-panel,
+.tooltip-container[type="arrow"]:not(.tooltip-container-xul) > .tooltip-arrow::before {
+  border: 1px solid var(--theme-arrowpanel-border-color);
+}
+
 /* Tooltip : doorhanger style */
 
 .tooltip-container[type="doorhanger"] > .tooltip-panel {
   padding: 2px 0;
   color: var(--theme-arrowpanel-color);
   margin: 4px;
   max-width: 320px;
 }
@@ -481,16 +487,17 @@ strong {
   border-top: 1px solid var(--theme-arrowpanel-separator);
   margin: 6px 0;
   padding: 0;
 }
 
 /* Tooltip: Events */
 
 .devtools-tooltip-events-container {
+  border-radius: var(--theme-arrowpanel-border-radius);
   height: 100%;
   overflow-y: auto;
 }
 
 .devtools-tooltip-events-container .event-header {
   display: flex;
   align-items: center;
   box-sizing: content-box;
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -109,17 +109,17 @@
 
 /*
  * For doorhangers elsewhere in Firefox, Mac uses fixed colors rather than
  * system colors.
  */
 :root[platform="mac"].theme-light {
   --theme-popup-background: hsla(0,0%,99%,.975);
   --theme-popup-color: hsl(0,0%,10%);
-  --theme-popup-border-color: hsla(210,4%,10%,.05);
+  --theme-popup-border-color: var(--grey-90-a20);
 }
 
 :root.theme-dark {
   --theme-body-background: #232327;
   --theme-sidebar-background: #18181a;
   --theme-contrast-background: #ffb35b;
 
   /* Toolbar */