Firefox 70 und grünes Schloss-Symbol

bananovic

Ich benutze das Script BackToTheFavicon.uc.js. Damit wird in der Adreßleiste links das Favicon der Website angezeigt. Bis zu FF 69.0.3 wurde zusätzlich das grüne Schloßsymbol angezeigt, bei Verbindungen ohne "https" ein rot durchgestrichens graues Schloßsymbol. In FF 70 ersetzt das Favicon jedoch das Schloßsymbol. Wie kann ich erreichen, daß hier das Schloßsymbol wieder zusätzlich zum Favicon angezeigt wird, am besten grün statt des nun standardmäßgen grau?

milupo

Kannst du mal den Skript-Code hier einstellen? Die Version, die ich hier habe, funktioniert nicht, da wird gar kein Favicon eingefügt.

milupo

Hat sich erledigt, habe eine funktionierende Version gefunden.

Ja, das Favicon ersetzt das Schloss. Das Skript bezieht sich auf die ID #identity-icon und genau das ist die ID des Schlosssymbols. Das Favicon braucht eine eigene ID, da müsste man aber das Skript verändern, denn ich glaube nicht, dass man dem Schloss einfach eine andere ID zuweisen kann. Um das Skript zu verändern, reichen meine JavaScript-Kenntnisse aber nicht aus.

bananovic

Hier ist der Script Code:

Code

//      BackToTheFavicon.uc.js

(function() {

   if (location != 'chrome://browser/content/browser.xhtml')
      return;

   gBrowser.tabContainer.addEventListener('TabAttrModified', function() {
      var icon = document.getElementById('identity-icon');
      var favicon = gBrowser.selectedTab.image;
      if (favicon)
         icon.src = favicon
      else
         icon.removeAttribute('src');
   }, false);

   if (Number(gAppInfo.version.split('.')[0]) >= 51) {
      var css =
         '#urlbar[pageproxystate="valid"] > #identity-box > #identity-icon {opacity: 1} ' +
         '#identity-icon {filter: none}';
      var stylesheet = document.createProcessingInstruction('xml-stylesheet',
         'type="text/css" href="data:text/css;utf-8,' + encodeURIComponent(css) + '"');
      document.insertBefore(stylesheet, document.documentElement);
   };

})();

Alles anzeigen

milupo

Ja, danke, das habe ich inzwischen auch gefunden.

bananovic

Bis FF 69 umfaßt die ID identity-box das Favicon (ID: identity-icon) und das Schloß (ID: connection-icon). In FF 70 umfaßt die identity-box nur das Schloß oder das Favicon (ID beides: identity-icon).

Kerian

Zumindest für den Farbtausch des Schloßsymbols von grau wieder auf grün in about:config den Schalter security.secure_connection_icon_color_gray auf false setzen.

siehe auch:

Firefox 70: Änderung der Darstellung von HTTP und HTTPS in Adressleiste

BrokenHeart

Habe mal was 'zusammengehackt'. Ist noch nicht ganz sauber...~~Icons müssen noch von der Größe her angepasst werden~~...

Nur mal so, ob das in die Richtung geht, die dir vorschwebt:

Wie man das grüne Schlosssymbol wiederbekommt hat ja Kerian schon erklärt:

In die userchrome.css: Größenanpassung für die Icons

CSS

#faviconid {
    height:  16px !important;
    width: 16px !important;
    margin-right: 3px !important;
}

Ins chrome Verzeichnis:

JavaScript

//  FavIconInUrlBar.uc.js

(function() {

    if (location != 'chrome://browser/content/browser.xhtml')
        return;
    
    var fav = document.createXULElement('image');
    fav.setAttribute('id', 'faviconid');
    fav.setAttribute('class', 'faviconclass');

    gBrowser.tabContainer.addEventListener('TabAttrModified', function() {            
     
    var favicon = gBrowser.selectedTab.image;
      
    if (favicon)
    {    
        fav.src = favicon;
                
        var position = document.getElementById('identity-icon');
        position.parentNode.insertBefore(fav, position);
    }
    else
    {
        fav.removeAttribute('src');
    }
    
 }, false);
})();

Alles anzeigen

milupo

Sehr schön. Mit tracking-protection-icon-box in Zeile 20 statt identity-icon steht das Favicon ganz links vor dem Schildsymbol.

bananovic

BrokenHeart:

Danke, genau so schwebt mir das vor, so war es bisher. Einige Favicons haben die richtige Größe, andere sind noch zu groß. Der Abstand zwischen dem Favicon und dem Schloß könnte noch etwas größer sein, so etwa insgesamt 1,5 - 2 mm. So war es bisher.

Kerian:

Danke, ich wußte gar nicht, daß es so einfach ist, das Schloß wieder grün zu machen.

2002Andreas

Zitat von BrokenHeart

Habe mal was 'zusammengehackt'

Sehr gut gemacht, danke dafür auch von mir

BrokenHeart

milupo: Danke, stimmt, ganz vorne ist fast noch besser...

bananovic: Die Abstände kannst du anpassen und die Icon-Größe stimmt jetzt auch:

CSS

#faviconid {
    height:  16px !important;
    width: 16px !important;
    margin-right: 3px !important;
}

andreas: Oh, Dank vom Meister, da fühl ich mich geehrt

Hier nochmal der letzte Stand des Skripts (hoffentlich jetzt ohne Fehler)

JavaScript

//  FavIconInUrlBar.uc.js

(function() {

    if (location != 'chrome://browser/content/browser.xhtml')
        return;
    
    var fav = document.createXULElement('image');
    fav.setAttribute('id', 'faviconid');
    fav.setAttribute('class', 'faviconclass');

    gBrowser.tabContainer.addEventListener('TabAttrModified', function() {            
     
    var favicon = gBrowser.selectedTab.image;
      
    if (favicon)
    {    
        fav.src = favicon;
                
        var position = document.getElementById('identity-icon');
        position.parentNode.insertBefore(fav, position);
    }
    else
    {
        fav.removeAttribute('src');
    }
    
 }, false);
})();

