Button für ein Popup zur Zeitanzeige verschiedener Städte in verschiedenen Zeitzonen

Mira_Belle

Zitat von 2002Andreas

Daran ändert sich doch nichts, nur weil du die CSS Codes in Skripte packst
Außerdem, Skripte nutzen zu können bedarf einer größeren Vorbereitung als CSS Codes zu nutzen.
Und wenn ein Skript nicht funktioniert stellt sich die Frage, liegt es am Skript oder dem CSS Code darin.
Ich nutze hier 62 CSS Dateien und 41 Skripte.
Alle CSS Dateien haben einen Namen/Bezeichnung womit man/ich sofort erkennen kann, was damit verändert wurde.
Für mich! gibt es also keinen Grund, meine CSS Codes extra noch in Skripte zu packen.
PS:
Aber wie immer...jeder wie er mag

Alles anzeigen

Ich gebe Dir vollkommen recht, es liegt einzig und alleine an einer sinnvollen Aufteilung.

Was aber JavaScript angeht, wenn es nicht funktioniert, liegt es fast immer nicht am

eingebundenen CSS, zumal sich das ja auch ganz einfach testen lässt.

Einfach rausnehmen oder deaktivieren.

Und was die Vorbereitung angeht, ich finde, es ist auch nicht komplizierter als die Vorbereitung zur Benutzung von CSS.

Ok, um JavaScript nutzen zu können, muss man diese Schritte ja auch machen und

dann kommt das andere Gedöhns auch noch dazu.

OK, der aufwand ist doch etwas mehr, geb' mich geschlagen, hast ja recht.

Um nochmals auf das Thema zu kommen, ich habe ja das JavaScript für Datums- & Zeitanzeige am Laufen.

Richtig toll fände ich es, wenn beim "hovern" sich dann ein "tooltip" öffnen täte, wo diverse Uhrzeiten

anderer zuvor ausgewählter Orte anderer Zeitzonen angezeigt werden würden.

Ob mir bei diesem Vorhaben jemand helfen könnte?

Ich finde leider keinen Ansatz um den "tootip" zu missbrauchen,

vielleicht hänge ich aber gerade auch einem falschen Ansatz hinterher.

2002Andreas

Zitat von Mira_Belle

geb' mich geschlagen, hast ja recht.

Alles ist gut

Ich verstehe dich ja, es macht dir zur Zeit einen riesen Spaß Skripte zu erstellen.

Finde ich auch toll von dir

Mira_Belle

Ich brauche eine eindeutige ID für die von mir erwähnte Anzeige.

In dem Skript ist ja gar keine!

Dann müsste CSS-Code rein, der festlegt wie das Popup aussehen soll und das es anfänglich ausgeblendet sein soll.

Das sollte irgendwie mit display: none; oder visibility: hidden; umzusetzen sein.

Und in das Skript muss dann noch Code, um auf das Hover-Ereignis zuzugreifen und das Menü bei Bedarf anzuzeigen.

Einen Codeschnipsel dafür habe ich im Netz gefunden!

Könnte so aussehen:

JavaScript

const element = document.getElementById('your-element-id');

element.addEventListener('mouseover', () => {
    // Zeige das Menü an, z.B. durch Ändern von display oder visibility
    element.style.display = 'block';
});

element.addEventListener('mouseout', () => {
    // Verberge das Menü, wenn der Mauszeiger das Element verlässt
    element.style.display = 'none';
});

Alles anzeigen

Nur, wie setze ich das mit der ID um?

HA!

Habe mich geirrt, hat doch eine ID

#titlebar-clock-display

BrokenHeart

Zitat von Sören Hentzschel

Funktioniert das im Script nicht? Da ich keine Scripts nutze, kann ich es nicht testen. Über die Konsole funktioniert das zumindest, das wird im DOM des Browsers eingefügt.

Um ehrlich zu sein, habe ich das noch nie so ausprobiert (was ich aber nachholen werde). So ist es dann ein direktes Kindobjekt des Content-Bereichs, also Teil der anzuzeigenden Webseite, Was zwar nicht meinem Verständnis eines echten Dialogfensters entspricht, aber vielleicht funktioniert das ja auch so, dass man es global für einen Einstellungsdialog oder Meldungsbox verwenden kann. Das würde einem natürlich sehr viel Arbeit ersparen. Ich werde es einfach mal im Skript-Kontext testen. Danke für den Test in der Konsole!

Zitat von Sören Hentzschel

Für die allermeisten dürfte schlicht und ergreifend kein Bedarf an sowas bestehen. Die Einstiegshürde ist vergleichsweise hoch und andauernd werden dadurch Probleme verursacht oder die Scripts müssen aktualisiert werden. Eine Update-Funktion gibt es ja auch keine. Dazu die oft nicht gute Code-Qualität und nicht gewährleistete Sicherheit.

Die Aussage stimmt sicher für den absolut überwiegenden Teil der User hier. Aber wenn ich mir die Zugriffszahlen und auch die Antworten hauptsächlich auf die CSS-Threads, aber auch auf die JavaScript-Threads anschaue, dann sind doch durchaus Begehrlichkeiten da, was "Sonderwünsche" in Bedienung und Aussehen des Firefox angehen. Klar sind das meist die üblichen Verdächtigen, aber immer wieder kommen dann auch von Usern mit wenigen Beiträgen solche Fragen wie "Kann man es nicht so einrichten, dass...". Und irgendwie war und ist meine Hoffnung, dass man vielleicht irgendwann vom "Konsumenten" zum "Produzenten" wird. Die meisten, die sich hier ja aktiv beteiligen, machen das ja nicht hauptberuflich oder haben eine entsprechende Ausbildung, sondern sind begeisterungsfähige "Hobby-Code-Frickler".

Ja die Code-Qualität ist oft unter aller Sau. Da brauche ich nur mein MultiRowTabs-Skript anschauen, welches ich mit viel Enthusiasmus, aber mit noch wenigen JavaScript-Kenntnissen "zusammengefrickelt" habe. Aber man kann sich bzw. sollte sich ja weiterentwickeln...

