I've become so used to using side tabs (TreeStyleTabs) in Firefox, that it's somewhat painful to use any other browser in more than a passing manner.  My work laptop was just replaced, and I had to back into this configuration again, so I figured this is a good time to document it.  Drawing from several sources (linked at the bottom).

  1. In a terminal window, create your chrome Firefox profile directory:
    mkdir -pv ~/Library/Application\ Support/Firefox/Profiles/*.default/chrome
    and your personal chrome file:
    touch ~/Library/Application\ Support/Firefox/Profiles/*.default/chrome/userChrome.css
  2. Install the TreeStyleTab plugin (https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/)
  3. In Firefox, Press Cmd + Opt + I
  4. Click on the cog icon (Settings) in the upper right (may be inside the hamburger menu)
  5. In Advanced Settings, check "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging"
  6. Restart Firefox
  7. Press Cmd + Opt + Shift + I
  8. In the resulting permission dialog, click "OK" to enable remote debugging
  9. Choose the "Style Editor" tab and find userChrome.css in the left pane
  10. Add the following content to userChrome.css and confirm the appearance is as desired:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Hide top tabs, but not window controls.  Slide everything over to make space for window controls */
#TabsToolbar > .toolbar-items,
#TabsToolbar > .titlebar-spacer { visibility: hidden }
#nav-bar { margin-top: -32px; padding: 0px 15px 0px 75px !important; }

/* Hide the sidebar header */
#sidebar-header {
    visibility: collapse;