Як зламати і персоналізувати ваш Firefox Інструменти для розробників

Теми є особистою річчю для нас розробників, це не просто прикраса редакторів або інструментів. Мова йде про створення екрану, на якому ми будемо дивитися (не сильно мигаючи), більш стерпним, щоб працювати протягом декількох годин і продуктивно. Firefox має дві теми для інструментів розробника: темний і легкий. Обидва вони великі, але параметри все ще обмежені без їхнього персоналізації.

Тепер Firefox використовує комбінацію XUL і CSS для свого інтерфейсу, що означає, що більшу частину його зовнішнього вигляду можна змінити, використовуючи лише CSS. Mozilla надає можливість користувачам налаштовувати вигляд своїх продуктів за допомогою файлу CSS під назвою "userChrome.css". Ти можеш додайте власні правила стилю до цього файлу CSS і це буде відображено на продуктах Mozilla.

У цій публікації ми будемо використовувати той самий файл CSS, щоб персоналізувати інструменти розробника в Firefox.

По-перше, нам потрібно знайти цей файл CSS, або створити його, і покласти його в потрібне місце. Одним швидким способом знайти папку, в якій буде розміщено "userChrome.css", є перехід about: підтримка у браузері та натискання кнопки "Показати папку" поруч із міткою "Папка профілю". Відкриється поточна тека профілю Firefox.

У папці профілю відображатиметься папка "chrome". Якщо його немає, створіть та створіть в ній "userChrome.css". Тепер, коли налаштування файлу зроблено, давайте перейдемо до коду.

: root.theme-dark --тема-тіло-фон: # 050607! важливо; --тема-бічна панель-фон: # 101416! важливо; - temme-tab-toolbar-background: # 161A1E! важливо; --theme-toolbar-background: # 282E35! важливо; - фон-тема-вибір: # 478DAD! важливий; - тематичний колір тіла: # D6D6D6! --theme-body-color-alt: # D6D6D6! --theme-content-color1: # D6D6D6! --theme-content-color2: # D6D6D6! --theme-content-color3: # D6D6D6! - тема-підсвітка-зелена: # 8BF9A6! - тема-підсвітка-блакитна: # 00F9FF! - тема-підсвітка-блакитний: білий! --theme-highlight-lightorange: # FF5A2C! - тема-підсвітка-оранжева: жовта! - тема-виділення-червона: # FF1247! --theme-highlight-pink: # F02898! 

Що ви бачите вище, це код, який я додав до файлу "userChrome.css", щоб змінити вигляд інструментів розробників з цього

до цього:

Я тільки хотів поліпшити контраст трохи більше з більш темним фоном і яскравішим текстом в темній темі (теж не дуже добре підходять кольорові схеми), тому я залишився з деякими основними кольорами, які зазвичай використовуються в темних темах. Якщо ви краще використовуєте кольори, експериментуйте самостійно за допомогою кольорів, які вважаєте за потрібне, щоб знайти краще відповідність темі, яку ви використовуєте.

Код - це лише список кольорових змінних CSS, які використовуються для фарбування різних частин інтерфейсу DevTools. Ми знайшли код у файлі з назвою "variables.css" у стислому файлі “omni.ja”:

У Windows файл знаходиться за адресою:

F: /firefox/browser/omni.ja. Замінити F: з дисководом, на якому встановлено Firefox.

У OSX файл знаходиться за адресою:

~ / Програми / Firefox.app / Зміст / Ресурси / browser / omni.ja.

Це стислі файли Java. У Windows можна перейменувати .ja розширення до .zip і використовуйте утиліту витягання Windows Explorer, щоб вивантажити файли з неї. У OSX перейдіть до Terminal і запустіть unzip omni.ja. Майте на увазі, щоб зробити копію файлу в іншому каталозі, перш ніж це зробити.

