Merge lp:~zsombi/ubuntu-ui-toolkit/scrollbar-delegate-fix into lp:~ui-toolkit/ubuntu-ui-toolkit/trunk

[Zsombor Egri]

Scrollbar slider size and positioning fix for ListViews with header, footer and sections.

Scrollbar slider size and positioning fix for ListViews.

[Gerry Boland (gerboland)]

demos/ScrollBars.qml
+ highlightFollowsCurrentItem: true
+ highlightRangeMode: ListView.ApplyRange
Why needed?

[Gerry Boland (gerboland)]

modules/Ubuntu/Components/ModelSectionCounter.qml
- property int sectionCount: 0
+ property int count: 0
Changing API. Are we certain no projects are using this? This change necessary?

[Gerry Boland (gerboland)]

> modules/Ubuntu/Components/ModelSectionCounter.qml
> - property int sectionCount: 0
> + property int count: 0
> Changing API. Are we certain no projects are using this? This change
> necessary?
Sorry please ignore, I'm talking rubbish

[Zsombor Egri (zsombi)]

On 01/08/2013 04:35 PM, Gerry Boland wrote:
> modules/Ubuntu/Components/ModelSectionCounter.qml
> - property int sectionCount: 0
> + property int count: 0
> Changing API. Are we certain no projects are using this? This change necessary?
It's an internal component, there shouldn't be anybody using it.

[Zsombor Egri (zsombi)]

On 01/08/2013 04:20 PM, Gerry Boland wrote:
> demos/ScrollBars.qml
> + highlightFollowsCurrentItem: true
> + highlightRangeMode: ListView.ApplyRange
> Why needed?
I had problems when the CurrentLabelAtStart was set, and that was
solving it... Need to check it again, and will remove if it doesn't
cause problems anymore.

[lp:~zsombi/ubuntu-ui-toolkit/scrollbar-delegate-fix]

267. By Zsombor Egri on 2013-01-08

some comments applied. ModelSectionCounter made private. Unit test updated.

[Gerry Boland (gerboland)]

+++ modules/Ubuntu/Components/qmldir
+ScrollbarUtils 0.1 scrollbarUtils.js
internal?

[Gerry Boland (gerboland)]

