mrotherguy / firefox-csshacks Goto Github PK

@-moz-document url("about:home"),url("about:blank"),url("about:newtab"),url("about:privatebrowsing"){
  body{ background-color: #000 !important }
  html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay {
    background: #000 !important;
  }
}

@-moz-document url(chrome://browser/content/browser.xul) {
   browser[type="content"], browser { background: #000 !important; }
}

body{ --newtab-background-color: #000000 !important }

/*
 * Edit this file and copy it as userChrome.css into your
 * profile-directory/chrome/
 */

/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/* This enables the use of JS external files */
toolbarbutton#alltabs-button {
    -moz-binding: url("userChrome.xml#js")}

/*
 * Some possible accessibility enhancements:
 */
/*
 * Make all the default font sizes 20 pt:
 *
 * * {
 *   font-size: 20pt !important
 * }
 */
/*
 * Make menu items in particular 15 pt instead of the default size:
 *
 * menupopup > * {
 *   font-size: 15pt !important
 * }
 */
/*
 * Give the Location (URL) Bar a fixed-width font
 *
 * #urlbar {
 *    font-family: monospace !important;
 * }
 */

/*
 * Eliminate the throbber and its annoying movement:
 *
 * #throbber-box {
 *   display: none !important;
 * }
 */

/*
 * For more examples see http://www.mozilla.org/unix/customizing.html
 */
 
/* Makes tabs to appear on multiple lines */
/* Tab reordering will not work and can't be made to work */
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/

/* It's recommended to move tabs new-tab-button outside tabs toolbar */

/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll  */
/* This maximum visible rows won't work before Fx66 */
/* So this setting does nothing on Fx65 and all tab rows will be shown */
:root{
    --multirow-n-rows: 3;
    --multirow-tab-min-width: 150px;
    --multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}

/* Scrollbar can't be clicked but the rows can be scrolled with mouse wheel */
/* Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */

/* .tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */

/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */

#tabbrowser-tabs{
  min-height: unset !important;
  padding-inline-start: 0px !important
}
/* Selectors for Firefox 71+ */
/* These are not tabs toolbar specific but horizontal scrollbox isn't used elsewhere, except in bookmarks toolbar but there it doesn't have [part] attribute since it's not in shadow-root */
@-moz-document url(chrome://browser/content/browser.xhtml){
  .scrollbutton-up[orient="horizontal"][part]~spacer,
  .scrollbutton-up[orient="horizontal"][part],
  .scrollbutton-down[orient="horizontal"][part]{ display: none }

  scrollbox[part][orient="horizontal"]{
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: calc(var(--tab-min-height) * var(--multirow-n-rows));
    scrollbar-color: currentColor transparent;
    scrollbar-width: thin;
  }
}

/* Test for Firefox > 66 */
@supports (inset-block:auto){
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: calc(var(--tab-min-height) * var(--multirow-n-rows));
    scrollbar-color: var(--toolbar-bgcolor) var(--lwt-accent-color);
    scrollbar-width: thin;
  }
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    overflow: -moz-hidden-unscrollable;
    display: block;
  }
}

/* Test for Firefox < 66 */
@supports not (inset-block:auto){
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox{
    min-height: unset !important;
  }
  #tabbrowser-tabs .scrollbox-innerbox{
    display: flex;
    flex-wrap: wrap;
  }
  #tabbrowser-tabs .arrowscrollbox-scrollbox {
    overflow: -moz-hidden-unscrollable;
    display: block;
  }
}

.tabbrowser-tab{ height: var(--tab-min-height); }
#tabbrowser-tabs .tabbrowser-tab[pinned]{
  position: static !important;
  margin-inline-start: 0px !important;
}

.tabbrowser-tab[fadein]:not([pinned]){
  min-width: var(--multirow-tab-min-width) !important;
  flex-grow: var(--multirow-tab-dynamic-width);
  /*
  Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
  Don't set to none or you'll see errors in console when closing tabs
  */
  /*max-width: 100vw !important;*/
}

