Firefox menyembunyikan segalanya kecuali area konten browser

Apakah ada kemungkinan untuk menyembunyikan semua batas dan bilah di firefox seperti bilah alamat, bilah navigasi, judul jendela dan tab, sehingga area yang tersisa hanyalah area konten browser?

Saya ingin membuat film dari aplikasi web yang saya tulis, tetapi harus memfilmkannya dalam resolusi yang lebih besar daripada aplikasi itu sendiri. Saya hanya ingin menunjukkan aplikasi di latar belakang tanpa semua hal browser.

Metode terbaik adalah melalui pintasan keyboard, sehingga saya dapat mengaktifkan kembali semua hal.

Cara termudah adalah menginstal pengaya yang relevan di Firefox.

Untuk salah satu dari pengaturan berikut, instal add-on masing-masing. Firefox mungkin perlu direstart, tetapi seringkali tidak perlu untuk Firefox Quantum. Tombol pintas, jika tersedia, dapat diubah dari Pengelola Pengaya> Ekstensi untuk masing-masing pengaya.

Firefox memiliki bagian pintasan keyboard yang didesain ulang untuk mengelola semua pintasan di satu tempat, yang telah tersedia sejak Firefox 66 .

Untuk Firefox Legacy

Setup A menggunakan add-on berikut:

• Sembunyikan Bilah Navigasi, terakhir kali diuji 1.41.1
• Sembunyikan Tabbar, yang terakhir diuji 2.1.0.1 ditandatangani
• HideScrollbars, terakhir diuji 0,2.1 ditandatangani

Sebagai contoh, saya telah menggunakan tombol terpisah F3dan F4untuk berganti menu navigasi dan bilah tab (melalui Sembunyikan Navigasi Bilah dan Sembunyikan Tabbar) masing-masing. Untuk menyembunyikan bilah, tekan tombol yang ditetapkan satu per satu. Ini akan memberikan Firefox dengan bilah judul yang terlihat atau hanya hiasan jendela.

Batasan: Menetapkan kunci yang sama tidak berfungsi dengan baik, karena beberapa penundaan di antaranya. Hasilnya serupa bahkan jika tombol yang terpisah ditekan bersamaan. Either way, salah satu bar tidak akan bersembunyi dan bermain petak umpet dengan pengguna.

Bekerja dengan Firefox 56 dan yang lebih lama ( Sudah usang ), tetapi tidak lagi tersedia dari Pengaya Firefox. Diuji sama sekali dengan Firefox 41.0 di Linux. Tidak ada tangkapan layar.

Untuk Firefox Quantum

Setup B menggunakan add-on berikut:

• Jendela baru tanpa bilah alat oleh tkrkt

Buka halaman web pada HTTP, HTTPS, atau localhost, lalu gunakan pintasan keyboard atau klik ikon yang sesuai pada bilah alat atau "Jendela baru tanpa bilah alat" di menu konteks. Halaman web juga akan terbuka di jendela baru dengan bilah judul yang terlihat dan bilah gulir vertikal saja.

Pintasan keyboard: Shift+ Alt+ N(default pada 1.3.0)

