Doc: Move information about using Form Editor to separate topic

Rewrite information about the Qt Quick Editor to take new
workspace concept and 3D editor into account.

Task-number: QTCREATORBUG-23364
Change-Id: I053685b5e603ad75af3f7314c30e627fac5c6207
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

9 files changed, 163 insertions, 130 deletions

diff --git a/doc/qtcreator/images/qmldesigner-visual-editor.png b/doc/qtcreator/images/qmldesigner-visual-editor.png
deleted file mode 100644
index 92683ad024..0000000000
--- a/doc/qtcreator/images/qmldesigner-visual-editor.png
+++ /dev/null
diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc
index 0c63e39582..5d20bc7c33 100644
--- a/doc/qtcreator/src/qtcreator-toc.qdoc
+++ b/doc/qtcreator/src/qtcreator-toc.qdoc
@@ -91,10 +91,12 @@
             \list
                 \li \l {Creating Qt Quick Projects}
                 \li \l {Editing QML Files in Design Mode}
+
                 \li \l {Creating UIs}
                     \list
                         \li \l {Creating Components}
                         \list
+                            \li \l{Editing 2D Content}
                             \li \l{Creating Buttons}
                             \li \l{Creating Scalable Buttons and Borders}
                         \endlist
diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc
index 1646888957..f416d1bfa2 100644
--- a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc
+++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc
@@ -46,9 +46,8 @@
 
         \li \l {Editing QML Files in Design Mode}
 
-            You can use the \uicontrol {Form Editor} or the
-            \uicontrol {Text Editor} in the Design mode to
-            develop Qt Quick applications.
+            You can use several different editors and views in the
+            Design mode to develop Qt Quick applications.
 
         \li \l {Creating UIs}
 
diff --git a/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc b/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc
index cd8ada4925..0c982d6548 100644
--- a/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc
@@ -37,7 +37,7 @@
     name and one or several comments. The comments have a title, author, and
     comment text.
 
-    \image qtquick-annotations.png "Annotations displayed in the Form Editor tab"
+    \image qtquick-annotations.png "Annotations displayed in the Form Editor view"
 
     Annotations are saved in the end of QML files when you save the file. They
     do not affect the QML performance in any way.
