1. Nachrichten
  2. Forum
    1. Unerledigte Themen
    2. Forenregeln
  3. Spenden
  • Anmelden
  • Registrieren
  • Suche
Alles
  • Alles
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. TEST - camp-firefox.de
  2. FuchsFan

Beiträge von FuchsFan

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • FuchsFan
    • 8. September 2024 um 10:38
    Zitat von 2002Andreas

    Den ersten Teil vom Code kannst du auch noch verkürzen:

    Ist gemacht. :thumbup::)

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • FuchsFan
    • 8. September 2024 um 10:30
    Zitat von 2002Andreas

    Das ist doch schon drin gewesen, ab Zeile 105:

    Guten Morgen, Andreas!:)

    Ja, das sehe ich jetzt auch. Ich hatte nur die neuen Teile kopiert, da war es dann bei mir nicht mehr drin. Aber nun ist damit wieder alles i.O.

    Danke, Andreas. :thumbup:

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • FuchsFan
    • 7. September 2024 um 22:43
    Zitat von 2002Andreas

    Teste bitte mal:

    Das finde ich gut, macht seine Arbeit.:thumbup:

    Damit der Tabtext bei hover sich nicht verschiebt, so habe ich das noch dazu genommen.

    CSS
    /*Tab schließen Button verschoben bei Tabstext mittig*/
        .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    		flex-shrink: 0 !important;
            width: 24px !important;
    	}
  • userChrome.js Scripte für den Fuchs (Diskussion)

    • FuchsFan
    • 7. September 2024 um 22:23
    Zitat von 2002Andreas

    Erst durch den anderen Teil vom Code wird er wieder sichtbar bei hover weil da:

    opacity dann auf 1 steht.

    Das ist so, Andreas. Inder userChrome.css gibt es damit ja auch keine Probleme. Da wird dann bei hover auch das Kreuz mit color: red in dieser Farbe gezeigt. Aber nicht im Script, und das kann ich immer noch nicht verstehen.


    Zitat von grisu2099

    Wenn ich das richtig verstanden habe, soll das Kreuz bei hover auf den Tab erscheinen (in weiß). Erst wenn das Kreuz selbst gehovert wird, soll es rot werden...

    So ist es, zumindest im bisherigen Einsatz gewesen.:)

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • FuchsFan
    • 7. September 2024 um 20:26
    Zitat von 2002Andreas

    Sollst du ja auch nicht, nur ändern

    Danke, Andreas, aber auch das bringt nicht den ursprünglichen Effekt.:/

    Nun habe ich ja wenigstens über diese Diskussion eine Lösung gefunden, werde das alles mal in Reinschrift bringen, auf die Übersetzung von Endor warten, um es dann mal probehalber laufen zu lassen. Die Tests habe ich übrigens in Nightly v.132 gemacht.

    Danke 2002Andreas , danke milupo .

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • FuchsFan
    • 7. September 2024 um 20:04
    Zitat von 2002Andreas

    Aber dann ist das schon falsch:

    Wenn ich den Block raus nehme, dann funktioniert es nicht mehr.

    Was weg kann ist die Zeile mit color red.

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • FuchsFan
    • 7. September 2024 um 20:00

    2002Andreas

    Das soll es ja nicht sein, Kreuz soll weiß bleiben bei Tabberührung, erst wenn der Schließen-Button berührt wird, dann Rot.

    Aber ich habe noch eine Möglichkeit gefunden, wenn das noch hinzugefügt wird.

    CSS
    /*Tab schließen X hover Red */
    .tab-content > .tab-close-button:hover {
        background: none !important;
        fill: red !important;
    }
  • userChrome.js Scripte für den Fuchs (Diskussion)

    • FuchsFan
    • 7. September 2024 um 19:41
    Zitat von milupo

    ist dir vielleicht ein Fehler beim Einfügen unterlaufen.

    Schließe ich aus, aber schau ab Zeile 79.

    CSS
    // ==UserScript==
    // @name           zzzz-MultiRowTab_LiteforFx48.uc.js
    // @namespace      http://space.geocities.yahoo.co.jp/gl/alice0775
    // @description    多段タブもどき実験版 CSS入れ替えまくりLiteバージョン
    // @include        main
    // @compatibility  Firefox128esr Firefox131+
    // @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
    // ==/UserScript==
    "use strict";
    
    MultiRowTabLiteforFx();
    function MultiRowTabLiteforFx() {
    
                                                     // -- Config --
    
        const                                        // タブバーの段数を指定するか無制限にするか選択する。
        TabBar_Rows =                      	true	,// [false] = 無制限
                                                     // true    = 段数指定
        Maximum_Rows =                     	2		,// 段数指定(デフォルト3段)
    
                                                     // ProtonUI タブの見た目を変更する。
        ProtonUI =                         	false	,// [true] = タブをProtonUIのままにする。
                                                     //          タブバーの高さはUI密度に上下の空白を足した高さです。
                                                     // false  = Firefox90以前には出来ていたbrowser.proton.enabledをfalseに設定した時の見た目にする。
                                                     //          タブの周りにある空白を0にしてUI密度の高さに調整します。
    
                                                     // タブバーの位置を変更する。
        TabBar_Position =                  	1		,// [0] = 初期位置
                                                     // 1   = ツールバーの下
                                                     // 2   = ウインドウの下
    
                                                     // UI密度 タブの高さ
        UI_Density_Compact =               	24		,// デフォルト 29px コンパクト
        UI_Density_Normal =                	24		,// デフォルト 36px 通常
        UI_Density_Touch =                 	24		,// デフォルト 41px タッチ
                                                     // 同じ様なCSSを書いた場合userChrome.cssの方が反映されます。
    
                                                     // タブの横幅
                                                     // 指定する数値を両方同じにすると横幅が固定化されます。
        Tab_Min_Width =                    	271	,// 最小値 デフォルト 76px
        Tab_Max_Width =                    	271	,// 最大値 デフォルト 225px
                                                     // 同じ様なCSSを書いた場合userChrome.cssの方が反映されます。
    
                                                     // .tab-drop-indicator アイコン差し替え。
        Tab_Drop_Indicator =               	false	,// [false] = ピン📍のようなアイコン
                                                     // true    = 赤線(2px × 29px)アイコン
    
                                                     // タブの左右に境界線を表示する。
        Tab_Separators  =                  	false	,// [false] = 表示しない
                                                     // true    = 表示する
                                                     // Firefox90以前には出来ていたbrowser.proton.enabledをfalseに設定したら表示する様になっていた境界線のCSSを抽出して調整しています。
    
                                                     // タブバードラッグ領域
        Left_Drag_Area =                   	0		,// 左のドラッグ領域:デフォルト 40px
        Right_Drag_Area =                  	0		,// 右のドラッグ領域:デフォルト 40px
        Window_Maximize_Left_Drag_Area =   	false	,// true = ウィンドウを最大化した時、非表示になる 左のドラッグ領域が表示出来ます。
        Fullscreen_Drag_Area =             	false	,// true = フルスクリーンにした時、非表示になる 左右のドラッグ領域が表示出来ます。
    
                                                     // ピン留めタブの位置を変更する。
        Separate_Tabs_and_PinnedTabs =     	false	,// [false] = 初期位置
                                                     // true    = ピン留めタブをタブの行から分離して上に出来る行へ移動する。
    
                                                     // タブを一覧表示するボタン
        All_Tabs_Button =                  	false	,// [false] = 非表示
                                                     // true    = 表示
    
                                                     // -- Config End --
    	
        
        css = `
    	
    	
    	
    /*=== Tabschliessen-Button ** nur zu sehen bei Mouseover ===*/
    	
    	/* Farbe der X-Markierung ändern */
        .tab-close-button {
    		fill: white !important;
        /* X grösser machen */
            transform: scale(1.5, 1.5) !important;
        /* Kreuz zum Schließen bei allen Tabs */
    	    display: block !important;
    		opacity: 0 !important;
        }
    	
    	.tabbrowser-tab:hover .tab-close-button {
            opacity: 1 !important;
            color: red !important;
            display: block !important;
    		background: none !important;
        }
    	
    	/* Icon inaktiver Tab verlagert */
    	.tabbrowser-tab:not([visuallyselected]) .tab-close-button {
    		margin-top: 1px !important;
        }		
    	
    	/*Tab schließen Button verschoben bei Tabstext mittig*/
        .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    		flex-shrink: 0 !important;
            width: 24px !important;
    		/* display: none !important; */  /* wird total ausgeblendet */
        }
    	
    /** Tabschliessen-Button ** ENDE **/		
    	
    	
    	/* Tab-Hintergrund  */
    
    /*--- selektiert (aktiv) ---*/
    	#tabbrowser-arrowscrollbox tab.tabbrowser-tab stack.tab-stack vbox.tab-background[selected]{
        filter: none !important;
    	border: 1px solid blue !important;
    	/* min-height: 25px !important;
    	max-height: 25px !important; */
    	margin-top: 0px !important;
    	background: linear-gradient(45deg, gold, beige, orange) !important;
    }
    
    /*--- hover: Multi selektiert ---*/
    .tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected]:not([selected]) {
        filter: brightness(130%) contrast(100%) !important; 
    }
    /*--- Multi selektiert ---*/
    .tab-background[multiselected]:not([selected]) {
        filter: brightness(130%) saturate(50%) !important; 
    } 
    
    /* aktiver Tab bei Hover dunkler*/
    #main-window .tabbrowser-tab[selected]:hover {
        opacity: .5 !important;
    }
    
    /* inaktiver Tab */
    .tab-background:not([selected]) {
    	background: linear-gradient( 0.35turn,  grey, silver, white, grey) !important;
    	border: 1px solid #000 !important;
    }
    
    /* inaktiver tab farbe bei hover */
    .tabbrowser-tab:not([selected]):hover .tab-content { 
        background: linear-gradient(45deg, grey, white, white, grey) !important;
    	border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, 0.50)) !important;
    	border-left: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, 0.50)) !important;
    }
    
    
    html#main-window body toolbox#navigator-toolbox vbox#titlebar toolbar#TabsToolbar.browser-toolbar.titlebar-color hbox.toolbar-items hbox#TabsToolbar-customization-target.customization-target toolbarbutton#new-tab-button.toolbarbutton-1.chromeclass-toolbar-additional{
    	display: none !important;
    }
    
    
    
    
    
    
    /* Schrift im Zentrum des Tabs / ab Version 110 */
    .tab-label-container {
      height: unset !important;
      margin-inline-end: 7px;
      display: grid !important;
      justify-items: safe center !important;
      justify-content: safe center !important;
    }
    
    
    /* Breite für den Container automatisch (Schrift)*/
    .tab-label-container {
      margin: auto !important;
    }	  
    
    /*Tabtext beim Laden blau*/
    .tabbrowser-tab[busy] .tab-label {
       color: #cc0000 !important;
    }
    
    /* Schrift aktiver Tab */
    .tabbrowser-tab[visuallyselected] .tab-label {
      font-weight: bold !important;
      color: blue !important;
      font-size: 1.3em !important;
      font-family: "Verdana, Helvetica", serif !important;
      font-style: italic !important;
      margin-top: -2px !important;  
    }
    
    /* Text inaktiver Tab */
    .tabbrowser-tab .tab-label {
        margin-top: 0px !important;  
    }
    
    /* Hintergrund Navigations- und Lesezeichensymbolleiste ausgeblendet */
    #PersonalToolbar {
        background: none !important; 
        opacity: 1.0 !important; 
        border: none !important;
    }
    
    /* Abstand der Tabs zur Lesezeichen-Symbolleiste */
    #TabsToolbar{
      margin-top: 2px !important;
      padding-bottom: 1px !important;
      padding-top: 2px !important;
      
    }  
    
    /* Abstand Menü-Bar zur Url-Bar */
    #toolbar-menubar {
      margin-bottom: 1px !important;
      margin-top: 1px !important;
    } 
    
    /* Icon im Tab versetzt */
    #TabsToolbar .tab-icon-image {
      margin-left: -3px !important;
      margin-bottom: 1px !important;
    } 
    
    
    #PersonalToolbar{
    margin-top: 4px !important;
    
    }
    
    #nav-bar{
      appearance: none !important;
      background-image: none !important;
      background-color: #C2D3ED !important;
      border-top: 1px solid grey !important;
      border-bottom: 1px solid grey !important;
      box-shadow: none !important;
    }
    
    
    
    
    
        #TabsToolbar {
    
          /* UI密度 タブの高さ */
          :root[uidensity="compact"] & { --tab-min-height: ${UI_Density_Compact}px; }
          :root:not([uidensity])     & { --tab-min-height: ${UI_Density_Normal}px; }
          :root[uidensity="touch"]   & { --tab-min-height: ${UI_Density_Touch}px; }
    
          ${Tab_Drop_Indicator ? `
            /* .tab-drop-indicator アイコン差し替え。 background: url() no-repeat center !important; に追記してるのはpngファイルをbase64に変換した赤線(2px × 29px)です。 */
            #tabbrowser-tabs > .tab-drop-indicator {
              background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAdCAIAAAAPVCo9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAASSURBVBhXY3growJEQ5+SUQEAOb1EM8kwskcAAAAASUVORK5CYII=) no-repeat center !important;
          }` : ``}
    
          /* タブバー ドラッグ領域 */
          .titlebar-spacer[type="pre-tabs"] {
            width: ${Left_Drag_Area}px !important;
          }
          .titlebar-spacer[type="post-tabs"] {
            width: ${Right_Drag_Area}px !important;
          }
          ${Window_Maximize_Left_Drag_Area ? `
            .titlebar-spacer {
              @media (-moz-platform: windows) {
                :root:not([sizemode="normal"], [inFullscreen]) &[type="pre-tabs"] {
                  display: block !important;
          }}}` : ``}
          ${Fullscreen_Drag_Area ? `
            .titlebar-spacer {
              :root[inFullscreen] &, :root:not([tabsintitlebar]) & {
                display: block !important;
          }}` : ``}
    
          /* タブ タブバー スクロールバー */
          #tabbrowser-arrowscrollbox {
            &::part(scrollbox) {
              ${TabBar_Rows ? `
                max-height: calc((var(--tab-min-height) + ${ProtonUI ? 8 : 0}px) * ${Maximum_Rows});
                overflow: hidden auto;
                & scrollbar {
                  -moz-window-dragging: no-drag;
                }
                /* Maximum_Rows を 1 にするとスライダの無いスクロールバーが表示されて気になったので Maximum_Rows を 1 に設定した時だけ非表示にしました。
                   スクロールバーは非表示になりますが動作はするのでタブバーに2段目以降があると縦方向にスクロール出来ます。 */
                ${Maximum_Rows !== 1 ? `` : `scrollbar-width: none;`}
              ` : ``}}
            &::part(overflow-start-indicator),
            &::part(overflow-end-indicator),
            &::part(scrollbutton-up),
            &::part(scrollbutton-down) {
              display: none;
            }
            .tabbrowser-tab[fadein]:not([pinned]) {
              --tab-min-width: ${Tab_Min_Width}px;
              --tab-max-width: ${Tab_Max_Width}px;
              max-width: var(--tab-max-width);
          }}
    
          /* ピン留めタブとタブの間に出来る空白を0にする。 */
          #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]):not([orient="vertical"]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
            margin-inline-start: 0px !important; /* デフォルト 12px */
          }
    
          ${ProtonUI ? `` : `
            /* タブの周りにある空白を0にしてUI密度の高さに調整 */
            .toolbarbutton-1 {
              margin: 0 !important;
              padding: 0 !important;
            }
            .tabbrowser-tab,
            #tabs-newtab-button {
              height: var(--tab-min-height);
              padding: 0 !important;
            }
            .tab-background {
              box-shadow: none !important;
              margin-block: 0 !important;
    		  /* border-radius: 0 !important; */
            }
    		
    		
    
            /* コンテナータブ */
            .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
            /* タブの周りにある空白を0にする調整で上のカラーバーが隠れるので見える様に調整 */
              margin: 1px 2px 0; /* デフォルト margin: -3px 2px 0; */
          }`}
    
          ${Tab_Separators ? `
            .titlebar-spacer[type="pre-tabs"] {
              border-inline-end: 1px solid color-mix(in srgb, currentColor 20%, transparent);
            }
            .tabbrowser-tab::after,
            .tabbrowser-tab::before {
              border-left: 1px solid color-mix(in srgb, currentColor 50%, transparent);
              height: calc(var(--tab-min-height) - 16.5%);
              margin-block: auto;
            }
            .tabbrowser-tab:hover::after,.tabbrowser-tab[multiselected]::after,
            #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:has(+ .tabbrowser-tab:hover)::after,
            #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:has(+ [multiselected])::after {
              height: 100%;
            }
            .tabbrowser-tab::after,
            #tabbrowser-tabs[movingtab] .tabbrowser-tab[visuallyselected]::before {
              content: "";
              display: block;
          }` : ``}
    
          ${All_Tabs_Button ? `` : `
            /* タブを一覧表示するボタン */
            #alltabs-button {
              display: none;
          }`}
    
        }
    
        /* 多段タブ */
        scrollbox[part][orient="horizontal"] {
          &:has(+ spacer) > slot,
          .scrollbox-clip > & {
            flex-wrap: wrap;
        }}
    
        ${Separate_Tabs_and_PinnedTabs ? `
          /* ピン留めタブをタブの行から分離して上に出来る行へ移動する。 */
          scrollbox[part][orient="horizontal"] {
            &:has(+ spacer) > slot::after,
            .scrollbox-clip > &::after {
              display: flow-root list-item;
              content: "";
              flex-basis: -moz-available;
              height: 0;
              overflow: hidden;
          }}
          #TabsToolbar {
            #tabbrowser-tabs[haspinnedtabs] {
              .tabbrowser-tab:not([pinned]) {
                &, & + :not(#tabs-newtab-button) {
                  order: 1;
        }}}}` : ``}
    
        ${TabBar_Position === 0 ? `
          /* タイトルバーボタン[-□×] */
          #TabsToolbar {
            .titlebar-buttonbox-container {
              height: calc(var(--tab-min-height) + ${ProtonUI ? 8 : 0}px);
              margin-bottom: 0 !important;
        }}` : `
          #nav-bar {
            :root:not([inFullscreen]) #toolbar-menubar:not([inactive]) + & > .titlebar-buttonbox-container {
              display: none;
            }
            .titlebar-button {
              padding-block: 0 !important;
        }}`}
    
        ${TabBar_Position !== 2 ? `` : `
          /* フルスクリーン時タブバーを隠して画面の一番上か一番下をマウスオーバーでツールバーと一緒に表示 */
          body {
            & > #fullscr-toggler[hidden] + tabbox,
            :root[inFullscreen] & > tabbox:hover {
              border-top: 0.5px solid var(--toolbar-bgcolor);
            }
            & > tabbox > #navigator-toolbox {
              border-block: none !important;
            }
            :root[inFullscreen] & {
              & > #navigator-toolbox {
                transition: none;
                &:has(~ tabbox:hover) {
                  margin-top: 0 !important;
                }
                &:hover ~ tabbox > #navigator-toolbox {
                  max-height: 100%;
              }}
              & > tabbox:not(:hover) {
                border-top: .5px solid transparent;
                & > #navigator-toolbox {
                  max-height: 0;
        }}}}`}
    
        `,
        sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService),
        uri = Services.io.newURI("data:text/css;charset=UTF=8," + encodeURIComponent(css));
        if (TabBar_Rows == false) {
          ["0", "2"].find(type => {
            if(sss.sheetRegistered(uri, type)) sss.unregisterSheet(uri, type); sss.loadAndRegisterSheet(uri, type);
          });
        } else {
          ["0", "2", "SSTabRestored", "TabMove", "TabOpen", "TabSelect"].find(type => {
            if(sss.sheetRegistered(uri, type)) sss.unregisterSheet(uri, type); sss.loadAndRegisterSheet(uri, type);
            gBrowser.tabContainer.addEventListener(type, (e) => { e.target.scrollIntoView({ block: "nearest" }); });
          });
        }
    
        if (TabBar_Position !== 0) {
          if (TabBar_Position === 1) {
            document.getElementById("navigator-toolbox").prepend(
              document.getElementById("toolbar-menubar"),
              document.getElementById("nav-bar"),
              document.getElementById("PersonalToolbar"),
              document.getElementById("titlebar"),
            );
          } else {
            document.getElementById("navigator-toolbox").prepend(
              document.getElementById("toolbar-menubar"),
              document.getElementById("nav-bar"),
              document.getElementById("PersonalToolbar"),
            );
          }
          document.getElementById("nav-bar").appendChild(
            document.querySelector("#TabsToolbar > .titlebar-buttonbox-container")
          );
        }
    
        if (TabBar_Position === 2) {
          document.body.appendChild(
            document.createXULElement("tabbox")
          ).appendChild(
            document.importNode(document.getElementById("navigator-toolbox"))
          ).appendChild(
            document.getElementById("titlebar")
          );
        }
    
        gBrowser.tabContainer.addEventListener("dragover", function(event) { this._on_dragover(event); }, false)
        gBrowser.tabContainer.addEventListener("drop", function(event) { this._on_drop(event); }, false)
    
        gBrowser.tabContainer.on_dragover = function(event) { return false; }
        gBrowser.tabContainer.on_drop = function(event) { return false; }
    
        gBrowser.tabContainer._on_dragover = function(event) {
          var effects = this.getDropEffectForTabDrag(event);
    
          var ind = this._tabDropIndicator;
          if (effects == "" || effects == "none") {
            ind.hidden = true;
            return;
          }
          event.preventDefault();
          event.stopPropagation();
    
          var arrowScrollbox = this.arrowScrollbox;
    
          if (effects == "link") {
            let tab = this._getDragTargetTab(event, { ignoreTabSides: true });
            if (tab) {
              if (!this._dragTime) {
                this._dragTime = Date.now();
              }
              if (Date.now() >= this._dragTime + this._dragOverDelay) {
                this.selectedItem = tab;
              }
              ind.hidden = true;
              return;
            }
          }
    
          var rect = arrowScrollbox.getBoundingClientRect();
          var newMarginX, newMarginY;
          let newIndex = this._getDropIndex(event);
          let children = this.allTabs;
          if (newIndex == children.length) {
            let tabRect = this._getVisibleTabs().at(-1).getBoundingClientRect();
              newMarginX = tabRect.right - rect.left;
              newMarginY = tabRect.top - rect.top + tabRect.height / 2 - rect.height / 2;
          } else {
            let tabRect = children[newIndex].getBoundingClientRect();
              newMarginX = tabRect.left - rect.left;
              newMarginY = tabRect.top - rect.top + tabRect.height / 2 - rect.height / 2;
          }
    
          ind.hidden = false;
          newMarginX += ind.clientWidth / 2;
          ind.style.transform = "translate(" + Math.round(newMarginX) + "px," + Math.round(newMarginY) + "px)";
        }
    
        gBrowser.tabContainer._on_drop = function(event) {
          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);
            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 oldTranslate = Math.round(draggedTab._dragData.translatePos);
            let tabSize = Math.round(draggedTab._dragData.tabSize);
            let translateOffset = oldTranslate % tabSize;
            let newTranslate = oldTranslate - translateOffset;
            if (oldTranslate > 0 && translateOffset > tabSize / 2) {
              newTranslate += tabSize;
            } else if (oldTranslate < 0 && -translateOffset > tabSize / 2) {
              newTranslate -= tabSize;
            }
    
            let dropIndex;
            if (draggedTab._dragData.fromTabList) {
              dropIndex = this._getDropIndex(event);
            } else {
              dropIndex = this._getDropIndex(event);
             // "animDropIndex" in draggedTab._dragData &&
             // draggedTab._dragData.animDropIndex;
            }
            let incrementDropIndex = true;
            if (dropIndex && dropIndex > movingTabs[0]._tPos) {
              dropIndex--;
              incrementDropIndex = false;
            }
    
            if (oldTranslate && oldTranslate != newTranslate && !gReduceMotion) {
              for (let tab of movingTabs) {
                tab.toggleAttribute("tabdrop-samewindow", true);
                tab.style.transform = this.verticalMode
                  ? "translateY(" + newTranslate + "px)"
                  : "translateX(" + newTranslate + "px)";
                let postTransitionCleanup = () => {
                  tab.removeAttribute("tabdrop-samewindow");
    
                  this._finishAnimateTabMove();
                  if (dropIndex !== false) {
                    gBrowser.moveTabTo(tab, dropIndex);
                    if (incrementDropIndex) {
                      dropIndex++;
                    }
                  }
    
                  gBrowser.syncThrobberAnimations(tab);
                };
                if (gReduceMotion) {
                  postTransitionCleanup();
                } else {
                  let onTransitionEnd = transitionendEvent => {
                    if (
                      transitionendEvent.propertyName != "transform" ||
                      transitionendEvent.originalTarget != tab
                    ) {
                      return;
                    }
                    tab.removeEventListener("transitionend", onTransitionEnd);
    
                    postTransitionCleanup();
                  };
                  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) {
            // Move the tabs. To avoid multiple tab-switches in the original window,
            // the selected tab should be adopted last.
            const dropIndex = this._getDropIndex(event);
            let newIndex = dropIndex;
            let selectedTab;
            let indexForSelectedTab;
            for (let i = 0; i < movingTabs.length; ++i) {
              const tab = movingTabs[i];
              if (tab.selected) {
                selectedTab = tab;
                indexForSelectedTab = newIndex;
              } else {
                const newTab = gBrowser.adoptTab(tab, newIndex, tab == draggedTab);
                if (newTab) {
                  ++newIndex;
                }
              }
            }
            if (selectedTab) {
              const newTab = gBrowser.adoptTab(
                selectedTab,
                indexForSelectedTab,
                selectedTab == draggedTab
              );
              if (newTab) {
                ++newIndex;
              }
            }
    
            // Restore tab selection
            gBrowser.addRangeToMultiSelectedTabs(
              gBrowser.tabs[dropIndex],
              gBrowser.tabs[newIndex - 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, { ignoreTabSides: true });
            let userContextId = this.selectedItem.getAttribute("usercontextid");
            let replace = !!targetTab;
            let newIndex = this._getDropIndex(event);
            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;
          }
        }
    
    };
    Alles anzeigen
  • userChrome.js Scripte für den Fuchs (Diskussion)

    • FuchsFan
    • 7. September 2024 um 19:02
    Zitat von milupo

    Ja, bei tabbrowser-tab, aber wirkt es dann auch speziell auf .tab-close-button?

    Aus der userChrome.css heraus, ja.

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • FuchsFan
    • 7. September 2024 um 19:00
    Zitat von 2002Andreas

    In Zeile 5 nutzt du fill, aber in Zeile 15 color

    Das habe ich im Script auch schon auf fill geändert, aber keine Reaktion.

  • userChrome.js Scripte für den Fuchs (Diskussion)

    • FuchsFan
    • 7. September 2024 um 18:30

    Mit dem folgenden Code in der userChrome.css wird das Schließen-Kreuz beim Überfahren des Tabs in weißer Farbe gezeigt, es verändert die Farbe (Rot) , wenn der Schließen-Button berührt wird.

    CSS
    /*=== Tabschliessen-Button ** nur zu sehen bei Mouseover ===*/
    	
    	/* Farbe der X-Markierung ändern */
        .tab-close-button {
    		fill: white !important;
        /* X grösser machen */
            transform: scale(1.5, 1.5) !important;
        /* Kreuz zum Schließen bei allen Tabs */
    	    display: block !important;
    		opacity: 0 !important;
        }
    	
    	.tabbrowser-tab:hover .tab-close-button {
            opacity: 1 !important;
            color: red !important;
            display: block !important;
    		background: none !important;
        }
    	
    	/* Icon inaktiver Tab verlagert */
    	.tabbrowser-tab:not([visuallyselected]) .tab-close-button {
    		margin-top: 1px !important;
        }		
    	
    	/*Tab schließen Button verschoben bei Tabstext mittig*/
        .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    		flex-shrink: 0 !important;
            width: 24px !important;
    		/* display: none !important; */  /* wird total ausgeblendet */
        }
    	
    /** Tabschliessen-Button ** ENDE **/	
    Alles anzeigen

    Füge ich den Code in das Script von hier RE: MultiRowTabsLiteforFx – Fehlersuche und Kompaktierung ein, so wird das weiße Kreuz zwar angezeigt, aber der Schließen-Button ändert die Farbe des Kreuzes nicht.

    Alle anderen Bestandteile funktionieren in dem Script, sodass keine css-Datei mehr benötigt wird.

    Als Verständnisfrage, was wird hier wodurch verhindert?

  • MultiRowTabsLiteforFx – Fehlersuche und Kompaktierung

    • FuchsFan
    • 6. September 2024 um 10:56
    Zitat von Endor

    Heute gab es eine einzige neue Version von ihm

    Endor

    Und diese funktioniert auch in Version 131 und 132.

  • MultiRowTabsLiteforFx – Fehlersuche und Kompaktierung

    • FuchsFan
    • 4. September 2024 um 19:29
    Zitat von Herzmann

    Das Konfigurieren der einzufügenden CSS-Anweisungen per Variable hat 2 Vorteile:
    1. Es ist einfacher, einen Variablenwert zu ändern, als mit den Kommentarmarkierungen zu hantieren.
    2. Die Auskommentierungen müssen vom CSS-Interpreter ja dennoch eingelesen und verarbeitet werden. Das verlangsamt die Abarbeitung. So finde ich es besser, ungenutztes CSS erst gar nicht zu erzeugen.

    Du hast den Durchblick, ich nicht, dann soll es so sein.

  • MultiRowTabsLiteforFx – Fehlersuche und Kompaktierung

    • FuchsFan
    • 4. September 2024 um 10:13
    Zitat von Herzmann

    Hab' das jetzt auch mal per Variablen steuerbar gemacht, bin mir aber ziemlich unsicher, ob das so Sinn macht.

    Vorab mal meine Anerkennung, dass Du versuchst das Script zu überarbeiten. Ich selbst bin nur Nehmer , weil ich so gut wie keine Ahnung davon habe.

    Meine Meinung zu Deinem Vorhaben, lass so viel wie möglich an Code heraus, was auch über css-Code eingerichtet werden kann.

    Das deshalb, weil jeder User seine eigenen Vorstellungen vom Aussehen der Tabs hat.

    Natürlich teste ich jede Neuvorstellung an Code, und deshalb auch mit dem "Ziehbereich". Das funktioniert nur eingeschränkt, entweder auf der linken Seite, dann aber nicht auf der rechten Seite, oder umgekehrt. Rechts finde ich gut, dann hat die Scrollbar etwas Abstand. All-Tabs-Button und New-Tab-Button habe ich ausgeblendet, und Tabbreite verändert, damit sieht es dann vorerst so aus.

    Bin mal gespannt, was für Überraschungen Du noch zu bieten hast.:thumbup::)

  • MultiRowTabs – Verbesserte und verschönerte Version

    • FuchsFan
    • 27. August 2024 um 09:13
    Zitat von Herzmann

    Wie weit das auch für andere Versionen funktioniert, kann ich nicht sagen.

    Das ist auch in Nightly Version 131 machbar, aber sieht i.M. unschön aus, weil es hier mit den Tabreihen noch nicht stimmt.

  • MultiRowTabs – Verbesserte und verschönerte Version

    • FuchsFan
    • 26. August 2024 um 10:55
    Zitat von 2002Andreas

    Es ist ja auch noch eine Weile hin, bis Fx 131 Final wird. Von daher wird es bestimmt noch eine Lösung geben.

    Die Experten werden es bestimmt schaffen, das denke ich auch.:thumbup:

  • MultiRowTabs – Verbesserte und verschönerte Version

    • FuchsFan
    • 26. August 2024 um 10:50
    Zitat von 2002Andreas

    Zur Not öffnest du für jede Tabreihe ein neues Fenster vom Fx

    Nööö, das haben wir nicht nötig. Da haben wir doch noch andere Reserven in der Schublade (für alle Fälle).;)

  • MultiRowTabs – Verbesserte und verschönerte Version

    • FuchsFan
    • 26. August 2024 um 10:32
    Zitat von 2002Andreas

    Könnte evtl. damit also schon zu tun haben

    Das sind ja muntere Aussichten, danke Andreas.8|:)


    Ich muss mich korrigieren, auch das Script von BrokenHeart zeigt dieses Verhalten, habe ich bisher nicht bemerkt. Sorry!

  • MultiRowTabs – Verbesserte und verschönerte Version

    • FuchsFan
    • 26. August 2024 um 10:27
    Zitat von Herzmann

    Aber beziehst Du Dich auf 2 horizontale Tab-Reihen

    Auf diese, aber ich hatte vergessen zu erwähnen, dass ich hier nur in Nightly Version 131 teste (zukunftsorientiert ;)), falls das wichtig ist.

    Hier dann noch zur Erklärung die Bildchen. Es wird im Hintergrund zwar die zweite Reihe eröffnet, aber die Tabs werden nicht übertragen.

    Reihe gefüllt:

  • MultiRowTabs – Verbesserte und verschönerte Version

    • FuchsFan
    • 26. August 2024 um 09:57

    Herzmann

    Schon sehr lange bin ich Nutzer des Scriptes von BrokenHeart , und es funktioniert immer noch perfekt.

    Nun probiere ich natürlich auch immer dein Script, aber das läuft zumindest hier nicht rund, weil es einfach keine zweite Tabreihe öffnet (ist auf 2 gestellt). Den Newtab-Button habe ich farblich geändert (zur besseren Erkennung), ist nun die erste Tabreihe gefüllt, so wird dieser ausgeblendet, und es erscheint der originale. Dadurch wird natürlich auch keine zweite Reihe geöffnet.

    Was könnte da schief laufen?

Unterstütze uns!

Jährlich (2025)

0 %

0% (0,00 von 650 EUR)

Jetzt spenden
  1. Kontakt
  2. Datenschutz
  3. Impressum
Community-Software: WoltLab Suite™
Mastodon