Das Web, scheibchenweise

Das Web-Scheibchen Widget ist in Plasma (in kdeplasma-addons, noch bis zum Git-Umzug am Wochenende) seit 4.4 enthalten. Ein Web-Scheibchen ist ein Teil einer Website auf dem Desktop. Das kann hilfreich sein, wenn man einen Ausschnitt einer Website im Auge behalten will, allerdings dafür aber keinen kompletten Browser starten will.

Richard Moore und ich haben das Webslice Applet auf der Akademy 2009 in Akademy geplant, richmoore hat dann einen Prototypen geschrieben, den ich in ein einfaches Plasma Widget umgesetzt habe. Seit dem ersten Release zusammen mit 4.4 hat sich allerdings wenig dran getan. Es funktioniert im Prinzip recht einfach: Wir laden eine Website in einem Webkit Widget (auf der Plasma Canvas), blenden die Scrollbalken aus, scrollen an die richtige Stelle (zur Geometrie einzelner Element kann man Webkit befragen) und zoomen soweit ein oder aus, dass der Ausschnitt in’s Widget passt. Das funktionierte so recht gut, allerdings blieben zwei Probleme: Das Vergrössern bzw. Verkleinern des Widgets war viel zu langsam, und dadurch nicht flüssig genug, und die Auswahl des Ausschnitts war alles andere als intuitiv — man musste den richtigen CSS2 Selector eingeben, diesen also erst aus dem Quellcode der Website puhlen.

Gestern abend habe ich eine Reihe Änderungen eingepflegt, die hier deutliche Verbesserung bringen. Nach Review auf der plasma-devel Mailingliste habe ich diese Änderungen auch in den 4.6 Zweig committet, d.h. dass sie mit 4.6.1 in ca. einem Monat zur Verfügung stehen werden. (Oder ihr besorgt euch den Code aus KDE’s SVN bzw. Git, unter kdeplasma-addons/applets/webslice.) Schau’n wir mal, was ich so geändert habe…

Performance

3 Web-Scheibchen mit verschiedenen Ausschnitten von mehreren Seiten Vor allem das Vergrössern und Verkleinern des Widgets machte eigentlich kaum Spass. Das Web-Scheibchen Widget benutzt eine Webkit View, und zeigt die Seite an einer bestimmten Position an, mit einem zur Plasmoidgrösse passendem Zoomfaktor. Soweit, so gut. Dem Performanceproblem lag zugrunde, dass das Widget während dem Andern seiner Grösse so viele Resize Events abfing, dass es mit dem Zoomen und Positionieren nicht nachkam, und diese sich aufstauten. Dem habe ich Abhilfe verschafft erstmal die Codepfade, die zum diesen “resize events” führen aufgeräumt habe, sodass dieser Vorgang nur stattfindet, wenn es wirklich nötig ist. Dann habe ich mittels eines QTimers verschiedene, schnell aufeinanderfolgende Events zusammengefasst. Beim Zoomen des Widgets war auch noch so Einiges drin, wenn man die Backingstore zeitweise einfriert, und das komplette Neurendern der Seite dann um einige Millisekunden verzögert. Zusammen damit habe ich auch die Seitenverhältnisse flexibler gemacht, diese waren vorher fest eingestellt. (Man kann in Plasma immmer noch unabhängig von den Seitenverhältnissen verkleinern/vergrössern, indem man die CTRL Taste gedrückt hält.) Das erste Problem ist also gründlich gefixt.

Verbesserte Anwenderfreundlichkeit

