Migliorare la grafica dei controlli form di Firefox

Questa è una piccola modifica a Firefox che ho sempre pensato di mettere in pratica, ma non ho mai ritenuto così importante, anche sperando che prima o poi venga risolta “upstream”. Ecco di cosa parlo:

ff_senza.png

Prima, ma chi ha disegnato questi controlli?…

ff_con.png
…e dopo! (crediti per le foto in calce)

Le informazioni per fare questa modifica sono disponibili in rete da tanto tempo, ma per qualche strano motivo non è facile trovarle con google, per cui ho pensato di usare pollycoke :) e qualche keyword ad hoc per dare un po’ di visibilità alla cosa.

Questa modifica, come avrete capito, migliora l’aspetto grafico di check box, radio buttons, pulsanti e in genere i controlli dei form delle pagine html visualizzate con Firefox. Non modificheremo alcuna delle funzionalità del browser.

I comandi da dare da terminale sono questi:

$: wget http://users.tkk.fi/~otsaloma/art/firefox-form-widgets.tar.gz
$: tar -xvzf firefox-form-widgets.tar.gz
$: sudo cp /usr/lib/mozilla-firefox/res/forms.css /usr/lib/mozilla-firefox/res/forms.css.bak
$: cat firefox-form-widgets/res/forms-extra.css | sudo tee --append /usr/lib/mozilla-firefox/res/forms.css > /dev/null
$: sudo cp -r firefox-form-widgets/res/form-widgets /usr/lib/mozilla-firefox/res
$: rm -rf firefox-form-widgets*

