Compact tab bar

[mesvam]

I'm using this code for a compact tab bar. Feel free to edit and include it in the project if appropriate, but I'm not sure where it should go since I'm not familiar with the file organization.

/* compact tab bar */
:root {
	--compact-tabbar-height: 22px;
}
:root[uidensity="compact"] body {
	--tab-min-height: var(--compact-tabbar-height) !important;
}
#titlebar { /* seems like #titlebar has hard coded min height of 31px, use this workaround to eliminate */
	margin-bottom: calc(var(--compact-tabbar-height) - 31px);
}
#TabsToolbar {
	max-height: var(--compact-tabbar-height);
}
#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
	height: var(--compact-tabbar-height) !important;
}
:root {
	--tab-block-margin: 0px !important;
}

@media (-moz-windows-compositor) {
	@media not (-moz-platform: windows-win7) {
		@media not (-moz-platform: windows-win8) {
			.titlebar-button {
				padding: 5px 5px !important;
			}
		}
	}
}

[Speravir]

@nevubm

Just some remarks:

1. Make the css section of your posting more readable with syntax-highlighting, cf. section about syntax-highlighting of GitHub docs. In short, wrap all your code in

   ```css
   /* css code here */
   ```

   I am using this myself in the code snippets below.
2. You have two rules for :root. These could be merged:

   :root {
   	--compact-tabbar-height: 22px;
   	--tab-block-margin: 0px !important;
   }

3. Negating combined media queries is hard, but I think this media query is wrong:

   @media not (-moz-platform: windows-win7) {
   		@media not (-moz-platform: windows-win8) {
   			.titlebar-button {
   				padding: 5px 5px !important;
   			}
   		}
   	}

   In my humble opinion this should be

   @media not (-moz-platform: windows-win7), not (-moz-platform: windows-win8) {
   	.titlebar-button {
   		padding: 5px 5px !important;
   	}
   }

   And certainly this even could be merged with the other media query. Search with your favorite search engine for css @media logical operators. A very basic overview is in @media Logical operators (MDN). Despite there is a copy&paste mistake in a code example this may be helpful, too: Logic in CSS Media Queries (CSS-Tricks site). And if you understand German this will help you: CSS, Medienabfragen einbinden, Gruppierung und Kombination (SELFHTML wiki).
4. The titlebar is OS dependent. Judging from the media query you speak of Windows. This makes it difficult for Aris using it in the collection, I guess.

[mesvam]

Thanks for the input!

1. That's good to know, I've edited the post to add it

2. good catch

3. Regarding the media queries, I don't remember precisely why I use this selector, but in general, I try to copy Mozilla's selectors as closely as possible to avoid side effects, though this can break more frequently when Firefox updates and the selectors change than if I'd used a more general selector. In this instance, I believe the Firefox stylesheet has other rules in these nested selectors so it does look quite odd out of context and there is certainly room for improvement.

4. We can use media queries to make things platform specific so I suspect this is less of an issue, but it does mean some people won't see any effect.