Firefox masque tout sauf la zone de contenu du navigateur

La façon native est d'utiliser la feuille de style personnalisée dans Firefox : userChrome.css

Firefox ne charge pas userChrome.css par défaut dans Firefox 69 et ultérieurs. Pour rendre à nouveau effective la feuille de style personnalisée, ouvrez about:config dans Firefox et définissez la préférence toolkit.legacyUserProfileCustomizations.stylesheets sur true

Avant la mise à jour de cette réponse, Mike G avait écrit une réponse de suivi auparavant.

Comment ça marche

Le bloc de code suivant est le contenu de userChrome.css qui masquera la barre d'onglets, la barre de navigation et les barres de défilement dans Firefox. Assurez-vous d'utiliser des noms d'éléments et d'identifiants valides.

/*
 * Ne pas supprimer la ligne @namespace -- elle est nécessaire au bon fonctionnement
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* définir l'espace de noms par défaut sur XUL */

/*
 * Cacher la barre d'onglets, la barre de navigation et les barres de défilement
 * !important peut être ajouté pour forcer la substitution, mais pas nécessaire
 * #content n'est pas nécessaire pour masquer les barres de défilement
 */
#TabsToolbar {visibility: collapse;}
#navigator-toolbox {visibility: collapse;}
browser {margin-right: -14px; margin-bottom: -14px;}

Limitation : Pas de raccourcis clavier. Fastidieux à activer ou désactiver à la demande.

• Pour restaurer l'interface par défaut, renommez userChrome.css en un autre nom comme userChrome.tmp et redémarrez Firefox pour prendre effet.

• Pour utiliser côte à côte avec une autre instance de Firefox avec l'interface par défaut, utilisez un profil séparé.

Tous les profils sont stockés dans le dossier de profil, que l'on peut localiser depuis Firefox en utilisant la barre de menu ou la barre d'outils, puis naviguer vers Aide > Informations de dépannage.

Comment configurer et utiliser

Les étapes suivantes sont génériques, quel que soit le système d'exploitation.

1. Ouvrez le Gestionnaire de profils de Firefox, puis créez un nouveau profil nommé 'hidebars' (tout nom de votre choix) et fermez le Gestionnaire de profils.

2. Ouvrez un gestionnaire de fichiers et ouvre le dossier de profil qui a été créé à l'étape 1.

3. Sous le nouveau dossier de profil, créez de nouveaux fichiers chrome/userChrome.css incluant le dossier parent chrome s'il n'existe pas.

4. Copiez-collez le contenu de userChrome.css ci-dessus dans le fichier créé à l'étape 3.

5. Enfin, enregistrez et fermez le fichier.

Pour commencer à utiliser, lancez une instance de Firefox avec le nouveau profil.

La combinaison de captures d'écran suivante montre Firefox Legacy (gauche) et Firefox Quantum sur Linux, chacun naviguant dans une petite taille de fenêtre lorsque la feuille de style personnalisée est utilisée.

Fonctionne avec toutes les versions de Firefox, sauf que Firefox 69 et ultérieurs n'utilisent plus userChrome.css par défaut. Testé avec Firefox 10, 20, 50 (Firefox Legacy) et 60, 63, 69 (Firefox Quantum) sur Linux et tout semblait fonctionner comme prévu.

Références

• Cette réponse de l'utilisateur1929 sur le forum de support de Firefox mentionne l'élément #TabToolbar pour modifier la barre d'onglets.

• Ce fichier personnalisé de Timvde sur GitHub mentionne l'élément #navigator-toolbox pour modifier la barre de navigation.

• Cette réponse de cor-el sur le forum de support de Firefox mentionne l'élément #content browser pour modifier les barres de défilement.

• CSS overflow sur w3schools pour comprendre que overflow n'est pas nécessaire.

• Propriété de visibilité CSS sur w3schools pour comprendre la valeur de visibility.

