Skip Navigation

You're viewing a single thread.

204 comments

  • Firefox with tree style tabs, with the user CSS that removes tabs and combines bookmarks bar into the title bar.

    Away from computer right now but I'll take a screenshot in an hour or so.

    And Emacs. :)

    Back at my computer now!

    OK, here's my screenshot:

    So, you can see the tree style tabs (TST) in the sidebar area on the left. I'm using the "photon" theme for TST. with another extension for TST called TST Colored Tabs. If you middle-button-click a link, it's opened in a new tab like usual, but TST also assigns it as a child tab of the page you were viewing. It's incredibly useful for keeping track of where you are and what you're doing. Especially in my DevOps job, I have dozens of tabs open and chaos would reign supreme if I used top-of-window tabs like standard. You can see the bookmarks toolbar has been dragged up into the title bar using the customize toolbar window accessed by right clicking on the title bar.

    To accomplish this you need to enable a setting in about:config called toolkit.legacyUserProfileCustomizations.stylesheets, set that to true. Then exit Firefox.

    Then create a directory called chrome in your profile directory, which on Linux is in ~/.mozilla/firefox/PROFILENAME/, which you can get from the about:profiles page. Inside the chrome directory, you create a file called userChrome.css and add this stuff to it: 

     css
        
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

/*
    Display the status bar in Firefox Quantum (version 61+)
    permanently at the bottom of the browser window.
    Code below works best for the Dark Firefox theme and is based on:
    https://github.com/MatMoul/firefox-gui-chrome-css/blob/master/chrome/userChrome.css
    This userChrome.css file was last modified on: 28-Jun-2018.
    Tested to work with Firefox 61 on Windows.
    Related blog post: http://www.optimiced.com/en/?p=1727
*/

#browser-bottombox {
  height: 20px;
  border-top: solid 1px #505050;
}

.browserContainer>#statuspanel {
  left: 4px !important;
  bottom: 0px;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

.browserContainer>#statuspanel>#statuspanel-inner>#statuspanel-label {
  margin-left: 0px !important;
  border: none !important;
  padding: 0px !important;
  color: #EEE !important;
  background: #333 !important;
}

window[inFullscreen="true"] #browser-bottombox {
  display: none !important;
}

window[inFullscreen="true"] .browserContainer>#statuspanel[type="overLink"] #statuspanel-label {
  display: none !important;
}

/*
  Begin section to move system UI buttons to the same UI bar/box
  as the addressbar
*/

/* Adding empty space for buttons */
#nav-bar {
    margin-right:100px;
}

/* For dragging whole window by mouse*/
#titlebar {
    appearance: none !important;
    height: 0px;
}

/*
  Fix for main menu calling by Alt button
  THIS BREAKS THE UI!!
  */
/* #titlebar > #toolbar-menubar {
    margin-top: 10px;
} */

/* Move minimize/restore/close buttons to empty space */
#TabsToolbar > .titlebar-buttonbox-container {
    display: block;
    position: absolute;
    top: 5px;
    right: 1px;
}

    And there you go! TST has more tips and configuration details in its Github project: https://github.com/piroor/treestyletab and https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#for-userchromecss

204 comments