Firefox oculta todo excepto el área de contenido del navegador

¿Existe la posibilidad de ocultar todos los bordes y barras en Firefox como la barra de direcciones, la barra de navegación, el título de la ventana y las pestañas, por lo que el área restante es solo el área de contenido del navegador?

Me gustaría hacer una película de una aplicación web que escribí, pero tengo que filmarla en una resolución mayor que la aplicación misma. Simplemente quiero mostrar la aplicación en un segundo plano sin todas las cosas del navegador.

El mejor método sería a través del atajo de teclado, para que pueda volver a habilitar todo el material nuevamente.

La forma más fácil es instalar complementos relevantes en Firefox.

Para cualquiera de las siguientes configuraciones, instale los complementos respectivos. Firefox puede necesitar reiniciarse, pero a menudo es innecesario para Firefox Quantum. La tecla de acceso directo, si está disponible, se puede cambiar de Administrador de complementos> Extensiones para el complemento correspondiente.

Firefox tiene una sección de atajos de teclado rediseñada para administrar todos los atajos en un solo lugar, que ha estado disponible desde Firefox 66 .

Para el legado de Firefox

Configurar un utiliza los siguientes complementos:

• Ocultar barra de navegación, última prueba 1.41.1-firmado
• Ocultar barra de pestañas, última prueba 2.1.0.1-firmado
• HideScrollbars, última prueba firmada 0.2.1

Por ejemplo, he usado claves separadas F3yF4 para alternar el menú de navegación y la barra de pestañas (a través de Ocultar barra de navegación y Ocultar barra de pestañas) respectivamente. Para ocultar las barras, presione las teclas asignadas una por una. Esto le dará a Firefox solo con la barra de título visible o la decoración de la ventana.

Limitación: Asignar la misma tecla no funciona bien, debido a algún retraso en el medio. El resultado es similar incluso si se presionaron las teclas por separado al mismo tiempo. De cualquier manera, una de las barras no se esconderá y jugará a las escondidas con el usuario.

Funciona con Firefox 56 y versiones anteriores (en desuso ), pero ya no está disponible en los complementos de Firefox. Probado en conjunto con Firefox 41.0 en Linux. Sin captura de pantalla

Para Firefox Quantum

El programa de instalación B utiliza los siguientes complementos:

• Nueva ventana sin barra de herramientas por tkrkt

Vaya a una página web en HTTP, HTTPS o localhost, luego use el atajo de teclado o haga clic en el icono correspondiente en la barra de herramientas o en "Nueva ventana sin barra de herramientas" en el menú contextual. La página web se abrirá adicionalmente en una nueva ventana con barra de título visible y barra de desplazamiento vertical solamente.

Atajo de teclado: Shift+ Alt+ N(predeterminado en 1.3.0)

