วิธีเปลี่ยนแถบที่อยู่ใน Firefox 75 (ขึ้นไป)

Firefox 75 นำมาซึ่งการเปลี่ยนแปลงที่ไร้จุดหมาย - แถบที่อยู่ (urlbar) ตอนนี้จัดเรียงเป็น "ซูมเข้า" เมื่อคลิก บดบัง UI โดยรอบบางส่วน รวมถึงทางลัดใดๆ ที่คุณอาจตรึงไว้ที่นั่น สิ่งนี้ให้ความรู้สึกเคลื่อนที่โดยสิ้นเชิงและผิดกับเดสก์ท็อปโดยสิ้นเชิง ในขณะนี้ ดังที่ฉันได้แสดงให้คุณเห็นในบทความข้างต้น เรื่องไร้สาระนี้สามารถย้อนกลับได้ผ่านการตั้งค่า about:config จำนวนหนึ่ง

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

เราต้องการกำจัดแถบที่อยู่การซูมเข้าที่น่ารำคาญนี้

เราจะทำอย่างไร

เราจะสร้างสไตล์ CSS แบบกำหนดเองเพื่อทำให้ UI ของ Firefox มีลักษณะเหมือนเดิม โดยพื้นฐานแล้ว Firefox UI สามารถจัดรูปแบบได้เช่นเดียวกับหน้าเว็บอื่นๆ ซึ่งทำได้โดยการเพิ่มการประกาศ CSS ในไฟล์ userChrome.css ในโฟลเดอร์โปรไฟล์ Firefox

ตอนนี้ฉันไม่ใช่ผู้บุกเบิก ความต้องการที่สำคัญนี้ได้รับคำตอบแล้วในไซต์สนับสนุนของ Mozilla แต่ส่วนย่อยของโค้ดจำเป็นต้องมีการปรับเปลี่ยน และฉันต้องการทำให้มันเรียบง่ายเป็นพิเศษและชัดเจนว่าผู้ใช้ต้องทำอะไรบ้างเพื่อให้ได้รูปลักษณ์เก่ากลับมา

เปิดใช้งาน userChrome.css

ก่อนอื่น เราต้อง "บอก" Firefox ให้เคารพการเปลี่ยนแปลง CSS ที่ผู้ใช้สร้างขึ้น:

• ใน Firefox 68 และต่ำกว่า คุณไม่จำเป็นต้องดำเนินการใดๆ
• ใน Firefox 69 ขึ้นไป ให้ไปที่ about:config ค้นหาการตั้งค่าต่อไปนี้และเปลี่ยนจากเท็จเป็นจริง:

toolkit.legacyUserProfileCustomizations.stylesheets

จากนั้นไปที่โฟลเดอร์โปรไฟล์ Firefox ของคุณ ใน Windows โดยทั่วไป:

C:\Users\"ชื่อผู้ใช้"\AppData\Roaming\Mozilla\Firefox\"โปรไฟล์"

และใน Linux โดยทั่วไป:

/home/"user"/.mozilla/firefox/"profile"

หากคุณต้องการตัวอย่าง โปรดดูบทความการปรับขนาด Plasma &HD หรือคำแนะนำเกี่ยวกับแท็บที่ปักหมุดของ Firefox

• ในโฟลเดอร์นี้ ให้สร้างโฟลเดอร์ชื่อ chrome (ตัวพิมพ์เล็ก)
• ภายในโฟลเดอร์ chrome ให้สร้างไฟล์ข้อความว่างชื่อ userChrome.css (อย่าลืมตัวพิมพ์เล็ก/ตัวพิมพ์ใหญ่)

เพิ่มรูปแบบแถบที่อยู่

ขั้นตอนต่อไปคือการเพิ่มเนื้อหาลงในไฟล์ userChrome.css คัดลอกข้อความต่อไปนี้ - มาจากเธรดการสนับสนุนด้านบนโดยตรง โปรดทราบว่านี่อาจไม่เพียงพอ แต่ฉันต้องการแสดงให้คุณเห็นทุกอย่างทีละขั้นตอน เพื่อให้คุณมั่นใจมากขึ้นในการเปลี่ยนไฟล์หากต้องการ

@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* ต้องการเพียงครั้งเดียว */

#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height:28px !important;
--urlbar-toolbar-height:30px !important;

ความกว้าง:100% !สำคัญ;
ด้านบน:calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
เหลือ:0 !important;
}

#urlbar[breakout][breakout-extend]> #urlbar-input-container,
#urlbar-input-container {
ความสูง:var( --urlbar-height) !important;
ความกว้าง:100% !สำคัญ;
padding-block:unset !important;
การเติมแบบอินไลน์:unset !important;
การเปลี่ยนแปลง:ไม่มี !important;
}