Wegen der Einstiegshöhe: Für das Erstellen: ja, das lässt sich nicht verhindern! Aber für das Nutzen von CSS/JS könnte sie viel niedriger sein. Ich bin mir sicher, dass man die Möglichkeiten zur Anpassung des Firefox im Unterforum "Individuelle Anpassungen" besser "vermarkten" müsste. Es gibt meines Erachtens zu viele angeheftete Threads auf der ersten Seite (damit meine ich auch ausdrücklich meine) die mittlerweile auf den ersten Blick mehr verwirren und eher abschrecken. Wenn man bedenkt, dass man um CSS zu nutzten, eigentlich nur eine zusätzliche Datei in einem bestimmten Verzeichnis und einen Eintrag in 'about:config' oder 'user.js' braucht und für das Funktionieren von Skripten nur eine Handvoll Dateien kopieren muss, dann schrecken so viele Threads und Hilfestellungen eher ab, als das es den Einstieg erleichtert. Da könnte man sicher vieles straffen oder zusammenfassen und irgendwie didaktischer aufbereiten, dass es nicht so aussieht, wie eine lang gewachsene "Loseblatt-Sammlung".

Mein Wunsch wäre ja, dass sich z.B. ein Windows/Linux-Skript Experte mal etwas Zeit nimmt und diese Voreinstellungen und Kopieraktionen für CSS und JavaScript automatisiert. Habe ich leider keine Ahnung davon. Ich wollte schon ein C++ Programm schreiben (Windows). Aber eine '.exe' Datei, auch wenn man Sourcen und sonstige BuildTools zum selber Bauen mitliefert, würde ich persönlich auch nicht gerne verwenden. Zumal ja alles noch mit Admin-Rechten ausgeführt werden muss. Außerdem: Kanonen->Spatzen...

Zitat von Sören Hentzschel

Besonders problematisch finde ich die Art von Script, welche interne Firefox-Funktionen überschreibt. Denn das sind tickende Zeitbomben.

Das sehe ich auch so und ist in den allermeisten Fällen auch überhaupt nicht nötig bei den vielen Möglichkeiten durch die Services, die von Mozilla angeboten werden. Wenn doch jemand eine Änderung eines bestehenden Verhaltens haben möchte, die das Ersetzen von bestehendem Code erfordern würde, dann muss man halt sagen, dass genau hier die Grenze der Anpassbarkeit erreicht ist. Aber es gibt fast immer Alternativen...

Zitat von Sören Hentzschel

Meine Sicht auf das Thema ist am Ende einfach nicht die eines neugierigen Bastlers, der jeden Stein umdrehen möchte, nur weil es halt geht. Meine Zielsetzung für Firefox geht viel mehr in die Richtung von Mozilla, ein funktionierendes Produkt zu haben, welches nicht anfällig für selbst erzeugte Defekte ist. Zumal ich viele der in diesem Forum umgesetzten Dinge - und damit will ich niemandem zu nahe treten! - sinnlos und oft auch optisch wenig ansprechend finde, was in meinem Firefox einfach keinen Platz hat.

Für mich war der Grund, mich mit dem dem Thema JavaScript auseinanderzusetzen, ein anderer. Ich würde mich durchaus als "neugierigen Bastler" bezeichnen, der aber wirklich nur zusätzliche Skripte in seinem FireFox haben möchte, die seine Arbeit auch wirklich spürbar erleichtern . Deswegen nutze ich auch nur eine Handvoll Skripte. Ein anderer Grund war, dass ich seit Ewigkeiten programmiere, aber im Laufe meines Berufslebens nie mit 'Web-Technologien' zu tun hatte. Nachdem ich mich aktiv aus der professionellen Entwicklung verabschiedet habe, habe ich eben Lust bekommen das hobbymäßig nachzuholen, was ich nie brauchte. Und da bot sich die einmalige Möglichkeit des FireFox an, die eben das mit 'userChrome' erlaubt.

Edit: das Dialog-Element funktioniert einwandfrei im Skript! War eigentlich auch klar, nachdem es auch schon in der Konsole läuft. Bis auf die "Nicht-Verschiebbarkeit" verhält es sich auch wirklich so, wie ich es von einem normalen modalen Dialogfenster erwarten würde. Danke vielmals...

milupo

Zitat von BrokenHeart

Die Aussage stimmt sicher für den absolut überwiegenden Teil der User hier. Aber wenn ich mir die Zugriffszahlen und auch die Antworten hauptsächlich auf die CSS-Threads, aber auch auf die JavaScript-Threads anschaue, dann sind doch durchaus Begehrlichkeiten da, was "Sonderwünsche" in Bedienung und Aussehen des Firefox angehen. Klar sind das meist die üblichen Verdächtigen, aber immer wieder kommen dann auch von Usern mit wenigen Beiträgen solche Fragen wie "Kann man es nicht so einrichten, dass...".

Wünsche kann man derer viele haben. Aber sich diese Wünsche selbst zu verwirklichen können, ist eine andere Sache. Ich würde auch mehr können wollen, ich bin der „Möchte-wenigstens-gern-verstehen-Typ“, weil es meistens nicht zu mehr reicht. Die meisten Nutzer möchten nur haben, einige eignen sich dann weitergehende Kenntnisse an und dann gibt es noch diejenigen, die sofort wieder abtauchen, sobald auch nur ein einziger technischer Begriff fällt, z. B. CSS oder JavaScript. Mit der Bemerkung „Ich bin doch kein Programmiere“ verschwinden sie wieder in der Versenkung und lassen sich nicht einmal helfen.

Zitat von BrokenHeart

Es gibt meines Erachtens zu viele angeheftete Threads auf der ersten Seite (damit meine ich auch ausdrücklich meine) die mittlerweile auf den ersten Blick mehr verwirren und eher abschrecken.

Das gilt aber auch für alle anderen Threads. Das Problem ist eher, dass Hilfesuchende sich oft gar nicht erst die Mühe machen danach zu suchen, allenfalls sich an irgendeinen Thread „dranhängen“. Dennoch halte ich die angehefteten Threads für wichtig – nämlich für die Helfer, die Hilfesuchende gezielt dorthin lenken können. Die angehefteten Threads sollten Threads sein, die eine Zusammenfassung bzw. Übersicht bitten, es sollten keine Diskussionsthreads sein.

BrokenHeart

Zitat von milupo

weil es meistens nicht zu mehr reicht.

Das ist doch schon mal die falsche Einstellung. Gerade bei dir würde ich das eben nicht unterschreiben. Es ist immer eine Frage der Motivation, welche nicht von "Tsjakkaa, du schaffst es"-Betrügern, sondern fast immer von positivem Feedback genährt wird. Ist wie bei ganz kleinen Kindern, denen man auch sagt, dass ihr total hässliches, selbstgemaltes Bild ganz doll toll aussieht und schon lacht der/die Kleine. Gut, bei fehlender Weiterentwicklung sollte man irgendwann dann so ehrlich sein und ihm sagen, dass es einfach nur sch...e aussieht und er/sie sich anderen Freizeitbeschäftigungen widmen sollte.

