Eigene Icons für about:xxx in deren Urlbar und Tabs

Was'ne Geburt!

#identity-box[pageproxystate="valid"].chromeUI #faviconid {
  margin-left: 1px !important;
  margin-right: -19px !important;
  margin-bottom: 1px !important;
}

#identity-box[pageproxystate="valid"].chromeUI #identity-icon-label {
  display: none !important;
}

#identity-box[pageproxystate="valid"].chromeUI {
  margin-right: 10px !important;
  padding-right: 1px !important;
}

#identity-box[pageproxystate="valid"].chromeUI::after {
  content: "Downloads"!important;
  background: url("../icons/bibli16.gif/") !important;
  background-repeat: no-repeat !important;
  background-position: 75px 3px !important;
  background-size: 15px 15px !important;   
  padding-right: 26px !important;
  background-color: gold !important;    /* Nur zum Test */
}

Werte eventuell noch anpassen.

Die Sache hat nur einen entscheidenden Fehler:

Ruf mal mit diesem Code z.B. "about:addons" auf...

Getestet in einem neuen Nightly. Einzige Anpassung ist dein Code.

Ergänzung: Habe nur das Icon in ein bei mir vorhandenes geändert.

Zitat von grisu2099

Die Sache hat nur einen entscheidenden Fehler:

Ruf mal mit diesem Code z.B. "about:addons" auf...

Getestet in einem neuen Nightly. Einzige Anpassung ist dein Code.

Ergänzung: Habe nur das Icon in ein bei mir vorhandenes geändert.

Sch.....

Du hast recht und nicht nur da! about:debugging#/setup & about:preferences genau so.

Und ich weiß nicht weiter, ich brauch’ ’ne Pause.

Was mir jetzt nur so ad hoc dazu einfällt, den Code in die userContent.css zu schreiben

und explizit den Seiten zuzuweisen.

Ob’s funktioniert?

Kann das mal jemand prüfen?

Ich habe dazu z.Z. keinen Nerv mehr

und ab morgen auch nicht mehr so viel Zeit für solche Sachen.

Bitte.

Hab ich jetzt einen Denkfehler?

Wie willst du mit der userContent.css on die URL-Bar kommen?

Zitat von grisu2099

Hab ich jetzt einen Denkfehler?

Wie willst du mit der userContent.css on die URL-Bar kommen?

War nur so eine Idee.

Habe mir mal die Zeit genommen und die Selektoren herausgesucht.

Da wären:

#identity-box[pageproxystate="valid"].chromeUI #identity-icon denen wird das Firefoxicon

