Sudah cukup lama saya menggunakan Firefox sebagai browser andalan, entah itu buat menulis artikel di WinPoin, browsing ringan, melakukan pekerjaan lain via Google Docs atau Sharepoint, atau melakukan hal lainnya.
Kenapa Firefox? karena selain performanya cukup ringan jika dibandingkan dengan Chrome, adanya opsi vertical tabs, Firefox juga bisa kita modifikasi agar menyesuaikan dengan tampilan yang kita inginkan.
Nah ngomong ngomong mengenai Firefox nih, kita sebenarnya bisa melakukan modifikasi pada beberapa bagian Firefox dengan menambahkan userChrome.css agar tampilannya atau bahkan fiturnya kita ubah loh.
Cara Menambahkan userChrome.css
Secara default, folder untuk userChrome.css memang tidak aktif di Firefox. Jadi sebelum bisa memodifikasi tampilan browser, kita perlu mengaktifkannya terlebih dahulu. Jika kamu penasaran, berikut WinPoin rangkum langkah singkatnya :
Langkah 1. Pertama buka Profile Firefox kamu, caranya cukup masukan / ketik saja about:profiles di address bar, kemudian klik Open Folder.
Pastikan pilih Root Directory kemudian klik Open Directory, nama di Linux dan Windows mungkin berbeda, silahkan kamu sesuaikan saja.
Langkah 2. Setelah itu, didalam folder profile kamu, silahkan buat folder baru bernama chrome.
Langkah 3. Didalam folder chrome, silahkan kamu buat file baru bernama userChrome.css
Modifikasi yang saya lakukan
Nah didalam file userChrome.css ini kita bisa menambahkan komponen CSS yang memungkinkan kita mengubah tampilan dari berbagai bagian browser, misalkan tab, lalu toolbar atau yang lainnya.
Darken Inactive / Unload Tabs
Untuk saat ini ada beberapa perubahan tampilan yang saya lakukan, yang pertama adalah mengubah tampilan unload tabs agar menjadi gelap.
Contohnya seperti pada gambar diatas, dimana jika tab di unload, tampilannya akan berubah menjadi gelap dan ini jelas akan bermanfaat untuk membedakan tab mana sih yang berjalan atau tidak. Nah ini juga akan bermanfaat banget jika konfigurasi browser.tabs.unloadOnLowMemory diaktifkan karena akan mudah bagi kita melihat tab mana yang di load atau unload.
Untuk mengaktifkan ini, di userChrome.css kita hanya perlu menambahkan kode berikut saja.
/* Darken discarded/inactive tabs */
.tabbrowser-tab[pending] .tab-background,
.tabbrowser-tab[unloaded] .tab-background {
filter: brightness(0.5);
opacity: 0.6 !important;
}
Toolbar Semi Hide
Yang kedua adalah saya membuat bagian toolbar Firefox agak semi hide dimana jika tidak ada mouse yang di hover ke area toolbar, tampilannya akan lebih gelap seolah tidak aktif.
Ini sih sebenarnya hanya untuk estetika saja, tapi saya suka, untuk kode nya kamu cukup tambahkan kode ini saja.
/* Toolbar semi hide */
#nav-bar {
backdrop-filter: blur(10px);
background-color: rgba(20,20,20,var(--toolbar-fade)) !important;
transition: opacity .25s ease-in-out;
opacity: .7;
}
#navigator-toolbox:hover #nav-bar,
#urlbar[focused=true] #nav-bar {
opacity: 1 !important;
}
Hapus Tombol X di Tab
Nah ini yang saya suka, karena vertical tab tampilannya terlalu kecil, kadang tombol x atau close suka tidak sengaja terklik, oleh karena itu saya menghilangkan bagian tersebut.
Untuk menutup tab kita bisa mengandalkan keyboard shortcut CTRL + W atau klik kanan > Close tab saja. Dan untuk mengubah bagian ini, cukup tambahkan kode berikut saja.
/* Remove close (X) button */
.tabbrowser-tab .tab-close-button {
display: none !important;
}
Sembunyikan Tombol Add new tab kecuali di Hover
Ketika mouse tidak berada di area tab, tombol Add new tab saya sembunyikan untuk menambah estetika saja.
Untuk menadapatkan perubahan ini, cukup tambahkan kode berikut saja.
/* Hide new tab button until hover */
#tabs-newtab-button {
opacity: 0 !important;
pointer-events: none !important;
transition: opacity .2s ease-in-out;
}
#tabbrowser-tabs:hover #tabs-newtab-button {
opacity: 1 !important;
pointer-events: auto !important;
}
#tabs-newtab-button {
width: 28px !important; /* tahan space biar ga lompat layout */
}
Ubah Tampilan Tab Highlight
Secara default ketika kita sedang aktif di suatu tab, tampilannya seperti pada gambar berikut.
Tapi kayaknya menurut saya ini kurang simpel deh, jadi agar membuatnya makin cantik dan sederhana, cukup tambahkan kode berikut saja.
/* Active tab indicator - ultra minimal */
.tabbrowser-tab[selected="true"] {
position: relative !important;
}
.tabbrowser-tab[selected="true"]::before {
content: "";
position: absolute;
left: 0;
top: 25%;
height: 50%;
width: 1px;
background: var(--tab-active-border, currentColor);
border-radius: 1px;
}
/* Remove any default highlight/hover/selected background */
.tabbrowser-tab:not([selected="true"]) .tab-background,
.tabbrowser-tab[selected="true"] .tab-background {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
Kode ini akan membuat tampilan highlight menjadi hanya strip atau garis saja, jadi tampilannya benar benar ultra minimal. Berikut contohnya.
Nah tampilan ini saya sesuaikan dengan tampilan vertical tab, jika kamu mengikuti langkah diatas, mungkin butuh penyesuaian lebih lanjut.
Untuk sekarang, mungkin hanya itu saja sih perubahan tampilan yang saya terapkan. Dan sebenarnya untuk mendapatkan pengalaman yang lebih baik, modifikasi tampilan yang lebih modular, Zen Browser bisa menjadi salah satu browser andalan juga loh, selain berbasiskan dari Firefox, dia juga ada opsi Zen Mods yang cukup download dan install mod saja.
Jika kamu sudah melakuan modifikasi userChrome.css coba share dong modifikasi kamu, kali aja saya bisa ikutin.
