เชี่ยวชาญการปรับแต่ง UI ของ Firefox: คู่มือครบวงจรขั้นตอนต่อขั้นตอน

หลายปีมา โดยเฉพาะ gầnๆ นี้ บังคับต้องเปลี่ยน Firefox ลักษณะและพฤติกรรมบนเครื่องของผม Defaults ที่สมเหตุสมผลเดิม ถูกเปลี่ยนเกือบแบบ Arbitrary นำมาปัญหา Functional และ Aesthetic ให้ Workflow Australis และ Proton เป็นตัวอย่างดี

近期 ผมเผยแพร่คู่มือ 2 เรื่อง รายละเอียดวิธีแก้ลุค Gray-on-gray ใน Firefox 91+ ทั้งคู่อาศัยความรู้ Firefox UI ก่อนหน้า ผมตระหนักว่าสำหรับหลายคน คำแนะนำอาจ Cryptic เกินไป จึงตัดสินใจทำ Generic Guide การปรับแต่ง Firefox UI ให้ถ้าอยากทำ Exercise เดียวกัน จะไม่ยากเกินไป

พื้นฐาน

Firefox UI - ในทางหนึ่ง - เหมือน Web Page ถูกกำหนดโดย Stylistic Rules ที่ซ้อนกัน ในภาษา Web-based ที่เรียกว่า CSS คล้ายเว็บไซต์ทั่วไป dedoimedo.com สิ่งที่เห็นอ่านคือ Text แต่ Definition: ความกว้างหน้า สีฟอนต์ Spacing ย่อหน้า ตั้งค่าด้วย CSS Files Firefox สไตล์ด้วยวิธีเดียวกัน

Override Default Rules โดยสร้าง Rules เอง ทำได้โดยเพิ่ม File ใหม่ใน Firefox Profile ภายใน File สร้าง Rules ใหม่ที่ส่งผลต่อ Visual Elements ใน Firefox UI วิธีทำ:

• เปิด Firefox พิมพ์ about:support ใน Address Bar
• หน้าที่เปิด หา "Profile Folder" ในตาราง กด Open Folder จะเปิด File Explorer (OS ใดก็ตาม) ชี้ไปที่ Firefox Profile โปรดทราบ Profile เฉพาะแต่ละ User ต้องทำแยก User

Backup Profile! Copy โฟลเดอร์ทั้งหมด Manuel หากผิดพลาด Restore ได้ Baseline

• ใน Firefox Profile Folder สร้างโฟลเดอร์ชื่อ chrome (lowercase) หากยังไม่มี
• เข้าโฟลเดอร์นี้ สร้างไฟล์ชื่อ userChrome.css (สังเกต Lower/Uppercase)
• เปิดไฟล์ใน Text Editor

Default ไฟล์ว่างเปล่า เราจะใส่ CSS Directives ที่ Override ลุค (และพฤติกรรม) ของ Firefox Elements ผมทำหลายครั้ง อ้างอิง Guide บางส่วนเป็น Baseline Workflow เช่น:

• Plasma HD scaling & Firefox
• Firefox pinned tabs
• Firefox & address bar behavior

Groundwork เพิ่มเติม

เพื่อให้การเปลี่ยนแปลงมีผล ต้องการอีก:

• พิมพ์ about:config ใน Address Bar ยอมรับ Warning
• ใน Search Box หา legacy ควรเจอ Preference:

toolkit.legacyUserProfileCustomizations.stylesheets

Double-click Toggle False เป็น True 允许 Firefox ใช้ Custom Modifications นำไปใช้กับ Browser โดยไม่มี Preference นี้ ไม่มีการเปลี่ยนแปลง UI

• ใน userChrome.css ที่ว่าง ใส่ Text นี้บนสุด:

@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

อนุญาตให้ใช้ Legacy Elements และ Declarations

• สุดท้าย ต้องมี Basic Understanding CSS และการทำงาน ไม่มี จะลำบากเข้าใจ Concepts ที่นี่ Things like Classes, Identifiers, CSS Hierarchy, Precedence of Rules ไม่มี Magical Shortcuts

Firefox UI Layout

มี Core Ingredients แล้ว ต่อไป ต้องคุ้นเคย UI ใน Tutorials (ลิงก์ข้างต้น) ใช้ .tab-background, #searchbar, #navigator-toolbox และอื่นๆ คุณอาจสงสัย: รู้ได้อย่างไร หาที่ไหน?

คำตอบไม่ Simple...

1. ต้องการ Reference Guides 2. ใช้ Browser Toolbox Built-in ของ Firefox ให้ Pick Elements และ Identify พวกเขา Hard work 一點: กด Menu > More Tools > Web Developer Tools เมนูเปิด กด Three-dot ไปขวาสุด (อีกเมนู) > Settings หรือกด F1 ตรงนี้ ต้องเลือก 2 ตัวเลือกสุดท้าย Right Column: Enable browser chrome... และ Enable remote debugging ไม่ Intuitive และอย่าพูดถึง Hamburger และ Three-dot Menu สำหรับ 2 เรื่องต่างกันใน UI เดียวกัน

