Window controls

[Xanaxus]

Hey, love your work.

I usually don't use the title bar, so it will be nice if I can get it back when I'm using this customization [like the way flyingfox had implemented this] how does one go about doing this?

[drannex42]

I am a little confused. But I'll try to answer this? Maybe?

If you want the minimize/max/close buttons, you will need to click on the hamburger menu (top right) -> More Tools -> Customize Toolbar, and then at the bottom left of the screen enable the titlebar.

I am not a 100% if this is what you are looking for, I am a bit frazzled at the moment but hopefully this helps!

[Mr-nUUb]

Something like this?

step by step guide (not sure if something is missing):

1. remove line

   FirefoxSidebar/userChrome.css

   Line 152 in c0d23fc

   position: relative !important;

2. add following code to your userChrome.css:

/* Client Side Decorations / Window Controls */

/* reserve space for buttons */
#nav-bar {
  margin-right: 92px;
}

/* move buttons next to menu button */
#TabsToolbar .titlebar-buttonbox-container {
  visibility: visible !important;
  position: absolute;
  display:block;
  top: 8px;
  right: 0;
}

/* fix ugly background color */
#navigator-toolbox {
  background-color: #484d51 !important;
}

/* hide buttons in fullscreen mode (video player and F11) */
#main-window[inFullscreen="true"] .titlebar-buttonbox-container,
#main-window[inDOMFullscreen="true"] .titlebar-buttonbox-container {
  /* display: none !important; */
  visibility: hidden !important;
}

/* remove empty space when in fullscreen mode (F11) */
#main-window[inFullscreen="true"] #nav-bar {
  margin-right: 0px !important;;
}

/* END Client Side Decorations / Window Controls */

[Xanaxus]

Yes just like that

I prefer my controls on the left, so I Have made the following adjustment to the above given code.

/* Client Side Decorations / Window Controls */

/* reserve space for buttons */
#nav-bar {
  margin-left: 150px;
}

/* move buttons next to menu button */
#TabsToolbar .titlebar-buttonbox-container {
  visibility: visible !important;
  position: absolute;
  display:block;
  top: 10px;
  left: 50px;
}

/* fix ugly background color */
#navigator-toolbox {
  background-color: #484d51 !important;
}

/* hide buttons in fullscreen mode (video player and F11) */
#main-window[inFullscreen="true"] .titlebar-buttonbox-container,
#main-window[inDOMFullscreen="true"] .titlebar-buttonbox-container {
  /* display: none !important; */
  visibility: hidden !important;
}

/* remove empty space when in fullscreen mode (F11) */
#main-window[inFullscreen="true"] #nav-bar {
  margin-right: 0px !important;;
}

/* END Client Side Decorations / Window Controls */

Thank you @Mr-nUUb

[Mr-nUUb]

@Xanaxus please see my PR for updated code which doesn't involve deleting line #152 ;-)

@drannex42 I hope my PR fits your needs. As I'm not a CSS guru, I don't know how to make all this optional. It seems nested comments aren't possible (to enable/disable everything at once without deleting tons of comments). Maybe we should put it in another file and add something like add contents of userChrome.csd.css to the end of userChrome.css to enable CSD to the readme?

[drannex42]

@Xanaxus @Mr-nUUb I have broken the entire extension into components for easier adding and removal of features, along with a designated preferences folder. I have made a new branch below for testing purposes. I have merged this with the main branch. I have also made it easier to specify if the CSd extension is on the left or right side, and removed the need for that background on the titlebar buttons.

#15 (comment)