(Bold minds might want to try the automatically generated english version of this website.)
http://www.pfarrhaus2.de/john/notes30_canvas/jl_notes301.html

Ein Widget im Browserfenster ohne Titelleiste erzeugen

Bei meiner Beschäftigung mit canvas hatte ich jetzt eine hübsche HTML-Anwendung (Analoguhr) entdeckt, die ich als eine Art widget permanent in einem kleinen Fenster auf dem Desktop anzeigen wollte.

Kein Problem, sollte man meinen, Webseite samt Script erstellen, aufrufen, Fenster verkleinern und auf dem Desktop positionieren.

Anklicken von canvas4_clock.html im Dateimanager bringt jedoch noch nicht ganz den gewünschten Effekt: Fenster mit vielen Titelleisten. Das ist zwar gerade noch brauchbar, sieht aber unschön aus. Die überflüssigen Titelleisten von Windows und Firefox benötigen fast mehr Platz als das, was zu sehen sein soll, nämlich nur der Inhalt des Browserfensters Bestandteile eines Firefox Fensters .
Also weg mit der Tableiste, das geht bei Firefox einfach: unter Extras->Einstellungen->Tabs->Tab-Leiste immer anzeigen das Häkchen entfernen. Da die Anwendung sowieso nur ein Fenster des Browsers belegt, wird jetzt auch keineTableiste angezeigt.

Auch die Statusleiste von Firefox kann einfach entsorgt werden: ein Klick auf Ansicht->Statusleiste schaltet deren Anzeige ein bzw. aus. Analog funktioniert das auch mit der Navigationsleiste: ein Klick auf Ansicht->Symbolleisten->Navigations-Symbolleiste schaltet auch deren Darstellung um.

Schön und gut, das bringt mich aber nicht wirklich weiter, weil die gewählte Voreinstellung ohne Tab, Status- und Navigationsleiste jetzt für jedes Browserfenster gilt, das ich öffnen will. Immer noch optimistisch, gehe ich daran, ein eigenes Profil nur für diese eine Anwendung anzulegen. Dann sollten sich die Einstellungen nicht mehr gegenseitig beinflussen.

Ich rufe in Windows Start->Ausführen... auf, gebe "%programfiles%\Mozilla Firefox\firefox.exe" -P ein, und ... ein neues Browserfenster tut sich auf, anstelle des erwarteten Profilmanagers. Also zuerst wie im Wiki angegeben, Firefox schließen und dann den Profilmanager starten. Jetzt kann ich ein neues Profil erstellen, ich nenne es kiosk2. Vor dem Beenden muß man darauf achten, dass das Häkchen bei Beim Start nicht nachfragen gesetzt und der Eintrag default ausgewählt bleibt. Firefox soll ja nach wie vor mit den gewohnten default-Einstellungen starten, soferne nichts anderes angegeben wird.

Eingabe von %appdata%\Mozilla\Firefox\Profiles in der Adresszeile eines Explorerfensters zeigt den neuen Profilordner, der Name besteht aus 8 zufälligen Zeichen, einem Punkt und dem Profilnamen. Bei mir hat er den Namen 575nigdd.kiosk2 erhalten.

Nach Rechtsklick auf dem Desktop und Auswahl von Neu->Verknüpfung gebe ich als Ziel "%programfiles%\Mozilla Firefox\firefox.exe" -no-remote -P kiosk2 j:\john\dev\canvas\canvas4_clock.html und als Name für die Verknüpfung uhr ein. Bei Klick auf die Verknüpfung startet Firefox dann wegen -P kiosk2 mit dem Profil kiosk2.
Ab Firefox 2 kann für das gleichzeitige Verwenden mehrerer Profile der Startparameter -no-remote benutzt werden. Aufruf von Firefox mit diesem Parameter startet das neue Profil, auch wenn Firefox bereits mit einem anderen Profil verwendet wird. Links aus externen Anwendungen können nicht in Profilen geöffnet werden, welche mit diesem Parameter gestartet wurden.

