ย้อนกลับ Proton UI ใน Firefox 91 และเวอร์ชันใหม่กว่า

Firefox 91 ได้รับการวางจำหน่ายแล้ว คุณรู้ไหมว่านี่หมายความอะไร? หมายความว่าคุณไม่สามารถปิด Proton interface ผ่าน about:config ได้อีกต่อไป ทำไมสิ่งนี้จึงสำคัญ? เพราะ Proton sucks สำหผู้ที่สับสนกับความรุนแรงของข้อความของผมตั้งแต่ต้น เรามา recap กัน

พักหนึ่ง Mozilla ประกาศว่าจะเปลี่ยน - อีกครั้ง - Firefox UI ครั้งนี้เรียกว่า Proton

ผมแสดงให้เห็นว่ามันดูอย่างไร - และมันไม่ดูดี แต่ใน Firefox 89 Proton กลายเป็น official คุณสามารถ toggle มันปิดได้และดำเนินชีวิตต่อไป โดยเพลิดเพลินกับ productivity และ efficiency ตอนนี้ แต่อย่างไรก็ตาม นี่ไม่ใช่ตัวเลือกอีกต่อไป ดังนั้น หากคุณไม่อยากทนกับ useless, low-contrast hipsterology ผมจะแสดงชุดการเปลี่ยนแปลงที่คุณสามารถใช้เพื่อ minimize หรือ remove useless aspects ของ Proton และกลับไปสู่ sane browsing ตามมาผม

ปัญหาที่มีอยู่

เราพูดถึงเรื่องนี้ แต่เราต้องพูดเพิ่มเติม ดูที่ useless, gray on gray nonsense นั้น แท็บเริ่มที่ไหน จบที่ไหน มันเป็นแท็บจริงไหม? จำได้ไหม color tabs ที่คนใช้ในโฟลเดอร์โต่ๆ ในช่วง 80s และ 90s เพื่อ bookmark หน้าและอื่นๆ ตอนนี้ลองจินตนาการ invisible tabs! Duh! ErGoNoMiCs!

ส่วนผสม

มีหลายสิ่งที่คุณสามารถทำได้ แต่ลองเริ่มทีละอย่าง ก่อนอื่น คุณต้องเข้าใจลักษณะของงานวันนี้ เนื่องจาก built-in configuration tweaks ไม่ได้อีกต่อไป เราต้องไปลึก คุณสามารถเปลี่ยนลุกลักษณ์ Firefox โดยใช้ custom set of CSS rules คล้ายกับการ edit เว็บเพจ - แท้จริง most modern browsers style themselves เหมือนเว็บเพจ ผมแสดงวิธีการนี้ใน Plasma & HD tutorial, pinned tabs guide และ tutorial ทำให้ URL bar ดู sane นั่นคือ baseline สำหงานวันนี้

ขั้นแรก เปิดใช้งาน options สำหใช้ custom user-made CSS overrides เปิดแท็บใหม่ พิมพ์ about:config แล้วค้นหา preference ต่อไปนี้:

toolkit.legacyUserProfileCustomizations.stylesheets

Toggle setting นี้เป็น true จากนั้น ไปที่ Firefox profile folder ใน Windows ปกติ:

C:\Users\"username"\AppData\Roaming\Mozilla\Firefox\"profile"

และใน Linux ปกติ:

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

ในโฟลเดอร์นี้ สร้าง (ถ้ายังไม่มี) โฟลเดอร์ชื่อ chrome (lowercase) ภายในโฟลเดอร์ chrome สร้าง (ถ้ายังไม่มี) ไฟล์ text ว่างชื่อ userChrome.css (ระวัง lower/uppercase) เราจะเพิ่ม text จำนวนมากเข้าไปในไฟล์นี้

Proton rules

ตอนนี้ เราต้องเพิ่มกฎหลายอย่างที่จะเปลี่ยนพฤติกรรม Firefox element ที่ผิดเยอะที่สุดคือ new tab behavior ด้วย oversized tabs, pale contrast และ almost no separation ระหว่าง active/inactive tabs และ background tab bar strip นี่คือที่ที่เรื่องราวกลายเป็น tricky เพราะไม่มี definitive set of CSS rules ที่คุณแค่ใช้ได้ ตัวเลือกบางอย่าง:

• AskVG guide on how to restore classic looks & UI - simplest guide และ baseline สำหงานของผมที่นี่
• GitHub project to revert Proton to Photon compact
• GitHub project to modify some aspects of Proton
• GitHub project to use classic looks (contains a lot more than Proton)
• Firefox 89 Proton UI interactive styler - ให้คุณเปลี่ยนทุกอย่าง + live preview

ลองเริ่มกับ AskVG guide ใน userChrome.css เพิ่มโค้ดต่อไปนี้:

.titlebar-color {
  color: -moz-accent-color-foreground;
  background-color: -moz-accent-color;
}

.tab-background {
  border-radius: 0px 0px !important;
  margin-bottom: 0px !important;
}

.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
  background-color: color-mix(in srgb, currentColor 5%, transparent);
}

menupopup > menu, menupopup > menuitem {
  padding-block: 2px !important;
}

:root {
  --arrowpanel-menuitem-padding: 2px !important;
}

นี่จะให้ pretty decent looks - active tab จะมีขอบ background tabs จะไม่มี อย่างไรก็ตาม คุณจะได้ better contrast มากกว่า standard Proton ผมพบว่าเพียงพอ แต่ตัดสินใจทำ modifications เพิ่มเติมอีกนิดหน่อย

Background tab borders

หากคุณต้องการ background tabs มีขอบด้วย คุณสามารถเพิ่มดังนี้:

