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

bege

Zitat von Mira_Belle

Nur, verrate mir, uns, doch wie Du dem Code auf die Schliche gekommen bist. Bitte.

Hm, blindes Huhn findet auch mal'n Korn. Mal schauen, ob ich es noch rekonstruieren kann.

In den Browser-Werkzeugen gibt es beim Eintrag der Entwickler-Werkzeuge im Extras-Menü den Punkt event
Da zwei Mal geklickt ist der Befehl gDevToolsBrowser.toggleToolboxCommand(window.gBrowser, Cu.now()); zu sehen
Dann habe ich versucht, die Struktur des Skripteintrags für die Browser-Konsole auf diesen Befehl anzuwenden

Ich habe auch im Firefox Quellcode https://searchfox.org/mozilla-central/source nach den Pfaden gesucht, die in den Variablen angegeben sind, aber das mich in diesem Fall nicht viel weiter gebracht.

Edit: Doch was im Quellcode gefunden, nämlich dass innerhalb der Datei devtools/client/framework/devtools-browser.js der Befehl toggleToolboxCommand heißt. Also habe ich vermutet, dass ich entsprechend dem Code für die Browser-Konsole den Teil davor als Variable definieren muss.

Aber wie gesagt, blindes Huhn ..., oder ein Bastler braucht halt im Unterschied zu einem Programmierer viel Zeit und Glück.

Zitat von milupo

Ich habe auch etwas gebastelt, aber immer noch ohne appmenu_edit.uc.js. Es ist eine Notlösung. Ich habe einfach die Hilfe-Einträge in der appmenu.uc.js angelegt. Nutzt sie oder nutzt sie nicht.

Ja, da besteht mit AppMenu_edit.uc.js das gleiche Problem, dass der Klick auf einen Menüeintrag imitiert wird, anstatt dass der zugrunde liegende Befehl aufgerufen wird.

Jetzt muss ich aber ins Bett. Gute Nacht

Mira_Belle

Zitat von milupo

Ich habe auch etwas gebastelt, aber immer noch ohne appmenu_edit.uc.js. Es ist eine Notlösung. Ich habe einfach die Hilfe-Einträge in der appmenu.uc.js angelegt. Nutzt sie oder nutzt sie nicht.

JavaScript

{
		name: 'Hilfe erhalten',
		command: "let { require } = ChromeUtils.importESModule('resource://devtools/shared/loader/Loader.sys.mjs', {});\
		document.getElementById('menu_openHelp').click()",                        
         subdir: 'Hilfe'
		},
		{
		name: 'Problem mit Website melden',
		command: "let { require } = ChromeUtils.importESModule('resource://devtools/shared/loader/Loader.sys.mjs', {});\
             document.getElementById('help_reportBrokenSite').click()",
         subdir: 'Hilfe'
		},
		{
		name: 'Ideen und Feedback teilen…',
		command: "let { require } = ChromeUtils.importESModule('resource://devtools/shared/loader/Loader.sys.mjs', {});\
            document.getElementById('feedbackPage').click()",
         subdir: 'Hilfe'
		},
		{
		name: 'Fehlerbehebungsmodus…',
		command: "let { require } = ChromeUtils.importESModule('resource://devtools/shared/loader/Loader.sys.mjs', {});\
            document.getElementById('helpSafeMode').click()",
         subdir: 'Hilfe'
		},
		{
		name: 'Weitere Informationen zur Fehlerbehebung',
		command: "let { require } = ChromeUtils.importESModule('resource://devtools/shared/loader/Loader.sys.mjs', {});\
            document.getElementById('troubleShooting').click()",
         subdir: 'Hilfe'
		},
		{
		name: 'Betrügerische Website melden…',
		command: "let { require } = ChromeUtils.importESModule('resource://devtools/shared/loader/Loader.sys.mjs', {});\
            document.getElementById('menu_HelpPopup_reportPhishingtoolmenu').click()",
         subdir: 'Hilfe'
		},
		{
		name: 'Zu einem neuen Gerät wechseln',
		command: "let { require } = ChromeUtils.importESModule('resource://devtools/shared/loader/Loader.sys.mjs', {});\
            document.getElementById('helpSwitchDevice').click()",
         subdir: 'Hilfe'
		},
		{
		name: 'Über Firefox',
		command: "let { require } = ChromeUtils.importESModule('resource://devtools/shared/loader/Loader.sys.mjs', {});\
            document.getElementById('aboutName').click()",
         subdir: 'Hilfe'
		},

Alles anzeigen

Im Hauptmenü wird ein Ordner „Hilfe“ angelegt und darin sind die Untereinträge des Hilfe-Menüs. Sie funktionieren bei mir. Ich habe den Code unten bei mir vor // Hauptmenü Einträge - Funktionen ins Skript eingefügt.