#urlbar[breakout][breakout-extend]> #urlbar-background {
box-shadow:0 1px 4px rgba(0,0,0,.05 ) !สำคัญ;
ภาพเคลื่อนไหว:ไม่มี !important;
}

บันทึกไฟล์ รีสตาร์ท Firefox

ผลลัพธ์ ออกเพียงเล็กน้อย

การทดสอบของฉันแสดงให้เห็นว่าข้อมูลโค้ดด้านบนให้ผลลัพธ์น้อยกว่าเลย์เอาต์ในอุดมคติเล็กน้อย อย่างที่คุณเห็น แถบที่อยู่นั้น "สูงเกินไป" ซึ่งไม่ได้อยู่กึ่งกลางแนวตั้ง ระยะขอบบนและล่างผิด

CSS การเปลี่ยนแปลงครั้งที่สอง

สิ่งที่เราต้องทำคือปรับค่าเริ่มต้นที่ใช้ใน CSS ที่เราเพิ่มเข้าไปเล็กน้อย กล่าวคือ เราจำเป็นต้องปรับแต่งความสูงของแถบ URL และความสูงของแถบเครื่องมือ ระยะขอบด้านบนจะคำนวณเป็นครึ่งหนึ่งของความแตกต่าง (เดลต้า) ระหว่างค่าทั้งสองนี้ คุณยังเปลี่ยนค่าสูงสุดด้วยตนเองได้อีกด้วย

#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height:28px !important;
--urlbar-toolbar-height:30px !important;

ฉันได้ทำการทดสอบแบบลองผิดลองถูก และสำหรับฉันแล้ว ความสูงของแถบเครื่องมือที่ 38px ก็ใช้ได้:

#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height:28px !important;
--urlbar-toolbar-height:38px !important;

และอีกครั้ง ระยะขอบบน คุณสามารถเปลี่ยนจากการคำนวณเริ่มต้นเป็นอะไรก็ได้ที่คุณต้องการ:

ด้านบน:calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;

ตัวอย่างเช่น อาจเป็นดังนี้:

ด้านบน:5px !important;

การใช้ !important override คือ เอ๊ะ สำคัญ - เพื่อให้ Firefox ใช้ ไม่ใช่ชุดเริ่มต้น

รูปลักษณ์สุดท้ายอย่างที่ควรจะเป็น

และเรามีสติสัมปชัญญะ ตรรกะ และสติปัญญากลับมา:

บทสรุป

และนั่นเราไป งานสำเร็จ. ในช่วงหลายปีที่ผ่านมา ฉันถูกบังคับให้ใช้ CSS แบบกำหนดเองมากขึ้นเรื่อยๆ เพื่อให้เบราว์เซอร์ทำงานได้ตามปกติ นี่เป็นแนวโน้มที่น่าตกใจ แต่ฉันเดาว่าเป็นสิ่งที่หลีกเลี่ยงไม่ได้ เนื่องจากบริษัทจำนวนมากขึ้นเรื่อยๆ กำลังเลิกใช้ผลิตภัณฑ์ที่ไร้ประโยชน์สำหรับกลุ่มคนที่มี IQ ต่ำกว่า 100 ที่เติบโตขึ้นเรื่อยๆ และไม่มีเหตุผลด้านการทำงานที่ดีแต่อย่างใด เพียงแค่เปลี่ยนเพื่อประโยชน์ของมัน และมักจะเป็นของปลอมสมัยใหม่ที่ทำลายวิธีแก้ปัญหาที่ยอมรับได้อย่างสมบูรณ์และได้รับการพิสูจน์และทดสอบทางวิทยาศาสตร์

ฉันหวังว่าคุณจะพบว่าบทความเล็ก ๆ นี้มีค่า คุณสามารถใช้งานได้ทันทีใน Firefox 75 หรือรอจนกว่า Firefox 77 จะออกอากาศ จากนั้นทำการเปลี่ยนแปลง - และในขณะเดียวกันให้ใช้การแทนที่การกำหนดค่า ถึงกระนั้น แม้จะมีเรื่องไร้สาระทั้งหมดนี้ แต่อย่างน้อยก็มีวิธีสำหรับนักเทคโนโลยีในการคืนเค้าโครงปกติที่มีประสิทธิภาพที่พวกเขาต้องการ แต่ใครจะรู้ว่าอนาคตจะเป็นอย่างไร Firefox โปรดอย่าเป็นเหมือนที่อื่น เอาล่ะคุณไป ภารกิจเสร็จสมบูรณ์. ถ้าคุณต้องการขอบคุณฉัน ให้ซื้อของขวัญฟุ่มเฟือยให้ฉัน แล้วส่งคำชมมาให้ฉัน ผ้าม่าน.

ไชโย