Anpassungen wegen Proton

2002Andreas

Zitat von FuchsFan

Oder liegt es an den Base64-Dateien?

Es funktioniert mit base64 oder direktem Pfad:

CSS

#appMenu-new-tab-button2::before {
  margin-right: 3px !important; 
  margin-left: -6px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABXklEQVQ4jaXRvWvCQBgG8PwJXR0cuwkdBJ0iHVyUYDYd7OigLrp1KwREnLIELOLkuQQiCEEIhUxZ4qZTlS7imiGKg40f8HQoOXMxYqEHD4GD58f7Xjjuv0e3lghnqE+hW0v8GTiezkyG+hSpfAWj8YQiQrUPP8H7SEAhBnRreYWMxhO8dXpI8uJ9IJWv0IQnvgtsdnssVg6dIggI1T6SvHhBhvqUKS9WDjQi0wjVPgMoxECSFy+rBYHNbg+NyPBcFZ6r4rzuQCMy+2jhoxCDln0gKoNuiwlFFWLQsg/g24LnqvTrT3Ned3D6esXRLkFqFlhgsXLo/reKh3kNR7uEWS/GAsFfNui2roBgeWsKmPViqJcz0e8SBKLKW1OAJsVRzCVuA1E7+2UfyKbj0YDSbsBzVRzmNWxNAZ/GC2xVxMf7MzQpTvP0+HAbUNoNSM0C6uUMirkEsunfQjgcx3E/R0ccGxq+wikAAAAASUVORK5CYII=") !important;
  background-repeat: no-repeat !important;
  background-position: 0px 0px !important;
  background-size: 15px 15px !important;
}

Alles anzeigen

Boersenfeger