Cool, echt klasse!
Da mir die "appmenu_edit.uc.js" echt Probleme bereitet, so toll ich die Idee des einfachen Verschiebens auch finde,
bin ich ernsthaft am Überlegen, ob es nicht besser wäre, die wichtigsten Menüs "einfach" nachzubauen
und die Menüs der Menüleiste dann "auszublenden".

Meine Buttons funktionieren auch mit all den Veränderungen nur ein einziges Mal. So hat das keinen Zweck!

Endor

bege

Danke für den Code ist bei Github schon geändert:

Codeänderung für Entwickler Werkzeuge · Endor8/userChrome.js@d40cf81

github.com

Mfg.
Endor

Mira_Belle

Endor Oh, schade.

Code

    isUrlbar: 2,  // 0: TabsToolbar; 1: navbar; 2: toolbar-menubar
    .
    .
    .
            if (Appmenu.isUrlbar === 1) {
            var navBar = document.getElementById("nav-bar-customization-target");
            navBar.insertBefore(ExternalAppBtn, navBar.firstChild);
        } else if (Appmenu.isUrlbar === 2) {
            var menubar = document.getElementById("toolbar-menubar");
            menubar.insertBefore(ExternalAppBtn, menubar.firstChild);
        } else {
            var TabsToolbar = document.getElementById("TabsToolbar");
            TabsToolbar.insertBefore(ExternalAppBtn, TabsToolbar.firstChild);
        }

Alles anzeigen

Nicht mit eingepflegt.

Endor

Mira_Belle

Ich teste das mal schnell.

Edit: Ist jetzt eingepflegt.
Vielen Dank Mira_Belle

Update Appmenu.uc.js · Endor8/userChrome.js@e69d176

Mfg.
Endor

Mira_Belle

Zitat von Endor

Ist jetzt eingepflegt.
Vielen Dank Mira_Belle

https://github.com/Endor8/userChr…2fbaa62907e52a9
Mfg.
Endor

Freu'

bege

Zitat von Sören Hentzschel

...
Das ist eine Folge dieser Änderung:
https://bugzilla.mozilla.org/show_bug.cgi?id=1893068
Vielleicht geht es schöner, aber das Einfachste ist, wir duplizieren etwas Code. Füge im zweiten Script in Zeile 33 (also da, wo jetzt eine leere Zeile ist) Folgendes ein:
...

Nochmal Danke für diesen Tipp. Ohne den wäre ich aufgeschmissen gewesen.

Wenn nach einem Update etwas mehr nicht funktioniert, ist es für mich einfacher das ganze Skript zu kopieren, anstatt es in einem der Skripte "AppMenu.uc.js oder "AppMenu_edit.uc.js" nachzubauen und nach Änderungen zu suchen. Deshalb habe ich das Skript als eigenes uc.js-Skript angelegt.

Das Skript ist hier zu finden:

browser-menubar.js - mozsearch

Ich habe nur die Zeilen 8 und 117 hinzugefügt und die Zeile 12 geändert. Die andere Arbeit überlasse ich lieber weiterhin den Mozilla-Entwicklern. 😉

Es sieht jetzt so aus:

JavaScript: browser-menubar.uc.js

/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*-
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* eslint-env mozilla/browser-window */

