Firefox 75 นำการเปลี่ยนแปลงที่ไร้ประโยชน์มาให้ - แถบที่อยู่ (urlbar) จะ "ซูมเข้า" เมื่อคลิก ทับบางส่วนของ UI รอบข้าง รวมถึงลัดทางที่คุณปักไว้ด้วย รูปแบบนี้รู้สึกเหมือนบนมือถือ และไม่เหมาะสำหรับเดสก์ท็อปเลย ตอนนี้ยังสามารถย้อนกลับได้ผ่านการตั้งค่า about:config หลายตัว
แต่ใน Firefox 77 (nightly) ตัวเลือกเหล่านี้หายไปแล้ว จึงต้องหาวิธีใหม่ ในบทช่วยสอนนี้ จะแสดงวิธีคืนลักษณะและการทำงานของแถบที่อยู่แบบเดิม เพื่อไม่ให้ได้รับผลกระทบจากการเปลี่ยนแปลงที่ไร้เหตุผล ผมคิดว่า Firefox กำลังเลื่อนตัวขึ้นเหนือเกมส์חקเลียนแบบมือถือ แต่แล้วการเปลี่ยนแปลงแบบนี้ก็กลับมาเกิดขึ้น ติดตามไปด้วยกัน
เราต้องการกำจัดแถบที่อยู่ที่ซูมเข้าแบบน่ารำคาญนี้
เราจะทำอะไร?
เราจะสร้างสไตล์ CSS แบบกำหนดเอง เพื่อให้ UI ของ Firefox กลับสู่รูปแบบเดิม โดยปฐมัย Firefox UI สามารถจัดสไตล์ได้เหมือนหน้าเว็บ ทำได้โดยการเพิ่มการประกาศ CSS ในไฟล์ userChrome.css โฟลเดอร์โปรไฟล์ของ Firefox
ผมไม่ใช่ผู้ริเริ่ม ความจำเป็นสำคัญนี้ได้รับคำตอบบนเว็บไซต์สนับสนุน Mozilla แล้ว แต่โค้ดสนิปเพทนั้นต้องปรับแก้เล็กน้อย และผมต้องการทำให้เข้าใจง่ายและชัดเจนที่สุดว่าผู้ใช้ต้องทำอะไรเพื่อคืนลักษณะเดิม
เปิดใช้งาน userChrome.css
ก่อนอื่น ต้อง "บอก" Firefox ให้เคารพการเปลี่ยนแปลง CSS ที่ผู้ใช้สร้าง:
- Firefox 68 และต่ำกว่า: ไม่ต้องทำอะไร
- Firefox 69 ขึ้นไป: ไปที่ about:config ค้นหาตั้งค่าต่อไปนี้ และเปลี่ยนจาก false เป็น true:
toolkit.legacyUserProfileCustomizations.stylesheets
จากนั้น ไปที่โฟลเดอร์โปรไฟล์ Firefox ใน Windows มักจะอยู่ที่:
C:\Users\"username"\AppData\Roaming\Mozilla\Firefox\"profile"
และใน Linux มักจะอยู่ที่:
/home/"user"/.mozilla/firefox/"profile"
หากต้องการตัวอย่าง ดูบทความ Plasma & HD scaling หรือคู่มือแท็บปักหมุดของ Firefox ได้
- ในโฟลเดอร์นี้ สร้างโฟลเดอร์ชื่อ chrome (ตัวพิมพ์เล็ก)
- ภายในโฟลเดอร์ chrome สร้างไฟล์ข้อความว่างชื่อ userChrome.css (ระวังตัวพิมพ์เล็ก/ใหญ่)
เพิ่มสไตล์แถบที่อยู่
ขั้นตอนต่อไปคือเพิ่มเนื้อหาลงในไฟล์ userChrome.css คัดลอกข้อความต่อไปนี้ - มาจากเธรดสนับสนุนข้างต้น โปรดทราบว่าอาจไม่เพียงพอ แต่ผมต้องการแสดงทุกอย่างขั้นตอนต่อขั้นตอน เพื่อให้คุณมั่นใจในการแก้ไขไฟล์หากจำเป็น
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height: 28px !important;
--urlbar-toolbar-height: 30px !important;
width: 100% !important;
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container,
#urlbar-input-container {
height: var(--urlbar-height) !important;
width: 100% !important;
padding-block: unset !important;
padding-inline: unset !important;
transition: none !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
animation: none !important;
}
บันทึกไฟล์ แล้วรีสตาร์ท Firefox
ผลลัพธ์ ยังไม่สมบูรณ์
การทดสอบของผมแสดงว่าสนิปเพทโค้ดข้างต้นให้เลย์เอาต์ที่ยังไม่ดีพอ แถบที่อยู่นั่ง "สูงเกินไป" - ไม่ได้อยู่ตรงกลางแนวตั้ง มาร์จิ้นบนและล่างผิดพลาด
ปรับเปลี่ยน CSS ครั้งที่สอง
เราต้องปรับค่าเริ่มต้นที่ใช้ใน CSS ที่เพิ่งเพิ่มไป นั่นคือปรับความสูงของ urlbar และ toolbar มาร์จิ้นบนจะคำนวณเป็นครึ่งหนึ่งของความต่าง (delta) ระหว่างค่าทั้งสอง สามารถเปลี่ยนค่า top แบบแมนวอลได้อีกด้วย
#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height: 28px !important;
--urlbar-toolbar-height: 30px !important;
ผมทดลองผิดลองถูก และพบว่า toolbar height 38px ให้ผลลัพธ์ที่ดี:
#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height: 28px !important;
--urlbar-toolbar-height: 38px !important;
และอีกครั้ง มาร์จิ้นบน สามารถเปลี่ยนจากคำนวณเริ่มต้นเป็นค่าใดก็ได้:
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
เช่น:
top: 5px !important;
การใช้ !important สำคัญมาก - เพื่อให้ Firefox ใช้ค่านี้แทนค่าเริ่มต้น
ลักษณะสุดท้าย ตามที่ควรจะเป็น
และเรากลับมามีความเป็นเหตุเป็นผลและสติปัญญาคืนมา:
สรุป
เสร็จสิ้น ภารกิจสำเร็จ ตลอดปีผมถูกบังคับให้ใช้ CSS แบบกำหนดเองมากขึ้นเรื่อยๆ เพื่อให้ได้พฤติกรรมเบราว์เซอร์ปกติ นี่เป็นแนวโน้มที่น่ากลัว แต่อาจเป็นเรื่องที่หลีกเลี่ยงไม่ได้ เมื่อบริษัทมากขึ้นผลิตผลิตภัณฑ์ไร้ประโยชน์สำหรับกลุ่มคนไอคيوต่ำกว่า 100 ที่เพิ่มขึ้น และไม่มีเหตุผลทางฟังก์ชันการทำงานเลย แค่เปลี่ยนแปลงเพื่อการเปลี่ยนแปลง บ่อยครั้งเป็นสิ่งปลอมสมัยใหม่ที่ทำลายโซลูชันที่ยอมรับได้และพิสูจน์ทางวิทยาศาสตร์แล้ว
หวังว่าบทความเล็กๆ นี้จะมีประโยชน์ สามารถใช้ได้ทันทีใน Firefox 75 หรือรอจน Firefox 77 ออก แล้วค่อยเปลี่ยน - ระหว่างนั้นใช้การลบล้างการตั้งค่า config ยังคงว่า อย่างน้อยก็ยังมีทางสำหรับนักเทคนิคที่จะคืนเลย์เอาต์ปกติที่จำเป็นสำหรับการทำงาน แต้อนาคตจะเป็นอย่างไรไม่รู้ Firefox ขอให้อย่าเหมือนคนอื่นๆ นั่นแหละ ภารกิจสำเร็จ หากต้องการขอบคุณ ผมขอของขวัญหรูหราและคำชมเชยม่านปิด
Cheers.
