Bikin Firefox Lebih Minimalis: Kustomisasi Userchrome.css Untuk Vertical Tabs

Sudah cukup lama saya menggunakan Firefox sebagai browser andalan, entah itu buat menulis tulisan di WinPoin, browsing ringan, melakukan pekerjaan lain via Google Docs alias Sharepoint, alias melakukan perihal lainnya.

Kenapa Firefox? lantaran selain performanya cukup ringan jika dibandingkan dengan Chrome, adanya opsi vertical tabs, Firefox juga bisa kita modifikasi agar menyesuaikan dengan tampilan nan kita inginkan.

Nah ngomong ngomong mengenai Firefox nih, kita sebenarnya bisa melakukan modifikasi pada beberapa bagian Firefox dengan menambahkan userChrome.css agar tampilannya alias apalagi fiturnya kita ubah loh.

Cara Menambahkan userChrome.css

Secara default, berkas untuk userChrome.css memang tidak aktif di Firefox. Jadi sebelum bisa memodifikasi tampilan browser, kita perlu mengaktifkannya terlebih dahulu. Jika Anda 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 Anda sesuaikan saja.

Langkah 2. Setelah itu, didalam berkas profile kamu, silahkan buat berkas baru berjulukan chrome.

Langkah 3. Didalam berkas chrome, silahkan Anda buat file baru berjulukan userChrome.css

Modifikasi nan saya lakukan

Nah didalam file userChrome.css ini kita bisa menambahkan komponen CSS nan memungkinkan kita mengubah tampilan dari beragam bagian browser, misalkan tab, lampau toolbar alias nan lainnya.

Darken Inactive / Unload Tabs

Untuk saat ini ada beberapa perubahan tampilan nan saya lakukan, nan pertama adalah mengubah tampilan unload tabs agar menjadi gelap.

Contohnya seperti pada gambar diatas, dimana jika tab di unload, tampilannya bakal berubah menjadi gelap dan ini jelas bakal berfaedah untuk membedakan tab mana sih nan melangkah alias tidak. Nah ini juga bakal berfaedah banget jika konfigurasi browser.tabs.unloadOnLowMemory diaktifkan lantaran bakal mudah bagi kita memandang tab mana nan di load alias 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 membikin bagian toolbar Firefox agak semi hide dimana jika tidak ada mouse nan di hover ke area toolbar, tampilannya bakal lebih gelap seolah tidak aktif.

Ini sih sebenarnya hanya untuk estetika saja, tapi saya suka, untuk kode nya Anda 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 nan saya suka, lantaran vertical tab tampilannya terlalu kecil, kadang tombol x alias close suka tidak sengaja terklik, oleh lantaran itu saya menghilangkan bagian tersebut.

Untuk menutup tab kita bisa mengandalkan keyboard shortcut CTRL + W alias 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 selain 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 loncat 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 elok 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 bakal membikin tampilan highlight menjadi hanya strip alias garis saja, jadi tampilannya betul benar ultra minimal. Berikut contohnya.

Nah tampilan ini saya sesuaikan dengan tampilan vertical tab, jika Anda mengikuti langkah diatas, mungkin butuh penyesuaian lebih lanjut.

Untuk sekarang, mungkin hanya itu saja sih perubahan tampilan nan saya terapkan. Dan sebenarnya untuk mendapatkan pengalaman nan lebih baik, modifikasi tampilan nan lebih modular, Zen Browser bisa menjadi salah satu browser jagoan juga loh, selain berbasiskan dari Firefox, dia juga ada opsi Zen Mods nan cukup download dan install mod saja.

Jika Anda sudah melakuan modifikasi userChrome.css coba share dong modifikasi kamu, kali aja saya bisa ikutin.