วิธีเลิกทำ Proton UI ใน Firefox 91 เป็นต้นไป

Firefox 91 เปิดตัวแล้ว คุณรู้หรือไม่ว่านี่หมายถึงอะไร? หมายความว่าคุณไม่สามารถปิดใช้งานอินเทอร์เฟซ Proton ผ่าน about:config ได้อีกต่อไป ทำไมเรื่องนี้คุณถาม? เพราะโปรตอนห่วย สำหรับผู้ที่สับสนเกี่ยวกับความรุนแรงของข้อความของฉันตั้งแต่เนิ่นๆ ในการรีวิว เรามาสรุปกัน ไม่นานมานี้ Mozilla ประกาศว่าจะเปลี่ยน - อีกครั้ง - UI ของ Firefox คราวนี้เรียกว่า Proton

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

ปัญหาในมือ

เราคุยกันเรื่องนี้แล้ว แต่เราต้องคุยกันมากกว่านี้ ดูไร้สาระสีเทาในเรื่องไร้สาระสีเทา แท็บเริ่มต้นที่ไหน มันจบลงที่ไหน? มันเป็นแท็บหรือไม่? จำแท็บสีเหล่านั้นที่ผู้คนใช้ในโฟลเดอร์ขนาดใหญ่แบบเก่าในยุค 80 และ 90 เพื่อทำเครื่องหมายหน้าหรือไม่? ตอนนี้ลองนึกภาพแท็บที่มองไม่เห็น! หึ! ErGoNoMiCs!

ส่วนผสม

มีบางสิ่งที่คุณสามารถทำได้ แต่มาเริ่มกันช้าๆ ก่อนอื่น คุณต้องเข้าใจธรรมชาติของงานในปัจจุบัน เนื่องจากไม่สามารถปรับแต่งการกำหนดค่าในตัวได้อีกต่อไป เราจึงจำเป็นต้องลงลึก คุณสามารถเปลี่ยนรูปลักษณ์ของ Firefox ได้โดยใช้ชุดกฎ CSS แบบกำหนดเอง เช่นเดียวกับการแก้ไขเว็บเพจ ที่จริงแล้วเบราว์เซอร์สมัยใหม่ส่วนใหญ่จะมีสไตล์เหมือนกับเว็บเพจ ฉันได้แสดงวิธีการนี้ไปแล้วในบทช่วยสอน Plasma &HD คู่มือแท็บที่ปักหมุด และบทแนะนำเกี่ยวกับวิธีทำให้แถบ URL ดูเหมาะสม ซึ่งเป็นพื้นฐานสำหรับงานของเราในปัจจุบัน

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

toolkit.legacyUserProfileCustomizations.stylesheets

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

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

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

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

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

กฎของโปรตอน

ตอนนี้ เราจำเป็นต้องเพิ่มกฎจำนวนหนึ่งที่จะเปลี่ยนแปลงพฤติกรรมของ Firefox องค์ประกอบที่ทำให้ไม่พอใจมากที่สุดคือลักษณะการทำงานของแท็บใหม่ที่มีแท็บขนาดใหญ่เกินไป คอนทราสต์สีซีด และแทบไม่มีการแยกระหว่างแท็บที่ใช้งานและไม่ได้ใช้งานกับแถบแถบพื้นหลังของแท็บ นี่คือสิ่งที่ยุ่งยาก เพราะไม่มีชุดกฎ CSS ที่ชัดเจนเพียงชุดเดียวที่คุณสามารถใช้ได้ ตัวเลือกบางส่วน:

• คำแนะนำ AskVG เกี่ยวกับวิธีคืนค่ารูปลักษณ์และ UI แบบคลาสสิก - คำแนะนำที่ง่ายที่สุดและเป็นพื้นฐานสำหรับงานของฉันที่นี่
• โครงการ GitHub เพื่อเปลี่ยน Proton เป็น Photon compact
• โครงการ GitHub เพื่อแก้ไขบางแง่มุมของ Proton
• โครงการ GitHub ที่จะใช้รูปลักษณ์แบบคลาสสิก (มีมากกว่า Proton)
• Firefox 89 Proton UI แบบโต้ตอบ - ให้คุณเปลี่ยนทุกสิ่ง + ดูตัวอย่างสด

เริ่มจากคู่มือ AskVG ใน userChrome.css ให้เพิ่มโค้ดต่อไปนี้:

.titlebar-color {
color:-moz-accent-color-foreground;
สีพื้นหลัง:-moz-accent-color;
}

.tab-background {
border-radius:0px 0px !important;
ขอบล่าง:0px !important;
}

.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
background- สี:ผสมสี (ใน srgb, currentColor 5%, โปร่งใส);
}

menupopup> เมนู, menupopup> menuitem {
padding-block:2px !important;
}

:รูท {
--arrowpanel-menuitem-padding:2px !important;
}

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

