createWindow QML API for QQuickWebEngineView

This implements adoptNewWindow for QQuickWebEngineView.
The API is only intended to be used through QML to avoid delegating
the QQuickWebEngineViewHandle ownership through a signal parameter.

Another limitation of the implementation is currently to fail the
handle adoption unless it is done synchronously within the
adoptNewWindow call. To support this we would need to delay the call
to WebContentsAdapter::initialize which will leave the adapter
without a client when returning to the event loop and would require
putting null checks everywhere it is used.
So I would prefer to keep the API limited and avoid potential crashes.
If we want to support asynchronous Loader elements or QML files
fetched from the network in the future, the API should be able to
scale to the task once we've adjusted the implementation.

This also adds basic tabs support in the quicknanobrowser example.
The url property is now set imperatively to avoid overwriting the
adopted WebContentsAdapter's loading URL.

Change-Id: Iba5c5dc3ffa21045f356be131ca15c01b9aee7c8
Reviewed-by: Pierre Rossi <pierre.rossi@gmail.com>
Reviewed-by: Zeno Albisser <zeno.albisser@digia.com>

2 files changed, 70 insertions, 18 deletions

diff --git a/examples/quick/quicknanobrowser/quickwindow.cpp b/examples/quick/quicknanobrowser/quickwindow.cpp
index 3b89aa205..df93cd218 100644
--- a/examples/quick/quicknanobrowser/quickwindow.cpp
+++ b/examples/quick/quicknanobrowser/quickwindow.cpp
@@ -54,7 +54,6 @@ class Utils : public QObject {
 public:
     Utils(QObject* parent = 0) : QObject(parent) { }
     Q_INVOKABLE static QUrl fromUserInput(const QString& userInput) { return urlFromUserInput(userInput); }
-    Q_INVOKABLE static QUrl initialUrl() { return startupUrl(); }
 };
 
 #include "quickwindow.moc"
@@ -63,4 +62,5 @@ ApplicationEngine::ApplicationEngine()
 {
     rootContext()->setContextProperty("utils", new Utils(this));
     load(QUrl("qrc:/quickwindow.qml"));
+    QMetaObject::invokeMethod(rootObjects().first(), "load", Q_ARG(QVariant, startupUrl()));
 }
diff --git a/examples/quick/quicknanobrowser/quickwindow.qml b/examples/quick/quicknanobrowser/quickwindow.qml
index 3d3dd9470..7ef33c14e 100644
--- a/examples/quick/quicknanobrowser/quickwindow.qml
+++ b/examples/quick/quicknanobrowser/quickwindow.qml
@@ -40,26 +40,46 @@
 
 import QtQuick 2.0
 import QtWebEngine 1.0
+import QtWebEngine.experimental 1.0
 import QtQuick.Controls 1.0
 import QtQuick.Controls.Styles 1.0
 import QtQuick.Layouts 1.0
 
 ApplicationWindow {
     id: browserWindow
+    function load(url) { tabs.currentView.url = url }
+    function adoptHandle(viewHandle) { tabs.currentView.adoptHandle(viewHandle) }
+
     height: 600
     width: 800
     visible: true
-    title: webEngineView.title
+    title: tabs.currentView && tabs.currentView.title
 
-    // Focus and select text in URL bar
     Action {
         id: focus
-        shortcut: "Ctrl+L" // How to have Cmd + L on Mac ?
+        shortcut: "Ctrl+L"
         onTriggered: {
             addressBar.forceActiveFocus();
             addressBar.selectAll();
         }
     }
+    Action {
+        shortcut: "Ctrl+T"
+        onTriggered: {
+            tabs.createEmptyTab()
+            addressBar.forceActiveFocus();
+            addressBar.selectAll();
+        }
+    }
+    Action {
+        shortcut: "Ctrl+W"
+        onTriggered: {
+            if (tabs.count == 1)
+                browserWindow.close()
+            else
+                tabs.removeTab(tabs.currentIndex)
+        }
+    }
 
     toolBar: ToolBar {
         id: navigationBar
@@ -68,19 +88,19 @@ ApplicationWindow {
                 ToolButton {
                     id: backButton
                     iconSource: "icons/go-previous.png"
-                    onClicked: webEngineView.goBack()
-                    enabled: webEngineView.canGoBack
+                    onClicked: tabs.currentView.goBack()
+                    enabled: tabs.currentView && tabs.currentView.canGoBack
                 }
                 ToolButton {
                     id: forwardButton
                     iconSource: "icons/go-next.png"
-                    onClicked: webEngineView.goForward()
-                    enabled: webEngineView.canGoForward
+                    onClicked: tabs.currentView.goForward()
+                    enabled: tabs.currentView && tabs.currentView.canGoForward
                 }
                 ToolButton {
                     id: reloadButton
-                    iconSource: webEngineView.loading ? "icons/process-stop.png" : "icons/view-refresh.png"
-                    onClicked: webEngineView.reload()
+                    iconSource: tabs.currentView && tabs.currentView.loading ? "icons/process-stop.png" : "icons/view-refresh.png"
+                    onClicked: tabs.currentView.reload()
                 }
                 TextField {
                     id: addressBar
@@ -90,6 +110,7 @@ ApplicationWindow {
                         z: 2
                         id: faviconImage
                         width: 16; height: 16
+                        source: tabs.currentView && tabs.currentView.icon
                     }
                     style: TextFieldStyle {
                         padding {
@@ -98,7 +119,8 @@ ApplicationWindow {
                     }
                     focus: true
                     Layout.fillWidth: true
-                    onAccepted: webEngineView.url = utils.fromUserInput(text)
+                    text: tabs.currentView && tabs.currentView.url
+                    onAccepted: tabs.currentView.url = utils.fromUserInput(text)
                 }
             }
             ProgressBar {
@@ -117,16 +139,46 @@ ApplicationWindow {
                 z: -2;
                 minimumValue: 0
                 maximumValue: 100
+                value: tabs.currentView && tabs.currentView.loadProgress
             }
     }
-    WebEngineView {
-        id: webEngineView
-        focus: true
+
+    TabView {
+        id: tabs
+        property Item currentView: currentIndex < count ? getTab(currentIndex).item : null
+        function createEmptyTab() {
+            var tab = addTab("", tabComponent)
+            // We must do this first to make sure that tab.active gets set so that tab.item gets instantiated immediately.
+            tabs.currentIndex = tabs.count - 1
+            tab.title = Qt.binding(function() { return tab.item.title })
+            return tab
+        }
+
         anchors.fill: parent
-        url: utils.initialUrl()
+        Component.onCompleted: createEmptyTab()
+
+        Component {
+            id: tabComponent
+            WebEngineView {
+                function adoptHandle(viewHandle) { experimental.adoptHandle(viewHandle) }
+
+                focus: true
 
-        onUrlChanged: addressBar.text = url
-        onIconChanged: faviconImage.source = icon
-        onLoadProgressChanged: progressBar.value = loadProgress
+                experimental {
+                    onCreateWindow: {
+                        if (newViewDisposition == "popup")
+                            print("Warning: Ignored a popup window.")
+                        else if (newViewDisposition == "tab") {
+                            var tab = tabs.createEmptyTab()
+                            tab.item.adoptHandle(newViewHandle)
+                        } else {
+                            var component = Qt.createComponent("quickwindow.qml")
+                            var window = component.createObject()
+                            window.adoptHandle(newViewHandle)
+                        }
+                    }
+                }
+            }
+        }
     }
 }