Replace WebEngineAction example with a snippet

Also moves the example to the manual tests directory.

Task-number: QTBUG-108751
Change-Id: Ie3fa492cfcaf61ee26ed65fa22954bb6a6532d6e
Reviewed-by: Michael Brüning <michael.bruning@qt.io>
(cherry picked from commit 23d1131577e1780de0552211a84357bcb1f63de5)

2 files changed, 132 insertions, 1 deletions

diff --git a/src/webenginequick/api/qquickwebengineaction.cpp b/src/webenginequick/api/qquickwebengineaction.cpp
index 70205f883..006715c70 100644
--- a/src/webenginequick/api/qquickwebengineaction.cpp
+++ b/src/webenginequick/api/qquickwebengineaction.cpp
@@ -20,7 +20,7 @@ QT_BEGIN_NAMESPACE
     method. It provides information about the action, such as
     whether it is \l enabled.
 
-    The following code uses the \l WebEngineView::action() method to check if the
+    The following code uses the \l WebEngineView::action() method to check if
     the copy action is enabled:
 
     \code
@@ -30,6 +30,14 @@ QT_BEGIN_NAMESPACE
     else
         console.log("Copy is disabled.");
     \endcode
+
+    A \l ToolButton can be connected to a WebEngineAction as follows:
+
+    \snippet qtwebengine_webengineaction.qml 0
+
+    A context menu could be implemented like this:
+
+    \snippet qtwebengine_webengineaction.qml 1
 */
 
 QQuickWebEngineActionPrivate::QQuickWebEngineActionPrivate(const QVariant &data, const QString &text, const QString &iconName, bool enabled)
diff --git a/src/webenginequick/doc/snippets/qtwebengine_webengineaction.qml b/src/webenginequick/doc/snippets/qtwebengine_webengineaction.qml
new file mode 100644
index 000000000..2fd5f490b
--- /dev/null
+++ b/src/webenginequick/doc/snippets/qtwebengine_webengineaction.qml
@@ -0,0 +1,123 @@
+// Copyright (C) 2018 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Window
+import QtWebEngine
+import QtQuick.Controls
+import QtQuick.Layouts
+
+ApplicationWindow {
+    id: window
+    visible: true
+    width: 800
+    height: 600
+    title: qsTr("WebEngineAction Example")
+
+    header: ToolBar {
+        RowLayout {
+            anchors.fill: parent
+//! [0]
+            ToolButton {
+                property int itemAction: WebEngineView.Back
+                text: webEngineView.action(itemAction).text
+                enabled: webEngineView.action(itemAction).enabled
+                onClicked: webEngineView.action(itemAction).trigger()
+                icon.name: webEngineView.action(itemAction).iconName
+                display: AbstractButton.TextUnderIcon
+            }
+//! [0]
+            ToolButton {
+                property int itemAction: WebEngineView.Forward
+                text: webEngineView.action(itemAction).text
+                enabled: webEngineView.action(itemAction).enabled
+                onClicked: webEngineView.action(itemAction).trigger()
+                icon.name: webEngineView.action(itemAction).iconName
+                display: AbstractButton.TextUnderIcon
+            }
+
+            ToolButton {
+                property int itemAction: webEngineView.loading ? WebEngineView.Stop : WebEngineView.Reload
+                text: webEngineView.action(itemAction).text
+                enabled: webEngineView.action(itemAction).enabled
+                onClicked: webEngineView.action(itemAction).trigger()
+                icon.name: webEngineView.action(itemAction).iconName
+                display: AbstractButton.TextUnderIcon
+            }
+
+            TextField {
+                Layout.fillWidth: true
+
+                text: webEngineView.url
+                selectByMouse: true
+                onEditingFinished: webEngineView.url = utils.fromUserInput(text)
+            }
+
+            ToolButton {
+                id: settingsButton
+                text: "Settings"
+                icon.name: "settings-configure"
+                display: AbstractButton.TextUnderIcon
+                onClicked: settingsMenu.open()
+                checked: settingsMenu.visible
+
+                Menu {
+                    id: settingsMenu
+                    y: settingsButton.height
+
+                    MenuItem {
+                        id: customContextMenuOption
+                        checkable: true
+                        checked: true
+
+                        text: "Custom context menu"
+                    }
+                }
+            }
+        }
+    }
+
+    WebEngineView {
+        id: webEngineView
+        url: "https://qt.io"
+        anchors.fill: parent
+
+        Component.onCompleted: {
+            profile.downloadRequested.connect(function(download){
+                download.accept();
+            })
+        }
+
+//! [1]
+        property Menu contextMenu: Menu {
+            Repeater {
+                model: [
+                    WebEngineView.Back,
+                    WebEngineView.Forward,
+                    WebEngineView.Reload,
+                    WebEngineView.SavePage,
+                    WebEngineView.Copy,
+                    WebEngineView.Paste,
+                    WebEngineView.Cut,
+                    WebEngineView.ChangeTextDirectionLTR,
+                    WebEngineView.ChangeTextDirectionRTL,
+                ]
+                MenuItem {
+                    text: webEngineView.action(modelData).text
+                    enabled: webEngineView.action(modelData).enabled
+                    onClicked: webEngineView.action(modelData).trigger()
+                    icon.name: webEngineView.action(modelData).iconName
+                    display: MenuItem.TextBesideIcon
+                }
+            }
+        }
+
+        onContextMenuRequested: function(request) {
+            if (customContextMenuOption.checked) {
+                request.accepted = true;
+                contextMenu.popup();
+            }
+        }
+//! [1]
+    }
+}