Firefox cache tout sauf la zone de contenu du navigateur

Existe-t-il une possibilité de masquer toutes les bordures et barres dans Firefox comme la barre d'adresse, la barre de navigation, le titre de la fenêtre et les onglets, de sorte que la zone restante n'est que la zone de contenu du navigateur?

Je voudrais faire un film d'une application Web que j'ai écrite, mais je dois le filmer dans une résolution plus grande que l'application elle-même. Je veux simplement montrer l'application sur un fond sans tous les trucs du navigateur.

La meilleure méthode serait via un raccourci clavier, afin que je puisse réactiver toutes les choses.

Le moyen le plus simple consiste à installer les modules complémentaires pertinents dans Firefox.

Pour l'une des configurations suivantes, installez les modules complémentaires respectifs. Firefox peut avoir besoin de redémarrer, mais souvent inutile pour Firefox Quantum. La touche de raccourci, le cas échéant, peut être modifié de Add-Manager de> Extensions pour add-on en question.

Firefox a une section de raccourcis clavier repensée pour gérer tous les raccourcis en un seul endroit, qui est disponible depuis Firefox 66 .

Pour Firefox Legacy

Le programme d'installation A utilise les modules complémentaires suivants:

• Masquer la barre de navigation, dernier test signé 1.41.1
• Masquer la barre d'onglets, dernier test signé 2.1.0.1
• HideScrollbars, dernier test signé 0.2.1

