eoger commented 7 years ago

Probably the biggest and most important blocker. Bug at https://bugzilla.mozilla.org/show_bug.cgi?id=1332447

Smile4ever commented 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

mlissner commented 7 years ago

Are there any workarounds for this? I'd be more inclined to test if I could hide the top tabs.

Keith94 commented 7 years ago

@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.

lopis commented 6 years ago

@Keith94 This fix should be ni the readme, really.

april commented 6 years ago

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.

mlissner commented 6 years ago

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.

eoger commented 6 years ago

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;
}

rcchen commented 6 years ago

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!

jhasse commented 6 years ago

This should have the D-tabcenter-parity label, right?

brandonchartier commented 6 years ago

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;
  }
}

RalfJung commented 6 years ago

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.

ugggf commented 6 years ago

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?

ffledgling commented 6 years ago

@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.

dos1 commented 6 years ago

Also, see https://github.com/eoger/tabcenter-redux/wiki/Custom-CSS-tweaks

ugggf commented 6 years ago

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.

lopis commented 6 years ago

@ugggf Ctrl+Alt+Shift+I is your best friend to find which chrome elements and which styles to change ;)

hkmix commented 6 years ago

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.

macOS merged title bar

avamk commented 6 years ago

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?

jplatte commented 6 years ago

@avamk The custom CSS panel is not where you put the CSS. You want userChrome.css.

avamk commented 6 years ago

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?

jplatte commented 6 years ago

@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.

mmastrac commented 6 years ago

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; }
}

panosl commented 6 years ago

@mmastrac Thank you, this looks sweet af.

xlf1024 commented 6 years ago

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; }
}

gaby2300 commented 6 years ago

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 .

xlf1024 commented 6 years ago

@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.

gaby2300 commented 6 years ago

@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?

xlf1024 commented 6 years ago

@gaby2300 Yes, just erase it or delete the rules you copied from here (if there are more than those in it). (and restart FF)

gaby2300 commented 6 years ago

@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?

dos1 commented 6 years ago

@gaby2300 Yeah, seems like it would be this issue :)

gaby2300 commented 6 years ago

@dos1 Great, thanks!

ariasuni commented 6 years ago

@RalfJung @eoger I personally use:

#TabsToolbar {
  visibility: collapse;
}

But then, it’s much less obvious when you’re in private browsing mode.

jronallo commented 6 years ago

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;
}

lopis commented 6 years ago

@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.

jronallo commented 6 years ago

@lopis Which solution are you using? I'd like to try to see if it works on Linux.

lopis commented 6 years ago

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;
}

danielmotaleite commented 6 years ago

More info how to apply this change... and another tweaks:

https://github.com/eoger/tabcenter-redux/wiki/Custom-CSS-tweaks

gbaderg commented 5 years ago

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 /

sidebar-box {

background: #333 !important; color: #EEE !important; }

/ Reduces the height of the Sidebar Header and applies a dark theme /

sidebar-box #sidebar-header {

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 /

toolbar-menubar[inactive="true"] + #TabsToolbar {

visibility: collapse !important; }

FrobtheBuilder commented 5 years ago

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.

mmastrac commented 5 years ago

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; }
}

mmastrac commented 5 years ago

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? :)

FrobtheBuilder commented 5 years ago

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.

mmastrac commented 5 years ago

@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.

gtback commented 5 years ago

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)

jplatte commented 5 years ago

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.

ariasuni commented 5 years ago

@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?

jplatte commented 5 years ago

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.

jplatte commented 5 years ago

This broke on another setup of mine after updating from 69.0a1 (2019-05-21) to 69.0a1 (2019-05-27) (Build ID 20190527215312).

FrobtheBuilder commented 5 years ago

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.

ariasuni commented 5 years ago

I don’t use @-moz-document and it works. What’s the point of using at all?

eoger / tabcenter-redux

Hide the default tab strip #15

TabsToolbar { visibility: collapse !important; }

main-window:not([drawtitle="true"]):not([inFullscreen="true"]) #nav-bar { border-right: 140px solid var(--toolbar-bgcolor); }

titlebar{

titlebar-buttonbox{

sidebar-box {

sidebar-box #sidebar-header {

toolbar-menubar[inactive="true"] + #TabsToolbar {