RSS

Personalizando o Firefox com o User-chrome

domingo, 29 de junho de 2008

O Firefox possui um arquivo especial de configuração chamado userChrome.css que permite alterar vários aspectos da interface de usuário e para isso basta apenas ter algum conhecimento da linguagem CSS.

O arquivo userChrome fica localizado na pasta do perfil do usuário em uma pasta chamada chrome, nesta pasta existem dois arquivos chamados: userChrome-example.css e userContent-example.css, como o nosso foco é o userChrome eu não entrarei em detalhes sobre o userContent, apenas adianto que ele pode ser utilizado pelo usuário para aplicar estilos personalizados à páginas exibidas pelo navegador.

Para o nosso tutorial abra o userChrome-example com um editor de textos qualquer e salve uma cópia com o nome de userChrome.css, o exemplo já vem com algumas modificações comentadas e é por elas que nós começaremos a modificar o navegador.

Uma bem interessante é a que permite remover a animação que representa o loading dá página, chamada throbber, apesar de não ser um empecilho o espaço ocupado pela mesma será utilizado em futuras modificações. Para remover a tal animação utilize a seguinte regra aplicada ao seletor #throbber-box:

#throbber-box {
display: none !important;
}

Para quem conhece CSS a regra acima é de muito fácil entendimento, ela diz que o elemento com o atributo ID igual a throbber-box terá a propriedade display modificada para none, ou seja, o elemento não será exibido. A propriedade !important indica que esse estilo deve ter uma importância maior do que o estilo padrão do navegador.

Após as alterações reinicie o navegador e veja se a animação continua aparecendo na barra de menus.

Aumentando a área de visualização do seu navegador

Em determinadas resoluções de tela o espaço de visualização, ou viewport area, se torna muito importante, o userChrome permite maximizar esse espaço através da eliminação de barras e opções pouco utilizadas.



A imagem acima mostra o firefox com a barra endereços ao lado da barra de menu e apenas os botões de voltar e atualizar sendo exibidos. Com essa configuração a área de visualização de páginas teve um aumento substancial e me permite navegar em algumas páginas sem ter de apelar para o fullscreen a toda hora.

Abaixo estão as propriedades utilizadas para obter esse resultado no navegador:

A primeira parte exige que você clique em uma área vazia da barra de navegação e selecione a opção personalizar, no modo de personalização é possível redimensionar e arrastar os componentes para outra barra ou retira-los. A primeira coisa a se fazer é arrastar a barra de endereços para o lado da barra de menus. Em seguida retire da barra a caixa de busca e arraste os botões da barra de navegação para o lado da barra de endereços. Após isso vá até o menu exibir e selecione a opção barra de ferramentas, lá desmarque a caixa correspondente a barra de navegação. Pronto o seu espaço já aumentou consideravelmente, mas, para a personalização ficar completa é necessário alterar algumas coisas no userChrome.

Abra o arquivo novamente e adicione as seguintes linhas ao final do mesmo:

/* Essa alteração esconde os menus ajuda e editar da barra de menus */
#helpMenu, #edit-menu {
display: none !important;
}

/* Esconde o botão voltar se não houver uma página anterior no histórico de navegação, caso o botão seja necessário ele volta a aparecer na barra */
#back-button[disabled="true"] {
display: none;
}

/* Esconde o botão avançar se não houver uma próxima página no histórico, caso o botão seja necessário ele volta a aparecer na barra */
#forward-button[disabled="true"] {
display: none;
}

/* Esconde o botão parar caso a página não esteja sendo carregada, quando necessário ele se torna visível novamente */
#stop-button[disabled="true"] {
display: none;
}

/* Esconde o botão home */
#home-button {
display: none;
}

Após isso o reinicie o firefox e ao voltar ele estará como o da imagem de exemplo. Para voltar ao normal, apague ou renomeie o userChrome e abra o dialogo de personalização das barras de ferramentas novamente, lá selecione a opção restaurar as barras ao estado original, pronto seu firefox estará como saiu de fábrica.

O userChrome permite ao usuário alterar de varias maneiras o firefox e torna-lo único ao gosto do usuário.

Fonte: LifeHacker

7 comentários:

THLopes disse...

Ficou muito legal e fácil esse tutorial! Com certeza, bem mais fácil de entender do que o do site LifeHacker. Valeu!

Mario Rinaldi disse...

uma dica é a extensão dom inspector, que atualmente não vem mais instalada com o firefox. com ela você consegue pegar os ids de toda a interface do firefox. é bem simples de mexer e muito interessante!!!

Carlos Tosta disse...

Legal essa do Dom Inspector ler a árvore do próprio Firefox é nova pra mim, vou testar aqui. Vlw!!!

Rinaldi disse...

então, no menu "file" tem o submenu "inspect chrome document", lá você escolhe a primeira opção, normalmente o nome da página seguido de " - Mozilla Firefox". e você usa o iconezinho de setinha pra apontar na interface do firefox. ou o binoculo para procurar!!! enfim, aí é só correr para o abraço ;)

Whesley disse...

Não seria muito mais fácil simplesmente clicar em qualquer canto perto das barras do Firefox selecinar personalizar e então arrastar itens como as barras e os ícones para onde você quiser ? Inclusive para remover ítens como o ícone de loading basta arrastar ele para aquela janela de ícones que abre quando você clica em persolizar.

Whesley disse...

Correções do comentário acima: Clicar com o botão direito do mouse e não só o ícone de loading pode ser removido mas outros itens também.

Carlos Tosta disse...

Olá Whesley, realmente você pode simplesmente arrastar os botões que não deseja para a janela de personalizar, mas a diferença entre esse método e o meu é que fazendo pelo userChrome a visibilidade dos botões se torna dinâmica, ou seja eles só aparecem quando são necessários, isso é feito através do atributo [disabled="true"], assim é possível tornar a utilização da barra de ferramentas mais inteligente e aproveitar melhor o espaço de visualização de páginas. Em contrapartida se o que você deseja é apenas remover a alguns elementos da barra de ferramentas realmente a janela de personalizar é mais rápida e não exige conhecimentos em CSS.