Ohne Tab- und Statusleiste sieht das Fenster tatsächlich schon etwas besser aus ein Fenster mit weniger Titelzeilen , jetzt soll nur noch die Menüleiste verschwinden. Nach mehreren erfolglosen Versuchen, mit about:config die Abgründe der Firefoxkonfiguration zu erforschen, gebe ich zunächst auf und überlege, wie ich die Titelleiste des Windows-Fensters entsorgen kann.

Ich beschließe, die Uhr-Anwendung nicht direkt, sondern in einem Pop-up-Fenster aufzurufen. Hierzu erstelle ich die HTML-Datei startclock.html. Sie zeigt nichts an, sondern soll nur dazu dienen, ein Pop-up-Fenster ohne Titelleiste zu erzeugen.

Datei startclock.html 
<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-type" 
        content="text/html; charset=ISO-8859-1"/>
  <title>startclock</title>
  <script>
   function Doit()
   {
   netscape.security.PrivilegeManager.enablePrivilege(
            "UniversalBrowserWrite");

   var r=window.open("canvas4_clock.html", "",
                     "width=10, height=80, titlebar=no");
   r.moveTo(screen.width-120, screen.height-150);
   this.window.close();

   netscape.security.PrivilegeManager.disablePrivilege(
            "UniversalBrowserWrite");
   }
  </script>
 </head>

 <body onload="Doit();">
 </body>
</html>

Ich ändere das Ziel der Verknüpfung uhr auf startclock.html. Beim jetzt folgenden Klick auf die Verknüpfung fragt Firefox wegen des Pop-Up-Blockers nach, ob ich das Pop-Up überhaupt zulassen will:

Firefox Meldung eines Pop-Up-Fensters
Das Profil kiosk2 wurde also vom Profilmanager anscheinend mit eingeschaltetem Blocker erzeugt.
Weil ich aber mit dem Profil kiosk2 sowieso nur lokale Anwendungen ausführen werde, kann ich diese Blockade getrost über Extras->Einstellungen->Inhalt->Pop-up-Fenster blockieren aufheben. So erspare ich mir die manuelle Bestätigung der Erlaubnis bei jedem Programmstart.

Firefox führt nach dem Laden von startclock.html die Funktion Doit() aus und diese wiederum öffnet das neue Pop-Up-Fenster, verschiebt es nach rechts unten und schließt sich dann selber. Versucht man, das neue Fenster ohne Privilegien mit window.open( ... "titlebar=no") zu öffnen, beachtet Firefox diese Option nicht und öffnet es trotzdem mit einer Titelleiste. ein Widget, aber immer noch mit Titelleiste Aber wenigstens die Menüleiste ist weg!

Da es sich um eine sicherheitsrelevante Erlaubnis handelt, fragt Firefox auch bei jeder Anforderung nach, ob sie wirklich erteilt werden soll: Firefox Meldung des Privilegienmanagers. Es nutzt auch leider nichts, Diese Entscheidung merken mit einem Haken zu versehen, aus mir unbekannten Gründen funktioniert diese Möglichkeit nicht.
Will man nicht bei jedem Programmaufruf diese Frage manuell beantworten müssen, kann man sich diese Bequemlichkeit nur mit einer noch weitergehenden Vollmacht erkaufen. Mehr hierzu siehe unten.

Das Ergebnis Widget ohne Titelzeile ist jetzt so ziemlich das gewünschte. Man könnte ja noch versuchen, den Rahmen zu entsorgen, mir aber reicht es zunächst.