.tabbrowser-tab > stack{ width: 100%; height: 100% }

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-tabs spacer,
.tabbrowser-tab::after{ display: none !important }

// ==UserScript==
// @name           MultiRowTab-scrollable.uc.js
// @namespace      http://space.geocities.yahoo.co.jp/gl/alice0775
// @description    Multi-row tabs draggability fix, Experimental CSS version
// @include        main
// @compatibility  Firefox 67
// @author         Alice0775, Endor8, TroudhuK, Izheil
// @version        23/03/2019 22:25 Comments on tab width
// @version        09/03/2019 15:38 Fixed compatibility issue with Tab Session Manager addon
// @version        18/02/2019 20:46 Tab line not being fully shown on maximized or fullscreen
// @version        03/02/2019 15:15 Firefox 67
// @version        03/02/2019 04:22 Fixed issue with scrolling when selecting non-visible tab
// @version        02/02/2019 00:17 Fixed transparent line under tabs and touch density tabs issue
// @version        01/02/2019 10:32 Fixed issue window dragging while keeping scrollbar dragging
// @version        31/01/2019 10:32 Fixed issue with fullscreen
// @version        30/01/2019 02:05 Fixed issue with a pixel being above the tab bar
// @version        30/11/2018 06:12 Now only the necesary rows appear, not static number of rows
// @version        23/11/2018 00:41 Firefox 65
// ==/UserScript==
    zzzz_MultiRowTabLite();