milupo

Zitat von BrokenHeart

Das ist doch schon mal die falsche Einstellung. Gerade bei dir würde ich das eben nicht unterschreiben.

Danke für die Blumen, aber ich habe hier nicht von der berechtigten oder unberechtigten Meinung geschrieben, sondern von der Tatsache und habe das auch bewusst mit „meistens“ relativiert. Und ja, natürlich, zu unterschiedlichen Zeitpunkten kann das anders aussehen und sieht es auch bei mir aus, da ich, wie geschrieben habe, jemand bin, der gern verstehen möchte und man lernt wohl dann wirklich unweigerlich dazu.

Mira_Belle

Nunja, ich finde, dieser Thread nimmt nun doch eine komische Wendung an.

Es ist ja nicht falsch, was ihr schreibt, aber ich könnte wirklich etwas Hilfe gebrauchen.

Bitte.

Wie gestalte ich das Aussehen eines "Popups" per CSS, dass es so noch gar nicht gibt?

BrokenHeart

Zitat von Mira_Belle

Wie gestalte ich das Aussehen eines "Popups" per CSS, dass es so noch gar nicht gibt?

Den Dialog-Code hat Sören doch hier gepostet (und in der Konsole ausprobiert):

Beitrag

RE: Button für ein Popup zur Zeitanzeige verschiedener Städte in verschiedenen Zeitzonen

[…]

Funktioniert das im Script nicht? Da ich keine Scripts nutze, kann ich es nicht testen. Über die Konsole funktioniert das zumindest, das wird im DOM des Browsers eingefügt.

(Quelltext, 18 Zeilen)

Das sieht so nicht hübsch aus und macht nichts Sinnvolles, sondern soll nur die grundsätzliche Idee verständlich machen.

camp-firefox.de/attachment/43994/

[…]