url(chrome://branding/content/icon16.png) zu gewiesen.

#identity-box[pageproxystate="valid"].localResource #identity-icon denen wird das Favicon

url(chrome://global/skin/icons/page-portrait.svg) zu gewiesen.

#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon denen wird das Vorhängeschloss

url(chrome://global/skin/icons/security.svg) zu gewiesen.

und zu guter Letzt gibt es noch zwei Seiten, nämlich about:home & about:welcome

#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"]

denen wird die Lupe url(chrome://global/skin/icons/search-glass.svg) zu gewiesen.

Der Seite about:downloads sowie einigen anderen haben den Selektor

#identity-box[pageproxystate="valid"].chromeUI.

Da nun das Label zu ändern und/oder dahinter noch zusätzlich ein Icon zu plazieren,

ist also eine nicht so gute Idee, denn es wirkt sich ja auch auf andere Seiten

mit gleichem Selektor aus, z.B. auf about:buildconfig, about:policies und viele weitere!

Hier die Seiten mit dem Selektor #identity-box[pageproxystate="valid"].localResource

about:about, about:checkerboard, about:logging, about:logo, about:memory,

about:mozilla, about:networking, about:newtab, about:privatbrowsing, about:robots,

about:serviceworkers, about:sync-log, about:third-party, about:unloads, about:url-classifier,

about:webrtc & about:windows-messages

Dann gibt es noch Seiten mit dem Selektor #identity-box[pageproxystate="valid"].chromeUI

about:addons, about:buildconfig, about:cache, about:certificate, about:compat,

about:config, about:crashes, about:debugging, about:downloads, about:license,

about:logins, about:loginsimportreport, about:performance, about:plugins, about:policies,

about:preferences, about:processes, about:profiles, about:profiling, about:protections,

about:rights, about:studies, about:support & about:telemetry

Und wie erwähnt gibt es die zwei Seiten mit dem Selektor

#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"]

about:home & about:welcome

Aber es gibt da noch ein Schmankerl! #identity-box[pageproxystate="valid"].verifiedDomain

für about:credits

Ich erhebe keinen Anspruch auf Vollständigkeit!

Aber das war noch nicht alles

Wäre ja viel zu einfach, mit diesen Informationen zu arbeiten.

Da war doch noch das JavaScript.

Tja, das ist die Würze in dieser Suppe.

Denn es sorgt dafür, dass bei manchen Seiten an erster Stelle das Firefoxicon url(chrome://branding/content/icon16.png), dann das Label Firefox und an letzter und dritter Stelle ein weiteres Icon angezeigt wird.

Aber eben nicht bei allen!

Und das hat auch nichts mit den oben genannten Selektoren zu tun!

Z.B. Bei about:addons werden das Logo, das Label und ein Icon angezeigt,

und bei about:cache nur Logo & Label.

Bei about:about werden das Favicon und das Logo angezeigt,

und bei about:logo jedoch nur das Favicon.

about:credits lass ich jetzt mal außen vor.

Meine Idee wäre gewesen, Änderungen an den Selektoren in der userContent.css

jeweils den einzelnen Seiten zu geordnet vorzunehmen.

Ob's geht?

#- ----------------------------------------------------------------------------------------------------------------------------------------------- -#

Nachtrag

Die Seiten:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("about:about") {

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("about:addons") {

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("about:buildconfig") {

usw.

Zitat von Mira_Belle

Meine Idee wäre gewesen, Änderungen an den Selektoren in der userContent.css

jeweils den einzelnen Seiten zu geordnet vorzunehmen.

Ob's geht?

Nein, siehe Hinweis von grisu2099. Genau darum geht es ja bei der Unterscheidung zwischen userContent.css und userChrome.css: Anpassungen der Browseroberfläche („chrome“) müssen in die Datei userChrome.css, Anpassungen am Content in die Datei userContent.css. Die Adressleiste ist ganz klar Browseroberfläche.

Zitat von Sören Hentzschel

Zitat von Mira_Belle

Meine Idee wäre gewesen, Änderungen an den Selektoren in der userContent.css

jeweils den einzelnen Seiten zu geordnet vorzunehmen.

Ob's geht?

Nein, siehe Hinweis von grisu2099. Genau darum geht es ja bei der Unterscheidung zwischen userContent.css und userChrome.css: Anpassungen der Browseroberfläche („chrome“) müssen in die Datei userChrome.css, Anpassungen am Content in die Datei userContent.css. Die Adressleiste ist ganz klar Browseroberfläche.

Habe ich auch gerade festgestellt!

Es geht nicht.

Ergo, mein Fehler.

Jetzt bliebe nur noch, die Selektoren soweit aufzudröseln, dass Unterschiede der einzelnen Seiten

zu Tagen treten. Ob es da überhaupt Unterschiede gibt?

Aufdröseln

Ich habe mal zwei Screenshots gemacht und habe Fragen dazu!

about:about

Man schauen auf die Zeile label

bei value steht nix! und dahinter collapsed="true"

Nun about:addons

Wie man hier unschwer erkennen kann, steht in der Zeile label

bei value="Firefox" und der Eintrag collapsed="true" fehlt ganz.

Nun meine Frage an die Profis!

Wo sind diese Einträge hinterlegt?

Und wie, wenn überhaupt möglich, kann man darauf Einfluss nehmen?

Analog zu diesem Problem gibt es mit dem JavaScript auch noch die Zeile image id="faviconid",

wo ich dann das gleiche Problem habe!

z.B. about:debugging#/setup

Hier ist ein Icon hinterlegt und hier

about:buildconfig

wiederum nicht!

Auch hier die Frage, wo steht das?

Und wie könnte man darauf Einfluss nehmen?

Also hier noch einmal das JavaScript:

(function() {
    if (location.href !== 'chrome://browser/content/browser.xhtml') return;
        let fav = document.createXULElement('image');
        fav.setAttribute('id', 'faviconid');
        fav.setAttribute('class', 'faviconclass');
    gBrowser.tabContainer.addEventListener('TabAttrModified', function() {            
        let 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);
    fav.style.height = '16px';
    fav.style.width  = '16px';
    fav.style.marginLeft  = '7px';
    fav.style.marginRight  = '3px';
    fav.style.marginTop  = '2px';
})();

Wenn ich das richtig verstehe, müsste man, wenn es kein Tabicon gibt, dem Ganzen dann ein "Eigenes" zuweisen.

Nur wo und wie?

Wenn das klappen sollte, wäre ja schon einmal ein Problem gelöst.

Meine Gedanken überschlagen sich und mir kam noch eine Idee!

Die Symbole, welche in den Tabs angezeigt werden, sind doch Seitenspezifisch?

Und da das Script eben jene kopiert und in die Adresszeile schafft, ...

Leider habe ich keine Zeit mehr dem nachzugehen.

Zitat von Mira_Belle

Und da das Script eben jene kopiert und in die Adresszeile schafft,

...aber nicht die selbst zugewiesenen...

Zitat von grisu2099

Zitat von Mira_Belle

Und da das Script eben jene kopiert und in die Adresszeile schafft,

...aber nicht die selbst zugewiesenen...

Danke für die Info.

Hat mir Arbeit erspart.

Die Idee wäre ja viel zu einfach gewesen.

So, wie bekommen wir es nun hin, in der Adressleiste den einzelnen Seiten ganz individuell Icons zuzuweisen.

Wie wäre es mit ähnlichem

#urlbar-input [title^="camp-firefox"]

Darunter gibt es keine weitere Spezifikation.

Zitat von .DeJaVu

Wie wäre es mit ähnlichem

#urlbar-input [title^="camp-firefox"]

Darunter gibt es keine weitere Spezifikation.

Sorry .DeJaVu, das verstehe ich jetzt nicht, bzw. worauf Du hinaus willst.

Ich habe die Idee mit dem JavaScript mal wieder aufgegriffen!

Also wenn es kein Icon für den Tab gibt, dass dann z.B. "chrome://mozapps/skin/extensions/extension.svg"

eingefügt wird!

Habe wie folgt das Script geändert:

(function() {
    if (location.href !== 'chrome://browser/content/browser.xhtml') return;
        let fav = document.createXULElement('image');
        fav.setAttribute('id', 'faviconid');
        fav.setAttribute('class', 'faviconclass');
gBrowser.tabContainer.addEventListener('TabAttrModified', function() {            
    let 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');
        let customIcon = new Image();
        customIcon.src = "chrome://mozapps/skin/extensions/extension.svg";
        customIcon.width = 16;
        customIcon.height = 16;
        var position = document.getElementById('identity-icon');
        position.parentNode.insertBefore(customIcon, position.previousSibling);
    }
}, false);
    fav.style.height = '16px';
    fav.style.width  = '16px';
    fav.style.marginLeft  = '7px';
    fav.style.marginRight  = '3px';
    fav.style.marginTop  = '2px';
})();

Aber, das Ergebnis gleicht einer Katastrophe!

Es wird zwar das Icon eingefügt, aber immer, egal ob es schon eins gibt oder nicht,

und wenn man die Tabs wechselt, wird ständig ein weiteres Icon hinzugefügt.

Wenn ich doch nur verstehen würde, was ich da mache.

Zitat von Mira_Belle

Wenn ich doch nur verstehen würde, was ich da mache.

Wenn ich doch nur etwas machen würde, das ich auch verstehe...

Dann wird das ja nie etwas *wechduck*

Eine kleine Hürde ist genommen!

Alle Seiten mit dem Selektor #identity-box[pageproxystate="valid"].localResource haben nun

das gleiche Aussehen.

Für die Seiten mit dem Selektor #identity-box[pageproxystate="valid"].chromeUI

wird es meiner Einschätzung nach nur mit einem Script funktionieren!

Denn einige Seiten bringen ihr eigenes Icon im Tab schon mit, dies wird ja kopiert und dann

in der Adresszeile hinter dem Label angezeigt, andere wiederum haben kein Icon im Tab!

Und hier muss im Script eine Prüfung erfolgen und nur wenn kein Icon vorhanden ist,

darf dann ein fest definiertes Icon eingefügt werden.

Ich denke, meine Idee weiter oben, war gar nicht so schlecht.

Jedoch hapert es an Kenntnissen bezüglich JavaScript.

Nun eine behelfsmäßige Lösung!

Alle internen Seiten sind nun gleich.

Alle, nein, nicht alle.

about:privatebrowsing schaut so aus.

Und dabei werde ich es auch belassen.

about:credits ist eine externe Seite, da mache ich auch nichts dran.

about:home & about:welcome muss ich noch den anderen Seiten anpassen

Da gehe ich aber erst morgen dran.

Hier "mein" vorläufiger Code:

/* localResource */

.plain {
  padding-bottom: 2px !important;
}

#identity-box[pageproxystate="valid"].localResource #identity-icon {
  display: none !important;
}
#identity-box[pageproxystate="valid"].localResource #faviconid {
  margin-left: 1px !important;
  margin-right: 1px !important;
  margin-bottom: 1px !important;
  background: url("chrome://branding/content/icon32.png") !important;
  background-size: 16px 16px !important;
}
#identity-box[pageproxystate="valid"].localResource::after {
  content: "Firefox"!important;
  padding-left: -5px !important;
}
#identity-box[pageproxystate="valid"].localResource {
  margin-right: 8px !important;
  padding-right: 10px !important;
}

#identity-box[pageproxystate="valid"].localResource::after {
  background: url("chrome://browser/skin/fxa/avatar-empty.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 48px 2px !important;
  background-size: 16px 16px !important;   
  padding-right: 24px !important;
}


/* chromeUI */

#identity-box[pageproxystate="valid"].chromeUI #faviconid {
  display: none !important;
}

#identity-box[pageproxystate="valid"].chromeUI {
  margin-right: 8px !important;
  padding-right: 1px !important;
}
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button {
  margin-right: 2px !important;
  padding-right: 0px !important;
}
#identity-box[pageproxystate="valid"].chromeUI::after {
  background: url("chrome://browser/skin/fxa/avatar-empty.svg") !important;
  content: " "!important;
  background-repeat: no-repeat !important;
  background-position: 6px 2px !important;
  background-size: 16px 16px !important;   
  padding-right: 6px !important;
  padding-left: 25px;
}