Beh, tutto molto bello, ma sappiate che in realtà stiamo sostituendo una implementazione sbagliata originale con un’altra implementazione sbagliata non originale :(

Il problema è che il team di Firefox non usa i controlli standard GTK per disegnare questi campi, preferendo – come fatto notare altrove – mescolare toolkit in nome della compatibilità multipiattaforma. Non so se con le nuove versioni alpha di Firefox, e con il supporto a cairo, si sia finalmente sistemato questo anacronismo, spero proprio di sì ma non ho voglia di provare una versione alpha di FF al giorno :>

NB: In ogni caso, i comandi sono stati segnalati da “trend65” sul forum di ubuntu-it e successivamente ripresi e pubblicizzati dal buon Aldolat (che ha appena traslocato su un dominio tutto suo, complimenti!), che è anche l’autore delle immagini mostrate in apertura.

70 pensieri su “Migliorare la grafica dei controlli form di Firefox

  1. io le ho installate, ma sputtanano tutto.
    provate a trovare un sito che usa un background su un pulsante di submit ad esempio… vedrete che cagata ne esce fuori.

    purtroppo uso firefox per lavoro, e per testare il design dei siti non posso permettermi di avere orpelli del genere. devo tenermi lo schifo originale :(

  2. @hronir
    posso consigliarti di usare QtCurve (se non lo conosci già), così puoi avere i programmi in GTK e in QT praticamente identici (ed è anche un buonissimo style per kde)

  3. Siccome non mi piace andare a scrivere file del sistema (che al primo upgrade se ne vanno a farsi benedire) consiglio di copiare la cartella form-widgets nella cartella ~/.mozilla/firefox/cartella_profilo.default/chrome e di aggiungere il contenuto del file forms-extra.css al file ~/.mozilla/firefox/cartella_profilo.default/chrome/UserContent.css

    Così le impostazioni sono solo per il vostro utente e sopravviveranno ai futuri aggiornamenti.

  4. Veramente carino tutto ciò, il look di molte pagine è magicamente cambiato in meglio. Devo però far notare che se un sito applica particolari stili CSS alle proprie form, essi vanno bellamente a farsi benedire (poichè il CSS di default del browser ha priorità su tutto).
    Quindi, per come la vedo io… davvero niente male, ma forse è meglio tornare alle impostazioni originarie… :-D

  5. felipe sei diventato ufficialmente il mio idolo, erano mesi che bestemmiavo sui form guardando quanto erano brutti :D

  6. @hronir e altri utenti KDE
    Uso KDE e ho installato gtk-qt-engine. I controlli dentro firefox non saranno disegnati con le Qt, ma sicuramente meglio della schifezza simil-qindows di prima..

  7. Io lo uso da un po’, però credo che sia meglio che ci mettano una pezza ufficiale. Come al solito firefox su linux è parecchio bistrattato, eppure siamo stati i primi ad usare firebird prima e firefox poi.

  8. piuttosto che queste inutili migliorie grafiche dovrebbe correggere la miriede di bug che sta uscendo fuori in firefox, alcuni degni solo di ie (vedi controlli sbagliati su autocompletamento password……)

    Ciao

  9. @tutti:
    Grazie, effettivamente avevo ragione di pensare che questa chicca non era abbastanza visibile… aspettando che l’integrazione di FF con GNOME/GTK venga migliorata

    @mani:
    Certo :)

  10. E’ molto meglio in molti casi, tuttavia alcune volte questo trucchetto scombina non poco i layout delle pagine (i controlli sono più spaziosi degli originali).

  11. ma vi sembra normale: firefox con due finestre, ammetto aperte da circa 4 ore e sono stati aperti 4 tab su una finestra per 3 ore circa, ma ora mangia tra i 58 e 78 mb.
    Mah non lo capisco più tanto firefox solo per aprirlo 20 mb mi sembrano un po’ troppi.
    Batta

  12. GRANDE, ma perchè stì tecnici danno così poca importanza a questi particolari importanti? mah….. GRAZIE POLLYC

  13. Scusate, ma dopo questa modifica a me tutti gli “option” ed i “check” non si vedono piu’. (Tipo Il web / pagine italiane)
    Come posso tornare indietro ?
    Grazie, kar

  14. Semplice nota di stile, questo comando sarebbe più semplice in un’altra maniera:
    cat firefox-form-widgets/res/forms-extra.css | sudo tee –append /usr/lib/mozilla-firefox/res/forms.css > /dev/null

    sudo cat firefox-form-widgets/res/forms-extra.css >> /usr/lib/mozilla-firefox/res/forms.css

    Per il resto, grazie per la segnalazione e anch’io spero che firefox venga meglio integrato con l’ambiente linux.

  15. domanda da niubbo (ma non tanto): ho notato che modificando il css migliorano decisamente le form, ma le combobox restano sempre grigie. Ho creato una pagina (per lavoro) che imposta il bgcolor delle combo a giallo (per favore, non commentate il colore… ;) )
    Qualcuno sa darmi qualche consiglio per continuare a gestire il colore delle combo?
    Denghiu! ;)

  16. Ok, ce l’ho fatta da solo…
    ecco come: alla riga 549 del file forms.css ho eliminato la voce “select”;
    sotto, sempre nello stesso file, ho commentato le righe 627 e 628.

    Grazie comunque! ;)

  17. Segnalo che funziona anche su Iceweasel, ovviamente cambiando /usr/lib/mozilla-firefox/res/forms.css con /usr/lib/iceweasel/res/forms.css

    ;)

  18. Sto usando debian etch dopo qualche accorgimento ho cambiato la grafica di icewesel

    $: wget http://users.tkk.fi/~otsaloma/art/firefox-form-widgets.tar.gz
    $: tar -xvzf firefox-form-widgets.tar.gz
    $: sudo cp /usr/lib/iceweasel/res/forms.css /usr/lib/iceweasel/res/forms.css.bak
    $: cat firefox-form-widgets/res/forms-extra.css | sudo tee –append /usr/lib/iceweasel/res/forms.css > /dev/null
    $: sudo cp -r firefox-form-widgets/res/form-widgets /usr/lib/iceweasel/res
    $: rm -rf firefox-form-widgets*

    ma mentre su ubuntu epiphany si aggiornava automaticamente alla nuova grafica qui no

    help!

  19. volevo migliorare l’aspetto del mio FireFox su Kubuntu 7.04.
    nel forum internazionale di ubuntu ho trovato:
    http://ubuntuforums.org/showpost.php?p=2206886&postcount=1
    . siccome sono ancora agli inizi dopo aver scaricato il file: firefox_widgets_2.4.tar.bz2 sul desktop non so più come proseguire. Ho letto il README ma non ho capito granchè , ho provato entrando nella cartella e digitando ./install -i da shell ma non è successo nulla!
    potreste aiutarmi?
    grazie

  20. Come già detto da altri questa modifica crea alcuni problemi.
    Rende inutile la gestione delle regole css per tutti gli elementi dei form.

    Chiunque abbia un minimo di esperienza nell’utilizzo dei css saprà sicuramente che la compatibilità tra browser (in particolare IE) è una rogna. Questa modifica dimezza il vantaggio che Firefox ha (in ambito di rispetto degli standard W3C) rispetto ad IE.

    Evitatela, pleaze…

  21. nel caso vogliate ottenere lo stesso effetto in seguito ad upgrade a Gutsy (tribe 5 al momento):

    wget http://users.tkk.fi/~otsaloma/art/firefox-form-widgets.tar.gz
    tar -xvzf firefox-form-widgets.tar.gz
    sudo cp /usr/share/firefox/res/forms.css /usr/share/firefox/res/forms.css.bak
    cat firefox-form-widgets/res/forms-extra.css | sudo tee –append /usr/share/firefox/res/forms.css > /dev/null
    sudo cp -r firefox-form-widgets/res/form-widgets /usr/share/firefox/res/
    rm -rf firefox-form-widgets*

    Sara’ cambiata la directory in cui vengono installati i file di supporto per firefox.

  22. ciao felipe non sapendo come mandarti una mail mi sembra meglio scrivere qua

    utilizzando lo stesso file da scaricare ecco le modifiche per GUSTY GIBBON

    cd ~/Desktop

    tar -xvzf firefox-form-widgets-mod.tar.gz

    sudo cp /usr/share/firefox/res/forms.css /usr/share/firefox/res/forms.css.backup

    cat firefox-form-widgets/res/forms-extra.css | sudo tee –append /usr/share/firefox/res/forms.css > /dev/null

    sudo cp -r firefox-form-widgets/res/form-widgets /usr/share/firefox/res

    rm -rf firefox-form-widgets*

  23. felipe aspetto di sapere come inviare a te queste cose

    ciao cumpari catanisi!

    ho notato che su alcuni pc quella soluzione non risulta ottimale con controlli troppo grandi quindi

    scaricate widget 2.7 http://informatix.netsons.org/downloads/firefox_widgets_2.7.tar.bz2

    scompattatelo entate dentro la cartella e con un doppio clic su graphic_installer scegliere esegui

    apparirà una gui in cui dovrete selezionare solo dove nel pc risiede la cartella firefox

    che in gusty è in usr/share/firefox

    riavviare firefox e il tutto si risolve

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...