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.