Bug 1409377 - Prevent the app menu's scrollbar from overlapping its content. r?mikedeboer draft
authorDrew Willcoxon <adw@mozilla.com>
Wed, 25 Oct 2017 12:42:28 -0400
changeset 686251 5a20fd0923f5db931a46bdd5ff2beada5fa2dc84
parent 685069 9056f2ee492fa481aa86146aba236c074628e9fd
child 737342 e6a376380375582d42c4790f41ce6297dc318e3a
push id86143
push userdwillcoxon@mozilla.com
push dateWed, 25 Oct 2017 16:42:54 +0000
reviewersmikedeboer
bugs1409377
milestone58.0a1
Bug 1409377 - Prevent the app menu's scrollbar from overlapping its content. r?mikedeboer MozReview-Commit-ID: EHx5yi0pW6B
browser/components/customizableui/content/panelUI.inc.xul
browser/themes/shared/customizableui/panelUI.inc.css
--- 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;
 }