O Firefox esconde tudo, exceto a área de conteúdo do navegador

Existe a possibilidade de ocultar todas as bordas e barras no Firefox, como barra de endereço, barra de navegação, título da janela e guias, para que a área restante seja apenas a área de conteúdo do navegador?

Gostaria de fazer um filme de um aplicativo da Web que escrevi, mas tenho que filmá-lo em uma resolução maior que o próprio aplicativo. Eu simplesmente quero mostrar o aplicativo em segundo plano, sem todas as coisas do navegador.

O melhor método seria via atalho de teclado, para que eu possa reativar todas as coisas novamente.

A maneira mais fácil é instalar complementos relevantes no Firefox.

Para qualquer uma das seguintes configurações, instale os respectivos complementos. O Firefox pode precisar reiniciar, mas geralmente não é necessário para o Firefox Quantum. A tecla de atalho, se disponível, pode ser alterada em Gerenciador de Complementos> Extensões para o respectivo complemento.

O Firefox possui uma seção de atalhos de teclado reprojetada para gerenciar todos os atalhos em um único local, disponível desde o Firefox 66 .

Para o Firefox Legacy

A instalação A usa os seguintes complementos:

• Ocultar barra de navegação, testada pela última vez com a versão 1.41.1
• Ocultar a barra de guias, testada pela última vez com o 2.1.0.1 assinado
• HideScrollbars, testado pela última vez com 0.2.1

Por exemplo, eu usei chaves separadas F3eF4 para alternar entre o menu de navegação e a barra de guias (via Ocultar barra de navegação e Ocultar barra de guias), respectivamente. Para ocultar as barras, pressione as teclas atribuídas uma a uma. Isso dará ao Firefox apenas uma barra de título visível ou uma decoração de janela.

Limitação: atribuir a mesma chave não funciona bem, devido a algum atraso no meio. O resultado é semelhante, mesmo que as teclas separadas tenham sido pressionadas ao mesmo tempo. De qualquer maneira, uma das barras não se esconde e brinca de esconde-esconde com o usuário.

Funciona com o Firefox 56 e versões anteriores ( Descontinuado ), mas não está mais disponível nos complementos do Firefox. Testado completamente com o Firefox 41.0 no Linux. Nenhuma captura de tela.

Para Firefox Quantum

A instalação B usa os seguintes complementos:

• Nova janela sem barra de ferramentas da tkrkt

Vá para uma página da Web em HTTP, HTTPS ou localhost e use o atalho do teclado ou clique no ícone correspondente na barra de ferramentas ou em "Nova janela sem barra de ferramentas" no menu de contexto. Além disso, a página da web abrirá em uma nova janela com apenas a barra de título visível e a barra de rolagem vertical.

Atalho do teclado: Shift+ Alt+ N(padrão na 1.3.0)

Limitação: Este complemento não abre nenhuma página no sistema de arquivos local (arquivo: ///) e nas páginas internas (sobre: ​​*).

Funciona com o Firefox 42 e posterior. Testado 1.3.0 com o Firefox 69.0 no Linux.

A instalação C usa os seguintes complementos:

• Janela pop-up de Ett Chung

Vá para uma página da web e clique no ícone correspondente na barra de ferramentas ou em "Mover a guia atual para a janela pop-up" ou "pop-up / mesclar página atual" no menu de contexto. A página da web será movida para uma nova janela com a barra de título visível e a barra de rolagem vertical. Para reverter a nova janela para uma guia normal, clique novamente em "pop-up / mesclar página atual" no menu de contexto.

Atalho do teclado: não atribuído (padrão em 0.0.8)

Limitação: A janela pop-up sempre ficará em cima da janela original do Firefox, que não pode ser alterada.

Funciona com o Firefox 53 e posterior. Testado 0.0.8 com o Firefox 69.0 no Linux.

Para Firefox sem complemento

Postei uma resposta separada abaixo (clique ou role para baixo) que funciona em qualquer versão do Firefox, mas não da maneira mais fácil e não possui atalhos de teclado.

A maneira nativa é usar a folha de estilo personalizada no Firefox: userChrome.css

O Firefox não carrega o userChrome.css por padrão no Firefox 69 e posterior. Para efetivar a folha de estilo personalizada novamente, abra about:configno Firefox e defina a preferência toolkit.legacyUserProfileCustomizations.stylesheetscomotrue

Antes que essa resposta fosse atualizada, Mike G escreveu uma resposta de acompanhamento anteriormente .

Como funciona

O seguinte bloco de código é o conteúdo userChrome.cssque oculta a barra de guias, a barra de navegação e as barras de rolagem no Firefox. Certifique-se de usar nomes e IDs 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;}

