corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1913279 - Fix vertical tabs issue with selected tab not scrolling on overflow r=tabbrowser-reviewers,desktop-theme-reviewers,dao

Browse Source 
* Remove condition in tabs.js that prohibited overflow attribute being added for vertical orientation
* Remove redundant overflow-y:auto for #tabbrowser-arrowscrollbox and set a min-height for vertical tabs

Differential Revision: https://phabricator.services.mozilla.com/D221133
This commit is contained in:
Sarah Clements
2024-09-09 13:49:26 +00:00
parent 11f011d82e
commit 00d0b28ceb
3 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/base/content/navigator-toolbox.inc.xhtml
View File

@@ -65,7 +65,7 @@
onclick="gBrowser.handleNewTabMiddleClick(this, event);" onclick="gBrowser.handleNewTabMiddleClick(this, event);"
tooltip="dynamic-shortcut-tooltip" tooltip="dynamic-shortcut-tooltip"
data-l10n-id="tabs-toolbar-new-tab"/> data-l10n-id="tabs-toolbar-new-tab"/>
<arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" style="min-width: 1px;" clicktoscroll="" scrolledtostart="" scrolledtoend=""> <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" clicktoscroll="" scrolledtostart="" scrolledtoend="">
<tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/> <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
<hbox id="tabbrowser-arrowscrollbox-periphery"> <hbox id="tabbrowser-arrowscrollbox-periphery">
<toolbartabstop/> <toolbartabstop/>

9
browser/components/tabbrowser/content/tabs.js
View File

@@ -1148,13 +1148,8 @@
} }
on_overflow(event) { on_overflow(event) {
// Ignore overflow events: // Ignore overflow events from nested scrollable elements
// - from nested scrollable elements if (event.target != this.arrowScrollbox) {
// - for vertical orientation
if (
event.target != this.arrowScrollbox ||
event.originalTarget.getAttribute("orient") == "vertical"
) {
return; return;
} }

6
browser/themes/shared/tabbrowser/tabs.css
View File

@@ -712,6 +712,10 @@ tab-group {
border-bottom: .5px solid transparent; border-bottom: .5px solid transparent;
} }
&[orient="horizontal"] {
min-width: 1px;
}
&:not([scrolledtostart])::part(overflow-start-indicator) { &:not([scrolledtostart])::part(overflow-start-indicator) {
margin-inline: -.5px -6.5px; margin-inline: -.5px -6.5px;
} }
@@ -776,7 +780,7 @@ tab-group {
/* Vertical tabs styling */ /* Vertical tabs styling */
#tabbrowser-arrowscrollbox[orient="vertical"] { #tabbrowser-arrowscrollbox[orient="vertical"] {
overflow-y: auto; min-height: 1px;
&::part(scrollbutton-up), &::part(scrollbutton-up),
&::part(scrollbutton-down) { &::part(scrollbutton-down) {