neue Schaltfläche "Einheitliche Erweiterungen"

FuchsFan

Es ist ja Begeisterung für diesen wunderbaren Button aufgekommen, deshalb eine Bastelempfehlung für das Popup-Menü dazu.

CSS

/* Popup-Menü HG und Border */
#unified-extensions-view.cui-widget-panelview{
    background-color: gainsboro !important;
    border: 4px solid royalblue !important; 
} 

/* Überschrift "Erweiterungen" */
#unified-extensions-view.cui-widget-panelview vbox.panel-header h1 span {
    color: #804000 !important;
    font-size: 1.6em !important;
}    

/* Boxen mit den Erweiterungen */
#unified-extensions-panel .unified-extensions-item {
    background-color: beige !important;
    border: 2px solid grey !important; 
    margin: 2px 10px 0 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
} 

/* große Button im Menü */
#unified-extensions-area.customization-target .toolbarbutton-1.unified-extensions-item-action-button.subviewbutton.panel-no-padding.webextension-browser-action{
    border: 1px solid silver !important; 
    background-color: #efefef !important;
    padding: 4px 0 4px 10px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
#unified-extensions-area.customization-target .toolbarbutton-1.unified-extensions-item-action-button.subviewbutton.panel-no-padding.webextension-browser-action:hover{
    background-color: #e6ffff !important;
}    

/* Namen der Erweiterung */
.unified-extensions-item-contents label.unified-extensions-item-name{
    color: royalblue !important;
    font-size: 1.2em !important;   
    font-weight: 700 !important;
}

/* Text unter dem Namen der Erweiterung */
[data-l10n-id="origin-controls-state-always-on"],
[data-l10n-id="origin-controls-state-no-access"] {
    color: brown !important;
}    

/* Text "Erweiterung öffnen" (bei hover sichtbar) */
[data-l10n-id="origin-controls-state-runnable-hover-open"] {
    color: magenta !important;
    font-weight: 700 !important;
}

/* Text "Erweiterung ausführen" (bei hover sichtbar) */
[data-l10n-id="origin-controls-state-runnable-hover-run"] {
    color: green !important;
    font-weight: 700 !important; 
}

/* max. Ausdehnung der Boxen von inaktiven Erweiterungen (unten) */
#unified-extensions-view.cui-widget-panelview vbox.panel-subview-body vbox.unified-extensions-list {
    max-width: 450px !important;
}    

/* Namen der inaktiven Erweiterungen */
.unified-extensions-item-name {
    color: grey !important;
    font-size: 1.2em !important;   
    font-weight: 700 !important;
}    

/* Button mit dem Zahnrad (Verwalten) */
toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton {
    background-color: gainsboro !important;
    border: 1px solid silver !important;
}
.unified-extensions-item-menu-button.subviewbutton {
    background-color: gainsboro !important;
    border: 1px solid silver !important;
    margin-right: -3px !important;
}
/* Button mit dem Zahnrad bei Hover (Verwalten) */
toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton:hover,
.unified-extensions-item-menu-button.subviewbutton:hover {
    background-color: gold !important;
    border: 1px solid brown !important;
    color: red !important;
}    

/* Button "Erweiterungen verwalten" (unten) */    
#unified-extensions-view.cui-widget-panelview toolbarbutton#unified-extensions-manage-extensions.subviewbutton.panel-subview-footer-button.unified-extensions-manage-extensions {
    background-color: #e3e3b5 !important;
    border: 1px solid grey !important;
}
#unified-extensions-view.cui-widget-panelview toolbarbutton#unified-extensions-manage-extensions.subviewbutton.panel-subview-footer-button.unified-extensions-manage-extensions:hover {
    background-color: greenyellow !important;
    border: 1px solid brown !important;
}

/* Icon eingefügt bei "Erweiterungen verwalten" */    
#unified-extensions-manage-extensions::before {
    margin-right: 10px !important; 
    margin-left: 28px !important;
    content: '' !important;
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    background-image: url("file:///C:/FoxIcons/0109.png") !important;
    background-repeat: no-repeat !important;
    background-position: 0px 0px !important;
    background-size: 18px 18px !important;
}    
/* Text "Erweiterungen verwalten" */    
[data-l10n-id="unified-extensions-manage-extensions"] {       
    color: blue !important;
    font-size: 1.3em !important;   
    font-weight: 700 !important;
    padding-left: 0px !important;
}

Alles anzeigen

2002Andreas

Zitat von FuchsFan

Es ist ja Begeisterung für diesen wunderbaren Button aufgekommen

Horstmann

Zitat von FuchsFan

Es ist ja Begeisterung für diesen wunderbaren Button aufgekommen, deshalb eine Bastelempfehlung für das Popup-Menü dazu.

