UserChrome-Tweaks VS docco

I've done some weird things with licenses as some of the titlebar code is borrowed from the Timvde user tweaks repo but everyone is credited.

Upd. Manage to solve it thanks to : https://github.com/Timvde/UserChrome-Tweaks

There seems to be a separate css for windows. Can't really test it now but here it is https://github.com/Timvde/UserChrome-Tweaks/blob/master/tabs/hide-tabs-windows.css

/* TABS: on bottom - Firefox 65 and later */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) { -moz-box-ordinal-group: 10 !important; } #TabsToolbar { -moz-box-ordinal-group: 1000 !important; display: block !important; position: absolute !important; bottom: 0 !important; /* width: 100vw !important; */ } :root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar{ bottom: var(--tab-min-height) !important; padding-top: calc(var(--tab-min-height) - 20px) !important; /* may need adjustment */ } #tabbrowser-tabs { width: 100vw !important; } :root:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: calc(var(--tab-min-height) + 1px); /* may need adjustment */ } /* TABS: height */ :root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /* adjust */ } :root #tabbrowser-tabs { --tab-min-width: 80px !important; /* adjust */ } #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { min-height: var(--tab-min-height) !important; max-height: var(--tab-min-height) !important; } #TabsToolbar { height: var(--tab-min-height) !important; margin-bottom: 1px !important; box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */ background-color: var(--toolbar-bgcolor) !important; color: var(--toolbar-color) !important; } /* indicators */ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} /* drag space */ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] { width: 20px !important; } /* Override vertical shifts when moving a tab */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } #navigator-toolbox[movingtab] #tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; } #navigator-toolbox[movingtab] > #nav-bar { margin-top: unset !important; } /* windows controls - hide */ #TabsToolbar #window-controls {display: none !important;} /* caption box - hide */ :root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {display: none !important;} /* move caption buttons to right of Tab bar */ #main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container { position: fixed !important; right: 0 !important; top: calc(6px + var(--tab-min-height)) !important; display: block !important; visibility: visible !important; } #toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;} /* URL bar on same level as Menu Bar */ :root{ --uc-navbar-height: 32px; } #TabsToolbar{-moz-box-ordinal-group: 2;} #toolbar-menubar{ height: var(--uc-navbar-height); background-color: var(--toolbar-bgcolor); } #nav-bar{ padding-right: 144px; margin-top: calc(var(--uc-navbar-height) * -1); margin-left: 300px; background-color: transparent !important; } /* Black background when loading new page */ browser { background-color: #000 !important; } /* tabs on bottom #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} */ /* Change the tab-bar height tab {height: 20px !important; } .tabbrowser-strip { height: 20px !important; } */ #PanelUI-menu-button { display: none; } #nav-bar-overflow-button { display: none !important;} #back-button, #forward-button { display: none; } /* * Make the toolbar extra-compact (similar to v56 with CTR) * Applies to Compact density * Contributor(s): Alex Vallat * https://github.com/Timvde/UserChrome-Tweaks/blob/master/toolbars/compact-toolbars.css */ :root[uidensity=compact] #urlbar, :root[uidensity=compact] .searchbar-textbox { font-size: unset !important; min-height: 24px !important; } :root[uidensity=compact] #identity-box { max-height: 22px; } :root[uidensity=compact] #nav-bar .toolbarbutton-1 { padding: 0px !important; } /* Compatibility with auto-hide.css */ :root[uidensity=compact] #navigator-toolbox { --nav-bar-height: 31px !important; }

But I got it to work by replacing the original context menu section (lines 34~574) with this css code

Hi everyone, I've been going over my entire userchrome since FF updated to 89 today, I cant seem to work out how to change the context menus background, it seems there is a new element that supersedes older css for the context menus, if you were to try this https://github.com/Timvde/UserChrome-Tweaks/blob/master/context-menu/dark-thin-context-menu.css

If you need to tweak firefox interface more, these resources will help:

https://www.reddit.com/r/FirefoxCSS/

https://github.com/MrOtherGuy/firefox-csshacks

https://github.com/Timvde/UserChrome-Tweaks

Timvde/UserChrome-Tweaks - A community maintained repository of userChrome.css tweaks for Firefox

i have seen those in annotated javascript documentation. but it was the other way around. (comment on the left, and code on the right).

they all seem to use docco[0] with the option to display comment in "parallel". the author of docco used it in their library underscore[1].

[0]: https://github.com/jashkenas/docco

Side note - it's been a while since i've seen a Docco-style annotated-source-style documentation! http://ashkenas.com/docco/

Backbone.js was the first time i saw it, and I loved it! https://backbonejs.org/docs/backbone.html It demonstrated to me that the libraries I use are just normal code that other people write, and i myself can read it to understand a problem.

jashkenas/docco - Literate Programming can be Quick and Dirty.