Firefox ซ่อนทุกอย่างยกเว้นพื้นที่เนื้อหาของเบราว์เซอร์

มีความเป็นไปได้ที่จะซ่อนเส้นขอบและแถบทั้งหมดใน Firefox เช่นแถบที่อยู่แถบนำทางชื่อหน้าต่างและแท็บดังนั้นพื้นที่ที่เหลืออยู่เป็นเพียงพื้นที่เนื้อหาของเบราว์เซอร์หรือไม่

ฉันต้องการสร้างภาพยนตร์ของเว็บแอปพลิเคชันที่ฉันเขียน แต่ต้องถ่ายทำด้วยความละเอียดมากกว่าแอป ฉันต้องการแสดงแอปบนพื้นหลังโดยไม่ต้องใช้เบราว์เซอร์ทั้งหมด

วิธีที่ดีที่สุดคือการใช้แป้นพิมพ์ลัดเพื่อให้ฉันสามารถเปิดใช้งานทุกสิ่งได้อีกครั้ง

วิธีที่ง่ายที่สุดคือการติดตั้งส่วนเสริมที่เกี่ยวข้องใน Firefox

สำหรับการตั้งค่าใด ๆ ต่อไปนี้ให้ติดตั้งส่วนเสริมที่เกี่ยวข้อง Firefox อาจต้องเริ่มต้นใหม่ แต่มักจะไม่จำเป็นสำหรับ Firefox Quantum ปุ่มทางลัด (ถ้ามี) สามารถเปลี่ยนได้จากAdd-ons Manager> ส่วนขยายสำหรับเสริมที่เกี่ยวข้อง

Firefox มีส่วนแป้นพิมพ์ลัดที่ออกแบบใหม่เพื่อจัดการทางลัดทั้งหมดในที่เดียวซึ่งเปิดให้ใช้งานแล้วตั้งแต่Firefox 6666

สำหรับ Firefox Legacy

การตั้งค่า Aใช้โปรแกรมเสริมต่อไปนี้:

• ซ่อนแถบนำทางการทดสอบล่าสุดที่ลงชื่อ 1.41.1
• ซ่อน Tabbar ทดสอบล่าสุดที่ลงชื่อ 2.1.0.1
• HideScrollbars ที่ผ่านการทดสอบ 0.2.1 ครั้งล่าสุด

ตัวอย่างเช่นฉันใช้ปุ่มแยกF3และF4เพื่อสลับเมนูนำทางและแถบแท็บ (ผ่านซ่อนแถบนำทางและซ่อนแถบ) ตามลำดับ ในการซ่อนแถบกดปุ่มที่กำหนดไว้ทีละตัว สิ่งนี้จะให้ Firefox กับแถบชื่อเรื่องที่มองเห็นได้หรือการตกแต่งหน้าต่างเท่านั้น

ข้อ จำกัด : การกำหนดคีย์เดียวกันทำงานได้ไม่ดีนักเนื่องจากมีความล่าช้าในระหว่างนี้ ผลลัพธ์จะคล้ายกันแม้ว่าจะกดคีย์แยกกันในเวลาเดียวกัน ไม่ว่าจะด้วยวิธีใดแถบใดแถบหนึ่งจะไม่ซ่อนและเล่นซ่อนหากับผู้ใช้

ใช้ได้กับ Firefox 56 และรุ่นก่อนหน้า ( เลิกใช้แล้ว ) แต่ไม่สามารถใช้งานได้จาก Firefox Add-ons อีกต่อไป ทดสอบพร้อมกับ Firefox 41.0 บน Linux ไม่มีภาพหน้าจอ

สำหรับ Firefox Quantum

โปรแกรมติดตั้ง Bใช้โปรแกรมเสริมต่อไปนี้:

• หน้าต่างใหม่ที่ไม่มีแถบเครื่องมือโดย tkrkt

ไปที่เว็บเพจบน HTTP, HTTPS หรือ localhost จากนั้นใช้แป้นพิมพ์ลัดหรือคลิกไอคอนที่เกี่ยวข้องบนแถบเครื่องมือหรือ "หน้าต่างใหม่ที่ไม่มีแถบเครื่องมือ" ในเมนูบริบท หน้าเว็บจะเปิดขึ้นในหน้าต่างใหม่พร้อมแถบชื่อเรื่องที่มองเห็นและแถบเลื่อนแนวตั้งเท่านั้น