Batasan: Pengaya ini tidak membuka halaman apa pun pada sistem file lokal (file: ///) dan halaman bawaan (tentang: *) sama sekali.

Bekerja dengan Firefox 42 dan yang lebih baru. Diuji 1.3.0 dengan Firefox 69.0 di Linux.

Setup C menggunakan add-on berikut:

• Jendela sembulan oleh Ett Chung

Buka halaman web, lalu klik ikon yang sesuai pada toolbar atau "Pindahkan tab saat ini ke jendela sembulan" atau "sembulan / gabungkan halaman saat ini" di menu konteks. Halaman web akan pindah ke jendela baru dengan bilah judul yang terlihat dan bilah gulir vertikal saja. Untuk mengembalikan jendela baru ke tab normal, klik lagi pada "popup / gabungkan halaman saat ini" di menu konteks.

Pintasan keyboard: Tidak ditentukan (default dalam 0.0.8)

Batasan: Jendela sembulan akan selalu berada di atas jendela asli Firefox, yang tidak dapat diubah.

Bekerja dengan Firefox 53 dan yang lebih baru. Diuji 0,0,8 dengan Firefox 69.0 di Linux.

Untuk Firefox tanpa add-on

Saya telah memposting jawaban terpisah di bawah (klik atau gulir ke bawah) yang berfungsi untuk setiap rilis Firefox, tetapi bukan cara termudah dan tidak memiliki pintasan keyboard.

Cara asli adalah dengan menggunakan stylesheet khusus di Firefox: userChrome.css

Firefox tidak memuat userChrome.css secara default di Firefox 69 dan yang lebih baru. Untuk membuat stylesheet kustom efektif lagi, terbuka about:configdi Firefox dan mengatur preferensi toolkit.legacyUserProfileCustomizations.stylesheetsuntuktrue

Sebelum jawaban ini diperbarui, Mike G menulis jawaban tindak lanjut sebelumnya .

Bagaimana itu bekerja

Blok kode berikut adalah konten userChrome.cssyang akan menyembunyikan bilah tab, bilah navigasi, dan bilah gulir di Firefox. Pastikan untuk menggunakan nama elemen dan ID yang valid .

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/*
 * Hide tab bar, navigation bar and scrollbars
 * !important may be added to force override, but not necessary
 * #content is not necessary to hide scroll bars
 */
#TabsToolbar {visibility: collapse;}
#navigator-toolbox {visibility: collapse;}
browser {margin-right: -14px; margin-bottom: -14px;}

Batasan: Tidak ada pintasan keyboard. Membosankan untuk mengaktifkan atau menonaktifkan sesuai permintaan.

• Untuk mengembalikan antarmuka default, ubah nama userChrome.cssmenjadi nama lain seperti userChrome.tmpdan mulai kembali Firefox untuk mulai berlaku.

• Untuk menggunakan berdampingan dengan instance Firefox lain dengan antarmuka default, gunakan profil terpisah .

Semua profil disimpan di folder profil , yang dapat ditemukan dari Firefox menggunakan bilah menu atau bilah alat, lalu navigasikan ke Bantuan> Informasi Mengatasi Masalah .

Cara mengatur dan menggunakan

Berikut ini adalah langkah-langkah umum terlepas dari platform sistem.

1. Jalankan Profile Manager dari Firefox, lalu buat profil baru bernama 'hidebars' (nama pilihan) dan tutup Profile Manager.

2. Jalankan manajer file dan buka folder profil yang dibuat pada langkah 1.

3. Di bawah folder profil baru, buat file baru chrome/userChrome.css termasuk folder induk chromejika tidak ada.

4. Copy dan paste konten dari userChrome.cssdari atas ke dalam file yang dibuat pada langkah 3.

5. Akhirnya, simpan dan tutup file tersebut.

Untuk mulai menggunakan, jalankan instance Firefox dengan profil baru.

Kombo tangkapan layar berikut menunjukkan Firefox Legacy (kiri) dan Firefox Quantum di Linux, masing-masing meramban dalam ukuran jendela kecil saat lembar gaya khusus digunakan.

Bekerja dengan semua rilis Firefox, kecuali Firefox 69 dan yang lebih baru sekarang mengabaikan userChrome.css secara default. Diuji dengan Firefox 10, 20, 50 (Firefox Legacy) dan 60, 63, 69 (Firefox Quantum) di Linux dan semuanya tampak berfungsi seperti yang diharapkan.

Referensi

• Jawaban oleh pengguna1929 di Forum Dukungan Firefox menyebutkan #TabToolbarnama elemen dan ID untuk memodifikasi bilah tab.

• File khusus ini oleh Timvde di GitHub menyebutkan #navigator-toolboxnama elemen dan ID untuk memodifikasi bilah navigasi.

• Jawaban oleh kor-el di Forum Dukungan Firefox menyebutkan #content browsernama elemen dan ID untuk memodifikasi scrollbar.

• CSS overflow pada w3schools untuk dipahami overflowtidak perlu.

• Properti visibilitas CSS di w3schools untuk memahami nilai visibility.

• Apa implikasi dari penggunaan "! Penting" di CSS? pada Stack Overflow untuk memahami !importanttidak perlu.

• Firefox 60 pecah sembunyikan scrollbar css dan Sembunyikan Scrollbar Firefox 60: FirefoxCSS pada reddit.com keduanya menyarankan untuk menghapus #contentdan meninggalkan hanya browseruntuk menyembunyikan scollbar dengan benar.

• Firefox 69: userChrome.css dan userContent.css dinonaktifkan secara default di ghacks.net dan PSA: Pengguna Firefox v69 harus menetapkan pref untuk mengaktifkan userChrome.css dan userContent.css pada reddit.com, keduanya telah mencatat preferensi baru toolkit.legacyUserProfileCustomizations.stylesheetsdi about:config.

Catatan Penjawab: Jawaban ini ditulis dua tahun kemudian , hanya setelah saya menyarankan untuk menggunakan add-on di jawaban pertama . Sejak itu, beberapa jawaban lagi berdasarkan userChrome.css ditulis alih-alih meningkatkan jawaban ini. Karenanya jawaban ini sekarang adalah wiki komunitas, sehingga siapa pun dengan reputasi minimum dapat memperbaiki pos ini untuk mengikuti perubahan terbaru di Firefox.

Saya tahu ini sangat terlambat, tapi saya membuat bookmarklet untuk ini, tidak memerlukan add-on, dan tidak ada unduhan :)

