Cómo (re)colocar la barra de pestañas debajo de la barra de direcciones en Firefox 89? Resuelto

Question

Hola,

Estaba utilizando la modificación del archivo userchrome.css con éxito hasta esta nueva versión de Firefox.
Como la barra de pestañas se ha vuelto casi invisible, he buscado qué la bloqueaba y creo que es la línea "position: absolute !important;" en #TabsToolbar.
Al quitarla, recupero mi entorno habitual (barra de pestañas visible y bien calibrada), con la única diferencia de que ha vuelto a estar entre la barra de menús y la barra de direcciones...
¿Alguna idea para volver a colocarla por debajo de la barra personal (que era el objetivo principal)?
Nota: todo esto se refiere a Firefox 89 limitado por la corrección (Falsa) de las 4 primeras líneas de la búsqueda "Proton" en about:config.

Gracias por cualquier sugerencia y buen fin de semana ;-)
Fred

jee pee · Answer

Hola,

Sin la barra de menú, es posible: https://forums.commentcamarche.net/forum/affich-37238875-liste-marques-pages-firefox-89#8

pero si, como fabul, utilizas la barra de menús ???

--
un extranjero es un amigo que aún no hemos conocido.

fredbxlbe2021 · Answer

Gracias por la sugerencia, pero prefiero todavía la barra de pestañas un poco demasiado alta y mantener el resto de mi diseño anterior (menú + tamaño, resaltado y fuente de las pestañas).
Supongo que en unas semanas estará disponible una nueva manipulación de userchrome.css para ajustar todo esto.
¡Hasta luego!
F.

little boy62 · Answer

Hola.  Sí, se puede volver a poner la famosa barra debajo de la barra de direcciones.  Personalmente, prefiero, en orden: - Tener la barra de direcciones en la parte superior - Luego tener la barra personal. - Después tener la barra de pestañas.  Así:   Si la interfaz te conviene:  debes modificar una preferencia en about:config -> Abre Firefox, escribe about:config, y busca con: legacy -> Localiza la siguiente línea: toolkit.legacyUserProfileCustomizations.stylesheets -> Cambia su valor a true, mediante el botón o el doble clic  Luego, verifica si las extensiones son visibles: -> Abre una carpeta cualquiera -> En el menú, pestaña vista: marca la casilla Extensiones de nombres de archivo  A continuación: -> Abre Firefox -> menú > Ayuda > Más información para solucionar problemas -> Luego, localiza Carpeta de perfil > Haz clic en Abrir la carpeta correspondiente -> Una vez abierta la carpeta, crea una carpeta chrome. Si ya existe, guarda su contenido, para que la carpeta esté vacía. -> Luego crea un archivo titulado: userChrome.txt y ábrelo -> Pon esto en este archivo: https://pastebin.com/28RyCx6E -> Guarda el archivo y ciérralo. -> Renombra luego userChrome.txt a userChrome.css  Nota: Gracias por la sugerencia pero prefiero que la barra de pestañas esté un poco más alta y mantener el resto de mi diseño anterior (menú + tamaño, resaltado y fuente de las pestañas).  En ese caso, adapta el archivo userChrome a tu conveniencia.  ++  Como dijo un sabio: « en Francia, tenemos el derecho de hacer todo... Solo hay que no hacerse pillar. »

little boy62 · Answer

@fabul : re  Prueba esto, en tu userChrome https://pastebin.com/xYnBdfWd  ++  -- Como me dijo un sabio: « en Francia, tenemos derecho a hacer todo... Solo hay que asegurarse de no ser atrapado. »

fredbxlbe2021 · Answer

Gracias little boy62 por tu contribución y por el casi tutorial completo ;-)

Funciona en mi caso (menú, luego dirección, luego barra personal y finalmente barra de pestañas), excepto que al igual que fabul, toda la barra de pestañas está cubierta en un 50% por la ventana general (excepto la pestaña utilizada, que se coloca encima de la ventana general)....

No he podido adjuntar una captura de pantalla a mi mensaje....(jpg o png).

F.

Razielbzz · Answer