Limitação: sem atalhos de teclado. Tedioso para ativar ou desativar sob demanda.

• Para restaurar a interface padrão, renomeie userChrome.csspara outro nome como userChrome.tmpe reinicie o Firefox para entrar em vigor.

• Para usar lado a lado com outra instância do Firefox com interface padrão, use um perfil separado .

Todos os perfis são armazenados na pasta de perfis , que pode ser localizada no Firefox usando a barra de menus ou a barra de ferramentas e navegue até Ajuda> Informações sobre solução de problemas .

Como configurar e usar

A seguir, são etapas genéricas, independentemente da plataforma do sistema.

1. Execute o Profile Manager do Firefox, crie um novo perfil chamado 'hidebars' (qualquer nome de sua escolha) e feche o Profile Manager.

2. Execute um gerenciador de arquivos e abra a pasta de perfil que foi criada na etapa 1.

3. Sob a nova pasta de perfil, crie novos arquivos, chrome/userChrome.css incluindo a pasta pai, chromese ela não existir.

4. Copie e cole o conteúdo de userChrome.csscima no arquivo criado na etapa 3.

5. Por fim, salve e feche o arquivo.

Para começar a usar, execute uma instância do Firefox com o novo perfil.

A combinação de captura de tela a seguir mostra o Firefox Legacy (à esquerda) e o Firefox Quantum no Linux, cada um navegando no tamanho de uma janela pequena quando a folha de estilo personalizada é usada.

Funciona com todas as versões do Firefox, exceto o Firefox 69 e, posteriormente, desconsidera o userChrome.css por padrão. Testado com o Firefox 10, 20, 50 (Firefox Legacy) e 60, 63, 69 (Firefox Quantum) no Linux e tudo parecia funcionar como esperado.

Referências

• Esta resposta de user1929 no Fórum de Suporte do Firefox mencionou o #TabToolbarnome e o ID do elemento para modificar a barra de guias.

• Esse arquivo personalizado do Timvde no GitHub mencionou o #navigator-toolboxnome e o ID do elemento para modificar a barra de navegação.

• Esta resposta de cor-el no Fórum de Suporte do Firefox mencionou o #content browsernome e o ID do elemento para modificar as barras de rolagem.

• O excesso de CSS nas w3schools para entender overflownão é necessário.

• Visibilidade do CSS Propriedade no w3schools para entender o valor visibility.

• Quais são as implicações do uso de "! Important" no CSS? no Stack Overflow para entender !importantnão é necessário.

• O Firefox 60 quebrou o hide scrollbar css e o Hide Scrollbar Firefox 60: FirefoxCSS no reddit.com, ambos sugeriram remover #contente sair apenas browserpara ocultar corretamente a barra de rolagem.

• Firefox 69: userChrome.css e userContent.css desativado por padrão em ghacks.net e PSA: os usuários do Firefox v69 terão que definir um pref para ativar userChrome.css e userContent.css no reddit.com, ambos notaram uma nova preferência toolkit.legacyUserProfileCustomizations.stylesheetsem about:config.

Nota do respondente : Esta resposta foi escrita dois anos depois , somente depois que eu sugeri o uso de complementos na primeira resposta . Desde então, várias outras respostas baseadas em userChrome.css foram escritas em vez de melhorar essa resposta. Portanto, esta resposta agora é um wiki da comunidade, para que qualquer pessoa com reputação mínima possa melhorar este post para acompanhar as alterações mais recentes no Firefox.

Sei que é tarde demais, mas criei um bookmarklet para isso, não requer complementos nem downloads :)

Salve o seguinte código JavaScript como um bookmarklet e clique nele na página que deseja visualizar em uma nova janela mínima:

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

Clique aqui para facilitar o processo! | JSfiddle