(function () { // ZUGEFÜGT!
document.addEventListener(
 "DOMContentLoaded",
 () => {
    let mainMenuBar = document.getElementById("AMpopup"); // GEÄNDERT!
    mainMenuBar.addEventListener("command", event => {
      switch (event.target.id) {
        // == edit-menu ==
        case "menu_preferences":
          openPreferences(undefined);
          break;

        // == view-menu ==
        case "menu_pageStyleNoStyle":
          gPageStyleMenu.disableStyle();
          break;
        case "menu_pageStylePersistentOnly":
          gPageStyleMenu.switchStyleSheet(null);
          break;
        case "repair-text-encoding":
          BrowserCommands.forceEncodingDetection();
          break;
        case "documentDirection-swap":
          gBrowser.selectedBrowser.sendMessageToActor(
            "SwitchDocumentDirection",
            {},
            "SwitchDocumentDirection",
            "roots"
          );
          break;

        // == history-menu ==
        case "sync-tabs-menuitem":
          gSync.openSyncedTabsPanel();
          break;
        case "hiddenTabsMenu":
          gTabsPanel.showHiddenTabsPanel(event, "hidden-tabs-menuitem");
          break;
        case "sync-setup":
          gSync.openPrefs("menubar");
          break;
        case "sync-enable":
          gSync.openPrefs("menubar");
          break;
        case "sync-unverifieditem":
          gSync.openPrefs("menubar");
          break;
        case "sync-syncnowitem":
          gSync.doSync(event);
          break;
        case "sync-reauthitem":
          gSync.openSignInAgainPage("menubar");
          break;
        case "menu_openFirefoxView":
          FirefoxViewHandler.openTab();
          break;

        // == menu_HelpPopup ==
        // (Duplicated in PanelUI._onHelpCommand)
        case "menu_openHelp":
          openHelpLink("firefox-help");
          break;
        case "menu_layout_debugger":
          toOpenWindowByType(
            "mozapp:layoutdebug",
            "chrome://layoutdebug/content/layoutdebug.xhtml"
          );
          break;
        case "feedbackPage":
          openFeedbackPage();
          break;
        case "helpSafeMode":
          safeModeRestart();
          break;
        case "troubleShooting":
          openTroubleshootingPage();
          break;
        case "help_reportSiteIssue":
          ReportSiteIssue();
          break;
        case "menu_HelpPopup_reportPhishingtoolmenu":
          openUILink(gSafeBrowsing.getReportURL("Phish"), event, {
            triggeringPrincipal:
              Services.scriptSecurityManager.createNullPrincipal({}),
          });
          break;
        case "menu_HelpPopup_reportPhishingErrortoolmenu":
          ReportFalseDeceptiveSite();
          break;
        case "helpSwitchDevice":
          openSwitchingDevicesPage();
          break;
        case "aboutName":
          openAboutDialog();
          break;
        case "helpPolicySupport":
          openTrustedLinkIn(Services.policies.getSupportMenu().URL.href, "tab");
          break;
            }
    });

    document
      .getElementById("menu_EditPopup")
      .addEventListener("popuphidden", () => {
        updateEditUIVisibility();
      });
  },
  { once: true }
);
}) (); // ZUGEFÜGT!

Alles anzeigen

bege

Sören Hentzschel

Beim Verschieben des Menüs "Ansicht"

in das mit Appmenu.uc.js erstellte Firefox-Menü RE: userChrome.js Scripte für den Fuchs (Diskussion) verschwinden im Untermenü "Symbolleisten" die ersten beiden Menüeinträge.

Mir ist aufgefallen, dass diese beiden Einträge das Attribut toolbarId haben, was die anderen Menüeinträge auch anderer Menüs nicht haben. Hängt das damit zusammen?

menuitem label="Menüleiste" id="toggle_toolbar-menubar" toolbarId="toolbar-menubar"

menu label="Lesezeichen-Symbolleiste" id="toggle_PersonalToolbar" toolbarId="PersonalToolbar"

Fällt dir ein Workaround ein, um diese Menüeinträge auch im verschobenen Menü angezeigt zu bekommen?

Edit: Diese beiden Einträge werden in "https://searchfox.org/mozilla-centra…menubar.inc#125 im Ansicht-Menü gar nicht definiert! Sie tauchen auch an an anderen Stellen in der Benutzeroberfläche mit der gleichen ID auf. Und die IDs scheinen auch nicht fest definiert zu sein, sondern z.B. in einer solchen Codezeile https://searchfox.org/mozilla-centra…-places.js#1463

Ich konnte nicht herausfinden, wo und wie diese Menüeinträge und ihre IDs definiert werden.

FuchsFan

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?

milupo

Ich würde ja sagen, dass du in Zeile 13 deiner userChrome.css noch hinter .tab-close-button ein :hover setzen musst.

2002Andreas

Zitat von milupo

ein :hover setzen musst.

Ist doch vorhanden:

Zitat von FuchsFan

.tabbrowser-tab:hover .tab-close-button {

Nur mal so.

Zitat von FuchsFan

was wird hier wodurch verhindert?

In Zeile 5 sagst du extra: fill: white
Aber in Zeile 10 soll er unsichtbar sein.

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

Im Skript habe ich das nicht getestet.

milupo

Zitat von 2002Andreas

Ist doch vorhanden:

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

FuchsFan

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.

2002Andreas

Zitat von milupo

auch speziell auf .tab-close-button?

Es reicht den Tab zu berühren, dann erscheint der X Button in rot, wenn ich aus color = fill mache.

FuchsFan

Zitat von milupo

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

Aus der userChrome.css heraus, ja.

milupo

Stelle doch mal das veränderte Skript ein; wenn es nicht an dem liegt, worauf Andreas hingewiesen hat, ist dir vielleicht ein Fehler beim Einfügen unterlaufen.

FuchsFan

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

2002Andreas

Zitat von FuchsFan

Schließe ich aus

JavaScript

// ==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;
        fill: 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

FuchsFan

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;
}

2002Andreas

Zitat von FuchsFan

soll weiß bleiben bei Tabberührung

Dann habe ich das falsch verstanden, sorry.

Aber dann ist das schon falsch:

Denn damit wird das schon bei hover auf den Tab gemacht.