Hola, tengo el mismo problema que fredbxlbe2021, la barra de pestañas está oculta al 50% y hay una separación entre mi barra personal y la barra de pestañas (no necesaria, si es posible me gustaría reducirla).
Fabul, en la captura que transmitiste veo que solo tienes una pestaña abierta y cuando fredbxlbe2021 y yo decimos que las pestañas están ocultas al 50% y las pestañas abiertas están en segundo plano, la pestaña principal se muestra al 100%.
Si alguien tiene la solución, estoy interesado, gracias.
Francamente, ¿por qué los programadores de Mozilla siempre están eliminando funciones útiles para todos y no nos dejan opciones? Fue el mismo lío en la versión 56 (si recuerdo bien el número).

fabul · Answer

¿Tienes bien este?  Y copiado debajo  https://forums.commentcamarche.net/forum/affich-37239970-comment-re-mettre-la-barre-d-onglets-sous-la-barre-d-adresse-de-firefox89#7

BRABRA62400 · Answer

Hola,

También me costó reinstalar FIREFOX a mi manera. No conozco el lenguaje CSS.
A continuación ''mi FIREFOX'' después de agregar los datos en USERCHROME.css

Aún me queda un pequeño problema.
La barra de Menús (Archivo, Edición, ...) está colocada en la parte superior de la línea... me gustaría centrarla para que sea más visible.

Ejemplo con otros colores

Comparto mis datos USERCHROME.CSS.

Barra de marcadores en varias líneas


/* 1-BARRE DES MARQUEURS múltiples filas - barra de marcadores en varias líneas */

#PersonalToolbar{
 --multirow-bmb-n-rows: 5; /* Número de filas de la barra de marcadores modificable */
 --multirow-bmb-row-margin: 50px; /* Controla el espacio entre las filas */
 max-height: none !important; 
}

#PlacesToolbar > hbox{ 
 display: block;
 width: 100vw;
}

#PlacesToolbarItems{
 display: flex;
 flex-wrap: wrap;
 /* --uc-bm-padding is defined in autohide_bookmarks_toolbar.css */
 max-height: calc(var(--multirow-bmb-n-rows) * (5px + 1em + (2 * (var(--multirow-bmb-row-margin) + var(--uc-bm-padding,3px))))) !important;
 overflow-y:auto;
 scrollbar-color: var(--lwt-accent-color) var(--toolbar-bgcolor) ;
 scrollbar-width: thin;
font-size: 18px !important; /* Altura de la fuente modificable */
font-style: italic; /* Formato de la fuente modificable */
font-family:calibri ; /* Tipo de letra modificable */
}

Color de las carpetas de la barra de marcadores

 
/* 2-Color de las carpetas de marcadores--- */

