Trong những năm qua, gần đây thường xuyên hơn trước đây, tôi buộc phải thay đổi giao diện và hoạt động của Firefox trên máy của mình. Các giá trị mặc định lành mạnh trước đây đã bị thay đổi, gần như tùy ý, dẫn đến sự kém hiệu quả về mặt chức năng và thẩm mỹ cho quy trình làm việc của tôi. Australis và Proton là những ví dụ điển hình 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 hoàn tác giao diện màu xám trên nền xám trong Firefox 91 trở đi. Trong cả hai trường hợp, tôi đều dựa vào kiến thức trước đây của mình về giao diện người dùng Firefox. Tôi nhận ra rằng đối với nhiều người, hướng dẫn có thể quá khó hiểu. Vì vậy, tôi quyết định tạo một hướng dẫn chung về cách tùy chỉnh giao diện người dùng Firefox, để nếu bạn muốn thực hiện bài tập tương tự, sẽ không quá khó để làm theo.
Khái niệm cơ bản
Giao diện người dùng Firefox - theo một cách nào đó - giống như một trang Web. Nó được xác định bởi một loạt các quy tắc phong cách thể hiện trong một ngôn ngữ dựa trên Web có tên là CSS. Điều này giống như bất kỳ trang web nào. Giả sử, dedoimedo.com, những gì bạn thấy và đọc là văn bản, nhưng các định nghĩa về độ rộng của trang, màu của phông chữ, khoảng cách của các đoạn văn, v.v., đều được thiết lập bằng tệp CSS. Tương tự như vậy, Firefox cũng được tạo kiểu theo cùng một cách.
Bạn có thể ghi đè các quy tắc mặc định bằng cách tạo quy tắc của riêng mình. Điều này được thực hiện bằng cách thêm một tệp mới vào hồ sơ 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 thành phần trực quan hiện có trong giao diện người dùng Firefox. Đây là cách nó được thực hiện:
- Mở Firefox, nhập about:support vào thanh địa chỉ.
- Trên trang mở ra, tìm dòng "Thư mục hồ sơ" trong bảng được hiển thị. Nhấp vào nút Mở thư mục. Thao tác này sẽ khởi chạy trình duyệt tệp của bạn (bất kể bạn đang sử dụng hệ điều hành nào) và trỏ đến vị trí hồ sơ Firefox của bạn. Xin lưu ý rằng các cấu hình Firefox là duy nhất cho mọi người dùng, vì vậy bạn cần thực hiện các thay đổi cho từng người dùng một cách riêng biệt.
- Bây giờ bạn đã biết vị trí hồ sơ Firefox của mình, hãy tạo một bản sao lưu! Bạn thậm chí có thể thực hiện sao chép thủ công toàn bộ thư mục và tất cả nội dung của nó. Bằng cách này, nếu có sự cố xảy ra, bạn có thể khôi phục mọi thứ về đường cơ sở vani nguyên sơ của mình. Làm điều này trước khi có bất kỳ thay đổi lớn nào.
- Trong thư mục hồ sơ Firefox, tạo một thư mục (nếu không tồn tại) có tên chrome (chữ thường).
- Điều hướng vào thư mục này và tại đây, hãy tạo một tệp có tên userChrome.css (chú ý chữ thường/chữ hoa).
- Mở tệp này trong trình soạn thảo văn bản.
Theo mặc định, tệp sẽ trống và không chứa gì. Bây giờ chúng ta sẽ đưa vào đó các chỉ thị CSS, sẽ ghi đè giao diện (và hành vi) của các phần tử Firefox khác nhau. Tôi đã làm điều này nhiều lần trước đây, vì vậy bạn có thể tham khảo một số hướng dẫn này làm cơ sở cho quy trình làm việc. Ví dụ:
- Chia tỷ lệ Plasma HD &Firefox
- Các tab đã ghim của Firefox
- Hành vi của Firefox &thanh địa chỉ
Nền tảng bổ sung
Để các thay đổi có hiệu quả, chúng tôi cần thêm một số điều sau:
- Nhập about:config vào thanh địa chỉ. Chấp nhận mọi cảnh báo để tiếp tục.
- Trong hộp tìm kiếm trên trang about:config, tìm kiếm kế thừa. Tùy chọn sau sẽ hiển thị:
toolkit.legacyUserProfileCustomizations.stylesheets
Nhấp đúp vào nó để chuyển trạng thái của nó từ false thành true. Điều này sẽ cho phép Firefox sử dụng các sửa đổi tùy chỉnh của bạn và áp dụng chúng cho trình duyệt. Nếu không bật tùy chọn này, sẽ không có thay đổi về giao diện người dùng.
- Trong tệp userChrome.css hiện đang trống, hãy thêm văn bản sau vào đầu:
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
Điều này sẽ cho phép bạn sử dụng bất kỳ thành phần và khai báo kế thừa nào.
- Cuối cùng, bạn KHÔNG CẦN hiểu biết cơ bản về CSS và cách thức hoạt động của nó. Nếu không có điều này, bạn sẽ gặp khó khăn trong việc giải thích các khái niệm ở đây. Những thứ như lớp, mã định danh, toàn bộ khái niệm về phân cấp CSS và mức độ ưu tiên của quy tắc, v.v. Tôi e rằng không thể có bất kỳ lối tắt thần kỳ nào.
Bố cục giao diện người dùng Firefox
Bây giờ chúng tôi có các thành phần cốt lõi để làm cho mọi thứ hoạt động. Tiếp theo, chúng ta cần làm quen với giao diện người dùng. Trong các hướng dẫn của tôi (được liên kết ở trên), tôi đã sử dụng những thứ như.tab-background, #searchbar, #navigator-toolbox, v.v. Bạn hoàn toàn có thể thắc mắc, làm cách nào để biết những thông tin này là gì và tôi có thể tìm thông tin đó ở đâu?
Câu trả lời không đơn giản như vậy, tôi sợ ...
Một, bạn cần hướng dẫn tham khảo. Thứ hai, bạn có thể sử dụng Hộp công cụ trình duyệt tích hợp sẵn của Firefox, cho phép bạn chọn các thành phần và xác định chúng. Đây là công việc hơi khó khăn, tâm trí. Đầu tiên, nhấp vào menu của trình duyệt> Công cụ khác> Công cụ dành cho nhà phát triển web. Then, when this menu opens, click on the three-dot element to the far right (another menu)> Settings. Or press F1. Here, you will need to select the last two options in the right column:Enable browser chrome ... and Enable remote debugging. Not very intuitive. And let's not rant about the use of hamburger and three-dot menu for two different things in the same UI.
Another option is just a quick, dirty crash course from me, with focus on just the most important UI elements. Which is why I made this annotated screenshot, pointing out the elements I changed in my Proton guides.
Here are the (magnificent) seven important elements:
- #navigator-toolbox - This is the frame containing the page navigation + tab bar.
- #nav-bar - This is only the lower half of the navigator-toolbox (the bottom section).
- .tabbrowser-tab[selected="true"] - This is the active tab element. Notice the state (selected, true).
- .tabbrowser-tab:not([selected="true"]) - This is an inactive tab.
- .tabbrowser-tab[usercontextid] - This is a container tab (if you use the containers add-on). Please note that for items 3-5, you should also be aware of the following element - a class called .tab-background, which specifies the background area of the tab(s). We will use it in conjunction with the tab-browser-tab* declarations above shortly.
- #urlbar - This is the address bar. Note that there's also #urlbar-background, an identifier that is similar to the tab background element we introduced earlier, and which serves a similar purpose. Once again, we will see the necessary examples very soon.
- #searchbar - This is the search box, if you use it.
Things are a bit more complicated than that, of course, but now, you can begin to understand where we're going with this. I think the best solution is to simply demonstrate with a handful of examples, so you understand what gives.
Some basic examples
The code below, when added to userChrome.css will do the following:
- For the active tab, it will set the borders for the tab's large square background piece.
- The top border will be 3px thick, while the left and the right will be only 1px thick.
- They also have different colors.
- The side borders have 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;
}
The code below, when added to userChrome.css will do the following:
- For inactive tabs, it will configure the tab background (the large square canvas of the tab) in the following manner:set the actual background color to a mix of current color (system accent color) and transparency layer, using the sRGB color space, and with the system accent color set to just 5% opacity. Basically, the tabs will be pretty much transparent and match your browser's native color.
- Create a very thin 1px (black) border with 30% opacity. The !important clause means your rule will take precedence over any other rule that applies to the same element.
.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;
}
The code below, when added to userChrome.css will do the following:
- It will slightly indent (push inwards) the tabs by adding a 2px margin on the left side. In other words, it will create a tiny bit of extra distance between the tabs and the browser's window edge.
#navigator-toolbox {
margin-left:2px !important;
}
Then, there's more ...
The code below, when added to userChrome.css will do the following:
- It will set the background of the urlbar to pure white, with a thin 30%-opaque border than matches the accent color of the active tab (specified earlier). You have full artistic freedom here.
#urlbar-background {
background-color:white !important;
border:1px solid rgba(10, 132, 255, 0.3) !important;
}
Of course, there's way more! But these examples should get you going, I believe.
Kết luận
That was fairly complicated, I admit. I wish there was a simpler way to edit the Firefox UI, but unfortunately, if you're not happy with Firefox's default looks, and you want to alter them beyond the basic customization available, you will need CSS knowledge, CSS files, and a bunch of rules. This guide outlines how you can achieve that, without going into every specific detail of the browser's interface.
I am fully aware that this isn't a trivial task. CSS looks "easy" to those who know how to use it, but it also creates aversion, justifiably, with ordinary people seeking simple ergonomic solutions. I believe the right way is to actually invest a little bit of time and master this lingo, as it gives you the freedom to make the necessary adjustments to the UI, without relying on arbitrary decisions out there somewhere. I wish Mozilla was making better choices, but hey, even with all this nonsense piled into Firefox, it's still the best browser, it allows you to change the interface, and it's the one browser you should use on your desktop and mobile. It's the only thing that makes the Internet still barely usable, and you will not like the future without Firefox. So grab the CSS, get rid of the annoyances, and continue using Firefox. We're done here.
Chúc mừng.