"Tab-Tooltip" - Favicon und Label als Popup

Captain_Kebab

Servus!

Ich bin mir nicht gänzlich sicher, ob das über rein die userChrome.css überhaupt machbar ist, aber ich versuche FF so anzupassen, dass das Tab-Icon/Label eines Tabs bei hover in ein Popup von 225px breite und der eingestellten Tab-Höhe verschoben wird, ohne dass der Tab selbst seine Position verändert (siehe screenshot) - optional erst, wenn der Tab eine gewisse Breite unterschreitet. Allerdings scheitert bislang jeder versuch daran, dass das Overflow der Tab-Bar den Inhalt einfach clipt.

Dass ich mich mit CSS beschäftigt hab, ist schon ein paar Jährchen her, aber soweit ich mich erinnern kann, sollte das eigentlich machbar sein - ich hab nur keinen Schimmer, wie. Zumal das Gefummel mit overflow sowieso immer eine Nemesis für mich war, warum auch immer.

Fällt irgendwem was dazu ein?

Und wenn ich eh grad dabei bin, noch ein paar Bonusfragen:

- Wie kann ich den fade des labels in verändern/verschieben? Da der Close-Button bei mir erst bei hover angezeigt wird, wärs nett, wenn das label anderweitig ein bisschen mehr platz zum anzeigen hätte.

- gibts eine möglichkeit im Style Editor der Browser Toolbox nach css-stylesheets zu suchen oder muss ich weiter meinen dateien abstruse prefixes verpassen, um sie leichter in der monsterliste zu finden? Bzw: gibts ne einfacherer "Entwicklungsumgebung" für eine live-preview der css während dem werkeln?

Edit: Anscheinend hatte meine Bastelei das Feld für die Stil-Dokument-Suche in der Browsertoolbox überschrieben. Jetzt kann ich plötzlich nach css-dateien suchen

Bonus: Ich hab die angepinnten Tabs so eingestellt, dass sie sich beim hover in der Breite verändern (den gleichen Code habe ich übergangsweise auch für die inaktiven Tabs genommen), wenn allerdings die arrowscrollbox ins Spiel kommt, legt sich der Tab unter alle anderen, ohne den Rest der Tabs zu verschieben. Kann mir einer sagen, wieso?

MfG - Captain Kebab

CSS

@-webkit-keyframes iconpulse {
0% { transform: scale(1.35) }
10% { transform: scale(1.7) }
75% { transform: scale(1.35) }
100% { transform: scale(1.35) }
}



@-webkit-keyframes iconblink {
0% { color: white; background-color: rgba(0,0,0,0); }
20% { color: white; background-color: rgba(0,0,0,0); }
50% {color: white; background-color: rgba(255,255,255,0.4); }
70% { color: white; background-color: rgba(0,0,0,0); }
100% { color: white; background-color: rgba(0,0,0,0); }
}
/*-------------------------------------------*/
/*** Standart-Tabs
/*-------------------------------------------*/
.tabbrowser-tab:not([pinned])[selected] {
min-width: 225px !important;
}


.tabbrowser-tab .tab-label {
/*  font-size: 11px !important;*/
font-size: 88% !important;
translate: 0px 2px !important;


}




/*** Favicon immer anzeigen und unangepinnt vergrößern ***/
/*-------------------------------------------*/
.tab-content .tab-icon-image {
opacity: 1.0 !important;
}
.tabbrowser-tab:not([pinned]) .tab-content .tab-icon-image {
transform: scale(1.3) !important;
background-size: 130% !important;
translate: -4px !important;
margin-inline-end: 2px !important;
}
/*** Mute-Unmute-Icon und Favicon gleichzeitig, kleiner und diagonal versetzt ***/
/*-------------------------------------------*/
.tabbrowser-tab:not([pinned])[soundplaying] .tab-icon-overlay,
.tabbrowser-tab:not([pinned])[muted] .tab-icon-overlay {
opacity: 1.0 !important;
/*transform: scale(1.35) !important;*/
margin-left: 7px  !important;
margin-top: 9px  !important;
-webkit-animation: iconpulse 1s infinite !important;
}


