Funktionierender, eigener Throbber?

NoNameNeeded

Sooo furchtbar wichtig ist das nicht, aber ich frage mich ob es möglich ist einen eigenen Throbber zu verwenden, den ich dann irgendwo in der Symbolleiste (oder in der Menüleiste) platzieren kann?

Ein Throbber ist eine Grafik, die sich bewegt während eine Seite geladen wird und stillsteht, wenn alles geladen ist.

Man kann dafür bspw. gif-Dateien verwenden.

Ist das (noch) möglich?

Als Throbber hätte ich zwei gif-Dateien (siehe Anhang)

2002Andreas

Zitat von NoNameNeeded

einen eigenen Throbber zu verwenden

Das kann ich dir anbieten:

CSS

#reload-button .toolbarbutton-icon {
   background: url("file:///C:/Users/Andi/Icons%20Firefox/reload.png") no-repeat !important;
   background-position: 10px 8px !important;
   padding-left: 34px !important;
}

#stop-button .toolbarbutton-icon {
   background: url("file:///C:/Users/Andi/Icons%20Firefox/16x16_cancel.png") no-repeat !important;
   background-position: 10px 8px !important;
   padding-left: 34px !important;
} 

#reload-button:hover, 
#stop-button:hover {
   background-color:  lightgrey !important;
}

Alles anzeigen

Oder auch so:

CSS

#reload-button > image,
#stop-button > image {
   display: none !important;
}

#reload-button {
   background: url("file:///C:/Users/Andi/Icons%20Firefox/reload.png") no-repeat !important;
   background-position: 10px 12px !important;
   padding-left: 34px !important;
}

#stop-button {
   background: url("file:///C:/Users/Andi/Icons%20Firefox/16x16_cancel.png") no-repeat !important;
   background-position: 10px 12px !important;
   padding-left: 34px !important;
} 

#reload-button:hover, 
#stop-button:hover {
   background-color:  lightgrey !important;
}

Alles anzeigen

NoNameNeeded

Ich sehe da eigentlich nur einen Stop/Reload-Button der sein Aussehen verändert.

Das meinte ich aber nicht.

Ich meinte eine (bewegte) Grafik, die sich unabhängig davon ob man darauf klickt bewegt, wenn eine Seite geladen wird oder stillsteht wenn die Seite geladen ist.

NoNameNeeded

Ich weiß nicht ob dir das weiterhilft, aber das war wohl mal der Code der dies ermöglicht hat (bei einer älteren Firefox-Version).

CSS

(function() {

   var
    goButton = document.getElementById('go-button'),
    urlBar = document.getElementById('urlbar-container');

   urlBar.parentNode.insertBefore(goButton, urlBar.nextSibling);
   goButton.style.MozAppearance = "toolbarbutton";
   goButton.style.padding = "5px";

})(); 
 toolbar[iconsize=small] #navigator-throbber[busy=true] {list-

style-image: url(run20.gif) !important; opacity: 1 !important} 
 

toolbar[iconsize=small] #navigator-throbber[busy=true] {list-style-

image: url(run20.gif) !important; opacity: 1 !important} 
 toolbar

[iconsize=small] #navigator-throbber { list-style-image: url(throbber-

single.gif) !important; } 
 toolbar[iconsize=large] #navigator-throbber 

{ list-style-image: url(throbber-single.gif) !important; } 
 toolbar

[iconsize=large] #navigator-throbber[busy=true] { list-style-image: 

url(run20.gif) !important; opacity: 1 !important} 
 #content tab[busy] 

.tab-icon-image {list-style-image: url(run16.gif) !important; opacity: 

1 !important} 
 #content tab[busy] .tab-icon {list-style-image: url

(run16.gif) !important; opacity: 0.6 !important}

Alles anzeigen

2002Andreas

Zitat von NoNameNeeded

das war wohl mal der Code

Das ist kein CSS Code, sondern ein Script.

Bei Scripten muss ich leider passen.

NoNameNeeded

Oha.

Dabei ist das in einer userchrome.css

Hat dann vllt. nie funktioniert?

Dann muss ich mal sehen ob ich irgendwo noch eine ältere Version finde.

NoNameNeeded

Habe jetzt noch mal nachgesehen.

Das ist die gesamte userchrome.css

