Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-30 16:22:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1561304 - Add border to HTML tooltip when not using XUL wrapper r=fvsch

Browse Source 
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

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Julian Descottes 2019-07-05 07:08:17 +00:00
parent b8813ed35c
commit 15564ff126
3 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
devtools/client/shared/widgets/tooltip/HTMLTooltip.js
View File

@ -356,6 +356,7 @@ function HTMLTooltip(
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

19
devtools/client/themes/tooltips.css
View File

@ -42,7 +42,7 @@
/* 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
@ -127,7 +127,7 @@ strong {
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 {
@ -205,7 +205,7 @@ strong {
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 {
@ -234,11 +234,11 @@ strong {
}
.tooltip-top .tooltip-arrow {
margin-top: -3px;
margin-top: -1px;
}
.tooltip-bottom .tooltip-arrow {
margin-bottom: -3px;
margin-bottom: -1px;
}
.tooltip-arrow:before {
@ -254,7 +254,7 @@ strong {
}
.tooltip-bottom .tooltip-arrow:before {
margin-top: 4px;
margin-top: 5px;
transform: rotate(225deg);
}
@ -263,6 +263,12 @@ strong {
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 {
@ -486,6 +492,7 @@ strong {
/* Tooltip: Events */
.devtools-tooltip-events-container {
border-radius: var(--theme-arrowpanel-border-radius);
height: 100%;
overflow-y: auto;
}

2
devtools/client/themes/variables.css
View File

@ -114,7 +114,7 @@
: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 {