Bug 1409377 - Prevent the app menu's scrollbar from overlapping its content. r?mikedeboer
MozReview-Commit-ID: EHx5yi0pW6B
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -537,18 +537,20 @@
command="Tools:PrivateBrowsing"/>
<toolbarbutton id="appMenuRestoreLastSession"
label="&appMenuHistory.restoreSession.label;"
class="subviewbutton subviewbutton-iconic"
command="Browser:RestoreLastSession"/>
<toolbarseparator/>
<toolbaritem id="appMenu-zoom-controls" class="toolbaritem-combined-buttons" closemenu="none">
<!-- Use a spacer, because panel sizing code gets confused when using CSS methods. -->
- <spacer/>
+ <spacer class="before-label"/>
<label value="&fullZoom.label;"/>
+ <!-- This spacer keeps the scrollbar from overlapping the view. -->
+ <spacer class="after-label"/>
<toolbarbutton id="appMenu-zoomReduce-button"
class="subviewbutton subviewbutton-iconic"
command="cmd_fullZoomReduce"
tooltip="dynamic-shortcut-tooltip"/>
<toolbarbutton id="appMenu-zoomReset-button"
class="subviewbutton"
command="cmd_fullZoomReset"
tooltip="dynamic-shortcut-tooltip"/>
@@ -563,18 +565,20 @@
type="checkbox"
closemenu="auto"
onclick="if (event.button == 0) this.closest('panel').hidePopup();"
tooltip="dynamic-shortcut-tooltip"/>
</toolbaritem>
<toolbarseparator/>
<toolbaritem id="appMenu-edit-controls" class="toolbaritem-combined-buttons" closemenu="none">
<!-- Use a spacer, because panel sizing code gets confused when using CSS methods. -->
- <spacer/>
+ <spacer class="before-label"/>
<label value="&editMenu.label;"/>
+ <!-- This spacer keeps the scrollbar from overlapping the view. -->
+ <spacer class="after-label"/>
<toolbarbutton id="appMenu-cut-button"
class="subviewbutton subviewbutton-iconic"
command="cmd_cut"
tooltip="dynamic-shortcut-tooltip"/>
<toolbarbutton id="appMenu-copy-button"
class="subviewbutton subviewbutton-iconic"
command="cmd_copy"
tooltip="dynamic-shortcut-tooltip"/>
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -461,17 +461,17 @@ panel[photon] > .panel-arrowcontainer >
photonpanelmultiview panelview {
background: var(--arrowpanel-background);
padding: 0;
}
#appMenu-popup panelview,
#customizationui-widget-multiview panelview:not([extension]) {
min-width: @menuPanelWidth@;
- max-width: 30em;
+ max-width: 35em;
}
#customizationui-widget-multiview #appMenu-libraryView,
#pageActionPanel panelview,
#widget-overflow panelview {
min-width: @wideMenuPanelWidth@;
max-width: @wideMenuPanelWidth@;
}
@@ -1439,20 +1439,25 @@ photonpanelmultiview .subviewbutton > .m
}
photonpanelmultiview .toolbaritem-combined-buttons > label {
-moz-box-flex: 1;
font: menu;
margin: 0;
}
-photonpanelmultiview .toolbaritem-combined-buttons > spacer {
+photonpanelmultiview .toolbaritem-combined-buttons > spacer.before-label {
width: 36px; /* 12px toolbarbutton padding + 16px icon + 8px label padding start */
}
+photonpanelmultiview .toolbaritem-combined-buttons > spacer.after-label {
+ -moz-box-flex: 1;
+ width: 20px; /* a little bigger than the width of the scrollbar */
+}
+
photonpanelmultiview .PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton {
-moz-box-flex: 0;
height: auto;
margin-inline-start: 18px;
min-width: auto;
padding: 4px;
}