function zzzz_MultiRowTabLite() {
    var css =`
    /* MULTIROW TABS CSS */
    /* You can set the max number of rows before the scrollbar appears here.

     - For tab minimum width, you have to go to about:config and modify [browser.tabs.tabMinWidth] 
       to the value you want.

     - For tab growth v 
        Value of 1 -> Tab grows. Fixed max width of 226px.
        Value of 0 -> Tab doesn't grow. Uses tab min width as fixed width. */

    :root {
        --max-tab-rows: 3;
        --tab-growth: 1}

    .tabbrowser-tab:not([pinned]) {
        flex-grow: var(--tab-growth)}

    .tabbrowser-tab::after {border: none !important}

    #tabbrowser-tabs .tab-background, #tabbrowser-tabs .tabbrowser-tab {
        height: calc(var(--tab-min-height) + 1px) !important}

    #main-window[sizemode="normal"] .tabbrowser-tab .tab-line,
    #main-window[sizemode="maximized"] .tabbrowser-tab .tab-line, 
    #main-window[sizemode="fullscreen"] .tabbrowser-tab .tab-line {transform: translate(0,1px) !important}
    
    :root[uidensity="touch"] .tabbrowser-tab,
    :root[uidensity="touch"] .tab-background {
        min-height: calc(var(--tab-min-height) + 3px) !important}

    .tab-stack {width: 100%}

    :root[uidensity="touch"] #tabbrowser-tabs .scrollbox-innerbox {    
        min-height: calc(var(--tab-min-height) + 3px);
        max-height: calc((var(--tab-min-height) + 3px)*var(--max-tab-rows))}

    #tabbrowser-tabs .arrowscrollbox-scrollbox {
        display: flex;
        flex-wrap: wrap; 
        overflow-x: hidden;
        overflow-y: auto;     
        min-height: var(--tab-min-height);
        max-height: calc(var(--tab-min-height)*var(--max-tab-rows))}

    #tabbrowser-tabs .tabbrowser-arrowscrollbox {
        overflow: visible;
        display: block;}

    .arrowscrollbox-overflow-start-indicator,
    .arrowscrollbox-overflow-end-indicator {position: fixed !important}

    #main-window[tabsintitlebar] #tabbrowser-tabs scrollbar {
        -moz-window-dragging: no-drag}

    @media (-moz-os-version: windows-win10) {
    .titlebar-buttonbox, #titlebar-buttonbox {display: block !important; height:var(--tab-min-height) !important}}

    #tabbrowser-tabs .scrollbutton-up, #tabbrowser-tabs .scrollbutton-down, #alltabs-button
    {display: none}
    `;
    var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
    var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
    gBrowser.tabContainer._getDropIndex = function(event, isLink) {
        var tabs = this.childNodes;
        var tab = this._getDragTargetTab(event, isLink);
        if (window.getComputedStyle(this).direction == "ltr") {
        	for (let i = tab ? tab._tPos : 0; i < tabs.length; i++) {
                let boxObject = tabs[i].boxObject;
        		if (event.screenX < boxObject.screenX + boxObject.width / 2
                 && event.screenY < boxObject.screenY + boxObject.height) // multirow fix
        			return i;
            }
        } else {
        	for (let i = tab ? tab._tPos : 0; i < tabs.length; i++) {
                let boxObject = tabs[i].boxObject;
        		if (event.screenX > boxObject.screenX + boxObject.width / 2
                 && event.screenY < boxObject.screenY + boxObject.height) // multirow fix
        			return i;
            }
        }
        return tabs.length;
    };

// This scrolls down to the current tab when you open a new one, or restore a session.
function scrollToView() {
	var selTab = document.querySelectorAll(".tabbrowser-tab[selected='true']")[0];
    var selTab = document.querySelectorAll(".tabbrowser-tab[selected='true']")[0];
	selTab.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"});
}

gBrowser.tabContainer.addEventListener('TabOpen', scrollToView, false);
gBrowser.tabContainer.addEventListener("TabSelect", scrollToView, false);
document.addEventListener("SSTabRestoring", scrollToView, false);

// This sets when to apply the fix (by default a new row starts after the 23th open tab, unless you changed the min-size of tabs)
gBrowser.tabContainer.ondragstart = function(){if(gBrowser.tabContainer.clientHeight > document.getElementsByClassName("tabbrowser-tab")[0].clientHeight) {

    gBrowser.tabContainer._getDropEffectForTabDrag = function(event){return "";}; // multirow fix: to make the default "dragover" handler does nothing
    gBrowser.tabContainer._onDragOver = function(event) {
        event.preventDefault();
        event.stopPropagation();

        var ind = this._tabDropIndicator;

        var effects = orig_getDropEffectForTabDrag(event);
        if (effects == "link") {
        	let tab = this._getDragTargetTab(event, true);
        	if (tab) {
        		if (!this._dragTime)
        			this._dragTime = Date.now();
        		if (!tab.hasAttribute("pending") && // annoying fix
                    Date.now() >= this._dragTime + this._dragOverDelay)
        			this.selectedItem = tab;
        		ind.collapsed = true;
        		return;
        	}
        }

        var newIndex = this._getDropIndex(event, effects == "link");
        if (newIndex == null)
            return;

        var ltr = (window.getComputedStyle(this).direction == "ltr");
        var rect = this.arrowScrollbox.getBoundingClientRect();
        var newMarginX, newMarginY;
        if (newIndex == this.childNodes.length) {
            let tabRect = this.childNodes[newIndex - 1].getBoundingClientRect();
            if (ltr)
                newMarginX = tabRect.right - rect.left;
            else
                newMarginX = rect.right - tabRect.left;
            newMarginY = tabRect.top + tabRect.height - rect.top - rect.height; // multirow fix
        } else {
            let tabRect = this.childNodes[newIndex].getBoundingClientRect();
            if (ltr)
                newMarginX = tabRect.left - rect.left;
            else
                newMarginX = rect.right - tabRect.right;
            newMarginY = tabRect.top + tabRect.height - rect.top - rect.height; // multirow fix
        }

        ind.collapsed = false;

        newMarginX += ind.clientWidth / 2;
        if (!ltr)
            newMarginX *= -1;

        ind.style.transform = "translate(" + Math.round(newMarginX) + "px," + Math.round(newMarginY) + "px)"; // multirow fix
        ind.style.marginInlineStart = (-ind.clientWidth) + "px";
    };
    gBrowser.tabContainer.addEventListener("dragover", gBrowser.tabContainer._onDragOver, true);

    gBrowser.tabContainer.onDrop = function(event) {
        var newIndex;
        var dt = event.dataTransfer;
        var draggedTab;
        if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) {
            draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
            if (!draggedTab)
                return;
        }
        var dropEffect = dt.dropEffect;
        if (draggedTab && dropEffect == "copy") {}
        else if (draggedTab && draggedTab.parentNode == this) {
            newIndex = this._getDropIndex(event, false);
            if (newIndex > draggedTab._tPos)
                newIndex--;
            gBrowser.moveTabTo(draggedTab, newIndex);
        }
    };
    gBrowser.tabContainer.addEventListener("drop", function(event){this.onDrop(event);}, true);
}}}