Option อีกอย่าง: Quick Dirty Crash Course จากผม โฟกัสแค่ UI Elements สำคัญที่สุด นี่คือ Screenshot Annotated ชี้ Elements ที่ผมเปลี่ยนใน Proton Guides

7 Elements สำคัญ:

1. #navigator-toolbox - Frame ที่บรรจุ Page Navigation + Tab Bar
2. #nav-bar - ส่วนล่างของ navigator-toolbox (Bottom Section)
3. .tabbrowser-tab[selected="true"] - Active Tab Element สังเกต State (selected, true)
4. .tabbrowser-tab:not([selected="true"]) - Inactive Tab
5. .tabbrowser-tab[usercontextid] - Container Tab (ถ้าใช้ Containers Add-on) สำหรับ Item 3-5 ควรทราบ Element ชื่อ .tab-background ระบุพื้นที่ Background ของ Tab(s) จะใช้ร่วมกับ tab-browser-tab* declarations
6. #urlbar - Address Bar มี #urlbar-background Identifier คล้าย Tab Background ใช้ประโยชน์คล้ายกัน จะเห็นตัวอย่างเร็วๆ นี้
7. #searchbar - Search Box (ถ้าใช้)

ซับซ้อนกว่านี้ แต่มาเริ่มเข้าใจทิศทาง ผมคิด Demo ด้วย Handful of Examples จะช่วยเข้าใจ

ตัวอย่างพื้นฐาน

Code ด้านล่าง เพิ่มใน userChrome.css จะทำ:

• Active Tab: ตั้ง Border สำหรับ Tab Background ใหญ่สี่เหลี่ยม
• Top Border: 3px Thick, Left/Right: 1px
• สีต่างกัน
• Side Borders: 30% Transparency

.tabbrowser-tab[selected="true"] .tab-background {
  border-left: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-top: 3px solid #0a84ff !important;
}

Code ด้านล่าง สำหรับ Inactive Tabs:

• ตั้งค่า Tab Background: Background Color ผสม Current Color (System Accent) และ Transparency Layer ใช้ sRGB Color Space Accent Color 5% Opacity Tab โปร่งใส สี Native ของ Browser
• Border 1px (ดำ) 30% Opacity !important = Rule นี้ Precedence กว่าอื่นๆ

.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
  background-color: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

Code ด้านล่าง:

• Indent (ดันเข้า) Tabs เล็กน้อย เพิ่ม Margin-left 2px สร้างระยะห่างเล็กน้อยระหว่าง Tabs และ Edge ของ Browser Window

#navigator-toolbox {
  margin-left: 2px !important;
}

แล้วก็ยังมีอีก...

Code ด้านล่าง:

• ตั้ง Background ของ URLbar เป็น White เหลือง Border 1px 30% Opacity ตรงกับ Accent Color ของ Active Tab (ที่ตั้งไว้ก่อน) เสรีภาพศิลปะเต็มที่

#urlbar-background {
  background-color: white !important;
  border: 1px solid rgba(10, 132, 255, 0.3) !important;
}

當然還有更多！但這些例子應該能讓你開始，我相信。

สรุป

ค่อนข้างซับซ้อน ยอมรับ ผมหวังว่าจะมีวิธีง่ายกว่านี้สำหรับ Edit Firefox UI แต่不幸的是 如果你不滿意 Firefox 的 Default Looks 並想超過 Basic Customization 你需要 CSS Knowledge, CSS Files 和一堆 Rules 這本指南概述了如何實現這一點，而不必深入瀏覽器介面的每一個具體細節。

ผมเข้าใจว่านี่ไม่ใช่งานง่าย CSS ดู "ง่าย" สำหรับคนรู้ แต่ก็สร้าง Aversion กับคนทั่วไปที่หา Ergonomic Solutions 簡單 ผมเชื่อวิธีที่ถูกต้องคือ Invest เวลานิดหน่อย Master ภาษานี้ ให้เสรีภาพปรับ UI ที่จำเป็น โดยไม่พึ่ง Arbitrary Decisions ที่นั่น ผมหวัง Mozilla ทำ Choice ดีขึ้น แต่ hey, แม้ Nonsense เยอะใน Firefox มันยังเป็น Browser ที่ดีที่สุด 允許你改變介面 是 Browser 唯一應該用บน Desktop และ Mobile มันคือสิ่งเดียวที่ทำให้ Internet ยังใช้ได้อยู่ และคุณจะไม่ชอบอนาคตโดยไม่มี Firefox ด้วย CSS กำจัด Annoyances 繼續用 Firefox 結束在這裡

Cheers.