Wo finde ich die Stylesheets für Mozilla Firefox-Entwicklerwerkzeuge

522
user254694

Die Mozilla Firefox-Entwicklerwerkzeuge haben zwei verschiedene Themen, ein helles und ein dunkles. Das Dunkle ist das Standarddesign für Firefox-Entwickler, das Licht ist das Standarddesign für den normalen Firefox.

Ich möchte die eigentlichen Stylesheets finden (vorausgesetzt, diese sind mit Stylesheets gestaltet), um sie zu bearbeiten. Ich bin derzeit unter Windows und gehe davon aus, dass ich sie in appData nicht finden kann, da sie sich in einer .exe- oder.dll-Datei befinden müssen, auf die ich mithilfe von Ressourcenhacker zugreifen kann.

1

1 Antwort auf die Frage

0
papo

Stile für DevTools in Mozilla sind in einer omni.jagezippten Datei. Es gibt zwei omni.ja-Dateien:
nicht diese: "C: \ Programme \ Mozilla Firefox \ omni.ja"
: "C: \ Programme \ Mozilla Firefox \ browser \ omni.ja"

Es wird kein Res-Hacker benötigt, es handelt sich um CSS-Dateien.

Lassen Sie mich Ihnen an einem Beispiel zeigen, wie Sie eines von zwei (ab sofort vorhandenen) eingebauten Themen anpassen können.
Ich verwende CSS-Regeln in DevTools Inspector, aber am meisten interessiere ich mich für Regeln für "This Element". Ich verstehe es oft nicht, wenn ich die Abschnitte "Inherited ..." durchgeblättert habe.

Damit ich die Kopfzeile des Abschnitts besser sehen kann, habe ich den Stil geändert.

  • Finden Sie die verantwortliche Stilauswahl

Sie können die try & error-Methode durch verschiedene CSS-Dateien in omni.ja aufrufen.
In Firefox gibt es jedoch ein großartiges Werkzeug für diesen Zweck. Browser Toolbox - Aktivierung und Verwendung

Sie können DevTools dann in DevTools verwenden, um den Inspektor zu überprüfen:

Dort sehen Sie den .ruleview-headerSelektor, der in der rules.cssDatei definiert ist . Sie können tatsächlich auf klicken rules.css, um den Inhalt direkt in FF anzuzeigen.
Sie können jetzt verwenden:

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

oder um dem gleichen Stil zu folgen, der von Themendateien verwendet wird, habe ich Folgendes verwendet:

/* 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); */ }

  • Wo soll ich hinlegen?

    1. Sie können die eigentliche Datei rules.css bearbeiten und in die Datei omni.ja zurückverpacken. Nach dem Update von FF gehen Ihre Änderungen jedoch verloren.
    2. Bearbeiten Sie die userChrome.cssDatei und fügen Sie sie dort hinzu, wo sie sein soll. . Denken Sie daran,! In diesem Fall für alle Überschreibungsregeln wichtig zu verwenden.
    3. Verwenden Sie eine Erweiterung, z. B. einen Stift
    4. Erstelle deine eigene Extension

  • Die Struktur der Themendateien in omni.ja:

Dateien im Skin-Ordner, zB:.
\ chrome \ devtools \ skin \ dark-theme.css
, um schreibgeschützt in Firefox zu öffnen: chrome: //devtools/skin/dark-theme.css

und Dateien im Ordner "
designs ", z . B .: . \ chrome \ devtools \ modules \ devtools \ client \ themes \ variables.css
resource: //devtools/client/themes/variables.css
(Hinweis: "resource:" statt "chrome: ")

Verwandte Probleme