Wir haben ja nicht wirklich fast 65.000 Mitglieder. Klar, so viele sind registriert, aber die meisten haben sich einmalig (oder auch ein paar…

Sören Hentzschel

14. September 2023 um 10:30

und ich habe es dann in einem Skript getestet(siehe Edit in #25) und es läuft.

Dürfte doch genau das sein, was du haben möchtest..

Mira_Belle

Zitat von BrokenHeart

Den Dialog-Code hat Sören doch hier gepostet (und in der Konsole ausprobiert):

Beitrag

RE: Button für ein Popup zur Zeitanzeige verschiedener Städte in verschiedenen Zeitzonen

[…]

Funktioniert das im Script nicht? Da ich keine Scripts nutze, kann ich es nicht testen. Über die Konsole funktioniert das zumindest, das wird im DOM des Browsers eingefügt.

(Quelltext, 18 Zeilen)

Das sieht so nicht hübsch aus und macht nichts Sinnvolles, sondern soll nur die grundsätzliche Idee verständlich machen.

camp-firefox.de/attachment/43994/

[…]

Wir haben ja nicht wirklich fast 65.000 Mitglieder. Klar, so viele sind registriert, aber die meisten haben sich einmalig (oder auch ein paar…

Sören Hentzschel

14. September 2023 um 10:30

und ich habe es dann in einem Skript getestet(siehe Edit in #25) und es läuft.
Dürfte doch genau das sein, was du haben möchtest..

D.h. ich brauche einfach nur diesen Code irgendwo in das JavaScript reinhängen?

Irgendwie stehe ich gerade völlig auf dem Schlauch!

Sören Hentzschel

Zitat von Mira_Belle

D.h. ich brauche einfach nur diesen Code irgendwo in das JavaScript reinhängen?

Mein Code demonstriert die Machbarkeit. Es fügt einen Dialog ein, ändert ein paar Farben und hat einen Button mit Schließen-Funktion. Den eigentlichen Inhalt sowie die gewünschte Gestaltung müsstest du noch ergänzen.

Mitleser

z.B. so ähnlich:

JavaScript

(function() {

   if (location.href !== 'chrome://browser/content/browser.xhtml') return; 
   try {
      CustomizableUI.createWidget({
         id: 'time-button',
         type: 'custom',
         defaultArea: CustomizableUI.AREA_NAVBAR,
         onBuild: function(aDocument) {         
            let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
//            toolbaritem.onclick = event => onClick(event); // Fallback für Dharkness ;)
            var props = {
               id: 'time-button',
               class: 'toolbarbutton-1 chromeclass-toolbar-additional',
               removable: 'true',
               label: 'Internationale Uhrzeiten',
               accesskey: '', // Wer möchte kann hier z.B. 'C' eintragen, dann kann per "Alt + C" das Skript ausgeführt werden
               tooltiptext: 'Internationale Uhrzeiten anzeigen',
            };            
            for (var p in props)
               toolbaritem.setAttribute(p, props[p]);            

            // Hinzufügen des Klick-Event-Handlers für das Popup
            toolbaritem.onclick = function (event) {
               if (event.button === 0) {
//-----------------------------------------------------------
const body = document.querySelector('body');
const dialog = document.createElement('dialog');
const btn = document.createElement('button');

dialog.style.backgroundColor = '#0f0';
dialog.style.borderColor = '#f00';
dialog.appendChild(btn);

btn.textContent = 'close';
btn.style.backgroundColor = '#ff0';

btn.addEventListener('click', () => {
  dialog.close();
});

body.appendChild(dialog);

dialog.showModal();
//--------------------------------------------------------
               var t,t10,t15,t20,t30,t40,t50;
               t = new Date()
               t10=t.toLocaleTimeString('de-DE',{timeZone:'Europe/Berlin',weekday:'long',day:'numeric',month:'short',hour:'numeric',minute:'numeric',hour12:false})
               t15=t.toLocaleTimeString('de-DE',{timeZone:'Europe/Lisbon',weekday:'long',day:'numeric',month:'short',hour:'numeric',minute:'numeric',hour12:false})
               t20=t.toLocaleTimeString('de-DE',{timeZone:'America/New_York',weekday:'long',day:'numeric',month:'short',hour:'numeric',minute:'numeric',hour12:false})
               t30=t.toLocaleTimeString('de-DE',{timeZone:'Europe/Moscow',weekday:'long',day:'numeric',month:'short',hour:'numeric',minute:'numeric',hour12:false})
               t40=t.toLocaleTimeString('de-DE',{timeZone:'Asia/Hong_Kong',weekday:'long',day:'numeric',month:'short',hour:'numeric',minute:'numeric',hour12:false})
               t50=t.toLocaleTimeString('de-DE',{timeZone:'Australia/Sydney',weekday:'long',day:'numeric',month:'short',hour:'numeric',minute:'numeric',hour12:false})
               alert(
 t10+' Berlin\n'
+t15+' Lagos\n\n'
+t20+' New York\n'
+t30+' Moskau\n\n'
+t40+' Hongkong\n'
+t50+' Sydney')
            };
        }

            return toolbaritem;
         }    
      });
   } catch(e) { };
   
   let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'css', 'image')); // Pfad zum Profilordner und gleich in den entsprechenden Unterordner
   let ButtonIcon = "16_time-3_ohne.svg"; // Name & Dateiendung des anzuzeigenden Symbols!
   let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);       
   let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
       #time-button { list-style-image: url("${ProfilePath}/${ButtonIcon}") 
}
       #time-button .toolbarbutton-icon {
            overflow: hidden !important;
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            fill: var(--uc-color-yellow-button) !important; 
            fill-opacity: 1 !important;    
}
      #time-button:hover .toolbarbutton-icon {
            fill: var(--uc-color-lightgray-icons) !important; 
            fill-opacity: 1 !important;    
}
      `), null, null);

   sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

})();

Alles anzeigen

ist nur als Bastelvorlage gedacht

Mira_Belle

BrokenHeart

Habe ich ausprobiert!

Und ja, da legt sich über die Seite so ein "Schleier" in dessen Mitte dieses "Gelb-Grüne-Ding, mit rotem Rand.

Nur das ist immer nach einem Neustart des Firefox da, und nicht nur, wenn ich über ein bestimmtes Areal hovere!

Auch verschwindet es, wenn ich draufklicke und kommt nicht wieder, wenn ich über das bestimmte Areal hovere!

Du hast es in einem Skript "eingebaut"?

Zeig mir doch bitte wie.

Zitat von Mitleser

z.B. so ähnlich:
...

ist nur als Bastelvorlage gedacht

Habe ich gemacht!Wenn man nun noch

alert(

t10+' Berlin\n'

+t15+' Lagos\n\n'

+t20+' New York\n'

+t30+' Moskau\n\n'

+t40+' Hongkong\n'

+t50+' Sydney')

löscht erscheint nur noch das Demo.

Nur so hatte ich es nicht gemeint

Hovere mal über den Button.

Was erscheint da?

So ein kleines Hinweisfenster!

Und was steht da bei Deinem Skript drinen?

Internationale Uhrzeiten anzeigen

Und was hätte ich gerne umgesetzt?

Dass da drinnen seht

Vielleicht habe ich mich nicht richtig ausgedrückt, aber nun sollte es klar sein!

Leider komme ich auch nicht mit diesen beiden Codeschnipsel weiter.

1.

JavaScript

      const element = document.getElementById('time-button');
      
      element.addEventListener('mouseover', () => {
          // Zeige das Menü an, z.B. durch Ändern von display oder visibility
          element.style.display = 'block';
      });
      
      element.addEventListener('mouseout', () => {
          // Verberge das Menü, wenn der Mauszeiger das Element verlässt
      //    element.style.display = 'none';
          element.style.display = 'block';          
      });

Alles anzeigen

Eventuell an falscher Stelle eingefügt.

und

2.

JavaScript

      const popupArea = document.getElementById("time-button");

      popupArea.addEventListener("mouseover", function() {
          const popupWindow = window.open("", "Popup", "width=200,height=100");
          const currentDate = new Date();
          const popupContent = `Datum: ${currentDate.toLocaleDateString()} Uhrzeit: ${currentDate.toLocaleTimeString()}`;
          popupWindow.document.write(popupContent);
      });

Wahrscheinlich das Gleiche.

Mira_Belle

Halbe Miete habe ich!

Beim Hovern über den "time-button" erscheint nun ein Fenster!

Nun muss ich es noch schaffen, dass da auch was angezeigt wird.

Mira_Belle

Hab es nun hinbekommen.

Es ist der Code 2!

Jedoch funktioniert window.open nicht, sondern ich muss window.alert nehmen.

Das ist blöd, denn damit das Fenster wieder schließt, muss entweder auf den OK Button geklickt werden

oder eben auf das rote X in der rechten Ecke oben.

Was auch irgendwie doof ist, der Button zur Anzeige von Datum und Uhrzeit muss erst einmal betätigt worden sein,

sonst funktioniert es auch nicht.

Hier mal meinen Erguss.

JavaScript

(function() {

   if (location.href !== 'chrome://browser/content/browser.xhtml') return; 
   try {
      CustomizableUI.createWidget({
         id: 'time-button',
         type: 'custom',
         defaultArea: CustomizableUI.AREA_NAVBAR,
         onBuild: function(aDocument) {         
            let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
//            toolbaritem.onclick = event => onClick(event); // Fallback für Dharkness ;)
            var props = {
               id: 'time-button',
               class: 'toolbarbutton-1 chromeclass-toolbar-additional',
               removable: 'true',
               label: 'Internationale Uhrzeiten',
               accesskey: '', // Wer möchte kann hier z.B. 'C' eintragen, dann kann per "Alt + C" das Skript ausgeführt werden
               tooltiptext: 'Internationale Uhrzeiten anzeigen',
            };            
            for (var p in props)
               toolbaritem.setAttribute(p, props[p]);            

            // Hinzufügen des Klick-Event-Handlers für das Popup
            toolbaritem.onclick = function (event) {
               if (event.button === 0) {
//-----------------------------------------------------------
                  let popupArea = document.getElementById("time-button");

                  popupArea.addEventListener("mouseover", function() {

                     let language = 'de-DE';

                     let = d10 = t.toLocaleDateString( 'de-DE', { timeZone: 'Europe/Berlin',weekday: "long"} )
                     let = d20 = t.toLocaleDateString(`${language}`,{timeZone:'America/New_York',weekday: "long"} )
                     let = d30 = t.toLocaleDateString(`${language}`,{timeZone:'Europe/Moscow',weekday: "long"} )
                     let = d40 = t.toLocaleDateString(`${language}`,{timeZone:'Asia/Hong_Kong',weekday: "long"} )
                     let = d50 = t.toLocaleDateString(`${language}`,{timeZone:'Australia/Sydney',weekday: "long"} )
   
                     let = h10 = t.toLocaleTimeString(`${language}`,{timeZone:'Europe/Berlin',hour:'numeric',minute:'numeric',hour12:false})
                     let = h20 = t.toLocaleTimeString(`${language}`,{timeZone:'America/New_York',hour:'numeric',minute:'numeric',hour12:false})
                     let = h30 = t.toLocaleTimeString(`${language}`,{timeZone:'Europe/Moscow',hour:'numeric',minute:'numeric',hour12:false})
                     let = h40 = t.toLocaleTimeString(`${language}`,{timeZone:'Asia/Hong_Kong',hour:'numeric',minute:'numeric',hour12:false})
                     let = h50 = t.toLocaleTimeString(`${language}`,{timeZone:'Australia/Sydney',hour:'numeric',minute:'numeric',hour12:false})
   
                     let = x10 = t.toLocaleDateString(`${language}`,{timeZone:'Europe/Berlin',day: "numeric", month: "2-digit", year: "numeric"})
                     let = x20 = t.toLocaleDateString(`${language}`,{timeZone:'America/New_York',day: "numeric", month: "2-digit", year: "numeric"})
                     let = x30 = t.toLocaleDateString(`${language}`,{timeZone:'Europe/Moscow',day: "numeric", month: "2-digit", year: "numeric"})
                     let = x40 = t.toLocaleDateString(`${language}`,{timeZone:'Asia/Hong_Kong',day: "numeric", month: "2-digit", year: "numeric"})
                     let = x50 = t.toLocaleDateString(`${language}`,{timeZone:'Australia/Sydney',day: "numeric", month: "2-digit", year: "numeric"})



                  window.alert(`
               Es ist ${d10}. der ${x10} - es ist ${h10} Uhr in Berlin\n
               Es ist ${d20}. der ${x20} - es ist ${h20} Uhr in New York\n
               Es ist ${d30}. der ${x30} - es ist ${h30} Uhr in Moskau
               Es ist ${d40}. der ${x40} - es ist ${h40} Uhr in Hong Kong              \xa0
               Es ist ${d50}. der ${x50} - es ist ${h50} Uhr in Sydney`, 
                  "Popup", "width=200,height=100");

                  });
//--------------------------------------------------------
                  let t = new Date()
                  let language = 'de-DE';

                  let = d10 = t.toLocaleDateString( 'de-DE', { timeZone: 'Europe/Berlin',weekday: "long"} )
                  let = d20 = t.toLocaleDateString(`${language}`,{timeZone:'America/New_York',weekday: "long"} )
                  let = d30 = t.toLocaleDateString(`${language}`,{timeZone:'Europe/Moscow',weekday: "long"} )
                  let = d40 = t.toLocaleDateString(`${language}`,{timeZone:'Asia/Hong_Kong',weekday: "long"} )
                  let = d50 = t.toLocaleDateString(`${language}`,{timeZone:'Australia/Sydney',weekday: "long"} )

                  let = h10 = t.toLocaleTimeString(`${language}`,{timeZone:'Europe/Berlin',hour:'numeric',minute:'numeric',hour12:false})
                  let = h20 = t.toLocaleTimeString(`${language}`,{timeZone:'America/New_York',hour:'numeric',minute:'numeric',hour12:false})
                  let = h30 = t.toLocaleTimeString(`${language}`,{timeZone:'Europe/Moscow',hour:'numeric',minute:'numeric',hour12:false})
                  let = h40 = t.toLocaleTimeString(`${language}`,{timeZone:'Asia/Hong_Kong',hour:'numeric',minute:'numeric',hour12:false})
                  let = h50 = t.toLocaleTimeString(`${language}`,{timeZone:'Australia/Sydney',hour:'numeric',minute:'numeric',hour12:false})

                  let = x10 = t.toLocaleDateString(`${language}`,{timeZone:'Europe/Berlin',day: "numeric", month: "2-digit", year: "numeric"})
                  let = x20 = t.toLocaleDateString(`${language}`,{timeZone:'America/New_York',day: "numeric", month: "2-digit", year: "numeric"})
                  let = x30 = t.toLocaleDateString(`${language}`,{timeZone:'Europe/Moscow',day: "numeric", month: "2-digit", year: "numeric"})
                  let = x40 = t.toLocaleDateString(`${language}`,{timeZone:'Asia/Hong_Kong',day: "numeric", month: "2-digit", year: "numeric"})
                  let = x50 = t.toLocaleDateString(`${language}`,{timeZone:'Australia/Sydney',day: "numeric", month: "2-digit", year: "numeric"})

                  alert (`
                  Es ist ${d10}. der ${x10} - es ist ${h10} Uhr in Berlin\n
                  Es ist ${d20}. der ${x20} - es ist ${h20} Uhr in New York\n
                  Es ist ${d30}. der ${x30} - es ist ${h30} Uhr in Moskau
                  Es ist ${d40}. der ${x40} - es ist ${h40} Uhr in Hong Kong              \xa0
                  Es ist ${d50}. der ${x50} - es ist ${h50} Uhr in Sydney 

                  `);
               }
            };
            return toolbaritem;



            
         }    
      });
   } catch(e) { };
   
   let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons')); // Pfad zum Profilordner und gleich in den entsprechenden Unterordner
   let ButtonIcon = "clock.svg"; // Name & Dateiendung des anzuzeigenden Symbols!
   let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);       
   let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`

      #time-button { list-style-image: url("${ProfilePath}/${ButtonIcon}") }
      #time-button.toolbarbutton-1.chromeclass-toolbar-additional image.toolbarbutton-icon {
         width: 32px !important;
         height: 32px !important;
         fill: lime !important;
         fill-opacity: 1 !important;
      }

      #time-button:hover .toolbarbutton-icon {
            fill: var(--uc-color-lightgray-icons) !important; 
            fill-opacity: 1 !important;    
}
      `), null, null);

   sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

})();

Alles anzeigen

Bin heute nicht so gut drauf und es macht überhaupt keinen Spaß.

Schade.

Werde es doch noch einmal mit Sörens Code versuchen.

Wenn ich den so lese, wird es für mich einige Hürden geben.

JavaScript

const body = document.querySelector('body');
const dialog = document.createElement('dialog');
const btn = document.createElement('button');

dialog.style.backgroundColor = '#0f0';            // #00ff00 Color Hex Green1
dialog.style.borderColor = '#f00';                // #ff0000 Color Hex Red1
dialog.appendChild(btn);

btn.textContent = 'close';
btn.style.backgroundColor = '#ff0';               // #ffff00 Color Hex Yellow1

btn.addEventListener('click', () => {
  dialog.close();
});

body.appendChild(dialog);

dialog.showModal();

Alles anzeigen

Wie beeinflusse ich die Höhe und die Breite?

Wie kann ich die Ecken abrunden?

Und wie das "Fenster" mit Inhalt befüllen?

Und bekomme ich es hin, dass sich dieses Fenster auch wieder von alleine schließt?

Eine Denksportaufgabe für schlechtes Wetter.

Sören Hentzschel

Zitat von Mira_Belle

Wie beeinflusse ich die Höhe und die Breite?
Wie kann ich die Ecken abrunden?

Ganz normal über CSS. Ich habe im Code bereits Beispiele für Inline-Deklarationen via JavaScript gegeben, das sieht dann entsprechend so aus:

JavaScript

dialog.style.width = '500px';
dialog.style.height = '250px';
dialog.style.borderRadius = '5px';

Du kannst stattdessen natürlich auch eine ID oder Klasse vergeben:

JavaScript

dialog.setAttribute('id', 'myCustomId');
// oder:
dialog.classList.add('myCustomClass');

Dann machst du das ganze Styling wie gehabt über dein Stylesheet:

JavaScript

const sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(`
  #myCustomId {
    width: 500px;
    height: 250px;
    border-radius: 5px;
  }
