Slicing up the Web

The Webslice applet has been in Plasma (kdeplasma-addons, to be precise) since 4.4 already. It allows the user to display a part of a webpage on the desktop. This can be useful for monitoring only a specific part of a webpage, or just to display something nice.

The Webslice applet has been written by Richard Moore and me as a functional prototype, but didn’t see much love since it was added to Plasma for 4.4 in 2009. Its basic mechanism is that you specify a “slice” within a website, which is a rectangular region. This region then gets shown in the applet, and resizes dynamically with it, zooming the “slice” in and out. The widget basically worked, but had two significant problems: Resizing was very sluggish and bound to a kept aspect ratio, and you needed to know CSS2 selector syntax to actually use it.

Earlier tonight, I’ve committed a set of changes which address these problems, and backported them after review on the plasma-devel mailing list to the 4.6 branch, so these changes become part of Plasma 4.6.1, which will be the first service and translation update to 4.6.0, which we released yesterday.


3 Webslices showing different parts of different webpages in diferent sizes First, the resize issue. The Webslice applet uses a webkit view, which displays the page and is positioned (basically scrolled with scrollbars switched off) and zoomed to fit into the area the applet covers — fairly simple in fact. The performance problem was caused by too much resizing which got passed down the stack (if you scroll and zoom a website every couple of milliseconds, it becomes quite heavy on the CPU easily. I’ve addressed this by cleaning up the codepathes that lead to resizing, so that it only causes the resize (and thus the repositioning and zoom of the webpage) when absolutely necessary. Resize events from the applet are now compressed a bit, so that we don’t get more than 10 resizes a second. That’s “good enough” for the user to see what effect his mouse-dragging has, but doesn’t have the sluggish effect. Then, while resizing, I’m freezing webkit’s tiled backing store, for an additional performance boost. The result is very noticeable, the lag and CPU-hogging while resizing is gone, and the sizing of the applet is much less unwieldy with these changes. In that process, I’ve also switched to a non-fixed aspect ratio. Bug #1 thoroughly fixed.

Improving Interaction

While configuring the widget highlights the selected slice in the page overview Next-up, slice selection. As I already mentioned, that was neither easy, nor user-friendly. (If you’re running, 4.4+, give it a shot, it really sucks ;-).) First off, you need to know CSS2 selectors (they’re quite easy, in most cases you want #myid for an element in the page being marked with id=”myid”), but still limit the utility of the widget to a rather select group. (Does this make the widget 1337?)I’ve been pondering how to best offer this to the user. It should be easy to pick a slice from all the elements that are there. The first thing I did was to turn the lineedit where you’d input the CSS selector (#myid or whatever) into an editable combobox, already containing elements to choose from. That made picking a slice much more “determistic”. Still, the #myid names are not always telling you what part of the page their actually displaying, so some more feedback is desirable. My approach there is the following: When the user opens the configuration dialog, the page is zoomed out and fully shown in the webslice applet, it switches to a preview mode. The user can now enter a different URL, and temporary load this in the slice applet. The combo box containing the elements is now updated to contain the elements of the new page. Website picked, now let’s pick a slice. By selecting a slice from the combobox, the preview mode highlights the position of the currently selected slice in the widget. You apply and it zooms in there. A nice touch is that you can “scroll” through the slice by hovering over the combobox, or flip through them using the arrow keys while focusing the combobox.
All in all, not quite unintrusive changes, but considering the widget wasn’t of much use due to above described problems anyway (there was one bug filed against it — likely a bad sign, I’m not that good a hacker). Marco and Aaron were kind enough to review the patches and agreed that they won’t hurt much, but do provide a nice set of improvements we’d like our users to get fairly quickly, not just next summer with 4.7.

There are a couple of loose ends left for 4.7, though. As I wanted to keep the possibility of a backport open, I’ve not changed any strings in the widget, adding an explaining tooltip here or there might be useful, but also some more flexible sizing options (what proportions to use for the initial rendering — that matters for fluid layouts, how to clip if the size of the widget doesn’t match the aspect ratio of the slice, etc. I’ve chosen “sane defaults” for these things now, but it’ll probably be nice having that available as an option to the user.

Create your own webslice Plasma widgets in 4 minutes

There’s one neat thing left to tell about the webslice: You can easily create your own preconfigured slices. In order to do that, copy and rename the .desktop file, change name, comment, icon, if you wish, then add a line like


Copy the file to ~/.kde(4)/share/kde4/services/, run kbuildsycoca4 and add your newly created webslice to your Plasma using the widget explorer.

A possible direction we can take this is to add a webslice category to, and start sharing our webslices with each other…

4 Responses to “Slicing up the Web”

  1. Great work! Thanks! I actually tried the applet for several sites and found the idea very good. But especially the first issue you write about had me remove that widget after only one day. Great idea also about the sharing of slices! :)

  2. moltonel says:

    Great stuff ! Those improvements were sorely needed. Will that be in the SC 4.6.1 then ? I’m not convinced about the usefullness of GHNS for webslices, but I can easily imagine distros adding a preconfigured webslice to their news bulletin or something.