CSS

    /* Tabs rund und farbig */

    /* Angaben für die TAB-Leiste*/

    /* TAB normal (inaktiv):
    * Hintergrundfarbe, Schriftfarbe,
    * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
    * unten kein Rahmen -> Abschlußrahmen vom Container.*/

    
    #TabsToolbar .tabbrowser-tab {
    color: black !important;
    border: 1px solid !important;
    border-bottom: 1px solid black !important;
    border-radius: 14px 14px !important;
    margin-top: 0px !important;
    padding: 0px 0 !important;  }

    /* TAB bei bei angewähltem TAB (aktiv):
    * Hintergrundfarbe, Rahmen,
    * Schriftfarbe.*/
 
    #TabsToolbar .tabbrowser-tab[selected="true"] {
    background: red !important;
    font-weight:bold !important;
    color: black ! important; }

    /* Tab-Icon etwas größer,
    * links weniger, unten etwas mehr Abstand zum TAB-Rand.*/
 
    #TabsToolbar .tab-icon-image {
    height: 22px !important;
    width:  22px !important;
    margin-left: 20px !important;
    margin-bottom: 0px !important; }
        
    /* Tab-Schließen-Button:
    * Rechts weniger Abstand zum TAB-Rand, etwas größer,
    * Textfarbe (Kreuz)
    * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt.*/
 
    #TabsToolbar .tab-close-button {
    margin-right: 1px !important;
    padding: 0 !important;
    color: black !important; }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 18px !important;
    width:  18px !important;
    background-color: red !important;
    border-radius: 5px !important; }

    /* Schliessen-Button nur wenn angewählt */

    tab:not([selected]) .tab-close-button {display: none !important; }

    /* Alle anderen Elemente in den TABs ohne Hintergrund. */

    #TabsToolbar .tabbrowser-tab * {
    background: none !important; } 
 

    /* Schriftgröße Tabs */

    .tab-text {
    font-size:15px !important; }
    
    /*Damit wird der Tabtext am Ende nicht ausgeblendet*/
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
    direction: ltr;
    mask-image: linear-gradient(to left, transparent, black 0em) !important; }
    
    /* Doppelte Schliessung ausblenden */

    #TabsToolbar > .titlebar-buttonbox-container {
    display:none !important; }    

    /* Tabs Proton-Design */

    :root {
    --proton-tab-radius: 0px !important;
    --proton-tab-block-margin: 0px !important;
    --inline-tab-padding: 10px !important; 
    }

    #TabsToolbar {
    min-height: 36px !important;
    max-height: 36px !important;
    border-top: 1px solid #B2B2B2 !important;
    border-bottom: 1px solid #B2B2B2 !important; 
    margin-bottom: 1px !important;
    padding-left: 2px !important;}

    #TabsToolbar .toolbarbutton-1 {
    margin-top: 2px !important;
    margin-bottom: 2px !important;}

    #TabsToolbar .toolbarbutton-1 > image {
    padding: 2px 4px !important;}

    #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background {
    box-shadow: none !important;}

    .tabbrowser-tab {
    box-shadow: none !important;
    margin-right: 0 !important;}
    
    #tabbrowser-tabs:not([positionpinnedtabs]) > 
    #tabbrowser-arrowscrollbox > 
    .tabbrowser-tab[pinned] + 
    .tabbrowser-tab:not([pinned]) {
    margin-inline-start: 6px !important;}

    .tabbrowser-tab .tab-content {
    background-image: linear-gradient(to bottom, dimgrey 0%, dimgrey 14%, dimgrey 14%, dimgrey 100%) !important;
    padding: 0 3px !important;
    margin-top: 2px !important;
    margin-bottom: 1px !important;}
    
    .tabbrowser-tab[selected="true"] .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, dimgrey 14%, dimgrey 100%) !important;
    margin-top: 2px !important;
    margin-bottom: 1px !important;}
    
    .tabbrowser-tab:hover .tab-content {
    background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;}
    
    .tabbrowser-tab[selected="true"]:hover .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;} 

    .tab-throbber:not([pinned]),
    .tab-sharing-icon-overlay:not([pinned]),
    .tab-icon-pending:not([pinned]),
    .tab-icon-image:not([pinned]) {
    margin-top: 2px !important;
    margin-inline-end: 5px !important;}

    .tabbrowser-tab .tab-content .tab-text.tab-label,
    .tabbrowser-tab:hover .tab-content .tab-text.tab-label {
    margin-top: 1px !important;}

    /* Rahmen um die Tableiste durchsichtig */

    #TabsToolbar {
    border: 0.2px solid transparent !important;}
     
    #TabsToolbar:hover {
    border: 0.2px solid transparent !important;}     

    .tabbrowser-tab[label*=" - YouTube"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"] .tab-content {
    background-image: linear-gradient(to bottom, red 0%, red 14%, red 14%, red 100%) !important;}
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"] .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, red 14%, red 100%) !important;}
    
    .tabbrowser-tab[label*=" - YouTube"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"]:hover .tab-content {
    background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;}
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"]:hover .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;}

    .tabbrowser-tab .tab-content vbox.tab-label-container.proton {
    -moz-box-orient: horizontal !important;} 
    
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton hbox.tab-icon-sound {
    margin-top: 3px !important;
    margin-right: 0px !important;} 
    
    .tab-icon-sound[soundplaying="true"],
    .tab-icon-sound[muted="true"],
    .tab-icon-sound[activemedia-blocked="true"] {
    background: #FFF !important;
    padding: 0 1px !important;}
    
    .tab-icon-sound[soundplaying="true"] .tab-icon-sound-image,
    .tab-icon-sound[muted="true"] .tab-icon-sound-image,
    .tab-icon-sound[activemedia-blocked="true"] .tab-icon-sound-image {
    fill: #F10 !important;}

    .tab-icon-sound-image {
    height: 1.9em !important;}
    
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-blocked-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-playing-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-muted-label"] {
    display: none !important;}

    /* Tab Beschriftung mittig */
    
    .tab-content {
    display: flex !important; 
    justify-content: center !important;
    align-items: center !important;}

    .tab-label-container {
    margin: auto !important;}

    .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    flex-shrink: 0 !important; 
    padding: 0px !important;
    width: 16px !important;}
    
    /* Feste Breite der Tabs */
    
    .tabbrowser-tab:not([pinned]) {
    width: auto !important; /* die Breite der Tabs wird dynamisch angepasst */
    max-width: 230px !important;    /* Bis zu dieser Breite */
    }

