son - ¿Cómo puedo tener varias filas con pestañas en Firefox 57+(el complemento Tab Mix Plux ya no funciona)?

tab rotator

Question

¿Cómo puedo tener varias filas con pestañas en Firefox 57+, después de que el complemento Tab Mix Plux ya no funciona (todas las extensiones heredadas se eliminan con Firefox 57). Quizás debería esperar?

Esta es quizás la única funcionalidad que no pude encontrar en Opera o Chrome (y Chrome tiene algunos problemas de privacidad), la última vez que los probé. Entonces parece que tengo algunas opciones, no solo una sola.

1. Como se sugiere en este hilo , puedo cambiar a FF 52 ESR (con posibles problemas ...) o utilizar una compilación nocturna ...

2. Otra posible opción es utilizar un archivo [FF Current Profile Folder]/chrome/userChrome.css (podría necesitar crear una carpeta), donde puedo colocar algún código. Esto es lo que probé bajo FF 57, usando más de 500 pestañas:

( EDIT 1 : Agregué algunas reglas css para ocultar algunos espacios / botones, similar a la respuesta de R4zen, ya que el mío contiene una regla más y es quizás más completo ... ¡pero el resultado podría ser el mismo para la mayoría de las personas! Tenía este código probé cuando publiqué la pregunta, pero decidí publicar menos código para comprender mejor lo que está sucediendo. Ahora estoy publicando mi código completo, para que otros puedan beneficiarse de él.)

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#tabbrowser-tabs .arrowscrollbox-overflow-start-indicator,
#tabbrowser-tabs .arrowscrollbox-overflow-end-indicator,
#tabbrowser-tabs #alltabs-button {
display: none;
}
#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
display: block;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
/*
display: block;
*/
overflow-y: auto !important;
min-height: var(--tab-min-height); /* default */
max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab {
flex-grow: 1;
flex-wrap:wrap;
min-width: 150px;
vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
height: var(--tab-min-height);
}
#tabbrowser-tabs .tabbrowser-tab .tab-stack {
width: 100%;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] {
min-width: 0px;
max-width: 40px;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] .tab-icon-image:not([src]) {
visibility: hidden !important;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] .tab-text {
display: none !important;
}
/* Active tab''s style - visuallyselected="true" === ACTIVE TAB */
#tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] {
font-weight: bold;
}
#tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] .tab-background {
background-color: lime !important; /* green, lime, LawnGreen-7CFC00, LimeGreen-32CD32, SpringGreen-00FF7F */
}

• Donde 5 en max-height: calc(5*var(--tab-min-height)) !important; son 5 filas, altura calculada dinámicamente

El código anterior muestra pestañas, pero su comportamiento es bastante malo:

• Lo peor: cuando se desplaza entre las pestañas usando Ctrl+Tab (en el último pedido reciente) y la ficha cambia a está en una fila diferente (más de 5 filas), la fila con la pestaña no se desplaza al pestaña activa El deslizador se debe usar para desplazarse manualmente por las filas y encontrar visualmente el seleccionado ... (Para aclarar: he establecido 5 filas visibles de 15 filas en total)

• las pestañas no se pueden arrastrar ya que FF core lo calcula incorrectamente y mueve la pestaña a una posición aleatoria

  3. Para usar un tenedor del código heredado, alguien mencionó WaterFox (u otro tenedor).

¿Hay alguna otra (mejor) solución a partir de hoy?

Estoy bastante seguro de que tendremos más opciones en el futuro, por lo que la respuesta correcta hoy puede no ser la mejor después de una semana o mes (es) ...

Answer 1

Barra de pestañas Multirow con arrastre de pestañas de trabajo (probado en FF 61):

1. Descargue y extraiga https://luke-baker.github.io/Firefox_chrome.zip
2. Copie userChrome.xml en su carpeta de Chrome.
3. Agregue contenido de userChrome.css a su userChrome.css .
4. Descargue MultiRowTabLiteforFx.uc.js en su carpeta de Chrome.

Answer 2

Hice algunas modificaciones, ahora debería estar sin errores (incluso si fija pestañas, mueve / arrastra la ventana, se desplaza entre pestañas, etc.):

#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
display: block;
}
.scrollbutton-up,
.arrowscrollbox-overflow-start-indicator,
.scrollbutton-down,
.arrowscrollbox-overflow-end-indicator {
display: none !important;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
/*
display: block;
*/
overflow-y: auto !important;
min-height: var(--tab-min-height); /* default */
max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) {
flex-grow: 1;
flex-wrap:wrap;
min-width: 150px;
vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
height: var(--tab-min-height);
}
#tabbrowser-tabs .tabbrowser-tab .tab-stack {
width: 100%;
}
#titlebar-buttonbox {
display: block !important;
vertical-align: top !important;
}
#main-window[tabsintitlebar] #tabbrowser-tabs {
-moz-window-dragging: no-drag;
}

Si encuentra que la primera fila de pestañas es invisible, abra about: config y cambie el valor de browser.tabs.drawInTitlebar del valor predeterminado de verdadero a falso.

browser.tabs.drawInTitlebar false

si desea arrastrar la ventana de Firefox haciendo clic en el espacio libre de la barra de título más que usar 5 o más filas, simplemente elimine el código:

#main-window[tabsintitlebar] #tabbrowser-tabs {
-moz-window-dragging: no-drag;
}

Permite desplazarse entre las filas manteniendo presionada la barra de desplazamiento cuando hay más de 5 filas, pero por otro lado, deshabilita la posibilidad de arrastrar las ventanas ff por la barra de título. (Si no usa más de 5 filas, puede eliminarlo)

Answer 3

Para aquellos interesados ​​en cómo funciona este cambio de interfaz de usuario de CSS, hay un útil artículo en ghacks.net que describe lo que se está haciendo: https://www.ghacks.net/2017/11/13/customize-firefox-57-with-css/

El artículo se refiere al proyecto git hub "Ajustes personalizados de CSS para Firefox 57+" https://github.com/Aris-t2/CustomCSSforFx Ese proyecto contiene muchos ajustes de interfaz de usuario diferentes que se pueden mezclar y combinar. El archivo README da una buena idea de cómo elegir entre las opciones.

Con respecto a si el directorio de Chrome necesita o no ser creado:

En el sistema de Fedora que utilicé, ese directorio necesitó ser creado. En el sistema Mac, ya estaba presente y contenía archivos de ejemplo, userChrome-example.css y userContent-example.css.

En el archivo userChrome-example.css fue el siguiente:

/*
* Do not remove the @namespace line -- it''s required for correct functioning
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

Aunque necesitaba establecer browser.tabs.drawInTitlebar en false, una vez que hice eso, el código de R4zen funcionó bien para mí con y sin la línea de @namespace presente.

Answer 4

Solo pensé que agregaría cómo hacer esto. (aunque se proporciona en otros sitios web vinculados, es mejor tener toda la información en un solo lugar).

• Inicia Firefox
• ingrese "about: support" en la barra de direcciones
• En la tabla, hay una fila "Carpeta de perfil". Haga clic en el botón "Abrir carpeta".
• debajo de "chrome" debe haber archivos "userChrome-example.css" que puede cambiar el nombre a "userChrome.css" y editar.

Esto me ahorró mucho tiempo porque en mi caso, el% appdata% apuntaba a la unidad incorrecta. Además, tuve que instalar notepad ++ porque las terminaciones de línea no se veían en el bloc de notas.