Script Datum + Uhrzeit neben Menüleiste

Taupan

Zitat von Endor

Bitte was meinst Du mit Symbolleiste genau, die nav-bar oder was?

Danke für deine Antwort. Ich meine die Leiste, wo z.B. auch der Internet-Thread nachzulesen ist, und wo Buttons von AddOns zu finden sind. Also die Leiste, die man beim Firefox-Browser niemals ausblenden kann.

Hier mein Code, den ich gegenwärtig für die Menüleiste nutze.

CSS

//////////////////////////////////////////////////////////////////////////////////////////////////////
//
//    Uhr in die Menüzeile - ursprünglich von hier: 
//    https://www.camp-firefox.de/forum/viewtopic.php?f=16&t=122763#p1058360
//
//    Angepasst durch Ho am 21.03.2021
//////////////////////////////////////////////////////////////////////////////////////////////////////
function doDatUhrCallback() {try{doDatUhr();}catch(ex){} }
function doDatUhr() {
    var days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
    var months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];

    window.setTimeout(doDatUhrCallback, 1000);

    var D = new Date();
    var day = days[D.getDay()];
    var month = months[D.getMonth()];
    var year = D.getFullYear();
    var hour = D.getHours();
    var minute = D.getMinutes();
    var second = D.getSeconds();

    var date = " " + day + ", " + (D.getDate() < 10 ? "0" +D.getDate() : D.getDate()) + ". " + month + " " + year + "     ";
    var time = (hour < 10 ? "0" +hour : hour) + ":" + (minute < 10 ? "0" +minute : minute) + ":" + (second < 10 ? "0" +second : second);

    var timestr = date + time ;
    var text ="www.klimamanifest.ch       ";

    var status = document.getElementById("statusbar-clock-display");
    status.setAttribute("value",text + timestr);
}

    var ClockStatus = document.getElementById("menubar-items");

//  vor 69.0 
//  var ClockLabel = document.createElement("label");
//  ab 69.0 ?
    var ClockLabel = document.createXULElement("label");
    ClockLabel.setAttribute("id", "statusbar-clock-display");
    ClockLabel.setAttribute("class", "statusbarpanel-text");

    ClockLabel.setAttribute("style", "padding-top: 2px!important; padding-left: 50px;color:white;font-size: 20px;;text-shadow:2px 2px 4px #000000");
    
    ClockStatus.parentNode.insertBefore(ClockLabel, ClockStatus.nextSibling);
    doDatUhr();

Alles anzeigen

milupo

Und welches Skript?

Ich verwende folgendes Skript:

JavaScript

(function() {
    function doDatClock() {
        var timestr = new Date().toLocaleDateString( locale , options );
                const blanks = '  \u2013  ';
                let i = timestr.lastIndexOf(' ');
                timestr = timestr.substring(0,i) + blanks + timestr.substring(i+1) + ' hodź.';

        if( count == 1 ) {
            var counter = new Date( 2000 * sec ).toISOString().substr( 11 , 8 ); // .replace(/^[0:]+/, '') // if you want to replace zeroes and colons
            timestr = timestr + ' (' + counter + ')';
            sec++;
        }
        ClockLabel.setAttribute( 'value', timestr );
    }
    
    var count = 0; // if you don't want a counter set this to zero
    var agent = 1; // if you just want the clock set this to zero
    var language = 'hsb'; // locale, e.g. 'de-DE' , 'en-US' , 'fr-FR'
    var personalText = ' hsb '; // your personal text here
    var cssFontFamily = 'DejaVu Sans';
    var cssColor = '#FF0000'; // Font Color

    var css = 'padding-top: 10px !important; padding-left: 0; color: ' + cssColor + '; font-family: ' + cssFontFamily + '; font-weight:600; font-size:14px; text-shadow: none; width: 250px;';
    var cssA = 'width: auto;';

    var options = { 
        weekday: 'long',
        year: 'numeric', 
        month: 'long', 
        day: 'numeric', 
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit' 
    };
    
    var sec = 0;

    var locale = language || window.navigator.languages[0];

    var position = document.getElementById('nav-bar-customization-target');

    var ClockLabel = document.createXULElement('label');
    ClockLabel.setAttribute('id', 'statusbar-clock-display');
    ClockLabel.setAttribute('class', 'statusbarpanel-text');
    ClockLabel.setAttribute('style', css);    
    position.parentNode.insertBefore(ClockLabel, position.nextSibling);

    if( agent == 1 ) {
        var AgentLabel = document.createXULElement('label');
        AgentLabel.setAttribute('id', 'statusbar-agent-display');
        AgentLabel.setAttribute('class', 'statusbarpanel-text');
        AgentLabel.setAttribute('style', css + cssA);
        var FFstr = window.navigator.userAgent.split(' ');
        var FF = FFstr[FFstr.length-1].replace( '/' , ' ' );
    //     var text = "Firefox " + gAppInfo.version + personalText;
    //     Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULAppInfo).QueryInterface(Ci.nsIXULRuntime);
        
        var text = "Wersija " + AppConstants.MOZ_APP_VERSION_DISPLAY + personalText;
        

        AgentLabel.setAttribute( 'value', text );
        position.parentNode.insertBefore(AgentLabel, position.nextSibling);
    }
    
    if( count == 1 ) {
        ClockLabel.addEventListener('dblclick', function() { sec = 0; });
    }
    
    window.setInterval( doDatClock , 5000 );
})();