Alles anzeigen

Dieser CSS-Code wurde mit Hilfe von 2002Andreas für Nightly mit Proton angepasst.

Einige Abstände habe ich danach modifiziert und er funktioniert sehr gut.

Nun habe ich die Zeilen 208 - 213, letzter Abschnitt, angefügt und dieser hinterlässt nun beim Löschen von Tabs Spuren:

Liegts an dem Schnipsel?

milupo

Endors Dateien sollten auf jeden Fall da sein. Denn es sind externe Dateien, die nicht von Mozilla zur Verfügung gestellt werden. Bei von Mozilla zur Verfügung gestellten Dateien könnte es sein, dass da unter Proton welche wegfallen. Aber Endors Dateien sollten auf jeden Fall vorhanden sein. Wenn Mozilla allerdings neue Einträge eingeführt hat, müssten dann natürlich auch neue Grafiken dafür gefunden werden. Dann ist Endor wieder gefragt.

Bei Base64-Grafiken sollte es überhaupt keine Probleme gehen, denn da brauchst du keine Rücksicht auf Dateipfade zu nehmen. Wenn du mit file:/// eingebunden hast, kommt es darauf an: Hast du einen vollständigen Pfad, der auf dein altes Profil verweist, sollte das eigentlich auch funktionieren, wenn du nicht den icons-Ordner mit den Grafiken im Nichtproton-Profil entfernt hast. Bei einem relativen file:///-Pfad, also so etwas wie file:///../icons, sollte die Anzeige ebenfalls funktionieren, wenn du im Proton-Profil den Ordner icons an der gleichen Stelle einfügst wie im Nichtproton-Profil, z. B. im Ordner chrome des Profils.

Probleme könnte es geben, wenn Mozilla den Selektor geändert hat, der dann natürlich in deinen Codes geändert werden müsste. Oder, vielleicht, wenn die Grafik mit list-style-image statt background-image eingebunden wird. Vielleicht müsste auch appearance: none; angegeben werden, wenn es fehlt. Bisher war das auch -moz-appearance: none. Eine neue Oberfläche ist ein gute Gelegenheit Veraltetes herauszuschmeißen, in diesem Fall -moz-appearance. -moz-appearance sollte also auf appearance umgestellt werden.

Boersenfeger

Ich bin verwirrt... es geht nicht um Icons sondern um die Lücken, die das Löschen von Tabs in der Tableiste hinterlässt. siehe Screenshot

moz-appearance wurde bereits umgestellt und ist im obigen Code nicht mehr vorhanden

milupo

Siehe hier:

Zitat von FuchsFan

Danke, dann stimmt das noch. Kannst du mir sagen, wieso kein einziges Icon von Endor mehr angezeigt wird (einige sind ja sowieso weg)?

und hier:

Zitat von FuchsFan

und trotzdem wird in keinem Profil im Hamburger ein Icon angezeigt

Boersenfeger

Ein Verweis darauf wäre schön gewesen... dieser Thread stammt anfänglich von mir und wurde dann von FuchsFan mitgenutzt..

milupo

OK, aber du bist dazwischen gerutscht. Als ich meinen Beitrag angefangen habe zu schreiben, war dein Beitrag noch nicht da.

2002Andreas

Zitat von Boersenfeger

Liegts an dem Schnipsel?

Der funktioniert hier einwandfrei.

Du hast aber auch die Tabs unten, von daher denke ich könnte es am Script dafür liegen.

Nutzt du eine mehrzeilige Tableiste oder willst du nur die Tableiste unten haben?

Nur unten..dann teste bitte mal:

JavaScript

//Tableiste unten

(function(){
var tabbar = document.getElementById("TabsToolbar");
tabbar.parentNode.parentNode.appendChild(tabbar);
})()

Boersenfeger

Exakt dieses Script nutze ich..

Darüber hinaus noch

JavaScript

// ==UserScript==
// @name           TabFocus.uc.js
// @startup        window.tab_hover.onLoad();
// @shutdown       window.tab_hover.onUnload();
// @version        2014.8.23
// @note           修改为无需重启的方式
// ==/UserScript==

