Merge branch '4.7' of scm.dev.nokia.troll.no:qt/qt-qml into 4.7-integration

* '4.7' of scm.dev.nokia.troll.no:qt/qt-qml: (34 commits)
  Fix TextEdit and TextInput input panel support for mode RSIP_OnMouseClickAndAlreadyFocused
  Fix for graphics widget in the background stealing declarative item's focus
  Fix broken benchmarks.
  Possibly fix autotest
  Correctly assign bool to variant properties
  Improve Image docs. Move all fillMode image examples to fillMode
  Flickable small API changes.
  Reset the dragDropItem to 0 when the item dies while dragging on top it.
  Avoid warning (and possible future crash) upon reload.
  Don't pass sequential (QNetworkReply) to image reader, it doesn't work well enough.
  Stop GIF handler claiming it can report Size for sequential devices,
  Use raster graphicssystem for qml.app on OS X.
  Add missing test, qdeclarativelayoutitem, to declarative.pro
  Sorted the tests list in declarative.pro
  Bail out early if the same target value is reassigned to a Behavior.
  Correctly position any input method popups for TextInput.
  Correctly resize TextInput in the presence of preedit text.
  Apply signal handler changes immediately.
  Remove unused image
  Qt.widgets was removed, point to graphics layouts example
  ...

36 files changed, 228 insertions, 488 deletions