Alles anzeigen

Das Skript habe ich mir angepasst, es ist auch für Sorbisch. Entscheidend ist die Zeile 40. Die sorgt dafür, dass Datum und Uhrzeit in der Symbolleiste angezeigt werden. Schriftfarbe ist hier Rot. Wenn du ein anderes Skript hast, vergiss das hier.

Hier noch ein Bildschirmfoto:

Bei mir steht davor noch die Firefox-Version, hier die für das Nightly.

milupo

Ok, du hast das Skript noch nachgereicht. Es ist doch ein anderes als ich habe.

Taupan

Danke, milupo , es hat mit deinem Script geklappt.

Ich passe mir dein Skript entsprechend an. Wenn ich noch Fragen habe, melde ich mich nochmals.

Danke erstmals, super gut. Merci.

milupo

Gern geschehen.

Taupan

Eine Frage habe ich doch noch:
Was muss ich tun, wenn ich die Anzeige von "Datum/Uhrzeit" mehr in der Mitte von der Symbolleiste haben will, oder

vielleicht auch ganz nach links?

milupo

Das geht, aber im Moment muss ich auch überlegen, wie. Vielleicht ist ja jemand Anderes schneller. Man kann dann die entsprechenden CSS-Eigenschaft in Zeile 23 (var css eintragen). Leider lässt sich der String nicht via Anpassen-Fenster verschieben. Man muss also das Skript ändern.

grisu2099

Oder du teilst das Skript in 2 Teile. Dann kannst du Datum/Uhrzeit und Version problemlos an verschiedenen Stellen anzeigen lassen. Ich habe das bei mir wie folgt gelöst:

Teil 1 (Version):

JavaScript

(function() {
    
    var agent = 1; // if you just want the clock set this to zero
    var personalText = '        >     PROFIL-TEST     <      '; // your personal text here
    var cssColor = 'yellow'; // Schriftfarbe

    var css = 'padding-top: 4px !important; padding-right: 11px; padding-left: 10px; color: ' + cssColor + '; font-weight: bold;';
    var cssA = 'margin: 5px 5px 5px 5px; width: auto;';
    //Farbe für dunkles Theme: yellow - für Standard-Theme: black oder darkred -  font-size: 14px;
    //bei Version xx.0    padding-right um 10 erhöhen!!!


    var position = document.getElementById('customizableui-special-separator4');
    // Seperator 4 ist neben Hilfemenü
    // gilt nur für jetzige Installation/Rechner (bei Neuinstallation sind das andere Zahlen…) 


    if( agent == 1 ) {
        var AgentLabel = document.createXULElement('label');
        AgentLabel.setAttribute('id', 'statusbar-agent-display');
        AgentLabel.setAttribute('class', 'statusbarpanel-text');
        AgentLabel.setAttribute('style', css + cssA);
        var FFstr = window.navigator.userAgent.split(' ');
        var FF = FFstr[FFstr.length-1].replace( '/' , ' ' );
        // var text = "Firefox " + gAppInfo.version + personalText;
        // Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULAppInfo).QueryInterface(Ci.nsIXULRuntime);
        
        var text = "Firefox   " + AppConstants.MOZ_APP_VERSION_DISPLAY + personalText;
        

        AgentLabel.setAttribute( 'value', text );
        position.parentNode.insertBefore(AgentLabel, position.nextSibling);
    }
    
})();

