Firefox 79 mang lại một thay đổi vô nghĩa - thanh địa chỉ (urlbar) giờ loại "zoom in" khi click, che một phần UI xung quanh, bao gồm các shortcut bạn có thể ghim đó. Cái thứ này cảm giác hoàn toàn mobile, và hoàn toàn sai trên desktop. Cho thời điểm, như tôi đã chỉ trong bài trên, thứ vô lý này có thể revert (khôi phục) qua một số cài đặt about:config.
Nhưng trong Firefox 77 (nightly), các tùy chọn này biến mất, nên chúng ta cần thứ khác. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách lấy lại giao diện thanh địa chỉ cũ, để bạn không bị ảnh hưởng bởi thay đổi low-IQ khi lúc tồi đến. Vừa khi tôi nghĩ Firefox đang trỗi dậy trên trò chơi mobile toss-me-a-chromosome, kiểu thứ này xuất hiện. Theo chân tôi.
Chúng ta muốn loại bỏ thanh địa chỉ zoom-in phiền toái này.
Chúng ta sẽ làm gì?
Chúng ta sẽ tạo custom CSS style để làm giao diện Firefox trông như trước. Về bản chất, Firefox UI có thể được style, giống như bất kỳ trang web nào. Điều này được làm bằng cách thêm khai báo CSS vào tệp userChrome.css trong thư mục hồ sơ Firefox.
Bây giờ, tôi không phải pioneer (người tiên phong). Nhu cầu quan trọng này đã được trả lời trên trang hỗ trợ Mozilla. Но snippet mã đó cần một chút điều chỉnh, cộng tôi muốn làm nó extra đơn giản và rõ ràng những gì người dùng cần làm để lấy lại giao diện cũ.
Kích hoạt userChrome.css
Đầu tiên, chúng ta cần "báo" Firefox tôn trọng thay đổi CSS do người dùng tạo:
- Trong Firefox 68 và dưới, bạn không cần làm gì.
- Trong Firefox 69 và lên, vào about:config, tìm cài đặt sau và đổi từ false sang true:
toolkit.legacyUserProfileCustomizations.stylesheets
Sau đó, đến thư mục hồ sơ Firefox. Trong Windows, thường:
C:\Users\"username"\AppData\Roaming\Mozilla\Firefox\"profile"
Trong Linux, thường:
/home/"user"/.mozilla/firefox/"profile"
Nếu bạn cần ví dụ, xem bài Plasma & HD scaling hoặc Firefox pinned tabs guide của tôi.
- Trong thư mục này, tạo thư mục tên chrome (chữ thường).
- Bên trong thư mục chrome, tạo tệp văn bản rỗng tên userChrome.css (chú ý chữ hoa/thường).
Thêm style thanh địa chỉ
Bước tiếp theo là thêm nội dung vào tệp userChrome.css. Sao chép văn bản sau - này đến trực tiếp từ support thread trên. Lưu ý rằng điều này có thể không đủ, nhưng tôi muốn chỉ cho bạn mọi thứ từng bước, để bạn có thêm tự tin thay đổi tệp nếu cần.
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height: 28px !important;
--urlbar-toolbar-height: 30px !important;
width: 100% !important;
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container,
#urlbar-input-container {
height: var(--urlbar-height) !important;
width: 100% !important;
padding-block: unset !important;
padding-inline: unset !important;
transition: none !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
animation: none !important;
}
Lưu tệp, khởi động lại Firefox.
Kết quả, chỉ hơi off
Test của tôi cho thấy đoạn mã trên cho layout hơi kém lý tưởng. Như bạn thấy, thanh địa chỉ ngồi "quá cao" - nó không vertically centered (căn giữa dọc). Lề trên và dưới sai.
CSS, thay đổi thứ hai
Điều chúng ta cần làm là tinh chỉnh nhẹ giá trị mặc định dùng trong CSS chúng ta thêm. Cụ thể, chúng ta cần tweak urlbar height và toolbar height. Lề trên sau đó tính là một nửa difference (chênh lệch) giữa hai giá trị này. Bạn cũng có thể thủ công thay đổi giá trị top.
#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height: 28px !important;
--urlbar-toolbar-height: 30px !important;
Tôi làm một ít trial and error testing, và với tôi toolbar height 38px làm việc:
#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height: 28px !important;
--urlbar-toolbar-height: 38px !important;
Và lại, top margin, bạn có thể đổi từ tính toán mặc định thành bất cứ gì bạn thích:
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
Ví dụ, có thể là:
top: 5px !important;
Việc dùng !important override là, ế, important - để Firefox dùng nó và không dùng set mặc định.
Giao diện cuối cùng, như nó nên là
Và chúng ta có sự san sẻ, logic và trí tuệ trở lại:
Kết luận
Và xong. Việc hoàn thành. Qua nhiều năm, tôi bị buộc dùng custom CSS càng ngày càng nhiều để có hành vi trình duyệt bình thường. Đây là xu hướng báo động. Nhưng tôi đoán nó là điều không thể tránh khỏi, khi càng ngày càng nhiều công ty sản xuất sản phẩm vô dụng cho đám đông sub-100IQ ngày càng lớn. Và không có lý do chức năng tốt nào. Chỉ thay đổi vì thay đổi. Và thường là thứ pseudo-modern (giả hiện đại) phá hủy giải pháp hoàn toàn chấp nhận được và được chứng minh khoa học và test.
Tôi hy vọng bạn thấy bài viết nhỏ này có giá trị. Bạn có thể dùng ngay trong Firefox 75, hoặc đợi cho đến Firefox 77 ra mắt, rồi làm thay đổi - và giữa thời gian dùng config override. Vẫn, dù có tất cả vô lý này, ít nhất có cách cho techies lấy lại layout hiệu quả, bình thường họ cần. Nhưng ai biết tương lai giữ gì. Firefox, xin đừng như những cái còn lại. Vâng, bạn đã có nó. Mission accomplished (nhiệm vụ hoàn thành). Nếu bạn muốn cảm ơn tôi, mua cho tôi quà sang trọng và gửi lời khen. Màn xuống.
Chúc vui.