From 9787beeb96e31fb1bd9aaf9a09b527ba810d44d4 Mon Sep 17 00:00:00 2001
From: MrOtherGuy <jastekken@outlook.com>
Date: Thu, 24 Jan 2019 13:35:40 +0200
Subject: [PATCH]  Combine multi-row tabs for pre and post Firefox 66 and label
 the post-66 only obsolete

---
 chrome/multi-row_tabs.css       | 63 +++++++++++++++++++++++++--------
 chrome/multi-row_tabs_Fx66+.css |  3 +-
 2 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/chrome/multi-row_tabs.css b/chrome/multi-row_tabs.css
index 20c89b6..f640305 100644
--- a/chrome/multi-row_tabs.css
+++ b/chrome/multi-row_tabs.css
@@ -1,21 +1,49 @@
 /* Makes tabs to appear on multiple lines */
-/* Tab reordering will not work */
+/* Tab reordering will not work and can't be made to work */
+/* On Firefox 66 you can use multi-row_tabs_window_control_patch.css to hide window controls if you wish */
 
-#tabbrowser-tabs,
-#tabbrowser-tabs > .tabbrowser-arrowscrollbox{
+/* It's recommended to move tabs new-tab-button outside tabs toolbar */
+
+#tabbrowser-tabs{
   min-height: unset !important;
+  padding-inline-start: 0px !important
 }
-#tabbrowser-tabs .scrollbox-innerbox{
-  display: flex;
-  flex-wrap: wrap;
-}
-#tabbrowser-tabs .arrowscrollbox-scrollbox {
-  overflow: -moz-hidden-unscrollable;
-  display: block;
-}
-.tabbrowser-tab{ max-height: 32px }
 
-.tabbrowser-tab[fadein]{
+/* Test for Firefox > 66 */
+@supports (inset-block:auto){
+  #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
+    overflow: -moz-hidden-unscrollable;
+    display: block;
+  }
+}
+
+/* Test for Firefox < 66 */
+@supports not (inset-block:auto){
+  #tabbrowser-tabs > .tabbrowser-arrowscrollbox{
+    min-height: unset !important;
+  }
+  #tabbrowser-tabs .scrollbox-innerbox{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  #tabbrowser-tabs .arrowscrollbox-scrollbox {
+    overflow: -moz-hidden-unscrollable;
+    display: block;
+  }
+}
+
+.tabbrowser-tab{ max-height: 32px }
+.tabbrowser-tab[pinned]{
+  position: static !important;
+  margin-inline-start: 0px !important;
+}
+
+
+.tabbrowser-tab[fadein]:not([pinned]){
   min-width: 100px !important;
   flex-grow: 1;
   /*
@@ -24,4 +52,11 @@
   */
   /*max-width: 100vw !important;*/
 }
-.tabbrowser-tab > stack{ width: 100%; height: 100% }
\ No newline at end of file
+
+.tabbrowser-tab > stack{ width: 100%; height: 100% }
+
+#tabbrowser-tabs .scrollbutton-up,
+#tabbrowser-tabs .scrollbutton-down,
+#alltabs-button,
+:root:not([customizing]) #TabsToolbar #new-tab-button,
+#tabbrowser-tabs spacer{ display: none }
\ No newline at end of file
diff --git a/chrome/multi-row_tabs_Fx66+.css b/chrome/multi-row_tabs_Fx66+.css
index ce03aeb..9f81de4 100644
--- a/chrome/multi-row_tabs_Fx66+.css
+++ b/chrome/multi-row_tabs_Fx66+.css
@@ -1,5 +1,6 @@
 /* For Firefox 66+ */
 /* Use multi-row_tabs_window_control_patch.css to hide window controls if you wish */
+/* This file is obsolete, you can use multi-row_tabs.css which should work on Firefox pre- and post-66  */
 
 
 #tabbrowser-tabs{
@@ -31,5 +32,5 @@
 #tabbrowser-tabs .scrollbutton-up,
 #tabbrowser-tabs .scrollbutton-down,
 #alltabs-button,
-#TabsToolbar #new-tab-button,
+:root:not([customizing]) #TabsToolbar #new-tab-button,
 #tabbrowser-tabs spacer{ display: none }
\ No newline at end of file