Firefox 60 CSD Window Buttons Left

I like the new CSD option (remove title bar) but when activated my window buttons move over to the right (normally on the left). Is there a way to have CSD enabled but with buttons on the left?

Create the file "userChrome.css" and its parent directory "chrome" if they don't already exist:

~/.mozilla/firefox/<YOUR_FIREFOX_PROFILE>/chrome/userChrome.css

Place the following code in userChrome.css
If the line that begins with @namespace is already in your userChrome.css, don't add it a second time.

#TabsToolbar {
  direction: rtl;
}

#tabbrowser-tabs {
  direction: ltr;
}

.titlebar-buttonbox {
  display: flex;
}

.titlebar-min {
  order: 2;
}

.titlebar-max {
  order: 1;
}

.titlebar-close {
  order: 3;
  margin-right: 6px !important;
}

Now restart Firefox and the buttons will be on the left.

Your Firefox profile will look something like this: hej3q2i1.default
If you aren't sure which profile is yours, you can find out by following these steps:

1. Open Firefox
2. Click the menu button
3. Click Help
4. Select Troubleshooting Information
5. Your Firefox profile will be the last directory listed in "Profile Directory"

CSS source: https://gist.github.com/oidualc/9f7c0a6591ada0d391ee6813a518dc3b

In addition to @denshigomi's answer, I added a poperty for the misalignment. This fixes the Apoorv Potnis's issue. You can add this property to userChrome.css file:

#titlebar-close {
  margin-right: 6px !important;
}

Also the gist can be found in here.

Original author of the gist here. The script has been updated because in the latest versions of Firefox Nightly the buttons order has been inverted.

• Type about:support on the URL bar
• Open the "Profile Directory" ( /home/.../.mozilla/firefox/... )
• Create if it doesn't exist already a directory named "chrome"
• Create a file inside (if it doesn't exist already) named userChrome.css
• Append the following code

userChrome.css:

#TabsToolbar {
    direction: rtl;
}

#tabbrowser-tabs {
    direction: ltr;
}

.titlebar-buttonbox {
    display: flex;
}

.titlebar-min {
    order: 2;
}

.titlebar-max {
    order: 1;
}

.titlebar-close {
    order: 3;
    margin-right: 6px !important;
}

Further information can be found here: https://www.userchrome.org/

This works for me after the Firefox 65 update:

(userChrome.css)

#menubar-items {
  -moz-box-ordinal-group: 2;
  margin-left: 30px;
}

.titlebar-buttonbox-container {
  -moz-box-ordinal-group: 1!important;
}

.titlebar-button.titlebar-close {
  -moz-box-ordinal-group: 1;
}

.titlebar-button.titlebar-min {
  -moz-box-ordinal-group: 2;
}

.titlebar-button.titlebar-max {
  -moz-box-ordinal-group: 3;
}

Thanks for the help!

I had to change it a bit, but it's perfect now!

This is my 'userChrome.css' file, now:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#titlebar-max {
  -moz-box-ordinal-group: 0;
}

#titlebar-content {
  direction: rtl;
}

#TabsToolbar {
  direction: rtl;
}

#tabbrowser-tabs {
  direction: ltr;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button:not([selected="true"]) {
  display: -moz-box !important;
}

#menubar-items {
  -moz-box-ordinal-group: 2;
  margin-left: 30px;
}

.titlebar-buttonbox-container {
  -moz-box-ordinal-group: 1!important;
}

.titlebar-button.titlebar-close {
  -moz-box-ordinal-group: 3;
  margin-left: 5px !important;
  margin-right: 6px !important;
}

.titlebar-button.titlebar-min {
  -moz-box-ordinal-group: 2;
}

.titlebar-button.titlebar-max {
  -moz-box-ordinal-group: 1;
}