Par exemple, j'ai utilisé des touches distinctes F3et F4pour basculer respectivement le menu de navigation et la barre d'onglets (via Masquer la barre de navigation et Masquer la barre d'onglets). Pour masquer les barres, appuyez une à une sur les touches attribuées. Cela donnera à Firefox une barre de titre visible ou une décoration de fenêtre uniquement.

Limitation: l'attribution de la même clé ne fonctionne pas bien, en raison d'un certain délai entre les deux. Le résultat est similaire même si les touches séparées ont été enfoncées en même temps. Quoi qu'il en soit, l'une des barres ne se cachera pas et ne jouera pas à cache-cache avec l'utilisateur.

Fonctionne avec Firefox 56 et versions antérieures ( obsolète ), mais n'est plus disponible à partir des modules complémentaires de Firefox. Testé avec Firefox 41.0 sous Linux. Pas de capture d'écran.

Pour Firefox Quantum

Le programme d'installation B utilise les modules complémentaires suivants:

• Nouvelle fenêtre sans barre d'outils par tkrkt

Accédez à une page Web sur HTTP, HTTPS ou localhost, puis utilisez le raccourci clavier ou cliquez sur l'icône correspondante dans la barre d'outils ou sur "Nouvelle fenêtre sans barre d'outils" dans le menu contextuel. La page Web s'ouvrira en outre dans une nouvelle fenêtre avec une barre de titre visible et une barre de défilement verticale uniquement.

Raccourci clavier: Shift+ Alt+ N(par défaut dans 1.3.0)

Limitation: ce module complémentaire n'ouvre aucune page du système de fichiers local (fichier: ///) et des pages intégrées (environ: *).

Fonctionne avec Firefox 42 et versions ultérieures. Testé 1.3.0 avec Firefox 69.0 sous Linux.

Le programme d'installation C utilise les modules complémentaires suivants:

• Fenêtre contextuelle par Ett Chung

Accédez à une page Web, puis cliquez sur l'icône correspondante dans la barre d'outils ou "Déplacer l'onglet actuel vers la fenêtre contextuelle" ou "popup / fusionner la page actuelle" dans le menu contextuel. La page Web se déplacera vers une nouvelle fenêtre avec une barre de titre visible et une barre de défilement verticale uniquement. Pour rétablir la nouvelle fenêtre dans un onglet normal, cliquez à nouveau sur "popup / merge current page" dans le menu contextuel.

Raccourci clavier: non attribué (par défaut dans 0.0.8)

Limitation: la fenêtre pop-up restera toujours au-dessus de la fenêtre d'origine de Firefox, qui ne peut pas être modifiée.

Fonctionne avec Firefox 53 et versions ultérieures. Testé 0.0.8 avec Firefox 69.0 sous Linux.

Pour Firefox sans module complémentaire

J'ai posté une réponse distincte ci-dessous (cliquez ou faites défiler vers le bas) qui fonctionne pour n'importe quelle version de Firefox, mais pas la manière la plus simple et n'a pas de raccourcis clavier.

La méthode native consiste à utiliser la feuille de style personnalisée dans Firefox: userChrome.css

Firefox ne charge pas userChrome.css par défaut dans Firefox 69 et versions ultérieures. Pour réactiver la feuille de style personnalisée, ouvrez-la about:configdans Firefox et définissez la préférence toolkit.legacyUserProfileCustomizations.stylesheetssurtrue

Avant que cette réponse ne soit mise à jour, Mike G a écrit une réponse de suivi plus tôt .

Comment ça fonctionne

Le bloc de code suivant est le contenu userChrome.cssqui 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ément et des ID valides .

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

Limitation: aucun raccourci clavier. Fastidieux pour activer ou désactiver à la demande.

• Pour restaurer l'interface par défaut, renommez-le userChrome.csssous un autre nom comme userChrome.tmpet redémarrez Firefox pour prendre effet.

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

Tous les profils sont stockés dans le dossier de profils , qui peut être localisé à partir de Firefox à l' aide de la barre de menus ou de la barre d'outils, puis accédez à Aide> Informations de dépannage .

Comment configurer et utiliser

Les étapes suivantes sont génériques quelle que soit la plate-forme du système.

1. Exécutez Profile Manager de Firefox, puis créez un nouveau profil nommé «hidebars» (n'importe quel nom de votre choix) et fermez Profile Manager.

2. Exécutez un gestionnaire de fichiers et ouvrez le dossier de profil créé à l'étape 1.

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

4. Copiez et collez le contenu d'en userChrome.csshaut dans le fichier créé à l'étape 3.

5. Enfin, enregistrez et fermez le fichier.

Pour commencer à utiliser, exécutez une instance de Firefox avec le nouveau profil.

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

Fonctionne avec toutes les versions de Firefox, à l'exception de Firefox 69 et versions ultérieures, maintenant ignorer userChrome.css par défaut. Testé avec Firefox 10, 20, 50 (Firefox Legacy) et 60, 63, 69 (Firefox Quantum) sous Linux et tout semblait fonctionner comme prévu.

Les références

• Cette réponse de user1929 sur le forum de support de Firefox mentionne le #TabToolbarnom et l'ID de l'élément pour modifier la barre d'onglets.

• Ce fichier personnalisé de Timvde sur GitHub a mentionné le #navigator-toolboxnom et l'ID de l'élément pour modifier la barre de navigation.

• Cette réponse de cor-el sur le forum de support de Firefox mentionne le #content browsernom et l'ID de l'élément pour la modification des barres de défilement.

• Un débordement CSS sur w3schools pour comprendre overflown'est pas nécessaire.

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

• Quelles sont les implications de l'utilisation de «! Important» en CSS? sur Stack Overflow pour comprendre !importantn'est pas nécessaire.

• Firefox 60 a cassé masquer la barre de défilement CSS et Masquer la barre de défilement Firefox 60: FirefoxCSS sur reddit.com a suggéré de supprimer #contentet de laisser uniquement browserpour masquer correctement la barre de défilement.

• Firefox 69: userChrome.css et userContent.css désactivés par défaut sur ghacks.net et PSA: les utilisateurs de Firefox v69 devront définir une préférence pour activer userChrome.css et userContent.css sur reddit.com ont tous deux noté une nouvelle préférence toolkit.legacyUserProfileCustomizations.stylesheetsdans about:config.

Note du répondeur: Cette réponse a été écrite deux ans plus tard , seulement après que j'avais suggéré d'utiliser des modules complémentaires dans la première réponse . Depuis lors, plusieurs réponses supplémentaires basées sur userChrome.css ont été écrites au lieu d'améliorer cette réponse. Par conséquent, cette réponse est maintenant un wiki communautaire, afin que toute personne ayant une réputation minimale puisse améliorer ce message pour suivre les dernières modifications de Firefox.

Je sais que c'est super tard, mais j'ai fait un bookmarklet pour cela, cela ne nécessite aucun add-on 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

J'adore Firefox et Vivaldi. L'une des meilleures caractéristiques de Vivaldi (moi qui suis un utilisateur des gestes de la souris) est qu'il a tellement d'options (barres latérales, signets, barre d'adresse, barre d'état, etc.) qui peuvent être ajustées et déplacées ...

Un raccourci indique «Masquer l'interface utilisateur». Tout disparaît ... donc quand vous n'avez pas besoin de voir les onglets / la barre des addis, etc.

La magie.

Encore mieux, la couleur de la fenêtre prend des indices de la page Web et fonctionne très bien - se fond bien.

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

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

• La barre d'onglets est masquée si un seul onglet
• La barre d'adresse est cachée jusqu'à ce qu'elle soit focalisée avec Ctrl-L, F6, etc.
• Les barres de défilement à droite sont supprimées

Pour masquer la barre d'onglets, vous devrez utiliser Firefox customize( faites un clic droit sur la barre d'onglets) pour retirer la newtab (+) buttonbarre d'onglets, et assurez-vous que vous utilisez le système Titlebar(de sorte que la fenêtre min, max et les boutons de fermeture ne sont pas dans la barre d'onglets). Sinon, ces boutons gêneront la dissimulation.

