Vertikale Tableiste mit Autohide...

// ==UserScript==
// @name           zzzz-MultiRowTab_LiteforFx48.uc.js
// @namespace      http://space.geocities.yahoo.co.jp/gl/alice0775
// @description    Experimentelle CSS Version für Mehrzeilige Tableiste
// @include        main
// @compatibility  Firefox 72
// @author         Alice0775
// @version        2016/08/05 00:00 Firefox 48
// @version        2016/05/01 00:01 hide favicon if busy
// @version        2016/03/09 00:01 Bug 1222490 - Actually remove panorama for Fx45+
// @version        2016/02/09 00:01 workaround css for lwt
// @version        2016/02/09 00:00
// Version:        04.07.2020 FireFox 78+ by 'BrokenHeard'
// ==/UserScript==
"use strict";


MultiRowTabLiteforFx();
function MultiRowTabLiteforFx() {

    // User-Settings ---
    var bTabsAutoPopup            = true;      // [true]: 'AutoPopup' für Tabs einschalten, [false]:'AutoPopup' für Tabs auschalten
    var bTabsDown               = true;       // [true]: Tab-Leiste unter allen anderen Toolbars, [false]: Tab-Leiste oben
    var bTabWheel               = false;    // [true]: Tab-Wheel-Selection einschalten, [false]: Tab-Wheel-Selection ausschalten
    var bPageScroll             = true;        // [true]: seitenweises Scrollen, [false]: zeilenweises Scrollen
    
    var nTabsAutoPopupWidth     = 220;        // Breite der 'AutoPopup'-Leiste in Pixeln
    var nTabsAutoPopupHover     = 2;        // Abstand zum FF-Fensterrand in Pixeln, ab dem das Popup-Fenster sichtbar gemacht wird
    var nTabsAutoPopupAnim         = 0.5;        // Dauer der Animation beim 'Herausschieben' des Popups in Sekunden (0 = keine Animation)
    var nTabLines               = 3;         // Anzahl der sichtbaren Tab-Zeilen, darüber hinaus wird gescrollt (!keine Funktion bei 'bTabsAutoPopup=true'!)
    var nTabWidth                = 180;        // Breite der einzelnen Tabs in Pixeln
    var nTabHeight                = 26;        // Höhe der einzelnen Tabs in Pixeln
    var nTabMargin              = 1;         // Abstand zwischen den Tab-Zeilen in Pixeln   
    
    var bTabScrollbar            = true;    // [true] Scrollbar für Tabbar anzeigen, [false] Keine Scrollbar für Tabbar anzeigen
    var bTabCloseButton         = false;    // [true] Tab-Schließen-Button anzeigen, [false] Tab-Schließen-Button verbergen
    var bTabTooltips            = true;     // [true] Tab-Tooltips werden angezeigt, [false] Tab-Tooltips werden nicht angezeigt
    var bDblclickOnTabbarNewTab = true;     // [true] Doppel-Klick über Tabbar öffnet neuen Tab, [false] Funktion wird nicht ausgeführt
    var bDblclickOnTabReloadTab    = true;        // [true] Doppel-Klick über Tab lädt diesen neu, [false] Funktion wird nicht ausgeführt
    // User-Settings ---

    var nTabLineHeight = nTabHeight+2*nTabMargin;

    tabsetting: { 
        let css =` 
            tabs tab {
                border-left: solid 1px hsla(0,0%,0%,0) !important;
                border-right: solid 1px hsla(0,0%,0%,0) !important;
            }
            tabs tab:after,tabs tab:before
            { 
                display: none !important; 
            }
        `;

        let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
        sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
    }

        
    multiLineTabSetup: {

        let cssIn =`
        
        #tabbrowser-tab-tooltip {
            visibility: strTabTooltips !important;
            /*display: strTabTooltips !important;*/
        }
        
        #TabsToolbar > .titlebar-buttonbox-container,
        #main-window[sizemode="fullscreen"]  #window-controls {
            display: none !important;
        }    

        /* TabToolbar */
        #TabsToolbar { 
            /*background-image:  linear-gradient( rgba(0,0,0,1), rgba(100,125,145,1) ),  none !important; */
            /*background-image: url('file:///D://Programme%20(Portable)//Firefox%20Portable//Firefox-Test//Profilordner//chrome//image//BackNew0008.png') !important;*/
            background:             rgba(30,40,50,0.80) !important;  
            -moz-window-dragging: no-drag !important;
        }
        
         /* Tab-Höhe */
        .tabbrowser-tab {
            min-height: nTabHeightpx !important;
            max-height: nTabHeightpx !important;
            margin-top: nTabMarginpx !important;
            margin-bottom: nTabMarginpx !important;
        }
    
        /* Tab-Rahmen entfernen */
        #TabsToolbar .tabbrowser-tab[visuallyselected="true"],
        #TabsToolbar .tabbrowser-tab,
        #TabsToolbar .tabbrowser-tab .tab-background {
            background: unset !important;
            border-top: unset !important;
            outline: none !important;
        }

        /* Tab-Schließen-Button entfernen */
        .tabbrowser-tab .tab-close-button {
            visibility: strVisible !important;
        }

        tabs > arrowscrollbox { 
            display: block; 
        }
        
        tabs > arrowscrollbox::part(scrollbox) {
            display: flex !important;
            position: relative !important;
            flex-wrap: wrap !important; 
            overflow: visible !important; 
            overflow-x: hidden !important;
            overflow-y: strScrollbar !important;
            -moz-window-dragging: no-drag !important;
        }
        
        .tabbrowser-tab:not([pinned]) {
            min-width: nTabWidthpx !important;             
        }
        
        /* Tab-Separatoren entfernen */
        .tabbrowser-tab::after,
        .tabbrowser-tab::before {
          opacity: 0 !important;
          border-image: unset !important;
          border-image-slice: none !important;
          width: 2 !important;
        }
        
        /* Tab-Line entfernen */
        #TabsToolbar .tabbrowser-tab .tab-line {
            display: none !important; 
        }

        /* Schriftart/Schriftgröße ändern */
        .tabbrowser-tab .tab-label {
            text-shadow: 1px 1px 0px #000000 !important;    
            font-weight: 500 !important;
            font-size:   12px !important;
            font-family: "Arial" !important;
            color: white !important;
        }

        .tabbrowser-tab .tab-label[selected="true"] {
            text-shadow: 1px 1px 0px #000000 !important;
            color: white !important; 
            font-weight: 500 !important;
            font-size:   12px !important; 
            font-family: "Arial" !important; 
        }

    
        /* Tab-Hintergrund  */
        
        /*--- selektiert ---*/
        .tab-background[selected=true] > spacer {
            background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important;
            filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important; 
        }
        /*--- hover(nicht selektiert) ---*/
        .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
            background-image:  linear-gradient( rgba(112,112,112,0.85), rgba(50,62,72,0.85) ),  none !important; 
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75) !important; 
        }
        /*--- nicht selektiert ---*/
        .tab-background:not([selected=true]) > spacer {
            background-image:  linear-gradient( rgba(60,60,60,0.85), rgba(25,25,25,0.85) ),  none !important; 
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75); !important; 
        }
        /*--- Multi-selektiert ---*/
        .tab-background[multiselected=true]:not([selected=true]) > spacer {
            background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
        }
        .tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) > spacer {
            background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important; 
        }    
        

        `;

        let cssOut;
                
        cssOut = cssIn.replace(/nTabHeight/g, nTabHeight);
        cssOut = cssOut.replace(/nTabMargin/g, nTabMargin);
        cssOut = cssOut.replace(/nTabWidth/g, nTabWidth);
        
        if(bTabCloseButton)
            cssOut = cssOut.replace("strVisible", "visible");
        else
            cssOut = cssOut.replace("strVisible", "collapse");
        
        if(bTabScrollbar)
            cssOut = cssOut.replace("strScrollbar", "auto");
        else
            cssOut = cssOut.replace("strScrollbar", "hidden");
        
        if(bTabTooltips) 
            cssOut = cssOut.replace("strTabTooltips", "visible");
        else
            cssOut = cssOut.replace("strTabTooltips", "hidden");
        
                
        //console.log(cssOut);
        
        let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(cssOut));
        sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
        
        
        let tabbrowsertabs  = document.getElementById('tabbrowser-tabs');
        let tabsScrollbox     = document.getElementById('tabbrowser-arrowscrollbox').scrollbox;
            
            
        
        tabsScrollbox.style.minHeight      = nTabLineHeight + 'px';
        tabsScrollbox.style.maxHeight      = nTabLineHeight*nTabLines + 'px';

        console.log(tabbrowsertabs.style);
        console.log(tabsScrollbox.style);
    }

    

    if(bTabsDown || bTabsAutoPopup){
        let tabbar = document.getElementById("TabsToolbar");
        tabbar.parentNode.parentNode.appendChild(tabbar);
        
        let css =`
            #main-window[sizemode="normal"] #titlebar {
            margin-bottom: -6px;}
        `;
        
        
        let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
        sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
    }

    
    if(bTabsAutoPopup)
    {
        let cssIn =`
        
        .StyleShowingTabsToolbar {
            transition:                margin-left nTabsAutoPopupAnims !important; 
            display:                   flex !important;
            position:                  absolute !important;
            opacity:                   1;
            margin-left:               0px !important;
            z-index:                   100 !important;
            min-width:                 nTabsAutoPopupWidthpx !important;
            filter:                    drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) !important; 
        }
        
                
        .StyleHidingTabsToolbar {
            display:                   flex !important;
            position:                  absolute !important;
            opacity:                   0;
            margin-left:               calc( (nTabsAutoPopupWidthpx - nTabsAutoPopupHoverpx) * -1 ); 
            z-index:                   100 !important;
            min-width:                 nTabsAutoPopupWidthpx !important;

        }
        
        .toolbar-items
        {
            display:flex !important;
        }
        
        tabs > arrowscrollbox { 
            display:  flex !important;
            position: absolute !important;
            min-width: nTabsAutoPopupWidthpx !important;
            /*background-color:  rgba(0,0,0,0.25); */
        }
    
        `;
    
        let cssOut;
        
        cssOut = cssIn.replace(/nTabsAutoPopupWidth/g, nTabsAutoPopupWidth);
        cssOut = cssOut.replace(/nTabsAutoPopupHover/g, nTabsAutoPopupHover);
        cssOut = cssOut.replace(/nTabsAutoPopupAnim/g, nTabsAutoPopupAnim);
        
        
        //console.log("AutoPopup: ");
        //console.log(cssOut);
                
        let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(cssOut));
        sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
                
        
        let tabsToolbar =  document.getElementById('TabsToolbar');
        tabsToolbar.classList.add('StyleHidingTabsToolbar');
        //console.log(tabsToolbar);
        
    }