Alles anzeigen

Teil 2 (Datum/Uhrzeit):

JavaScript

(function() {
    function doDatClock() {
        var timestr = new Date().toLocaleDateString( locale , options );
        const blanks = '     ';
        let i = timestr.lastIndexOf(',');
        timestr = timestr.substring(0,i) + blanks + timestr.substring(i+1);
        if( count == 1 ) {
            var counter = new Date( 1000 * sec ).toISOString().substr( 11 , 8 ); // .replace(/^[0:]+/, '') // if you want to replace zeroes and colons
            timestr = timestr + ' (' + counter + ')';
            sec++;
        }
        ClockLabel.setAttribute( 'value', timestr );
    }
    
    var count = 0; // if you don't want a counter set this to zero
    //var agent = 1; // if you just want the clock set this to zero
    var language = 'de-DE'; // locale, e.g. 'de-DE' , 'en-US' , 'fr-FR'
    var cssColor = 'yellow'; // Font Color

    var css = 'padding-top: 4px !important; padding-left: 15px; padding-right: 17px; color: ' + cssColor + '; font-weight: bold;';
    var cssA = 'width: auto;';

    var options = { 
        weekday: 'short', // war long
        year: 'numeric', 
        month: '2-digit', // war long
        day: '2-digit',     // war numeric
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit' 
    };
    
    var sec = 0;

    var locale = language || window.navigator.languages[0];

    var position = document.getElementById('customizableui-special-separator5');

    var ClockLabel = document.createXULElement('label');
    ClockLabel.setAttribute('id', 'statusbar-clock-display');
    ClockLabel.setAttribute('class', 'statusbarpanel-text');
    ClockLabel.setAttribute('style', css);    
    position.parentNode.insertBefore(ClockLabel, position.nextSibling);

    
    if( count == 1 ) {
        ClockLabel.addEventListener('dblclick', function() { sec = 0; });
    }
    
    window.setInterval( doDatClock , 1000 );
})();

Alles anzeigen

Du kannst als Position ein beliebiges Element in den Leisten definieren (mit dem Inspektor raussuchen und dann in den Skripten eintragen). Die Anzeige erfolgt rechts von diesem Element.

Im ersten Skript ist das in Zeile 13, im zweiten in Zeile 37. (jeweils in den runden Klammern)

Für die Profis hier: Ich habe als völliger Java-Sript-Laie das Skript aus #207 in 2 Teile zerlegt, um mein Ziel zu erreichen. Daher kann es sein, daß in den Skripten noch Teile enthalten sind, die im jeweiligen Skript unnötig sind. Für diesbezügliche Tipps bin ich dankbar...

Taupan

Nee, sorry, aber es wird bei mir mit deinen beiden Scripten leider nix angezeigt, was nach "Version" oder "Datum/Uhrzeit" aussieht.

reni

Zitat von grisu2099

Du kannst als Position ein beliebiges Element in den Leisten definieren (mit dem Inspektor raussuchen und dann in den Skripten eintragen). Die Anzeige erfolgt rechts von diesem Element.
Im ersten Skript ist das in Zeile 13, im zweiten in Zeile 37. (jeweils in den runden Klammern)

Das hast du gemacht?

2002Andreas

Zitat von Taupan

mehr in der Mitte von der Symbolleiste haben will,

Wenn du magst, dann teste bitte.

JavaScript

//////////////////////////////////////////////////////////////////////////////////////////////////////
//
//    Uhr in die Menüzeile - ursprünglich von hier: 
//    https://www.camp-firefox.de/forum/viewtopic.php?f=16&t=122763#p1058360
//
//    Angepasst durch Ho am 21.03.2021
//////////////////////////////////////////////////////////////////////////////////////////////////////
function doDatUhrCallback() {try{doDatUhr();}catch(ex){} }
function doDatUhr() {
    var days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
    var months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];

    window.setTimeout(doDatUhrCallback, 1000);

    var D = new Date();
    var day = days[D.getDay()];
    var month = months[D.getMonth()];
    var year = D.getFullYear();
    var hour = D.getHours();
    var minute = D.getMinutes();
    var second = D.getSeconds();

    var date = " " + day + ", " + (D.getDate() < 10 ? "0" +D.getDate() : D.getDate()) + ". " + month + " " + year + "     ";
    var time = (hour < 10 ? "0" +hour : hour) + ":" + (minute < 10 ? "0" +minute : minute) + ":" + (second < 10 ? "0" +second : second);

    var timestr = date + time ;
    var text ="www.klimamanifest.ch       ";

    var status = document.getElementById("statusbar-clock-display");
    status.setAttribute("value",text + timestr);
}

    var ClockStatus = document.getElementById("urlbar-container");

