Bug 1201829 - Fix devtools tooltip arrows on HDPI screens. r=pbrosset
MozReview-Commit-ID: 55qyiqVy22v
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -314,33 +314,45 @@ div.CodeMirror span.eval-text {
.theme-tooltip-panel .panel-arrow {
--arrow-margin: -4px;
}
:root[platform="win"] .theme-tooltip-panel .panel-arrow {
--arrow-margin: -7px;
}
+.theme-tooltip-panel .panel-arrow[side="top"],
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+ list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
+ /* !important is needed to override the popup.css rules in toolkit/themes */
+ width: 39px !important;
+ height: 16px !important;
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"],
+.theme-tooltip-panel .panel-arrow[side="right"] {
+ list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
+ /* !important is needed to override the popup.css rules in toolkit/themes */
+ width: 16px !important;
+ height: 39px !important;
+}
+
.theme-tooltip-panel .panel-arrow[side="top"] {
- list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
margin-bottom: var(--arrow-margin);
}
.theme-tooltip-panel .panel-arrow[side="bottom"] {
- list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
margin-top: var(--arrow-margin);
}
.theme-tooltip-panel .panel-arrow[side="left"] {
- list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
margin-right: var(--arrow-margin);
}
.theme-tooltip-panel .panel-arrow[side="right"] {
- list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
margin-left: var(--arrow-margin);
}
@media (min-resolution: 1.1dppx) {
.theme-tooltip-panel .panel-arrow[side="top"],
.theme-tooltip-panel .panel-arrow[side="bottom"] {
list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png");
}
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -323,33 +323,45 @@ div.CodeMirror span.eval-text {
.theme-tooltip-panel .panel-arrow {
--arrow-margin: -4px;
}
:root[platform="win"] .theme-tooltip-panel .panel-arrow {
--arrow-margin: -7px;
}
+.theme-tooltip-panel .panel-arrow[side="top"],
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+ list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light.png");
+ /* !important is needed to override the popup.css rules in toolkit/themes */
+ width: 39px !important;
+ height: 16px !important;
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"],
+.theme-tooltip-panel .panel-arrow[side="right"] {
+ list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light.png");
+ /* !important is needed to override the popup.css rules in toolkit/themes */
+ width: 16px !important;
+ height: 39px !important;
+}
+
.theme-tooltip-panel .panel-arrow[side="top"] {
- list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light.png");
margin-bottom: var(--arrow-margin);
}
.theme-tooltip-panel .panel-arrow[side="bottom"] {
- list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light.png");
margin-top: var(--arrow-margin);
}
.theme-tooltip-panel .panel-arrow[side="left"] {
- list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light.png");
margin-right: var(--arrow-margin);
}
.theme-tooltip-panel .panel-arrow[side="right"] {
- list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light.png");
margin-left: var(--arrow-margin);
}
@media (min-resolution: 1.1dppx) {
.theme-tooltip-panel .panel-arrow[side="top"],
.theme-tooltip-panel .panel-arrow[side="bottom"] {
list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light@2x.png");
}