// copy of the original and overrided _getDropEffectForTabDrag method
function orig_getDropEffectForTabDrag(event) {
    var dt = event.dataTransfer;
    if (dt.mozItemCount == 1) {
        var types = dt.mozTypesAt(0);
        // tabs are always added as the first type
        if (types[0] == TAB_DROP_TYPE) {
            let sourceNode = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
            if (sourceNode instanceof XULElement &&
                sourceNode.localName == "tab" &&
                sourceNode.ownerGlobal.isChromeWindow &&
                sourceNode.ownerDocument.documentElement.getAttribute("windowtype") == "navigator:browser" &&
                sourceNode.ownerGlobal.gBrowser.tabContainer == sourceNode.parentNode) {
                // Do not allow transfering a private tab to a non-private window
                // and vice versa.
                if (PrivateBrowsingUtils.isWindowPrivate(window) !=
                    PrivateBrowsingUtils.isWindowPrivate(sourceNode.ownerGlobal))
                    return "none";

                if (window.gMultiProcessBrowser !=
                    sourceNode.ownerGlobal.gMultiProcessBrowser)
                    return "none";

                return dt.dropEffect == "copy" ? "copy" : "move";
            }
        }
    }

    if (browserDragAndDrop.canDropLink(event)) {
        return "link";
    }
    return "none";
}

/* Disable Middle Click Tab Bar */
#tabbrowser-tabs :-moz-any(.arrowscrollbox-scrollbox, .tabbrowser-arrowscrollbox) {pointer-events: none}
.tabbrowser-tab, #tabs-newtab-button, .tabs-newtab-button {pointer-events: auto}
.scrollbutton-up, .scrollbutton-down {pointer-events:auto !important}
.new-tab-popup, .new-tab-popup > * {pointer-events: auto}

window_control__placeholder_support.css
overlay_menubar.css
Fx65_tabs_on_bottom.css
multi-row_tabs.css

$ git branch -v
* master 2062bd2 apply window margin to body > box instead of :root
$ firefox --version
Mozilla Firefox 76.0
$ lsb_release -r
Release:        16.04

panel[popupid="password"]
{
  display: none !important;
}

#titlebar{
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
}

#titlebar{
-moz-box-ordinal-group: 0;
-moz-appearance: none !important;
}

print-preview-toolbar,
#printedit-toolbar,
#titlebar {
  -moz-box-ordinal-group: 0;
}
#navigator-toolbox #toolbar-menubar {
  -moz-box-ordinal-group: 1;
}
/* navigation toolbar */
#navigator-toolbox #nav-bar {
  -moz-box-ordinal-group: 2;
}
/* bookmarks toolbar */
#navigator-toolbox #PersonalToolbar {
  -moz-box-ordinal-group: 3;
}
/* 3rd party toolbars */
#navigator-toolbox toolbar {
  -moz-box-ordinal-group: 10;
}
/* tabs toolbar */
#navigator-toolbox #TabsToolbar {
  -moz-box-ordinal-group: 100;
}