Nota: Isso deve funcionar em todos os navegadores

Eu amo o Firefox e o Vivaldi. Uma das melhores características do Vivaldi (eu sendo usuário de gestos do mouse) é que ele tem tantas opções (barras laterais, favoritos, barra de endereços, barra de status etc.) que podem ser ajustadas e movidas ...

Um atalho diz 'Ocultar interface do usuário'. Tudo desaparece ... então, quando você não precisa ver as guias / barra de adição, etc, basta clicar no mouse e ficar com a página e a janela.

Magia.

Melhor ainda, a cor da janela recebe dicas da página da web e funciona muito bem - combina muito bem.

Eu sei que é tarde, mas talvez alguém goste.

Se você apenas deseja ocultar os elementos da interface do usuário do Firefox até que sejam necessários, talvez o meu userChrome.cssseja para você. (trabalhando em FF 70.0.1)

• A barra de guias fica oculta se houver apenas uma guia
• A barra de endereço fica oculta até o foco com Ctrl-L, F6 e similares
• As barras de rolagem à direita são removidas

Para ocultar a barra de abas, você precisará usar o Firefox customize(basta clicar com o botão direito do mouse na barra de abas) para puxá-la para newtab (+) buttonfora da barra de abas, e certifique-se de usar as do sistema Titlebar(para que a janela min, max e os botões fechar não estão na barra de guias). Caso contrário, esses botões impedirão o esconderijo.

Instruções sobre onde colocar o userChrome.cssarquivo e como ativá-lo podem ser encontradas neste excelente post: /superuser//a/1269912/1107142

Meu breve resumo:

• na about:configpágina alterne toolkit.legacyUserProfileCustomizations.stylesheetsparatrue
• obter Profile Directoryda about:supportpágina
• crie um diretório chamado chromeem seuProfile Directory
• colocar userChrome.cssarquivo nesse chromediretório

Meu userChrome.css, copie e cole à vontade:

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

A melhor opção que eu conheço é o modo de tela cheia, que é alternado usando F11em todos os navegadores modernos. Isso ocultará o plano de fundo da área de trabalho e outros aplicativos, que podem não ser o que você deseja. Simplesmente preencherá o espaço em torno do conteúdo do aplicativo Web com branco (ou qualquer que seja a cor / imagem de plano de fundo na folha de estilo do aplicativo Web).

Você pode executar a janela do aplicativo na linha de comando

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

e coloque em uma área de trabalho estendida com um plano de fundo de sua escolha.

As perguntas sobre como fazer isso no Firefox Quantum ( > = 57 ) talvez respondam a essa pergunta ( Firefox Quantum (> = 57) Como alternar todas as barras de ferramentas? (Com um atalho de teclado, como F11, mas em uma janela, não em tela cheia) )

Às vezes, o F11 / Tela cheia é impraticável.
Se você quiser apenas alternar as barras de ferramentas nas versões anteriores ao 57 , é possível com o complemento "Dorando keyconfig":

1. especifique um script no "Editor de Chaves" do 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. mapeie-o para um atalho de teclado através da interface adicional Dorando

você deve tentar o novo comando param --kioskdo novo Firefox v.71

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

Observe que a resposta do clearkimura acima, que sugere o uso de uma folha de estilo, precisa de um pequeno ajuste nas versões posteriores do Firefox. A solução funcionou para mim depois que fiz isso. A partir desta página da web:

Configure o Firefox para procurar por userChrome.css na inicialização (atualizado em 24/05/2019)

Para tornar a inicialização mais rápida para a maioria dos usuários, o Firefox 69 não procurará mais esse arquivo automaticamente. Você precisa dizer para procurar. Aqui está como:

1. Em uma nova guia, digite ou cole about: config na barra de endereços e pressione Enter / Return. Clique no botão que aceita o risco.
2. Na caixa de pesquisa acima da lista, digite ou cole userprof e faça uma pausa enquanto a lista é filtrada. Se você não encontrar nada na lista, ignore o restante destas instruções. Você pode fechar esta guia agora.
3. Clique duas vezes na preferência toolkit.legacyUserProfileCustomizations.stylesheets para alternar o valor de falso para verdadeiro.

Essa alteração deve entrar em vigor na sua próxima inicialização.