var tab_hover = {
   event:null,
   tid:null,

   getTab: function(element) {
      while (element && element.localName != 'tab') {
        element = element.parentNode;
      };
      return element;
   },
   onLoad: function() {
      gBrowser.tabContainer.addEventListener("mouseout", tab_hover.onMouseOut, false);
      gBrowser.tabContainer.addEventListener("mouseover", tab_hover.onMouseOver, false);
   },
   onUnload: function() {
      gBrowser.tabContainer.removeEventListener("mouseover", tab_hover.onMouseOver, false);
      gBrowser.tabContainer.removeEventListener("mouseout", tab_hover.onMouseOut, false);
   },

   onMouseOver: function(event) {
      tab_hover.event = event.target;
      tab_hover.tid = setTimeout(function() {
         gBrowser.selectedTab = tab_hover.getTab(tab_hover.event);
      }, 250);
   },
   onMouseOut: function() {
      clearTimeout(tab_hover.tid);
   }
};
tab_hover.onLoad();

Alles anzeigen

JavaScript

/* Tabs nummerieren */
// ==UserScript==
// @name           Numbered Tabs
// @namespace      http://anttirt.net/
// @description    Adds numbers to tab labels (useful with eg. Pentadactyl)
// @include        main
// @compatibility  Firefox 4.0
// @author         anttirt
// @version        1.0b
// @homepage       https://github.com/anttirt/numbered-tabs-firefox
// ==/UserScript==

(function() {
    var stripPat = /^\d\d*  /;
    var container = gBrowser.tabContainer;

    function update(event) {
        var tab = event.target;
        if(typeof tab.tabIndex == "undefined") {
            updateAll();
        }
        else {
            tab.label = String(tab.tabIndex) + "  " + tab.label.replace(stripPat, "");
        }
    }

    function updateAll(event) {
        var skip = false;
        for(var i = 0; i < container.allTabs.length; ++i) {
            var tab = container.allTabs[i];
            if(event.type == "TabClose" && tab == event.target) {
                skip = true;
                continue;
            }
            tab.tabIndex = i + (skip ? 0 : 1);
            tab.label = String(tab.tabIndex) + "  " + tab.label.replace(stripPat, "");
        }
    }

    container.addEventListener("TabAttrModified", update, false);
    container.addEventListener("TabOpen", updateAll, false);
    container.addEventListener("TabMove", updateAll, false);
    container.addEventListener("TabClose", updateAll, false);
})();

Alles anzeigen

2002Andreas

Zitat von Boersenfeger

Darüber hinaus noch

Ich habe mal:

den CSS Code und alle deine Scripte installiert.

Hier gibt es keinerlei Probleme mit Lücken zwischen den Tabs

Boersenfeger

Ich habe nun alle Scripte und alle anderen CSS-Codes entfernt und Zug um Zug wieder aktiviert.

Es bleibt dabei.. wenn dieser Schnipsel aktiv ist, kommt es zu den beschriebenen Lücken... Ich lasse ihn nun weg und gut ist.

CSS

    /* Feste Breite der Tabs */
    
    .tabbrowser-tab:not([pinned]) {
    width: auto !important; /* die Breite der Tabs wird dynamisch angepasst */
    max-width: 230px !important;    /* Bis zu dieser Breite */
    }

Vielleicht gibts noch eine andere Möglichkeit die Tabs etwas breiter zu gestalten. Es braucht nicht unbedingt eine flexible Breite sein. 200 pixel wären gut, 230 besser...

FuchsFan

Zitat von 2002Andreas

Es funktioniert mit base64 oder direktem Pfad:

Nun habe ich mal diesen Code in die Datei von Endor eingefügt, dann ist das Icon da. Darauf aufbauend wollte ich andere (privates Fenster, usw,) anzeigen, aber es passiert nichts. Haben sich da eventuell doch die Selektoren geändert?

In den Untermenüs, Hilfe z.B., werden alle Icons angezeigt. Ist ja a Wahnsinn!

Zitat von Boersenfeger

dieser Thread stammt anfänglich von mir und wurde dann von FuchsFan mitgenutzt..