+ if (flickable && flickable.hasOwnProperty("header") && !flickable.hasOwnProperty("cellWidth")) {
Feels a little shaky, no better way?

[Gerry Boland (gerboland)]

function sliderSize(vertical, flickable, min, max) {
It would be a little more efficient to read the values of (flickable.visibleArea[sizeRatio] and (flickable.visibleArea[posRatio] just once into variables.

[Gerry Boland (gerboland)]

+ The scroll and drag functions require a slider that is not having any minimum
"a slider that does not have any minimum"

[Zsombor Egri (zsombi)]

On 01/08/2013 05:19 PM, Gerry Boland wrote:
> +++ modules/Ubuntu/Components/qmldir
> +ScrollbarUtils 0.1 scrollbarUtils.js
> internal?
Nope

[Zsombor Egri (zsombi)]

On 01/08/2013 05:27 PM, Gerry Boland wrote:
> + if (flickable && flickable.hasOwnProperty("header") && !flickable.hasOwnProperty("cellWidth")) {
> Feels a little shaky, no better way?
Well, as there's no way to have type checking, that's the closest way to
differentiate ListView from Flickable and GridView...

[Zsombor Egri (zsombi)]

On 01/08/2013 05:37 PM, Gerry Boland wrote:
> function sliderSize(vertical, flickable, min, max) {
> It would be a little more efficient to read the values of (flickable.visibleArea[sizeRatio] and (flickable.visibleArea[posRatio] just once into variables.
I was thinking of creating a JSON object and store all these properties
there.. however reading these values are not that problematic, as far as
I know properties are hashed anyway... but this could be speeded up a
bit. Then I read somewhere that using too many variables may also cause
performance issues...

[Zsombor Egri (zsombi)]

On 01/08/2013 05:38 PM, Gerry Boland wrote:
> + The scroll and drag functions require a slider that is not having any minimum
> "a slider that does not have any minimum"
ack

[Gerry Boland (gerboland)]

+ var propContent = (vertical) ? "contentY" : "contentX";
You do this & similar in each function. It would be more elegant to have a object with a vertical property that is only changed when necessary, and private propOrigin, propContent and propPos vars based on that.

[Gerry Boland (gerboland)]

+++ tests/unit/tst_components/tst_modelsectioncounter.qml
+ wait(0);
I never like seeing lines like this in a test. Is it really needed?

[Gerry Boland (gerboland)]

Just a functional problem I've noticed when interactive=true and with a mouse. This a supported use-case?

Say for example you've a long list, so the slider is small. With my mouse, I can approach the bottom right of the list view's view and a thumb appears there. Then as a consequence if I grab the thumb, I can't scroll the list much at all.

review: Needs Information

[Gerry Boland (gerboland)]

+++ themes/Ambiance/qmltheme/ScrollbarDelegate.qml
+ onActiveChanged: {
+ print(drag.active)
Remove please

review: Needs Fixing

[Gerry Boland (gerboland)]

+ // update thump position
Typo: thumb

[Juhapekka Piiroinen (juhapekka-piiroinen)]

This MR needs to be resubmitted against the new trunk.

[Zsombor Egri (zsombi)]

On 01/08/2013 07:48 PM, Gerry Boland wrote:
> + var propContent = (vertical) ? "contentY" : "contentX";
> You do this & similar in each function. It would be more elegant to have a object with a vertical property that is only changed when necessary, and private propOrigin, propContent and propPos vars based on that.
Agreed... and as said in a previous post, I'll do it.

[Zsombor Egri (zsombi)]

On 01/08/2013 07:51 PM, Gerry Boland wrote:
> +++ tests/unit/tst_components/tst_modelsectioncounter.qml
> + wait(0);
> I never like seeing lines like this in a test. Is it really needed?
I had that line there because previously the test had only one type of
model, and was filled in a loop upon component completion. In those
cases you need to get the event loop executed somehow, and wait(0) does
that, so the model gets updated for the next line of execution. It is no
longer needed, so I'll remove it.

[Zsombor Egri (zsombi)]

On 01/08/2013 07:59 PM, Gerry Boland wrote:
> Review: Needs Fixing
>
> +++ themes/Ambiance/qmltheme/ScrollbarDelegate.qml
> + onActiveChanged: {
> + print(drag.active)
> Remove please
already removed.

[Zsombor Egri (zsombi)]

On 01/08/2013 08:00 PM, Gerry Boland wrote:
> + // update thump position
> Typo: thumb
ack

[Zsombor Egri (zsombi)]

On 01/08/2013 07:55 PM, Gerry Boland wrote:
> Review: Needs Information
>
> Just a functional problem I've noticed when interactive=true and with a mouse. This a supported use-case?
>
> Say for example you've a long list, so the slider is small. With my mouse, I can approach the bottom right of the list view's view and a thumb appears there. Then as a consequence if I grab the thumb, I can't scroll the list much at all.
This is the way Scrollbars work in Ubuntu now. The way our Scrollbar
works was taken from Marumbi, and the functionality was kept as was
there. If we need to follow the current behavior, then I have to change
it again, as currently the thumb is just a decoration during dragging.

[Gerry Boland (gerboland)]

> On 01/08/2013 05:19 PM, Gerry Boland wrote:
> > +++ modules/Ubuntu/Components/qmldir
> > +ScrollbarUtils 0.1 scrollbarUtils.js
> > internal?
> Nope
Why?

[lp:~zsombi/ubuntu-ui-toolkit/scrollbar-delegate-fix]

268. By Zsombor Egri on 2013-01-09

second wave of comments applied

[Gerry Boland (gerboland)]

> On 01/08/2013 07:55 PM, Gerry Boland wrote:
> > Review: Needs Information
> >
> > Just a functional problem I've noticed when interactive=true and with a
> mouse. This a supported use-case?
> >
> > Say for example you've a long list, so the slider is small. With my mouse, I
> can approach the bottom right of the list view's view and a thumb appears
> there. Then as a consequence if I grab the thumb, I can't scroll the list much
> at all.
> This is the way Scrollbars work in Ubuntu now. The way our Scrollbar
> works was taken from Marumbi, and the functionality was kept as was
> there. If we need to follow the current behavior, then I have to change
> it again, as currently the thumb is just a decoration during dragging.

Ok let's leave it out of this MR, as I think it needs to be considered separately.

[lp:~zsombi/ubuntu-ui-toolkit/scrollbar-delegate-fix]

269. By Zsombor Egri on 2013-01-09

trunk merge

[Zsombor Egri (zsombi)]

On 01/09/2013 04:00 PM, Gerry Boland wrote:
>> On 01/08/2013 05:19 PM, Gerry Boland wrote:
>>> +++ modules/Ubuntu/Components/qmldir
>>> +ScrollbarUtils 0.1 scrollbarUtils.js
>>> internal?
>> Nope
> Why?
if you happen to create a new delegate, these utility funtions can be
used, so need to be public.

[lp:~zsombi/ubuntu-ui-toolkit/scrollbar-delegate-fix]

270. By Zsombor Egri on 2013-01-10

interactive turned off, animations fixed

Unmerged revisions

270. By Zsombor Egri on 2013-01-10

interactive turned off, animations fixed

269. By Zsombor Egri on 2013-01-09

trunk merge

268. By Zsombor Egri on 2013-01-09

second wave of comments applied

267. By Zsombor Egri on 2013-01-08

some comments applied. ModelSectionCounter made private. Unit test updated.

266. By Zsombor Egri on 2013-01-08

trunk merge

265. By Zsombor Egri on 2013-01-08

documentation fixes

264. By Zsombor Egri on 2013-01-08

test scrollbar delegate removed

263. By Zsombor Egri on 2013-01-08

section and model counting not needed anymore for proper scrollbar slider sizing and positioning

262. By Zsombor Egri on 2013-01-03

leftover code

261. By Zsombor Egri on 2013-01-03

trunk merge

=== modified file 'CHANGES'
--- CHANGES	2013-01-07 18:28:42 +0000
+++ CHANGES	2013-01-09 14:06:21 +0000
@@ -15,6 +15,20 @@
 API Changes
 ***********
 
+* None
+
+
+SDK 0.1.25
+##########
+
+Compatibility Breaks
+********************
+
+* None
+
+API Changes
+***********
+
 * Removed UbuntuShape::borderSource and UbuntuShape::maskSource. That API in
   this form reveals to be too difficult to maintain while keeping an efficient
   implementation. In the future, we plan to expose these features through

=== modified file 'debian/changelog'
--- debian/changelog	2012-12-21 09:37:46 +0000
+++ debian/changelog	2013-01-09 14:06:21 +0000
@@ -1,3 +1,9 @@
+qt-components-ubuntu (0.1.25) quantal; urgency=low
+
+  * New release
+
+ -- Florian Boucault <[e-mail]>  Tue, 08 Jan 2013 18:46:47 +0000
+
 qt-components-ubuntu (0.1.24) quantal; urgency=low
 
   * New release 

=== modified file 'demos/ScrollBars.qml'
--- demos/ScrollBars.qml	2012-12-13 08:24:38 +0000
+++ demos/ScrollBars.qml	2013-01-09 14:06:21 +0000
@@ -77,20 +77,12 @@
 
                     section.property: "title"
                     section.criteria: ViewSection.FirstCharacter
-                    section.delegate: Header {
-                        text: "Section - " + section
-                    }
-
-                    delegate: Standard {
-                        text: "Data - " + label
-                    }
-
-                    header: Header {
-                        text: "List header"
-                    }
-                    footer: Header {
-                        text: "List footer"
-                    }
+                    section.labelPositioning: ViewSection.CurrentLabelAtStart | ViewSection.InlineLabels
+
+                    section.delegate: Header { text: "Section - " + section }
+                    delegate: Standard { text: "Data - " + label }
+                    header: Header { text: "List header" }
+                    footer: Header { text: "List footer" }
                 }
                 ListModel {
                    id: listModel
@@ -99,7 +91,7 @@
                            listModel.append({"title": i, "label": i})
                        }
                    }
-               }
+                }
 
                 Scrollbar {
                     flickableItem: listView

=== modified file 'modules/Ubuntu/Components/ModelSectionCounter.qml'
--- modules/Ubuntu/Components/ModelSectionCounter.qml	2012-11-30 17:39:06 +0000
+++ modules/Ubuntu/Components/ModelSectionCounter.qml	2013-01-09 14:06:21 +0000
@@ -25,6 +25,7 @@
 */
 
 Object {
+    id: counter
 
     /*!
       \preliminary
@@ -36,13 +37,13 @@
       \preliminary
       The property contains the section counts of the given view.
     */
-    property int sectionCount: 0
+    property int count: 0
 
     /*!
       \preliminary
       The property contains the section Item height.
     */
-    property real sectionHeight: 0
+    readonly property alias sectionHeight: internals.sectionHeight
 
     /*!
       \preliminary
@@ -57,10 +58,19 @@
       This property holds the cached sections when the cacheSections property is set, and
       is an empty list when no caching is requested.
     */
-    property var sectionCache: []
+    property var cache: []
+
+    /*!
+      \internal
+      */
+    onCacheSectionsChanged: internals.checkSections()
 
     QtObject {
         id: internals
+
+        property real sectionHeight: (count > 0 && view.section.delegate) ?
+                                         QuickUtils.modelDelegateHeight(view.section.delegate, view.model) : 0.0
+
         property var myView: null
         function disconnectPreviousView()
         {
@@ -80,6 +90,9 @@
 
             if (myView.model.itemsRemoved)
                 myView.model.itemsRemoved.disconnect(checkSections);
+
+            if (myView.section.delegateChanged)
+                myView.section.delegateChanged.disconnect(checkSections);
         }
 
         function initSectionCounter()
@@ -99,38 +112,50 @@
 
             if (myView.model.itemsRemoved)
                 myView.model.itemsRemoved.connect(checkSections);
+
+            if (myView.section.delegateChanged)
+                myView.section.delegateChanged.connect(checkSections);
+
+            // finally check sections
+            checkSections();
         }
 
         function checkSections()
         {
-            if (undefined === view.section.property || "" === view.section.property)
-                return;
-            function sectionString(str)
-            {
-                return (view.section.criteria === ViewSection.FirstCharacter) ? str.charAt(0) : str;
-            }
-
             var sections = 0, sectionStack = [];
-            var current = "",
-                    prop = view.section.property,
-                    item, section = "";
-            for (var i = 0, count = (typeof view.model.count === 'undefined' ? view.model.length : view.model.count); i < count; i++) {
-                item = view.model.get(i);
-                section = sectionString(JSON.stringify(item[prop])).toLowerCase();
-                if (section !== current) {
-                    current = section;
-                    sections++;
-                    if (cacheSections)
-                        sectionStack.push(current);
+            if (view && view.section && undefined !== view.section.property && "" !== view.section.property) {
+                function sectionString(str)
+                {
+                    if (str === undefined)
+                        return "";
+                    return (view.section.criteria === ViewSection.FirstCharacter) ? str.charAt(1) : str;
+                }
+
+                var current = "",
+                        prop = view.section.property,
+                        item = null, section = "",
+                        count = (typeof view.model.length === 'undefined' ? view.model.count : view.model.length);
+                for (var i = 0; i < count; i++) {
+                    if (view.model.hasOwnProperty("get")) {
+                        item = view.model.get(i);
+                        section = sectionString(JSON.stringify(item[prop])).toLowerCase();
+                    } else {
+                        item = view.model[i];
+                        if (item.hasOwnProperty(prop))
+                            section = sectionString(JSON.stringify(item[prop])).toLowerCase();
+                        else
+                            section = sectionString(JSON.stringify(item)).toLowerCase();
+                    }
+                    if (section !== current) {
+                        current = section;
+                        sections++;
+                        if (cacheSections)
+                            sectionStack.push(current);
+                    }
                 }
             }
-            if (sectionCount != sections && sectionCount <= 0 && sections > 0) {
-                sectionHeight = QuickUtils.modelDelegateHeight(view.section.delegate, view.model);
-            } else if (sections <= 0)
-                sectionHeight = 0;
-
-            sectionCount = sections;
-            sectionCache = sectionStack;
+            counter.count = sections;
+            counter.cache = sectionStack;
         }
     }
 
@@ -138,14 +163,16 @@
 
     onViewChanged: {
         internals.disconnectPreviousView()
-        if (view && view.model) {
-            internals.initSectionCounter();
-        } else if (view) {
-            view.modelChanged.connect(function()
-            {
-                if (view.model)
-                    internals.initSectionCounter();
-            });
+        if (view && view.hasOwnProperty("model")) {
+            if (view && view.model) {
+                internals.initSectionCounter();
+            } else if (view) {
+                view.modelChanged.connect(function()
+                {
+                    if (view && view.model)
+                        internals.initSectionCounter();
+                });
+            }
         }
     }
 }

=== modified file 'modules/Ubuntu/Components/plugin/shapeitem.cpp'
--- modules/Ubuntu/Components/plugin/shapeitem.cpp	2013-01-08 02:51:09 +0000
+++ modules/Ubuntu/Components/plugin/shapeitem.cpp	2013-01-09 14:06:21 +0000
@@ -266,7 +266,6 @@
 QSGNode* ShapeItem::updatePaintNode(QSGNode* old_node, UpdatePaintNodeData* data)
 {
     Q_UNUSED(data);
-    bool setPosition = false;
 
     // FIXME(loicm) Shape textures are stored in the read-only data section of the plugin as it
     //     avoids having to deal with paths for now. It should preferably be loaded from a file.
@@ -286,55 +285,43 @@
         node = new ShapeNode(this);
     }
 
-    // Update dirty parameters.
     ShapeTexturedMaterial* texturedMaterial = node->texturedMaterial();
     ShapeColoredMaterial* coloredMaterial = node->coloredMaterial();
-    if (dirtyFlags_ & ShapeItem::DirtyBaseColor)
-        coloredMaterial->setBaseColor(baseColor_);
-    if (dirtyFlags_ & ShapeItem::DirtyGradientColor)
-        coloredMaterial->setGradientColor(gradientColor_);
-    if (dirtyFlags_ & (ShapeItem::DirtyBorder | ShapeItem::DirtyRadius
-                       | ShapeItem::DirtyGridUnit)) {
-        TextureData* textureData = (gridUnit_ > lowHighTextureThreshold) ?
-            &shapeTextureHigh : &shapeTextureLow;
-        node->setShapeCoordinate(border_, radius_, textureData);
-    }
-    if (dirtyFlags_ & (ShapeItem::DirtyGeometry | ShapeItem::DirtyRadius
-                       | ShapeItem::DirtyStretched | ShapeItem::DirtyHAlignment
-                       | ShapeItem::DirtyVAlignment | ShapeItem::DirtyGridUnit)) {
-        setPosition = true;
-    }
-    if (dirtyFlags_ & ShapeItem::DirtyImage) {
-        texturedMaterial->setImage(image_);
-        node->setMaterialType(image_ ? ShapeNode::TexturedMaterial : ShapeNode::ColoredMaterial);
-        setPosition = true;
-    }
-    dirtyFlags_ = ShapeItem::NotDirty;
-
-    if (setPosition) {
-        int scaledDown = 0;
-        TextureData* textureData = (gridUnit_ > lowHighTextureThreshold) ?
-            &shapeTextureHigh : &shapeTextureLow;
-        // Get the radius considering the current grid unit and the texture raster grid unit.
-        float radius = (radius_ == ShapeItem::SmallRadius) ?
-            textureData->smallRadius : textureData->mediumRadius;
-        const float scaleFactor = gridUnit_ / textureData->gridUnit;
-        radius *= scaleFactor;
-        if (scaleFactor != 1.0f) {
-            scaledDown |= 1;
-        }
-        // When the item size is less than 2 radii, the radius is scaled down anyhow.
-        const float halfMinWidthHeight = qMin(geometry_.width(), geometry_.height()) * 0.5f;
-        if (radius > halfMinWidthHeight) {
-            radius = halfMinWidthHeight;
-            scaledDown |= 1;
-        }
-        // Set the shape texture to be used depending on current grid unit.
-        coloredMaterial->setShapeTexture(textureData->texture, !!scaledDown);
-        texturedMaterial->setShapeTexture(textureData->texture, !!scaledDown);
-        // Update vertex position and shape coordinate attributes.
-        node->setPosition(geometry_, radius, image_, stretched_, hAlignment_, vAlignment_);
-    }
+    TextureData* textureData = (gridUnit_ > lowHighTextureThreshold) ?
+        &shapeTextureHigh : &shapeTextureLow;
+
+    // Set the shape texture to be used by the materials depending on current grid unit. The radius
+    // is set considering the current grid unit and the texture raster grid unit. When the item size
+    // is less than 2 radii, the radius is scaled down anyhow.
+    float radius = (radius_ == ShapeItem::SmallRadius) ?
+        textureData->smallRadius : textureData->mediumRadius;
+    const float scaleFactor = gridUnit_ / textureData->gridUnit;
+    radius *= scaleFactor;
+    int scaledDown = 0;
+    if (scaleFactor != 1.0f) {
+        scaledDown |= 1;
+    }
+    const float halfMinWidthHeight = qMin(geometry_.width(), geometry_.height()) * 0.5f;
+    if (radius > halfMinWidthHeight) {
+        radius = halfMinWidthHeight;
+        scaledDown |= 1;
+    }
+    coloredMaterial->setShapeTexture(textureData->texture, !!scaledDown);
+    texturedMaterial->setShapeTexture(textureData->texture, !!scaledDown);
+
+    // Update the other material properties.
+    coloredMaterial->setBaseColor(baseColor_);
+    coloredMaterial->setGradientColor(gradientColor_);
+    texturedMaterial->setImage(image_);
+
+    // Update node vertices and type.
+    int index = (border_ == ShapeItem::RawBorder) ?
+        0 : (border_ == ShapeItem::IdleBorder) ? 1 : 2;
+    if (radius_ == ShapeItem::SmallRadius)
+        index += 3;
+    node->setVertices(geometry_, radius, image_, stretched_, hAlignment_, vAlignment_,
+                      textureData->coordinate[index]);
+    node->setMaterialType(image_ ? ShapeNode::TexturedMaterial : ShapeNode::ColoredMaterial);
 
     return node;
 }
@@ -357,8 +344,9 @@
     setFlag(UsePreprocess, false);
 }
 
-void ShapeNode::setPosition(const QRectF& geometry, float radius, QQuickItem* image, bool stretched,
-                            ShapeItem::HAlignment hAlignment, ShapeItem::VAlignment vAlignment)
+void ShapeNode::setVertices(const QRectF& geometry, float radius, QQuickItem* image, bool stretched,
+                            ShapeItem::HAlignment hAlignment, ShapeItem::VAlignment vAlignment,
+                            float shapeCoordinate[][2])
 {
     ShapeNode::Vertex* vertices = reinterpret_cast<ShapeNode::Vertex*>(geometry_.vertexData());
     const QSGTextureProvider* provider = image ? image->textureProvider() : NULL;
@@ -410,92 +398,110 @@
     // Set top row of 4 vertices.
     vertices[0].position[0] = 0.0f;
     vertices[0].position[1] = 0.0f;
+    vertices[0].shapeCoordinate[0] = shapeCoordinate[0][0];
+    vertices[0].shapeCoordinate[1] = shapeCoordinate[0][1];
     vertices[0].imageCoordinate[0] = leftCoordinate;
     vertices[0].imageCoordinate[1] = topCoordinate;
     vertices[1].position[0] = radius;
     vertices[1].position[1] = 0.0f;
+    vertices[1].shapeCoordinate[0] = shapeCoordinate[1][0];
+    vertices[1].shapeCoordinate[1] = shapeCoordinate[1][1];
     vertices[1].imageCoordinate[0] = radiusCoordinateWidth;
     vertices[1].imageCoordinate[1] = topCoordinate;
     vertices[2].position[0] = width - radius;
     vertices[2].position[1] = 0.0f;
+    vertices[2].shapeCoordinate[0] = shapeCoordinate[2][0];
+    vertices[2].shapeCoordinate[1] = shapeCoordinate[2][1];
     vertices[2].imageCoordinate[0] = rightCoordinate - radiusCoordinateWidth;
     vertices[2].imageCoordinate[1] = topCoordinate;
     vertices[3].position[0] = width;
     vertices[3].position[1] = 0.0f;
+    vertices[3].shapeCoordinate[0] = shapeCoordinate[3][0];
+    vertices[3].shapeCoordinate[1] = shapeCoordinate[3][1];
     vertices[3].imageCoordinate[0] = rightCoordinate;
     vertices[3].imageCoordinate[1] = topCoordinate;
 
     // Set middle-top row of 4 vertices.
     vertices[4].position[0] = 0.0f;
     vertices[4].position[1] = radius;
+    vertices[4].shapeCoordinate[0] = shapeCoordinate[4][0];
+    vertices[4].shapeCoordinate[1] = shapeCoordinate[4][1];
     vertices[4].imageCoordinate[0] = leftCoordinate;
     vertices[4].imageCoordinate[1] = topCoordinate + radiusCoordinateHeight;
     vertices[5].position[0] = radius;
     vertices[5].position[1] = radius;
+    vertices[5].shapeCoordinate[0] = shapeCoordinate[5][0];
+    vertices[5].shapeCoordinate[1] = shapeCoordinate[5][1];
     vertices[5].imageCoordinate[0] = leftCoordinate + radiusCoordinateWidth;
     vertices[5].imageCoordinate[1] = topCoordinate + radiusCoordinateHeight;
     vertices[6].position[0] = width - radius;
     vertices[6].position[1] = radius;
+    vertices[6].shapeCoordinate[0] = shapeCoordinate[6][0];
+    vertices[6].shapeCoordinate[1] = shapeCoordinate[6][1];
     vertices[6].imageCoordinate[0] = rightCoordinate - radiusCoordinateWidth;
     vertices[6].imageCoordinate[1] = topCoordinate + radiusCoordinateHeight;
     vertices[7].position[0] = width;
     vertices[7].position[1] = radius;
+    vertices[7].shapeCoordinate[0] = shapeCoordinate[7][0];
+    vertices[7].shapeCoordinate[1] = shapeCoordinate[7][1];
     vertices[7].imageCoordinate[0] = rightCoordinate;
     vertices[7].imageCoordinate[1] = topCoordinate + radiusCoordinateHeight;
 
     // Set middle-bottom row of 4 vertices.
     vertices[8].position[0] = 0.0f;
     vertices[8].position[1] = height - radius;
+    vertices[8].shapeCoordinate[0] = shapeCoordinate[8][0];
+    vertices[8].shapeCoordinate[1] = shapeCoordinate[8][1];
     vertices[8].imageCoordinate[0] = leftCoordinate;
     vertices[8].imageCoordinate[1] = bottomCoordinate - radiusCoordinateHeight;
     vertices[9].position[0] = radius;
     vertices[9].position[1] = height - radius;
+    vertices[9].shapeCoordinate[0] = shapeCoordinate[9][0];
+    vertices[9].shapeCoordinate[1] = shapeCoordinate[9][1];
     vertices[9].imageCoordinate[0] = leftCoordinate + radiusCoordinateWidth;
     vertices[9].imageCoordinate[1] = bottomCoordinate - radiusCoordinateHeight;
     vertices[10].position[0] = width - radius;
     vertices[10].position[1] = height - radius;
+    vertices[10].shapeCoordinate[0] = shapeCoordinate[10][0];
+    vertices[10].shapeCoordinate[1] = shapeCoordinate[10][1];
     vertices[10].imageCoordinate[0] = rightCoordinate - radiusCoordinateWidth;
     vertices[10].imageCoordinate[1] = bottomCoordinate - radiusCoordinateHeight;
     vertices[11].position[0] = width;
     vertices[11].position[1] = height - radius;
+    vertices[11].shapeCoordinate[0] = shapeCoordinate[11][0];
+    vertices[11].shapeCoordinate[1] = shapeCoordinate[11][1];
     vertices[11].imageCoordinate[0] = rightCoordinate;
     vertices[11].imageCoordinate[1] = bottomCoordinate - radiusCoordinateHeight;
 
     // Set bottom row of 4 vertices.
     vertices[12].position[0] = 0.0f;
     vertices[12].position[1] = height;
+    vertices[12].shapeCoordinate[0] = shapeCoordinate[12][0];
+    vertices[12].shapeCoordinate[1] = shapeCoordinate[12][1];
     vertices[12].imageCoordinate[0] = leftCoordinate;
     vertices[12].imageCoordinate[1] = bottomCoordinate;
     vertices[13].position[0] = radius;
     vertices[13].position[1] = height;
+    vertices[13].shapeCoordinate[0] = shapeCoordinate[13][0];
+    vertices[13].shapeCoordinate[1] = shapeCoordinate[13][1];
     vertices[13].imageCoordinate[0] = leftCoordinate + radiusCoordinateWidth;
     vertices[13].imageCoordinate[1] = bottomCoordinate;
     vertices[14].position[0] = width - radius;
     vertices[14].position[1] = height;
+    vertices[14].shapeCoordinate[0] = shapeCoordinate[14][0];
+    vertices[14].shapeCoordinate[1] = shapeCoordinate[14][1];
     vertices[14].imageCoordinate[0] = rightCoordinate - radiusCoordinateWidth;
     vertices[14].imageCoordinate[1] = bottomCoordinate;
     vertices[15].position[0] = width;
     vertices[15].position[1] = height;
+    vertices[15].shapeCoordinate[0] = shapeCoordinate[15][0];
+    vertices[15].shapeCoordinate[1] = shapeCoordinate[15][1];
     vertices[15].imageCoordinate[0] = rightCoordinate;
     vertices[15].imageCoordinate[1] = bottomCoordinate;
 
     markDirty(DirtyGeometry);
 }
 
-void ShapeNode::setShapeCoordinate(ShapeItem::Border border, ShapeItem::Radius radius,
-                                   TextureData* textureData)
-{
-    ShapeNode::Vertex* vertices = reinterpret_cast<ShapeNode::Vertex*>(geometry_.vertexData());
-    int index = (border == ShapeItem::RawBorder) ? 0 : (border == ShapeItem::IdleBorder) ? 1 : 2;
-    if (radius == ShapeItem::SmallRadius)
-        index += 3;
-    for (int i = 0; i < 16; i++) {
-        vertices[i].shapeCoordinate[0] = textureData->coordinate[index][i][0];
-        vertices[i].shapeCoordinate[1] = textureData->coordinate[index][i][1];
-    }
-    markDirty(DirtyGeometry);
-}
-
 void ShapeNode::setMaterialType(ShapeNode::MaterialType material)
 {
     if (currentMaterial_ != material) {

=== modified file 'modules/Ubuntu/Components/plugin/shapeitem.h'
--- modules/Ubuntu/Components/plugin/shapeitem.h	2013-01-07 07:59:56 +0000
+++ modules/Ubuntu/Components/plugin/shapeitem.h	2013-01-09 14:06:21 +0000
@@ -220,10 +220,9 @@
     ShapeNode(ShapeItem* item);
     ShapeTexturedMaterial* texturedMaterial() { return &texturedMaterial_; }
     ShapeColoredMaterial* coloredMaterial() { return &coloredMaterial_; }
-    void setPosition(const QRectF& geometry, float radius, QQuickItem* image, bool stretched,
-                     ShapeItem::HAlignment hAlignment, ShapeItem::VAlignment vAlignment);
-    void setShapeCoordinate(ShapeItem::Border border, ShapeItem::Radius radius,
-                            TextureData* textureData);
+    void setVertices(const QRectF& geometry, float radius, QQuickItem* image, bool stretched,
+                     ShapeItem::HAlignment hAlignment, ShapeItem::VAlignment vAlignment,
+                     float shapeCoordinate[][2]);
     void setMaterialType(MaterialType material);
 
 private:

=== modified file 'modules/Ubuntu/Components/qmldir'
--- modules/Ubuntu/Components/qmldir	2012-12-12 06:29:58 +0000
+++ modules/Ubuntu/Components/qmldir	2013-01-09 14:06:21 +0000
@@ -14,7 +14,7 @@
 CheckBox 0.1 CheckBox.qml
 Slider 0.1 Slider.qml
 Scrollbar 0.1 Scrollbar.qml
-ModelSectionCounter 0.1 ModelSectionCounter.qml
+internal ModelSectionCounter ModelSectionCounter.qml
 Object 0.1 Object.qml
 TabButton 0.1 TabButton.qml
 Page 0.1 Page.qml
@@ -27,3 +27,4 @@
 MathUtils 0.1 mathUtils.js
 ComponentUtils 0.1 componentUtils.js
 SliderUtils 0.1 sliderUtils.js
+ScrollbarUtils 0.1 scrollbarUtils.js

=== added file 'modules/Ubuntu/Components/scrollbarUtils.js'
--- modules/Ubuntu/Components/scrollbarUtils.js	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/scrollbarUtils.js	2013-01-09 14:06:21 +0000
@@ -0,0 +1,127 @@
+/*
+ * Copyright 2012 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+Qt.include("mathUtils.js")
+
+/*!
+  \internal
+  Object storing property names used in calculations.
+  */
+var _obj = {
+    scrollbar: null,
+    vertical: false,
+    propOrigin: "",
+    propContent: "",
+    propPosRatio: "",
+    propSizeRatio: "",
+    propCoordinate: "",
+    propSize: "",
+    refresh: function () {
+        _obj.vertical = (_obj.scrollbar.align === Qt.AlignLeading) || (_obj.scrollbar.align === Qt.AlignTrailing)
+        _obj.propOrigin = (_obj.vertical) ? "originY" : "originX";
+        _obj.propContent = (_obj.vertical) ? "contentY" : "contentX";
+        _obj.propPosRatio = (_obj.vertical) ? "yPosition" : "xPosition";
+        _obj.propSizeRatio = (_obj.vertical) ? "heightRatio" : "widthRatio";
+        _obj.propCoordinate = (_obj.vertical) ? "y" : "x";
+        _obj.propSize = (_obj.vertical) ? "height" : "width";
+    }
+}
+
+/*!
+  \internal
+  Checks whether the _obj is valid or not. Must be called in every function
+  as those can be invoked prior to the host (delegate) component completion.
+  */
+function __check(sb) {
+    if (sb !== null && (_obj.scrollbar !== sb)) {
+        _obj.scrollbar = sb;
+        sb.flickableItemChanged.connect(_obj.refresh);
+        sb.alignChanged.connect(_obj.refresh);
+        _obj.refresh();
+    }
+
+    return _obj.scrollbar;
+}
+
+/*!
+  Returns whether the scrollbar is vertical or horizontal.
+  */
+function isVertical(scrollbar) {
+    if (!__check(scrollbar)) return 0;
+    return _obj.vertical;
+}
+
+/*!
+  Calculates the slider position based on the visible area's ratios.
+  */
+function sliderPos(scrollbar, min, max) {
+    if (!__check(scrollbar)) return 0;
+    return clamp(scrollbar.flickableItem.visibleArea[_obj.propPosRatio] * scrollbar.flickableItem[_obj.propSize], min, max);
+}
+
+/*!
+  Calculates the slider size for ListViews based on the visible area's position
+  and size ratios, clamping it between min and max.
+
+  The function can be used in Scrollbar delegates to calculate the size of the slider.
+  */
+function sliderSize(scrollbar, min, max) {
+    if (!__check(scrollbar)) return 0;
+    var sizeRatio = scrollbar.flickableItem.visibleArea[_obj.propSizeRatio];
+    var posRatio = scrollbar.flickableItem.visibleArea[_obj.propPosRatio];
+    var sizeUnderflow = (sizeRatio * max) < min ? min - (sizeRatio * max) : 0
+    var startPos = posRatio * (max - sizeUnderflow)
+    var endPos = (posRatio + sizeRatio) * (max - sizeUnderflow) + sizeUnderflow
+    var overshootStart = startPos < 0 ? -startPos : 0
+    var overshootEnd = endPos > max ? endPos - max : 0
+
+    // overshoot adjusted start and end
+    var adjustedStartPos = startPos + overshootStart
+    var adjustedEndPos = endPos - overshootStart - overshootEnd
+
+    // final position and size of thumb
+    var position = adjustedStartPos + min > max ? max - min : adjustedStartPos
+    var result = (adjustedEndPos - position) < min ? min : (adjustedEndPos - position)
+
+    return result;
+}
+
+/*!
+  The function calculates and clamps the position to be scrolled to the minimum
+  and maximum values.
+
+  The scroll and drag functions require a slider that does not have any minimum
+  size set (meaning the minimum is set to 0.0). Implementations should consider
+  using an invisible cursor to drag the slider and the ListView position.
+  */
+function scrollAndClamp(scrollbar, amount, min, max) {
+    if (!__check(scrollbar)) return 0;
+    return scrollbar.flickableItem[_obj.propOrigin] +
+            clamp(scrollbar.flickableItem[_obj.propContent] - scrollbar.flickableItem[_obj.propOrigin] + amount,
+                  min, max);
+}
+
+/*!
+  The function calculates the new position of the dragged slider. The amount is
+  relative to the contentSize, which is either the flickable's contentHeight or
+  contentWidth or other calculated value, depending on its orientation. The pageSize
+  specifies the visibleArea, and it is usually the heigtht/width of the scrolling area.
+  */
+function dragAndClamp(scrollbar, cursor, contentSize, pageSize) {
+    if (!__check(scrollbar)) return 0;
+    scrollbar.flickableItem[_obj.propContent] =
+            scrollbar.flickableItem[_obj.propOrigin] + cursor[_obj.propCoordinate] * contentSize / pageSize;
+}

=== modified file 'tests/unit/tst_components/tst_modelsectioncounter.qml'
--- tests/unit/tst_components/tst_modelsectioncounter.qml	2012-11-21 14:55:54 +0000
+++ tests/unit/tst_components/tst_modelsectioncounter.qml	2013-01-09 14:06:21 +0000
@@ -5,52 +5,89 @@
 TestCase {
     name: "ModelSectionCounterAPI"
 
-    function test_defaults()
-    {
+    function initTestCase() {
+        var component = Qt.createComponent(Qt.resolvedUrl("../../../modules/Ubuntu/Components/ModelSectionCounter.qml"));
+        counter = component.createObject(parent);
+    }
+
+    function test_0_defaults() {
         compare(counter.view, null, "ModelSectionCounter does not have valid view set");
-        compare(counter.sectionCount, 0, "ModelSectionCounter default sectionCount is 0");
+        compare(counter.count, 0, "ModelSectionCounter default sectionCount is 0");
         compare(counter.cacheSections, false, "ModelSectionCounter does not cache sections");
-        compare(counter.sectionCache, [], "ModelSectionCounter has empty section cache list");
-    }
-
-    function test_sectionCount()
-    {
+        compare(counter.cache, [], "ModelSectionCounter has empty section cache list");
+    }
+
+    function test_1_count_data() {
+        return [
+            {tag: "Empty model", model: emptyModel, sectionProperty: "label", expect: 0, expectFail: false},
+            {tag: "ListModel", model: objectModel, sectionProperty: "label", expect: 8, expectFail: false},
+            {tag: "StringList model", model: stringModel, sectionProperty: "modelData", expect: 8, expectFail: false},
+            {tag: "VariantList model", model: variantModel, sectionProperty: "label", expect: 8, expectFail: false},
+        ];
+    }
+
+    function test_1_count(data) {
+        if (data.expectFail)
+            expectFail("", data.tag);
+        list.model = data.model;
+        list.section.property = data.sectionProperty;
+        list.section.criteria = ViewSection.FirstCharacter;
         counter.view = list;
-        compare(counter.view, list, "List not set");
-        compare(counter.sectionCount, 10, "Section count is wrong");
+        compare(counter.count, data.expect, "Section count is wrong");
     }
 
-    function test_sectionCache()
-    {
+    function test_2_cache() {
+        list.model = objectModel;
+        list.section.property = "label";
+        list.section.criteria = ViewSection.FirstCharacter;
         counter.view = list;
         counter.cacheSections = true;
-        var cache = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
-        compare(counter.sectionCache, cache, "Section cache is wrong");
+        var cache = ["1", "2", "3", "4", "5", "6", "7", "8"];
+        compare(counter.cache, cache, "Section cache is wrong");
 
         counter.cacheSections = false;
         cache = [];
-        compare(counter.sectionCache, cache, "Section cache is wrong");
+        compare(counter.cache, cache, "Section cache is wrong");
     }
 
     Item {
-        ListModel {
-            id: listModel
-            Component.onCompleted: {
-                for (var i = 0; i < 10; i++) {
-                    listModel.append({"label": i})
-                }
-            }
-        }
         ListView {
             id: list
-            model: listModel
 
-            delegate: Item{ height: 40}
-            section.property: "label"
-            section.criteria: ViewSection.FirstCharacter
+            delegate: Item{ height: 40 }
+            section.delegate: Item{ height: 10 }
         }
     }
-    ModelSectionCounter {
-        id: counter
+
+    property var counter
+
+    property var emptyModel: ListModel {}
+
+    property var objectModel: ListModel {
+        ListElement {label: "1"}
+        ListElement {label: "10"}
+        ListElement {label: "100"}
+        ListElement {label: "2"}
+        ListElement {label: "3"}
+        ListElement {label: "4"}
+        ListElement {label: "5"}
+        ListElement {label: "6"}
+        ListElement {label: "7"}
+        ListElement {label: "8"}
     }
+
+    property var variantModel: [
+        {"label": "1"},
+        {"label": "10"},
+        {"label": "100"},
+        {"label": "2"},
+        {"label": "3"},
+        {"label": "4"},
+        {"label": "5"},
+        {"label": "6"},
+        {"label": "7"},
+        {"label": "8"}
+    ]
+
+    property var stringModel: ["1", "10", "100", "2", "3", "4", "5", "6", "7", "8"]
 }

=== modified file 'tests/unit/tst_components/tst_scrollbar.qml'
--- tests/unit/tst_components/tst_scrollbar.qml	2012-12-13 12:06:13 +0000
+++ tests/unit/tst_components/tst_scrollbar.qml	2013-01-09 14:06:21 +0000
@@ -64,61 +64,6 @@
         }
     }
 
-    function test_scrollbar_height_with_ListView_data() {
-        return [
-            {tag: "Empty model", model: emptyModel, expect: 0, expectFail: false},
-            {tag: "Empty model + header", model: emptyModel, header: headerFooter, expect: 20, expectFail: false},
-            {tag: "Empty model + header + footer", model: emptyModel, header: headerFooter, footer: headerFooter, expect: 40, expectFail: false},
-            {tag: "Empty model + header + footer + section (inline)", model: emptyModel, header: headerFooter, footer: headerFooter, section: section, expect: 40, expectFail: false},
-            {tag: "Empty model + header + footer + section (top)", model: emptyModel, header: headerFooter, footer: headerFooter, section: section, sectionPositioning: ViewSection.CurrentLabelAtStart, expect: 40, expectFail: false},
-            {tag: "Empty model + header + footer + section (bottom)", model: emptyModel, header: headerFooter, footer: headerFooter, section: section, sectionPositioning: ViewSection.NextLabelAtEnd, expect: 40, expectFail: false},
-            {tag: "Empty model + header + footer + section (top+bottom)", model: emptyModel, header: headerFooter, footer: headerFooter, section: section, sectionPositioning: ViewSection.CurrentLabelAtStart | ViewSection.NextLabelAtEnd, expect: 40, expectFail: false},
-
-            {tag: "ObjectList model", model: objectList, expect: 150, expectFail: false},
-            {tag: "ObjectList model + header", model: objectList, header: headerFooter, expect: 170, expectFail: false},
-            {tag: "ObjectList model + header + footer", model: objectList, header: headerFooter, footer: headerFooter, expect: 190, expectFail: false},
-            {tag: "ObjectList model + header + footer + section (inline)", model: objectList, header: headerFooter, footer: headerFooter, section: section, expect: 290, expectFail: true},
-            {tag: "ObjectList model + header + footer + section (top)", model: objectList, header: headerFooter, footer: headerFooter, section: section, sectionPositioning: ViewSection.CurrentLabelAtStart, expect: 190, expectFail: false},
-            {tag: "ObjectList model + header + footer + section (bottom)", model: objectList, header: headerFooter, footer: headerFooter, section: section, sectionPositioning: ViewSection.NextLabelAtEnd, expect: 190, expectFail: false},
-            {tag: "ObjectList model + header + footer + section (top+bottom)", model: objectList, header: headerFooter, footer: headerFooter, section: section, sectionPositioning: ViewSection.CurrentLabelAtStart | ViewSection.NextLabelAtEnd, expect: 190, expectFail: false},
-
-            {tag: "VariantList model", model: objectList, expect: 150, expectFail: false},
-            {tag: "VariantList model + header", model: objectList, header: headerFooter, expect: 170, expectFail: false},
-            {tag: "VariantList model + header + footer", model: objectList, header: headerFooter, footer: headerFooter, expect: 190, expectFail: false},
-            {tag: "VariantList model + header + footer + section (inline)", model: objectList, header: headerFooter, footer: headerFooter, section: section, expect: 290, expectFail: true},
-            {tag: "VariantList model + header + footer + section (top)", model: objectList, header: headerFooter, footer: headerFooter, section: section, sectionPositioning: ViewSection.CurrentLabelAtStart, expect: 190, expectFail: false},
-            {tag: "VariantList model + header + footer + section (bottom)", model: objectList, header: headerFooter, footer: headerFooter, section: section, sectionPositioning: ViewSection.NextLabelAtEnd, expect: 190, expectFail: false},
-            {tag: "VariantList model + header + footer + section (top+bottom)", model: objectList, header: headerFooter, footer: headerFooter, section: section, sectionPositioning: ViewSection.CurrentLabelAtStart | ViewSection.NextLabelAtEnd, expect: 190, expectFail: false},
-
-            {tag: "StringList model", model: objectList, expect: 150, expectFail: false},
-            {tag: "StringList model + header", model: objectList, header: headerFooter, expect: 170, expectFail: false},
-            {tag: "StringList model + header + footer", model: objectList, header: headerFooter, footer: headerFooter, expect: 190, expectFail: false},
-            {tag: "StringList model + header + footer + section (inline)", model: objectList, header: headerFooter, footer: headerFooter, section: section, expect: 290, expectFail: true},
-            {tag: "StringList model + header + footer + section (top)", model: objectList, header: headerFooter, footer: headerFooter, section: section, sectionPositioning: ViewSection.CurrentLabelAtStart, expect: 190, expectFail: false},
-            {tag: "StringList model + header + footer + section (bottom)", model: objectList, header: headerFooter, footer: headerFooter, section: section, sectionPositioning: ViewSection.NextLabelAtEnd, expect: 190, expectFail: false},
-            {tag: "StringList model + header + footer + section (top+bottom)", model: objectList, header: headerFooter, footer: headerFooter, section: section, sectionPositioning: ViewSection.CurrentLabelAtStart | ViewSection.NextLabelAtEnd, expect: 190, expectFail: false},
-        ];
-    }
-
-    function test_scrollbar_height_with_ListView(data) {
-        if (data.expectFail)
-            expectFail("", data.tag);
-
-        // set data
-        listView.model = data["model"] ? data.model : null;
-        listView.header = data["header"] ? data.header : null;
-        listView.footer = data["footer"] ? data.footer : null;
-        listView.section.property = "label";
-        listView.section.criteria = ViewSection.FirstCharacter;
-        listView.section.labelPositioning = data["sectionPositioning"] ? data.sectionPositioning : ViewSection.InlineLabels;
-        listView.section.delegate = data["section"] ? data.section : null;
-        scrollbar.flickableItem = listView;
-
-        wait(200);
-
-        compare(scrollbar.ItemStyle.delegate.contentSize, data.expect, data.tag);
-    }
-
     Rectangle {
        id: nonFlickable
     }
@@ -129,9 +74,6 @@
 
     ListView {
         id: listView
-        delegate: Item {
-            height: 15
-        }
     }
 
     Scrollbar {
@@ -142,44 +84,4 @@
             signalName: "styleChanged"
         }
     }
-
-    Component {
-        id: headerFooter
-        Item { height: 20}
-    }
-
-    Component {
-        id: section
-        Item { height: 10}
-    }
-
-    property var emptyModel: ListModel {}
-
-    property var objectList: ListModel {
-        ListElement {label: "1"}
-        ListElement {label: "10"}
-        ListElement {label: "100"}
-        ListElement {label: "2"}
-        ListElement {label: "3"}
-        ListElement {label: "4"}
-        ListElement {label: "5"}
-        ListElement {label: "6"}
-        ListElement {label: "7"}
-        ListElement {label: "8"}
-    }
-
-    property var variantList: [
-        {"label": "1"},
-        {"label": "10"},
-        {"label": "100"},
-        {"label": "2"},
-        {"label": "3"},
-        {"label": "4"},
-        {"label": "5"},
-        {"label": "6"},
-        {"label": "7"},
-        {"label": "8"}
-    ]
-
-    property var stringList: ["1", "10", "100", "2", "3", "4", "5", "6", "7", "8", "9"]
 }

=== removed file 'themes/Ambiance/qmltheme/ScrollSliderSizer.qml'
--- themes/Ambiance/qmltheme/ScrollSliderSizer.qml	2012-11-22 16:08:44 +0000
+++ themes/Ambiance/qmltheme/ScrollSliderSizer.qml	1970-01-01 00:00:00 +0000
@@ -1,55 +0,0 @@
-/*
- * Copyright 2012 Canonical Ltd.
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation; version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import QtQuick 2.0
-
-/*!
-  \internal
-  \qmltype ScrollSliderSizer
-  \inqmlmodule Ubuntu.Components 0.1
-  \ingroup ubuntu
-  \brief Scrollbar Decorator (Slider) sizer object, provides sizing and elasticity
-  support for the slider
-  */
-QtObject {
-    // relative (0..1) position of top and bottom
-    property real positionRatio
-    property real sizeRatio
-
-    // max position and min size
-    property real maximumPosition
-    property real minimumSize
-
-    // size underflow
-    property real sizeUnderflow: (sizeRatio * maximumPosition) < minimumSize ? minimumSize - (sizeRatio * maximumPosition) : 0
-
-    // raw start and end position considering minimum size
-    property real rawStartPosition: positionRatio * (maximumPosition - sizeUnderflow)
-    property real rawEndPosition: (positionRatio + sizeRatio) * (maximumPosition - sizeUnderflow) + sizeUnderflow
-
-    // overshoot amount at start and end
-    property real overshootStart: rawStartPosition < 0 ? -rawStartPosition : 0
-    property real overshootEnd: rawEndPosition > maximumPosition ? rawEndPosition - maximumPosition : 0
-
-    // overshoot adjusted start and end
-    property real adjustedStartPosition: rawStartPosition + overshootStart
-    property real adjustedEndPosition: rawEndPosition - overshootStart - overshootEnd
-
-    // final position and size of thumb
-    property int position: 0.5 + (adjustedStartPosition + minimumSize > maximumPosition ? maximumPosition - minimumSize : adjustedStartPosition)
-    property int size: 0.5 + ((adjustedEndPosition - position) < minimumSize ? minimumSize : (adjustedEndPosition - position))
-}
-

=== modified file 'themes/Ambiance/qmltheme/ScrollbarDelegate.qml'
--- themes/Ambiance/qmltheme/ScrollbarDelegate.qml	2012-12-13 13:42:30 +0000
+++ themes/Ambiance/qmltheme/ScrollbarDelegate.qml	2013-01-09 14:06:21 +0000
@@ -24,99 +24,55 @@
   On active scrollbars, positioning is handled so that the logic updates the flickable's
   X/Y content positions, which is then synched with the contentPosition by the main
   element.
+
+  Style properties used:
+    - interactive: bool - drives the interactive behavior of the scrollbar
+    - minimumSliderSize: real - specifies the minimum size of the slider
+    * overlay
+        - overlay: bool - true if the scrollbar is overlay type
+        - overlayOpacityWhenHidden: opacity when hidden
+        - overlayOpacityWhenShown: opacity when shown
+    * animations - where duration and easing properties are used only
+        - scrollbarFadeInAnimation: PropertyAnimation - animation used when fade in
+        - scrollbarFadeOutAnimation: PropertyAnimation - animation used when fade out
+        - scrollbarFadeOutPause: int - miliseconds to pause before fade out
+    * behaviors - animations are used as declared
+        - sliderAnimation: PropertyAnimation - animation for the slider size
+        - thumbConnectorFading: PropertyAnimation - animation for the thumb connector
+        - thumbFading: PropertyAnimation - animation for the thumb fading
+    * other styling properties
+        - color sliderColor: color for the slider
+        - color thumbConnectorColor: thumb connector color
+        - url forwardThumbReleased: forward thumb image when released
+        - url forwardThumbPressed: forward thumb image when pressed
+        - url backwardThumbReleased: backward thumb image when released
+        - url backwardThumbPressed: backward thumb image when pressed
+        - real scrollAreaThickness: scrollbar area thickness, the area where the
+                                    slider, thumb and thumb-connector appear
+        - real thumbConnectorMargin: margin of the thumb connector aligned to the
+                                    thumb visuals
   */
 
 Item {
     id: visuals
     // helper properties to ease code readability
     property Flickable flickableItem: item.flickableItem
-    property bool interactive: item.__interactive
+    property bool interactive: StyleUtils.itemStyleProperty("interactive", false)
     property bool isScrollable: item.__private.scrollable && pageSize > 0.0
                                 && contentSize > 0.0 && contentSize > pageSize
-    property bool isVertical: (item.__private.vertical)
+    property bool isVertical: ScrollbarUtils.isVertical(item)
     property bool frontAligned: (item.align === Qt.AlignLeading)
     property bool rearAligned: (item.align === Qt.AlignTrailing)
     property bool topAligned: (item.align === Qt.AlignTop)
     property bool bottomAligned: (item.align === Qt.AlignBottom)
 
     property real pageSize: (isVertical) ? item.height : item.width
-    property real contentSize: (listView) ?
-                                   listView.size :
-                                   ((isVertical) ? item.flickableItem.contentHeight : item.flickableItem.contentWidth)
+    property real contentSize: (isVertical) ? item.flickableItem.contentHeight : item.flickableItem.contentWidth
     property real overlayOpacityWhenShown: StyleUtils.itemStyleProperty("overlayOpacityWhenShown", 0.6)
     property real overlayOpacityWhenHidden: StyleUtils.itemStyleProperty("overlayOpacityWhenHidden", 0.0)
     property bool overlay: StyleUtils.itemStyleProperty("overlay", false) && !interactive
 
-    property real contentPosition
-    property QtObject listView: logicLoader.item
-
-    /* Removing the first row of the ListView's model will render
-       ListView.contentY invalid and therefore break the scrollbar's position.
-       This is fixable in QtQuick 2.0 thanks to the introduction of the
-       Flickable.originY property, however the property is not reliable enough.
-       Therefore we compute originY manually using the fact that
-       ListView.visibleArea.yPosition is not rendered invalid by removing the
-       first row of the ListView's model.
-       Unfortunately the result is not flawless when the ListView uses section
-       headers because ListView.visibleArea.yPosition is often slightly incorrect.
-
-       Ref.: https://bugreports.qt-project.org/browse/QTBUG-20927
-             https://bugreports.qt-project.org/browse/QTBUG-21358
-             http://doc-snapshot.qt-project.org/5.0/qml-qtquick2-flickable.html#originX-prop
-    */
-    property real originX: (listView) ? -item.flickableItem.contentX + Math.round(item.flickableItem.visibleArea.xPosition * contentSize) : item.flickableItem.originX
-    property real originY: (listView) ? -item.flickableItem.contentY + Math.round(item.flickableItem.visibleArea.yPosition * contentSize) : item.flickableItem.originY
-
-    // common logic for Flickable and ListView to update contentPosition when Flicked
-    Connections {
-        target: item.flickableItem
-        onContentYChanged: if (isVertical) contentPosition = MathUtils.clamp(item.flickableItem.contentY - visuals.originY, 0.0, contentSize)
-        onContentXChanged: if (!isVertical) contentPosition = MathUtils.clamp(item.flickableItem.contentX - visuals.originX, 0.0, contentSize)
-    }
-    // logic for ListView
-    Component {
-        id: listViewLogic
-        Object {
-            /* ListView.contentHeight is not reliable when section headers are defined.
-               In that case we compute 'size' manually.
-
-               Ref.: https://bugreports.qt-project.org/browse/QTBUG-17057
-                     https://bugreports.qt-project.org/browse/QTBUG-19941
-            */
-            property real size: sectionCounter.sectionCount * sectionHeight + itemsSize + spacingSize + headerSize + footerSize
-            property int sectionHeight: sectionCounter.sectionHeight
-            property int spacingSize: flickableItem.spacing * (flickableItem.count - 1)
-            property int itemsSize: flickableItem.count * QuickUtils.modelDelegateHeight(flickableItem.delegate, flickableItem.model)
-            property int headerSize: flickableItem.header ? flickableItem.headerItem.height : 0
-            property int footerSize: flickableItem.footer ? flickableItem.footerItem.height : 0
-
-            // need to capture count change otherwise the count won't be
-            // reported for the proxy models
-            Connections {
-                target: flickableItem
-                onCountChanged: itemsSize = flickableItem.count * QuickUtils.modelDelegateHeight(flickableItem.delegate, flickableItem.model)
-            }
-
-            ModelSectionCounter {
-                id: sectionCounter
-                view: flickableItem
-            }
-        }
-    }
-    Loader { id:logicLoader }
-    onFlickableItemChanged: {
-        if (flickableItem) {
-            if (flickableItem.hasOwnProperty("header")) {
-                // we consider Grids same as Flickables
-                if (flickableItem.hasOwnProperty("cellWidth")) {
-                    logicLoader.sourceComponent = undefined;
-                } else {
-                    logicLoader.sourceComponent = listViewLogic;
-                }
-            } else
-                logicLoader.sourceComponent = undefined;
-        }
-    }
+    property real minimumSliderSize: StyleUtils.itemStyleProperty("minimumSliderSize", units.gu(2))
 
     /*****************************************
       Visuals
@@ -135,6 +91,7 @@
         } else
             return 'shown';
     }
+    onStateChanged: print(state)
 
     states: [
         State {
@@ -168,6 +125,7 @@
                 target: visuals
                 property: "opacity"
                 duration: StyleUtils.itemStyleProperty("scrollbarFadeInAnimation").duration
+                easing: StyleUtils.itemStyleProperty("scrollbarFadeInAnimation").easing
             }
         },
         Transition {
@@ -177,6 +135,7 @@
                 target: visuals
                 property: "opacity"
                 duration: StyleUtils.itemStyleProperty("scrollbarFadeInAnimation").duration
+                easing: StyleUtils.itemStyleProperty("scrollbarFadeInAnimation").easing
             }
         },
         Transition {
@@ -187,35 +146,20 @@
                 NumberAnimation {
                     target: visuals
                     property: "opacity"
-                    //to: overlayOpacityWhenHidden
                     duration: StyleUtils.itemStyleProperty("scrollbarFadeOutAnimation").duration
-                    easing.type: StyleUtils.itemStyleProperty("scrollbarFadeOutAnimation").easing.type
+                    easing: StyleUtils.itemStyleProperty("scrollbarFadeOutAnimation").easing
                 }
             }
         }
     ]
 
-    /* Scroll by amount pixels never overshooting */
-    function scrollBy(amount) {
-        var destination = contentPosition + amount
-        destination += (isVertical) ? visuals.originY : visuals.originX
-        scrollAnimation.to = MathUtils.clamp(destination, 0, contentSize - pageSize)
-        scrollAnimation.restart()
-    }
-
-    function scrollOnePageBackward() {
-        scrollBy(-pageSize)
-    }
-
-    function scrollOnePageForward() {
-        scrollBy(pageSize)
-    }
-
     function mapToPoint(map)
     {
         return Qt.point(map.x, map.y)
     }
 
+    SystemPalette { id: systemColors }
+
     SmoothedAnimation {
         id: scrollAnimation
 
@@ -229,7 +173,7 @@
     Item {
         id: scrollbarArea
 
-        property real thickness: itemStyle.scrollAreaThickness
+        property real thickness: StyleUtils.itemStyleProperty("scrollAreaThickness", units.dp(2))
         property real proximityThickness: (isVertical) ? item.width - thickness : item.height - thickness
         anchors {
             fill: parent
@@ -255,6 +199,7 @@
         enabled: isScrollable && interactive
         hoverEnabled: true
         onEntered: thumb.show();
+
         onPressed: mouse.accepted = false
         onClicked: mouse.accepted = false
         onReleased: mouse.accepted = false
@@ -264,10 +209,22 @@
     // The slider's position represents which part of the flickable is visible.
     // The slider's size represents the size the visible part relative to the
     // total size of the flickable.
+    Item {
+        id: scrollCursor
+        x: (isVertical) ? 0 : ScrollbarUtils.sliderPos(item, 0.0, item.width - scrollCursor.width)
+        y: (!isVertical) ? 0 : ScrollbarUtils.sliderPos(item, 0.0, item.height - scrollCursor.height)
+        width: (isVertical) ? scrollbarArea.thickness : ScrollbarUtils.sliderSize(item, 0.0, flickableItem.width)
+        height: (!isVertical) ? scrollbarArea.thickness : ScrollbarUtils.sliderSize(item, 0.0, flickableItem.height)
+
+        function drag() {
+            ScrollbarUtils.dragAndClamp(item, scrollCursor, contentSize, pageSize);
+        }
+    }
+
     Rectangle {
         id: slider
 
-        color: itemStyle.sliderColor
+        color: StyleUtils.itemStyleProperty("sliderColor", systemColors.highlight)
 
         anchors {
             left: (isVertical) ? scrollbarArea.left : undefined
@@ -276,18 +233,10 @@
             bottom: (!isVertical) ? scrollbarArea.bottom : undefined
         }
 
-        x: (isVertical) ? 0 : MathUtils.clampAndProject(contentPosition, 0.0, contentSize - pageSize, 0.0, item.width - slider.width)
-        y: (!isVertical) ? 0 : MathUtils.clampAndProject(contentPosition, 0.0, contentSize - pageSize, 0.0, item.height - slider.height)
-        width: (isVertical) ? scrollbarArea.thickness : sliderSizer.size
-        height: (!isVertical) ? scrollbarArea.thickness : sliderSizer.size
-
-        ScrollSliderSizer {
-            id: sliderSizer
-            positionRatio: (isVertical) ? item.flickableItem.visibleArea.yPosition : item.flickableItem.visibleArea.xPosition
-            sizeRatio: (isVertical) ? item.flickableItem.visibleArea.heightRatio : item.flickableItem.visibleArea.widthRatio
-            maximumPosition: (isVertical) ? item.flickableItem.height : item.flickableItem.width
-            minimumSize: units.gu(2)
-        }
+        x: (isVertical) ? 0 : ScrollbarUtils.sliderPos(item, 0.0, item.width - slider.width)
+        y: (!isVertical) ? 0 : ScrollbarUtils.sliderPos(item, 0.0, item.height - slider.height)
+        width: (isVertical) ? scrollbarArea.thickness : ScrollbarUtils.sliderSize(item, minimumSliderSize, flickableItem.width)
+        height: (!isVertical) ? scrollbarArea.thickness : ScrollbarUtils.sliderSize(item, minimumSliderSize, flickableItem.height)
 
         Behavior on width {
             enabled: (!isVertical)
@@ -301,12 +250,18 @@
                 script: StyleUtils.animate("sliderAnimation")
             }
         }
+
+        function scroll(amount) {
+            scrollAnimation.to = ScrollbarUtils.scrollAndClamp(item, amount, 0.0, contentSize - pageSize);
+            scrollAnimation.restart();
+        }
     }
 
     // The sliderThumbConnector ensures a visual connection between the slider and the thumb
     Rectangle {
         id: sliderThumbConnector
 
+        property real thumbConnectorMargin: StyleUtils.itemStyleProperty("thumbConnectorMargin", units.dp(3))
         property bool isThumbAboveSlider: (isVertical) ? thumb.y < slider.y : thumb.x < slider.x
         anchors {
             left: (isVertical) ? scrollbarArea.left : (isThumbAboveSlider ? thumb.left : slider.right)
@@ -314,12 +269,12 @@
             top: (!isVertical) ? scrollbarArea.top : (isThumbAboveSlider ? thumb.top : slider.bottom)
             bottom: (!isVertical) ? scrollbarArea.bottom : (isThumbAboveSlider ? slider.top : thumb.bottom)
 
-            leftMargin : (isVertical) ? 0 : (isThumbAboveSlider ? itemStyle.thumbConnectorMargin : 0)
-            rightMargin : (isVertical) ? 0 : (isThumbAboveSlider ? 0 : itemStyle.thumbConnectorMargin)
-            topMargin : (!isVertical) ? 0 : (isThumbAboveSlider ? itemStyle.thumbConnectorMargin : 0)
-            bottomMargin : (!isVertical) ? 0 : (isThumbAboveSlider ? 0 : itemStyle.thumbConnectorMargin)
+            leftMargin : (isVertical) ? 0 : (isThumbAboveSlider ? thumbConnectorMargin : 0)
+            rightMargin : (isVertical) ? 0 : (isThumbAboveSlider ? 0 : thumbConnectorMargin)
+            topMargin : (!isVertical) ? 0 : (isThumbAboveSlider ? thumbConnectorMargin : 0)
+            bottomMargin : (!isVertical) ? 0 : (isThumbAboveSlider ? 0 : thumbConnectorMargin)
         }
-        color: itemStyle.thumbConnectorColor
+        color: StyleUtils.itemStyleProperty("thumbConnectorColor", "white")
         opacity: thumb.shown ? 1.0 : 0.0
         Behavior on opacity {animation: ScriptAction {script: StyleUtils.animate("thumbConnectorFading")}}
     }
@@ -361,46 +316,53 @@
         }
         onClicked: {
             if (inThumbBottom)
-                scrollOnePageForward()
+                slider.scroll(pageSize)
             else if (inThumbTop)
-                scrollOnePageBackward()
+                slider.scroll(-pageSize)
         }
 
         // Dragging behaviour
         function resetDrag() {
+            thumbYStart = thumb.y
+            thumbXStart = thumb.x
             dragYStart = drag.target.y
-            thumbYStart = thumb.y
-            sliderYStart = slider.y
             dragXStart = drag.target.x
-            thumbXStart = thumb.x
-            sliderXStart = slider.x
         }
 
-        property int sliderYStart
         property int thumbYStart
         property int dragYStart
         property int dragYAmount: thumbArea.drag.target.y - thumbArea.dragYStart
-        property int sliderXStart
         property int thumbXStart
         property int dragXStart
         property int dragXAmount: thumbArea.drag.target.x - thumbArea.dragXStart
         drag {
-            target: Item {}
+            target: scrollCursor
             axis: (isVertical) ? Drag.YAxis : Drag.XAxis
-            filterChildren: true
-            onActiveChanged: if (drag.active) resetDrag()
+            minimumY: 0
+            maximumY: flickableItem.height - scrollCursor.height
+            minimumX: 0
+            maximumX: flickableItem.width - scrollCursor.width
+            onActiveChanged: {
+                if (drag.active) resetDrag()
+            }
         }
-        // update flickableItem's and thumb's position
-        // cannot use Binding as there would be a binding loop
+        // update thumb position
         onDragYAmountChanged: {
-            var pos = MathUtils.clampAndProject(thumbArea.sliderYStart + thumbArea.dragYAmount, 0.0, item.height - slider.height, 0.0, contentSize - pageSize);
-            item.flickableItem.contentY = MathUtils.clamp(pos + visuals.originY, 0.0, contentSize - pageSize);
-            thumb.y = MathUtils.clamp(thumbArea.thumbYStart + thumbArea.dragYAmount, 0, thumb.maximumPos);
+            if (drag.active) {
+                thumb.y = MathUtils.clamp(thumbArea.thumbYStart + thumbArea.dragYAmount, 0, thumb.maximumPos);
+            }
         }
         onDragXAmountChanged: {
-            var pos = MathUtils.clampAndProject(thumbArea.sliderXStart + thumbArea.dragXAmount, 0.0, item.width - slider.width, 0.0, contentSize - pageSize);
-            item.flickableItem.contentX = MathUtils.clamp(pos + visuals.originX, 0.0, contentSize - pageSize);
-            thumb.x = MathUtils.clamp(thumbArea.thumbXStart + thumbArea.dragXAmount, 0, thumb.maximumPos);
+            if (drag.active) {
+                thumb.x = MathUtils.clamp(thumbArea.thumbXStart + thumbArea.dragXAmount, 0, thumb.maximumPos);
+            }
+        }
+
+        // drag slider and content to the proper position
+        onPositionChanged: {
+            if (pressedButtons == Qt.LeftButton) {
+                scrollCursor.drag()
+            }
         }
     }
 
@@ -477,17 +439,21 @@
         opacity: shown ? (thumbArea.containsMouse || thumbArea.drag.active ? 1.0 : 0.5) : 0.0
         Behavior on opacity {animation: ScriptAction {script: StyleUtils.animate("thumbFading")}}
 
+        property url backwardPressed: StyleUtils.itemStyleProperty("backwardThumbPressed", "")
+        property url backwardReleased: StyleUtils.itemStyleProperty("backwardThumbReleased", "")
+        property url forwardPressed: StyleUtils.itemStyleProperty("forwardThumbPressed", "")
+        property url forwardReleased: StyleUtils.itemStyleProperty("forwardThumbReleased", "")
         Flow {
             // disable mirroring as thumbs are placed in the same way no matter of RTL or LTR
             LayoutMirroring.enabled: false
             flow: (isVertical) ? Flow.TopToBottom : Flow.LeftToRight
             Image {
                 id: thumbTop
-                source: thumbArea.inThumbTop && thumbArea.pressed ? itemStyle.backwardThumbPressed : itemStyle.backwardThumbReleased
+                source: thumbArea.inThumbTop && thumbArea.pressed ? thumb.backwardPressed : thumb.backwardReleased
             }
             Image {
                 id: thumbBottom
-                source: thumbArea.inThumbBottom && thumbArea.pressed ? itemStyle.forwardThumbPressed : itemStyle.forwardThumbReleased
+                source: thumbArea.inThumbBottom && thumbArea.pressed ? thumb.forwardPressed : thumb.forwardReleased
             }
         }
     }

=== removed file 'themes/Ambiance/qmltheme/ScrollbarStyle.qml'
--- themes/Ambiance/qmltheme/ScrollbarStyle.qml	2012-11-29 11:41:29 +0000
+++ themes/Ambiance/qmltheme/ScrollbarStyle.qml	1970-01-01 00:00:00 +0000
@@ -1,54 +0,0 @@
-/*
- * Copyright 2012 Canonical Ltd.
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation; version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import QtQuick 2.0
-
-QtObject {
-    /*!
-      This property drives the interactive behavior of the scrollbar
-      */
-    property bool interactive
-
-    /*!
-      Overlay: when set, opacity specified in overlayOpacity will be used;
-      when no overlay is specuified, the scrollbar is 100% visible
-      */
-    property bool overlay
-    property var overlayOpacityWhenHidden
-    property var overlayOpacityWhenShown
-
-    /*!
-      Scrollbar animations
-      */
-    property PropertyAnimation scrollbarFadeInAnimation
-    property var scrollbarFadeOutPause
-    property PropertyAnimation scrollbarFadeOutAnimation
-    /*!
-      Scrollbar element animations.
-      */
-    property PropertyAnimation sliderAnimation
-    property PropertyAnimation thumbConnectorFading
-    property PropertyAnimation thumbFading
-    property color sliderColor
-    property color thumbConnectorColor
-    property url forwardThumbReleased
-    property url forwardThumbPressed
-    property url backwardThumbReleased
-    property url backwardThumbPressed
-    property real sensingAreaThickness
-    property real scrollAreaThickness
-    property real thumbConnectorMargin
-}

=== modified file 'themes/Ambiance/qmltheme/default.qmltheme'
--- themes/Ambiance/qmltheme/default.qmltheme	2012-12-20 09:06:37 +0000
+++ themes/Ambiance/qmltheme/default.qmltheme	2013-01-09 14:06:21 +0000
@@ -19,7 +19,7 @@
 @qml-mapping(.new-tabs, NewTabsStyle, NewTabsDelegate);
 @qml-mapping(.tab-button, TabButtonStyle, TabButtonDelegate);
 @qml-mapping(.custom-button, ButtonStyle, ButtonDelegate);
-@qml-mapping(.scrollbar, ScrollbarStyle, ScrollbarDelegate);
+@qml-mapping(.scrollbar, , ScrollbarDelegate);
 @qml-mapping (.popover-foreground, , PopoverForegroundDelegate);
 @qml-mapping (.sheet-foreground, , SheetForegroundDelegate);
 @qml-mapping (.dialog-foreground, , DialogForegroundDelegate);
@@ -176,7 +176,6 @@
     backwardThumbPressed: (item.align === Qt.AlignLeading || item.align === Qt.AlignTrailing) ? url("artwork/ScrollbarTopPressed.png") : url("artwork/ScrollbarLeftPressed.png");
     forwardThumbReleased: (item.align === Qt.AlignLeading || item.align === Qt.AlignTrailing) ? url("artwork/ScrollbarBottomIdle.png") : url("artwork/ScrollbarRightIdle.png");
     forwardThumbPressed: (item.align === Qt.AlignLeading || item.align === Qt.AlignTrailing) ? url("artwork/ScrollbarBottomPressed.png") : url("artwork/ScrollbarRightPressed.png");
-    sensingAreaThickness: units.gu(4);
     scrollAreaThickness: units.dp(2);
     thumbConnectorMargin: units.dp(3);
     sliderColor: "#fc7134";
@@ -278,3 +277,7 @@
     color: "white";
     weight: Font.Bold;
 }
+
+.scrollbar {
+    interactive: true
+}