Firefox userChrome.css & DevTools

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Firefox userChrome.css & DevTools

      Ich hab mich letztens mal etwas genauer mit meinem Firefox auseinandergesetzt nachdem mir diverse Details an der neuen (FF29) GUI auf die nerven gingen. Hab ein bisschen was rausgefunden und dachte vielleicht interessierts noch jemanden.

      Die userChrome.css Datei liegt im Firefox Profilordner (auf Linux ist der genaue Pfad ~/.mozilla/firefox/<profil-ordner>/chrome/userChrome.css). In der Regel muss man sie dort selbst anlegen und kann dann fröhlich CSS reinschreiben um am Browser Design rumzupfuschen. Das ist wahrscheinlich keine Neuigkeit, allerdings habe ich bisher immer nur ein paar bruchstückhafte Schnippsel gefunden die man dort einsetzen kann. Eine wirklich vollständige Dokumentation der zur Verfügung stehenden CSS Klassen und IDs gibt es nicht, dafür aber ein einigermaßen antikes Werkzeug namens DOM Inspector. Meiner Einschätzung nach dürfte das der Urahn von Firebug und ähnlichen Web Development Tools, sowohl was die Fähigkeiten als auch was die Bedienung angeht. Dafür ist er in der Lage den XUL-Baum (so ähnlich wie HTML) von Firefox und seinen Plugins anzuzeigen. Damit kann man die gesamte GUI untersuchen und – grundlegende CSS-Kenntnisse vorausgesetzt – einiges anpassen.

      Einige der Mögichkeiten die ich gefunden hab sind hier im Forum angesprochen worden. Hier also mal meine aktuelle userChrome.css:
      Spoiler anzeigen

      CSS-Quellcode

      1. /* @namespace ist wichtig damit das ganze überhaupt funktioniert */
      2. @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
      3. /* Das wichtigste:
      4. * kürzere Lesezeichenleiste!
      5. *
      6. * Text von Lesezeichen in der Leiste ausblenden (Icons only)
      7. */
      8. .bookmark-item:not([type="menu"]) > .toolbarbutton-text {
      9. display: none !important;
      10. }
      11. /* und Ordner-Icons vor Ordnern ausblenden (names only) */
      12. .bookmark-item[type="menu"] > .toolbarbutton-icon {
      13. display: none !important;
      14. }
      15. /* Kleinere Abstände in der Lesezeichen-Leiste */
      16. .bookmark-item:not([type="menu"]) {
      17. padding-left: 0px !important;
      18. padding-right: 0px !important;
      19. }
      20. .bookmark-item > .toolbarbutton-icon {
      21. margin-right: 0px !important;
      22. }
      23. /* Noch ein kleiner Bonus:
      24. * Der Lesezeichenmenü Button hat so einen nervigen instant-bookmark button
      25. * neben dem der das eigentliche Menü anzeigt. Weg damit!
      26. */
      27. #bookmarks-menu-button > toolbarbutton,
      28. #bookmarks-menu-button > dropmarker::before {
      29. display: none !important;
      30. }
      31. /* kleinere Abstände zwischen den normalen Buttons in der toolbar */
      32. #nav-bar .toolbarbutton-1 .toolbarbutton-icon {
      33. padding: 3px 2px !important;
      34. }
      35. /* Vor- und Zurückbuttons verstecken*/
      36. #back-button, #forward-button {
      37. display: none !important;
      38. }
      39. /* Theme Anpassung für FT DeepDark wegen des ausgeblendeten Vor- und Zurück-Buttons. */
      40. #urlbar {
      41. border: 1px solid black !important;
      42. border-radius: 2px !important;
      43. }
      Alles anzeigen
      Ein Problem das ich auf diese Weise bisher leider nicht loswerden konnte ist die Tatsache, dass die Bookmarks-Toolbar automatisch ausgeblendet wird, wenn sie neben der URL-Bar sitzt und zu breit wird.
      Soviel dazu. Ich bin sicher, dass es eine ganze Reihe von Plugins gibt die man so einfach und effizient ersetzen kann.
      Dazu gehört unter anderem auch Stylish, dessen Rolle die Verwandte userContent.css Datei übernehmen kann.
      Kleiner Screenshot am Rande, einschließlich selbst gebauter startpage für neue Tabs:


      Nebenbei entwickeln sich die Firefox Development Tools im Laufschritt. Wie wir bereits festgestellt haben gibt es nur noch wenige Features die gegenüber Firebug fehlen und die Liste wird stetig kürzer. Man kann sogar selbst Verbesserungsvorschläge einbringen, in einer etwas freundlicheren Aufmachung als dem Bugtracker.
      Ein Detail das mir besonders gut gefällt ist eine Art Kommandozeile (GCLI) mit der simplen Bezeichnung Developer Toolbar. Dort kann man Befehle, wie den wundervollen screenshot --fullpage, eintippen. Die Leiste öffnet man einfach über die Tastenkombination Shift+F2.
      Langfristig hat Mozilla offenbar vor eine komplette Web Development IDE zu schaffen, die alle anderen Tools überflüssig macht. Ich weiß noch nicht wie gut das mal wirklich wird, JavaScript-basierte Texteditoren überzeugen mich nicht so, aber man kann ja hoffen. :D
      :poop: Ich muss ein Bild in meine Signatur tun. Warum kann ich kein Bild in meine Signatur tun? In eine Signatur gehört ein Bild! :ghost:

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Gandalf ()