/* 
 Carpetas de colores para Menús de Marcadores, Barra Lateral de Marcadores, Barra de Herramientas de Marcadores, ventana de Biblioteca, diálogo Agregar/Editar Marcadores
 Sustituye un icono de carpeta al estilo Firefox 57 por el nuevo icono de carpeta de alambre

//* Carpeta estándar -- en Barra de Herramientas y Menús */#PlacesToolbarItems toolbarbutton[container="true"]:not([query="true"]) .toolbarbutton-icon,:-moz-any(#PlacesToolbarItems,#PlacesChevronPopup,#BMB_bookmarksPopup,#bookmarksMenu,#OtherBookmarksPopup) menu[container="true"]:not([query="true"]) > .menu-iconic-left > .menu-iconic-icon,/* Carpeta estándar -- en Barra Lateral, Biblioteca, Diálogo Agregar/Editar Marcador */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container), #editBMPanel_folderMenuList > .menulist-label-box > .menulist-icon,#editBMPanel_folderMenuList menupopup menuitem, #editBMPanel_folderMenuList { fill: #e8bb00 !important; /* Color de las carpetas modificable */ /* Especificar icono para Firefox 89 Proton (base 64 conversion de SVG antiguo con color dorado) */ list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iI2U4YmIwMCIgZmlsbC1vcGFjaXR5PSJjb250ZXh0LWZpbGwtb3BhY2l0eSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTQuNSAzSDYuOTE0YS41LjUgMCAwIDEtLjM1NC0uMTQ2TDUuMTQ2IDEuNDM5QTEuNDkxIDEuNDkxIDAgMCAwIDQuMDg2IDFIMS41QTEuNSAxLjUgMCAwIDAgMCAyLjV2MTFBMS41IDEuNSAwIDAgMCAxLjUgMTVoMTNhMS41IDEuNSAwIDAgMCAxLjUtMS41di05QTEuNSAxLjUgMCAwIDAgMTQuNSAzem0uNSAxMC41YS41LjUgMCAwIDEtLjUuNWgtMTNhLjUuNSAwIDAgMS0uNS0uNVY2aDE0ek0xIDVWMi41YS41LjUgMCAwIDEgLjUtLjVoMi41ODZhLjUuNSAwIDAgMSAuMzU0LjE0NmwxLjQxNCAxLjQxNUExLjQ5MSAxLjQ5MSAwIDAgMCA2LjkxNCA0SDE0LjVhLjUuNSAwIDAgMSAuNS41VjV6Ii8+CiAgPHBhdGggZD0iTTE1IDEzLjVhLjUuNSAwIDAgMS0uNS41aC0xM2EuNS41IDAgMCAxLS41LS41VjZoMTR6IiBmaWxsLW9wYWNpdHk9Ii4yIi8+CiAgPHBhdGggZD0iTTEgNVYyLjVhLjUuNSAwIDAgMSAuNS0uNWgyLjU4NmEuNS41IDAgMCAxIC4zNTQuMTQ2bDEuNDE0IDEuNDE1QTEuNDkxIDEuNDkxIDAgMCAwIDYuOTE0IDRIMTQuNWEuNS41IDAgMCAxIC41LjVWNXoiIGZpbGwtb3BhY2l0eT0iLjEiLz4KICA8cGF0aCBkPSJNMTUgMTMuNWEuNS41IDAgMCAxLS41LjVoLTEzYS41LjUgMCAwIDEtLjUtLjVWMTNoMTR6IiBmaWxsLW9wYWNpdHk9Ii4wNSIvPgo8L3N2Zz4=") !important;}/* Carpeta inteligente -- en Barra de Herramientas y Menús */#PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,:-moz-any(#PlacesToolbarItems,#PlacesChevronPopup,#BMB_bookmarksPopup,#bookmarksMenu,#OtherBookmarksPopup) menu[container="true"][query="true"] > .menu-iconic-left > .menu-iconic-icon,/* Carpeta inteligente -- en Barra Lateral, Biblioteca, Diálogo Agregar/Editar Marcador */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, query) { /* Especificar icono para Firefox 89 Proton para anular la carpeta básica */ list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important; fill: #69c !important; /* similar al color azul de carpeta inteligente */}/*** Iconos de "contenedor" de nivel superior (de lo contrario sería el color de carpeta estándar) ***//* Menú de Marcadores -- en Barra Lateral, Biblioteca, Diálogo Agregar/Editar Marcador */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu),:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_menu________),#editBMPanel_bmRootItem > .menu-iconic-left, #editBMPanel_folderMenuList[selectedIndex="1"] > .menulist-label-box > .menulist-icon, #editBMPanel_folderMenuList[selectedGuid="menu________"] { /* Especificar icono para Firefox 89 Proton para anular la carpeta básica */ list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important; fill: olive !important;}/* Barra de Herramientas de Marcadores -- en Menús */#BMB_bookmarksPopup #BMB_bookmarksToolbar > .menu-iconic-left > .menu-iconic-icon,#bookmarksMenuPopup #bookmarksToolbarFolderMenu > .menu-iconic-left > .menu-iconic-icon,/* Barra de Herramientas de Marcadores -- en Barra Lateral, Biblioteca, Diálogo Agregar/Editar Marcador */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar),:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_toolbar_____),#editBMPanel_toolbarFolderItem > .menu-iconic-left, #editBMPanel_folderMenuList[selectedIndex="0"] > .menulist-label-box > .menulist-icon, #editBMPanel_folderMenuList[selectedGuid="toolbar_____"] { /* Especificar icono para Firefox 89 Proton para anular la carpeta básica */ list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important; fill: olive !important;}/* Otros Marcadores -- en Menús */#BMB_bookmarksPopup #BMB_unsortedBookmarks > .menu-iconic-left > .menu-iconic-icon,#bookmarksMenuPopup #menu_unsortedBookmarks > .menu-iconic-left > .menu-iconic-icon,/* Otros Marcadores -- en Barra Lateral, Biblioteca, Diálogo Agregar/Editar Marcador */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____),#editBMPanel_unfiledRootItem > .menu-iconic-left, #editBMPanel_folderMenuList[selectedIndex="2"] > .menulist-label-box > .menulist-icon, #editBMPanel_folderMenuList[selectedGuid="unfiled_____"],#OtherBookmarksPopup + .toolbarbutton-icon { /* Especificar icono para Firefox 89 Proton (base 64 conversion de SVG antiguo con color oliva) */ list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ib2xpdmUiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuMDUiIGQ9Ik0xMi43LDFIMy4zbC0uMi42TC4xLDksMCw5LjJWMTNhMi4wMDYsMi4wMDYsMCwwLDAsMiwySDE0YTIuMDA2LDIuMDA2LDAsMCwwLDItMlY5LjJMMTUuOSw5bC0zLTcuNEwxMi43LDFaIi8+CiAgPHBhdGggZD0iTTEyLDJsMyw3LjRWMTNhLjk0NS45NDUsMCwwLDEtMSwxSDJhLjk0NS45NDUsMCwwLDEtMS0xVjkuNEw0LDJoOG0uNy0xSDMuM0wuMSw5LjEsMCw5LjJWMTNhMi4wMDYsMi4wMDYsMCwwLDAsMiwySDE0YTIuMDA2LDIuMDA2LDAsMCwwLDItMlY5LjJMMTUuOSw5LDEyLjcsMVoiLz4KICA8cGF0aCBmaWxsLW9wYWNpdHk9Ii4wNSIgZD0iTTE0Ljk4OCw5LDEyLDJINEwuODUxLDlINS4wMjNBMi45MzEsMi45MzEsMCwwLDAsOCwxMS42LDIuODg5LDIuODg5LDAsMCwwLDExLjAxMiw5WiIvPgogIDxwYXRoIGQ9Ik0xMCw5QTIsMiwwLDAsMSw2LDlIMHYxSDUuMTg0YTIuOTgzLDIuOTgzLDAsMCwwLDUuNjMzLDBIMTZWOVoiLz4KPC9zdmc+") !important;}/* (Firefox antiguo) Evitar sobrescribir iconos de la Barra de Herramientas clásica y otros iconos de Marcadores en Menús */#BMB_bookmarksPopup #BMB_bookmarksToolbar.menu-iconic-icon, #bookmarksMenu #bookmarksToolbarFolderMenu.menu-iconic-icon { list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;}#BMB_bookmarksPopup #BMB_unsortedBookmarks.menu-iconic-icon, #bookmarksMenu #menu_unsortedBookmarks.menu-iconic-icon { /* Especificar icono para Firefox 89 Proton (base 64 conversion de SVG antiguo con color oliva) */ list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ib2xpdmUiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuMDUiIGQ9Ik0xMi43LDFIMy4zbC0uMi42TC4xLDksMCw5LjJWMTNhMi4wMDYsMi4wMDYsMCwwLDAsMiwySDE0YTIuMDA2LDIuMDA2LDAsMCwwLDItMlY5LjJMMTUuOSw5bC0zLTcuNEwxMi43LDFaIi8+CiAgPHBhdGggZD0iTTEyLDJsMyw3LjRWMTNhLjk0NS45NDUsMCwwLDEtMSwxSDJhLjk0NS45NDUsMCwwLDEtMS0xVjkuNEw0LDJoOG0uNy0xSDMuM0wuMSw5LjEsMCw5LjJWMTNhMi4wMDYsMi4wMDYsMCwwLDAsMiwySDE0YTIuMDA2LDIuMDA2LDAsMCwwLDItMlY5LjJMMTUuOSw5LDEyLjcsMVoiLz4KICA8cGF0aCBmaWxsLW9wYWNpdHk9Ii4wNSIgZD0iTTE0Ljk4OCw5LDEyLDJINEwuODUxLDlINS4wMjNBMi45MzEsMi45MzEsMCwwLDAsOCwxMS42LDIuODg5LDIuODg5LDAsMCwwLDExLjAxMiw5WiIvPgogIDxwYXRoIGQ9Ik0xMCw5QTIsMiwwLDAsMSw2LDlIMHYxSDUuMTg0YTIuOTgzLDIuOTgzLDAsMCwwLDUuNjMzLDBIMTZWOVoiLz4KPC9zdmc+") !important;}