Alles anzeigen

Noch eine Version, mit dem Favicon direkt vor dem Eingabe/Adressfeld:

CSS

#faviconid {
    height:  16px !important;
    width: 16px !important;
    
    margin-right: -4px !important;
    margin-left: 4px !important;
}

JavaScript

//  FavIconInUrlBar.uc.js

(function() {

    if (location != 'chrome://browser/content/browser.xhtml')
        return;
    
    var fav = document.createXULElement('image');
    fav.setAttribute('id', 'faviconid');
    fav.setAttribute('class', 'faviconclass');

    gBrowser.tabContainer.addEventListener('TabAttrModified', function() {            
     
    var favicon = gBrowser.selectedTab.image;
      
    if (favicon)
    {    
        fav.src = favicon;
        
        var position = document.getElementById('identity-icon');
        position.parentNode.insertBefore(fav, position.previousSibling);
    }
    else
    {
        fav.removeAttribute('src');
    }
    
 }, false);
})();

Alles anzeigen

klickman

Super, danke an alle Beteiligten! Jetzt hab ich auch endlich wieder beides, das Schloss und das Favicon.

bananovic

BrokenHeart: Perfekt, jetzt stimmt alles. Mein großer Dank.

Speravir

So schön BrokenHearts Skript ist, es kann nicht mit Seiten umgehen, die kein eigenes Favicon besitzen. Ich nutze Aris’ Skript favicon_in_urlbar.uc.js, wo man zwischen 4 Symbolen für diesen Fall auswählen kann.

BrokenHeart man kann den CSS-Code auch direkt in das Skript einbetten, siehe zum Beispiel das verlinkte Skript. Noch charmanter fand ich die Methiode, wie ich sie bei Alice0775 gefunden habe, z.B. in tabProtect_mod2.uc.js (Achtung, nicht in Fx70 installieren, enthält die eval-Funktion!), siehe dort ab Zeile 128. Der Trick scheint also darin zu bestehen, Backticks (das Gravis-Zeichen) zu benutzen.

FuchsFan

@Speravir

Ja, finde ich auch gut, aber wo in dem Code trage ich die vier Möglichkeiten ein. Die Größe lässt sich ja auch sehr schön abstimmen.

Danke!

Grüße

FuchsFan

edvoldi

Zitat von FuchsFan

aber wo in dem Code trage ich die vier Möglichkeiten ein.

in der Zeile 15 kannst Du das ändern.

Code

var icon_for_pages_without_favicon = brand; // i_icon, sheet, globe or brand (colorized Fx channel icon)

Du kannst auch eigene Icons benutzen, hier musst du den direkten Pfad angeben. Z.B.

Code

var brand = 'file:///D:/Seafile/Mozilla/Icons/deaktivieren.png';

Das machst Du dann in den Zeilen 10 bis 13.

Gruß
EDV-Oldi

FuchsFan

@edvoldi

Ich danke dir, das habe ich geschnallt. Das mit den eigenen Icons werde ich auch noch probieren.

Grüße

FuchsFan

Speravir

Zitat von edvoldi

Du kannst auch eigene Icons benutzen, hier musst du den direkten Pfad angeben.

Stimmt, daran hatte ich gar nicht gedacht.

BrokenHeart

Speravir : Danke für den Hinweis. Ich wusste nicht, dass ein Script von Aris dafür existiert, hätte ich es gewusst, hätte ich sicher kein eigenes Skript dazu erstellt. Ich hatte auch nicht den Ehrgeiz, einem aborix oder Aris nachzueifern, weil dafür meine JS-Kenntnisse viel zu gering sind. Ich wollte einfach nur ein nicht mehr funktionierendes Skript (wegen ID-Änderung) wieder lauffähig machen, ohne neue Funktionalität hinzuzufügen. Das nicht vorhandene FavIcon in der UrlBar, bei Seiten, die kein eigenes Favicon haben, finde ich allerdings konsequent. Wenn man es anders macht, dann müsste man auch im Tab dieses selbstgewählte Icon anzeigen (ich habe mir das Skript von Aris noch nicht angeschaut, wird das so gemacht?). Ich glaube hier wäre eine globale Funktion/Einstellung besser...

Bei der Sache mit dem Inline-CSS muss ich dir allerdings deutlich widersprechen. Es gilt allgemein (nicht nur bei JS/Webentwicklung) als 'bad practice', wenn man Style-Informationen, Inhalt und Funktionalität lustig miteinander mischt. CSS wurde ja gerade deswegen entwickelt, um Style-Informationen auszulagern und so den eigentlichen Code besser lesbar und vor allem auch wartbarer zu machen. Bei kleineren Code-Schnipseln mag dies keine so große Rolle spielen, aber in etwas größeren Projekten ist so ein Spaghetti-Code ein 'NoGo'. Gerade die konkatenierten Strings machen ein Arbeiten damit zu Qual.

Auch die Geschichte mit dem gravis/backtick, welche in den japanischen extrem oft genutzt wird, ist suboptimal, da es dann z.B. im notepad++ so ausschaut: (Die dunkle Hervorhebung ist keine! Markierung)

Mag sein, dass man die merkwürdige Ansicht noch ändern kann, aber auch das Syntax-Highlighting fällt weg, was wieder eine zusätzliche Fehlerquelle darstellt.

Ich für meinen Teil, werde auch weiterhin css-Informationen dahin auslagern, wo sie hingehört, nämlich in eine css-Datei...