Implement max number of tab rows (#48)

numirias · Jun 8, 2020 · 8c1e9a7 · 8c1e9a7
1 parent c54a605
commit 8c1e9a7
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 web-ext-artifacts/
 TODO
+NOTES
+play/
 build/
diff --git a/src/background.js b/src/background.js
@@ -16,6 +16,7 @@ export let defaultOptions = {
   minTabSize: 150,
   maxTabSize: 300,
   minTabHeight: 28,
+  maxTabRows: 99,
   minLightness: 59,
   maxLightness: 100,
   fitLightness: true,
@@ -43,6 +44,7 @@ function makeDynamicSheet(options) {
     --paxmod-min-tab-size: ${options.minTabSize}px;
     --paxmod-max-tab-size: ${options.maxTabSize}px;
     --tab-min-height: ${options.minTabHeight}px !important;
+    --paxmod-max-tab-rows: ${options.maxTabRows} !important;
     --paxmod-font-family: ${options.fontFamily};
     --paxmod-display-newtab: ${options.displayNewtab ? '-webkit-box' : 'none'};
     --paxmod-titlebar-display: ${options.displayTitlebar ? '-webkit-box' : 'none'};

diff --git a/src/browser.css b/src/browser.css
@@ -49,6 +49,10 @@ toolbarbutton#tabs-newtab-button {
     width: 100% !important;
     display: flex !important;
     flex-wrap: wrap !important;
+    max-height: calc(var(--tab-min-height) * var(--paxmod-max-tab-rows)) !important;
+    overflow-y: auto !important;
+    scrollbar-width: thin !important;
+    scrollbar-color: var(--toolbarbutton-active-background) transparent;
 }
 
 #tabbrowser-arrowscrollbox::part(arrowscrollbox-overflow-start-indicator),

diff --git a/src/options/options.html b/src/options/options.html
@@ -45,6 +45,9 @@ <h1>Settings</h1>
       <div><label for="minTabHeight">Min. tab height</label></div>
       <div><input id="minTabHeight" type="number"> px</div>
 
+      <div><label for="maxTabRows">Max. number of tab rows <small>(before scrollbar appears)</small></label></div>
+      <div><input id="maxTabRows" type="number"></div>
+
       <div><label for="fitLightness">Fit lightness to themes</label></div>
       <div><input id="fitLightness" type="checkbox"></div>