Після вилучення omni.ja ви можете знайти файл за адресою /chrome/devtools/skin/variables.css; так, шкіра Firefox DevTools знаходиться під назвою папки хром. В variables.css, Ви побачите купу змінних кольорів, що використовуються як для світлих, так і для темних тем наступним чином

 : root.theme-light - тема-тіло-фон: #fcfcfc; --тема-бічна панель-фон: # f7f7f7; --тема-контраст-фон: # e6b064; - фон-тема-табуляція-фон: #ebeced; - temme-toolbar-background: # f0f1f2; - фон вибору теми: # 4c9ed9; - тема-вибір-фон-напівпрозорий: rgba (76, 158, 217, .23); - колір тематичного вибору: # f5f7fa; - колір-розгалужувач-колір: #aaaaaa; --тема-коментар: # 757873; - тема-колір тіла: # 18191a; --тема-тіло-колір-альт: # 585959; - тема-зміст-color1: # 292e33; - тему-зміст-color2: # 8fa1b2; - тема-зміст-колір3: # 667380; --тема-підсвітка-зелений: # 2cbb0f; --тема-підсвітка-блакитна: # 0088cc; - тема-підсвітка-блакитний: # 0072ab; --theme-highlight-purple: # 5b5fff; --theme-highlight-lightorange: # d97e00; - тема-підсвітка-оранжева: # f13c00; - тема-виділення-червона: # ed2655; --theme-highlight-pink: # b82ee5; / * Кольори, що використовуються в графіках, наприклад, інструменти продуктивності. Подібні кольори до хронології Chrome. * / - тематичні графіки-зелені: # 85d175; - тематичні графіки-сині: # 83b7f6; - тематичні графіки-блакитні: # 0072ab; - тематичні графіки-фіолетові: # b693eb; - тематичні графіки-жовті: # efc052; - тематичні графіки-помаранчеві: # d97e00; - тематичні графіки-червоні: # e57180; - тематичні графіки-сірі: #cccccc; - тематичні графіки - повно-червоні: # f00; - тематичні графіки - сині: # 00f; : root.theme-dark - тема-тіло-фон: # 14171a; -тема-бічна панель-фон: # 181d20; --тема-контраст-фон: # b28025; - фон-тема-табуляція-фон: # 252c33; - тема-панель-фон: # 343c45; - фон-тема-вибір: # 1d4f73; - тема-виділення-фон-напівпрозорий: rgba (29, 79, 115, .5); - колір тематичного вибору: # f5f7fa; --тема-спліттер-колір: чорний; --тема-коментар: # 757873; --тема-колір тіла: # 8fa1b2; --theme-body-color-alt: # b6babf; --theme-content-color1: # a9bacb; - тему-зміст-color2: # 8fa1b2; - тема-зміст-color3: # 5f7387; - тема-підсвітка-зелена: # 70bf53; --тема-підсвітка-блакитна: # 46afe3; - тема-підсвітка-блакитний: # 5e88b0; --тема-підсвітка-фіолетова: # 6b7abb; --theme-highlight-lightorange: # d99b28; - тема-підсвітка-оранжева: # d96629; - тема-виділення-червона: # eb5368; --theme-highlight-pink: # df80ff; / * Кольори, що використовуються в графіках, наприклад, інструменти продуктивності. Найчастіше подібні до деяких кольорів "виділення *". * / - тематичні графіки-зелені: # 70bf53; - тематичні графіки-сині: # 46afe3; - тематичні графіки-блакитний: # 5e88b0; - тематичні графіки-фіолетові: # df80ff; - тематичні графіки-жовті: # d99b28; - тематичні графіки-помаранчеві: # d96629; - тематичні графіки-червоні: # eb5368; - тематичні графіки сірого кольору: # 757873; - тематичні графіки - повно-червоні: # f00; - тематичні графіки - сині: # 00f;  

Виберіть тему та змінні, які потрібно націлити, і додайте їх до свого "userChrome.css".

Ось ще кілька знімків вікна моїх інструментів розробника.