`), null, null);

sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

Zitat von Mira_Belle

Und wie das "Fenster" mit Inhalt befüllen?

Auch hier kannst du dem Beispiel aus dem Code folgen und mit document.createElement() zum Erzeugen eines Elements arbeiten, welches du dann via append() an ein bestehendes Element anhängst (wie z.B. mit dem Button in den Dialog geschehen). Das ist von einem Sicherheits-Standpunkt aus die beste Option, aber eben auch die, welche den meisten Code erfordert. Eine bequeme Alternative wäre innerHTML, was du in einer WebExtension dafür aber nicht verwenden dürftest. In einem Script hält dich niemand auf. Firefox wird den Button aber aus Sicherheitsgründen herausfiltern, wenn du den via innerHTML einfügst. Daher musst du das mit dem zuvor gezeigten Ansatz kombinieren.

JavaScript

const btn = document.createElement('button');
btn.textContent = 'close';

dialog.innerHTML = `
  <p><strong>Eine Überschrift</strong></p>
  <p>
    Es ist ${d10}. der ${x10} - es ist ${h10} Uhr in Berlin<br/>
    Es ist ${d20}. der ${x20} - es ist ${h20} Uhr in New York<br/>
    Es ist ${d30}. der ${x30} - es ist ${h30} Uhr in Moskau<br/>
    Es ist ${d40}. der ${x40} - es ist ${h40} Uhr in Hong Kong<br/>
    Es ist ${d50}. der ${x50} - es ist ${h50} Uhr in Sydney
  </p>
