Como personalizar a interface de usuário do Firefox 57 ou superior

Agora, crie uma pasta chamada chrome, e dentro dessa pasta crie um arquivo vazio chamado userChrome.css. Agora você pode começar a colocar todas as regras CSS que desejar nesse arquivo e elas serão automaticamente carregadas pelo Firefox quando ele for iniciado.

• Como instalar o navegador Microsoft Edge Dev no Linux via Flatpak
• Como instalar o navegador Opera developer no Linux via Snap
• Como instalar o navegador Vieb no Linux via AppImage
• Como instalar o navegador ungoogled-chromium no Linux via Flatpak

Para fazer isso, abra a opção “Inspecionar Elemento” no menu de contexto (clique com o botão direito do mouse em qualquer lugar em qualquer página Web aberta), e clique em Toolbox Options:

Agora abra o Browser Toolbox em Menu > Web Developer > Browser Toolbox. Uma mensagem de confirmação como esta aparecerá, clique em OK:

Finalmente, a janela do Toolbox Browser deve aparecer, para que podemos usar a fim de analisar a estrutura da interface do Firefox:

Clique na guia no ícone do mouse ao lado da guia Inspector (a primeira guia à esquerda), para inspecionar os elementos pelo mouse:

Depois disso, você pode colocar o ponteiro do mouse em qualquer lugar em sua janela do navegador para aprender o ID de cada elemento. Por exemplo, se você posicionar o mouse na barra de navegação, será possível ver uma linha pontilhada vermelha em torno dela:

Observe o código do id="nav-bar" no seletor CSS, isso significa que você pode usar #nav-bar no seu arquivo userChrome.css para modificar a aparência da barra de navegação. Por exemplo, supondo que eu quero mudar a cor de fundo da barra de navegação para branco completo, o que eu vou adicionar no meu arquivo userChrome.css é o seguinte:

#nav-bar {
  background: #fff !important;
}

Lembre-se sempre de usar o !important em cada regra CSS que for criar, a fim de substituir as regras padrão na skin do Firefox. Caso contrário, você pode ficar louco — como eu fiquei — sem saber por que seu CSS não está sendo aplicado. Também não se esqueça de reiniciar o Firefox após cada modificação.

Resultado depois de reiniciar o Firefox:

3. Comece a Brincar
Agora já sabemos como criar regras de CSS para personalizar qualquer parte do navegador. Pode alterar a skin padrão, ou modificar a estrutura da interface do Firefox a vontade.

Recomendo a instalação da extensão Tab Center Redux que cria uma barra lateral para suas abas abertas. Depois disso, podemos aplicar as seguintes regras CSS no userChrome.css:

#tabbrowser-tabs {
    visibility: collapse !important;
}

#sidebar-box {
    overflow: hidden;
    min-width: 0px;
    max-width: 0px;
    position: fixed;
    border-right: 1px solid #eee;
    transition: all 0.2s ease;
    z-index: 2;
}

#sidebar-box:hover,
#sidebar-box #sidebar {
    min-width: 200px !important;
    max-width: 200px !important;
}

#sidebar-box #sidebar-header, #sidebar-box ~ #sidebar-splitter {
    display: none;
}

#sidebar-box #sidebar {
    height: 100vh; 
}

#urlbar {
    border-radius: 0px !important;
}

Aplicada as regras esse será o resultado aproximado:

Suas guias serão ocultas automaticamente no lado esquerdo:

Se quiser sempre manter a barra lateral visível à esquerda, basta substituir parte do código do #sidebar-box do código com o seguinte trecho de código:

#sidebar-box {
    overflow: hidden;
    min-width: 32px;
    max-width: 32px;
    position: fixed;
    border-right: 1px solid #eee;
    transition: all 0.2s ease;
    z-index: 2;
}

#appcontent {
    margin-left: 32px;
}

E teremos o seguinte resultado:

A seguinte lista de seletores CSS que podem ser usados:

• #appcontent: O Web View do Firefox (a própria página Web).
• #tabbrowser-tabs: A barra de abas no topo do Firefox.
• #urlbar: A barra de URL na barra de navegação
• #identity-box: A pequena área no lado esquerdo da barra de URL que contém os ícones de informações e conexão.
• #sidebar-box: A barra de guias na lateral fornecida pela extensão “Tab Center Redux”.
• #back-button: Botão voltar na barra de navegação.
• #forward-button: O botão Avançar.
• #reload-button #reload-button: O botão recarregar.
• #home-button: O botão página inicial.
• #downloads-button: O botão downloads.
• #PanelUI-menu-button: O botão ≡

Você pode explorar o resto dos seletores disponíveis da maneira que foi explicado na etapa 1. Sinta-se livre para aplicar quaisquer estilos CSS que desejar para aplicar seu estilo ao Firefox.

Conclusão

Embora perdemos alguns temas do Firefox para o Firefox v57, nós ainda podemos personalizar a UI de Firefox a um nível muito bom. No futuro, nós podemos poder instalar os temas prontos que incluem modificações prontas do userChrome.css para personalizar Firefox de muitas maneiras e combinações diferentes.

Caso tenha alguma dica específica ou skin que você criou relacionada com ao post, sinta-se livre para compartilhar nos comentários ou pelo Telegram [@diegoboot].