Barra de pestañas debajo

 
/* 3-Barra de pestañas debajo */

@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{-moz-box-ordinal-group: 2;-moz-appearance: none !important;--tabs-navbar-shadow-size: 0px;}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }

/* También oculta el borde inferior del toolbox que no está en la parte inferior con esta configuración */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

/* Estos existen solo por compatibilidad con autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }

Color de las pestañas


/* 4-Color TABS - color de las pestañas */

tab {
 font-size: 15px !important; /* Altura de la fuente modificable */
 font-family: Arial !important;} /* Tipo de letra modificable */ 

/* Usar color y forma para hacer que las pestañas se vean más como pestañas */

.tab-background {
 background: #dbdbdb ; /* Color de fondo modificable */
 border-radius: 0px 20px 0 0 !important;
 margin-bottom: 0px !important;
 box-shadow: 0 0 2px 2px rgba(0,0,0,0.1) !important;
 border: 1px solid rgba(255,0,0,.5) !important;
 border-bottom-width: 0px !important;
}

/* Pestañas seleccionadas quiero un fondo brillante con un primer plano oscuro */

.tabbrowser-tab[selected] .tab-background {
 background: #ffffff !important; /* Color de fondo modificable */
}
.tabbrowser-tab[selected] .tab-label {
 color: red !important; /* Color de fondo modificable */
 font-weight: normal !important;}