//------------------------------------------------------------------------------------------
    
    var tabsToolbar     = document.getElementById('TabsToolbar');
    var tabbrowsertabs     = document.getElementById('tabbrowser-tabs');
    var tabsscrollbox    = document.getElementById('tabbrowser-arrowscrollbox');
    var ScrollBox = tabsscrollbox.scrollbox;    
    
    var bMouseEnter = false;
    var bToolbarLocked = false;

    // ----------------------------------
    // Load-Event:  
    // ----------------------------------
    function onReady() 
    {    
        console.log("Ready");
        let cssElements =`
            #alltabs-button,
            hbox.titlebar-spacer,
            [class="scrollbutton-up"],
            [class="scrollbutton-up"] + spacer,
            scrollbox[part][orient="horizontal"] + spacer,
            [class="scrollbutton-down"] { 
                display: none; 
            }
        `;
        
        let service = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        let ur         = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(cssElements));
        service.loadAndRegisterSheet(ur, service.AUTHOR_SHEET);
                
        gBrowser.selectedTab.scrollIntoView(); 
    }    
    
    if (window.readyState !== "loading") {
        setTimeout(onReady,350); 
    }
    else 
    {
        window.addEventListener("DOMContentLoaded", onReady );
    }

    // ----------------------------------
    // ResizeObserver / Client
    // ----------------------------------
    var resizeClientObserver=null;
    
    if( bTabsAutoPopup )
    {
        resizeClientObserver = new ResizeObserver(function(entries) {
            for (let entry of entries) {
                
                tabsToolbar.style.minHeight = tabsToolbar.style.maxHeight = entry.contentRect.height + 'px';
                ScrollBox.style.maxHeight = entry.contentRect.height + 'px';
            }
        });
        
        
        resizeClientObserver.observe(document.getElementById("browser"));            
    }    
    
    
    // ----------------------------------
    // 'Middleclick' on Tab -> Close Tab
    // ----------------------------------
    gBrowser.tabContainer.addEventListener('click', function(event) 
    {
        if (event.button == 1)
        {
            let element = event.target.parentNode;
            while(element)
            {
                if (element.localName == 'tab') 
                {
                    gBrowser.removeTab(element, {animate: false});
                    event.preventDefault();
                    event.stopPropagation();    
                    console.log("Klick-M1");
                    return;
                }
                
                element = element.parentNode;
            }
            
        };
    
    }, true);
    
    
    // ----------------------------------
    // 'Middleclick' on TabsToolbar -> Add Tab
    // ----------------------------------
    tabsToolbar.addEventListener('click', function(event)
    {
        if (event.button == 1)
        {
            //let element = event.target.parentNode;
            if(event.target.parentNode.id == "navigator-toolbox") 
            { 
               gBrowser.selectedTab = gBrowser.addTrustedTab('moz-extension://073ae002-537d-4165-ae7b-07540569971e/index.html');
               let urlbar = document.getElementById('urlbar-input');
               urlbar.focus();
               event.preventDefault();
               event.stopPropagation();    
               console.log("Klick-M2");
               return;
            }
        };
    }, true);
    
    
    // ----------------------------------
    // 'Doubleclick' on TabsToolbar -> Add Tab
    // ----------------------------------
    tabsToolbar.addEventListener('dblclick', function(event)
    {
        if(!bDblclickOnTabbarNewTab)
            return;
        
        if (event.button == 0)
        {  
               //let element = event.target.parentNode;
            if(event.target.parentNode.id == "navigator-toolbox") 
            {
               gBrowser.selectedTab = gBrowser.addTrustedTab('moz-extension://073ae002-537d-4165-ae7b-07540569971e/index.html');
               let urlbar = document.getElementById('urlbar-input');
               urlbar.focus();
               event.preventDefault();
               event.stopPropagation();    
               console.log("Klick-D1");
               return;
            }
        };
    }, true);
        
        
        
    // ----------------------------------
    // 'Doubleclick' on TabsToolbar -> Add Tab
    // ----------------------------------
    
    gBrowser.tabContainer.addEventListener('dblclick', function(event)
    {
        if(!bDblclickOnTabbarNewTab)
            return;
        
        if (event.button == 0)
        {  
               let element = event.target.parentNode;
            if (element == gBrowser.tabContainer ) 
            {
               gBrowser.selectedTab = gBrowser.addTrustedTab('moz-extension://073ae002-537d-4165-ae7b-07540569971e/index.html');
               let urlbar = document.getElementById('urlbar-input');
               urlbar.focus();
               event.preventDefault();
               event.stopPropagation();    
               console.log("Klick-D2");
               return;
            }
        };
    }, true);
    
    
    // ----------------------------------
    // 'Doubleclick' on Tab -> Reload Tab
    // ----------------------------------
    gBrowser.tabContainer.addEventListener('dblclick', function(event) 
    {
        if(!bDblclickOnTabReloadTab)
            return;
        
        if (event.button == 0)
        {
            // Test ---------------------------------------------------------------------------------
            /*
            let tabinfo = document.getElementById('tabInfo');
            
            let strTabInfo = tabinfo.textContent;
            */
            // Test ---------------------------------------------------------------------------------
            
            let element = event.target.parentNode;
            while (element) 
            {
                if (element.localName == 'tab') 
                {
                    element.linkedBrowser.reload();
                    
                    console.log("Klick-D-Tab");
        
                    return;
                }
                 
                element = element.parentNode;
            }
        }
    }, true);
    
    // ----------------------------------
    // 'mouseenter'
    // ----------------------------------
    tabsToolbar.addEventListener('mouseenter', event => {
        if( bTabsAutoPopup )
        {
            if(!bMouseEnter)
            {
                //tabsToolbar.style.minHeight = tabsToolbar.style.maxHeight = gBrowser.selectedBrowser.clientHeight + 'px';
                //ScrollBox.style.maxHeight = gBrowser.selectedBrowser.clientHeight + 'px';
                
                bMouseEnter = true;
                tabsToolbar.classList.add('StyleShowingTabsToolbar');    
                tabsToolbar.classList.remove('StyleHidingTabsToolbar');
                //console.log("TabsToolbar: MOUSE ENTER");
                //tabsToolbar.style.backgroundColor = "rgba(0,0,0,0.75)";
                
            }
        }
    }, true);
    
    // ----------------------------------
    // 'mouseleave'
    // ----------------------------------
    tabsToolbar.addEventListener('mouseleave', event => {
        if( bTabsAutoPopup )
        {    
            if(bMouseEnter)
            {      
                            
                if( event.clientX > 0/*tabsToolbar.clientLeft*/ &&
                    event.offsetY > tabsToolbar.clientTop  &&
                    event.offsetX < tabsToolbar.clientWidth &&
                    event.offsetY < tabsToolbar.clientHeight )
                {
                    //console.log("TabsToolbar: (1) MOUSE NO LEAVE screenX:%d|screenY:%d ", event.screenX, event.screenY ); 
                    //console.log("TabsToolbar: (2) MOUSE NO LEAVE clientX:%d|clientY:%d ", event.clientX, event.clientY ); 
                    //console.log("TabsToolbar: (3) MOUSE NO LEAVE offsetX:%d|offsetY:%d ", event.offsetX, event.offsetY ); 
                    //console.log("TabsToolbar: (4) MOUSE NO LEAVE tabsToolbar.clientLeft:%d|tabsToolbar.clientTop:%d|tabsToolbar.clientWidth-2:%d|tabsToolbar.clientHeight:%d ", tabsToolbar.clientLeft, tabsToolbar.clientTop, tabsToolbar.clientWidth-2, tabsToolbar.clientHeight ); 
                    //console.log("TabsToolbar: (5) MOUSE NO LEAVE event.target.clientLeft:%d|event.target.clientTop:%d|event.target.clientWidth-2:%d|event.target.clientHeight:%d ", event.target.clientLeft, event.target.clientTop, event.target.clientWidth-2, event.target.clientHeight ); 
                    return;
                }
        
                event.preventDefault();
                event.stopPropagation();
                tabsToolbar.classList.add('StyleHidingTabsToolbar');
                tabsToolbar.classList.remove('StyleShowingTabsToolbar');
                //console.log("TabsToolbar: (1) MOUSE LEAVE screenX:%d|screenY:%d ", event.screenX, event.screenY ); 
                //console.log("TabsToolbar: (2) MOUSE LEAVE clientX:%d|clientY:%d ", event.clientX, event.clientY ); 
                //console.log("TabsToolbar: (3) MOUSE LEAVE offsetX:%d|offsetY:%d ", event.offsetX, event.offsetY ); 
                //console.log("TabsToolbar: (4) MOUSE LEAVE tabsToolbar.clientLeft:%d|tabsToolbar.clientTop:%d|tabsToolbar.clientWidth-2:%d|tabsToolbar.clientHeight:%d ", tabsToolbar.clientLeft, tabsToolbar.clientTop, tabsToolbar.clientWidth-2, tabsToolbar.clientHeight ); 
                //console.log("TabsToolbar: (5) MOUSE LEAVE event.target.clientLeft:%d|event.target.clientTop:%d|event.target.clientWidth-2:%d|event.target.clientHeight:%d ", event.target.clientLeft, event.target.clientTop, event.target.clientWidth-2, event.target.clientHeight ); 
                bMouseEnter = false;
                //tabsToolbar.style.backgroundColor = "rgba(0,0,0,0.8)";
                
            }
        }                
    }, false);


    
    // ...  
    // TabSelect-Event:  
    // ...
    gBrowser.tabContainer.addEventListener("TabSelect", function(event) {
                
        let bScroll    = false;
        let bScrollTop = true;
                
        let scrollBoxY1     = event.target.parentElement.scrollbox.screenY;
        let scrollBoxHeight = event.target.parentElement.scrollbox.clientHeight;
        let scrollBoxY2     = scrollBoxY1+scrollBoxHeight;
        
        let TabSelY1     = event.target.screenY;
        let TabSelHeight = event.target.clientHeight;
        let TabSelY2     = TabSelY1+TabSelHeight;
        
        if( TabSelY2 > scrollBoxY2 )
        {
            bScroll = true;
            bScrollTop = false;
        }
        if( TabSelY1 < scrollBoxY1 ) 
        {
            bScroll = true;
            bScrollTop = true;
        }
        
        if( bScroll )
        {
            setTimeout(function() 
            {
                event.target.scrollIntoView(bScrollTop);
            }, 0);
        }
        
    }, true);
      
      
    // ...  
    // Wheel-Event:  
    // ...
    gBrowser.tabContainer.addEventListener("wheel", function(event) 
    {
        event.preventDefault();
        event.stopPropagation();
        
            
        let scrollUp        = true;
        let wrap            = false;
        let scrollBoxY1     = gBrowser.tabContainer._animateElement.scrollbox.scrollTop; 
        let scrollHeight;
        
        //let nTabLineHeight   = gBrowser.tabContainer._animateElement.scrollbox.clientHeight/nTabLines ;
                                
        if(bPageScroll)
            {scrollHeight  = gBrowser.tabContainer._animateElement.scrollbox.clientHeight;}
        else            
            {scrollHeight  = nTabLineHeight;}
        
        let dir = (scrollUp ? 1 : -1) * Math.sign(event.deltaY);
        
        let bLastScrollLine = false; 
        
        if( gBrowser.tabContainer._animateElement.scrollbox.scrollTopMax == gBrowser.tabContainer._animateElement.scrollbox.scrollTop)
            {
                bLastScrollLine = true;
            }        
        

        if( !bTabWheel || event.ctrlKey || event.originalTarget.localName == "thumb"  || event.originalTarget.localName == "slider" || event.originalTarget.localName == "scrollbarbutton" ) 
        {
              setTimeout(function()
            {
                let scrollBoxMod = scrollBoxY1%scrollHeight;
                
                if( scrollBoxMod > 0 )
                {
                    if( dir == -1 )
                    {
                        scrollBoxY1 -= scrollBoxMod;
                        if(scrollBoxMod < nTabLineHeight && !bLastScrollLine) { scrollBoxY1 -= scrollHeight; }
                
                    }
                    else
                    {
                        scrollBoxY1 += (scrollHeight-(scrollBoxMod));
                        if(scrollHeight-(scrollBoxMod) < nTabLineHeight) { scrollBoxY1 += scrollHeight; }
                        
                    }
                }
                else
                {
                    if( dir == -1 )
                    {
                        scrollBoxY1 -= scrollHeight;
                    }
                    else
                    {
                        scrollBoxY1 += scrollHeight;
                    }
                }
                
                gBrowser.tabContainer._animateElement.scrollbox.scrollTo({ top: scrollBoxY1, left: 0, behavior: 'auto'}); 
            }, 20);
        }
        

        if( bTabWheel && !event.ctrlKey )
        {    
            setTimeout(function()
            {
                if( event.originalTarget.localName != "slider" && 
                    event.originalTarget.localName != "thumb"  &&
                    event.originalTarget.localName != "scrollbarbutton" )
                {
                    gBrowser.tabContainer.advanceSelectedTab(dir, wrap);
                    if( (gBrowser.tabContainer._firstTab == gBrowser.selectedTab) || 
                        (gBrowser.tabContainer._lastTab  == gBrowser.selectedTab)     )
                        {
                            gBrowser.selectedTab.scrollIntoView(); 
                        }
        
                }    
            }, 50);
        }


    }, false);

