Doc: Describe using Qt Design Viewer

For running Qt Quick UI projects (.qmlproject) in web
browsers.

Change-Id: Ied9b971755ccef9f94e9e0ffb578d3ecbd0ef6c0
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

7 files changed, 89 insertions, 6 deletions

diff --git a/doc/config/macros.qdocconf b/doc/config/macros.qdocconf
index a6817d3642..c71ddf7fa2 100644
--- a/doc/config/macros.qdocconf
+++ b/doc/config/macros.qdocconf
@@ -21,6 +21,7 @@ macro.QC                = "$IDE_DISPLAY_NAME"
 macro.QCE               = "$IDE_DISPLAY_NAME Enterprise"
 macro.QD                = "Qt Designer"
 macro.QDS               = "Qt Design Studio"
+macro.QDV               = "Qt Design Viewer"
 macro.QL                = "Qt Linguist"
 macro.QMLD              = "Qt Quick Designer"
 macro.QQV               = "Qt QML Viewer"
diff --git a/doc/images/qt-design-viewer.png b/doc/images/qt-design-viewer.png
new file mode 100644
index 0000000000..1c4916036b
--- /dev/null
+++ b/doc/images/qt-design-viewer.png
diff --git a/doc/src/projects/creator-only/creator-projects-building.qdoc b/doc/src/projects/creator-only/creator-projects-building.qdoc
index 14f9770456..c87557dc69 100644
--- a/doc/src/projects/creator-only/creator-projects-building.qdoc
+++ b/doc/src/projects/creator-only/creator-projects-building.qdoc
@@ -31,7 +31,7 @@
 
 /*!
     \contentspage index.html
-    \previouspage creator-live-preview-devices.html
+    \previouspage qt-design-viewer.html
     \page creator-building-targets.html
     \nextpage creator-running-targets.html
 
diff --git a/doc/src/qtcreator-toc.qdoc b/doc/src/qtcreator-toc.qdoc
index 7774af4951..f0bd3f9e02 100644
--- a/doc/src/qtcreator-toc.qdoc
+++ b/doc/src/qtcreator-toc.qdoc
@@ -160,6 +160,7 @@
             \list
                 \li \l{Previewing on Desktop}
                 \li \l{Previewing on Devices}
+                \li \l{Previewing in Browsers}
             \endlist
             \li \l{Building for Multiple Platforms}
             \li \l{Running on Multiple Platforms}
diff --git a/doc/src/qtquick/qt-design-viewer.qdoc b/doc/src/qtquick/qt-design-viewer.qdoc
new file mode 100644
index 0000000000..2c63c05baf
--- /dev/null
+++ b/doc/src/qtquick/qt-design-viewer.qdoc
@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Creator}
+    \previouspage creator-live-preview-devices.html
+    \page qt-design-viewer.html
+    \if defined(qtdesignstudio)
+    \nextpage studio-advanced.html
+    \else
+    \nextpage creator-building-targets.html
+    \endif
+
+    \title Previewing in Browsers
+
+    \image qt-design-viewer.png
+
+    \QDV is a QML viewer that runs in your web browser. This means that you can
+    run applications in most widely-used web browsers, such as Apple Safari,
+    Google Chrome, Microsoft Edge, and Mozilla Firefox, on the desktop and on
+    mobile devices.
+
+    The startup and compilation time depend on your browser and configuration.
+    However, the actual performance of the application once started is
+    indistinguishable from the same application running on the desktop.
+
+    \if defined(qtdesignstudio)
+    To create a resource file out of your project, select \uicontrol Tools >
+    \uicontrol {Generate Resource File} in \QC. Then upload the package into
+    \QDV.
+    \else
+    You can run \l{Creating Qt Quick UI Projects}{Qt Quick UI projects}, which
+    have a .qmlproject file that define the main QML file and the import paths.
+    Compress the project folder into a ZIP file that you upload to \QDV.
+    \endif
+
+    The loaded applications remain locally in your browser. No data is uploaded
+    into the cloud.
+
+    To preview an application in a web browser:
+
+    \list
+        \li In the browser, open \l{http://qt-webassembly.io/designviewer/}
+            {\QDV}.
+        \li Drag and drop your application package to \QDV, or click the load
+            icon to browse for your file.
+    \endlist
+
+    Your application is compiled and run on \QDV.
+*/
diff --git a/doc/src/qtquick/qtquick-live-preview-devices.qdoc b/doc/src/qtquick/qtquick-live-preview-devices.qdoc
index d37b84075a..4686ef485b 100644
--- a/doc/src/qtquick/qtquick-live-preview-devices.qdoc
+++ b/doc/src/qtquick/qtquick-live-preview-devices.qdoc
@@ -27,11 +27,7 @@
     \contentspage {Qt Creator}
     \previouspage creator-live-preview-desktop.html
     \page creator-live-preview-devices.html
-    \if defined(qtdesignstudio)
-    \nextpage studio-advanced.html
-    \else
-    \nextpage creator-building-targets.html
-    \endif
+    \nextpage qt-design-viewer.html
 
     \title Previewing on Devices
 
diff --git a/doc/src/qtquick/qtquick-live-preview.qdoc b/doc/src/qtquick/qtquick-live-preview.qdoc
index 95b01b9fe2..9145c2826a 100644
--- a/doc/src/qtquick/qtquick-live-preview.qdoc
+++ b/doc/src/qtquick/qtquick-live-preview.qdoc
@@ -40,6 +40,15 @@
     devices. The changes you make to the UI are instantly visible
     to you in the preview.
 
+    In addition, you can use \QDV to run
+    \if defined(qtcreator)
+    \l{Creating Qt Quick UI Projects}{Qt Quick UI projects}
+    \else
+    applications
+    \endif
+    in most widely-used web browsers on the desktop and in mobile devices This
+    enables you to easily share your designs with reviewers who don't have \QC.
+
     \if defined(qtcreator)
     \image qtcreator-live-preview.png
     \else
@@ -62,5 +71,9 @@
             devices is set up automatically. You only need to connect your
             devices to your system.
             \endif
+        \li \l{Previewing in Browsers}
+
+            You can open \l{http://qt-webassembly.io/designviewer/}{\QDV}
+            in a browser and load applications to it.
     \endlist
 */