//  vor 69.0 
//  var ClockLabel = document.createElement("label");
//  ab 69.0 ?
    var ClockLabel = document.createXULElement("label");
    ClockLabel.setAttribute("id", "statusbar-clock-display");
    ClockLabel.setAttribute("class", "statusbarpanel-text");

    ClockLabel.setAttribute("style", "padding-top: 2px!important; padding-left: 20px; margin-left: -10px;color:white;font-size: 20px;text-shadow:2px 2px 4px #000000");
    
    ClockStatus.parentNode.insertBefore(ClockLabel, ClockStatus.nextSibling);
    doDatUhr();

Alles anzeigen

In Zeile 42 dieser Zusatz verschiebt den Text nach links:

margin-left: -10px;

Und damit wurde der Eintrag neben der Urlbar erstellt:

Zeile 33

var ClockStatus = document.getElementById("urlbar-container");

Taupan

2002Andreas BINGO !! Funktioniert !! Klasse, Merci...

2002Andreas

Freut mich wenn ich dir damit helfen konnte, war gern geschehen

milupo

Taupan Falls du dir doch überlegst, meine Skriptversion zu verwenden, ersetze Zeile 40:

var position = document.getElementById('nav-bar-customization-target');

durch

var position = document.getElementById('urlbar-container');

Taupan

Danke, milupo , ja dein Skript funktioniert jetzt auch....mit der Info-Anzeige "Datum/Uhrzeit" in der Mitte der Symbolleiste...

und eben auch zusätzlich mit der Anzeige der aktuellen Firefox-Version, was ich auch für sinnvoll halte, dass sie sichtbar angezeigt wird.

Nochmals DANK an alle, die (nicht nur mir) geholfen haben.

angel-ch

Hallo zusammen,

Leider funktioniert der CSS Code für das Datum mit Zeit in der Menüleiste nicht.

Machen das die Programmierer absichtlich von Firefox,

das die CSS Codes mit der Zeit nicht mehr funktionieren ?

Oder warum, gehen die nicht immer ?

Hatte es satt mit Google Chrome immer diese Änderungen,

wo die User nicht wollten.

Darum bin ich wieder zurück zu Firefox.

Das von "2002Andreas" gefällt mir am Besten.

Bist ja überall im Forum anzutreffen.

BSP.

Freitag, 13. August 2021 14:25:11

Achte darauf, das ich weissen Hintergrund habe, also schwarze Schrift.

2002Andreas

Zitat von angel-ch

Leider funktioniert der CSS Code für das Datum mit Zeit in der Menüleiste nicht.

Das ist ja auch kein CSS Code, sondern ein Script.

Siehe dazu hier:

#1

Zitat von angel-ch

das die CSS Codes mit der Zeit nicht mehr funktionieren ?

Das wurde noch nie von Mozilla unterstützt, sondern nur (geduldet).

Ergo kann es passieren, dass ein Code/Script angepasst werden müssen.

Sören Hentzschel

Zitat von angel-ch

Leider funktioniert der CSS Code für das Datum mit Zeit in der Menüleiste nicht.

Hier geht es doch um ein Script und nicht um CSS?

Zitat von angel-ch

Machen das die Programmierer absichtlich von Firefox,
das die CSS Codes mit der Zeit nicht mehr funktionieren ?

Mit Scripts und Anpassungen via userChrome.css änderst du Dinge, von denen überhaupt nicht vorgesehen sind, dass diese verändert werden. Nicht nur, dass Mozilla auf all diese Anpassungen unmöglich Rücksicht nehmen kann, sie könnten es selbst dann nicht, wenn sie es wollten, denn woher soll Mozilla wissen, in welcher Weise du deinen Firefox verbiegst? Und vor allem: Deine Anpassung kann ja auch in Widerspruch zur Anpassung von Nutzer XY stehen. Mozilla müsste die Entwicklung von Firefox schon komplett einstellen, wenn es dieses Risiko nicht mehr geben soll. Oder die Möglichkeit zur Anpassbarkeit wird entfernt. Dann gibt es auch keinen Ärger mehr (nach dem Ärger darüber, dass Firefox nicht mehr individuell angepasst werden kann).