แป้นพิมพ์ลัด: Shift+ Alt+ N(ค่าเริ่มต้นใน 1.3.0)

ข้อ จำกัด : Add-on นี้ไม่เปิดหน้าใด ๆ ในระบบไฟล์ในท้องถิ่น (ไฟล์: ///) และหน้าในตัว (ประมาณ: *) เลย

ใช้งานได้กับ Firefox 42 และใหม่กว่า ทดสอบ 1.3.0 พร้อม Firefox 69.0 บน Linux

โปรแกรมติดตั้ง Cใช้โปรแกรมเสริมต่อไปนี้:

• หน้าต่างป๊อปอัปโดย Ett Chung

ไปที่หน้าเว็บจากนั้นคลิกไอคอนที่เกี่ยวข้องบนแถบเครื่องมือหรือ "ย้ายแท็บปัจจุบันไปที่หน้าต่างป๊อปอัป" หรือ "ป๊อปอัป / ผสานหน้าปัจจุบัน" ในเมนูบริบท หน้าเว็บจะย้ายไปที่หน้าต่างใหม่มีแถบชื่อเรื่องที่มองเห็นและแถบเลื่อนแนวตั้งเท่านั้น หากต้องการเปลี่ยนหน้าต่างใหม่กลับเป็นแท็บปกติให้คลิกอีกครั้งที่ "ป๊อปอัป / ผสานหน้าปัจจุบัน" ในเมนูบริบท

แป้นพิมพ์ลัด: ไม่ได้รับมอบหมาย (ค่าเริ่มต้นใน 0.0.8)

ข้อ จำกัด : หน้าต่างป๊อปอัปจะอยู่ด้านบนของหน้าต่างดั้งเดิมของ Firefox ซึ่งไม่สามารถเปลี่ยนแปลงได้

ใช้งานได้กับ Firefox 53 และใหม่กว่า ผ่านการทดสอบ 0.0.8 กับ Firefox 69.0 บน Linux

สำหรับ Firefox ที่ไม่มีโปรแกรมเสริม

ฉันโพสต์คำตอบแยกไว้ด้านล่าง (คลิกหรือเลื่อนลง) ซึ่งใช้ได้กับ Firefox ทุกรุ่น แต่ไม่ใช่วิธีที่ง่ายที่สุดและไม่มีแป้นพิมพ์ลัด

วิธีดั้งเดิมคือการใช้สไตล์ชีทที่กำหนดเองใน Firefox: userChrome.css

Firefox ไม่โหลด userChrome.css โดยค่าเริ่มต้นใน Firefox 69 และใหม่กว่า หากต้องการให้สไตล์ชีทที่กำหนดเองมีผลใช้งานอีกครั้งให้เปิดabout:configใน Firefox และตั้งค่าtoolkit.legacyUserProfileCustomizations.stylesheetsเป็นtrue

ก่อนที่คำตอบนี้ได้รับการปรับปรุง, ไมค์กเขียนคำตอบที่ติดตามก่อนหน้านี้

มันทำงานอย่างไร

บล็อกรหัสต่อไปนี้เป็นเนื้อหาuserChrome.cssที่จะซ่อนแถบแท็บแถบนำทางและแถบเลื่อนใน Firefox ตรวจสอบให้แน่ใจที่จะใช้ที่ถูกต้องชื่อองค์ประกอบและรหัส

/*
 * 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;}

ข้อ จำกัด : ไม่มีแป้นพิมพ์ลัด น่าเบื่อที่จะเปิดหรือปิดการใช้งานตามความต้องการ

• หากต้องการคืนค่าอินเทอร์เฟซเริ่มต้นให้เปลี่ยนชื่อเป็นชื่อuserChrome.cssอื่นเช่นuserChrome.tmpและรีสตาร์ท Firefox เพื่อให้มีผล

• หากต้องการใช้เคียงบ่าเคียงไหล่กับอีกตัวอย่างของ Firefox ด้วยอินเตอร์เฟซค่าเริ่มต้นใช้รายละเอียดแยกต่างหาก

โปรไฟล์ทั้งหมดจะถูกเก็บไว้ในโฟลเดอร์โปรไฟล์ซึ่งสามารถอยู่ได้จาก Firefoxโดยใช้แถบเมนูหรือแถบเครื่องมือจากนั้นไปที่ความช่วยเหลือ> ข้อมูลการแก้ไขปัญหา

วิธีการตั้งค่าและใช้งาน

ต่อไปนี้เป็นขั้นตอนทั่วไปโดยไม่คำนึงถึงแพลตฟอร์มระบบ

1. เรียกใช้ตัวจัดการโปรไฟล์ของ Firefox จากนั้นสร้างโปรไฟล์ใหม่ที่ชื่อว่า 'hidebars' (ชื่อที่เลือก) และปิดตัวจัดการโปรไฟล์

2. เรียกใช้ตัวจัดการไฟล์และเปิดโฟลเดอร์โปรไฟล์ที่สร้างขึ้นในขั้นตอนที่ 1

3. ภายใต้โฟลเดอร์โปรไฟล์ใหม่ให้สร้างไฟล์ใหม่ chrome/userChrome.cssรวมถึงโฟลเดอร์หลักchromeหากไม่มีอยู่

4. คัดลอกและวางเนื้อหาของuserChrome.cssจากด้านบนลงในไฟล์ที่สร้างขึ้นในขั้นตอนที่ 3

5. สุดท้ายให้บันทึกและปิดไฟล์

ในการเริ่มใช้งานให้เรียกใช้อินสแตนซ์ของ Firefox ด้วยโปรไฟล์ใหม่

คอมโบสกรีนช็อตต่อไปนี้แสดง Firefox Legacy (ซ้าย) และ Firefox Quantum บน Linux การเรียกดูแต่ละครั้งในขนาดหน้าต่างเล็ก ๆ เมื่อใช้สไตล์ชีทที่กำหนดเอง

ใช้งานได้กับ Firefox ทุกรุ่นยกเว้น Firefox 69 และใหม่กว่าตอนนี้ไม่สนใจ userChrome.css ตามค่าเริ่มต้น ทดสอบกับ Firefox 10, 20, 50 (Firefox Legacy) และ 60, 63, 69 (Firefox Quantum) บน Linux และดูเหมือนว่าจะทำงานได้ตามที่คาดไว้

อ้างอิง

• คำตอบนี้โดยผู้ใช้ 1929 บนฟอรัมการสนับสนุนของ Firefoxกล่าวถึง#TabToolbarชื่อองค์ประกอบและรหัสสำหรับการแก้ไขแถบแท็บ

• ไฟล์ที่กำหนดเองนี้โดย Timvde บน GitHubกล่าวถึง#navigator-toolboxชื่อองค์ประกอบและ ID สำหรับการปรับเปลี่ยนแถบนำทาง

• คำตอบนี้โดย cor-el ในฟอรัมการสนับสนุนของ Firefoxกล่าวถึง#content browserชื่อองค์ประกอบและรหัสสำหรับการปรับเปลี่ยนแถบเลื่อน

• CSS ล้นบน w3schoolsจะเข้าใจoverflowไม่จำเป็น

• CSS มองเห็นสถานที่ให้บริการใน w3schoolsvisibilityที่จะเข้าใจความคุ้มค่า

• ความหมายของการใช้“! สำคัญ” ใน CSS คืออะไร บน Stack Overflowเพื่อทำความเข้าใจ!importantไม่จำเป็น

• Firefox 60 ยากจนซ่อนแถบเลื่อน cssและซ่อนแถบเลื่อน Firefox 60: FirefoxCSSบน reddit.com ทั้งคู่แนะนำให้นำออก#contentและทิ้งไว้browserเพื่อซ่อนแถบเลื่อนเท่านั้น

• Firefox 69: userChrome.css และ userContent.css ถูกปิดการใช้งานโดยค่าเริ่มต้นใน ghacks.net และ PSA: Firefox v69 ผู้ใช้จะต้องมีการตั้ง pref เพื่อเปิดใช้งาน userChrome.css และ userContent.cssใน reddit.com ทั้งได้ตั้งข้อสังเกตการตั้งค่าใหม่ในtoolkit.legacyUserProfileCustomizations.stylesheetsabout:config

คำตอบของผู้ตอบ : คำตอบนี้เขียนเมื่อสองปีต่อมาแต่หลังจากที่ผมได้แนะนำให้ใช้ add-on ในคำตอบแรก ตั้งแต่นั้นเป็นต้นมามีคำตอบอีกหลายข้อที่ขึ้นอยู่กับ userChrome.css แทนที่จะเขียนเพื่อปรับปรุงคำตอบนี้ ดังนั้นคำตอบนี้จึงเป็นวิกิชุมชนดังนั้นทุกคนที่มีชื่อเสียงน้อยที่สุดสามารถปรับปรุงโพสต์นี้เพื่อให้ทันกับการเปลี่ยนแปลงล่าสุดใน Firefox

ฉันรู้ว่ามันสายไปแล้ว แต่ฉันทำ bookmarklet สำหรับสิ่งนี้มันไม่จำเป็นต้องมีส่วนเสริมและไม่มีการดาวน์โหลด :)

บันทึกรหัส JavaScript ต่อไปนี้เป็นbookmarkletและคลิกบนหน้าเว็บที่คุณต้องการดูในหน้าต่างขั้นต่ำสุดใหม่:

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

คลิกที่นี่เพื่อทำให้กระบวนการง่ายขึ้น! | JSfiddle

หมายเหตุ: สิ่งนี้ควรใช้ได้กับเบราว์เซอร์ทั้งหมด

ฉันรัก Firefox และ Vivaldi หนึ่งในคุณสมบัติที่ดีที่สุดของ Vivaldi (ฉันเป็นผู้ใช้ท่าทางของเมาส์) คือมันมีตัวเลือกมากมาย (แถบด้านข้างที่คั่นหน้าแถบที่อยู่แถบสถานะ ฯลฯ ) ที่สามารถปรับเปลี่ยนและย้าย ...

ทางลัดหนึ่งแจ้งว่า 'ซ่อน UI' ทุกอย่างหายไป ... ดังนั้นเมื่อคุณไม่จำเป็นต้องเห็นแท็บ / แอ๊ดดี้บาร์ ฯลฯ จากนั้นฉันก็ทำเมาส์ทิ่มแทงแล้วก็เหลือหน้าและหน้าต่าง

มายากล.

ยิ่งไปกว่านั้นสีหน้าต่างใช้คำใบ้จากหน้าเว็บและทำงานได้ดีมาก - ผสมผสานอย่างดี

ฉันรู้ว่ามันดึก แต่บางคนอาจจะชอบ

หากคุณเพียงแค่ต้องการซ่อนองค์ประกอบ UI ของ Firefox จนกว่าพวกเขาจะมีความจำเป็นบางทีฉันอาจuserChrome.cssเป็นของคุณ (ทำงานกับ FF 70.0.1)

• แถบแท็บจะถูกซ่อนหากแท็บเดียวเท่านั้น
• แถบที่อยู่ถูกซ่อนไว้จนกว่าจะเน้นด้วย Ctrl-L, F6 และสิ่งที่คล้ายกัน
• แถบเลื่อนด้านขวาจะถูกลบ

ในการซ่อนแถบแท็บคุณจะต้องใช้ Firefox customize(เพียงคลิกขวาที่แถบแท็บ) เพื่อดึงแถบnewtab (+) buttonปิดออกจากแท็บและตรวจสอบให้แน่ใจว่าคุณใช้ระบบของTitlebar (เพื่อให้หน้าต่างมีค่าน้อยที่สุด และปุ่มปิดไม่ได้อยู่บนแถบแท็บ) มิฉะนั้นปุ่มเหล่านั้นจะขัดขวางการซ่อน

คำแนะนำเกี่ยวกับตำแหน่งที่จะวางuserChrome.cssไฟล์และวิธีการใช้งานมันสามารถพบได้ในโพสต์ที่ยอดเยี่ยมนี้: /superuser//a/1269912/1107142

สรุปอย่างรวดเร็วของฉัน:

• ในabout:configหน้าสลับtoolkit.legacyUserProfileCustomizations.stylesheetsเป็นtrue
• รับProfile Directoryจากabout:supportหน้า
• สร้างไดเรกทอรีที่เรียกว่าchromeในของคุณProfile Directory
• ใส่userChrome.cssไฟล์ในchromeไดเรกทอรีนั้น

userChrome.css ของฉันคัดลอกและวางตามต้องการ:

/* 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;
}

ตัวเลือกที่ดีที่สุดที่ฉันรู้จักคือโหมดเต็มหน้าจอซึ่งเปิดใช้F11ในเบราว์เซอร์สมัยใหม่ทั้งหมด ซึ่งจะซ่อนพื้นหลังเดสก์ท็อปของคุณและแอพอื่น ๆ ซึ่งอาจไม่ใช่สิ่งที่คุณต้องการ มันจะเติมเต็มพื้นที่รอบ ๆ เนื้อหาของเว็บแอปพลิเคชันด้วยสีขาว (หรือสีพื้นหลัง / รูปภาพใด ๆ ในสไตล์ชีทของเว็บแอป)

คุณสามารถเรียกใช้หน้าต่างแอปของคุณได้จากบรรทัดคำสั่ง

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

และวางบนเดสก์ท็อปแบบขยายพร้อมพื้นหลังที่คุณเลือก

คำถามเกี่ยวกับวิธีการทำเช่นนี้ใน Firefox Quantum ( > = 57 ) อาจตอบคำถามนี้ ( Firefox Quantum (> = 57) จะสลับแถบเครื่องมือทั้งหมดได้อย่างไร (ด้วยแป้นพิมพ์ลัดเช่น F11 แต่ในหน้าต่างไม่ใช่แบบเต็มหน้าจอ )

F11 / Fullscreen บางครั้งก็ทำไม่ได้
หากคุณต้องการสลับแถบเครื่องมือใน Firefox เวอร์ชันก่อนหน้าถึง 57เป็นไปได้ด้วย addon "Dorando keyconfig":

1. ระบุสคริปต์ใน Dorando "Key Editor":

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. แมปไปยังแป้นพิมพ์ลัดผ่าน Dorando addon-interface

คุณควรลองพารามิเตอร์คำสั่ง--kioskใหม่จาก Firefox v.71 ใหม่

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

โปรดทราบว่าคำตอบจาก clearkimura ด้านบนซึ่งแนะนำให้ใช้สไตล์ชีทนั้นต้องมีการปรับแต่งเล็กน้อยใน Firefox รุ่นที่ใหม่กว่า วิธีแก้ปัญหาใช้งานได้เมื่อฉันทำ จากนี้หน้าเว็บ:

ตั้งค่า Firefox ให้มองหา userChrome.css เมื่อเริ่มต้น (อัปเดตเมื่อ 5/24/2019)

เพื่อให้การเริ่มต้นเร็วขึ้นสำหรับผู้ใช้ส่วนใหญ่ Firefox 69 จะไม่ค้นหาไฟล์นี้อีกต่อไปโดยอัตโนมัติ คุณต้องบอกให้มันดู นี่คือวิธี:

1. ในแท็บใหม่พิมพ์หรือวางabout: configในแถบที่อยู่แล้วกด Enter / Return คลิกที่ปุ่มยอมรับความเสี่ยง
2. ในช่องค้นหาด้านบนรายการพิมพ์หรือวางuserprofและหยุดชั่วคราวขณะที่รายการถูกกรอง หากคุณไม่เห็นอะไรในรายการโปรดเพิกเฉยต่อคำแนะนำที่เหลือ คุณสามารถปิดแท็บนี้ได้ทันที
3. คลิกสองครั้งที่การตั้งค่าtoolkit.legacyUserProfileCustomizations.stylesheetsเพื่อสลับค่าจาก false เป็น True

การเปลี่ยนแปลงนั้นจะมีผลในการเริ่มต้นครั้งต่อไปของคุณ