Limitación: Este complemento no abre ninguna página en el sistema de archivos local (archivo: ///) y las páginas integradas (aproximadamente: *) en absoluto.

Funciona con Firefox 42 y versiones posteriores. Probado 1.3.0 con Firefox 69.0 en Linux.

El programa de instalación C utiliza los siguientes complementos:

• Ventana emergente de Ett Chung

Vaya a una página web, luego haga clic en el icono correspondiente en la barra de herramientas o "Mover la pestaña actual a la ventana emergente" o "popup / fusionar la página actual" en el menú contextual. La página web se moverá a una nueva ventana con la barra de título visible y la barra de desplazamiento vertical solamente. Para revertir la nueva ventana a una pestaña normal, haga clic nuevamente en "popup / merge current page" en el menú contextual.

Método abreviado de teclado: no asignado (predeterminado en 0.0.8)

Limitación: la ventana emergente siempre permanecerá encima de la ventana original de Firefox, que no se puede cambiar.

Funciona con Firefox 53 y versiones posteriores. Probado 0.0.8 con Firefox 69.0 en Linux.

Para Firefox sin complemento

He publicado una respuesta por separado a continuación (haga clic o desplácese hacia abajo) que funciona para cualquier versión de Firefox, pero no es la forma más fácil y no tiene atajos de teclado.

La forma nativa es usar la hoja de estilo personalizada en Firefox: userChrome.css

Firefox no carga userChrome.css de forma predeterminada en Firefox 69 y versiones posteriores. Para que la hoja de estilo personalizada vuelva a ser efectiva, abra about:configen Firefox y establezca la preferencia toolkit.legacyUserProfileCustomizations.stylesheetsentrue

Antes de actualizar esta respuesta, Mike G escribió una respuesta de seguimiento anteriormente .

Cómo funciona

El siguiente bloque de código es el contenido userChrome.cssque ocultará la barra de pestañas, la barra de navegación y las barras de desplazamiento en Firefox. Asegúrese de utilizar nombres e ID de elementos válidos .

/*
 * 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 */

/*
 * Hide tab bar, navigation bar and scrollbars
 * !important may be added to force override, but not necessary
 * #content is not necessary to hide scroll bars
 */
#TabsToolbar {visibility: collapse;}
#navigator-toolbox {visibility: collapse;}
browser {margin-right: -14px; margin-bottom: -14px;}

Limitación: sin atajos de teclado. Tedioso para habilitar o deshabilitar a pedido.

• Para restaurar la interfaz predeterminada, cambie el nombre userChrome.cssa otro nombre como userChrome.tmpy reinicie Firefox para que surta efecto.

• Para usar lado a lado con otra instancia de Firefox con interfaz predeterminada, use un perfil separado .

Todos los perfiles se almacenan en la carpeta de perfiles , que se puede ubicar desde Firefox mediante la barra de menú o la barra de herramientas, luego navegue a Ayuda> Información de solución de problemas .

Cómo configurar y usar

Los siguientes son pasos genéricos independientemente de la plataforma del sistema.

1. Ejecute Profile Manager de Firefox, luego cree un nuevo perfil llamado 'hidebars' (cualquier nombre que elija) y cierre Profile Manager.

2. Ejecute un administrador de archivos y abra la carpeta de perfil que se creó en el paso 1.

3. En la nueva carpeta de perfil, cree nuevos archivos, chrome/userChrome.css incluida la carpeta principal, chromesi no existe.

4. Copie y pegue el contenido de userChrome.cssarriba en el archivo creado en el paso 3.

5. Finalmente, guarde y cierre el archivo.

Para comenzar a usar, ejecute una instancia de Firefox con el nuevo perfil.

El siguiente combo de captura de pantalla muestra Firefox Legacy (izquierda) y Firefox Quantum en Linux, cada uno navegando en un tamaño de ventana pequeña cuando se usa la hoja de estilo personalizada.

Funciona con todas las versiones de Firefox, excepto Firefox 69 y versiones posteriores que ahora ignoran userChrome.css de forma predeterminada. Probado con Firefox 10, 20, 50 (Firefox Legacy) y 60, 63, 69 (Firefox Quantum) en Linux y todo parecía funcionar como se esperaba.

Referencias

• Esta respuesta de user1929 en Firefox Support Forum mencionó el #TabToolbarnombre del elemento y la ID para modificar la barra de pestañas.

• Este archivo personalizado de Timvde en GitHub mencionó el #navigator-toolboxnombre y la ID del elemento para modificar la barra de navegación.

• Esta respuesta de cor-el en el foro de soporte de Firefox mencionó el #content browsernombre y la ID del elemento para modificar las barras de desplazamiento.

• El desbordamiento de CSS en w3schools para comprender overflowno es necesario.

• Visibilidad CSS Propiedad en w3schools para comprender el valor visibility.

• ¿Cuáles son las implicaciones del uso de "! Important" en CSS? en Desbordamiento de pila para comprender !importantno es necesario.

• Firefox 60 rompió hide scrollbar css y Hide Scrollbar Firefox 60: FirefoxCSS en reddit.com sugirió eliminar #contenty dejar solo browserpara ocultar correctamente la barra de desplazamiento.

• Firefox 69: userChrome.css y userContent.css deshabilitados de forma predeterminada en ghacks.net y PSA: los usuarios de Firefox v69 tendrán que establecer un pref para habilitar userChrome.css y userContent.css en reddit.com, ambos han notado una nueva preferencia toolkit.legacyUserProfileCustomizations.stylesheetsen about:config.

Nota del respondedor : esta respuesta fue escrita dos años después , solo después de que sugerí usar complementos en la primera respuesta . Desde entonces, se escribieron varias respuestas más basadas en userChrome.css en lugar de mejorar esta respuesta. Por lo tanto, esta respuesta ahora es un wiki de la comunidad, por lo que cualquier persona con una reputación mínima puede mejorar esta publicación para mantenerse al día con los últimos cambios en Firefox.

Sé que es muy tarde, pero hice un marcador para esto, no requiere complementos ni descargas :)

Guarde el siguiente código JavaScript como marcador y haga clic en él en la página que desea ver en una nueva ventana mínima:

javascript:void%20function(){window.open(window.location.href,Math.random(),%22menubar=1,resizable=0%22)}();

¡Haga clic aquí para facilitar el proceso! El | JSfiddle

Nota: Esto debería funcionar en todos los navegadores

Amo Firefox y Vivaldi. Una de las mejores características de Vivaldi (yo soy un usuario de los gestos del mouse) es que tiene tantas opciones (barras laterales, marcadores, barra de direcciones, barra de estado, etc.) que se pueden ajustar y mover ...

Un atajo dice 'Ocultar UI'. Todo desaparece ... así que cuando no necesita ver pestañas / barra adicional, etc., simplemente hago un garabato del mouse y me quedo con la página y la ventana.

Magia.

Aún mejor, el color de la ventana toma pistas de la página web y funciona muy bien, combina muy bien.

Sé que es tarde, pero tal vez a alguien le gustará.

Si solo quieres ocultar los elementos de la interfaz de usuario de Firefox hasta que sean necesarios, entonces mi userChrome.csses para ti. (trabajando en FF 70.0.1)

• La barra de pestañas está oculta si solo hay una pestaña
• La barra de direcciones está oculta hasta que se enfoca con Ctrl-L, F6 y similares
• Las barras de desplazamiento a la derecha se eliminan