Während der Konfiguration schaltet das Web-Scheibchen Widget in den Übersichtsmodus Nächster Punkt: Ergonomie. Wie schon erwähnt, schränkt das notwendige extrahieren von CSS2 Selektoren aus Webseiten-Quellcode die Zielgruppe des Widgets gelinde gesagt etwas ein. (Eigentlich sind die recht einfach, was aber nicht heisst, dass ich es auch meinem “Resident non-Geek” zumuten würde — ich hab’s probiert und empfing einen recht leeren Blick als Dank). Ich habe einige Zeit drüber nachgedacht, wie man sowas elegant umsetzen kann. Erstmal wollen wir Quellcode-lesen während des Setup vermeiden, es sollte einfach sein, den gewünschten Ausschnitt auszuwählen, und das Feedback für den Anwender sollte so direkt wie möglich sein. Erster Streich: Die Eingabezeile für das CSS Element hat sich verwandelt in eine editierbare Combobox, über deren Dropdown-Menü man jetzt Elemente auswählen kann. Zweiter Streich: Die URL Eingabezeile hat einen Reload-Knopf zum Nachbarn bekommen, mit dem man eine neue Seite in die Voransicht laden kann (damit werden auch die Elemente in der Combobox erneuert). Dritter Streich: Das Widget zeigt jetzt während der Konfiguration eine Übersicht der ganzen Seite an, und markiert das gerade ausgewählte Element. (Mann kan, wie in allen Comboboxen dann auch mit Maus bzw. Pfeiltasten durch die Liste navigieren, gleichzeitig sieht man im Widget welcher Ausschnitt sich hinter dem kryptischen Namen des Elements (#myid, zum Beispiel) verbirgt. Sobald man bestätigt, zeigt das Widget dann den Ausschnitt passend gezoomt an.

Alles in allem nicht ganz so triviale Änderungen. Da das Widget allerdings bisher kaum benutzbar war, die Änderungen sich recht einfach ohne Änderungen an den Übersetzungen vornehmen liessen, und das Risiko auf Regressions in anderen Teilen sehr gering war, habe ich die Änderungen auch in den 4.6 Zweig eingepflegt. Damit werden sie mit 4.6.1 nächten Monat, und mit openSUSE im März mitgeliefert, und wir somit vielleicht dem ein oder anderen Anwender eine Freude bereiten können.

Hier und da gibt’s natürlich noch Verbesserungsmöglichkeiten. So kann ein erklärender Tooltip hier und da sicherlich nicht schaden, flexiblere Grössenoptionen, wie Proportion, Originalgrösse der Seite (interessant für “flüssige Layouts”), zum Beispiel. Ich habe dafür erstmal sinnvolle Voreinstellungen gewählt, abhängig vom Feedback auf’s jetzige Featureset sehen wir dann mal weiter.

4 Minuten Hobbychirurgie

Abschliessend noch unsere Mitmach-Runde im Mitmach-Web 2.0! Wir haben einen netten Mechanismus, mit dem man kinderleicht eigene Web-Scheibchen-Widgets erstellen kann. Dazu kopiert ihr einfach eine bereits existierende Web-Scheibchen .desktop Datei. Dateinamen ändern (wir wollen ja nichts anderes überschreiben), Namen, Kommentar, ev. auch Übersetzungen updaten (oder einfach löschen, falls nicht nötig), Autor, etc, Einträge die man nicht versteht, einfach drin lassen, auf jeden Fall aber die Plasma Library und Mimetype Einträge. Fügt dann eine Zeile wie diese hinzu, um das Web-Scheibchen auf das Element mit id=”myid” im Tag von der Frontpage von mysite.org läd:

 X-Plasma-Args=http://mysite.org,#myid

Diese Datei muss man dann nur noch nach ~/.kde(4)/share/kde4/services/, kbuildsycoca4 ausführen, um die Plugins und Metadaten auf den neusten Stand zu bringen, und das Widget über den Widget Explorer zur Plasma Arbeitsfläche oder dem Netbook hinzufügen.

Eine mögliche Entwicklungsrichtung für die Zukunft wäre dann, diese selbsterstellten Web-Scheibchen über opendesktop.org mit anderen zu teilen, quasi “Social Desktop für Web-Metzger“…

2 Responses to “Das Web, scheibchenweise”

  1. jens says:

    Wenn der Artikel in deutsch geschrieben ist, sollte das auch konsequent durchgeführt werden!

    Was soll die Scheiße: “Verbesserte Usability” ?