diff --git a/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc b/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc
index 68e2aaadb8..b9f4bf2ff6 100644
--- a/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc
@@ -31,7 +31,7 @@
 
 /*!
     \contentspage index.html
-    \previouspage quick-components.html
+    \previouspage qtquick-form-editor.html
     \page quick-buttons.html
     \nextpage quick-scalable-image.html
 
diff --git a/doc/qtcreator/src/qtquick/qtquick-components.qdoc b/doc/qtcreator/src/qtquick/qtquick-components.qdoc
index f2e3f922a1..15124c3049 100644
--- a/doc/qtcreator/src/qtquick/qtquick-components.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-components.qdoc
@@ -37,7 +37,7 @@
     \else
     \previouspage creator-using-qt-quick-designer.html
     \endif
-    \nextpage quick-buttons.html
+    \nextpage qtquick-form-editor.html
 
     \title Creating Components
 
@@ -71,7 +71,7 @@
 
     \section1 Adding Components to Designs
 
-    \image qmldesigner-visual-editor.png "Design mode"
+    \image studio-design-mode.png "Design mode"
 
     \list 1
         \li Drag and drop components from the \uicontrol Library (2) to the
@@ -564,11 +564,14 @@
 
     \endlist
 
-    The following sections contain examples of how to create some common
-    components:
+    The following sections contain more information about how to use the
+    \uicontrol {Form Editor} to edit 2D content, as well as examples of
+    how to create some common components using basic QML types:
 
     \list
 
+        \li \l{Editing 2D Content}
+
         \li \l{Creating Buttons}
 
         \li \l{Creating Scalable Buttons and Borders}
diff --git a/doc/qtcreator/src/qtquick/qtquick-designer.qdoc b/doc/qtcreator/src/qtquick/qtquick-designer.qdoc
index 50e01b8307..e47d39dee4 100644
--- a/doc/qtcreator/src/qtquick/qtquick-designer.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-designer.qdoc
@@ -43,150 +43,68 @@
     \title Editing QML Files in Design Mode
 
     \QC opens \l{Qt Quick UI Forms}{UI forms} (ui.qml files) in the
-    \uicontrol {Form Editor} tab in the Design mode. It is
+    \uicontrol {Form Editor} view in the Design mode. It is
     recommended that you use UI forms for components that you want to
     edit in the Design mode.
 
-    \if defined(qtcreator)
-    \image qmldesigner-visual-editor.png "Visual editor"
-    \else
     \image studio-design-mode.png "Design mode"
-    \endif
 
-    To manage your project in the Design mode:
+    The Design mode contains different views for designing UIs. To open the
+    following views, select \uicontrol Window > \uicontrol Views:
 
     \list
+        \li \uicontrol {Form Editor} (1) provides a canvas for designing 2D UIs.
+            For more information, see \l {Editing 2D Content}.
 
-        \li \uicontrol Canvas (1) is the working area where you create QML
-            components and design applications. In the \uicontrol {Form Editor}
-            tab, you can use a visual editor to design UIs, and in the
-            \uicontrol {Text Editor} tab, you can use a code editor to edit the
-            QML code generated by the visual editor.
-
-        \li Use the sidebars to select QML types to use in the project, to
-            specify properties for them, and to
-            view them in a tree structure, as well as to create connections
-            and browse projects and files. You can select the content of the
-            sidebars in the sidebar menu:
+        \li \uicontrol {3D Editor} provides an editor for files you created
+            using 3D graphics applications and stored in one of the supported
+            formats. For more information, see \l{Editing 3D Scenes}.
 
-        \list
+        \li \uicontrol {Text Editor} provides a code editor for editing the QML
+            code generated by the visual editors. For more information, see
+            \l {Working in Edit Mode}.
 
-            \li \uicontrol {Library} (2) displays the building blocks that you
-                can use to design applications: predefined QML types, your own
-                QML components, or Qt Quick Controls that you import to the
-                project, and other resources. For more information, see
-                \l {Creating Components}.
+        \li \uicontrol {Library} (2) displays the building blocks that you
+            can use to design applications: predefined QML types, your own
+            QML components, or Qt Quick Controls that you import to the
+            project, and other resources. For more information, see
+            \l {Creating Components}.
 
-            \li \uicontrol {Navigator} (3) displays the items in the current QML
-                file as a tree structure. For more information, see
-                \l {Managing Item Hierarchy}.
+        \li \uicontrol {Navigator} (3) displays the items in the current QML
+            file as a tree structure. For more information, see
+            \l {Managing Item Hierarchy}.
 
-            \li \uicontrol {Properties} (4) organizes the properties of the
-                selected item. You can change the properties also in the
-                \uicontrol {Text Editor}. For more information, see
-                \l {Specifying Item Properties}.
+        \li \uicontrol {Properties} (4) organizes the properties of the
+            selected component. You can change the properties also in the
+            \uicontrol {Text Editor}. For more information, see
+            \l {Specifying Item Properties}.
 
-            \li \uicontrol Connections (5) enables you to create connections
-                between objects, signals, and object properties. For more
-                information, see \l{Adding Connections}.
+        \li \uicontrol Connections (5) enables you to create connections
+            between objects, signals, and object properties. For more
+            information, see \l{Adding Connections}.
 
-            \li \uicontrol {File System} shows all files in the currently
-                selected directory. For more information, see
-                \l{Viewing the File System}.
+        \li \uicontrol {File System} shows all files in the currently
+            selected directory. For more information, see
+            \l{Viewing the File System}.
 
-            \li \uicontrol {Open Documents} shows currently open files.
+        \li \uicontrol {Open Documents} shows currently open files.
 
-            \li \uicontrol {Projects} shows a list of projects open in the
-                current session. For more information, see
-                \l{Viewing Project Files}.
+        \li \uicontrol {Projects} shows a list of projects open in the
+            current session. For more information, see
+            \l{Viewing Project Files}.
 
-        \endlist
-
-        \li \uicontrol {States} view (6) displays the different states of the item.
+        \li \uicontrol {States} (6) displays the different states of the item.
             QML states typically describe user interface configurations, such as
             the UI controls, their properties and behavior and the available
             actions. For more information, see \l{Adding States}.
 
-        \if defined(qtdesignstudio)
-        \li \uicontrol Timeline view (7) provides a timeline and keyframe based
+        \li \uicontrol Timeline (7) provides a timeline and keyframe based
             editor that enables you to animate the properties of UI components.
-        \endif
+            For more information, see \l{Creating Animations}.
 
     \endlist
 
-    \section1 Snapping to Parent and Sibling Items
-
-    You design applications on the canvas by placing items on it.
-
-    When you are working on a design, you can use snapping to align
-    items on the canvas. Click the \inlineimage snapping.png
-    button to have the items snap to their parent or sibling items. Snapping
-    lines automatically appear to help you position the items.
-    Click the \inlineimage snapping_and_anchoring.png
-    button to anchor the item to the items that you snap to.
-
-    Choose \uicontrol Tools > \uicontrol Options > \uicontrol {Qt Quick} >
-    \uicontrol {\QMLD} to specify settings for snapping. In the
-    \uicontrol {Parent item padding} field, specify the
-    distance in pixels between the parent item and the snapping lines. In the
-    \uicontrol {Sibling item spacing} field, specify the distance in pixels between
-    sibling items and the snapping lines.
-
-    The following image shows the snapping lines (1) when
-    \uicontrol {Parent item padding} is set to 5 pixels.
-
-    \image qmldesigner-snap-margins.png "Snapping lines on canvas"
-
-    \section1 Hiding Item Boundaries
-
-    The Design mode displays the boundaries of items on the canvas. To hide
-    the boundaries, click the \inlineimage boundingrect.png
-    button.
-
-    \section1 Selecting Items
-
-    When you point the mouse to overlapping items, the frontmost item is
-    selected by default. However, items that do not have any content, such as
-    the mouse area, are typically located in front of items that do have
-    content, such as rectangles or border images. To select items with content
-    by default, click the
-    \inlineimage qmldesigner-only-select-items-with-content.png
-    button.
-
-    \section1 Previewing Component Size
-
-    The width and height of the root item in a QML file determine the size of
-    the component. You can reuse components, such as buttons, in different
-    sizes in other QML files and design UIs for use with different device
-    profiles, screen resolution, or screen orientation. The component size
-    might also be zero (0,0) if its final size is determined by property
-    bindings.
-
-    To experiment with different component sizes, enter values in the
-    \uicontrol {Override Width} and \uicontrol {Override Height} fields (1) on
-    the canvas toolbar. The changes are displayed on the canvas (2)
-    and in the \uicontrol States view (3), but the property
-    values are not changed permanently in the QML file. You can permanently
-    change the property values in the \uicontrol Properties view (4).
-
-    \image qmldesigner-preview-size.png "Canvas width and height"
-
-    \section1 Specifying Canvas Size
-
-    To change the canvas size, select \uicontrol Tools > \uicontrol Options >
-    \uicontrol {Qt Quick} > \uicontrol {\QMLD} and
-    specify the canvas width and height in the \uicontrol Canvas group.
-
-    \section1 Refreshing the Canvas
-
-    When you open QML files in the Design mode, the items in the file are drawn
-    on the canvas. When you edit the item properties, the QML file and
-    the image on the canvas might get out of sync. For example, when you change
-    the position of an item within a column or a row, the new position might
-    not be displayed correctly on the canvas.
-
-    To refresh the image on the canvas, press \key R or select the
-    \inlineimage reset.png
-    (\uicontrol {Reset View}) button.
+    You can move the views anywhere on the screen and save them as
+    \e workspaces, as instructed in \l {Managing Workspaces}.
 
 */