Ja, ich bin ganz ausser mir vor Freude ...

Danke für die ausführliche CSS ; ich hatte auch schonmal das Gröbste für meinen Geschmack aufgeräumt .

CSS

/*  Eigenes Icon  */
#unified-extensions-button > .toolbarbutton-icon {
    list-style-image: url("icons/extensionsmall.png") !important;
    opacity: 0.85 !important;
}

/*  popup top spacing  */
#unified-extensions-panel {
    margin-top: 2px !important;
}

/*  header spacing  */
#unified-extensions-panel .panel-header {
    padding-bottom: 0px !important;
}

/*  text bottom  */
#unified-extensions-manage-extensions .toolbarbutton-text {
    text-align: center !important;
}

/*  pref buttons  */
.unified-extensions-item-menu-button {
    border: none !important;
}

.unified-extensions-item-menu-button:not(:hover) {
    background-color: inherit !important;
}

.unified-extensions-item-menu-button:hover .toolbarbutton-icon {
    fill: white !important;
}

/*  extensions box  */
.unified-extensions-item-action-button:not(:hover) {
    background-color: inherit !important;
}

/* text box below label */
.unified-extensions-item-message-deck {
    font-size: 12px !important;
    padding-top: 4px !important;
}

Alles anzeigen

Mira_Belle

@FuchsFan

Danke für den Code.

Kann mir jemand erklären, wie ich an diesen Text herankomme, um ihn beim Hovern zu ändern?

.unified-extensions-item-contents label.unified-extensions-item-name,

einfach :hover hintendran hängen klappt nicht.

Mira_Belle

Habe den erwünschten Effekt hinbekommen!

Nur ob der Code so wirklich gut ist!

CSS

.unified-extensions-item-contents label.unified-extensions-item-name{
/*    color: #E0E0E0 !important; */
    font-size: 1.2em !important;  
    font-weight: 700 !important;
}
:is(:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton):not([disabled]) {
    color: #E0E0E0 !important;
}
:is(:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton):not([disabled]):hover {
    color: #FFA500 !important;
}

Alles anzeigen

Das schaut dann doch schon besser aus.

CSS

:is(toolbarbutton):not([disabled]) {
    color: #E0E0E0 !important;
}
:is(toolbarbutton):not([disabled]):hover {
    color: #FFA500 !important;
}

2002Andreas

Zitat von Mira_Belle

Das schaut dann doch schon besser aus.

Warum :is?

Das nimmt man, wenn man etwas zusammenfassen will.

Beispiel:

:is(menu,menuitem)

Warum :not([disabled])?

Die angezeigten Erweiterungen sind immer aktiviert.

Warum toolbarbutton?

Damit werden alle toolbarbutten im Fx angesprochen.

Hier mal alle in rot dann:

Und so sollte der Code dann aussehen:

CSS

toolbarbutton .unified-extensions-item-contents label.unified-extensions-item-name {
    color: red !important;
}

toolbarbutton:hover .unified-extensions-item-contents label.unified-extensions-item-name {
    color: blue !important;
}

FuchsFan

Zitat von 2002Andreas

Und so sollte der Code dann aussehen:

Guten Morgen, Andreas!

Ich habe da bei Hover noch unterteilt, oben für die aktiven, und unten die inaktiven Erweiterungen. Das funktioniert auch.

CSS

.unified-extensions-item-action-button.subviewbutton.panel-no-padding.webextension-browser-action:hover vbox.unified-extensions-item-contents label.unified-extensions-item-name{
    color: black !important;
    font-size: 1.2em !important;   
    font-weight: 700 !important;
}

CSS

.unified-extensions-item-action-button.subviewbutton:hover vbox.unified-extensions-item-contents label.unified-extensions-item-name {
    color: red !important;
    font-size: 1.2em !important;   
    font-weight: 700 !important;
}

2002Andreas

Zitat von FuchsFan

und unten die inaktiven Erweiterungen

Mache ich etwas falsch

Inaktive werden mir in dem Popup gar nicht angezeigt.

FuchsFan

Zitat von 2002Andreas

Inaktive werden mir in dem Popup gar nicht angezeigt.

Das richtet sich wohl immer nach deren Aufgabe, so denke ich. Bei mir in der beta sind es immer diese zwei Erweiterungen, sind m.M.n. erst aktiv , wenn auch eine Website geöffnet ist.

2002Andreas

Zitat von FuchsFan

Das richtet sich wohl immer nach deren Aufgabe

Alles klar

Es gibt den Unterschied: aktiv oder deaktiviert.

Deaktivierte Erweiterungen werden nicht angezeigt, inaktive schon.

Aktiviert: nur eben je nach Einstellung der jeweiligen Webseite inaktiv oder aktiv.