/* Dibujar una línea sólida debajo para hacer que la pestaña seleccionada se vea *conectada* al resto del navegador */
#TabsToolbar {
 border-bottom: 5px solid #ff0000 !important; /* Color de fondo modificable */
}

/* Al pasar el cursor sobre las pestañas */
.tabbrowser-tab:hover .tab-background:not([selected]) {
 background: #afedaf !important; /* Color de fondo modificable */
}

Barra de menús arriba


/* 5-Barra de menús en la parte superior - usar con tabs_on_bottom.css */

/* Patching Menubar en la parte superior - usar con tabs_on_bottom.css */
/* Solo realmente útil si la barra de menús está SIEMPRE visible */

:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

:root{
 /* altura si se habilita la barra de título nativa, asume que la barra de menús está vacía */
 --uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
 /* altura cuando la barra de título nativa está desactivada, más espaciosa para que se puedan ajustar los botones, etc. */
 --uc-menubar-height: 29px; 
}

#navigator-toolbox{ padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }
#toolbar-menubar{
 position: fixed;
 display: flex;
 top: var(--uc-titlebar-padding,0px);
 height: var(--uc-menubar-height);
 width: 100%;
 overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
 order: 99;
 flex-grow: 1;
 min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

NB. hice modificaciones en ABOUT:CONFIG

Para desactivar Proton:
---------------------------
browser.proton.contextmenus.enabled = false
browser.proton.doorhangers.enabled = false
browser.proton.enabled = false
browser.proton.modals.enabled = false

Para reactivar el modo compacto (que desapareció con Proton):
--------------------------------------------------------------
browser.compactmode.show = true
browser.uidensity = 1 (0 = Normal, 2 = Táctil).

Para reactivar userChrome.css que a veces se desactiva por Firefox durante una nueva versión:
-----------------------------------------------------------------------------------------------------------
toolkit.legacyUserProfileCustomizations.stylesheets = true

Philippe

fredbxlbe2021 · Answer

Buenas noches a todos,

No estoy muy versado en lenguaje css, pero he hecho una compilación de las diferentes soluciones propuestas, basándome en una parte de los códigos de BRABRA62400, reestilizados con trozos de códigos usados antes del 89 (para las dimensiones y colores de las pestañas, letras, etc.) y estoy satisfecho. Los puristas quizás encuentren líneas contradictorias o redundantes, pero a mí me funciona... así que comparto mi userchrome.css

