Firefox: Neues Feature macht Browser-Anpassungen deutlich einfacher
Firefox wird voraussichtlich mit Version 29 mit Australis eine neue Oberfläche bekommen, welche größere Auswirkungen auf die Anpassbarkeit haben wird. Vorher wird Firefox aber ein neues Feature erhalten, welches das Anpassen des Browsers spürbar erleichtert.
Wenn Mozilla voraussichtlich mit Firefox 29 die neue Australis-Oberfläche einführen wird, dann darf man nicht nur darüber reden, dass besonders anpassungsfreudige Nutzer vermutlich einige Dinge neu anpassen werden müssen, um dasselbe Aussehen wie vorher zu erreichen. Auch muss man dann erwähnen, dass Mozilla seinen Browser vorher mit einem neuen Feature ausstattet, welches Anpassungen wesentlich einfacher macht.
Ob Theme-Ersteller, Erweiterungs-Entwickler oder Hobby-Bastler, welche ihren Browser mittels userChrome.css-Datei anpassen, dieses Feature dürfte sie alle erfreuen. Mittels sogenannter Browser Toolbox stehen die normalerweise für Webseiten gedachten Entwickler-Werkzeuge für die Firefox-Oberfläche zur Verfügung. Eine Browserkonsole hat Firefox bereits geboten, auch der Debugger war bislang als Browser-Werkzeug verfügbar, besonders interessant wird das Feature aber durch den Inspektor und den Stil-Editor. War man bislang auf ein Add-on wie den DOM Inspector angewiesen, um die IDs und Klassen von Elementen der Browseroberfläche zu finden und Änderungen live zu testen, so bietet Firefox diese Möglichkeit ab sofort von Haus aus.
[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/dom-inspector.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/dom-inspector.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
Zum Vergleich: DOM Inspector
Und das mit allen Vorzügen der integrierten Werkzeuge wie einer übersichtlichen Repräsentation des DOMs als HTML-Quelltext inklusive Möglichkeit diesen zu bearbeiten, der Darstellung des Box-Modells, Bild-Vorschau, Farbpicker, Syntax-Highlighting und mehr. Auch zwischen zwei Themes hat man hier wie gewohnt die Wahl. Da es sich dabei um die bekannten Entwickler-Werkzeuge von Firefox handelt, wird die Browser Toolbox auch von weiteren Verbesserungen dieser Werkzeuge profitieren, von denen noch eine Menge geplant sind. Bonuspunkt: Die Browser Toolbox läuft in einem eigenen Prozess und ist damit auch in Hinblick auf e10s bereits gerüstet.
[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-1.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-1.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-2.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-2.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-3.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-3.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-4.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-4.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-5.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-5.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-6.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-6.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-7.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/browser-toolbox-7.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
Das Feature wird ab heute in den Nightly-Builds von Firefox 28 verfügbar sein. Über die Einstellungen der Entwickler-Werkzeuge muss hierfür zunächst sowohl das Chrome- als auch das Remote-Debugging aktiviert werden. Ab dann steht die Browser Toolbox im Webentwickler-Menü zur Nutzung bereit. Das Feature läuft noch nicht perfekt, so können Browser-Fenster aktuell noch nicht gewechselt werden und ironischerweise sind ausgerechnet die Entwickler-Werkzeuge derzeit nicht über die Browser Toolbox zugänglich. Mozilla arbeitet aber auch daran noch.
[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/devtools-einstellungen.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/devtools-einstellungen.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
Sören Hentzschel ist Webentwickler aus Salzburg. Auf soeren-hentzschel.at informiert er umfassend über Neuigkeiten zu Mozilla. Außerdem ist er Betreiber von camp-firefox.de, der ersten Anlaufstelle im deutschsprachigen Raum für Firefox-Probleme aller Art. Weitere Projekte sind firefox.agenedia.com, firefoxosdevices.org sowie sozone.de.
Wow, damit hätte ich so schnell nicht gerechnet, sehr schön! Ich fand den DOM-Inspector auch nie besonders benutzerfreunlich.
Dann kann Australis ja kommen. 😉
Ich hatte sogar noch einen Fehler im Artikel, der Nightly ist ja erst bei Version 28, das wird also sogar sechs Wochen vor Australis in einer finalen Firefox-Version sein. Der Artikel ist korrigiert. 😉
Schöne Sache, das erleichtert das Theming nochmals ungemein 🙂
Geht „Tab-Leiste ausblenden“ dann wieder?
Du kannst mit diesem Feature grundsätzlich alles testen, du musst halt schon eine Idee davon haben, was du tust, und die Änderungen anschließend in Form einer userChrome.css-Datei, Stylish-Script, Add-on oder wie auch immer umsetzen. Aber für diejenigen, welche sowas für andere Nutzer bereitstellen, erleichtert das die Arbeit.
Könntest Du vielleicht, wenn Du zwischen druch mal bisschen Zeit hast, eine kleine Anleitung machen wie man das Design koplett überarbeiten kann? Ich kapier nicht, welche Datei ich bearbeiten muss bzw. via AddOn das alles ansprechen kann o.O CSS kann ich… Aber der Rest bei FF sodass es ständig geändert bleibt!?
Hier ist zwar gezeigt welche Datei man als CSS bearbeiten kann, finde sie aber nicht!? Ich finde noch nicht mal den Order „chrome“… Den gibts bei mir nich :-/ (Windows 7)
Ein Artikel zur Theme-Erstellung ist von meiner Seite aus nicht geplant. Aus dem ganz einfachen Grund, dass ich kein Theme-Ersteller bin und darüber nicht kompetent schreiben kann.
Die gesuchten Dateien sollten in der Datei omni.ja und/oder browser/omni.ja sein.
Grundsätzlich muss man aber kein Theme erstellen, solange man nur CSS verändert und nicht vorhat, das via AMO anzubieten. Das Stichwort lautet hier userChrome.css.
Passt jetzt nicht so wirklich zum Artikel, weiß auch nicht wo es denn passen würde aber..
..ich bräuchte mal deinen Rat als Experten was du mir hierzu sagen kannst:
http://www.chip.de/news/Multi-Prozess-Tuning-Firefox-so-schnell-wie-Chrome_65863846.html
Ich nochmal, ich hab mal spaßeshalber den about:config in oben genannten Artikel getestet.
Einfach so aus neugier, ich dachte mir; Mal sehen was passiert.
Tja, sehr viel, hat mir den kompletten Firefox geschrottet, da ging nichts mehr. Alles was ich zu sehen bekam war ..naja nichts.
Uff, ich hab grad so’n Halz…
Was für ein unsinniger Einstieg in das Thema. Firefox sieht in Sachen Geschwindigkeit gegen Chrome alt aus? Wieso wurde dann Firefox kürzlich von einem DER bekannten Browsertests überhaupt zum Geschwindigkeits-König vor Chrome gekürt? Mal abgesehen davon, dass die Unterschiede im Millisekundenbereich liegen und auch in den Monaten davor, als Chrome noch schneller war, die Unterschiede menschlich gar nicht wahrnehmbar waren. Aiaiai, das ist doch Meinungsmache auf BLÖD-Niveau, was die Chip da macht…
Lirum Larum, über e10s habe ich bereits im April geschrieben. Der einzige Grund, wieso manche Webseiten das nun aufgreifen ist, dass es einen neuen Artikel gab, der e10s detailliert erklärt, und nun diese Seiten denken, es sei eine neue Ankündigung…
Testen sollte man immer in einem dafür eigenen Profil. 😉 Das ist eine riesengroße Baustelle und noch ganz weit davon entfernt, für die Massen nutzbar zu sein.
Und genau so ist es. Jemand der solche Tests nicht vorliegen hat, wird auch nicht sagen können ob jetzt der oder jener Browser schneller ist. Aber in den meisten Fällen wird sowieso gern wiederholt was man von anderen hört, ohne es selbst richtig getestet zu haben. Ich selbst verwende(te) Chrome auch zu bestimmten Sachen, also kann ich sagen man merkt davon nichts von einem großartigem Geschwindigkeits Unterschied. Alles in allem kann ich sagen das ich nichts mehr auf einen Firefox-Artikel von Chip.de gebe. Aber deren Forum ist okay.
Ich kenne da einen Blog wo ich mich drauf verlassen kann das die Artikel Qualität haben.
Ja, das werd ich mir für die Zukunft merken. Glücklicherweise konnte ich das Problem beheben indem ich den Eintrag in einer Prefs Datei per Text-Editor umgeändert hatte.
Also vielen Dank Sören.
Wow, das sind ja tolle News 🙂
Hab mir schon immer vorgestellt wie toll es ist das Browser-UI on-the-fly zu ändern *händereib*
Ist dann letztendlich nahezu alles an der Oberfläche anpassbar, da es auch in der userChrome.css steht?
Hallo Marco,
entschuldige die verspätete Antwort. Die Datei userChrome.css beinhaltet ausschließlich CSS-Änderungen für de Browser und dieses Feature erlaubt es, das CSS des Browsers live zu bearbeiten, insofern beantworte ich die Frage mal mit Ja. Allerdings gibt es keine direkte Möglichkeit, die dort gemachten Änderungen dauerhaft in der Datei userChrome.css zu speichern, die Änderungen müssten also am Ende nochmal auf gewohnte Weise durchgeführt werden. Das Feature erlaubt aber zumindest das Vorab-Experimentieren, ohne dass man blind herumspielen und den Browser nach jeder Änderung neustarten müsste.
Seit dem gestrigen Nightly Build ist dieses Feature endlich vernünftig benutzbar. Bislang musste man sich ja durch die Markup-Ansicht quälen, um Elemente zu finden. Nun kann man wie auf Webseiten einfach das Inspect-Icon klicken und mit der Maus über Elemente in der Browseroberfläche herüberfahren. Ziemlich cool.