`;
dialog.append(btn);

Alles anzeigen

Wichtig dabei ist auch, dass Zeilenumbrüche selbstschließend (<br/>) sind, obwohl der HTML5-Validator <br> bevorzugt (selbstschließende Tags sind ein Relikt aus XHTML). Aber der Parser ist sehr pingelig bei der Verwendung von innerHTML. Sobald nur eine Sache nicht passt, wird das nicht ausgeführt.

Zitat von Mira_Belle

Und bekomme ich es hin, dass sich dieses Fenster auch wieder von alleine schließt?

Die Methode zum Schließen habe ich auch schon gezeigt:

JavaScript

dialog.close();

Das führst du aus, wann auch immer der Dialog geschlossen werden soll.

Mira_Belle

Sören Hentzschel

Vielen lieben Dank.

Nun kann ich erstens meine Gedanken wieder ordnen, mir in aller Ruhe die Codeschnipsel anschauen

und dann anfangen herumzuexperimentieren, in der Hoffnung, dass ich es doch noch irgendwie gebacken bekomme!

Ein Gedanke zum Schließen.

Lässt sich die "Aktion" per "Zeitschleife" automatisieren?

Also mit z.B.

JavaScript

setTimeout(function() {
      dialog.close();
  },250);

Ist nur gerade so eine spontane "Eingebung".

Nächste Woche habe ich viel Zeit und dann werde ich einen neuen Anlauf wagen.

Sören Hentzschel

Zitat von Mira_Belle

Ein Gedanke zum Schließen.
Lässt sich die "Aktion" per "Zeitschleife" automatisieren?
Also mit z.B.

Ja, das ist möglich.

Mitleser

Ein Extra-Button mit dieser Funktion würde für mich eher nicht in Frage kommen, u. U. schon ein hover auf die js-Uhr die einige (auch ich) in einer Leiste haben.

Das passt nur bedingt zum Thema, deshalb:

Spoiler anzeigen

Es gibt ja verschiedene Uhren-Scripte, hier mal 'meins' mit Modal-Dialog:

JavaScript

(function() {

    if (!window.gBrowser){ return; }
   
    function doDatClock() {
        let date = new Date();
        var days = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
        var day = days[date.getDay()];
        let timestr = day + ' - ' + date.toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: '2-digit'}) +' - ' + date.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit'});

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

    var css = 'padding-top: 2px; padding-left: 0; padding-right: 0; margin-right: 6px; color: ' + cssColor + '; font-family: ' + cssFontFamily + '; font-weight:normal; font-size:13px; text-shadow: none; width: 190px;';
    var cssA = 'width: auto;';
    var sec = 0;
    var locale = language || window.navigator.languages[0];
    var position = document.getElementById('PlacesChevron');
    var ClockLabel = document.createXULElement('label');
    ClockLabel.setAttribute('id', 'statusbar-clock-display-1');
    ClockLabel.setAttribute('class', 'statusbarpanel_c-text-1');
    ClockLabel.setAttribute('style', css);    
    position.parentNode.insertBefore(ClockLabel, position.nextSibling);

    if( agent == 1 ) {
        var AgentLabel = document.createXULElement('label');
        AgentLabel.setAttribute('id', 'statusbar-agent-display-1');
        AgentLabel.setAttribute('class', 'statusbarpanel_a-text-1');
        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 = 'FF ' + AppConstants.MOZ_APP_VERSION_DISPLAY + personalText;
        

        AgentLabel.setAttribute( 'value', text );
        position.parentNode.insertBefore(AgentLabel, position.nextSibling);
    }
    if( count == 1 ) {
        ClockLabel.addEventListener('click', function() { sec = 0; });
    }
 window.setInterval( doDatClock , 1000 );
//-------------Modal-Dialog---------------------------------------
ClockLabel.addEventListener('mouseover', function() {
                                     
     const lang = 'de-DE';               
     const t = new Date();

     const d10 = t.toLocaleDateString(lang,{timeZone:'Europe/Berlin',weekday:'long'})
     const d15 = t.toLocaleDateString(lang,{timeZone:'Europe/Lisbon',weekday:'long'})
     const d20 = t.toLocaleDateString(lang,{timeZone:'America/New_York',weekday:'long'})
     const d30 = t.toLocaleDateString(lang,{timeZone:'Europe/Moscow',weekday:'long'})
     const d40 = t.toLocaleDateString(lang,{timeZone:'Asia/Hong_Kong',weekday:'long'})
     const d50 = t.toLocaleDateString(lang,{timeZone:'Australia/Sydney',weekday:'long'})
   
     const h10 = t.toLocaleTimeString(lang,{timeZone:'Europe/Berlin',hour:'numeric',minute:'numeric',hour12:false})
     const h15 = t.toLocaleTimeString(lang,{timeZone:'Europe/Lisbon',hour:'numeric',minute:'numeric',hour12:false})
     const h20 = t.toLocaleTimeString(lang,{timeZone:'America/New_York',hour:'numeric',minute:'numeric',hour12:false})
     const h30 = t.toLocaleTimeString(lang,{timeZone:'Europe/Moscow',hour:'numeric',minute:'numeric',hour12:false})
     const h40 = t.toLocaleTimeString(lang,{timeZone:'Asia/Hong_Kong',hour:'numeric',minute:'numeric',hour12:false})
     const h50 = t.toLocaleTimeString(lang,{timeZone:'Australia/Sydney',hour:'numeric',minute:'numeric',hour12:false})
   
     const m10 = t.toLocaleDateString(lang,{timeZone:'Europe/Berlin',day: '2-digit', month: 'long'})
     const m15 = t.toLocaleDateString(lang,{timeZone:'Europe/Lisbon',day: '2-digit', month: 'long'})
     const m20 = t.toLocaleDateString(lang,{timeZone:'America/New_York',day: '2-digit', month: 'long'})
     const m30 = t.toLocaleDateString(lang,{timeZone:'Europe/Moscow',day: '2-digit', month: 'long'})
     const m40 = t.toLocaleDateString(lang,{timeZone:'Asia/Hong_Kong',day: '2-digit', month: 'long'})
     const m50 = t.toLocaleDateString(lang,{timeZone:'Australia/Sydney',day: '2-digit', month: 'long'})

     const y10 = t.toLocaleDateString(lang,{timeZone:'Europe/Berlin',year: 'numeric'})
     const y15 = t.toLocaleDateString(lang,{timeZone:'Europe/Lisbon',year: 'numeric'})
     const y20 = t.toLocaleDateString(lang,{timeZone:'America/New_York',year: 'numeric'})
     const y30 = t.toLocaleDateString(lang,{timeZone:'Europe/Moscow',year: 'numeric'})
     const y40 = t.toLocaleDateString(lang,{timeZone:'Asia/Hong_Kong',year: 'numeric'})
     const y50 = t.toLocaleDateString(lang,{timeZone:'Australia/Sydney',year: 'numeric'})

     const body = document.querySelector('body');
     const dialog = document.createElement('dialog');

           dialog.setAttribute('id', 'time-dialog');
           dialog.innerHTML = `
  <table>
    <tr><strong>Internationale Uhrzeiten</strong></tr>
  </table>
  <table>
    <tr>
        <td>Berlin:</td>
        <td>${h10}</td>
        <td>Uhr - </td>
        <td>${d10},</td>
        <td>${m10}</td>
        <td>${y10}</td>
    </tr>
    <tr>
        <td>Lagos(Pt):</td>
        <td>${h15}</td>
        <td>Uhr - </td>
        <td>${d15},</td>
        <td>${m15}</td>
        <td>${y15}</td>
    </tr>
    <tr>
        <td>New York:</td>
        <td>${h20}</td>
        <td>Uhr - </td>
        <td>${d20},</td>
        <td>${m20}</td>
        <td>${y20}</td>
    </tr>
    <tr>
        <td>Moskau:</td>
        <td>${h30}</td>
        <td>Uhr - </td>
        <td>${d30},</td>
        <td>${m30}</td>
        <td>${y30}</td>
    </tr>
    <tr>
        <td>Hongkong:</td>
        <td>${h40}</td>
        <td>Uhr - </td>
        <td>${d40},</td>
        <td>${m40}</td>
        <td>${y40}</td>
    </tr>
    <tr>
        <td>Sydney:</td>
        <td>${h50}</td>
        <td>Uhr - </td>
        <td>${d50},</td>
        <td>${m50}</td>
        <td>${y50}</td>
    </tr>
  </table>