/* 3-Barras de pestañas debajo */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{-moz-box-ordinal-group: 2;-moz-appearance: none !important;--tabs-navbar-shadow-size: 0px;}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }

/* También oculta el borde inferior de la caja de herramientas que no está en la parte inferior con esta configuración */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

/* Estos existen solo por compatibilidad con autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }

/* 5-Barra de menús en la parte superior - usar con tabs_on_bottom.css */

/* Poción de menú en la parte superior - usar con tabs_on_bottom.css */
/* Realmente útil solo si el menú está SIEMPRE visible */

:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

:root{
/* altura si la barra de título nativa está habilitada, asume menú vacío */
--uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
/* altura cuando la barra de título nativa está deshabilitada, más espaciosa para ajustar botones, etc. */
--uc-menubar-height: 29px;
}

#navigator-toolbox{ padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }
#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: var(--uc-menubar-height);
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* Anchura de las pestañas */
.tabbrowser-tab:not([pinned]) {
max-width: 150px !important; min-width: 30px !important; }
.tabbrowser-tab:not([fadein]) {
max-width: 1px !important; min-width: 1px !important; }

.tab-background[selected="true"] {
background-attachment: none!important;
background-color: red!important;
background-image: none!important;
}
/* Hacer los menús grandes, bonitos y legibles */
menubar, menubutton, menulist, menu, menuitem {
font-size: 16px !important
}
#TabsToolbar {
width: 100vw !important;
font-size: 18px !important;
}

BRABRA62400 · Answer

Aquí está mi archivo USERCHROME.css    https://www.cjoint.com/c/KFkhOs2eh5A  philippr

fredbxlbe2021 · Answer

Dicho esto, me gustaría seguir perfeccionando mi interfaz (y conocer un poco más sobre CSS :-).....)

1) en los 2 tamaños de ventana (ver punto siguiente), me gustaría afinar mi barra de direcciones;

2) mi barra de menú tiene el tamaño perfecto cuando mi ventana está en tamaño intermedio (incluso estirada al 100%), pero se afina (demasiado) cuando paso a ventana "aumentada";

¿Alguno de ustedes podría indicarme si estos parámetros están tratados en el CSS anterior (mensaje anterior); de lo contrario, ¿los códigos para regularlos?

De antemano, gracias.

F.

pomlj · Answer

el 12 de septiembre de 2021

Hola,

De nuevo el problema de esta barra de pestañas que hay que volver a colocar en la parte inferior con FF 92, (no me di cuenta y se hizo la actualización..). He pasado la mañana buscando un "css" que funcione, si alguien lo necesita puedo publicarlo en el foro..

fredbxlbe2021 · Answer

un puriste y encontrará ciertamente incoherencias, pero funciona:

/* 3-Barras de pestañas debajo */

@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{-moz-box-ordinal-group: 2;-moz-appearance: none !important;--tabs-navbar-shadow-size: 0px;}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }

/* También oculta el borde inferior de la caja de herramientas que no está en la parte inferior con esta configuración */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

/* Estos existen solo por compatibilidad con autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }

/* Solo realmente útil si el menú siempre está visible */

:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

:root{
/* altura si la barra de título nativa está habilitada, asume menú vacío */
--uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
/* altura cuando la barra de título nativa está desactivada, más espaciosa para poder ajustar botones, etc. */
--uc-menubar-height: 29px;
}

#navigator-toolbox{ padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }
#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: var(--uc-menubar-height);
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* Ancho de las pestañas */
.tabbrowser-tab:not([pinned]) {
max-width: 150px !important; min-width: 30px !important; }
.tabbrowser-tab:not([fadein]) {
max-width: 1px !important; min-width: 1px !important; }

.tab-background[selected="true"] {
background-attachment: none!important;
background-color: red!important;
background-image: none!important;
}

/* Haz que los menús sean grandes, bonitos y legibles */
menubar, menubutton, menulist, menu, menuitem {
font-size: 18px !important
}
#TabsToolbar {
width: 100vw !important;
font-size: 18px !important;
}

/*** Acortar el espacio entre los menús desplegables/contextuales/p emergentes ***/

menupopup > menuitem, menupopup > menu {
padding-block: 0px !important;
}
:root {
--arrowpanel-menuitem-padding: 0px 0px !important;

}