Des instructions sur où placer le userChrome.cssfichier et comment l'activer peuvent être trouvées dans cet excellent article: /superuser//a/1269912/1107142

Mon résumé rapide:

• sur la about:configpage basculer toolkit.legacyUserProfileCustomizations.stylesheetsverstrue
• obtenir Profile Directoryde la about:supportpage
• créer un répertoire appelé chromedans votreProfile Directory
• mettre le userChrome.cssfichier dans ce chromerépertoire

Mon userChrome.css, copiez et collez à volonté:

/* 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 meilleure option que je connaisse est le mode plein écran, qui est activé à l'aide F11de tous les navigateurs modernes. Cela masquera l'arrière-plan de votre bureau et d'autres applications, ce qui n'est peut-être pas ce que vous voulez. Il remplira simplement l'espace autour du contenu de l'application Web avec du blanc (ou quelle que soit la couleur / image d'arrière-plan dans la feuille de style de l'application Web).

Vous pouvez exécuter la fenêtre de votre application à partir de la ligne de commande

"c: \ Program Files \ Mozilla Firefox" \ firefox.exe -chrome " http://www.example.com "

et placez-le sur un bureau étendu avec un arrière-plan de votre choix.

Les questions sur la façon de procéder dans Firefox Quantum ( > = 57 ) répondent peut-être à cette question ( Firefox Quantum (> = 57) Comment basculer toutes les barres d'outils? (Avec un raccourci clavier, comme F11 mais dans une fenêtre, pas en plein écran) )

F11 / Plein écran est parfois impraticable.
Si vous voulez simplement basculer les barres d'outils dans les versions de Firefox antérieures à 57, il est possible avec l'addon "Dorando keyconfig":

1. spécifiez un script dans Dorando "Key Editor":

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. mappez-le à un raccourci clavier via l'interface add-on Dorando

vous devriez essayer --kioskde nouveaux paramètres de commande du nouveau Firefox v.71

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

Notez que la réponse de clearkimura ci-dessus, qui suggère d'utiliser une feuille de style, a besoin d'un petit ajustement dans les versions ultérieures de Firefox. La solution a fonctionné pour moi une fois que j'ai fait cela. À partir de cette page Web:

Configurer Firefox pour rechercher userChrome.css au démarrage (mis à jour le 24/05/2019)

Pour accélérer le démarrage de la plupart des utilisateurs, Firefox 69 ne recherchera plus automatiquement ce fichier. Vous devez lui dire de regarder. Voici comment:

1. Dans un nouvel onglet, saisissez ou collez about: config dans la barre d'adresse et appuyez sur Entrée / Retour. Cliquez sur le bouton acceptant le risque.
2. Dans la zone de recherche au-dessus de la liste, tapez ou collez userprof et faites une pause pendant que la liste est filtrée. Si vous ne voyez rien sur la liste, veuillez ignorer le reste de ces instructions. Vous pouvez fermer cet onglet maintenant.
3. Double-cliquez sur le toolkit.legacyUserProfileCustomizations.stylesheets préférence pour passer la valeur false à true.

Ce changement devrait prendre effet lors de votre prochain démarrage.