Anmerkungen

  • Obiges funktioniert aus verschiedenen Gründen nur mit Firefox (ich habe es unter Version 3.5.11 und unter Windows XP entwickelt):
    Zunächst unterstützt der Internet Explorer in seiner derzeitigen Version 8 kein HTML5 und damit auch kein canvas. Weiters verfügt er zwar über einen sogenannten "kiosk-mode", dieser stellt aber das Browserfenster in Bildschirmgröße dar und müsste dann mit anderen Methoden als hier verwendet angepasst werden.
  • Man kann das Widget-Fenster nicht ohne Weiteres verschieben, weil die Windows-Titelzeile fehlt. Man kann es jedoch mit der Maus vergrössern, indem man eine Ecke des Rahmens anfasst und zieht. Anschliessend verkleinert man es wieder durch Ziehen der gegenüberliegenden Fensterecke.
    Alternativ könnte man natürlich eine Verschiebemöglichkeit in Javascript programmieren.
  • Auch Scrollbalken können nicht ohne Weiteres angezeigt werden. Die Option scrollbars=yes von window.open() funktioniert nicht, wenn gleichzeitig titlebar=no gesetzt ist.
  • Das Widget-Fenster kann über die Taskleiste geschlossen werden, oder nach Anklicken mit ALT+F4. In der vorliegenden Implementierung habe ich zusätzlich die Möglichkeit vorgesehen, es mit Doppelklick zu schließen (<body onload="Doit();" ondblclick="this.window.close();"> in der Datei canvas4_clock.html).
  • Das Betriebssystem gibt Minimalwerte für Fensterbreite und -höhe vor. Das Widget-Fenster kann also nicht ohne Weiteres beliebig verkleinert werden.
  • Wenn gewünscht, und wenn man die Konsequenzen wirklich verstanden hat, kann man in Firefox about:config aufrufen und security.fileuri.strict_origin_policy in die Filterzeile eingeben. Mit Doppelklick kann man den Eintrag dann auf false setzen. Hiermit werden aber viele Sicherheitsnachfragen des Browsers ausser Kraft gesetzt, sodass man diese Einstellung wirklich nur in dem für lokale Anwendungen erstellten Profil setzen sollte.
    Achtung! Diese Einstellung NICHT im default-Profil setzen!
  • netscape.security.PrivilegeManager.enablePrivilege(..) benötigt man auch für Anwendungen, in denen Firefox lokale Dateien erzeugen, lesen oder schreiben soll.
  • Man kann auf die Punkte 6.1 bis 6.3 der untenstehenden Zusammenfassung verzichten, wenn man window.open() zusätzlich mit der Option chrome="yes" aufruft.
  • Ganz kann ich mich doch nicht zurückhalten und installiere schnell noch das Programm atomic clock sync, das die Uhrzeit meines Rechners mit einem Zeitserver abgleicht. Mein neues Gadget soll ja schließlich nicht irgendeine Zeit anzeigen, sondern die korrekte!

Zusammenfassung

Ziel war es, Firefox zum Anzeigen einer lokalen Webseite (in diesem Fall der Anzeige einer simplen Uhr) in der Art eines Widgets (also ohne überflüssige Fensterleisten) zu verwenden. Parallel dazu sollte Firefox natürlich mit den gewohnten Einstellungen unverändert funktionieren.

  1. Sicherungskopie des Profilverzeichnisses von Firefox, normalerweise also von %appdata%\Mozilla\Firefox\Profiles erstellen.
  2. Punkt 1 nicht überspringen!
  3. Gewünschte Anwendung (hier canvas4_clock.html) und das Aufrufprogramm (hier startclock.html) erstellen.
  4. Neues Profil erstellen. (Hier kiosk2.)
  5. Firefox unter dem neuen Profil aufrufen:
    Start->Ausführen...
    "%programfiles%\Mozilla Firefox\firefox.exe" -no-remote -P kiosk2
  6. Neues Profil anpassen:
    1. Tableiste verbergen
      Extras->Einstellungen->Tabs->Tab-Leiste immer anzeigen
    2. Statusleiste verbergen
      Ansicht->Statusleiste
    3. Navigationsleiste verbergen
      Ansicht->Symbolleisten->Navigations-Symbolleiste
    4. Popupfenster zulassen
      Extras->Einstellungen->Inhalt->Pop-up-Fenster blockieren
  7. Anwendung im neuen Profil starten.