Quá nhiều năm, gần đây thường xuyên hơn trước, tôi bị buộc phải thay đổi cách Firefox trông và hoạt động trên máy của mình. Các mặc định lành tính trước đây bị thay đổi, gần như tùy tiện, mang lại những phi hiệu quả chức năng và thẩm mỹ cho quy trình làm việc của tôi. Australis và Proton là ví dụ tốt của hiện tượng nói trên.
Gần đây, tôi đã xuất bản hai hướng dẫn khá chi tiết giải thích cách khắc phục giao diện xám-xám trong Firefox 91 trở lên. Trong cả hai trường hợp, tôi dựa vào kiến thức trước của mình về UI Firefox. Tôi nhận ra rằng đối với nhiều người, hướng dẫn có thể quá bí ẩn. Vì vậy tôi quyết định làm một hướng dẫn chung về cách tùy chỉnh UI Firefox, để nếu bạn muốn làm cùng bài tập, nó sẽ không quá khó theo dõi.
Cơ bản
UI Firefox - theo một cách - giống như một trang web. Nó được định nghĩa bởi một chuỗi các quy tắc phong cách thể hiện trong ngôn ngữ dựa trên Web gọi là CSS. Điều này rất giống bất kỳ trang web nào. Nói, dedoimedo.com, những gì bạn thấy và đọc là văn bản, nhưng các định nghĩa về trang web rộng bao nhiêu, màu font, khoảng cách đoạn văn, và tương tự, đều được đặt bằng tệp CSS. Tương tự, Firefox được style theo cách y hệt.
Bạn có thể ghi đè các quy tắc mặc định bằng cách tạo quy tắc riêng. Điều này được thực hiện bằng cách thêm một tệp mới vào profile Firefox của bạn. Bên trong tệp, bạn tạo (thêm) các quy tắc mới sẽ ảnh hưởng đến các yếu tố hình ảnh hiện có trong UI Firefox. Cách làm như sau:
- Mở Firefox, gõ about:support trong thanh địa chỉ.
- Trên trang mở ra, tìm dòng "Profile Folder" trong bảng hiển thị. Nhấn nút Open Folder. Điều này sẽ mở trình quản lý tệp (bất kể hệ điều hành bạn dùng), và trỏ đến vị trí profile Firefox. Lưu ý, profile Firefox là duy nhất cho mỗi người dùng, nên bạn cần làm thay đổi cho từng người dùng riêng biệt.
- Bây giờ bạn biết vị trí profile Firefox, hãy tạo bản sao lưu! Bạn thậm chí có thể làm bản sao thủ công đơn giản của toàn bộ thư mục và tất cả nội dung. Cách này, nếu có sự cố, bạn có thể khôi phục về baseline nguyên bản. Làm điều này trước bất kỳ thay đổi lớn nào.
- Trong thư mục profile Firefox, tạo thư mục (nếu chưa có) tên chrome (chữ thường).
- Điều hướng vào thư mục này, và ở đây tạo tệp tên userChrome.css (chú ý chữ thường/in hoa).
- Mở tệp này trong trình soạn thảo văn bản.
Mặc định, tệp sẽ rỗng và không chứa gì. Chúng ta sẽ điền nó với các chỉ thị CSS, sẽ ghi đè giao diện (và hành vi) của các yếu tố Firefox khác nhau. Tôi đã làm điều này nhiều lần, nên bạn có thể tham khảo một số hướng dẫn này làm baseline cho quy trình. Ví dụ:
- Plasma HD scaling & Firefox
- Firefox pinned tabs
- Firefox & hành vi thanh địa chỉ
Cơ sở thêm
Để thay đổi có hiệu lực, chúng ta cần thêm vài thứ:
- Gõ about:config trong thanh địa chỉ. Chấp nhận mọi cảnh báo để tiếp tục.
- Trong ô tìm kiếm trang about:config, tìm legacy. Tùy chọn sau nên hiện ra:
toolkit.legacyUserProfileCustomizations.stylesheets
Double-click để chuyển trạng thái từ false sang true. Điều này cho phép Firefox dùng tùy chỉnh của bạn và áp dụng cho trình duyệt. Không bật tùy chọn này, sẽ không có thay đổi UI.
- Trong tệp userChrome.css, hiện tại rỗng, thêm văn bản sau lên đầu:
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
Điều này cho phép bạn dùng bất kỳ yếu tố và khai báo legacy nào.
- Cuối cùng, BẠN CẦN một chút hiểu biết cơ bản về CSS và cách nó hoạt động. Không có điều này, bạn sẽ đấu tranh để hiểu các khái niệm được giải thích ở đây. Những thứ như class, identifier, toàn bộ khái niệm hệ thống cấp CSS và ưu tiên quy tắc, và những thứ giống vậy. Tôi sợ không thể có lối tắt thần kỳ nào.
Bố cục UI Firefox
Bây giờ chúng ta có nguyên liệu cốt lõi để làm việc. Tiếp theo, chúng ta cần làm quen với UI. Trong hướng dẫn của tôi (liên kết trên), tôi dùng những thứ như .tab-background, #searchbar, #navigator-toolbox, và nhiều hơn. Bạn có thể thắc mắc, tôi biết những gì này từ đâu, và tìm thông tin đó ở đâu?
Câu trả lời không đơn giản, tôi sợ...
Một, bạn cần tài liệu tham khảo. Hai, bạn có thể dùng Browser Toolbox tích hợp của Firefox, cho phép bạn chọn yếu tố, và xác định chúng. Đây là công việc khá vất vả. Đầu tiên, nhấn menu trình duyệt > More Tools > Web Developer Tools. Sau đó, khi menu này mở, nhấn vào phần tử ba chấm ở góc phải xa (menu khác) > Settings. Hoặc nhấn F1. Ở đây, bạn sẽ cần chọn hai tùy chọn cuối cùng trong cột phải: Enable browser chrome... và Enable remote debugging. Không trực quan lắm. Và đừng phàn nàn về việc dùng hamburger và menu ba chấm cho hai thứ khác nhau trong cùng UI.
Một tùy chọn khác chỉ là khóa học nhanh, bẩn, từ tôi, tập trung vào chỉ những yếu tố UI quan trọng nhất. Đó là lý do tôi làm ảnh chụp màn hình có chú thích, chỉ ra các yếu tố tôi thay đổi trong hướng dẫn Proton.
Đây là bảy yếu tố quan trọng (vĩ đại):
- #navigator-toolbox - Đây là khung chứa điều hướng trang + thanh tab.
- #nav-bar - Đây chỉ là nửa dưới của navigator-toolbox (phần dưới).
- .tabbrowser-tab[selected="true"] - Đây là phần tử tab đang hoạt động. Chú ý trạng thái (selected, true).
- .tabbrowser-tab:not([selected="true"]) - Đây là tab không hoạt động.
- .tabbrowser-tab[usercontextid] - Đây là container tab (nếu bạn dùng add-on containers). Lưu ý cho mục 3-5, bạn cũng nên biết yếu tố sau - một class gọi là .tab-background, chỉ định vùng nền của tab(s). Chúng ta sẽ dùng nó kết hợp với khai báo tab-browser-tab* ở trên ngay sau.
- #urlbar - Đây là thanh địa chỉ. Lưu ý cũng có #urlbar-background, một identifier tương tự phần tử tab background chúng ta giới thiệu trước, và phục vụ mục đích tương tự. Một lần nữa, chúng ta sẽ thấy ví dụ cần thiết rất sớm.
- #searchbar - Đây là hộp tìm kiếm, nếu bạn dùng nó.
Điều phức tạp hơn một chút, tất nhiên, nhưng bây giờ, bạn có thể bắt đầu hiểu chúng ta đi đâu. Tôi nghĩ giải pháp tốt nhất là đơn giản demo với một vài ví dụ, để bạn hiểu rõ.
Một số ví dụ cơ bản
Mã dưới đây, khi thêm vào userChrome.css sẽ làm:
- Đối với tab đang hoạt động, nó sẽ đặt viền cho mảnh nền vuông lớn của tab.
- Viền trên dày 3px, trong khi trái và phải chỉ 1px.
- Chúng cũng có màu khác nhau.
- Viền bên có 30% trong suốt.
.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;
}
Mã dưới đây, khi thêm vào userChrome.css sẽ làm:
- Đối với tab không hoạt động, nó sẽ cấu hình nền tab (mảnh canvas vuông lớn của tab) như sau: đặt màu nền thực tế thành hỗn hợp của màu hiện tại (màu nhấn hệ thống) và lớp trong suốt, dùng không gian màu sRGB, và với màu nhấn hệ thống chỉ 5% opacity. Cơ bản, tab sẽ gần như trong suốt và khớp với màu gốc của trình duyệt.
- Tạo viền mỏng 1px (đen) với 30% opacity. Mệnh đề !important có nghĩa là quy tắc của bạn sẽ ưu tiên hơn bất kỳ quy tắc nào khác áp dụng cho cùng yếu tố.
.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;
}
Mã dưới đây, khi thêm vào userChrome.css sẽ làm:
- Nó sẽ thụt lề nhẹ (đẩy vào) các tab bằng cách thêm margin 2px bên trái. Nói cách khác, nó tạo khoảng cách nhỏ thêm giữa tab và mép cửa sổ trình duyệt.
#navigator-toolbox {
margin-left: 2px !important;
}
Sau đó, còn nhiều hơn...
Mã dưới đây, khi thêm vào userChrome.css sẽ làm:
- Nó sẽ đặt nền urlbar thành trắng thuần túy, với viền mỏng 30% opacity khớp với màu nhấn của tab đang hoạt động (được chỉ định trước). Bạn có toàn bộ tự do nghệ thuật ở đây.
#urlbar-background {
background-color: white !important;
border: 1px solid rgba(10, 132, 255, 0.3) !important;
}
Tất nhiên, còn nhiều hơn thế! Nhưng các ví dụ này nên giúp bạn bắt đầu, tôi tin.
Kết luận
Đó là khá phức tạp, tôi thừa nhận. Tôi ước có cách đơn giản hơn để chỉnh sửa UI Firefox, nhưng tiếc là nếu bạn không hài lòng với giao diện mặc định của Firefox, và muốn thay đổi chúng vượt quá tùy chỉnh cơ bản, bạn sẽ cần kiến thức CSS, tệp CSS, và một đống quy tắc. Hướng dẫn này phác thảo cách bạn có thể đạt được điều đó, không đi sâu vào mọi chi tiết cụ thể của giao diện trình duyệt.
Tôi hoàn toàn nhận thức đây không phải nhiệm vụ tầm thường. CSS trông "dễ" đối với những ai biết dùng, nhưng nó cũng tạo sự chán nản, chính đáng, với người bình thường tìm giải pháp công thái học đơn giản. Tôi tin cách đúng là thực sự đầu tư một chút thời gian và thành thạo ngôn ngữ này, vì nó cho bạn tự do làm điều chỉnh cần thiết cho UI, mà không phụ thuộc vào quyết định tùy tiện ở đâu đó. Tôi ước Mozilla làm lựa chọn tốt hơn, nhưng hey, ngay cả với tất cả rắc rối này chồng vào Firefox, nó vẫn là trình duyệt tốt nhất, nó cho phép bạn thay đổi giao diện, và nó là trình duyệt duy nhất bạn nên dùng trên desktop và mobile. Nó là thứ duy nhất làm Internet vẫn còn勉强 usable, và bạn sẽ không thích tương lai không có Firefox. Vậy hãy lấy CSS, loại bỏ phiền toái, và tiếp tục dùng Firefox. Chúng ta xong ở đây.
Chúc vui.