Bug 1470947 - Part 5: Remove block padding from scrollbars in all tabs menu r?dao
MozReview-Commit-ID: 32Uc6h4PSUu
--- 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;
}