Bug 1378277 - make arrow vertically align correctly in customize mode independent of font-size, r=mikedeboer
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 19 Jul 2017 23:37:55 +0100
changeset 418612 6577f608fb27687184442368f2ac050089690817
parent 418611 b9710c3f87d5d36dc91c7f0df3c993d9668c766f
child 418613 4c64ef2265d50824cafe9aec1ee149b3a7c8c0e7
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1378277
milestone56.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 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
browser/themes/shared/customizableui/customizeMode.inc.css
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -571,19 +571,17 @@ toolbarpaletteitem[place=toolbar] > tool
   background-clip: padding-box;
   border: 1px solid var(--arrowpanel-border-color);
   box-shadow: 0 0 10px hsla(0,0%,0%,.2);
 }
 
 #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: */
@@ -605,16 +603,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"));
   }