Para ocultar la barra de pestañas, necesitará usar Firefox customize(simplemente haga clic con el botón derecho en la barra de pestañas) para newtab (+) buttonquitar la barra de pestañas y asegurarse de que está usando el sistema Titlebar(de modo que la ventana min, max , y los botones de cierre no están en la barra de pestañas). De lo contrario, esos botones dificultarán la ocultación.

Las instrucciones sobre dónde colocar el userChrome.cssarchivo y cómo activarlo se pueden encontrar en esta excelente publicación: /superuser//a/1269912/1107142

Mi resumen rápido:

• en la about:configpágina alternar toolkit.legacyUserProfileCustomizations.stylesheetsatrue
• llegar Profile Directorydesde la about:supportpágina
• crear un directorio llamado chromeen suProfile Directory
• poner el userChrome.cssarchivo en ese chromedirectorio

Mi userChrome.css, copie y pegue a voluntad:

/* namespace required, do not remove */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* hide tabbar if only one tab */
/* note: won't hide unless newtab (+) button is removed from tabbar and */
/* the system title bars are used (use window manager to disable window */
/* titlebar decorations if desired). */
/* use 'customize' from menu and just drag the (+) button off the tabbar */
/* on the bottom options bar make sure titlebar is on */     
/* setting density to compact is also nice */
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    min-height: 0 !important;
}
#tabbrowser-tabs tab {
    min-height: var(--tab-min-height)
}
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
    visibility: collapse;
}

/* autohide addressbar */
/* will show address bar when focused with alt-d,ctrl-l,ctrl-k, or f6 */
/* I don't like the mouse hover activation, but follow comments below */
/* if that's something you'd like. */
/* Also,can change nav-bar to navigation-toolbox to autohide all toolbars */
#nav-bar {
    height: 0px !important;
    min-height: 0px !important;
    overflow: hidden !important;
    /* for mouse hover activation would need some height */
    /* disable above height: 0px line and add: */
    /* height: 3px !important; */
}
/* for mouse hover activation need to add: */
/* #nav-bar:hover, */
#nav-bar:focus,
#nav-bar:focus-within,
#nav-bar:active {
    height: auto !important;
}

/* remove right hand scrollbar */
browser {
    margin-right: -15px;
}

La mejor opción que conozco es el modo de pantalla completa, que se activa F11en todos los navegadores modernos. Sin embargo, eso ocultará su fondo de escritorio y otras aplicaciones, que pueden no ser lo que desea. Simplemente llenará el espacio alrededor del contenido de la aplicación web con blanco (o cualquiera que sea el color / imagen de fondo en la hoja de estilo de la aplicación web).

Puede ejecutar la ventana de su aplicación desde la línea de comando

"c: \ Archivos de programa \ Mozilla Firefox" \ firefox.exe -chrome " http://www.example.com "

y colóquelo en un escritorio extendido con un fondo de su elección.

Las preguntas sobre cómo hacer esto en Firefox Quantum ( > = 57 ) tal vez respondan a esta pregunta ( Firefox Quantum (> = 57) ¿Cómo alternar todas las barras de herramientas? (Con un atajo de teclado, como F11 pero en una ventana, no a pantalla completa) )

F11 / Pantalla completa a veces no es práctico.
Si solo desea alternar las barras de herramientas en las versiones de Firefox anteriores a 57 , es posible con el complemento "Dorando keyconfig":

1. especifique un script en el "Editor de claves" de Dorando:

var s = document.getElementById('status-bar');
s.hidden = !s.hidden;
var b = document.getElementById('PersonalToolbar');
b.collapsed = !b.collapsed;
var nb = document.getElementById('nav-bar');
nb.collapsed =!nb.collapsed
var tb = document.getElementById('TabsToolbar');
tb.collapsed =!tb.collapsed

2. mapearlo a un atajo de teclado a través de la interfaz de complemento Dorando

deberías probar el nuevo --kioskparámetro de comando del nuevo Firefox v.71

https://www.mozilla.org/en-US/firefox/71.0a1/releasenotes/

Tenga en cuenta que la respuesta de clearkimura anterior, que sugiere el uso de una hoja de estilo, necesita un pequeño ajuste en versiones posteriores de Firefox. La solución funcionó para mí una vez que hice esto. Desde esta página web:

Configure Firefox para que busque userChrome.css al inicio (actualizado 24/05/2019)

Para acelerar el inicio de la mayoría de los usuarios, Firefox 69 ya no buscará este archivo automáticamente. Necesitas decirle que mire. Así es cómo:

1. En una nueva pestaña, escriba o pegue about: config en la barra de direcciones y presione Entrar / Volver. Haga clic en el botón de aceptar el riesgo.
2. En el cuadro de búsqueda arriba de la lista, escriba o pegue userprof y pause mientras se filtra la lista. Si no ve nada en la lista, ignore el resto de estas instrucciones. Puede cerrar esta pestaña ahora.
3. Haga doble clic en la preferencia toolkit.legacyUserProfileCustomizations.stylesheets para cambiar el valor de falso a verdadero.

Ese cambio debería tener efecto en su próximo inicio.