Scheinbar waren damals (Firefox 3.6) auch Funktionen in der css-Datei möglich?

CSS

/* Windows Classic (9x/Me/2000) style Menus */
menupopup, popup {
   border: 2px solid !important;
   -moz-border-top-colors: ThreeDLightShadow ThreeDHighlight;
   -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;
   -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;
   -moz-border-left-colors: ThreeDLightShadow ThreeDHighlight;
   padding: 1px !important;
}
menubar > menu[disabled="true"] {
   border: 1px solid transparent !important;
}
menubar > menu[_moz-menuactive="true"] {
   border-top: 1px solid ThreeDHighlight !important;
   border-right: 1px solid ThreeDShadow !important;
   border-bottom: 1px solid ThreeDShadow !important;
   border-left: 1px solid ThreeDHighlight !important;
   background-color: transparent !important;
   color: MenuText !important;
}
menubar > menu[_moz-menuactive="true"][open="true"]  {
   border-top: 1px solid ThreeDShadow !important;
   border-right: 1px solid ThreeDHighlight !important;
   border-bottom: 1px solid ThreeDHighlight !important;
   border-left: 1px solid ThreeDShadow !important;
}
#nav-bar
{
height: 44px !important;
} 
#__customToolbar_Adress_toolbar
{
height: 28px !important;
} 
#urlbar
{
height: 25px !important;
} 
#toolbar-menubar
{
height: 26px !important;
} 
#navigator-throbber
{
height: 35px !important;
} 
#url-bar
{
height: 25px !important;
} 
.#toolbarbutton-1
{
margin-top: 5px !important;
} 
.#reload-button
{
margin-top: 5px !important;
} 
.#stop-button
{
margin-top: 5px !important;
} 
.#forward-button
{
margin-top: 5px !important;
} 
.#back-button
{
margin-top: 5px !important;
} 
.#home-button
{
margin-top: 5px !important;
} 
.#search-sidebar-button
{
margin-top: 5px !important;
} 
.#media-button
{
margin-top: 5px !important;
} 
.#downloads-button
{
margin-top: 5px !important;
} 
.#history-button
{
margin-top: 5px !important;
height: 50px
} 
#go-button
{
height: 50px
}
.#bookmarks-button
{
margin-top: 5px !important;
} 
/* Benutze ein Hintergrundbild für die Symbolleisten */
toolbox {
background-image: url("") !important;
background-color: none !important;
} 
toolbarspacer{width:1px !important;}
#personal-bookmarks {
   min-width: 110px !important;
}

(function() {

   var
    goButton = document.getElementById('go-button'),
    urlBar = document.getElementById('urlbar-container');

   urlBar.parentNode.insertBefore(goButton, urlBar.nextSibling);
   goButton.style.MozAppearance = "toolbarbutton";
   goButton.style.padding = "5px";

})(); 
 toolbar[iconsize=small] #navigator-throbber[busy=true] {list-style-image: url(run20.gif) !important; opacity: 1 !important} 
 toolbar[iconsize=small] #navigator-throbber[busy=true] {list-style-image: url(run20.gif) !important; opacity: 1 !important} 
 toolbar[iconsize=small] #navigator-throbber { list-style-image: url(throbber-single.gif) !important; } 
 toolbar[iconsize=large] #navigator-throbber { list-style-image: url(throbber-single.gif) !important; } 
 toolbar[iconsize=large] #navigator-throbber[busy=true] { list-style-image: url(run20.gif) !important; opacity: 1 !important} 
 #content tab[busy] .tab-icon-image {list-style-image: url(run16.gif) !important; opacity: 1 !important} 
 #content tab[busy] .tab-icon {list-style-image: url(run16.gif) !important; opacity: 0.6 !important}

Alles anzeigen

Sören Hentzschel

Zitat von NoNameNeeded

Hat dann vllt. nie funktioniert? […] Scheinbar waren damals (Firefox 3.6) auch Funktionen in der css-Datei möglich?

Das kann noch nie funktioniert haben. JavaScript hat in CSS-Dateien nichts verloren.

NoNameNeeded

Hm ok, dann ist der Teil mit der function wohl funktionslos gewesen.

Aber der Teil direkt darunter, DER hat funktioniert (der gehört doch nicht mehr zu dieser function).

Aber die Frage ist ja auch: Gibt es denn überhaupt noch ein Element namens #navigator-throbber dessen Wert [busy=true] sein kann?