diff --git a/doc/qtcreator/src/qtquick/qtquick-form-editor.qdoc b/doc/qtcreator/src/qtquick/qtquick-form-editor.qdoc
new file mode 100644
index 0000000000..37a31cc4be
--- /dev/null
+++ b/doc/qtcreator/src/qtquick/qtquick-form-editor.qdoc
@@ -0,0 +1,110 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Creator 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 index.html
+    \page qtquick-form-editor.html
+    \previouspage quick-components.html
+    \nextpage quick-buttons.html
+
+    \title Editing 2D Content
+
+    You design applications in the \uicontrol {Form Editor} by placing items
+    into it.
+
+    \section1 Snapping to Parent and Sibling Items
+
+    When you are working on a design, you can use snapping to align
+    items in the \uicontrol {Form Editor}. Click the \inlineimage snapping.png
+    button to have the items snap to their parent or sibling items. Snapping
+    lines automatically appear to help you position the items.
+    Click the \inlineimage snapping_and_anchoring.png
+    button to anchor the item to the items that you snap to.
+
+    Choose \uicontrol Tools > \uicontrol Options > \uicontrol {Qt Quick} >
+    \uicontrol {\QMLD} to specify settings for snapping. In the
+    \uicontrol {Parent item padding} field, specify the
+    distance in pixels between the parent item and the snapping lines. In the
+    \uicontrol {Sibling item spacing} field, specify the distance in pixels between
+    sibling items and the snapping lines.
+
+    The following image shows the snapping lines (1) when
+    \uicontrol {Parent item padding} is set to 5 pixels.
+
+    \image qmldesigner-snap-margins.png "Snapping lines on canvas"
+
+    \section1 Hiding Item Boundaries
+
+    The \uicontrol {Form Editor} displays the boundaries of items.
+    To hide them, select the \inlineimage boundingrect.png
+    button.
+
+    \section1 Selecting Items
+
+    When you point the mouse to overlapping items, the frontmost item is
+    selected by default. However, items that do not have any content, such as
+    the mouse area, are typically located in front of items that do have
+    content, such as rectangles or border images. To select items with content
+    by default, click the
+    \inlineimage qmldesigner-only-select-items-with-content.png
+    button.
+
+    \section1 Previewing Component Size
+
+    The width and height of the root item in a QML file determine the size of
+    the component. You can reuse components, such as buttons, in different
+    sizes in other QML files and design UIs for use with different device
+    profiles, screen resolution, or screen orientation. The component size
+    might also be zero (0,0) if its final size is determined by property
+    bindings.
+
+    To experiment with different component sizes, enter values in the
+    \uicontrol {Override Width} and \uicontrol {Override Height} fields (1) on
+    the canvas toolbar. The changes are displayed in the \uicontrol {Form Editor}
+    (2) and in the \uicontrol States view (3), but the property
+    values are not changed permanently in the QML file. You can permanently
+    change the property values in the \uicontrol Properties view (4).
+
+    \image qmldesigner-preview-size.png "Canvas width and height"
+
+    \section1 Specifying Canvas Size
+
+    To change the canvas size, select \uicontrol Tools > \uicontrol Options >
+    \uicontrol {Qt Quick} > \uicontrol {\QMLD} and
+    specify the canvas width and height in the \uicontrol Canvas group.
+
+    \section1 Refreshing the Form Editor Contents
+
+    When you open QML files in the Design mode, the items in the file are drawn
+    in the \uicontrol {Form Editor}. When you edit the item properties, the QML
+    file and the contents of the editor might get out of sync. For example, when
+    you change the position of an item within a column or a row, the new
+    position might not be displayed correctly in the \uicontrol {Form Editor}.
+
+    To refresh the contents of the \uicontrol {Form Editor}, press \key R or
+    select the \inlineimage reset.png
+    (\uicontrol {Reset View}) button.
+
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
index a578d73c32..b5b7d372e0 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Design Studio documentation.
@@ -70,6 +70,7 @@
             \list
                 \li \l{Creating Components}
                 \list
+                    \li \l{Editing 2D Content}
                     \li \l{Creating Buttons}
                     \li \l{Creating Scalable Buttons and Borders}
                 \endlist