//-------------------------------------------------------------------------------------------

    gBrowser.tabContainer.clearDropIndicator = function() {
        var tabs = this.allTabs;
        for (let i = 0, len = tabs.length; i < len; i++) {
            tabs[i].style.removeProperty("border-left-color");
            tabs[i].style.removeProperty("border-right-color");
        }
    }
    gBrowser.tabContainer.addEventListener("dragleave", function(event) { this.clearDropIndicator(event); }, true);



    gBrowser.tabContainer.on_dragover = function(event) {
        this.clearDropIndicator();
        var effects = this._getDropEffectForTabDrag(event);
        var ind = this._tabDropIndicator;
        if (effects == "" || effects == "none") {
            ind.hidden = true;
            return;
        }
        event.preventDefault();
        event.stopPropagation();
        if (effects == "link") {
            let tab = this._getDragTargetTab(event, true);
            if (tab) {
                if (!this._dragTime) {
                    this._dragTime = Date.now();
                }
                if (Date.now() >= this._dragTime + this._dragOverDelay) {
                    this.selectedItem = tab;
                }
                ind.hidden = true;
                return;
            }
        }
        let newIndex = this._getDropIndex(event, effects == "link");
        let children = this.allTabs;
        if (newIndex == children.length) {
            children[newIndex - 1].style.setProperty("border-right-color","red","important");
        } else {
            children[newIndex].style.setProperty("border-left-color","red","important");
        }
    }

    gBrowser.tabContainer.on_drop = function(event) {
        this.clearDropIndicator();
        var dt = event.dataTransfer;
        var dropEffect = dt.dropEffect;
        var draggedTab;
        let movingTabs;
        if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) {
            // tab copy or move
            draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
            // not our drop then
            if (!draggedTab) {
                return;
            }
            movingTabs = draggedTab._dragData.movingTabs;
            draggedTab.container._finishGroupSelectedTabs(draggedTab);
        }
        this._tabDropIndicator.hidden = true;
        event.stopPropagation();
        if (draggedTab && dropEffect == "copy") {
            // copy the dropped tab (wherever it's from)
            let newIndex = this._getDropIndex(event, false);
            let draggedTabCopy;
            for (let tab of movingTabs) {
                let newTab = gBrowser.duplicateTab(tab);
                gBrowser.moveTabTo(newTab, newIndex++);
                if (tab == draggedTab) {
                    draggedTabCopy = newTab;
                }
            }
            if (draggedTab.container != this || event.shiftKey) {
                this.selectedItem = draggedTabCopy;
            }
        } else if (draggedTab && draggedTab.container == this) {
            let oldTranslateX = Math.round(draggedTab._dragData.translateX);
            let tabWidth = Math.round(draggedTab._dragData.tabWidth);
            let translateOffset = oldTranslateX % tabWidth;
            let newTranslateX = oldTranslateX - translateOffset;
            if (oldTranslateX > 0 && translateOffset > tabWidth / 2) {
                newTranslateX += tabWidth;
            } else if (oldTranslateX < 0 && -translateOffset > tabWidth / 2) {
                newTranslateX -= tabWidth;
            }
            let dropIndex = this._getDropIndex(event, false);
            //  "animDropIndex" in draggedTab._dragData &&
            //  draggedTab._dragData.animDropIndex;
            let incrementDropIndex = true;
            if (dropIndex && dropIndex > movingTabs[0]._tPos) {
                dropIndex--;
                incrementDropIndex = false;
            }
            let animate = gBrowser.animationsEnabled;
            if (oldTranslateX && oldTranslateX != newTranslateX && animate) {
                for (let tab of movingTabs) {
                    tab.setAttribute("tabdrop-samewindow", "true");
                    tab.style.transform = "translateX(" + newTranslateX + "px)";
                    let onTransitionEnd = transitionendEvent => {
                        if (
                            transitionendEvent.propertyName != "transform" ||
                            transitionendEvent.originalTarget != tab
                        ) {
                            return;
                        }
                        tab.removeEventListener("transitionend", onTransitionEnd);
                        tab.removeAttribute("tabdrop-samewindow");
                        this._finishAnimateTabMove();
                        if (dropIndex !== false) {
                            gBrowser.moveTabTo(tab, dropIndex);
                            if (incrementDropIndex) {
                                dropIndex++;
                            }
                        }
                        gBrowser.syncThrobberAnimations(tab);
                    };
                    tab.addEventListener("transitionend", onTransitionEnd);
                }
            } else {
                this._finishAnimateTabMove();
                if (dropIndex !== false) {
                    for (let tab of movingTabs) {
                        gBrowser.moveTabTo(tab, dropIndex);
                        if (incrementDropIndex) {
                            dropIndex++;
                        }
                    }
                }
            }
        } else if (draggedTab) {
            let newIndex = this._getDropIndex(event, false);
            let newTabs = [];
            for (let tab of movingTabs) {
                let newTab = gBrowser.adoptTab(tab, newIndex++, tab == draggedTab);
                newTabs.push(newTab);
            }
            // Restore tab selection
            gBrowser.addRangeToMultiSelectedTabs(
                newTabs[0],
                newTabs[newTabs.length - 1]
            );
        } else {
            // Pass true to disallow dropping javascript: or data: urls
            let links;
            try {
                links = browserDragAndDrop.dropLinks(event, true);
            } catch (ex) {}
            if (!links || links.length === 0) {
                return;
            }
            let inBackground = Services.prefs.getBoolPref(
                "browser.tabs.loadInBackground"
            );
            if (event.shiftKey) {
                inBackground = !inBackground;
            }
            let targetTab = this._getDragTargetTab(event, true);
            let userContextId = this.selectedItem.getAttribute("usercontextid");
            let replace = !!targetTab;
            let newIndex = this._getDropIndex(event, true);
            let urls = links.map(link => link.url);
            let csp = browserDragAndDrop.getCSP(event);
            let triggeringPrincipal = browserDragAndDrop.getTriggeringPrincipal(
                event
            );
            (async () => {
                if (
                    urls.length >=
                    Services.prefs.getIntPref("browser.tabs.maxOpenBeforeWarn")
                ) {
                    // Sync dialog cannot be used inside drop event handler.
                    let answer = await OpenInTabsUtils.promiseConfirmOpenInTabs(
                        urls.length,
                        window
                    );
                    if (!answer) {
                        return;
                    }
                }
                gBrowser.loadTabs(urls, {
                    inBackground,
                    replace,
                    allowThirdPartyFixup: true,
                    targetTab,
                    newIndex,
                    userContextId,
                    triggeringPrincipal,
                    csp,
                });
            })();
        }
        if (draggedTab) {
            delete draggedTab._dragData;
        }
    }

    gBrowser.tabContainer._getDropIndex = function(event, isLink) {
        var tabs = this.allTabs;
        var tab = this._getDragTargetTab(event, isLink);
        if (!RTL_UI) {
            for (let i = tab ? tab._tPos : 0; i < tabs.length; i++) {
                if (
                    event.screenY <
                    tabs[i].screenY + tabs[i].getBoundingClientRect().height
                ) {
                    if (
                        event.screenX <
                        tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2
                    ) {
                        return i;
                    }
                    if (
                        event.screenX >
                        tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2 &&
                        event.screenX <
                        tabs[i].screenX + tabs[i].getBoundingClientRect().width
                    ) {
                        return i + 1;
                    }
                }
            }
        } else {
            for (let i = tab ? tab._tPos : 0; i < tabs.length; i++) {
                if (
                    event.screenY <
                    tabs[i].screenY + tabs[i].getBoundingClientRect().height
                ) {
                    if (
                        event.screenX <
                        tabs[i].screenX + tabs[i].getBoundingClientRect().width &&
                        event.screenX >
                        tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2
                    ) {
                        return i;
                    }
                    if (
                        event.screenX <
                        tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2
                    ) {
                        return i + 1;
                    }
                }
            }
        }
        return tabs.length;
    }

}