Open eoger opened 7 years ago
Talked about in yesterdays triage meeting (2017-06-21) for WebExtensions.
Agenda and outcome from the triage meeting (page 2, first item): https://docs.google.com/document/d/1s2j85VfYKTDftppFU-K7pgRs6sEuMTHVXqf3RL5iYvs/edit#heading=h.t2yykqfh2jii
Experiment: https://github.com/RedHatter/tabstrip-experiment
Are there any workarounds for this? I'd be more inclined to test if I could hide the top tabs.
@mlissner You can try my workaround. Just add the following to userChrome.css.
@-moz-document url("chrome://browser/content/browser.xul") {
#TabsToolbar {
visibility: collapse !important;
}
}
Enabling the title bar is also recommended.
@Keith94 This fix should be ni the readme, really.
Note that @Keith94's recommendation above causes glitches with the open/close/minimize buttons being overlaid on top of the navigation buttons, at least on macOS. This accomplishes the same thing but without those glitches:
@-moz-document url("chrome://browser/content/browser.xul") {
#TabsToolbar {
height: 22px;
}
#tabbrowser-tabs {
visibility: collapse;
}
}
I also add #sidebar-header
to visibility: collapse
, which saves a ton of vertical space in the sidebar. It really should scroll, but that's probably for another bug entirely.
I wonder, is there a way to do the CSS so that if the sidebar is open, the tab strip is hidden, and if not, the tab strip is shown? There's a new button in the customize menu that opens/closes the sidebar. If the CSS did what I'm describing, the new button could serve to switch between tabs on top and sidebar, just by showing/hiding the sidebar.
Currently trying to come up with a patch for bug 1332447, here's what my CSS rules look like:
#TabsToolbar {
min-height: 31.5px (Windows) / 27px (macOs) / no rule on linux
}
#TabsToolbar > * {
visibility: collapse;
}
I finally found a solution I'm pretty happy about in FF57 for OS X, though it requires two changes:
The first is the CSS fix as described above. Here's the contents of my userChrome.css
file
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@-moz-document url("chrome://browser/content/browser.xul") {
#TabsToolbar {
visibility: collapse;
}
}
The second part is right clicking on the URL bar, going to customize, and enabling the title bar. This gives the Mac OS buttons a place to go:
Checkbox is at the bottom:
Hope that helps out someone as we wait for the hide tab API to merge!
This should have the D-tabcenter-parity label, right?
According to the mozillazine kb, tab
might be a more appropriate selector. I've found this to behave better on Windows than previous suggestions, but I haven't been able to test on a Mac yet.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@-moz-document url("chrome://browser/content/browser.xul") {
tab {
visibility: collapse;
}
}
I followed the wiki recommendations for hiding the tab strip:
#tabbrowser-tabs {
visibility: collapse;
}
However, there are at least two issues with with:
In private windows, there is a weird empty bar with a mask in it at the top of the window:
In full-screen mode, the window controls (minimize, ...) appear at the top left of the window rather than the top right.
Hi, I tried all the above userChrome.css ways (Firefox 57.0b12 64-bit in Linux Mint) but couldn't affect the presence of the horizontal tabbar. Anyone tried in linux and succeeded?
@ugggf See brandonchartier's commet above ( https://github.com/eoger/tabcenter-redux/issues/15#issuecomment-336190386 ), which works for me on Ubuntu 16.04, with firefox nightly.
Ok, this worked - thanks. I'm having the empty bar issue (described by RalfJung) both in normal and private windows but that's not much of a problem.
@ugggf Ctrl+Alt+Shift+I is your best friend to find which chrome elements and which styles to change ;)
On macOS, if you want to merge the title bar without window buttons overlaying the navigation, you can still do it, just with the following
#nav-bar-customization-target {
margin-left: 75px !important;
}
which will push the nav bar just far enough to accommodate the three buttons.
I tried the following customisations via Tab Center Redux's custom CSS panel:
@-moz-document url("chrome://browser/content/browser.xul") {
#TabsToolbar {
visibility: collapse !important;
}
}
And:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@-moz-document url("chrome://browser/content/browser.xul") {
#TabsToolbar {
visibility: collapse;
}
}
And:
#tabbrowser-tabs {
visibility: collapse;
}
However, my horizontal tab bar remains unchanged in Firefox 57. Am I missing something?
@avamk The custom CSS panel is not where you put the CSS. You want userChrome.css.
The custom CSS panel is not where you put the CSS. You want userChrome.css.
Thank you @jplatte! It worked, sorry about the confusion. I thought you could alter stuff through the Tab Center Redux Custom Stylesheet box, I wonder what it's for, then?
@avamk If that was possible then the extension could just always have the CSS for hiding the default tab strip included. The custom stylesheet thing is for restyling the sidebar if you don't like the default look.
I've got a slightly improved userChrome.css
that hides the top tabs and the black bar (merging the window controls in) and hides the sidebar header only if the tabs are showing there. Seems to work fine in fullscreen/private/etc modes.
This is OSX only!
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://browser/content/browser.xul") {
#TabsToolbar { visibility: collapse !important; }
#main-window:not([drawtitle="true"]):not([inFullscreen="true"]) #nav-bar { border-left: 70px solid var(--toolbar-bgcolor); }
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] sidebarheader { visibility: collapse !important; }
}
@mmastrac Thank you, this looks sweet af.
Win10 version of @mmastrac 's stylesheet, add this as /chrome/userChrome.css
(tested with the included dark theme in compact mode)
note that the alignment is not perfect yet...
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://browser/content/browser.xul") {
#TabsToolbar { visibility: collapse !important; }
#main-window:not([drawtitle="true"]):not([inFullscreen="true"]) #nav-bar { border-right: 140px solid var(--toolbar-bgcolor); }
#titlebar{
margin-bottom: -29px !important;
}
#titlebar-buttonbox{
height: 29px !important;
border-bottom: 0px !important;
vertical-align: middle;
z-index: 2 !important;
}
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] sidebarheader { visibility: collapse !important; }
}
Hello,
I discovered that whenever I toggle off or disable this app, all my tabs disappear.
I'd like to know if this is the expected behavior or if it is a bug. (I have hidden the tabs bar with the suggested chrome CSS file)
Best regards, Gabriela QA Mozilla Hispano Team Responsible
http://www.mozilla-hispano.org
On 26 December 2017 at 10:43, xlf1024 notifications@github.com wrote:
Win10 version of @mmastrac https://github.com/mmastrac 's stylesheet, add this as /chrome/userChrome.css (tested with the included dark theme in compact mode) note that the alignment is not perfect yet...
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); @-moz-document url("chrome://browser/content/browser.xul") {
TabsToolbar { visibility: collapse !important; }
main-window:not([drawtitle="true"]):not([inFullscreen="true"]) #nav-bar { border-right: 140px solid var(--toolbar-bgcolor); }
titlebar{
margin-bottom: -29px !important;
}
titlebar-buttonbox{
height: 29px !important; border-bottom: 0px !important; vertical-align: middle; z-index: 2 !important;
} }
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/eoger/tabcenter-redux/issues/15#issuecomment-353970267, or mute the thread https://github.com/notifications/unsubscribe-auth/ACDVaLd9vN5w4IPLFA59u3vXtq_u30QYks5tEPgAgaJpZM4Nwvk9 .
@gaby2300 Yes, the User Style Sheets don't check in any way, whether or not the Addon is actually active, they just hide the horizontal tabs all the time, so this is expected, though not optimal at all. (Is this what you meant?) Still, they are just a workaround until the respective APIs get exposed for eoger to support hiding directly from the addon.
@eoger xlf1024 Many thanks for such a quick reply! What if I don't mind recovering the horizontal tabs? Should I erase the chrome CSS file?
@gaby2300 Yes, just erase it or delete the rules you copied from here (if there are more than those in it). (and restart FF)
@xlf1024 Will do, thanks! Just a question: whenever the respective APIs get exposed for eoger to support hiding directly from the addon, will this issue be updated accordingly or is there another issue I should follow?
@gaby2300 Yeah, seems like it would be this issue :)
@dos1 Great, thanks!
@RalfJung @eoger I personally use:
#TabsToolbar {
visibility: collapse;
}
But then, it’s much less obvious when you’re in private browsing mode.
In order to deal with https://github.com/eoger/tabcenter-redux/issues/276 while still mostly hiding the default top tab strip, I've just started using the following which shrinks the top tab bar and then on hover shows it giving me access to the context menu. Not perfect, but seems like a start at a temporary fix for me.
:root {
--tab-min-height: 5px !important;
}
#TabsToolbar {
/* visibility: collapse !important; */
height:5px !important;
min-height: 5px !important;
}
#TabsToolbar:hover {
height:40px !important;
transition-delay: 1s;
}
@jronallo actually, I implemented it such that when I press ALT key to reveal the menu bar, it displays the tab strip using the CSS sibling selector. Otherwise, it stays hidden. Of course this only works in systems that hide the menu bar.
@lopis Which solution are you using? I'd like to try to see if it works on Linux.
Sure, here's how I do it:
/* Hides the tab strip when the menu bar is hidden */
#toolbar-menubar[inactive="true"] + #TabsToolbar {
visibility: collapse !important;
}
More info how to apply this change... and another tweaks:
https://github.com/eoger/tabcenter-redux/wiki/Custom-CSS-tweaks
Sweet, thanks guys!! Here's my CSS working well on Ubuntu 18.04.01 Mate on Black theme. Note that I like to keep the Sidebar header to switch between Bookmarks, History and open Tabs.
/ Applies a black theme to all Sidebar options /
background: #333 !important; color: #EEE !important; }
/ Reduces the height of the Sidebar Header and applies a dark theme /
background: #444 !important; color: #EEE !important; font-size: 12px !important; margin-top: -8px !important; margin-bottom: -8px !important; }
/ Hides the tab strip when the menu bar is hidden /
visibility: collapse !important; }
Win10 version of @mmastrac 's stylesheet, add this as
/chrome/userChrome.css
(tested with the included dark theme in compact mode) note that the alignment is not perfect yet...@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); @-moz-document url("chrome://browser/content/browser.xul") { #TabsToolbar { visibility: collapse !important; } #main-window:not([drawtitle="true"]):not([inFullscreen="true"]) #nav-bar { border-right: 140px solid var(--toolbar-bgcolor); } #titlebar{ margin-bottom: -29px !important; } #titlebar-buttonbox{ height: 29px !important; border-bottom: 0px !important; vertical-align: middle; z-index: 2 !important; } #sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] sidebarheader { visibility: collapse !important; } }
This was perfect for me, but it no longer works with the latest update. Window buttons just don't display. I fixed it as follows:
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://browser/content/browser.xul") {
#main-window:not([drawtitle="true"]):not([inFullscreen="true"]) #nav-bar { border-right: 140px solid var(--toolbar-bgcolor); }
#titlebar {
margin-bottom: -31px !important;
}
#tabbrowser-tabs[orient="horizontal"] {
visibility: collapse !important;
}
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] sidebarheader { visibility: collapse !important; }
}
Very slick. At least until they break it again.
This broke on OSX as well with Firefox 64 or 65 beta.
I adapted @FrobtheBuilder's modifications, but I can't figure out how to get rid of the tiny titlebar...
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://browser/content/browser.xul") {
#tabbrowser-tabs[orient="horizontal"] { visibility: collapse !important; }
#main-window:not([drawtitle="true"]):not([inFullscreen="true"]) #nav-bar { solid var(--toolbar-bgcolor); }
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] sidebarheader { visibility: collapse !important; }
}
Alright, managed to get it passable on OSX:
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://browser/content/browser.xul") {
#TabsToolbar * { background-color: var(--toolbar-bgcolor) }
#tabbrowser-tabs[orient="horizontal"] { visibility: collapse !important; }
#main-window:not([drawtitle="true"]):not([inFullscreen="true"]) #nav-bar {
position: absolute !important; top: 0; left: 0; right: 0; margin-left: 74px; margin-right: 32px
}
#main-window:not([drawtitle="true"]):not([inFullscreen="true"]) #navigator-toolbox { background-color: var(--toolbar-bgcolor) }
#main-window:not([drawtitle="true"]):not([inFullscreen="true"]) #PersonalToolbar { margin-top: 14px }
#PanelUI-button { position: absolute; right: -32px; top: 0 }
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] sidebarheader { visibility: collapse !important; }
}
It's going to be bit more fragile than the previous styles. Anyone feel like cleaning this up a bit? :)
The solution from @mmastrac no longer seems to work on macOS. It's really broken looking in the latest nightly, which means it will be broken in normal firefox soon at the very least.
@FrobtheBuilder Still sort of working for me on 67beta on macOS. It has an annoying black box that I wasn't able to get rid of and the buttons aren't where I'd like them to be though.
I think there is some weirdness in Nightly in general (caveat: I haven't investigated other than noticing that the "Dark" theme doesn't work in the default tab strip anymore, but does in the Tab Center panel)
Anyone else having issues with the tab strip reappearing in Firefox Nightly 69? I have the new toolkit.legacyUserProfileCustomizations.stylesheets
in about:config
set to true
, so that doesn't seem to be the problem.
@jplatte I’m on Linux and it’s working fine with latest Nightly. What CSS code do you use to (try to) hide the tabstrip?
Same as you, apparently (https://github.com/eoger/tabcenter-redux/issues/15#issuecomment-361568245). I've also tried to add the xul namespace thing + hiding #tabbrowser-tabs[orient="horizontal"]
, but that didn't change anything.
I'm on Linux too, with some experimental features enabled on top of using Nightly (WebRender + direct Wayland support), but I don't see how that would affect custom stylesheets.
This broke on another setup of mine after updating from 69.0a1 (2019-05-21) to 69.0a1 (2019-05-27) (Build ID 20190527215312
).
Public service announcement: If you're using nightly and already made the about:config change but your userchrome customization still isn't working, you need to change the @-moz-document
selector from browser.xul
to browser.xhtml
. I was struggling with this issue for a while but I finally found the solution.
macOS example:
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://browser/content/browser.xhtml") {
#tabbrowser-tabs[orient="horizontal"] { visibility: collapse !important; }
#main-window:not([drawtitle="true"]):not([inFullscreen="true"]) #nav-bar { solid var(--toolbar-bgcolor); }
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] sidebarheader { visibility: collapse !important; }
}
This should work for all other OS variants as well. See https://bugzilla.mozilla.org/show_bug.cgi?id=1534407.
@jplatte this might solve your problem.
I don’t use @-moz-document and it works. What’s the point of using at all?
Probably the biggest and most important blocker. Bug at https://bugzilla.mozilla.org/show_bug.cgi?id=1332447