Simpan kode JavaScript berikut sebagai bookmarklet , dan klik pada halaman yang ingin Anda lihat di jendela minimal baru:

javascript:void%20function(){window.open(window.location.href,Math.random(),%22menubar=1,resizable=0%22)}();

Klik di sini untuk mempermudah proses! | JSfiddle

Catatan: Ini harus bekerja di semua browser

Saya suka Firefox dan Vivaldi. Salah satu fitur terbaik dari Vivaldi (saya menjadi pengguna gerakan mouse) adalah ia memiliki begitu banyak pilihan (sidebar, bookmark, addressbar, status bar dll) yang dapat disesuaikan dan dipindahkan ...

Satu pintasan mengatakan 'Sembunyikan UI'. Semuanya menghilang ... jadi ketika Anda tidak perlu melihat tab / addy bar dll maka saya hanya melakukan coretan mouse dan saya ditinggalkan dengan halaman dan jendela.

Sihir.

Bahkan lebih baik, warna jendela mengambil petunjuk dari halaman web dan bekerja dengan sangat baik - menyatu dengan baik.

Saya tahu ini sudah terlambat, tapi mungkin seseorang akan suka.

Jika Anda hanya ingin menyembunyikan elemen Firefox UI sampai mereka diperlukan maka mungkin saya userChrome.cssadalah untuk Anda. (bekerja pada FF 70.0.1)

• Tab-bar disembunyikan jika hanya satu tab
• Bilah alamat disembunyikan sampai terfokus dengan Ctrl-L, F6, dan sejenisnya
• Bilah gulir di sebelah kanan dihapus

Untuk menyembunyikan bilah-bilah, Anda harus menggunakan Firefox customize(klik kanan pada bilah-tab) untuk menariknya newtab (+) buttondari bilah-bilah, dan pastikan Anda menggunakan bilah sistem Titlebar(sehingga jendela minimal, maks. , dan tombol tutup tidak ada di bilah-tab). Jika tidak, tombol-tombol itu akan menghalangi persembunyian.

Petunjuk tentang tempat menyimpan userChrome.cssfile dan cara mengaktifkannya dapat ditemukan di pos yang luar biasa ini: /superuser//a/1269912/1107142

Ringkasan cepat saya:

• di about:confighalaman beralih toolkit.legacyUserProfileCustomizations.stylesheetsketrue
• dapatkan Profile Directorydari about:supporthalaman
• buat direktori yang disebut chromediProfile Directory
• letakkan userChrome.cssfile di chromedirektori itu

UserChrome.css saya, salin dan tempel sesuka hati:

/* namespace required, do not remove */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* hide tabbar if only one tab */
/* note: won't hide unless newtab (+) button is removed from tabbar and */
/* the system title bars are used (use window manager to disable window */
/* titlebar decorations if desired). */
/* use 'customize' from menu and just drag the (+) button off the tabbar */
/* on the bottom options bar make sure titlebar is on */     
/* setting density to compact is also nice */
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    min-height: 0 !important;
}
#tabbrowser-tabs tab {
    min-height: var(--tab-min-height)
}
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
    visibility: collapse;
}

/* autohide addressbar */
/* will show address bar when focused with alt-d,ctrl-l,ctrl-k, or f6 */
/* I don't like the mouse hover activation, but follow comments below */
/* if that's something you'd like. */
/* Also,can change nav-bar to navigation-toolbox to autohide all toolbars */
#nav-bar {
    height: 0px !important;
    min-height: 0px !important;
    overflow: hidden !important;
    /* for mouse hover activation would need some height */
    /* disable above height: 0px line and add: */
    /* height: 3px !important; */
}
/* for mouse hover activation need to add: */
/* #nav-bar:hover, */
#nav-bar:focus,
#nav-bar:focus-within,
#nav-bar:active {
    height: auto !important;
}

/* remove right hand scrollbar */
browser {
    margin-right: -15px;
}

Pilihan terbaik yang saya tahu adalah mode layar penuh, yang diaktifkan menggunakan F11semua browser modern. Itu akan menyembunyikan latar belakang desktop Anda dan aplikasi lain, yang mungkin bukan yang Anda inginkan. Ini hanya akan mengisi ruang di sekitar konten aplikasi web dengan putih (atau apa pun warna latar belakang / gambar dalam stylesheet aplikasi web).

Anda dapat menjalankan jendela aplikasi dari baris perintah

"c: \ Program Files \ Mozilla Firefox" \ firefox.exe -chrome " http://www.example.com "

dan letakkan di desktop yang diperluas dengan latar belakang pilihan Anda.

Pertanyaan tentang cara melakukan ini di Firefox Quantum ( > = 57 ) mungkin menjawab pertanyaan ini ( Firefox Quantum (> = 57) Bagaimana cara mengganti semua toolbar? (Dengan pintasan keyboard, seperti F11 tetapi di jendela, bukan di layar penuh) )

F11 / Layar Penuh terkadang tidak praktis.
Jika Anda hanya ingin mengaktifkan bilah alat di versi Firefox sebelum 57 , dimungkinkan dengan addon "Dorando keyconfig":

1. tentukan skrip di Dorando "Editor Kunci":

var s = document.getElementById('status-bar');
s.hidden = !s.hidden;
var b = document.getElementById('PersonalToolbar');
b.collapsed = !b.collapsed;
var nb = document.getElementById('nav-bar');
nb.collapsed =!nb.collapsed
var tb = document.getElementById('TabsToolbar');
tb.collapsed =!tb.collapsed

2. memetakannya ke pintasan keyboard melalui addon-interface Dorando

Anda harus mencoba param perintah --kioskbaru dari Firefox v.71 baru

https://www.mozilla.org/en-US/firefox/71.0a1/releasenotes/

Perhatikan bahwa jawaban dari clearkimura di atas, yang menunjukkan penggunaan stylesheet, perlu sedikit penyesuaian dalam versi Firefox yang lebih baru. Solusinya bekerja untuk saya setelah saya melakukan ini. Dari halaman web ini :

Setel Firefox untuk mencari userChrome.css saat startup (diperbarui 5/24/2019)

Untuk membuat startup lebih cepat bagi sebagian besar pengguna, Firefox 69 tidak akan lagi mencari file ini secara otomatis. Anda harus menyuruhnya melihatnya. Begini caranya:

1. Di tab baru, ketik atau rekatkan tentang: konfigurasi di bilah alamat dan tekan Enter / Kembali. Klik tombol untuk menerima risiko.
2. Di kotak pencarian di atas daftar, ketik atau tempel profil pengguna dan jeda saat daftar difilter. Jika Anda tidak melihat apa pun dalam daftar, abaikan petunjuk ini yang lainnya. Anda dapat menutup tab ini sekarang.
3. Klik dua kali preferensi toolkit.legacyUserProfileCustomizations.stylesheets untuk mengubah nilai dari false ke true.

Perubahan itu akan berlaku pada startup Anda berikutnya.