2002Andreas

Zitat von NoNameNeeded

überhaupt noch ein Element namens #navigator-throbber

2002Andreas

Alternative:

CSS

#reload-button {
  list-style-image: url("file:///C:/Users/Andi/Icons%20Firefox/reload.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px) !important;
}

#stop-button {
 list-style-image: url("chrome://global/skin/icons/loading.png") !important;
 -moz-image-region: rect(0px 16px 16px 0px) !important;
}

NoNameNeeded

Ok danke auf jeden Fall für deine Mühe, aber das bringt mir so nix.

.DeJaVu

Nur mal zur Klärung: Der Throbber ist doch das Ding im Tab, nicht der Stop-Reload?

Hier findest du Beispiele (im aktuellen ZIP) für Throbber:

GitHub - Aris-t2/CustomCSSforFx: Custom CSS tweaks for Firefox

Custom CSS tweaks for Firefox. Contribute to Aris-t2/CustomCSSforFx development by creating an account on GitHub.

github.com

Das sind die CSS, die mit "tab_throbber" beginnen. Such dir eine Datei raus, kopiere es zur userChrome.css, trage es in die userChrome.css ein

@import url(./tab_throbber_grey_classic.css);

Es werden Bilder verlinkt, zB aus der besagten tab_throbber_grey_classic.css

-->

background-image: url("./../../image/tabthrobber_fx56_connecting.png") !important;

und

list-style-image: url("./../../image/tabthrobber_classic_loading.png") !important;

Die tab_throbber_grey_classic.css anpassen

background-image: url("./tabthrobber_fx56_connecting.png") !important;

und

list-style-image: url("./tabthrobber_classic_loading.png") !important;

Und die Bilder

tabthrobber_classic_loading.png

und

tabthrobber_fx56_connecting.png

zur userChrome.css kopieren.

Mehr als Anleitung geht nicht, beschäftige dich damit, oder lass es bleiben. Ist wie bei ublock.

2002Andreas

Zitat von .DeJaVu

nicht der Stop-Reload?

Um den genau geht es in diesem Thread.

NoNameNeeded

Ja, der Throbber ist das Ding, das auch in jedem Tab zu sehen ist wenn die Seite geladen wird (im Normalfall eine Sanduhr).

Die wichtige Frage für mich ist aber, kann man diesen Throbber auch an einer anderen Stelle platzieren (nicht in einem Tab) UND funktioniert der dann auch für alle Tabs gleichzeitig, sprich, IRGENDEIN Tab lädt irgendwas und der Throbber bewegt sich.

Nur dann kann ich das gebrauchen.

Wenn das nicht geht, muss ich mir die Mühe einer Anpassung gar nicht machen.

2002Andreas

Zitat von NoNameNeeded

das auch in jedem Tab zu sehen ist

Das ist dann nicht der Throbber den ich verändert hatte in meinem Beiträgen.

NoNameNeeded

Das ist mir natürlich aufgefallen.

Ich dachte du schlägst das als Alternative vor.

.DeJaVu

Zitat von 2002Andreas

Das ist dann nicht der Throbber

Weil das nie ein "Throbber war", was du ihm vorgeschlagen hattest. Der Throbber ist immer die "Sanduhr" im Tab gewesen. Deswegen bezeichnet Aris aus auch seit Jahren so.

2002Andreas

Zitat von NoNameNeeded

Ich dachte du schlägst das als Alternative vor.

Für den vorhandenen, ja.

Und für den von den Tabs war bisher keine Rede von dir.

Zitat von .DeJaVu

Weil das nie ein "Throbber war"

Dann war das ein Missverständnis von mir, sorry.

NoNameNeeded

Ja, weil ich ja auch den in den Tabs gar nicht verändern will.

Ich wollte eben einen zusätzlichen eigenen, unabhängigen Throbber.

Aber wie auch immer, es scheint wohl nicht so zu funktionieren wie ich mir das vorstelle.

(der vorhandene Stop/Reload-Button ist aber auch wirklich kein Throbber und den habe ich ja sowieso getrennt, ich habe also keine Stop/Reload-Kombi sondern zwei eigene Buttons, du warst übrigens maßgeblich daran beteiligt, wirst dich aber vllt. nicht mehr erinnern)