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

* 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

browser/base/content/navigator-toolbox.inc.xhtml

@@ -65,7 +65,7 @@
                                 onclick="gBrowser.handleNewTabMiddleClick(this, event);"
                                 tooltip="dynamic-shortcut-tooltip"
                                 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=""/>
               <hbox id="tabbrowser-arrowscrollbox-periphery">
                 <toolbartabstop/>

browser/components/tabbrowser/content/tabs.js

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

browser/themes/shared/tabbrowser/tabs.css

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