pomlj · Answer

Bonsoir fredbxlbe2021,

así que pongo el 'mío' que funciona muy bien, solo he modificado tab-min-hight en * root hacia el principio, lo he cambiado de 40 a 30px.

----------------------------------------------------
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* TABS: abajo - Firefox 65 y posteriores - actualizado para 89+ */
/* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */
/* https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar_fx89.css */
/* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */

/* ROOT - VARS */
/* puedes ajustar las variables CSS hasta que se vea correcto */

|*:root {

--tab-toolbar-navbar-overlap: 0px !important;

--tab-min-height: 30px !important;/* archivo original 40 */
--tab-min-width: 60px !important;

--tab-adjust: 0px; /* ajustar la barra de pestañas - solo para 68-73 */
--tab-caption: 5px; /* botones de título en la barra de pestañas */
}

/* TAB BAR - debajo de la barra de navegación */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important;}
#TabsToolbar {-moz-box-ordinal-group:1000 !important;}

#TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}

#tabbrowser-tabs {
width: 100vw !important;
}

/* caja de herramientas de navegador - RELLENO */

|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {

position: relative !important; /*89+*/
padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*AJUSTE*/
background-color: var(--toolbar-bgcolor) !important;
}

/* TabsToolbar con menú de barra y barra de título ocultos - reglas para Firefox 65-73 */

|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~

#TabsToolbar{
bottom: var(--tab-adjust); /*AJUSTE*/
}

/* TABS: altura */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPCIONAL*/
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important;
}

/* indicadores *//*

|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {

position: absolute !important;
display: block !important;
right: 0px !important;
bottom: 0px !important;
width: 14px !important;
pointer-events: none !important;
}

/

.private-browsing-indicator {display: none !important;}
.accessibility-indicator {display: none !important;}

/* Indicadores - OCULTAR *//*

|*:root:not([accessibilitymode]) .accessibility-indicator {display: none !important}
|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}
/

/* Espacio para arrastrar */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 20px !important;
}

/* Sobrescribir desplazamientos verticales al mover una pestaña */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}

#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}

#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}

/* Ocultar controles de ventana y botones de título en la barra de pestañas */
#TabsToolbar #window-controls {display: none !important;}
#TabsToolbar .titlebar-buttonbox-container {display: none !important;}

------------------------------------
nota: probaré tu versión mañana (fred..2021)..

- - Buenas noches a todos tras esta nueva versión de FF 92... **

pomlj · Answer

Hola,  pruebo mañana la versión de Fabul,,  y enhorabuena al foro por esta reactivación después de tres meses de calma..  ¡Hasta luego!

pistouri · Answer

Hola Pomlj,

Foro CCM (pestañas bajo la barra de direcciones de Firefox)
Después de la calma, la tormenta o viceversa :-)
¿Hay otra prevista para FF93?

Si es necesario, haz un copiar/pegar de las líneas de este archivo userchrome ==► Pestañas bajo la barra de direcciones Firefox 92

En el archivo userchrome de Fabul ha puesto al final, porque al principio tiene:

/*** Ajustar el espaciado de los menús desplegables/contextuales/ emergentes ***/

menupopup > menuitem, menupopup > menu {
 padding-block: 2px !important;
}
:root {
 --arrowpanel-menuitem-padding: 2px 2px !important;
}

Este código es para reducir el espaciado de los Marcadores.

Buena suerte.

¡Hasta luego!

pomlj · Answer

Gracias Pistouri,  creo que me llevará una buena semana analizarlo, incluso más...  no había notado antes un espacio en los marcadores...  gracias de nuevo por este código..  ¡Hasta luego!..

Cómo (re)colocar la barra de pestañas debajo de la barra de direcciones en Firefox 89?

17 respuestas

Eliminar los ceros a la impresión

Imposible abrir mi pc acer: no reconoce mi contraseña de inicio de sesión

Encontrar un escáner

Cómo eliminar grupos en el teléfono móvil

Mensajes efímeros

Error del sistema 805306367, mi barra de tareas está inactiva

Mensaje diciendo que mi teléfono está comprometido

Computadora muy lenta

Obtener una dirección de correo electrónico

Teléfono de alarma más conectado