Bug 1470947 - Part 5: Remove block padding from scrollbars in all tabs menu r?dao draft
authorMark Striemer <mstriemer@mozilla.com>
Mon, 25 Jun 2018 13:23:03 -0400
changeset 819913 d9cf0510121d3dec8e3d1f8d7e47a50040de476d
parent 819912 a9d07a4cd97230eca93806de36223968ba590851
push id116685
push userbmo:mstriemer@mozilla.com
push dateWed, 18 Jul 2018 18:52:47 +0000
reviewersdao
bugs1470947
milestone63.0a1
Bug 1470947 - Part 5: Remove block padding from scrollbars in all tabs menu r?dao MozReview-Commit-ID: 32Uc6h4PSUu
browser/base/content/browser-allTabsMenu.inc.xul
browser/base/content/browser-allTabsMenu.js
browser/themes/shared/tabs.inc.css
--- a/browser/base/content/browser-allTabsMenu.inc.xul
+++ b/browser/base/content/browser-allTabsMenu.inc.xul
@@ -13,28 +13,29 @@
   <panelmultiview mainViewId="allTabsMenu-allTabsView" disablekeynav="true">
     <panelview id="allTabsMenu-allTabsView" class="PanelUI-subView">
       <vbox class="panel-subview-body">
         <toolbarbutton id="allTabsUndoCloseButton"
                        class="undo-close-tab subviewbutton subviewbutton-iconic"
                        label="&undoCloseTab.label;"
                        key="key_undoCloseTab"
                        command="History:UndoCloseTab"/>
-        <toolbarseparator/>
-        <toolbarbutton class="container-tabs-button subviewbutton subviewbutton-nav"
+        <toolbarseparator id="allTabsMenu-containerTabsSeparator"/>
+        <toolbarbutton id="allTabsMenu-containerTabsButton"
+                       class="subviewbutton subviewbutton-nav"
                        closemenu="none"
                        oncommand="PanelUI.showSubView('allTabsMenu-containerTabsView', this);"
                        label="&newUserContext.label;"/>
-        <toolbarseparator class="container-tabs-separator"/>
+        <toolbarseparator id="allTabsMenu-hiddenTabsSeparator"/>
         <toolbarbutton id="allTabsMenu-hiddenTabsButton"
-                       class="hidden-tabs-button subviewbutton subviewbutton-nav"
+                       class="subviewbutton subviewbutton-nav"
                        closemenu="none"
                        oncommand="PanelUI.showSubView('allTabsMenu-hiddenTabsView', this);"
                        label="&hiddenTabs.label;" />
-        <toolbarseparator class="hidden-tabs-separator"/>
+        <toolbarseparator id="allTabsMenu-tabsSeparator"/>
         <vbox id="allTabsMenu-allTabsViewTabs" class="panel-subview-body"/>
       </vbox>
     </panelview>
 
     <panelview id="allTabsMenu-hiddenTabsView" class="PanelUI-subView">
       <vbox class="panel-subview-body"/>
     </panelview>
 
--- a/browser/base/content/browser-allTabsMenu.js
+++ b/browser/base/content/browser-allTabsMenu.js
@@ -29,31 +29,31 @@ var gTabsPanel = {
     this._initializedElements = true;
   },
 
   init() {
     if (this._initialized) return;
 
     this.initElements();
 
-    let hiddenTabsMenuButton = this.allTabsView.querySelector(".hidden-tabs-button");
-    let hiddenTabsSeparator = this.allTabsView.querySelector(".hidden-tabs-separator");
+    let hiddenTabsMenuButton = document.getElementById("allTabsMenu-hiddenTabsButton");
+    let hiddenTabsSeparator = document.getElementById("allTabsMenu-hiddenTabsSeparator");
     this.hiddenAudioTabsPopup = new TabsPanel({
       view: this.allTabsView,
       insertBefore: hiddenTabsSeparator,
       filterFn: (tab) => tab.hidden && tab.soundPlaying,
     });
     this.allTabsPanel = new TabsPanel({
       view: this.allTabsView,
       containerNode: this.allTabsViewTabs,
       filterFn: (tab) => !tab.pinned && !tab.hidden,
     });
 
-    let containerTabsButton = this.allTabsView.querySelector(".container-tabs-button");
-    let containerTabsSeparator = this.allTabsView.querySelector(".container-tabs-separator");
+    let containerTabsButton = document.getElementById("allTabsMenu-containerTabsButton");
+    let containerTabsSeparator = document.getElementById("allTabsMenu-containerTabsSeparator");
     this.allTabsView.addEventListener("ViewShowing", (e) => {
       PanelUI._ensureShortcutsShown(this.allTabsView);
       e.target.querySelector(".undo-close-tab").disabled =
           SessionStore.getClosedTabCount(window) == 0;
 
       let containersEnabled = Services.prefs.getBoolPref("privacy.userContext.enabled")
                                 && !PrivateBrowsingUtils.isWindowPrivate(window);
       containerTabsButton.hidden = !containersEnabled;
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -753,16 +753,27 @@
   min-height: 12px;
 }
 
 #allTabsMenu-allTabsView {
   --blue-40: #45a1ff;
   max-width: 42em;
 }
 
+/* The list of tabs is in its own panel-subview-body which will scroll. We don't
+   want any padding above/below the scrollbars, so remove the padding/margin
+   from the separator and outer panel-subview-body. */
+#allTabsMenu-allTabsView > .panel-subview-body {
+  padding-bottom: 0;
+}
+
+#allTabsMenu-tabsSeparator {
+  margin-bottom: 0;
+}
+
 .all-tabs-item > .all-tabs-secondary-button {
   padding: 0;
   padding-inline-start: 6px;
   opacity: .8;
   -moz-context-properties: fill;
   fill: currentColor;
 }