• Quelles sont les implications de l'utilisation de "!important" en CSS ? sur Stack Overflow pour comprendre que !important n'est pas nécessaire.

• Firefox 60 broke hide scrollbar css et Hide Scrollbar Firefox 60 : FirefoxCSS sur reddit.com ont tous deux suggéré de supprimer #content et de laisser seulement browser pour masquer correctement la barre de défilement.

• Firefox 69: userChrome.css and userContent.css disabled by default sur ghacks.net et PSA: Firefox v69 users will have to set a pref to enable userChrome.css and userContent.css sur reddit.com ont tous deux mentionné une nouvelle préférence toolkit.legacyUserProfileCustomizations.stylesheets dans about:config.

Remarque de l'auteur: Cette réponse a été écrite deux ans plus tard, seulement après avoir suggéré d'utiliser des extensions dans la première réponse. Depuis lors, plusieurs autres réponses basées sur userChrome.css ont été écrites au lieu d'améliorer cette réponse. C'est pourquoi cette réponse est maintenant un wiki communautaire, afin que quiconque ayant une réputation minimale puisse améliorer ce post pour suivre les derniers changements dans Firefox.

Je sais que c'est très tard, mais j'ai créé un bookmarklet pour cela, il ne nécessite aucun ajout et aucun téléchargement :)

Enregistrez le code JavaScript suivant en tant que bookmarklet, et cliquez dessus sur la page que vous souhaitez afficher dans une nouvelle fenêtre minimale :

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

Cliquez ici pour faciliter le processus! | JSfiddle

Remarque : Cela devrait fonctionner dans tous les navigateurs

Je sais qu'il est tard, mais peut-être que quelqu'un aimera.

Si vous voulez simplement masquer les éléments de l'interface utilisateur de Firefox jusqu'à ce qu'ils soient nécessaires, alors peut-être que mon userChrome.css est fait pour vous. (fonctionne sur FF 70.0.1)

• L'ensemble de la boîte à outils de navigation est caché jusqu'à ce qu'elle soit activée avec Ctrl-L, F6, et similaires

Pour masquer la barre d'onglets, vous devrez utiliser l'option personnaliser de Firefox (clic droit sur la barre d'onglets) pour déplacer le bouton nouvelle onglet (+) hors de la barre d'onglets, et assurez-vous d'utiliser la barre de titre du système (pour que les boutons de réduction, maximisation et fermeture ne se trouvent pas sur la barre d'onglets). Sinon, ces boutons entraveront la dissimulation.

Les instructions sur l'endroit où placer le fichier userChrome.css et comment l'activer peuvent être trouvées dans ce excellent post : https://superuser.com/a/1269912/1107142

Mon résumé rapide :

• sur la page about:config, activer toolkit.legacyUserProfileCustomizations.stylesheets sur true
• obtenir le Répertoire du profil depuis la page about:support
• créer un répertoire appelé chrome dans votre Répertoire du profil
• placer le fichier userChrome.css dans ce répertoire chrome

Mon userChrome.css, copiez et collez à souhait :

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

#navigator-toolbox {
    height: 0px !important;
    min-height: 0px !important;
    overflow: hidden !important;
}

#navigator-toolbox:focus,
#navigator-toolbox:focus-within,
#navigator-toolbox:active {
    height: auto !important;
}

J'aime Firefox et Vivaldi. L'une des meilleures fonctionnalités de Vivaldi (étant une utilisatrice de gestes de souris) est qu'il possède tellement d'options (barres latérales, favoris, barre d'adresse, barre d'état, etc.) qui peuvent être ajustées et déplacées...

Un raccourci dit "Masquer l'interface utilisateur". Tout disparaît... donc quand vous n'avez pas besoin de voir les onglets/la barre d'adresse, etc., je fais simplement un mouvement de souris et il ne me reste que la page et la fenêtre.

Magique.

Mieux encore, la couleur de la fenêtre s'inspire de la page web et s'adapte très bien - elle se fond parfaitement.