Bug 1378277 - make arrow vertically align correctly in customize mode independent of font-size, r?mikedeboer
This seems to be caused by the container box being sized by font-size because
the image is being baseline-aligned, even though I don't think XUL is
supposed to do that given the <image> isn't inline-block. Anyway, setting
vertical-align: top fixes this, though it means we then need to update the
margin so we continue to overlap correctly.
MozReview-Commit-ID: DW6wdKmfPE2
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -575,19 +575,17 @@ toolbarpaletteitem[place=toolbar] > tool
-moz-appearance: none;
border-radius: var(--arrowpanel-border-radius);
%endif
}
#customization-panelWrapper > .panel-arrowbox {
position: relative;
height: 10px;
-%ifndef XP_MACOSX
- margin-bottom: 2px;
-%endif
+ margin-bottom: -1px;
}
#customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
%ifdef XP_MACOSX
list-style-image: var(--panel-arrow-image-vertical,
url("chrome://global/skin/arrow/panelarrow-vertical.png"));
/* The OS X image is 2px narrower than the windows/linux one.
* Add padding to compensate: */
@@ -609,16 +607,17 @@ toolbarpaletteitem[place=toolbar] > tool
* 10px + toolbarbutton-inner-padding (center of overflow button) +
* 29px + 2 * toolbarbutton-inner-padding
* The #customization-panel-container has a 25px margin, so that leaves:
* 14px + 3 * toolbarbutton-inner-padding
* Finally, we need to center the arrow, which is 20px wide, so subtract
* 10px.
*/
margin-inline-end: calc(4px + 3 * var(--toolbarbutton-inner-padding));
+ vertical-align: top;
}
%ifdef XP_MACOSX
@media (min-resolution: 2dppx) {
#customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
list-style-image: var(--panel-arrow-image-vertical,
url("chrome://global/skin/arrow/panelarrow-vertical@2x.png"));
}