FuchsFan

Zitat von 2002Andreas

Aktiviert: nur eben je nach Einstellung der jeweiligen Webseite inaktiv oder aktiv.

Und wieder Licht ins Dunkel gebracht.

Sören Hentzschel

Nur für's Protokoll: extensions.unifiedExtensions.enabled existiert in der Nightly-Version (Firefox 111) bereits nicht mehr. Der Schalter erscheint noch in about:config, weil die Zeile in der Datei firefox.js versehentlich durch einen anderen Patch wieder eingefügt wurde, aber es gibt keinen Code mehr, der diese Option liest.

Mira_Belle

@2002Andreas & @FuchsFan

Ich danke Euch beiden für die Anregungen und den Code.

Das ist dann faraus geworden:

CSS

.unified-extensions-item-action-button.subviewbutton.panel-no-padding.webextension-browser-action vbox.unified-extensions-item-contents label.unified-extensions-item-name {
    color: #E0E0E0 !important;    
    font-size: 1.2em !important;   
    font-weight: 700 !important;
}
.unified-extensions-item-action-button.subviewbutton.panel-no-padding.webextension-browser-action:hover vbox.unified-extensions-item-contents label.unified-extensions-item-name {
    color: #FFA500 !important;
}
.unified-extensions-item-action-button.subviewbutton vbox.unified-extensions-item-contents label.unified-extensions-item-name {
    color: #5c5c5c !important;
    font-size: 1.2em !important;   
    font-weight: 700 !important;
}
.unified-extensions-item-action-button.subviewbutton:hover vbox.unified-extensions-item-contents label.unified-extensions-item-name {
    color: #a9a9a9 !important;
}

Alles anzeigen

@Sören Hentzschel

Wenn es ab Firefox 111 extensions.unifiedExtensions.enabled nicht mehr gibt,

was nimmt man dann?

Sören Hentzschel

Wie ich von Anfang an sagte: Gar nichts. Firefox setzt das Vorhandensein dieses Menüs voraus. Schaltflächen neu installierter Erweiterungen werden darin platziert.

2002Andreas

Zitat von Mira_Belle

was nimmt man dann?

Den Button einfach behalten

Mira_Belle

Ich verstehe nicht!

Soll das heißen, dass am CSS nichts geändert werden muss?

2002Andreas

Zitat von Mira_Belle

dass am CSS nichts geändert werden muss?

Du erstellst doch extra das CSS für den Button.

Der config Eintrag ist doch nur zum Entfernen von dem Button.

Sören Hentzschel

Das soll heißen, dass es für die meisten, die nicht grundsätzlich auf Erweiterungen verzichten, keine gute Idee sein dürfte, den Button via CSS auszublenden. Der Button gehört genauso zu Firefox wie der Menü-Button rechts davon. Blendet man den Button nur optisch aus, werden Erweiterungen nicht plötzlich in der Symbolleiste platziert.

Gegen ausschließlich optische Anpassungen via CSS spricht natürlich nichts.

Mira_Belle

Mag alles sein, doch ich glaube früher oder später wird der Punkt Erweiterungen unter about:addons wegfallen,

und überhaupt könnte es ja möglich sein, dass die da noch mehr vorhaben, sodass es diese "Einstellungsseite" irgendwann

gar nicht mehr geben wird.

So, zurück zum Thema, ich glaube, ich habe das (mein) Menü so weit fertig.

Was mir fehlt, sind zwei Symbole!

Für "An Symbolleiste anheften" schwebt mir so etwas wie ein Pin vor.

Für "Erweiterung verwalten" eine Mischung aus "Lesezeichen verwalten",

nur anstatt des Sterns dann ein

Kennt jemand, jemanden, der jemanden kennt, der SVG's erstellen kann und für den so etwas nur einen Klacks darstellt?

Hach, hier noch mein Code.

CSS

    /*--------------------------*/
    /****  Erweiterungsmenü  ****/
    /*--------------------------*/

/* Popup-Menü HG und Border */
#unified-extensions-view.cui-widget-panelview{
    border: 3px solid #FFA500 !important;
    border-radius: 8px !important;
} 

/* Überschrift "Erweiterungen" */
#unified-extensions-view.cui-widget-panelview vbox.panel-header h1 span {
    color: #E0E0E0 !important;
    font-size: 1.4em !important;
}    

/* Boxen mit den Erweiterungen */
#unified-extensions-panel .unified-extensions-item {
    background-color: #2B2B2B !important;
    border: 1px solid #FFA500 !important;
    border-radius: 6px !important; 
    margin: 1px 15px 5px 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
} 

#unified-extensions-panel .unified-extensions-item:hover { 
    background-color: #5c5c5c !important;  /* #5c5c5c */
} 