`;
setTimeout(function() {
      dialog.close();
  },1000);
body.appendChild(dialog);
dialog.showModal();

   let sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);   
   let uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(`
        #time-dialog {
            max-width: auto;
            max-height: auto;
            border: 1px solid orange;
            border-radius: 4px;
        }
      `), null, null);
   sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

 })
//-------------Modal-Dialog---------------------------------------
})();

Alles anzeigen

Da ist sicherlich noch viel redundant, gerade im Bereich der Variablen.

Mira_Belle

Zitat von Mitleser

Ein Extra-Button mit dieser Funktion würde für mich eher nicht in Frage kommen, u. U. schon ein hover auf die js-Uhr die einige (auch ich) in einer Leiste haben.

Das passt nur bedingt zum Thema, deshalb:

Spoiler anzeigen

Es gibt ja verschiedene Uhren-Scripte, hier mal 'meins' mit Modal-Dialog:

JavaScript

(function() {

    if (!window.gBrowser){ return; }
   
    function doDatClock() {
        let date = new Date();
        var days = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
        var day = days[date.getDay()];
        let timestr = day + ' - ' + date.toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: '2-digit'}) +' - ' + date.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit'});

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

    var css = 'padding-top: 2px; padding-left: 0; padding-right: 0; margin-right: 6px; color: ' + cssColor + '; font-family: ' + cssFontFamily + '; font-weight:normal; font-size:13px; text-shadow: none; width: 190px;';
    var cssA = 'width: auto;';
    var sec = 0;
    var locale = language || window.navigator.languages[0];
    var position = document.getElementById('PlacesChevron');
    var ClockLabel = document.createXULElement('label');
    ClockLabel.setAttribute('id', 'statusbar-clock-display-1');
    ClockLabel.setAttribute('class', 'statusbarpanel_c-text-1');
    ClockLabel.setAttribute('style', css);    
    position.parentNode.insertBefore(ClockLabel, position.nextSibling);

    if( agent == 1 ) {
        var AgentLabel = document.createXULElement('label');
        AgentLabel.setAttribute('id', 'statusbar-agent-display-1');
        AgentLabel.setAttribute('class', 'statusbarpanel_a-text-1');
        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 = 'FF ' + AppConstants.MOZ_APP_VERSION_DISPLAY + personalText;
        

        AgentLabel.setAttribute( 'value', text );
        position.parentNode.insertBefore(AgentLabel, position.nextSibling);
    }
    if( count == 1 ) {
        ClockLabel.addEventListener('click', function() { sec = 0; });
    }
 window.setInterval( doDatClock , 1000 );
//-------------Modal-Dialog---------------------------------------
ClockLabel.addEventListener('mouseover', function() {
                                     
     const lang = 'de-DE';               
     const t = new Date();

     const d10 = t.toLocaleDateString(lang,{timeZone:'Europe/Berlin',weekday:'long'})
     const d15 = t.toLocaleDateString(lang,{timeZone:'Europe/Lisbon',weekday:'long'})
     const d20 = t.toLocaleDateString(lang,{timeZone:'America/New_York',weekday:'long'})
     const d30 = t.toLocaleDateString(lang,{timeZone:'Europe/Moscow',weekday:'long'})
     const d40 = t.toLocaleDateString(lang,{timeZone:'Asia/Hong_Kong',weekday:'long'})
     const d50 = t.toLocaleDateString(lang,{timeZone:'Australia/Sydney',weekday:'long'})
   
     const h10 = t.toLocaleTimeString(lang,{timeZone:'Europe/Berlin',hour:'numeric',minute:'numeric',hour12:false})
     const h15 = t.toLocaleTimeString(lang,{timeZone:'Europe/Lisbon',hour:'numeric',minute:'numeric',hour12:false})
     const h20 = t.toLocaleTimeString(lang,{timeZone:'America/New_York',hour:'numeric',minute:'numeric',hour12:false})
     const h30 = t.toLocaleTimeString(lang,{timeZone:'Europe/Moscow',hour:'numeric',minute:'numeric',hour12:false})
     const h40 = t.toLocaleTimeString(lang,{timeZone:'Asia/Hong_Kong',hour:'numeric',minute:'numeric',hour12:false})
     const h50 = t.toLocaleTimeString(lang,{timeZone:'Australia/Sydney',hour:'numeric',minute:'numeric',hour12:false})
   
     const m10 = t.toLocaleDateString(lang,{timeZone:'Europe/Berlin',day: '2-digit', month: 'long'})
     const m15 = t.toLocaleDateString(lang,{timeZone:'Europe/Lisbon',day: '2-digit', month: 'long'})
     const m20 = t.toLocaleDateString(lang,{timeZone:'America/New_York',day: '2-digit', month: 'long'})
     const m30 = t.toLocaleDateString(lang,{timeZone:'Europe/Moscow',day: '2-digit', month: 'long'})
     const m40 = t.toLocaleDateString(lang,{timeZone:'Asia/Hong_Kong',day: '2-digit', month: 'long'})
     const m50 = t.toLocaleDateString(lang,{timeZone:'Australia/Sydney',day: '2-digit', month: 'long'})

     const y10 = t.toLocaleDateString(lang,{timeZone:'Europe/Berlin',year: 'numeric'})
     const y15 = t.toLocaleDateString(lang,{timeZone:'Europe/Lisbon',year: 'numeric'})
     const y20 = t.toLocaleDateString(lang,{timeZone:'America/New_York',year: 'numeric'})
     const y30 = t.toLocaleDateString(lang,{timeZone:'Europe/Moscow',year: 'numeric'})
     const y40 = t.toLocaleDateString(lang,{timeZone:'Asia/Hong_Kong',year: 'numeric'})
     const y50 = t.toLocaleDateString(lang,{timeZone:'Australia/Sydney',year: 'numeric'})

     const body = document.querySelector('body');
     const dialog = document.createElement('dialog');

           dialog.setAttribute('id', 'time-dialog');
           dialog.innerHTML = `
  <table>
    <tr><strong>Internationale Uhrzeiten</strong></tr>
  </table>
  <table>
    <tr>
        <td>Berlin:</td>
        <td>${h10}</td>
        <td>Uhr - </td>
        <td>${d10},</td>
        <td>${m10}</td>
        <td>${y10}</td>
    </tr>
    <tr>
        <td>Lagos(Pt):</td>
        <td>${h15}</td>
        <td>Uhr - </td>
        <td>${d15},</td>
        <td>${m15}</td>
        <td>${y15}</td>
    </tr>
    <tr>
        <td>New York:</td>
        <td>${h20}</td>
        <td>Uhr - </td>
        <td>${d20},</td>
        <td>${m20}</td>
        <td>${y20}</td>
    </tr>
    <tr>
        <td>Moskau:</td>
        <td>${h30}</td>
        <td>Uhr - </td>
        <td>${d30},</td>
        <td>${m30}</td>
        <td>${y30}</td>
    </tr>
    <tr>
        <td>Hongkong:</td>
        <td>${h40}</td>
        <td>Uhr - </td>
        <td>${d40},</td>
        <td>${m40}</td>
        <td>${y40}</td>
    </tr>
    <tr>
        <td>Sydney:</td>
        <td>${h50}</td>
        <td>Uhr - </td>
        <td>${d50},</td>
        <td>${m50}</td>
        <td>${y50}</td>
    </tr>
  </table>
`;
setTimeout(function() {
      dialog.close();
  },1000);
body.appendChild(dialog);
dialog.showModal();

   let sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);   
   let uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(`
        #time-dialog {
            max-width: auto;
            max-height: auto;
            border: 1px solid orange;
            border-radius: 4px;
        }
      `), null, null);
   sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

 })
//-------------Modal-Dialog---------------------------------------
})();

Alles anzeigen

Da ist sicherlich noch viel redundant, gerade im Bereich der Variablen.

Danke für das fertige JavaScript.

Genau so sollte die Funktion werden.

Werde mir das mal ganz genau anschauen.

Damit ist dieser Thread am Ende.

Eventuell spiele ich noch etwas mit Sörens Codschnipsel herum, mal seh'n.