เส้นขอบแท็บพื้นหลัง

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

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

สิ่งนี้จะตั้งค่าแท็บพื้นหลังด้วยเส้นขอบทึบสีเทาอ่อน 1px ที่ตั้งค่าความโปร่งใส 50% คุณสามารถใช้สีหรือค่าความโปร่งใสใดก็ได้ที่คุณต้องการ นอกจากนี้ โปรดทราบว่าส่วนคำสั่งนี้คล้ายกันมากกับส่วนย่อยของโค้ด AskVG และคุณสามารถรวมกฎเพื่อสร้างส่วนโค้ดที่เล็กลงและกะทัดรัดมากขึ้นในไฟล์ CSS อย่างไรก็ตาม หากคุณไม่แน่ใจว่าต้องทำอย่างไร ให้เพิ่มบรรทัดพิเศษแยกต่างหาก ไม่มีข้อขัดแย้งเนื่องจากกฎเป็นชั้นๆ

เส้นขอบของแท็บเบื้องหน้า

ในทำนองเดียวกัน คุณสามารถปรับแต่งแท็บที่ใช้งานได้เช่นกัน เพื่อประโยชน์ของ OCD:

.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;
}

สีเน้นแท็บ

คุณสามารถทำให้แน่ใจว่าแท็บที่ใช้งานอยู่ถูกเน้นและมองเห็นได้ เพื่อแยกความแตกต่างจากแท็บอื่นๆ:

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

คุณสามารถเพิ่มบรรทัดพิเศษในคำจำกัดความด้านบนได้หากต้องการ ในตัวอย่างของฉัน ฉันตั้งค่าสีเน้นเสียงให้ตรงกับโทนสีเดสก์ท็อป รหัสสี #3daee9 เป็นสีเน้นเสียงที่ใช้โดยเดสก์ท็อปพลาสมาในตัวอย่างนี้โดยเฉพาะ คุณสามารถใช้สีเน้นเสียงของระบบ - ตามที่กำหนดไว้ในกฎ CSS ของแถบหัวเรื่อง:

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

ความสูงของแถบแท็บ

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

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

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

คุณสามารถแก้ไขค่าเป็นอะไรก็ได้ที่คุณต้องการ เช่น max-height:28px; หรือคล้ายกัน. ส่วนคำสั่งสัมผัสเป็นตัวเลือก เลือกความหนาแน่น (ความสูง) ที่เหมาะกับคุณ

สีของแท็บคอนเทนเนอร์

Firefox 91 ยังทำให้แท็บคอนเทนเนอร์ดูจืดชืดและแยกแยะได้ยากจากแท็บทั่วไป ดังนั้นฉันจึงตัดสินใจที่จะแนะนำสีเล็กน้อย [sic] มีตัวเลือกมากมาย และตอนนี้คุณควรรู้สึกสบายใจขึ้นเล็กน้อยกับการเปลี่ยนแปลงที่จำเป็น ฉันเลือกแท็บที่มีสีครบถ้วนซึ่งตรงกับสีของคอนเทนเนอร์ รวมถึงขอบที่สวยงาม ดังนั้นปีศาจ OCD ของฉันจึงไม่ต้องตื่น:

.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;
ขอบล่าง:var(--identity-tab-color) !important;
ความทึบ:0.8 !สำคัญ;
}

แต่ละแท็บใช้สีประจำตัวของตัวเอง (กำหนดโดย var clause) เส้นขอบด้านล่างตรงกับสีประจำตัว เพื่อให้แท็บกลมกลืนเข้ากับแถบแท็บอย่างสวยงาม และเส้นขอบด้านข้างก็เหมือนกับแท็บทั่วไป ฉันลองใช้ตัวเลือกต่างๆ ตัวอย่างเช่น ฉันลองใช้ตัวเลือกความทึบทั้ง 20% และ 80% เพื่อปัญญา:

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

เครื่องสำอางเสริม

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

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

บทสรุป

เราจะไปที่นั่น. วันนี้ ฉันสามารถแสดงวิธีเลิกทำการเปลี่ยนแปลง UI "สมัยใหม่" ที่ไร้ประโยชน์บางอย่างที่นำมาใช้ใน Firefox 91 ตราบใดที่ Firefox มีการแทนที่ CSS ก็ยังมีความหวัง ไม่ใช่เรื่องสนุกที่ต้องต่อสู้กับซอฟต์แวร์ของคุณ แต่อย่างน้อยคุณก็มีตัวเลือกในการกำจัดสิ่งที่ไอคิวต่ำและรักษาประสิทธิภาพและประสิทธิผลของคุณไว้ ด้วยกฎ CSS ที่ระบุไว้ข้างต้น Firefox 91 และที่สำคัญกว่านั้นคือ Firefox 91 ESR จะดูค่อนข้างดีและใช้งานได้ในอนาคตอันใกล้

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

ไชโย