.unified-extensions-item-action-button.subviewbutton.panel-no-padding.webextension-browser-action vbox.unified-extensions-item-contents label.unified-extensions-item-name {
    color: #E0E0E0 !important;    
    font-size: 1.2em !important;   
    font-weight: 700 !important;
}
.unified-extensions-item-action-button.subviewbutton.panel-no-padding.webextension-browser-action:hover vbox.unified-extensions-item-contents label.unified-extensions-item-name {
    color: #FFA500 !important;
}
.unified-extensions-item-action-button.subviewbutton vbox.unified-extensions-item-contents label.unified-extensions-item-name {
    color: #a9a9a9 !important;            /* #5c5c5c */
    font-size: 1.2em !important;   
    font-weight: 700 !important;
}
.unified-extensions-item-action-button.subviewbutton:hover vbox.unified-extensions-item-contents label.unified-extensions-item-name {
    color: #a9a9a9 !important;
}

/* Text unter dem Namen der Erweiterung */
[data-l10n-id="origin-controls-state-always-on"],
[data-l10n-id="origin-controls-state-no-access"] {
/*    color: #5c5c5c !important; */
    color: #a9a9a9 !important;
}    

/* Text "Erweiterung öffnen" (bei hover sichtbar) */
[data-l10n-id="origin-controls-state-runnable-hover-open"] {
/*    color: #E0E0E0 !important; */
  color: #a9a9a9 !important;
    font-weight: 700 !important;
}

/* Text "Erweiterung ausführen" (bei hover sichtbar) */
[data-l10n-id="origin-controls-state-runnable-hover-run"] {
    color: #a9a9a9 !important;
    font-weight: 700 !important; 
}

/* Text "Erweiterung verwalten" (bei hover sichtbar) */
[data-l10n-id="unified-extensions-item-message-manage"] {
    color: #a9a9a9 !important;
    font-weight: 700 !important;    
    }

/* max. Ausdehnung der Boxen von inaktiven Erweiterungen (unten) */
#unified-extensions-view.cui-widget-panelview vbox.panel-subview-body vbox.unified-extensions-list {
    max-width: 450px !important;
}    


/* Button mit dem Zahnrad (Verwalten) */
toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton {
    background-color: #2B2B2B !important;
    border: 1px solid #FFA500 !important;
}
.unified-extensions-item-menu-button.subviewbutton {
    background-color: #2B2B2B !important;
    border: 1px solid #FFA500 !important;
    margin-right: -3px !important;
}
/* Button mit dem Zahnrad bei Hover (Verwalten) */
toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton:hover,
.unified-extensions-item-menu-button.subviewbutton:hover {
    border: 1px solid #FFA500 !important;
    color: #FFA500 !important;
}    

/* Button "Erweiterungen verwalten" (unten) */    
#unified-extensions-view.cui-widget-panelview toolbarbutton#unified-extensions-manage-extensions.subviewbutton.panel-subview-footer-button.unified-extensions-manage-extensions {
    background-color: #2B2B2B !important;    /* #2B2B2B    */
    border: 1px solid #E0E0E0 !important;
}
#unified-extensions-view.cui-widget-panelview toolbarbutton#unified-extensions-manage-extensions.subviewbutton.panel-subview-footer-button.unified-extensions-manage-extensions:hover {
    border: 1px solid #FFA500 !important;
}

/* Icon eingefügt bei "Erweiterungen verwalten" */    
#unified-extensions-manage-extensions::before {
    margin-left: 90px !important;
    margin-right: -10px !important;    
    content: '' !important;
    display: block !important;
    width: 19px !important;
    height: 24px !important;
    background-image: url("chrome://mozapps/skin/extensions/extension.svg");
    filter: invert(.9);
    background-repeat: no-repeat !important;
    background-position: 4px 6px !important;
    background-size: 16px 16px !important;
}
     
/* Text "Erweiterungen verwalten" */    
[data-l10n-id="unified-extensions-manage-extensions"] {
    margin-left: 10px !important; 
    margin-right: 10px !important;       
    color: #E0E0E0 !important;
    font-size: 1.3em !important;   
    font-weight: 700 !important;
    padding-bottom: 2px !important;
}  
  
[data-l10n-id="unified-extensions-manage-extensions"]:hover {
    color: #FFA500 !important;
}

Alles anzeigen

grisu2099

Also ich sehe da 4 Symbole, die dir fehlen...

Im Untermenü könntest du die Icons auch besser ausrichten.

wie ist es mit diesem Pin?

Oder lieber in rot?

neue Schaltfläche "Einheitliche Erweiterungen"

Ähnliche Themen

Webseiten mit 404 Fehler finden