.tabbrowser-tab:not([pinned])[soundplaying] .tab-icon-image,
.tabbrowser-tab:not([pinned])[muted] .tab-icon-image {
transform: scale(1.1) !important;
background-size: 110% !important;
opacity: 1.0 !important;
margin-bottom: 9px  !important;
}


/*** Symbol für blockierte Medien größer über dem Favicon ***/
/*-------------------------------------------*/
.tabbrowser-tab:not([pinned]) .tab-icon-overlay[activemedia-blocked] {
transform: scale(2) !important;
background-size: 150% !important;
opacity: 1.0 !important;


color: white !important;
}


/*** Tab-Umrandung ***/
/*-------------------------------------------*/
.tabbrowser-tab:not([selected]):not([pinned]) .tab-background {
border-bottom: 1px solid dimgray !important;
background: none !important;
}
.tabbrowser-tab[selected] .tab-background {
border: 1px solid lightgray !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom: none !important;


}
.tabbrowser-tab[multiselected] .tab-background {
border: 5px solid teal !important;
}


/*** Close-Button ***/
/*-------------------------------------------*/


/* Close-Button nur sichtbar bei Mouse-Over  */


.tabbrowser-tab:not([pinned]) .tab-close-button {
transform: scale(0) !important;
opacity: 00 !important;
}


.tabbrowser-tab:not([pinned])[selected]:hover .tab-close-button {
transform: scale(1) !important;
opacity: 1 !important;
translate: 4px -2px !important;
}
.tabbrowser-tab:not([pinned])[selected] .tab-close-button:hover {
transform: scale(1) !important;
opacity: 1 !important;
fill: white !important;
border: 1px solid white !important;
}


.tabbrowser-tab:not([pinned]):not([selected]):hover .tab-close-button {
display: -moz-box !important;
/*     max-width: 20px !important; */
transform: scale(1) !important;
opacity: 1 !important;
fill: red !important;
opacity: 1.0 !important;
transform: scale(0.7) translate(15px, -15px) !important;
border: 1px solid white !important;
}


.tabbrowser-tab:not([pinned]):not([selected]) .tab-close-button:hover {


fill: white !important;
background-color: red !important;
opacity: 0.7 !important;
transform: scale(0.7) translate(15px, -15px) !important;
border: 5px solid white !important;


}






/*** Mouse-Over Tabs ***/
/*-------------------------------------------*/
.tabbrowser-tab:not([multiselected]):not([selected]):not([pinned]):hover .tab-background {
border: 1px solid dimgray !important;
border-bottom: 2px solid lightgray !important;
background-color: var(--toolbar-bgcolor) !important;


}


.tabbrowser-tab:not([pinned]):not([multiselected])[selected]:hover .tab-background {
border: 1px solid white !important;
border-bottom: 3px solid white !important;
}


/*** Komprimierte Tabs vergrößern bei Mouse-Over ***/
/*-------------------------------------------*/
/* .tabbrowser-tab:not([pinned]):hover .tab-background,
.tabbrowser-tab:not([pinned]):hover .tab-content {
position: relative; top: 0px !important;
transform: scale(1) !important;
background-size: 150% !important;
}*/
.tabbrowser-tab:not([pinned]):not([selected]):hover  {
min-width: 160px !important;
}






/*-------------------------------------------*/
/*** Angepinnte Tabs ***/
/*-------------------------------------------*/
/* generelle Größe & Optik*/




.tabbrowser-tab[pinned] .tab-label {
margin-left: 6px !important;
}
.tabbrowser-tab[pinned][selected] {
min-width: 160px !important;
z-index: 10 !important;
--inline-padding: 300 !important;
}