diff --git a/demos/declarative/webbrowser/content/Button.qml b/demos/declarative/webbrowser/content/Button.qml
new file mode 100644
index 0000000..a1baf16
--- /dev/null
+++ b/demos/declarative/webbrowser/content/Button.qml
@@ -0,0 +1,18 @@
+import Qt 4.7
+
+Item {
+    property alias image: icon.source
+    property variant action
+
+    width: 40; height: parent.height
+
+    Image {
+        id: icon; anchors.centerIn: parent
+        opacity: action.enabled ? 1.0 : 0.4
+    }
+
+    MouseArea {
+        anchors { fill: parent; topMargin: -10; bottomMargin: -10 }
+        onClicked: action.trigger()
+    }
+}
diff --git a/demos/declarative/webbrowser/content/FlickableWebView.qml b/demos/declarative/webbrowser/content/FlickableWebView.qml
index 50ea97d..7efbaa3 100644
--- a/demos/declarative/webbrowser/content/FlickableWebView.qml
+++ b/demos/declarative/webbrowser/content/FlickableWebView.qml
@@ -15,11 +15,17 @@ Flickable {
     contentWidth: Math.max(parent.width,webView.width*webView.scale)
     contentHeight: Math.max(parent.height,webView.height*webView.scale)
     anchors.top: headerSpace.bottom
-    anchors.bottom: footer.top
+    anchors.bottom: parent.top
     anchors.left: parent.left
     anchors.right: parent.right
     pressDelay: 200
 
+    onWidthChanged : {
+        // Expand (but not above 1:1) if otherwise would be smaller that available width.
+        if (width > webView.width*webView.contentsScale && webView.contentsScale < 1.0)
+            webView.contentsScale = width / webView.width * webView.contentsScale;
+    }
+
     WebView {
         id: webView
         pixelCacheSize: 4000000
diff --git a/demos/declarative/webbrowser/content/Header.qml b/demos/declarative/webbrowser/content/Header.qml
new file mode 100644
index 0000000..7c93580
--- /dev/null
+++ b/demos/declarative/webbrowser/content/Header.qml
@@ -0,0 +1,69 @@
+import Qt 4.7
+
+Image {
+    property alias editUrl: urlInput.url
+
+    source: "pics/titlebar-bg.png"; fillMode: Image.TileHorizontally
+
+    x: webView.contentX < 0 ? -webView.contentX : webView.contentX > webView.contentWidth-webView.width
+       ? -webView.contentX+webView.contentWidth-webView.width : 0
+
+    y: {
+        if (webView.progress < 1.0)
+            return 0;
+        else {
+            webView.contentY < 0 ? -webView.contentY : webView.contentY > height ? -height : -webView.contentY
+        }
+    }
+
+    Column {
+        width: parent.width
+
+        Item {
+            width: parent.width; height: 20
+            Text {
+                anchors.centerIn: parent
+                text: webView.title; font.pixelSize: 14; font.bold: true
+                color: "white"; styleColor: "black"; style: Text.Sunken
+            }
+        }
+
+        Item {
+            width: parent.width; height: 40
+
+            Button {
+                id: backButton
+                action: webView.back; image: "pics/go-previous-view.png"
+                anchors { left: parent.left; bottom: parent.bottom }
+            }
+
+            Button {
+                id: nextButton
+                anchors.left: backButton.right
+                action: webView.forward; image: "pics/go-next-view.png"
+            }
+
+            UrlInput {
+                id: urlInput
+                anchors { left: nextButton.right; right: reloadButton.left }
+                image: "pics/display.png"
+                onUrlEntered: {
+                    webBrowser.urlString = url
+                    webBrowser.focus = true
+                }
+            }
+
+            Button {
+                id: reloadButton
+                anchors { right: parent.right; rightMargin: 4 }
+                action: webView.reload; image: "pics/view-refresh.png"; visible: webView.progress == 1.0
+            }
+
+            Button {
+                id: stopButton
+                anchors { right: parent.right; rightMargin: 4 }
+                action: webView.stop; image: "pics/edit-delete.png"; visible: webView.progress < 1.0
+            }
+        }
+    }
+}
diff --git a/demos/declarative/webbrowser/content/RectSoftShadow.qml b/demos/declarative/webbrowser/content/RectSoftShadow.qml
deleted file mode 100644
index 53d098c..0000000
--- a/demos/declarative/webbrowser/content/RectSoftShadow.qml
+++ /dev/null
@@ -1,32 +0,0 @@
-import Qt 4.7
-
-Item {
-    BorderImage {
-        source: "pics/softshadow-left.sci"
-        x: -16
-        y: -16
-        width: 16
-        height: parent.height+32
-    }
-    BorderImage {
-        source: "pics/softshadow-right.sci"
-        x: parent.width
-        y: -16
-        width: 16
-        height: parent.height+32
-    }
-    Image {
-        source: "pics/softshadow-top.png"
-        x: 0
-        y: -16
-        width: parent.width
-        height: 16
-    }
-    Image {
-        source: "pics/softshadow-bottom.png"
-        x: 0
-        y: parent.height
-        width: parent.width
-        height: 16
-    }
-}
diff --git a/demos/declarative/webbrowser/content/RetractingWebBrowserHeader.qml b/demos/declarative/webbrowser/content/RetractingWebBrowserHeader.qml
deleted file mode 100644
index b02a5bf..0000000
--- a/demos/declarative/webbrowser/content/RetractingWebBrowserHeader.qml
+++ /dev/null
@@ -1,113 +0,0 @@
-import Qt 4.7
-
-import "fieldtext"
-
-Image {
-    property alias editUrl: editUrl.text
-
-    id: header
-    source: "pics/header.png"
-    width: parent.width
-    height: 60
-    x: webView.contentX < 0 ? -webView.contentX : webView.contentX > webView.contentWidth-webView.width
-                             ? -webView.contentX+webView.contentWidth-webView.width : 0
-    y: webView.contentY < 0 ? -webView.contentY : progressOff*
-                            (webView.contentY>height?-height:-webView.contentY)
-    Row {
-        id: headerTitle
-
-        anchors.top: header.top
-        anchors.topMargin: 4
-        x: parent.width > headerIcon.width+headerText.width+6 ? (parent.width-headerIcon.width-headerText.width-6)/2 : 0
-        spacing: 6
-
-        Image {
-            id: headerIcon
-            pixmap: webView.icon
-        }
-
-        Text {
-            id: headerText
-
-            text: webView.title!='' || webView.progress == 1.0 ? webView.title : 'Loading...'
-
-            color: "white"
-            styleColor: "black"
-            style: Text.Raised
-
-            font.family: "Helvetica"
-            font.pointSize: 10
-            font.bold: true
-
-            horizontalAlignment: Text.AlignHCenter
-        }
-    }
-    Item {
-        width: parent.width
-        anchors.top: headerTitle.bottom
-        anchors.topMargin: 2
-        anchors.bottom: parent.bottom
-
-        Item {
-            id: urlBox
-            height: 31
-            anchors.left: parent.left
-            anchors.leftMargin: 12
-            anchors.right: parent.right
-            anchors.rightMargin: 12
-            anchors.top: parent.top
-            clip: true
-            property bool mouseGrabbed: false
-
-            BorderImage {
-                source: "pics/addressbar.sci"
-                anchors.fill: urlBox
-            }
-
-            BorderImage {
-                id: urlBoxhl
-                source: "pics/addressbar-filled.sci"
-                width: parent.width*webView.progress
-                height: parent.height
-                opacity: 1-header.progressOff
-                clip: true
-            }
-
-            FieldText {
-                id: editUrl
-                mouseGrabbed: parent.mouseGrabbed
-
-                text: webBrowser.urlString
-                label: "url:"
-                onConfirmed: { webBrowser.urlString = editUrl.text; webView.focus=true }
-                onCancelled: { webView.focus=true }
-                onStartEdit: { webView.focus=false }
-
-                anchors.left: urlBox.left
-                anchors.right: urlBox.right
-                anchors.leftMargin: 6
-                anchors.verticalCenter: urlBox.verticalCenter
-                anchors.verticalCenterOffset: 1
-            }
-        }
-    }
-
-    property real progressOff : 1
-    states: [
-        State {
-            name: "ProgressShown"
-            when: webView.progress < 1.0
-            PropertyChanges { target: header; progressOff: 0; }
-        }
-    ]
-    transitions: [
-        Transition {
-            NumberAnimation {
-                targets: header
-                properties: "progressOff"
-                easing.type: Easing.InOutQuad
-                duration: 300
-            }
-        }
-    ]
-}
diff --git a/demos/declarative/webbrowser/content/ScrollBar.qml b/demos/declarative/webbrowser/content/ScrollBar.qml
new file mode 100644
index 0000000..aa79d35
--- /dev/null
+++ b/demos/declarative/webbrowser/content/ScrollBar.qml
@@ -0,0 +1,66 @@
+import Qt 4.7
+
+Item {
+    id: container
+
+    property variant scrollArea
+    property variant orientation: Qt.Vertical
+
+    opacity: 0
+
+    function position()
+    {
+        var ny = 0;
+        if (container.orientation == Qt.Vertical)
+            ny = scrollArea.visibleArea.yPosition * container.height;
+        else
+            ny = scrollArea.visibleArea.xPosition * container.width;
+        if (ny > 2) return ny; else return 2;
+    }
+
+    function size()
+    {
+        var nh, ny;
+
+        if (container.orientation == Qt.Vertical)
+            nh = scrollArea.visibleArea.heightRatio * container.height;
+        else
+            nh = scrollArea.visibleArea.widthRatio * container.width;
+
+        if (container.orientation == Qt.Vertical)
+            ny = scrollArea.visibleArea.yPosition * container.height;
+        else
+            ny = scrollArea.visibleArea.xPosition * container.width;
+
+        if (ny > 3) {
+            var t;
+            if (container.orientation == Qt.Vertical)
+                t = Math.ceil(container.height - 3 - ny);
+            else
+                t = Math.ceil(container.width - 3 - ny);
+            if (nh > t) return t; else return nh;
+        } else return nh + ny;
+    }
+
+    Rectangle { anchors.fill: parent; color: "Black"; opacity: 0.5 }
+
+    BorderImage {
+        source: "pics/scrollbar.png"
+        border { left: 1; right: 1; top: 1; bottom: 1 }
+        x: container.orientation == Qt.Vertical ? 2 : position()
+        width: container.orientation == Qt.Vertical ? container.width - 4 : size()
+        y: container.orientation == Qt.Vertical ? position() : 2
+        height: container.orientation == Qt.Vertical ? size() : container.height - 4
+    }
+
+    states: State {
+        name: "visible"
+        when: container.orientation == Qt.Vertical ? scrollArea.movingVertically : scrollArea.movingHorizontally
+        PropertyChanges { target: container; opacity: 1.0 }
+    }
+
+    transitions: Transition {
+        from: "visible"; to: ""
+        NumberAnimation { properties: "opacity"; duration: 600 }
+    }
+}
diff --git a/demos/declarative/webbrowser/content/UrlInput.qml b/demos/declarative/webbrowser/content/UrlInput.qml
new file mode 100644
index 0000000..9f7fc38
--- /dev/null
+++ b/demos/declarative/webbrowser/content/UrlInput.qml
@@ -0,0 +1,44 @@
+import Qt 4.7
+
+Item {
+    id: container
+
+    property alias image: bg.source
+    property alias url: urlText.text
+
+    signal urlEntered(string url)
+
+    width: parent.height; height: parent.height
+
+    BorderImage {
+        id: bg; rotation: 180
+        x: 8; width: parent.width - 16; height: 30;
+        anchors.verticalCenter: parent.verticalCenter
+        border { left: 10; top: 10; right: 10; bottom: 10 }
+    }
+
+    Rectangle {
+        anchors.bottom: bg.bottom
+        x: 18; height: 4; color: "#63b1ed"
+        width: (bg.width - 20) * webView.progress
+        opacity: webView.progress == 1.0 ? 0.0 : 1.0
+    }
+
+    TextInput {
+        id: urlText
+        horizontalAlignment: TextEdit.AlignLeft
+        font.pixelSize: 14; focusOnPress: true
+        Keys.onEscapePressed: {
+            urlText.text = webView.url
+            webView.focus = true
+        }
+        Keys.onReturnPressed: {
+            container.urlEntered(urlText.text)
+            webView.focus = true
+        }
+        anchors {
+            left: parent.left; right: parent.right; leftMargin: 18; rightMargin: 18
+            verticalCenter: parent.verticalCenter
+        }
+    }
+}
diff --git a/demos/declarative/webbrowser/content/fieldtext/FieldText.qml b/demos/declarative/webbrowser/content/fieldtext/FieldText.qml
deleted file mode 100644
index d1d003f..0000000
--- a/demos/declarative/webbrowser/content/fieldtext/FieldText.qml
+++ /dev/null
@@ -1,157 +0,0 @@
-import Qt 4.7
-
-Item {
-    id: fieldText
-    height: 30
-    property string text: ""
-    property string label: ""
-    property bool mouseGrabbed: false
-    signal confirmed
-    signal cancelled
-    signal startEdit
-
-    function edit() {
-        if (!mouseGrabbed) {
-            fieldText.startEdit();
-            fieldText.state='editing';
-            mouseGrabbed=true;
-        }
-    }
-
-    function confirm() {
-        fieldText.state='';
-        fieldText.text = textEdit.text;
-        mouseGrabbed=false;
-        fieldText.confirmed();
-    }
-
-    function reset() {
-        textEdit.text = fieldText.text;
-        fieldText.state='';
-        mouseGrabbed=false;
-        fieldText.cancelled();
-    }
-
-    Image {
-        id: cancelIcon
-        width: 22
-        height: 22
-        anchors.right: parent.right
-        anchors.rightMargin: 4
-        anchors.verticalCenter: parent.verticalCenter
-        source: "pics/cancel.png"
-        opacity: 0
-    }
-
-    Image {
-        id: confirmIcon
-        width: 22
-        height: 22
-        anchors.left: parent.left
-        anchors.leftMargin: 4
-        anchors.verticalCenter: parent.verticalCenter
-        source: "pics/ok.png"
-        opacity: 0
-    }
-
-    TextInput {
-        id: textEdit
-        text: fieldText.text
-        focus: false
-        anchors.left: parent.left
-        anchors.leftMargin: 0
-        anchors.right: parent.right
-        anchors.rightMargin: 0
-        anchors.verticalCenter: parent.verticalCenter
-        color: "black"
-        font.bold: true
-        readOnly: true
-        onAccepted: confirm()
-        Keys.onEscapePressed: reset()
-    }
-
-    Text {
-        id: textLabel
-        x: 5
-        width: parent.width-10
-        anchors.verticalCenter: parent.verticalCenter
-        horizontalAlignment: Text.AlignHCenter
-        color: fieldText.state == "editing" ? "#505050" : "#AAAAAA"
-        font.italic: true
-        font.bold: true
-        text: label
-        opacity: textEdit.text == '' ? 1 : 0
-        Behavior on opacity {
-            NumberAnimation {
-                property: "opacity"
-                duration: 250
-            }
-        }
-    }
-
-    MouseArea {
-        anchors.fill: cancelIcon
-        onClicked: { reset() }
-    }
-
-    MouseArea {
-        anchors.fill: confirmIcon
-        onClicked: { confirm() }
-    }
-
-    MouseArea {
-        id: editRegion
-        anchors.fill: textEdit
-        onClicked: { edit() }
-    }
-
-    states: [
-    State {
-        name: "editing"
-        PropertyChanges {
-            target: confirmIcon
-            opacity: 1
-        }
-        PropertyChanges {
-            target: cancelIcon
-            opacity: 1
-        }
-        PropertyChanges {
-            target: textEdit
-            color: "black"
-            readOnly: false
-            focus: true
-            selectionStart: 0
-            selectionEnd: -1
-        }
-        PropertyChanges {
-            target: editRegion
-            opacity: 0
-        }
-        PropertyChanges {
-            target: textEdit.anchors
-            leftMargin: 34
-        }
-        PropertyChanges {
-            target: textEdit.anchors
-            rightMargin: 34
-        }
-    }
-    ]
-
-    transitions: [
-    Transition {
-        from: ""
-        to: "*"
-        reversible: true
-        NumberAnimation {
-            properties: "opacity,leftMargin,rightMargin"
-            duration: 200
-        }
-        ColorAnimation {
-            property: "color"
-            duration: 150
-        }
-    }
-    ]
-}
diff --git a/demos/declarative/webbrowser/content/fieldtext/pics/cancel.png b/demos/declarative/webbrowser/content/fieldtext/pics/cancel.png
deleted file mode 100644
index ecc9533..0000000
--- a/demos/declarative/webbrowser/content/fieldtext/pics/cancel.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/fieldtext/pics/ok.png b/demos/declarative/webbrowser/content/fieldtext/pics/ok.png
deleted file mode 100644
index 5795f04..0000000
--- a/demos/declarative/webbrowser/content/fieldtext/pics/ok.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/addressbar-filled.png b/demos/declarative/webbrowser/content/pics/addressbar-filled.png
deleted file mode 100644
index d8452ec..0000000
--- a/demos/declarative/webbrowser/content/pics/addressbar-filled.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/addressbar-filled.sci b/demos/declarative/webbrowser/content/pics/addressbar-filled.sci
deleted file mode 100644
index 96c5efb..0000000
--- a/demos/declarative/webbrowser/content/pics/addressbar-filled.sci
+++ /dev/null
@@ -1,6 +0,0 @@
-border.left: 7
-border.top: 7
-border.bottom: 7
-border.right: 7
-source: addressbar-filled.png
-
diff --git a/demos/declarative/webbrowser/content/pics/addressbar.png b/demos/declarative/webbrowser/content/pics/addressbar.png
deleted file mode 100644
index 3278f58..0000000
--- a/demos/declarative/webbrowser/content/pics/addressbar.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/addressbar.sci b/demos/declarative/webbrowser/content/pics/addressbar.sci
deleted file mode 100644
index 8f1cd18..0000000
--- a/demos/declarative/webbrowser/content/pics/addressbar.sci
+++ /dev/null
@@ -1,6 +0,0 @@
-border.left: 7
-border.top: 7
-border.bottom: 7
-border.right: 7
-source: addressbar.png
-
diff --git a/demos/declarative/webbrowser/content/pics/back-disabled.png b/demos/declarative/webbrowser/content/pics/back-disabled.png
deleted file mode 100644
index 91b9e76..0000000
--- a/demos/declarative/webbrowser/content/pics/back-disabled.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/back.png b/demos/declarative/webbrowser/content/pics/back.png
deleted file mode 100644
index 9988dd3..0000000
--- a/demos/declarative/webbrowser/content/pics/back.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/display.png b/demos/declarative/webbrowser/content/pics/display.png
new file mode 100644
index 0000000..9507f43
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/display.png
diff --git a/demos/declarative/webbrowser/content/pics/edit-delete.png b/demos/declarative/webbrowser/content/pics/edit-delete.png
new file mode 100644
index 0000000..351659b
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/edit-delete.png
diff --git a/demos/declarative/webbrowser/content/pics/footer.png b/demos/declarative/webbrowser/content/pics/footer.png
deleted file mode 100644
index 8391a93..0000000
--- a/demos/declarative/webbrowser/content/pics/footer.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/footer.sci b/demos/declarative/webbrowser/content/pics/footer.sci
deleted file mode 100644
index 7be58f1..0000000
--- a/demos/declarative/webbrowser/content/pics/footer.sci
+++ /dev/null
@@ -1,6 +0,0 @@
-border.left: 5
-border.top: 0
-border.bottom: 0
-border.right: 5
-source: footer.png
-
diff --git a/demos/declarative/webbrowser/content/pics/forward-disabled.png b/demos/declarative/webbrowser/content/pics/forward-disabled.png
deleted file mode 100644
index cb87f4f..0000000
--- a/demos/declarative/webbrowser/content/pics/forward-disabled.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/forward.png b/demos/declarative/webbrowser/content/pics/forward.png
deleted file mode 100644
index 83870ee..0000000
--- a/demos/declarative/webbrowser/content/pics/forward.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/go-next-view.png b/demos/declarative/webbrowser/content/pics/go-next-view.png
new file mode 100644
index 0000000..3bce02d
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/go-next-view.png
diff --git a/demos/declarative/webbrowser/content/pics/go-previous-view.png b/demos/declarative/webbrowser/content/pics/go-previous-view.png
new file mode 100644
index 0000000..3ec011e
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/go-previous-view.png
diff --git a/demos/declarative/webbrowser/content/pics/header.png b/demos/declarative/webbrowser/content/pics/header.png
deleted file mode 100644
index 26588c3..0000000
--- a/demos/declarative/webbrowser/content/pics/header.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/reload.png b/demos/declarative/webbrowser/content/pics/reload.png
deleted file mode 100644
index 45b5535..0000000
--- a/demos/declarative/webbrowser/content/pics/reload.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/scrollbar.png b/demos/declarative/webbrowser/content/pics/scrollbar.png
new file mode 100644
index 0000000..0228dcf
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/scrollbar.png
diff --git a/demos/declarative/webbrowser/content/pics/softshadow-bottom.png b/demos/declarative/webbrowser/content/pics/softshadow-bottom.png
deleted file mode 100644
index 85b0b44..0000000
--- a/demos/declarative/webbrowser/content/pics/softshadow-bottom.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/softshadow-left.png b/demos/declarative/webbrowser/content/pics/softshadow-left.png
deleted file mode 100644
index 02926d1..0000000
--- a/demos/declarative/webbrowser/content/pics/softshadow-left.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/softshadow-left.sci b/demos/declarative/webbrowser/content/pics/softshadow-left.sci
deleted file mode 100644
index 45c88d5..0000000
--- a/demos/declarative/webbrowser/content/pics/softshadow-left.sci
+++ /dev/null
@@ -1,5 +0,0 @@
-border.left: 0
-border.top: 16
-border.bottom: 16
-border.right: 0
-source: softshadow-left.png
diff --git a/demos/declarative/webbrowser/content/pics/softshadow-right.png b/demos/declarative/webbrowser/content/pics/softshadow-right.png
deleted file mode 100644
index e459f4f..0000000
--- a/demos/declarative/webbrowser/content/pics/softshadow-right.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/softshadow-right.sci b/demos/declarative/webbrowser/content/pics/softshadow-right.sci
deleted file mode 100644
index 4d459c0..0000000
--- a/demos/declarative/webbrowser/content/pics/softshadow-right.sci
+++ /dev/null
@@ -1,5 +0,0 @@
-border.left: 0
-border.top: 16
-border.bottom: 16
-border.right: 0
-source: softshadow-right.png
diff --git a/demos/declarative/webbrowser/content/pics/softshadow-top.png b/demos/declarative/webbrowser/content/pics/softshadow-top.png
deleted file mode 100644
index 9a9e232..0000000
--- a/demos/declarative/webbrowser/content/pics/softshadow-top.png
+++ /dev/null
diff --git a/demos/declarative/webbrowser/content/pics/titlebar-bg.png b/demos/declarative/webbrowser/content/pics/titlebar-bg.png
new file mode 100644
index 0000000..06961e8
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/titlebar-bg.png
diff --git a/demos/declarative/webbrowser/content/pics/view-refresh.png b/demos/declarative/webbrowser/content/pics/view-refresh.png
new file mode 100644
index 0000000..afa2a9d
--- /dev/null
+++ b/demos/declarative/webbrowser/content/pics/view-refresh.png
diff --git a/demos/declarative/webbrowser/webbrowser.qml b/demos/declarative/webbrowser/webbrowser.qml
index f1a6034..f539e21 100644
--- a/demos/declarative/webbrowser/webbrowser.qml
+++ b/demos/declarative/webbrowser/webbrowser.qml
@@ -3,168 +3,35 @@ import org.webkit 1.0
 
 import "content"
 
-Item {
+Rectangle {
     id: webBrowser
 
     property string urlString : "http://qt.nokia.com/"
 
-    width: 640
-    height: 480
+    width: 800; height: 600
+    color: "#343434"
 
-    Item {
-        id: webPanel
-        anchors.fill: parent
-        clip: true
-        Rectangle {
-            color: "#555555"
-            anchors.fill: parent
-        }
-        Image {
-            source: "content/pics/softshadow-bottom.png"
-            width: webPanel.width
-            height: 16
-        }
-        Image {
-            source: "content/pics/softshadow-top.png"
-            width: webPanel.width
-            height: 16
-            anchors.bottom: footer.top
-        }
-        RectSoftShadow {
-            x: -webView.contentX
-            y: -webView.contentY
-            width: webView.contentWidth
-            height: webView.contentHeight+headerSpace.height
-        }
-        Item {
-            id: headerSpace
-            width: parent.width
-            height: 60
-            z: 1
+    FlickableWebView {
+        id: webView
+        url: webBrowser.urlString
+        anchors { top: headerSpace.bottom; left: parent.left; right: parent.right; bottom: parent.bottom }
+    }
+
+    Item { id: headerSpace; width: parent.width; height: 62 }
+
+    Header {
+        id: header
+        editUrl: webBrowser.urlString
+        width: headerSpace.width; height: headerSpace.height
+    }
+
+    ScrollBar {
+        scrollArea: webView; width: 8
+        anchors { right: parent.right; top: header.bottom; bottom: parent.bottom }
+    }
 
-            RetractingWebBrowserHeader { id: header }
-        }
-        FlickableWebView {
-            id: webView
-            width: parent.width
-            anchors.top: headerSpace.bottom
-            anchors.bottom: footer.top
-            anchors.left: parent.left
-            anchors.right: parent.right
-        }
-        BorderImage {
-            id: footer
-            source: "content/pics/footer.sci"
-            width: parent.width
-            height: 43
-            anchors.bottom: parent.bottom
-            Rectangle {
-                y: -1
-                width: parent.width
-                height: 1
-                color: "#555555"
-            }
-            Item {
-                id: backbutton
-                width: back_e.width
-                height: back_e.height
-                anchors.right: reload.left
-                anchors.rightMargin: 10
-                anchors.verticalCenter: parent.verticalCenter
-                Image {
-                    id: back_e
-                    source: "content/pics/back.png"
-                    anchors.fill: parent
-                }
-                Image {
-                    id: back_d
-                    source: "content/pics/back-disabled.png"
-                    anchors.fill: parent
-                }
-                states: [
-                    State {
-                        name: "Enabled"
-                        when: webView.back.enabled==true
-                        PropertyChanges { target: back_e; opacity: 1 }
-                        PropertyChanges { target: back_d; opacity: 0 }
-                    },
-                    State {
-                        name: "Disabled"
-                        when: webView.back.enabled==false
-                        PropertyChanges { target: back_e; opacity: 0 }
-                        PropertyChanges { target: back_d; opacity: 1 }
-                    }
-                ]
-                transitions: [
-                    Transition {
-                        NumberAnimation {
-                            properties: "opacity"
-                            easing.type: Easing.InOutQuad
-                            duration: 300
-                        }
-                    }
-                ]
-                MouseArea {
-                    anchors.fill: back_e
-                    onClicked: { if (webView.back.enabled) webView.back.trigger() }
-                }
-            }
-            Image {
-                id: reload
-                source: "content/pics/reload.png"
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.verticalCenter: parent.verticalCenter
-            }
-            MouseArea {
-                anchors.fill: reload
-                onClicked: { webView.reload.trigger() }
-            }
-            Item {
-                id: forwardbutton
-                width: forward_e.width
-                height: forward_e.height
-                anchors.left: reload.right
-                anchors.leftMargin: 10
-                anchors.verticalCenter: parent.verticalCenter
-                Image {
-                    id: forward_e
-                    source: "content/pics/forward.png"
-                    anchors.fill: parent
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-                Image {
-                    id: forward_d
-                    source: "content/pics/forward-disabled.png"
-                    anchors.fill: parent
-                }
-                states: [
-                    State {
-                        name: "Enabled"
-                        when: webView.forward.enabled==true
-                        PropertyChanges { target: forward_e; opacity: 1 }
-                        PropertyChanges { target: forward_d; opacity: 0 }
-                    },
-                    State {
-                        name: "Disabled"
-                        when: webView.forward.enabled==false
-                        PropertyChanges { target: forward_e; opacity: 0 }
-                        PropertyChanges { target: forward_d; opacity: 1 }
-                    }
-                ]
-                transitions: [
-                    Transition {
-                        NumberAnimation {
-                            properties: "opacity"
-                            easing.type: Easing.InOutQuad
-                            duration: 320
-                        }
-                    }
-                ]
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: { if (webView.forward.enabled) webView.forward.trigger() }
-                }
-            }
-        }
+    ScrollBar {
+        scrollArea: webView; height: 8; orientation: Qt.Horizontal
+        anchors { right: parent.right; rightMargin: 8; left: parent.left; bottom: parent.bottom }
     }
 }