Zitat von angel-ch

Oder warum, gehen die nicht immer ?

Mozilla hat den Job, Firefox weiterzuentwickeln. Und wenn du Anpassungen vornimmst, welche interne und nicht für die Öffentlichkeit bestimmte Schnittstellen nutzen, oder Annahmen über Element-Bezeichnungen triffst, kann es halt sein, dass du deine Anpassungen ab und an mal anpassen musst, wenn Mozilla an diesen Stellen etwas verändert.

Zitat von angel-ch

Hatte es satt mit Google Chrome immer diese Änderungen,
wo die User nicht wollten.
Darum bin ich wieder zurück zu Firefox.

Nur ist das hier mit Chrome überhaupt nicht vergleichbar, denn vergleichbare Möglichkeiten wie Firefox bietet kein einziger anderer Browser auf dem Markt. Es ist ein Geschenk, dass nahezu jeder Aspekt von Firefox für seine ganz individuellen Bedürfnisse verbiegbar ist. Dass man ab und an wieder was anpassen muss, ist da ein sehr geringer Preis dafür. Die einzigen Alternativen sind die bereits genannten: Entwicklung von Firefox einstellen oder die Anpassbarkeit komplett verbieten. Nur dann könnte gewährleistet werden, dass Nutzer eigene Anpassungen nie an ein Firefox-Update anpassen müssen.

Boersenfeger

Hier funktioniert dieses Script einwandfrei mit allen Firefoxversionen von 91 bis 93

JavaScript

    /* Uhr in Nav-Bar */
    
function doDatUhrCallback() {try{doDatUhr();}catch(ex){} }
 function convertUTCDateToLocalDate(date) {
  var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);

  var offset = date.getTimezoneOffset() / 60;
  var hours = date.getHours();

  newDate.setHours(hours - offset);

  return newDate;
}
 function doDatUhr() {
 var days = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
 var months = ["Jan", "Feb", "März", "Apr", "Mai", "Juni", "Juli", "Aug", "Sep", "Okt", "Nov", "Dez"];
 window.setTimeout(doDatUhrCallback, 1000);
            var D = new Date();
            var day = days[D.getDay()];
            var month = months[D.getMonth()];
            var year = D.getFullYear();
            var hour = D.getHours();
            var minute = D.getMinutes();
            var second = D.getSeconds();

            var date = day + ", " + (D.getDate() < 10 ? "0" +D.getDate() : D.getDate()) + ". " + month + ". " + year + " ";
            var time = (hour < 10 ? "0" +hour : hour) + ":" + (minute < 10 ? "0" +minute : minute) + ":" + (second < 10 ? "0" +second : second);
            var timestr = date + time + " Uhr" + " ";
            var text = " Nightly 64 ";
            var status = document.getElementById("statusbar-clock-display");
            status.setAttribute("value", text + timestr);
            if (hours < 6 || hours > 20) {
            status.setAttribute("style", "color: white");
            }
            else {
            status.setAttribute("style", "color: white");
            }
            status.setAttribute("style", clockstyle);
            }

            var ClockStatus = document.getElementById("urlbar-container");
            var ClockLabel = document.createXULElement("label");
            ClockLabel.setAttribute("id", "statusbar-clock-display");
            ClockLabel.setAttribute("class", "statusbarpanel-text");
            ClockLabel.setAttribute("style", "padding-top:3px!important;font-size:19px;font-weight:bold;color:white!important;");
            ClockStatus.parentNode.insertBefore(ClockLabel, ClockStatus.nextSibling);
            doDatUhr();

Alles anzeigen

Zeile 29 müsste angepasst werden, da steht derzeit Nightly 64.

milupo

Zitat von Boersenfeger

Hier funktioniert dieses Script einwandfrei mit allen Firefoxversionen von 91 bis 93

Sicher tut es das, aber solange wie angel-ch von einer falschen Voraussetzung ausgeht, nämlich von CSS statt von Benutzerskript, wird es bei ihm auch nicht funktionieren.