.tabbrowser-tab:not([selected="true"]) > .tab-stack > .tab-background {
  border: 1px solid rgba(130, 130, 130, 0.5) !important;
}

นี่จะตั้ง background tabs ด้วย light gray 1px solid border ตั้งค่า 50% transparency คุณสามารถใช้สีหรือค่า transparency ใดๆ ที่ชอบ โปรดทราบว่า clause นี้คล้ายกับที่กำหนดใน AskVG snippet มาก และคุณสามารถ combine rules เพื่อทำให้ code section เล็กลงและ compact ได้ อย่างไรก็ตาม หากคุณไม่แน่ใจว่าทำอะไร ให้เพิ่มบรรทัดเพิ่มเติมแยกต่างหาก ไม่มี conflict เพราะ rules เป็น layered

Foreground tab border

เช่นกัน คุณสามารถ tweak active tab ได้เช่นกัน เพื่อ OCD sake:

.tabbrowser-tab[selected="true"] .tab-background {
  border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
  border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
}

Tab accent color

คุณสามารถทำให้ active tab highlighted และ visible เพื่อแยกจาก tabs อื่นๆ:

.tabbrowser-tab[selected="true"] .tab-background {
  border-top: 3px solid #3daee9 !important;
}

คุณสามารถเพิ่มบรรทัดเพิ่มเติมเข้าไปใน definition ด้านบนได้ หากชอบ ในตัวอย่างของผม ผมตั้ง accent color ให้ตรงกับ desktop color scheme สี #3daee9 คือ accent color ที่ Plasma desktop ใช้ในตัวอย่างนี้ คุณสามารถใช้ system accent color - ตามที่กำหนดใน titlebar CSS rule:

border-top: 3px solid -moz-accent-color-foreground !important;

Tab bar height

หากคุณต้องการทำให้ tabs เล็กลง - คล้ายกับ compact mode เก่า คุณสามารถเพิ่มกฎต่อไปนี้:

.toolbar-items, .tabbrowser-tab {
  max-height: 38px;
}

:root[uidensity=touch] .toolbar-items, .tabbrowser-tab {
  max-height: 45px;
}

คุณสามารถปรับค่าเป็นอะไรก็ได้ เช่น max-height: 28px; หรือคล้ายๆ กัน touch clause เป็น optional ไปกับ density (height) ใดๆ ที่ทำงานได้สำหคุณ

Container tab color

Firefox 91 ทำให้ container tabs ดู bland และยากที่จะแยกจาก ordinary tabs ดังนั้นผมตัดสินใจเพิ่มสีเล็กน้อย [sic] มีหลายตัวเลือก และตอนนี้คุณควรคุ้นเคยกับการเปลี่ยนแปลงที่จำเป็นมากขึ้น ผมเลือก fully colored tabs ที่ match container color บวก nice borders เพื่อให้ OCD demons ไม่ต้องตื่น:

.tabbrowser-tab[usercontextid] .tab-background {
  background: var(--identity-tab-color) !important;
  border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
  border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
  border-bottom: var(--identity-tab-color) !important;
  opacity: 0.8 !important;
}

แต่ละแท็บใช้ identity color ของตัวเอง (defined by var clause) bottom border match identity color เพื่อให้แท็บ blend nicely เข้ากับ tab bar และ side borders เหมือน ordinary tabs ผมลองหลายตัวเลือก ตัวอย่างเช่น ผมลอง 20% และ 80% opacity options:

และตอนนี้ Firefox ของคุณดูดียิ่งขึ้นมาก! อีกตัวอย่าง crazy เล็กน้อย:

Extra cosmetics

มีอะไรมากมายที่คุณสามารถทำได้ ผมแม้แต่ tweak zoom button ใน address bar เพราะ padding ผิดไปเล็กน้อย และเราไม่สามารถมี rogue pixels ได้ แต่เราควรจบที่นี่ บน high note

#urlbar-zoom-button {
padding-top: 0px !important;
}

สรุป

นี่คือผลลัพธ์ วันนี้ผมแสดงวิธีย้อนกลับ useless "modern" UI changes ที่นำเข้าใน Firefox 91 ตราบใดที่ Firefox มี CSS overrides ยังมีหวัง ไม่สนุกที่ต้องต่อสู้กับซอฟต์แวร์ของคุณเอง แต่อย่างน้อยคุณมีตัวเลือกกำจัด low-IQ stuff และรักษา productivity และ efficiency ด้วย CSS rules ที่ระบุข้างต้น Firefox 91 และสำคัญกว่า Firefox 91 ESR สามารถดู relatively decent และ usable สำหอนาคตที่คาดการณ์ได้

จะเกิดอะไรขึ้นในอีกหนึ่งหรือสองปี? ใครรู้ ผมยังเชื่อว่า Firefox ควรเป็น default browser ของคุณ 儘管 utter nonsense ที่ถูกกองเข้าไปโดย Mozilla team แต่ผมไม่แน่ใจว่าจะเก็บตำแหน่งนี้ได้นานแค่ไหน ที่บางจุด Firefox อาจถึงระดับ visual ugliness และ uselessness ของคู่แข่ง ผมไม่รู้ว่าผมจะทำอย่างไรตอนนั้น เพราะผมไม่อยากใช้ Internet เมื่อ Chromium-based browser เป็นตัวเลือกเดียว Quit the Web? อาจเป็น solution นั่นเอง ดีแล้ว เราไม่ต้องเผชิญกับ hard choice นี้วันนี้ CSS tweaks เสร็จแล้ว Intelligence 1, hipsterology 0 จบแล้ว

ขอแสดงความนับถือ