.tabbrowser-tab:not([selected])[pinned] .tab-background {
border: 1px solid dimgray !important;
opacity: 1.0 !important;


/*  background-color: black !important; */
}




/* größer bei Mouse-Over */
.tabbrowser-tab[pinned]:not([selected]):hover .tab-background {
min-width: 160px !important;
border: 1px solid dimgray !important;
border-bottom: 2px solid lightgray !important;
background-color: var(--toolbar-bgcolor) !important;
/* box-shadow: 5px 0px 5px 0px black !important; */
--inline-padding: 300 !important;


}
.tabbrowser-tab[pinned][selected]:hover .tab-background {
min-width: 160px !important;
border: 1px solid white !important;
border-bottom: 2px solid white !important;
background-color: var(--toolbar-bgcolor) !important;
/* box-shadow: 5px 0px 5px 0px var(--toolbar-bgcolor) !important; */
--inline-padding: 300 !important;


}




#tabbrowser-arrowscrollbox {
z-index: -1 !important;
}




/* Favicon und Mute-Unmute */




.tabbrowser-tab[pinned][soundplaying="true"] .tab-icon-overlay,
.tabbrowser-tab[pinned][muted="true"] .tab-icon-overlay {
opacity: 1.0 !important;
transform: scale(1.1) !important;
background-size: 100% !important;
margin-top: 3px  !important;
margin-left: -12px  !important;
}


.tabbrowser-tab[pinned][soundplaying="true"] .tab-icon-image,
.tabbrowser-tab[pinned][muted="true"] .tab-icon-image {
transform: scale(1) !important;
background-size: 100% !important;
opacity: 1.0 !important;
margin-top: 7px  !important;
margin-right: 0px  !important;


}




/*===========================================*/


/*-------------------------------------------*/
/*** Bestimmte Einträge vom Kontextmenü entfernen ***/
/*-------------------------------------------*/
/* Bild per Email verschicken */
#context-sendimage,


/* Bild als Desktophintergrund */
#context-sep-setbackground, #context-setDesktopBackground,


/* Barrierefreiheit kontrollieren */
#context-inspect-a11y


/* eigentlicher Code */
{
display: none !important;
}

Alles anzeigen

Captain_Kebab

Edit: Themen-Titel angepasst und verständlicher gemacht

Bei weiteren Recherchen bin ich auf diesen (von mir bereits etwas abgewandelten) interessanten Code-Schnippsel gestoßen:

CSS

#tabbrowser-tab-tooltip {display:none !important;}
.tabbrowser-tab:not([pinned]):hover::after {
  display: block !important;
  content:  attr(label);
  border: 1px solid lightgray;
  border-top: 2px solid lightgray;
  border-radius: 5px;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  background-color: var(--toolbar-bgcolor) !important;
  padding: 0.8em;
  position: fixed;
  transform: translateY(calc(var(--tab-min-height) + 2 * var(--tab-block-margin))) !important;
  z-index: 2;
  color-scheme: dark;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

Alles anzeigen

Der tut schon mal in groben Zügen, was er soll und blendet das Tab-Label als "Fake-Tooltip" unter dem Tab ein. Jetzt muss ich nur noch herausfinden, wie ich das Favicon auch noch da rein bringe.

Problematisch wirds aber, wenn der overflow der Tabbar eninsetzt und die arrowscrollbox übernimmt. Das Tooltip positioniert sich leider relativ zu der "theoretischen" position des Tabs, also dort, wo der Tab in einem unendlich breiten Fenster wäre - ergo verschiebt er sich nach rechts, wenn man die Scrollbox bewegt und verschwindet letztlich aus dem angezeigten Bereich.

Zudem wärs irgendwie komfortabler, wenn das Tooltip sich nicht zusammenschieben würde, sobald es den Fensterrand erreicht, sondern wie ein echtes Tooltip in voller Breite rechtsbündig stehen bliebe... keine Ahnung, ob das überhaupt machbar ist.

Captain_Kebab 8. Juli 2022 um 04:43