Cleanup and simplify the webbrowser demo.

36 files changed, 225 insertions, 487 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..2862cc4 100644
--- a/demos/declarative/webbrowser/content/FlickableWebView.qml
+++ b/demos/declarative/webbrowser/content/FlickableWebView.qml
@@ -15,7 +15,7 @@ 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
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..976297b
--- /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: scrollArea.moving
+        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..27da814 100644
--- a/demos/declarative/webbrowser/webbrowser.qml
+++ b/demos/declarative/webbrowser/webbrowser.qml
@@ -3,168 +3,39 @@ 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"
+
+    FlickableWebView {
+        id: webView
+        url: webBrowser.urlString
+        anchors { top: headerSpace.bottom; left: parent.left; right: parent.right; bottom: parent.bottom }
+
+    }
 
     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
+        id: headerSpace
+        width: parent.width; height: 62
+    }
 
-            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() }
-                }
-            }
-        }
+    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 }
+    }
+
+//    ScrollBar {
+//        scrollArea: webView; height: 8; orientation: Qt.Horizontal
+//        anchors { right: parent.right; rightMargin: 8; left: parent.left; bottom: parent.bottom }
+//    }
 }