Где я могу найти таблицы стилей для тем инструментов разработчика Mozilla firefox

536
user254694

Инструменты разработчика Mozilla Firefox имеют две разные темы: светлую и темную. Темная тема по умолчанию для разработчика Firefox, светлая тема по умолчанию для обычного Firefox.

Я хотел бы найти реальные таблицы стилей (при условии, что они стилизованы с таблицами стилей) для их редактирования. Я в настоящее время на Windows, и я предполагаю, что, поскольку я не могу найти их в appData, они должны быть в некоторых .exe или .dll, к которым я могу получить доступ, используя хакер ресурсов.

1

1 ответ на вопрос

0
papo

стили для DevTools в Mozilla находятся в omni.jaзаархивированном файле. Есть два файла omni.ja:
не этот: "C: \ Program Files \ Mozilla Firefox \ omni.ja", а
этот: "C: \ Program Files \ Mozilla Firefox \ browser \ omni.ja"

не требуется res хакер, это css файлы.

Позвольте мне показать вам пример того, как настроить одну из двух (на данный момент) встроенных тем.
Я использую поиск CSS-правил в DevTools Inspector, но меня больше всего интересуют правила для "This Element". Я часто не понимаю, когда прокручиваю разделы «Унаследованные ...».

enter image description here

Чтобы лучше увидеть заголовок раздела, я изменил его стиль.

enter image description here

  • Найдите ответственного селектора стиля

Вы можете попробовать метод try & error через различные css-файлы в omni.ja,
но в Firefox есть отличный инструмент для этой цели. Панель инструментов браузера - как активировать и использовать его.

Затем вы можете использовать DevTools в DevTools для проверки инспектора:

enter image description here

Там вы можете видеть, это .ruleview-headerселектор, который определен в rules.cssфайле. Вы действительно можете нажать на, rules.cssчтобы увидеть его содержимое непосредственно в FF.
Теперь вы можете использовать:

.ruleview-header { background: #905252 !important; color: white !important; }

или следовать тому же стилю, который используется в файлах тем, вот что я использовал:

/* CSS Variables specific to this panel that aren't defined by the themes */ :root { --rule-header-color: var(--theme-toolbar-color); /* to keep light theme as it was */ }  :root.theme-dark { /* was: --rule-header-background-color: #222225; */ --rule-header-background-color: #905252 !important; --rule-header-color: white; /* added */ }  /* Rule View Container */  .ruleview-header { /* was: color: var(--theme-toolbar-color); */ color: var(--rule-header-color) !important; }   /* expandable headers will follow the style of .ruleview-header, but here it can by styled separately */  .ruleview-expandable-header { /* background-color: YOUR_COLOR !important; */ }  .ruleview-expandable-header:hover { /* was: background-color: var(--theme-toolbar-background-hover); */ }

  • Где его поставить

    1. Вы можете отредактировать фактический файл rules.css и упаковать его обратно в файл omni.ja, но после обновления FF ваши изменения будут потеряны.
    2. Отредактируйте userChrome.cssфайл и добавьте его туда, где он должен быть. , Не забудьте использовать! Важно в этом случае для всех правил перезаписи.
    3. Используйте расширение, такое как стилус
    4. создайте свое собственное расширение

  • Структура файлов темы в omni.ja:

файлы в папке скина, например:.
\ chrome \ devtools \ skin \ dark-theme.css,
чтобы открыть только для чтения в Firefox: chrome: //devtools/skin/dark-theme.css

и файлы в папке тем, например:.
\ chrome \ devtools \ modules \ devtools \ client \ themes \ variables.css
ресурс: //devtools/client/themes/variables.css
(примечание: "ресурс:" вместо "chrome: «)

Похожие вопросы