Move custom dialogs example to manual tests

This example shows how to use dialogs, however documentation
already provides snippets for that added in 3cbe59e29a.
The only missing one was tooltip, therefore add missing snippet
and move example to manual tests.

Task-number: QTBUG-108751
Change-Id: I84eda805455fb0276046ed1089389d605a8af672
Reviewed-by: Michal Klocek <michal.klocek@qt.io>
(cherry picked from commit 6bf30525ee49d270dae6a6440bc607513f21237c)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

30 files changed, 1557 insertions, 0 deletions

diff --git a/tests/manual/examples/quick/CMakeLists.txt b/tests/manual/examples/quick/CMakeLists.txt
index d853ba634..72b86d185 100644
--- a/tests/manual/examples/quick/CMakeLists.txt
+++ b/tests/manual/examples/quick/CMakeLists.txt
@@ -1 +1,2 @@
 add_subdirectory(minimal)
+add_subdirectory(customdialogs)
diff --git a/tests/manual/examples/quick/customdialogs/CMakeLists.txt b/tests/manual/examples/quick/customdialogs/CMakeLists.txt
new file mode 100644
index 000000000..f0cdd54fa
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/CMakeLists.txt
@@ -0,0 +1,56 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+if (NOT QT_BUILD_STANDALONE_TESTS AND NOT QT_BUILDING_QT)
+    cmake_minimum_required(VERSION 3.16)
+    project(customdialogs LANGUAGES CXX)
+    find_package(Qt6 REQUIRED COMPONENTS Core Gui WebEngineQuick)
+endif()
+
+qt_internal_add_manual_test(customdialogs
+    SOURCES main.cpp server.cpp server.h
+)
+
+set_target_properties(customdialogs PROPERTIES
+    WIN32_EXECUTABLE TRUE
+    MACOSX_BUNDLE TRUE
+)
+
+target_link_libraries(customdialogs PUBLIC
+    Qt::Core
+    Qt::Gui
+    Qt::WebEngineQuick
+)
+
+set(customdialogs_resource_files
+    "MessageRectangle.qml"
+    "SwitchButton.qml"
+    "WebView.qml"
+    "forms/Authentication.qml"
+    "forms/AuthenticationForm.ui.qml"
+    "forms/ColorCell.qml"
+    "forms/ColorPicker.qml"
+    "forms/ColorPickerForm.ui.qml"
+    "forms/CustomButton.qml"
+    "forms/FilePicker.qml"
+    "forms/FilePickerForm.ui.qml"
+    "forms/FileRow.qml"
+    "forms/JavaScript.qml"
+    "forms/JavaScriptForm.ui.qml"
+    "forms/Menu.qml"
+    "forms/MenuForm.ui.qml"
+    "forms/TouchSelectionMenu.qml"
+    "forms/TouchSelectionMenuForm.ui.qml"
+    "icon.svg"
+    "index.html"
+    "main.qml"
+    "style.css"
+)
+
+qt_add_resources(customdialogs "customdialogs"
+    PREFIX
+        "/"
+    FILES
+        ${customdialogs_resource_files}
+)
+
diff --git a/tests/manual/examples/quick/customdialogs/MessageRectangle.qml b/tests/manual/examples/quick/customdialogs/MessageRectangle.qml
new file mode 100644
index 000000000..09a202cf3
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/MessageRectangle.qml
@@ -0,0 +1,18 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Rectangle {
+    property alias text: messageText.text
+    width: parent.width
+    height: 30
+    visible: false
+    color: "#80c342"
+    Text {
+        id: messageText
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        font.pointSize: 12
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/SwitchButton.qml b/tests/manual/examples/quick/customdialogs/SwitchButton.qml
new file mode 100644
index 000000000..69fc1427e
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/SwitchButton.qml
@@ -0,0 +1,23 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+    width: parent.width
+    height: 40
+    property alias checked: switcher.checked
+    RowLayout {
+        anchors.centerIn: parent
+        Text {
+            text: qsTr("Use default dialogs")
+            font.pointSize: 12
+        }
+        Switch {
+            id: switcher
+            checked: true
+        }
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/WebView.qml b/tests/manual/examples/quick/customdialogs/WebView.qml
new file mode 100644
index 000000000..5c99ee7e7
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/WebView.qml
@@ -0,0 +1,117 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtWebEngine
+
+WebEngineView {
+    id: view
+    url: "qrc:/index.html"
+    property bool useDefaultDialogs: true
+    signal openForm(var form)
+
+    Rectangle {
+        id: tooltip
+        width: 200
+        height: 30
+        z: 50
+        visible: false
+        color: "gray"
+        border.color: "black"
+        border.width: 2
+        radius: 3
+
+        property string text: ""
+
+        Text {
+            x: 0
+            y: 0
+            color: "#ffffff"
+            text: parent.text
+            font.pointSize: 12
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            font.bold: false
+        }
+
+    }
+
+    onContextMenuRequested: function(request) {
+        // we only show menu for links with #openMenu
+        if (!request.linkUrl.toString().endsWith("#openMenu")) {
+            request.accepted = true;
+            return;
+        }
+        // return early to show default menu
+        if (useDefaultDialogs)
+            return;
+
+        request.accepted = true;
+        openForm({item: Qt.resolvedUrl("forms/Menu.qml"),
+                     properties: {"request": request}});
+    }
+
+    onTooltipRequested: function(request) {
+        if (useDefaultDialogs)
+            return;
+
+        if (request.type == TooltipRequest.Show) {
+            tooltip.visible = true;
+            tooltip.x = request.x;
+            tooltip.y = request.y;
+            tooltip.text = request.text;
+        } else {
+            tooltip.visible = false;
+        }
+
+        request.accepted = true;
+    }
+
+    onAuthenticationDialogRequested: function(request) {
+        if (useDefaultDialogs) {
+            // do not show proxy error page
+            view.url = "qrc:/index.html"
+            return;
+        }
+        request.accepted = true;
+        openForm({item: Qt.resolvedUrl("forms/Authentication.qml"),
+                     properties: {"request": request}});
+    }
+
+    onJavaScriptDialogRequested: function(request) {
+        if (useDefaultDialogs)
+            return;
+
+        request.accepted = true;
+        openForm({item: Qt.resolvedUrl("forms/JavaScript.qml"),
+                     properties: {"request": request}});
+    }
+
+    onColorDialogRequested: function(request) {
+        if (useDefaultDialogs)
+            return;
+
+        request.accepted = true;
+        openForm({item: Qt.resolvedUrl("forms/ColorPicker.qml"),
+                     properties: {"request": request}});
+    }
+
+    onFileDialogRequested: function(request) {
+        if (useDefaultDialogs)
+            return;
+
+        request.accepted = true;
+        openForm({item: Qt.resolvedUrl("forms/FilePicker.qml"),
+                     properties: {"request": request}});
+
+    }
+
+    onTouchSelectionMenuRequested: function(request) {
+        if (useDefaultDialogs)
+            return;
+
+        request.accepted = true;
+        openForm({item: Qt.resolvedUrl("forms/TouchSelectionMenu.qml"),
+                     properties: {"request": request}});
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/customdialogs.pro b/tests/manual/examples/quick/customdialogs/customdialogs.pro
new file mode 100644
index 000000000..1b9a6778e
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/customdialogs.pro
@@ -0,0 +1,18 @@
+QT += webenginequick
+
+HEADERS += \
+    server.h
+
+SOURCES += \
+    main.cpp \
+    server.cpp
+
+RESOURCES += \
+    customdialogs.qrc
+
+target.path = $$[QT_INSTALL_EXAMPLES]/webenginequick/customdialogs
+INSTALLS += target
+
+qtHaveModule(widgets) {
+    QT += widgets # QApplication is required to get native styling with QtQuickControls
+}
diff --git a/tests/manual/examples/quick/customdialogs/customdialogs.qrc b/tests/manual/examples/quick/customdialogs/customdialogs.qrc
new file mode 100644
index 000000000..bb2677198
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/customdialogs.qrc
@@ -0,0 +1,24 @@
+<RCC>
+    <qresource prefix="/">
+        <file>forms/AuthenticationForm.ui.qml</file>
+        <file>forms/Authentication.qml</file>
+        <file>forms/ColorCell.qml</file>
+        <file>forms/ColorPickerForm.ui.qml</file>
+        <file>forms/ColorPicker.qml</file>
+        <file>forms/CustomButton.qml</file>
+        <file>forms/FilePickerForm.ui.qml</file>
+        <file>forms/FilePicker.qml</file>
+        <file>forms/FileRow.qml</file>
+        <file>forms/JavaScriptForm.ui.qml</file>
+        <file>forms/JavaScript.qml</file>
+        <file>forms/MenuForm.ui.qml</file>
+        <file>forms/Menu.qml</file>
+        <file>icon.svg</file>
+        <file>index.html</file>
+        <file>main.qml</file>
+        <file>MessageRectangle.qml</file>
+        <file>style.css</file>
+        <file>SwitchButton.qml</file>
+        <file>WebView.qml</file>
+    </qresource>
+</RCC>
diff --git a/tests/manual/examples/quick/customdialogs/forms/Authentication.qml b/tests/manual/examples/quick/customdialogs/forms/Authentication.qml
new file mode 100644
index 000000000..151a7c4aa
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/Authentication.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtWebEngine
+
+AuthenticationForm {
+    property QtObject request
+    signal closeForm()
+
+    cancelButton.onClicked: {
+        request.dialogReject();
+        closeForm();
+    }
+
+    loginButton.onClicked: {
+        request.dialogReject();
+        closeForm();
+    }
+
+    Component.onCompleted: {
+        switch (request.type) {
+        case  AuthenticationDialogRequest.AuthenticationTypeHTTP:
+            console.log("HTTP Authentication Required. Host says: " + request.realm);
+            break;
+        case  AuthenticationDialogRequest.AuthenticationTypeProxy:
+            console.log("Proxy Authentication Required for: " + request.proxyHost);
+            break;
+        }
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/AuthenticationForm.ui.qml b/tests/manual/examples/quick/customdialogs/forms/AuthenticationForm.ui.qml
new file mode 100644
index 000000000..f14986b20
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/AuthenticationForm.ui.qml
@@ -0,0 +1,137 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+Item {
+    id: item1
+    property alias cancelButton: cancelButton
+    property alias loginButton: loginButton
+    property alias userName: userName
+    property alias password: password
+
+    ColumnLayout {
+        id: columnLayout
+        anchors.topMargin: 20
+        anchors.top: parent.top
+        anchors.bottomMargin: 20
+        anchors.bottom: parent.bottom
+        anchors.rightMargin: 20
+        anchors.right: parent.right
+        anchors.leftMargin: 20
+        anchors.left: parent.left
+
+        Image {
+            id: image
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            source: "qrc:/icon.svg"
+        }
+
+        Rectangle {
+            id: rectangle
+            width: parent.width
+            height: 30
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            gradient: Gradient {
+                GradientStop {
+                    position: 0
+                    color: "#25a6e2"
+                }
+                GradientStop {
+                    color: "#188bd0"
+                }
+            }
+
+            Text {
+                id: textArea
+                x: 54
+                y: 5
+                color: "#ffffff"
+                text: qsTr("Restricted Area")
+                font.pointSize: 12
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+
+        Item {
+            width: 40
+            height: 40
+        }
+
+        Text {
+            id: userNameText
+            text: qsTr("Username:")
+            font.pointSize: 12
+        }
+
+        TextField {
+            id: userName
+            width: 300
+            height: 22
+            Layout.fillWidth: true
+            font.pointSize: 12
+            color: "black"
+
+            background: Rectangle {
+                color: "white"
+                border.color: "black"
+                border.width: 1
+            }
+        }
+
+        Text {
+            id: passwordText
+            text: qsTr("Password:")
+            font.pointSize: 12
+        }
+
+        TextField {
+            id: password
+            width: 300
+            height: 26
+            Layout.fillWidth: true
+            font.pointSize: 12
+            color: "black"
+            echoMode: TextInput.Password
+
+            background: Rectangle {
+                color: "white"
+                border.color: "black"
+                border.width: 1
+            }
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+
+        RowLayout {
+            id: rowLayout
+            width: 100
+            height: 100
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+            CustomButton {
+                id: cancelButton
+                width: 90
+                height: 30
+                btnText: qsTr("Cancel")
+                btnBlue: false
+            }
+
+            CustomButton {
+                id: loginButton
+                width: 90
+                height: 30
+                btnText: qsTr("Login")
+                btnBlue: false
+            }
+        }
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/ColorCell.qml b/tests/manual/examples/quick/customdialogs/forms/ColorCell.qml
new file mode 100644
index 000000000..57151780c
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/ColorCell.qml
@@ -0,0 +1,16 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Rectangle {
+    id: rectangle
+    width: 50
+    height: 50
+    signal clicked()
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: rectangle.clicked()
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/ColorPicker.qml b/tests/manual/examples/quick/customdialogs/forms/ColorPicker.qml
new file mode 100644
index 000000000..63269ddff
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/ColorPicker.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+ColorPickerForm {
+    property QtObject request
+    signal closeForm()
+
+    okButton.onClicked: {
+        request.dialogAccept(colorPicker.color);
+        closeForm();
+    }
+
+    cancelButton.onClicked: {
+        request.dialogReject();
+        closeForm();
+    }
+
+    function createCallback(color) {
+        return function() { colorPicker.color = color };
+    }
+
+    Component.onCompleted:{
+        for (var i = 0; i < grid.children.length; i++) {
+            var cell = grid.children[i];
+            cell.clicked.connect(createCallback(cell.color));
+        }
+        colorPicker.color = request.color;
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/ColorPickerForm.ui.qml b/tests/manual/examples/quick/customdialogs/forms/ColorPickerForm.ui.qml
new file mode 100644
index 000000000..060aeef7d
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/ColorPickerForm.ui.qml
@@ -0,0 +1,186 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    property alias cancelButton: cancelButton
+    property alias okButton: okButton
+    property string message: "Message"
+    property string title: "Title"
+    property alias blue1: blue1
+    property alias grid: grid
+    property alias colorPicker: colorPicker
+
+    ColumnLayout {
+        id: columnLayout
+        anchors.topMargin: 20
+        anchors.top: parent.top
+        anchors.bottomMargin: 20
+        anchors.bottom: parent.bottom
+        anchors.rightMargin: 20
+        anchors.right: parent.right
+        anchors.leftMargin: 20
+        anchors.left: parent.left
+
+        Image {
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            source: "qrc:/icon.svg"
+        }
+
+        Rectangle {
+            width: parent.width
+            height: 30
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            gradient: Gradient {
+                GradientStop {
+                    position: 0
+                    color: "#25a6e2"
+                }
+
+                GradientStop {
+                    color: "#188bd0"
+                }
+            }
+
+            Text {
+                id: title
+                x: 54
+                y: 5
+                color: "#ffffff"
+                text: qsTr("Select Color")
+                font.pointSize: 12
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+
+        Item {
+            width: 40
+            height: 40
+        }
+
+        GridLayout {
+            id: grid
+            columns: 5
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+            ColorCell {
+                id: blue1
+                color: "#26d5f8"
+            }
+            ColorCell {
+                id: green1
+                color: "#25f93d"
+            }
+            ColorCell {
+                id: red1
+                color: "#f71111"
+            }
+            ColorCell {
+                id: yellow1
+                color: "#faf23c"
+            }
+            ColorCell {
+                id: orange1
+                color: "#ec8505"
+            }
+            ColorCell {
+                id: blue2
+                color: "#037eaa"
+            }
+            ColorCell {
+                id: green2
+                color: "#389a13"
+            }
+            ColorCell {
+                id: red2
+                color: "#b2001b"
+            }
+            ColorCell {
+                id: yellow2
+                color: "#caca03"
+            }
+            ColorCell {
+                id: orange2
+                color: "#bb4900"
+            }
+            ColorCell {
+                id: blue3
+                color: "#01506c"
+            }
+            ColorCell {
+                id: green3
+                color: "#37592b"
+            }
+            ColorCell {
+                id: red3
+                color: "#700113"
+            }
+            ColorCell {
+                id: yellow3
+                color: "#848404"
+            }
+
+            ColorCell {
+                id: orange3
+                color: "#563100"
+            }
+        }
+
+        Item {
+            width: 10
+            height: 10
+        }
+
+        Rectangle {
+            width: 90
+            height: 90
+            color: "#000000"
+            radius: 4
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+            Rectangle {
+                id: colorPicker
+                height: 80
+                color: "#ffffff"
+                anchors.rightMargin: 5
+                anchors.leftMargin: 5
+                anchors.bottomMargin: 5
+                anchors.topMargin: 5
+                anchors.fill: parent
+            }
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+
+        RowLayout {
+            id: rowLayout
+            width: 100
+            height: 100
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+            CustomButton {
+                id: cancelButton
+                width: 90
+                height: 30
+                btnText: qsTr("Cancel")
+                btnBlue: false
+            }
+
+            CustomButton {
+                id: okButton
+                width: 90
+                height: 30
+                btnText: qsTr("OK")
+                btnBlue: false
+            }
+        }
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/CustomButton.qml b/tests/manual/examples/quick/customdialogs/forms/CustomButton.qml
new file mode 100644
index 000000000..00a06d558
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/CustomButton.qml
@@ -0,0 +1,61 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Rectangle {
+    id: root
+    width: 200
+    height: 30
+    radius: 5
+    property string btnText: "Name"
+    property bool btnEnable: true
+    property bool btnBlue: true
+    opacity: btnEnable ? 1.0 : 0.5
+    signal clicked()
+    gradient: btnBlue ? blueButton : greenButton
+    Text {
+        id: textArea
+        x: 54
+        y: 5
+        color: "#ffffff"
+        text: parent.btnText
+        font.pointSize: 12
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        font.bold: false
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: {
+            if (btnEnable)
+                root.clicked();
+        }
+    }
+
+    Gradient {
+        id: blueButton
+        GradientStop {
+            position: 0
+            color: "#25a6e2"
+        }
+        GradientStop {
+            position: mouseArea.pressed && root.btnEnable ? 0.7 :1
+            color: "#188bd0"
+        }
+    }
+
+    Gradient {
+        id: greenButton
+        GradientStop {
+            position: 0
+            color: "#80c342"
+        }
+        GradientStop {
+            position: mouseArea.pressed && root.btnEnable ? 0.7 :1
+            color: "#5fac18"
+        }
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/FilePicker.qml b/tests/manual/examples/quick/customdialogs/forms/FilePicker.qml
new file mode 100644
index 000000000..45ffefb3a
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/FilePicker.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+FilePickerForm {
+    property QtObject request
+    property string selectedFile
+    signal closeForm()
+
+    cancelButton.onClicked: {
+        request.dialogReject();
+        closeForm();
+    }
+
+    okButton.onClicked: {
+        request.dialogAccept('/' + selectedFile);
+        closeForm();
+    }
+
+    function createCallback(fileIndex) {
+        return function() {
+            for (var i = 0; i < files.children.length; i++) {
+                var file = files.children[i];
+                if (i === fileIndex) {
+                    selectedFile = file.text;
+                    file.selected = true;
+                } else {
+                    file.selected = false;
+                }
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        selectedFile = request.defaultFileName;
+        for (var i = 0; i < files.children.length; i++) {
+            var file = files.children[i];
+            file.clicked.connect(createCallback(i));
+            if (file.text === selectedFile)
+                file.selected = true;
+        }
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/FilePickerForm.ui.qml b/tests/manual/examples/quick/customdialogs/forms/FilePickerForm.ui.qml
new file mode 100644
index 000000000..1e99b1a91
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/FilePickerForm.ui.qml
@@ -0,0 +1,128 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    property alias cancelButton: cancelButton
+    property alias okButton: okButton
+    property string message: "Message"
+    property string title: "Title"
+    property alias files: files
+
+    ColumnLayout {
+        id: columnLayout
+        anchors.topMargin: 20
+        anchors.top: parent.top
+        anchors.bottomMargin: 20
+        anchors.bottom: parent.bottom
+        anchors.rightMargin: 20
+        anchors.right: parent.right
+        anchors.leftMargin: 20
+        anchors.left: parent.left
+
+        Image {
+            id: image
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            source: "qrc:/icon.svg"
+        }
+
+        Rectangle {
+            id: rectangle
+            width: parent.width
+            height: 30
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            gradient: Gradient {
+                GradientStop {
+                    position: 0
+                    color: "#25a6e2"
+                }
+
+                GradientStop {
+                    color: "#188bd0"
+                }
+            }
+
+            Text {
+                id: title
+                x: 54
+                y: 5
+                color: "#ffffff"
+                text: qsTr("Select File")
+                font.pointSize: 12
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+
+        Item {
+            width: 40
+            height: 40
+        }
+
+        ColumnLayout {
+            id: files
+
+            FileRow {
+                id: filename1
+                text: "example.qdoc"
+            }
+
+            FileRow {
+                id: filename2
+                text: "factory.cpp"
+            }
+
+            FileRow {
+                id: filename3
+                text: "index.html"
+            }
+
+            FileRow {
+                id: filename4
+                text: "main.qml"
+            }
+
+            FileRow {
+                id: filename5
+                text: "qt-logo.png"
+            }
+
+            FileRow {
+                id: filename6
+                text: "window.h"
+            }
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+
+        RowLayout {
+            id: rowLayout
+            width: 20
+            height: 100
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+            CustomButton {
+                id: cancelButton
+                width: 90
+                height: 30
+                btnText: qsTr("Cancel")
+                btnBlue: false
+            }
+
+            CustomButton {
+                id: okButton
+                width: 90
+                height: 30
+                btnText: qsTr("OK")
+                btnBlue: false
+            }
+        }
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/FileRow.qml b/tests/manual/examples/quick/customdialogs/forms/FileRow.qml
new file mode 100644
index 000000000..1a0cfc0a0
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/FileRow.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+    height: 30
+    property string text: "Filename"
+    property bool selected: false
+    signal clicked()
+
+    RowLayout {
+        id: fileRow
+        width: 100
+
+        Item {
+            id: item5
+            width: 10
+            height: 10
+        }
+
+        Rectangle {
+            id: rectangle2
+            width: 10
+            height: 10
+            color: selected ? "#80c342" : "#25a6e2"
+        }
+
+        Text {
+            id: filename
+            text: root.text
+            font.pointSize: 12
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        width: 200
+        height: 30
+        onClicked: root.clicked()
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/JavaScript.qml b/tests/manual/examples/quick/customdialogs/forms/JavaScript.qml
new file mode 100644
index 000000000..132c95697
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/JavaScript.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtWebEngine
+
+JavaScriptForm {
+    property QtObject request
+    signal closeForm()
+
+    cancelButton.onClicked: {
+        request.dialogReject();
+        closeForm();
+    }
+
+    okButton.onClicked: {
+        request.dialogAccept(prompt.text);
+        closeForm();
+    }
+
+    Component.onCompleted: {
+        switch (request.type) {
+        case JavaScriptDialogRequest.DialogTypeAlert:
+            cancelButton.visible = false;
+            title = qsTr("Alert");
+            message = request.message;
+            prompt.text = "";
+            prompt.visible = false;
+            break;
+        case JavaScriptDialogRequest.DialogTypeConfirm:
+            title = qsTr("Confirm");
+            message = request.message;
+            prompt.text = "";
+            prompt.visible = false;
+            break;
+        case JavaScriptDialogRequest.DialogTypePrompt:
+            title = qsTr("Prompt");
+            message = request.message;
+            prompt.text = request.defaultText;
+            prompt.visible = true;
+            break;
+        }
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/JavaScriptForm.ui.qml b/tests/manual/examples/quick/customdialogs/forms/JavaScriptForm.ui.qml
new file mode 100644
index 000000000..b535e7ef9
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/JavaScriptForm.ui.qml
@@ -0,0 +1,117 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+Item {
+    id: root
+    property alias cancelButton: cancelButton
+    property alias okButton: okButton
+    property string message: "Message"
+    property string title: "Title"
+    property alias prompt: prompt
+
+    ColumnLayout {
+        id: columnLayout
+        anchors.topMargin: 20
+        anchors.top: parent.top
+        anchors.bottomMargin: 20
+        anchors.bottom: parent.bottom
+        anchors.rightMargin: 20
+        anchors.right: parent.right
+        anchors.leftMargin: 20
+        anchors.left: parent.left
+
+        Image {
+            id: image
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            source: "qrc:/icon.svg"
+        }
+
+        Rectangle {
+            id: rectangle
+            width: parent.width
+            height: 30
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            gradient: Gradient {
+                GradientStop {
+                    position: 0
+                    color: "#25a6e2"
+                }
+
+                GradientStop {
+                    color: "#188bd0"
+                }
+            }
+
+            Text {
+                id: title
+                x: 54
+                y: 5
+                color: "#ffffff"
+                text: qsTr("Title")
+                font.pointSize: 12
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+
+        Item {
+            width: 40
+            height: 40
+        }
+
+        Text {
+            id: message
+            text: root.message
+            font.pointSize: 12
+        }
+
+        TextField {
+            id: prompt
+            width: 300
+            height: 22
+            Layout.fillWidth: true
+            font.pointSize: 12
+            color: "black"
+
+            background: Rectangle {
+                color: "white"
+                border.color: "black"
+                border.width: 1
+            }
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+
+        RowLayout {
+            id: rowLayout
+            width: 100
+            height: 100
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+            CustomButton {
+                id: cancelButton
+                width: 90
+                height: 30
+                btnText: qsTr("Cancel")
+                btnBlue: false
+            }
+
+            CustomButton {
+                id: okButton
+                width: 90
+                height: 30
+                btnText: qsTr("OK")
+                btnBlue: false
+            }
+        }
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/Menu.qml b/tests/manual/examples/quick/customdialogs/forms/Menu.qml
new file mode 100644
index 000000000..b90802a0c
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/Menu.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+MenuForm {
+    property QtObject request
+    signal closeForm()
+
+    followLink.onClicked: closeForm()
+    back.onClicked: closeForm()
+    forward.onClicked: closeForm()
+    reload.onClicked: closeForm()
+    copyLinkUrl.onClicked: closeForm()
+    saveLink.onClicked: closeForm()
+    close.onClicked: closeForm()
+
+    Component.onCompleted: {
+        back.btnEnable = false;
+        forward.btnEnable = false;
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/MenuForm.ui.qml b/tests/manual/examples/quick/customdialogs/forms/MenuForm.ui.qml
new file mode 100644
index 000000000..b4c06bb7d
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/MenuForm.ui.qml
@@ -0,0 +1,65 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    property alias followLink: followLink
+    property alias back: back
+    property alias forward: forward
+    property alias reload: reload
+    property alias copyLinkUrl: copyLinkUrl
+    property alias saveLink: saveLink
+    property alias close: close
+
+    ColumnLayout {
+        id: columnLayout
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        Image {
+            id: image
+            width: 100
+            height: 100
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            source: "qrc:/icon.svg"
+        }
+
+        CustomButton {
+            id: followLink
+            btnText: qsTr("Follow")
+        }
+
+        CustomButton {
+            id: back
+            btnText: qsTr("Back")
+        }
+
+        CustomButton {
+            id: forward
+            btnText: qsTr("Forward")
+        }
+
+        CustomButton {
+            id: reload
+            btnText: qsTr("Reload")
+        }
+
+        CustomButton {
+            id: copyLinkUrl
+            btnText: qsTr("Copy Link URL")
+        }
+
+        CustomButton {
+            id: saveLink
+            btnText: qsTr("Save Link")
+        }
+
+        CustomButton {
+            id: close
+            btnBlue: false
+            btnText: qsTr("Close")
+        }
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/TouchSelectionMenu.qml b/tests/manual/examples/quick/customdialogs/forms/TouchSelectionMenu.qml
new file mode 100644
index 000000000..1b0c19789
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/TouchSelectionMenu.qml
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+TouchSelectionMenuForm {
+    property QtObject request
+    signal closeForm()
+
+    cut.onClicked: closeForm()
+    copy.onClicked: closeForm()
+    paste.onClicked: closeForm()
+    contextMenu.onClicked: closeForm()
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/TouchSelectionMenuForm.ui.qml b/tests/manual/examples/quick/customdialogs/forms/TouchSelectionMenuForm.ui.qml
new file mode 100644
index 000000000..bed39566f
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/TouchSelectionMenuForm.ui.qml
@@ -0,0 +1,39 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    property alias cut: cut
+    property alias copy: copy
+    property alias paste: paste
+    property alias contextMenu: contextMenu
+
+    ColumnLayout {
+        id: columnLayout
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        CustomButton {
+            id: cut
+            btnText: qsTr("Cut")
+        }
+
+        CustomButton {
+            id: copy
+            btnText: qsTr("Copy")
+        }
+
+        CustomButton {
+            id: paste
+            btnText: qsTr("Paste")
+        }
+
+        CustomButton {
+            id: contextMenu
+            btnText: qsTr("...")
+        }
+
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/forms/forms.qmlproject b/tests/manual/examples/quick/customdialogs/forms/forms.qmlproject
new file mode 100644
index 000000000..b06afaaf1
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/forms/forms.qmlproject
@@ -0,0 +1,45 @@
+import QmlProject
+
+Project {
+    mainFile: "MenuForm.ui.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+
+    JavaScriptFiles {
+        directory: "."
+    }
+
+    ImageFiles {
+        directory: "."
+    }
+
+    Files {
+        filter: "*.conf"
+        files: ["qtquickcontrols2.conf"]
+    }
+
+    Files {
+        filter: "qmldir"
+        directory: "."
+    }
+
+    Files {
+        filter: "*.ttf;*.otf"
+    }
+
+    Environment {
+        QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
+        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+    }
+
+    qt6Project: true
+
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ ".", "imports" ]
+
+    /* Required for deployment */
+    targetDirectory: "/opt/forms"
+}
diff --git a/tests/manual/examples/quick/customdialogs/icon.svg b/tests/manual/examples/quick/customdialogs/icon.svg
new file mode 100644
index 000000000..48271180b
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/icon.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+         width="94px" height="94px" viewBox="0 0 94 94" enable-background="new 0 0 94 94" xml:space="preserve">
+<g>
+        <circle fill="none" cx="47" cy="47" r="47"/>
+        <g>
+                <path fill="#46A2DA" d="M47,92.979c-11.779,0-23.559-4.484-32.526-13.451C-3.461,61.591-3.461,32.409,14.472,14.474
+                        C32.41-3.463,61.592-3.461,79.526,14.473c17.935,17.936,17.935,47.119,0.002,65.054l-0.002,0.001
+                        C70.559,88.495,58.779,92.979,47,92.979z"/>
+        </g>
+        <path fill="#80C342" d="M93,47C93,21.595,72.405,1,47,1C34.297,1,22.797,6.149,14.473,14.473l65.054,65.054
+                C87.851,71.203,93,59.703,93,47z"/>
+        <g>
+                <path fill="#46A2DA" d="M47,65c-4.808,0-9.328-1.873-12.728-5.272c-7.018-7.019-7.018-18.438,0-25.456
+                        C37.672,30.873,42.192,29,47,29s9.328,1.873,12.728,5.272c7.018,7.019,7.018,18.438,0,25.456C56.328,63.127,51.808,65,47,65z"/>
+                <path fill="#FFFFFF" d="M62.248,59.919c6.671-7.858,6.312-19.644-1.105-27.061C57.237,28.953,52.118,27,47,27
+                        c-5.118,0-10.237,1.953-14.142,5.858c-7.81,7.81-7.81,20.474,0,28.284C36.763,65.047,41.882,67,47,67
+                        c4.379,0,8.752-1.441,12.372-4.3L77.88,81.209c0.989-0.895,1.935-1.837,2.843-2.814L62.248,59.919z M35.686,58.314
+                        c-6.238-6.238-6.238-16.389,0-22.627C38.708,32.664,42.726,31,47,31c4.274,0,8.292,1.664,11.314,4.686
+                        c6.238,6.238,6.238,16.389,0,22.627C55.292,61.336,51.274,63,47,63C42.726,63,38.708,61.336,35.686,58.314z"/>
+        </g>
+</g>
+</svg>
diff --git a/tests/manual/examples/quick/customdialogs/index.html b/tests/manual/examples/quick/customdialogs/index.html
new file mode 100644
index 000000000..d5de2827c
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+     <head>
+         <meta charset="utf-8">
+         <title>Custom UI</title>
+         <link rel="stylesheet" type="text/css" href="style.css">
+     </head>
+     <body>
+         <table align="center">
+             <tr>
+                 <td><div class="div"><a href="#openMenu" class="link">Right click on text to see link context menu</a></div></td>
+             </tr>
+             <tr>
+                 <td><div class="div"><p title="I am a tooltip.">Hover this text to display a tooltip</a></div></td>
+             </tr>
+             <tr>
+                <td><div class="div"><p>Touch devices only: long press on this text to see the touch selection menu</p></div></td>
+             </tr>
+             <tr>
+                 <td><button class="button" onclick="window.location = 'http://localhost.:5555/OPEN_AUTH'">
+                 Open Authentication Dialog</button></td>
+             </tr>
+             <tr>
+                 <td><button class="button" onclick="window.location = 'http://www.qt.io'">
+                 Open Proxy Dialog</button></td>
+             </tr>
+             <tr>
+                 <td><button class="button" onclick="alert('This is the Alert Dialog !')">
+                 Open Alert Dialog</button></td>
+             </tr>
+             <tr>
+                 <td><button class="button" onclick="confirm('This is the Confirm Dialog.')">
+                 Open Confirm Dialog</button></td>
+             </tr>
+             <tr>
+                 <td><button class="button" onclick="prompt('Is this the Prompt Dialog ?', 'Yes')">
+                 Open Prompt Dialog</button></td>
+             </tr>
+             <tr>
+                 <td><button class="button" onclick="document.getElementById('colorpicker').click()">
+                 Open Color Dialog</button></td>
+             </tr>
+             <tr>
+                 <td><button class="button" onclick="document.getElementById('filepicker').click()">
+                 Open File Dialog</button></td>
+             </tr>
+         </table>
+         <input type="color" id="colorpicker" value="#ff0000" style="visibility:hidden"/>
+         <input type="file" id="filepicker" accept=".cpp, .html, .h, .png, .qdoc, .qml" style="visibility:hidden"/>
+     </body>
+</html>
diff --git a/tests/manual/examples/quick/customdialogs/main.cpp b/tests/manual/examples/quick/customdialogs/main.cpp
new file mode 100644
index 000000000..c114ea935
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/main.cpp
@@ -0,0 +1,32 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+#include "server.h"
+#include <QtWebEngineQuick/qtwebenginequickglobal.h>
+#include <QNetworkProxy>
+#include <QQmlApplicationEngine>
+#include <QTimer>
+#include <QtGui/QGuiApplication>
+
+int main(int argc, char *argv[])
+{
+    QCoreApplication::setOrganizationName("QtExamples");
+    QtWebEngineQuick::initialize();
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    Server *server = new Server(&engine);
+
+    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+    QTimer::singleShot(0, server, &Server::run);
+
+    QNetworkProxy proxy;
+    proxy.setType(QNetworkProxy::HttpProxy);
+    proxy.setHostName("localhost");
+    proxy.setPort(5555);
+    QNetworkProxy::setApplicationProxy(proxy);
+
+    return app.exec();
+}
+
diff --git a/tests/manual/examples/quick/customdialogs/main.qml b/tests/manual/examples/quick/customdialogs/main.qml
new file mode 100644
index 000000000..d0cb6f324
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/main.qml
@@ -0,0 +1,56 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+
+Window {
+    id: mainWindow
+    width: 800
+    height: 610
+    visible: true
+
+    StackView {
+        id: stackView
+        anchors.fill: parent
+        focus: true
+        initialItem: Item {
+            id: main
+            width: mainWindow.width
+            height: mainWindow.height
+            ColumnLayout {
+                anchors.fill: parent
+                SwitchButton {
+                    id: switcher
+                    Layout.fillWidth: true
+                }
+                WebView {
+                    id: webView
+                    useDefaultDialogs: switcher.checked
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                }
+            }
+        }
+
+        function closeForm()
+        {
+            pop(main);
+            // reset url in case of proxy error
+            webView.url = "qrc:/index.html"
+        }
+
+        function openForm(form)
+        {
+            push(form.item, form.properties);
+            currentItem.closeForm.connect(closeForm);
+        }
+
+    }
+
+    Component.onCompleted: {
+        webView.openForm.connect(stackView.openForm);
+    }
+}
diff --git a/tests/manual/examples/quick/customdialogs/server.cpp b/tests/manual/examples/quick/customdialogs/server.cpp
new file mode 100644
index 000000000..efb870618
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/server.cpp
@@ -0,0 +1,47 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+#include "server.h"
+#include <QDataStream>
+#include <QTcpSocket>
+
+Server::Server(QObject *parent) : QObject(parent)
+{
+    connect(&m_server, &QTcpServer::newConnection, this, &Server::handleNewConnection);
+}
+
+void Server::run()
+{
+    if (!m_server.listen(QHostAddress::LocalHost, 5555))
+        qWarning() << "Could not start the server -> http/proxy authentication dialog"
+                      " will not work. Error:" << m_server.errorString();
+}
+
+void Server::handleNewConnection()
+{
+    QTcpSocket *socket = m_server.nextPendingConnection();
+    connect(socket, &QAbstractSocket::disconnected, socket, &QObject::deleteLater);
+    connect(socket, &QAbstractSocket::readyRead, this, &Server::handleReadReady);
+}
+
+void Server::handleReadReady()
+{
+    QTcpSocket *socket = qobject_cast<QTcpSocket*>(sender());
+    Q_ASSERT(socket);
+    m_data.append(socket->readAll());
+
+    // simply wait for whole request
+    if (!m_data.endsWith("\r\n\r\n"))
+        return;
+    if (m_data.contains(QByteArrayLiteral("OPEN_AUTH"))) {
+        socket->write("HTTP/1.1 401 Unauthorized\nWWW-Authenticate: "
+                      "Basic realm=\"Very Restricted Area\"\r\n\r\n");
+        m_data.clear();
+        return;
+    }
+
+    socket->write("HTTP/1.1 407 Proxy Auth Required\nProxy-Authenticate: "
+                  "Basic realm=\"Proxy requires authentication\"\r\n"
+                  "content-length: 0\r\n\r\n");
+    m_data.clear();
+}
diff --git a/tests/manual/examples/quick/customdialogs/server.h b/tests/manual/examples/quick/customdialogs/server.h
new file mode 100644
index 000000000..563465013
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/server.h
@@ -0,0 +1,29 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+#ifndef SERVER_H
+#define SERVER_H
+
+#include <QObject>
+#include <QTcpServer>
+
+class Server : public QObject
+{
+    Q_OBJECT
+
+public:
+    explicit Server(QObject *parent = nullptr);
+
+public slots:
+    void run();
+
+private slots:
+    void handleNewConnection();
+    void handleReadReady();
+
+private:
+    QTcpServer m_server;
+    QByteArray m_data;
+};
+
+#endif // SERVER_H
diff --git a/tests/manual/examples/quick/customdialogs/style.css b/tests/manual/examples/quick/customdialogs/style.css
new file mode 100644
index 000000000..e4c25e7eb
--- /dev/null
+++ b/tests/manual/examples/quick/customdialogs/style.css
@@ -0,0 +1,37 @@
+.div {
+    padding:8px 4px;
+    border: 5px solid #188BD0;
+    width: 280px;
+    font-family: sans-serif;
+    font-size:10pt;
+}
+.link {
+    text-decoration: none;
+    color: #888888;
+}
+.button {
+    background: -webkit-linear-gradient(top,#25A6E2 0%,#188BD0 100%);
+    padding:8px 13px;
+    color:#fff;
+    font-family: sans-serif;
+    font-size:17px;
+    -webkit-border-radius:5px;
+    border:1px solid #1A87FF;
+    width: 300px;
+}
+.button:focus {
+    outline: none;
+}
+.button:active {
+    background: -webkit-linear-gradient(top,#25A6E2 0%,#188BD0 70%);
+}
+.input {
+    padding:8px 4px;
+    border: 5px solid #188BD0;
+    width: 280px;
+    font-family: sans-serif;
+    font-size:10pt;
+}
+.input:focus {
+    outline: none;
+}