Nicht dass du mich vom Platz verweist.

milupo

Zitat von FuchsFan

Darauf aufbauend wollte ich andere (privates Fenster, usw,) anzeigen, aber es passiert nichts. Haben sich da eventuell doch die Selektoren geändert?

Du redest vom Hamburger-Menü? Da hat sich einiges geändert, die Einträge und natürlich auch die Selektoren.

2002Andreas

Zitat von FuchsFan

wollte ich andere (privates Fenster, usw,) anzeigen

CSS

#appMenu-new-private-window-button2::before {
  margin-right: 3px !important; 
  margin-left: -6px !important;
  content: '' !important;
  display: block !important;
  width: 19px !important;
  height: 15px !important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABXklEQVQ4jaXRvWvCQBgG8PwJXR0cuwkdBJ0iHVyUYDYd7OigLrp1KwREnLIELOLkuQQiCEEIhUxZ4qZTlS7imiGKg40f8HQoOXMxYqEHD4GD58f7Xjjuv0e3lghnqE+hW0v8GTiezkyG+hSpfAWj8YQiQrUPP8H7SEAhBnRreYWMxhO8dXpI8uJ9IJWv0IQnvgtsdnssVg6dIggI1T6SvHhBhvqUKS9WDjQi0wjVPgMoxECSFy+rBYHNbg+NyPBcFZ6r4rzuQCMy+2jhoxCDln0gKoNuiwlFFWLQsg/g24LnqvTrT3Ned3D6esXRLkFqFlhgsXLo/reKh3kNR7uEWS/GAsFfNui2roBgeWsKmPViqJcz0e8SBKLKW1OAJsVRzCVuA1E7+2UfyKbj0YDSbsBzVRzmNWxNAZ/GC2xVxMf7MzQpTvP0+HAbUNoNSM0C6uUMirkEsunfQjgcx3E/R0ccGxq+wikAAAAASUVORK5CYII=") !important;
  background-repeat: no-repeat !important;
  background-position: 0px 0px !important;
  background-size: 15px 15px !important;
}

Alles anzeigen

FuchsFan

Zitat von milupo

Endors Dateien sollten auf jeden Fall da sein. Denn es sind externe Dateien, die nicht von Mozilla zur Verfügung gestellt werden.

Erst einmal danke für deine Erläuterungen, milupo. Die Dateien hatte ich schon vorab alle auf "Vordermann" gebracht, nur hapert es bei mir mit der Feststellung der Selektoren, ist doch nicht so einfach.

2002Andreas

Zitat von FuchsFan

ist doch nicht so einfach.

Funktioniert genau wie mit allen anderen Einträgen auch.

milupo

Zitat von FuchsFan

Erst einmal danke für deine Erläuterungen, milupo. Die Dateien hatte ich schon vorab alle auf "Vordermann" gebracht, nur hapert es bei mir mit der Feststellung der Selektoren, ist doch nicht so einfach.

Ich hatte das Hamburger-Menü erst nach meinem Beitrag #223 überprüft, deswegen ist der Beitrag #223 auch so allgemein gehalten.

FuchsFan

Zitat von 2002Andreas

Funktioniert genau wie mit allen anderen Einträgen auch.

Glaube ich dir gern, aber da gehört doch schon eine gewisse Übung und Erfahrung dazu, und die fehlt mir immer noch.

Aber der Code #234 funktioniert auch, dann muss ich ja wohl an die Arbeit, um das zu bereinigen. Wenn ich nicht weiter komme, dann rufe ich um Hilfe.

2002Andreas

Zitat von FuchsFan

die fehlt mir immer noch

Entwickler-Werkzeuge öffnen

Rechtsklick auf die 3 Punkte oben rechts davon.

Haken setzen bei: Popups nicht automatisch ausblenden.

Dann das Hamburger-Menü öffnen.

Dann links auf Inspektor klicken

Dann mit der Maus den gesuchten Eintrag auswählen.

FuchsFan

Zitat von 2002Andreas

Dann mit der Maus den gesuchten Eintrag auswählen.

Ja, danke Andreas, das habe ich schon durch, aber erst einmal den Eintrag finden.