Merge remote-tracking branch 'origin/5.0'

Change-Id: Ia018600fb257c9523fc9d15faa5bd8300840e3de

CMakeLists.txt

@@ -52,20 +52,17 @@ find_package(Qt5
 )
 if (Qt5_VERSION VERSION_LESS 6.0.0)
   install(TARGETS Qt6Core5Compat EXPORT QtCreator)
-  set(BUILD_WITH_PCH_DEFAULT ON)
 
   # Specify standards conformance mode to MSVC 2017 and later
   # Qt6 has the values as part of the Qt6::Platform target interface
   if (MSVC AND MSVC_VERSION GREATER_EQUAL 1910)
     add_compile_options(/permissive- /Zc:__cplusplus)
   endif()
-else()
-  set(BUILD_WITH_PCH_DEFAULT OFF)
 endif()
 find_package(Qt5 COMPONENTS LinguistTools QUIET)
 find_package(Qt5 COMPONENTS Designer DesignerComponents Help SerialPort Svg Tools QUIET)
 
-option(BUILD_WITH_PCH "Build with precompiled headers" ${BUILD_WITH_PCH_DEFAULT})
+option(BUILD_WITH_PCH "Build with precompiled headers" ON)
 
 find_package(Threads)
 find_package(Clang QUIET)

cmake/QtCreatorAPIInternal.cmake

@@ -1,6 +1,6 @@
 if (CMAKE_VERSION VERSION_LESS 3.18)
   if (CMAKE_CXX_COMPILER_ID STREQUAL GNU OR CMAKE_VERSION VERSION_LESS 3.16)
-    set(BUILD_WITH_PCH OFF)
+    set(BUILD_WITH_PCH OFF CACHE BOOL "" FORCE)
   endif()
 endif()
 

doc/qtcreator/src/cmake/creator-projects-cmake-building.qdoc

@@ -119,6 +119,26 @@
 
     \image qtcreator-build-run-options-cmake.png "CMake Build & Run options"
 
+    \section1 Viewing CMake Output
+
+    Output from CMake is displayed next to the \uicontrol {Build Settings} and
+    \uicontrol {Run Settings} panes in the \uicontrol Projects mode.
+
+    \image qtcreator-build-cmake-output.png "CMake output in Projects mode"
+
+    To clear the search results, select the \inlineimage clean_pane_small.png
+    (\uicontrol Clear) button.
+
+    You can enter a string in the \uicontrol Filter field to filter output.
+    To specify filtering options, select the \inlineimage magnifier.png "Filtering options menu"
+    button. You can filter output by using regular expressions or
+    case-sensitivity. Select \uicontrol {Show Non-matching Lines} to
+    hide the lines that match the filter.
+
+    To increase or decrease the output text size, select \inlineimage plus.png
+    (\uicontrol {Zoom In}) or \inlineimage minus.png
+    (\uicontrol {Zoom Out}), or press \key Ctrl++ or \key Ctrl+-.
+
     \section1 CMake Build Steps
 
     \QC builds CMake projects by running \c {cmake . --build}, which then runs

doc/qtcreator/src/debugger/creator-only/creator-debugger-settings.qdocinc

@@ -39,6 +39,14 @@
     \l{Specifying Breakpoint Settings}{specify settings for breakpoints},
     and map source paths to target paths.
 
+    You can view debug output in the \uicontrol {Debugger Log} view.
+    However, in some Linux distributions, such as Arch Linux, debug
+    output is sent to the system log. To override this behavior, select
+    the \uicontrol {Force logging to console} check box. This sets
+    \c QT_LOGGING_TO_CONSOLE=1 in the environment of the debugged
+    program, which effectively prevents storing debug output in
+    system logs.
+
     \section2 Mapping Source Paths
 
     To enable the debugger to step into the code and display the source code

doc/qtcreator/src/debugger/creator-only/creator-debugger.qdoc

@@ -220,6 +220,15 @@
             applications.
         \li Select the \uicontrol {Break at "main"} check box to stop the
             debugger at the main function.
+        \li Select the \uicontrol {Use target extended-remote to connect}
+            check box to create the connection in the
+            \c {target extended-remote mode}. In this mode, when the debugged
+            application exits or you detach from it, the debugger remains
+            connected to the target. You can rerun the application, attach
+            to a running application, or use monitor commands specific to the
+            target. For example, GDB does not exit unless it was invoked using
+            the \c {--once} option, but you can make it exit by using the
+            \c {monitor exit} command.
         \li In the \uicontrol {Override SysRoot} field, specify the path to
             the \c sysroot to use instead of the default \c sysroot.
         \li In the \uicontrol {Debug information} field, specify the location

doc/qtcreator/src/editors/creator-code-indentation.qdoc

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Creator documentation.
@@ -48,6 +48,29 @@
         \li Other text files
     \endlist
 
+    To fix the indentation in the file currently open in the editor,
+    select options in the \uicontrol Edit > \uicontrol Advanced menu
+    or use \l{Keyboard Shortcuts}{keyboard shortcuts}:
+
+    \list
+        \li To automatically indent the highlighted text, select
+            \uicontrol {Auto-indent Selection} or press \key {Ctrl+I}.
+        \li To automatically format the highlighted text, select
+            \uicontrol {Auto-format Selection} or press \key {Ctrl+;}.
+        \li To adjust the wrapping of the selected paragraph, select
+            \uicontrol {Rewrap Paragraph} or press \key {Ctrl+E}
+            followed by \key R.
+        \li To toggle text wrapping, select \uicontrol {Enable Text Wrapping}
+             or press \key {Ctrl+E} followed by \key {Ctrl+W}.
+        \li To visualize whitespace in the editor, select
+            \uicontrol {Visualize Whitespace} or press \key {Ctrl+E}
+            followed by \key {Ctrl+V}.
+        \li To clear all whitespace characters from the currently open file,
+            select \uicontrol {Clean Whitespace}.
+    \endlist
+
+    \section1 Specifying Indentation Settings
+
     You can also specify indentation separately for each project. You can
     specify several sets of code style settings and easily switch between them.
     In addition, you can import and export code style settings.
@@ -61,7 +84,20 @@
 
     \image qtcreator-options-text-editor-behavior.png "Text Editor Behavior options"
 
+    To visualize whitespace in the editor, select \uicontrol Tools >
+    \uicontrol Options > \uicontrol {Text Editor} > \uicontrol Display >
+    \uicontrol {Visualize whitespace}.
+
+    \image qtcreator-options-text-editor-display.png "Text Editor Display options"
+
+    To help you keep line length at a particular number of characters, set the
+    number of characters in the \uicontrol {Display right margin at column}
+    field. To use a context-specific margin when available, select the
+    \uicontrol {Use context-specific margin} check box.
     \if defined(qtcreator)
+    For example, the margin could be set by the \c ColumnLimit option of the
+    \l{Specifying Code Style Settings}{Clang Format plugin}.
+
     \section1 Indenting C++ Files
 
     To specify indentation settings for the C++ editor:

doc/qtcreator/src/editors/creator-coding-edit-mode.qdoc

@@ -184,10 +184,9 @@
     split view, select \uicontrol Window > \uicontrol {Remove All Splits} or
     press \key {Ctrl+E, 1}.
 
-    \if defined(qtcreator)
     \section1 Using Bookmarks
 
-    To insert or delete a bookmark:
+    To insert or delete a bookmark in the \uicontrol Edit mode:
 
     \list
 
@@ -245,7 +244,8 @@
 
     \section1 Moving to Symbol Definition or Declaration
 
-    You can move directly to the definition or the declaration of a symbol by
+    You can move directly to the definition or the declaration of a symbol
+    in the \uicontrol Edit mode by
     holding the \key Ctrl key and clicking the symbol. If you have multiple
     splits opened, you can open the link in the next split by holding \key Ctrl
     and \key Alt while clicking the symbol.
@@ -290,6 +290,7 @@
     \uicontrol {Open Corresponding Header/Source in Next Split}. You can also
     press \key F4 or \key {Ctrl+E,F4}, respectively.
 
+    \if defined(qtcreator)
     \section1 Reparsing Externally Changed Files
 
     If source files are modified from outside \QC, the opened files will be

doc/qtcreator/src/editors/creator-locator.qdoc

@@ -139,11 +139,12 @@
 
         \li Executing shell commands (\c {!})
 
-        \li Executing version control system commands (\c {git}).
+        \li Executing version control system commands
             \if defined(qtcreator)
-            For more information, see \l{Using Version Control Systems}
+            (\c {bzr}, \c {cvs}, \c {git}, \c {hg}, or \c {svn}).
+            For more information, see \l{Using Version Control Systems}.
             \else
-            For more information, see \l{Using Git}
+            (\c {git}). For more information, see \l{Using Git}.
             \endif
 
         \li Triggering menu items from the main menu (\c {t})

doc/qtcreator/src/editors/creator-quick-fixes.qdoc

@@ -570,6 +570,21 @@
                 \li data member with the name \c {m_<propertyName>}
             \endlist
             \li \c Q_PROPERTY
+        \row
+            \li Generate Q_PROPERTY and Missing Members
+            \li Generates a Q_PROPERTY and adds missing members to it, as
+                described above.
+            \li Class member
+        \row
+            \li Generate Constant Q_PROPERTY and Missing Members
+            \li Generates a constant Q_PROPERTY and adds missing members
+                to it, as described above.
+            \li Class member
+        \row
+            \li Generate Q_PROPERTY and Missing Members with Reset Function
+            \li Generates a Q_PROPERTY and adds missing members to it, as
+                described above, but with an additional \c reset function.
+            \li Class member
        \row
             \li Apply Changes
             \li Keeps function declarations and definitions synchronized by
@@ -617,6 +632,19 @@
             \li Creates either both getter and setter member functions for
                 member variables or only a getter or setter.
             \li Member variable in class definition
+        \row
+            \li Generate Getter and Setter
+            \li Creates getter and setter member functions for a member
+                variable.
+            \li Member variable in class definition
+        \row
+            \li Generate Getter
+            \li Creates a getter member function for a member variable.
+            \li Member variable in class definition
+        \row
+            \li Generate Setter
+            \li Creates a setter member function for a member variable.
+            \li Member variable in class definition
         \row
             \li Generate Constructor
             \li Creates a constructor for a class.

doc/qtcreator/src/editors/creator-semantic-highlighting.qdoc

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Creator documentation.
@@ -56,16 +56,25 @@
     syntax definitions. \QC comes with most of the commonly used syntax files,
     and you can download additional files. For more information about the
     definition files, see
-    \l{https://docs.kde.org/stable5/en/applications/katepart/highlight.html}
+    \l{https://docs.kde.org/trunk5/en/kate/katepart/highlight.html}
     {Working with Syntax Highlighting}.
 
     Font attributes that a syntax definition file explicitly specifies, such as
     bold, italic, underline, or strike through, are applied. Colors are applied
     if they are readable with \QC themes.
 
+    If more than one highlight definition is available for the file that you
+    open for editing, the editor asks you to select the one to use. To save
+    the selection, select \uicontrol {Remember My Choice}. To reset the
+    remembered definitions, select \uicontrol Tools > \uicontrol Options >
+    \uicontrol {Text Editor} > \uicontrol {Generic Highlighter} >
+    \uicontrol {Reset Remembered Definitions}.
+
     If the editor cannot find the highlight definition for a file that you open
-    for editing, it prompts you to update the highlight definition files. Select
-    \uicontrol {Update Definitions} to update the files.
+    for editing, it prompts you to download additional highlight definition
+    files. Select \uicontrol {Download Definitions} to download the files.
+    Information about the downloaded files is displayed in the
+    \uicontrol {General Messages} \l{Viewing Output}{output pane}.
 
     To suppress the message for a particular file pattern, select
     \uicontrol Tools > \uicontrol Options > \uicontrol {Text Editor}
@@ -76,10 +85,9 @@
 
     If you have written your own syntax definition files, you
     can provide an additional definition search path in the
-    \uicontrol {User Highlight Definition Files} field.
-
-    To manually update the highlight definition files, select
-    \uicontrol {Update Definitions}.
+    \uicontrol {User Highlight Definition Files} field. To
+    apply the changes you make to the definition files, select
+    \uicontrol {Reload Definitions}.
 
     \section1 Highlighting and Folding Blocks
 
@@ -101,6 +109,8 @@
     \uicontrol {Text Editor} > \uicontrol Display >
     \uicontrol {Display folding markers}. This option is enabled by default.
 
+    \image qtcreator-options-text-editor-display.png "Text Editor Display options"
+
     When the cursor is on a brace, the matching brace is animated by default. To
     turn off the animation and just highlight the block and the braces, select
     \uicontrol Tools > \uicontrol Options > \uicontrol {Text Editor} >
@@ -117,4 +127,6 @@
     \key {Ctrl+Alt+Shift+U}. To enable smart block selection, select
     \uicontrol Tools > \uicontrol Options > \uicontrol {Text Editor} >
     \uicontrol Behavior > \uicontrol {Enable smart selection changing}.
+
+    \image qtcreator-options-text-editor-behavior.png "Text Editor Behavior options"
 */

doc/qtcreator/src/howto/creator-telemetry.qdoc

@@ -148,7 +148,7 @@
 /*!
     \page creator-crashpad.html
     \previouspage collecting-user-feedback.html
-    \nextpage studio-help.html
+    \nextpage studio-packaging.html
 
     \title Reporting Crashes
 

doc/qtcreator/src/overview/creator-only/qtcreator-ui-best-practices.qdoc

@@ -1,47 +0,0 @@
-/****************************************************************************
-**
-** 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.
-**
-****************************************************************************/
-
-/*!
-    \previouspage adding-plugins.html
-    \page creator-ui-best-practices.html
-    \nextpage creator-usability.html
-
-    \title Best Practices
-
-    Apply the best practices to ensure that the UIs you create work
-    efficiently on the intended platforms, such as mobile devices.
-
-    \list
-        \li \l {Optimizing Applications for Mobile Devices}
-
-            Guidelines to help you design and develop usable applications for
-            mobile devices with varying characteristics.
-
-        \li \l {Qt Quick Best Practices}
-
-            Guidelines describing the most efficient ways to use \QDS to
-            create UIs and scenes that run flawlessly on the intended platforms.
-    \endlist
-*/

doc/qtcreator/src/qtcreator-toc.qdoc

@@ -150,7 +150,6 @@
                                 \li \l{Creating Scalable Buttons and Borders}
                             \endlist
                         \endlist
-                        \li \l{Creating Optimized 3D Scenes}
                         \li \l{Specifying Component Properties}
                         \li \l{Scalable Layouts}
                         \li \l{Using Custom Fonts}
@@ -187,8 +186,13 @@
                 \li \l{Motion Design}
                     \list
                         \li \l{Introduction to Animation Techniques}
-                        \li \l{Creating Animations}
+                        \li \l{Creating Timeline Animations}
                         \li \l{Editing Easing Curves}
+                        \li \l{Production Quality}
+                        \li \l{Optimizing Designs}
+                            \list
+                                \li \l{Creating Optimized 3D Scenes}
+                            \endlist
                        \endlist
                 \li \l {Browsing ISO 7000 Icons}
                 \li \l {Converting UI Projects to Applications}

doc/qtcreator/src/qtcreator.qdoc

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Creator documentation.
@@ -52,6 +52,8 @@
     see \l{Commercial Features}.
 
     \table
+        \row
+            \li {4,1} \b {\l{All Topics}}
         \row
             \li \inlineimage front-gs.png
             \li \inlineimage front-projects.png
@@ -77,7 +79,7 @@
                 \list
                     \li \l{Developing Qt Quick Applications}
                     \li \l{Developing Widget Based Applications}
-                    \li \l{Best Practices}
+                    \li \l{Optimizing Applications for Mobile Devices}
                 \endlist
             \li \b {\l{Coding}}
                 \list
@@ -125,20 +127,20 @@
                     \li \l{Glossary}
                 \endlist
         \row
-            \li {4,1} \l{All Topics}
-        \row
-            \li {4,1} \note To report bugs and suggestions to the
+            \li {4,1} \b {Contact Us}
+                \list
+                    \li To report bugs and suggestions to the
                         \l{https://bugreports.qt.io/}{Qt Project Bug Tracker},
                         select \uicontrol Help > \uicontrol {Report Bug}.
-                To copy and paste detailed information about your system to the
-                bug report, select \uicontrol Help >
+                    \li To copy and paste detailed information about your
+                        system to the bug report, select \uicontrol Help >
                         \uicontrol {System Information}.
-
-                You can also join the \QC mailing list at:
-                \l{http://lists.qt-project.org/mailman/listinfo/}
-                {lists.qt-project.org Mailing Lists}.
-
-                For credits and a list of third-party libraries, see
+                    \li To join the \l{https://lists.qt-project.org/listinfo/qt-creator}
+                        {\QC mailing list} or \l{https://web.libera.chat/#qt-creator}
+                        {#qt-creator} channel on Libera.Chat IRC, select
+                        \uicontrol Help > \uicontrol Contact.
+                    \li For credits and a list of third-party libraries, see
                         \l {Acknowledgements}.
+            \endlist
     \endtable
 */

doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc

@@ -65,7 +65,8 @@
         \li Add states to apply sets of changes to the property values of one
             or several component instances in the \uicontrol States view.
             For more information, see \l{Adding States}.
-        \li Animate the properties of component instances in the \uicontrol
-            Timeline view. For more information, see \l{Creating Animations}.
+        \li Animate the properties of component instances in the
+            \uicontrol Timeline view. For more information, see
+            \l{Creating Timeline Animations}.
     \endlist
 */

doc/qtcreator/src/qtquick/library/qtquick-controls.qdoc

@@ -392,7 +392,7 @@
     \section1 Selectors
 
     Qt Quick Controls offers a set of selector-like controls, such as sliders,
-    dial, sping box, combo box, and tumbler, for specific use cases. The
+    dial, spin box, combo box, and tumbler, for specific use cases. The
     following sections contain guidelines for choosing the selector most
     suitable for a use case.
 

doc/qtcreator/src/qtquick/qtdesignstudio-optimized-3d-scenes.qdoc

@@ -25,8 +25,12 @@
 
 /*!
     \page studio-optimized-3d-scenes.html
-    \previouspage quick-scalable-image.html
-    \nextpage qtquick-properties.html
+    \previouspage qtquick-optimizing-designs.html
+    \if defined(qtdesignstudio)
+    \nextpage creator-coding.html
+    \else
+    \nextpage qtquick-iso-icon-browser.html
+    \endif
 
     \title Creating Optimized 3D Scenes
 
@@ -40,7 +44,12 @@
 
     \section1 The Optimal 3D Scene Example
 
-    The \l {Optimal 3D Scene} example features four versions of the same kitchen
+    \if defined(qtdesignstudio)
+    The \l {Optimal 3D Scene}
+    \else
+    The Optimal 3D Scene
+    \endif
+    example features four versions of the same kitchen
     scene that have been created using different strategies: High, Low, Combined,
     and Vertex Color. The High Scene includes a significantly higher number of
     objects compared to the other versions of the scene. The Low, Combined and

doc/qtcreator/src/qtquick/qtquick-animation-overview.qdoc

@@ -26,9 +26,12 @@
 /*!
     \page quick-animation-overview.html
     \previouspage qtquick-motion-design.html
+    \nextpage studio-timeline.html
 
     \title Introduction to Animation Techniques
 
+    \image timeline-rotation-animation.gif "Timeline animation of rotation and opacity"
+
     \QDS supports the following types of animation techniques that are suitable
     for different purposes:
 
@@ -207,8 +210,8 @@
     \section2 Programmatic Animation
 
     You can control property animation programmatically. Property animations
-    are created by binding \l{Animations}{Animation} components to property
-    values of component instances to gradually change the properties values
+    are created by binding \uicontrol Animation components to property
+    values of component instances to gradually change the property values
     over time. The property animations apply smooth movement by interpolating
     values between property value changes. They provide timing controls and
     enable different interpolations through easing curves.
@@ -219,95 +222,42 @@
 
     You can create instances of preset animation components available in
     \l Library > \uicontrol Components > \uicontrol {Default Components} >
-    \uicontrol Animation to create \l{Animations}{animations} depending on
-    the type of the property that is to be animated and the behavior that
-    you want.
+    \uicontrol Animation to create animations depending on the type of the
+    property and the behavior that you want.
+
+    For more information about \uicontrol Animation components and their
+    properties, see \l{Animations}.
 
     \table
     \header
-        \li Animation Type
+        \li Component
         \li Use Case
     \row
-        \li Property animation
+        \li \uicontrol {Property Animation}
         \li Applying animation when the value of a property changes. Color
             and number animations are property animation types for specific
             purposes.
     \row
-        \li Property action
+        \li \uicontrol {Property Action}
         \li Setting non-animated property values during an animation.
     \row
-        \li Color animation
+        \li \uicontrol {Color Animation}
         \li Applying animation when a color value changes.
     \row
-        \li Number animation
+        \li \uicontrol {Number Animation}
         \li Applying animation when a numerical value changes.
     \row
-        \li Parallel animation
+        \li \uicontrol {Parallel Animation}
         \li Running animations in parallel.
     \row
-        \li Sequential Animation
+        \li \uicontrol {Sequential Animation}
         \li Running animations sequentially.
     \row
-        \li Pause animation
+        \li \uicontrol {Pause Animation}
         \li Creating a step in a sequential animation where nothing happens for
             a specified duration.
     \row
-        \li Script action
+        \li \uicontrol {Script Action}
         \li Executing JavaScript during an animation.
     \endtable
-
-    \section3 Property Animation and Action
-
-    A property animation is applied when the value of a property changes.
-
-    To immediately change a property value during an animation without
-    animating the property change, use a property action instead. This
-    is useful for setting non-animated property values during an animation.
-
-    For example, you can use a sequential animation that contains two property
-    actions around a number animation to set the value of the opacity property
-    of an \l{Images}{Image} to \c 0.5, animate the width of the image, and then
-    set the opacity back to \c 1.
-
-    \section3 Color Animation
-
-    A color animation is a specialized property animation that defines an
-    animation to be applied when a color value changes.
-
-    For example, you can apply animation to the color property of a \l Rectangle
-    to change its value from its current color to another color over a period
-    of time specified in milliseconds.
-
-    \section3 Number Animation
-
-    A number animation is a specialized property animation that defines an
-    animation to be applied when a numerical value changes.
-
-    For example, you can apply animation to the x property of a \l Rectangle
-    to make it appear to move from its current position on the x axis to another
-    position over a period of time specified in milliseconds.
-
-    \section3 Parallel and Sequential Animation
-
-    Animations can run in parallel or in sequence. Parallel animations will
-    play a group of animations at the same time while sequential animations
-    play a group of animations in order, one after the other.
-
-    For example, a banner component may have several icons or slogans to
-    display, one after the other. The opacity property could change to
-    \c 1.0 denoting an opaque object. Using a sequential animation, the
-    opacity animations will play after the preceding animation finishes,
-    whereas a parallel animation will play the animations at the same time.
-
-    Once individual animations are placed into a group of parallel or sequential
-    animations, they can no longer be started and stopped independently. The
-    sequential or parallel animations must be started and stopped as a group.
-
-    \section3 Pause Animation
-
-    When used in a sequential animation, a pause animation is a step when
-    nothing happens, for a specified duration.
-
-    For example, you could specify a 500-millisecond animation sequence, with
-    a 100-millisecond pause between two animations.
 */

doc/qtcreator/src/qtquick/qtquick-animation-types.qdoc

@@ -34,43 +34,207 @@
 
     \title Animations
 
-    To create an animation, use an appropriate animation type for the type of
-    the property that is to be animated, and apply the animation depending on
-    the type of behavior that is required.
+    To create an animation, use the appropriate animation type for the property
+    that is to be animated, and apply the animation depending on the type of
+    behavior that is required.
 
-    You can drag and drop the following components from \l Library >
+    You can drag-and-drop animation components from \l Library >
     \uicontrol Components > \uicontrol {Default Components} >
-    \uicontrol Animation to \l Navigator or \l {Form Editor}:
+    \uicontrol Animation to \l Navigator or \l {Form Editor} to
+    create instances of them.
 
-    \list
-        \li \l [QML] {ColorAnimation}{Color Animation} is a specialized
-            property animation that defines an animation to be applied when a
-            color value changes.
-        \li \l [QML] {NumberAnimation}{Number Animation} is a specialized
-            property animation that defines an animation to be applied when a
-            numerical value changes.
-        \li \l [QML] {ParallelAnimation}{Parallel Animation} enables
-            animations to be run in parallel.
-        \li \l [QML] {PauseAnimation}{Pause Animation} is used in a
-            sequential animation to create a step where nothing happens, for
+    You can achieve similar results by using different animation techniques.
+    For more information, see \l{Introduction to Animation Techniques}.
+
+    \section1 Applying Animation
+
+    A property animation is applied when the value of a property changes.
+    Color and number animations are property animation types for specific
+    purposes. Specify settings for animations in \l Properties >
+    \uicontrol {Animation Targets}.
+
+    \section2 Animating Color Changes
+
+    For example, you can apply animation to the value of the \uicontrol Color
+    property of an instance of a \l Rectangle component to change its value
+    from its current color to another color over a period of time specified in
+    milliseconds.
+
+    \image qtquick-color-animation.gif "Color animation"
+
+    First create an instance of the \uicontrol {Color Animation} component.
+    Select the component to animate in the \uicontrol Target field, and enter
+    the property to animate in the \uicontrol Property field. To animate several
+    properties, enter them into the \uicontrol Properties field separated by
+    commas.
+
+    \image qtquick-properties-coloranimation.png "Color Animation properties"
+
+    Select the original color in the \uicontrol {From color} field and the new
+    color in the \uicontrol {To color} field. Specify the duration of the
+    animation in the \uicontrol Duration field.
+
+    \section2 Animating Changes in Numerical Values
+
+    Similarly, to apply animation when a numerical value of a property changes,
+    create an instance of the \uicontrol {Number Animation} component.
+
+    \image qtquick-properties-numberanimation.png "Number Animation properties"
+
+    Select the original value in the \uicontrol From field and the new value in
+    the \uicontrol To field. Then specify the duration of the animation in the
+    \uicontrol Duration field.
+
+    For example, you can apply animation to the value of the \uicontrol X
+    property of a \l Rectangle instance to make it appear to move from its
+    current position on the x axis to another position over a period of time
+    specified in milliseconds. To make the component appear to move both on
+    the x and y axis, enter x and y into the \uicontrol Properties field
+    separated by a comma.
+
+    \image qtquick-number-animation.gif "Number animation"
+
+    \section2 Setting Non-Animated Properties
+
+    To immediately change a property value during an animation
+    without animating the property change, create an instance
+    of the \uicontrol {Property Action} component instead, and
+    set the value in the \uicontrol Value field. This is useful
+    for setting non-animated property values during an animation.
+
+    \image qtquick-properties-propertyaction.png "Property Action properties"
+
+    For example, you can create an instance of the
+    \uicontrol {Sequential Animation} component that contains two instances
+    of the \uicontrol {Property Action} component around an instance of the
+    \uicontrol {Number Animation} component. The first property action sets
+    the \uicontrol Opacity property of a \l{Rectangle} to \c 0.5, the number
+    animation changes the width of the image, and the second property action
+    sets the opacity back to \c 1.
+
+    \image qtquick-property-action.gif "Sequential property actions and number animation"
+
+    \section1 Playing Animations
+
+    Specify settings for playing animations in the \uicontrol Animation group.
+
+    \image qtquick-properties-animation.png "Animation properties"
+
+    To run animations automatically, select the \uicontrol Running
+    check box. Animations are run for the time you specify in the
+    \uicontrol Duration field.
+
+    You can connect the running property of an animation to a signal emitted
+    by a component to play the animation when users click a button, for
+    example. For more information, see \l{Connecting Components to Signals}.
+
+    To run animations several times in a loop, set the number of times they
+    should play in the \uicontrol Loops field. Set the value to -1 to have
+    the animation continuously repeat until it is explicitly stopped.
+
+    To specify that animations should run to completion when they are stopped,
+    select the \uicontrol {Run to end} check box. This behavior is most useful
+    when the \uicontrol Loops property is set, as the animation will finish
+    playing normally but not restart.
+
+    All animations defined for a component are run in parallel,
+    unless you include them in a \uicontrol {Parallel Animation} or
+    \uicontrol {Sequential Animation} component for managing them as a
+    group.
+
+    To pause animations, select the \inlineimage icons/pause-icon.png
+    (\uicontrol Paused) check box.
+
+    To attach an \l{Editing Easing Curves}{easing curve} to
+    the animation, select the \inlineimage curve_editor.png
+    (\uicontrol {Easing Curve Editor}) button in the
+    \uicontrol {Easing Curve} field.
+
+    \section2 Playing Groups of Animations
+
+    You can create several animations that can run in parallel or in sequence.
+    To manage a group of animations that will play at the same time, create an
+    instance of a \uicontrol {Parallel Animation} component and drag-and-drop
+    the other animations to it. To play the animations in the specified order,
+    one after the other, create an instance of a
+    \uicontrol {Sequential Animation} instead.
+
+    For example, a banner component may have several icons or slogans to
+    display, one after the other. The value of the \uicontrol Opacity property
+    could change to \c 1.0 denoting an opaque object. Using a sequential
+    animation, each opacity animation will play after the preceding animation
+    finishes, whereas using a parallel animation will play the animations at
+    the same time.
+
+    Once individual animations are placed into a group of parallel or sequential
+    animations, they can no longer be started and stopped independently. The
+    sequential or parallel animations must be started and stopped as a group.
+
+    When used in a \uicontrol {Sequential Animation}, a
+    \uicontrol {Pause Animation} is a step when nothing
+    happens, for a specified duration. To specify a pause
+    between two animations, select the \uicontrol Paused
+    check box and specify the duration of the pause in the
+    \uicontrol Duration field.
+
+    \section1 Performance Considerations
+
+    \QDS enables you to use fluidity and dynamic transitions as well as visual
+    effects to great effect in a UI. However, you need to take some care when
+    using some of the supported features because they can affect the
+    performance of the UI.
+
+    In general, animating a property will cause any bindings which reference
+    that property to be re-evaluated. Usually, this is what is desired, but in
+    some cases it may be better to disable the binding prior to performing
+    the animation and then reassign the binding once the animation has
+    completed.
+
+    Avoid running JavaScript during animation. For example, running a complex
+    JavaScript expression for each frame of an x property animation should be
+    avoided.
+
+    Take special care when creating instances of the \uicontrol {Script Action}
+    component because script animations are run in the main thread and can
+    therefore cause frames to be skipped if they take too long to complete.
+
+    \section1 Summary of Animation Components
+
+    The following table lists the components that you can use to animate
+    component properties programmatically. They are available in \l Library
+    > \uicontrol Components > \uicontrol {Default Components} >
+    \uicontrol Animation
+
+    \table
+    \header
+        \li Component
+        \li Use Case
+    \row
+        \li \uicontrol {Property Animation}
+        \li Applying animation when the value of a property changes. Color
+            and number animations are property animation types for specific
+            purposes.
+    \row
+        \li \uicontrol {Property Action}
+        \li Setting non-animated property values during an animation.
+    \row
+        \li \uicontrol {Color Animation}
+        \li Applying animation when a color value changes.
+    \row
+        \li \uicontrol {Number Animation}
+        \li Applying animation when a numerical value changes.
+    \row
+        \li \uicontrol {Parallel Animation}
+        \li Running animations in parallel.
+    \row
+        \li \uicontrol {Sequential Animation}
+        \li Running animations sequentially.
+    \row
+        \li \uicontrol {Pause Animation}
+        \li Creating a step in a sequential animation where nothing happens for
             a specified duration.
-        \li \l [QML] {PropertyAction}{Property Action} immediately changes
-             a property value during an animation, without animating the
-             property change.
-        \li \l [QML] {PropertyAnimation}{Property Animation} animates
-             changes in the value of a property.
-        \li \l [QML] {ScriptAction}{Script Action} defines scripts to be
-            run during an animation.
-        \li \l [QML] {SequentialAnimation}{Sequential Animation} enables
-            animations to be run sequentially.
-    \endlist
-
-    For more information about using the components, see
-    \l{Animation and Transitions in Qt Quick}.
-
-    For more information about animating properties in the \l Timeline
-    view, see \l{Creating Animations}. For more information about animating
-    property changes in states, see \l{Animating Transitions Between States}.
-
-//! [qtquick animation types]
+    \row
+        \li \uicontrol {Script Action}
+        \li Executing JavaScript during an animation.
+    \endtable
 */

doc/qtcreator/src/qtquick/qtquick-annotations.qdoc

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Creator documentation.
@@ -30,7 +30,7 @@
     \nextpage qtquick-prototyping.html
     \else
     \previouspage qtquick-fonts.html
-    \nextpage qtquick-ui-forms.html
+    \nextpage creator-quick-ui-forms.html
     \endif
 
     \title Annotating Designs

doc/qtcreator/src/qtquick/qtquick-designer.qdoc

@@ -110,7 +110,7 @@
         \li \l Timeline
         \li Provides a timeline and keyframe based editor for animating
             the properties of components.
-        \li \l{Creating Animations}
+        \li \l{Creating Timeline Animations}
     \row
         \li \l{Curve Editor}
         \li Enables you to view and modify the whole animation curve by

doc/qtcreator/src/qtquick/qtquick-easing-curve-editor.qdoc

@@ -26,14 +26,28 @@
 /*!
     \page qtquick-editing-easing-curves.html
     \previouspage studio-timeline.html
-    \nextpage qmldesigner-connections.html
+    \nextpage qtquick-production-quality-animation.html
 
     \title Editing Easing Curves
 
-    You can use \uicontrol {Easing Curve Editor} to edit the easing curve
-    between two keyframes.
+    Easing curves define the progress of animation to make motion appear more
+    natural because real objects don't usually move at a constant speed nor
+    start and stop instantly. You can add and edit easing curves for nonlinear
+    interpolation to make components appear to pick up speed, slow down, or
+    bounce back at the end of an animation.
 
-    \image studio-easing-curve-editor.png "Easing Curve Editor"
+    You can attach easing curves to:
+
+    \list
+        \li Keyframes in timeline animations
+        \li Transitions
+        \li Property animation component instances
+    \endlist
+
+    You can use \uicontrol {Easing Curve Editor} to select and edit easing
+    curves.
+
+    \section1 Selecting Easing Curves
 
     You can use the preset curves or modify them by dragging the curve handles
     around. You can add points to the curve and drag them and the point handles
@@ -41,13 +55,28 @@
     a custom curve. For more information about easing curve types, see the
     technical documentation for \l [QML] {PropertyAnimation}{easing curves}.
 
+    \image studio-easing-curve-editor.png "Easing Curve Editor"
+
+    To select an easing curve:
+
+    \list 1
+        \li Select an easing curve in the \uicontrol Presets tab.
+        \li In the \uicontrol {Duration (ms)} field, select the
+            duration of the easing function in milliseconds.
+        \li Select \uicontrol Preview to preview the curve.
+        \li Select \uicontrol OK to attach the easing curve and
+            return to the view where you are adding the curve.
+    \endlist
+
     To zoom into and out of the easing curve editor, use the mouse
     roller. To reset the zoom factor, right-click in the picker and
     select \uicontrol {Reset Zoom}.
 
-    You can also use the more advanced \l {Curve Editor} that
-    shows the interpolated values of an animated property over
-    the \l{Creating Animations}{animation} range.
+    \section1 Easing Curves in Timeline Animations
+
+    For timeline animations, you can also use the more advanced
+    \l {Curve Editor} that shows the interpolated values of an animated
+    property over the \l{Creating Timeline Animations}{animation} range.
 
     The animation curves present a more readable view of the animation by
     showing the effective values of the animated properties over the animation
@@ -61,20 +90,14 @@
             and are therefore painted in a different color and without handles.
     \endlist
 
-    \section1 Attaching Easing Curves to Keyframes
+    \section2 Attaching Easing Curves to Keyframes
 
     To attach easing curves to keyframes:
 
     \list 1
         \li Right-click a keyframe in \l Timeline and select
             \uicontrol {Easing Curve Editor} in the context menu.
-        \li Select an easing curve in the \uicontrol Presets tab.
-        \li In the \uicontrol {Duration (ms)} field, select the
-            duration of the easing function in milliseconds.
-        \li Select \uicontrol Preview to preview the curve.
-        \li Select \uicontrol OK to attach the easing curve to the
-            keyframe, close \uicontrol {Easing Curve Editor}, and
-            return to \l Timeline.
+        \li Select an easing curve, as described in \l{Selecting Easing Curves}.
     \endlist
 
     When you attach easing curves to keyframes, the shape of the
@@ -82,6 +105,28 @@
     \l Timeline changes from \inlineimage keyframe_linear_inactive.png
     to a marker that describes the type of the selected easing curve.
 
+    \section1 Attaching Easing Curves to Transitions
+
+    To attach easing curves to transitions:
+
+    \list 1
+        \li In \l{Transition Editor}, select the \inlineimage curve_editor.png
+            (\uicontrol {Easing Curve Editor}) button.
+        \li Select an easing curve, as described in \l{Selecting Easing Curves}.
+    \endlist
+
+    \section1 Attaching Easing Curves to Property Animations
+
+    To attach easing curves to property animations:
+
+    \list 1
+        \li In \l Navigator, select an \l{Animations}{Animation} component
+            instance.
+        \li In \l Properties, select the \inlineimage curve_editor.png
+            (\uicontrol {Easing Curve Editor}) button.
+        \li Select an easing curve, as described in \l{Selecting Easing Curves}.
+    \endlist
+
     \section1 Customizing Easing Curves
 
     To customize easing curves:

doc/qtcreator/src/qtquick/qtquick-fonts.qdoc

@@ -25,7 +25,7 @@
 
 /*!
     \page qtquick-fonts.html
-    \if defined{qtdesignstudio}
+    \if defined(qtdesignstudio)
     \previouspage studio-importing-2d.html
     \nextpage studio-importing-3d.html
     \else

doc/qtcreator/src/qtquick/qtquick-motion-design.qdoc

@@ -30,10 +30,15 @@
 
     \title Motion Design
 
-    You can use different animation techniques for different purposes. \QDS
-    supports common motion design techniques, such as timeline and keyframe
-    based animation and easing curves, as well as screen-to-screen or
-    state-to-state application flows and data-driven UI logic animation.
+    \table
+        \row
+            \li \image studio-animation.png
+            \li You can use different animation techniques for different
+                purposes. \QDS supports common motion design techniques,
+                such as timeline and keyframe based animation and easing
+                curves, as well as screen-to-screen or state-to-state
+                application flows and data-driven UI logic animation.
+    \endtable
 
     \list
         \li \l {Introduction to Animation Techniques}
@@ -41,21 +46,28 @@
             Learn more about which animation techniques are supported by \QDS
             and the use cases they are most suitable for.
 
-        \li \l {Creating Animations}
+        \li \l {Creating Timeline Animations}
 
             You can use a timeline and keyframe based editor in the
-            \uicontrol Timeline view to animate the properties of UI
+            \l Timeline view to animate the properties of UI
             components. Animating properties enables their values to
             move through intermediate values at specified keyframes
             instead of immediately changing to the target value.
-        \li Production Quality (TODO)
+        \li \l{Editing Easing Curves}
 
-            After the wireframing and prototyping phases, you can use the
-            supported motion design techniques to fine-tune your UI for
-            production.
-        \li Optimizing for Target Devices (TODO)
+            Specify easing curves for nonlinear interpolation between
+            keyframes in timeline animations, as well as between original
+            and new property values in property animations and between
+            transitions.
+        \li \l {Production Quality}
+
+            After the wireframing and prototyping phases, you can use previewing
+            and profiling tools to fine-tune your UI for production.
+        \li \l{Optimizing Designs}
 
             You can test your UIs on the target devices to make sure you get
-            the best performance out of your animations.
+            the best performance out of your animations. To solve performance
+            problems, you typically need to optimize the graphical assets used
+            in the UI, such as images, effects, or 3D scenes.
     \endlist
 */

doc/qtcreator/src/qtquick/qtquick-optimizing-designs.qdoc

@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 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.
+**
+****************************************************************************/
+
+/*!
+    \page qtquick-optimizing-designs.html
+    \previouspage qtquick-production-quality-animation.html
+    \nextpage studio-optimized-3d-scenes.html
+
+    \title Optimizing Designs
+
+    You can test your UIs on the target devices to make sure you get the best
+    performance out of your animations. To solve performance problems, you
+    typically need to optimize the graphical assets used in the UI, such as
+    images, effects, or 3D scenes.
+
+    How to optimize UIs for different target devices:
+
+    \list
+        \li Minimize image size
+        \li Use transparency sparingly
+    \endlist
+
+    For more useful information for application developers, see
+    \l {Performance Considerations And Suggestions}.
+
+    For more information about optimizing 3D scenes, see
+    \l{Creating Optimized 3D Scenes}.
+
+    \section1 Minimizing Image Size
+
+    Images are a vital part of any user interface. Unfortunately, they are also
+    a big source of problems due to the time it takes to load them, the amount
+    of memory they consume, and the way in which they are used.
+
+    We recommend that you make image size as small as possible without
+    negatively affecting image quality.
+
+    For more information about how to use images efficiently in your UI, see
+    \l{Images}.
+
+    \section1 Avoid Transparency
+
+    Opaque content is generally a lot faster to draw than transparent because
+    the latter needs blending and the renderer can potentially optimize opaque
+    content better.
+
+    An image with one transparent pixel is treated as fully transparent, even
+    though it is mostly opaque. The same is true for a \l {Border Image} with
+    transparent edges.
+*/

doc/qtcreator/src/qtquick/qtquick-production-quality-animation.qdoc

@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 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.
+**
+****************************************************************************/
+
+/*!
+    \page qtquick-production-quality-animation.html
+    \previouspage qtquick-editing-easing-curves.html
+    \nextpage qtquick-optimizing-designs.html
+
+    \title Production Quality
+
+    After the wireframing and prototyping phases, you can use previewing and
+    profiling tools to fine-tune your UI for production.
+
+    How to achieve production quality motion in UIs:
+
+    \list
+        \li Preview the UI to check the FPS refresh rate.
+        \li Profile the UI code to find causes for slowness, unresponsiveness,
+            and stuttering.
+    \endlist
+
+    \section1 FPS Refresh Rate
+
+    As a general rule, animators strive to allow the rendering engine to
+    achieve a consistent 60 frames-per-second (FPS) refresh rate. 60 FPS
+    means that there is approximately 16 milliseconds between each frame
+    in which processing can be done, which includes the processing required
+    to upload the draw primitives to the graphics hardware.
+
+    The frames-per-second (FPS) refresh rate of animations is displayed in the
+    \uicontrol FPS field on the \l{Summary of Main Toolbar Actions}{toolbar}
+    in the \uicontrol Design mode.
+
+    To improve the FPS rate, application developers should:
+
+    \list
+        \li Use asynchronous, event-driven programming wherever possible.
+        \li Use worker threads to do significant processing.
+        \li Never manually spin the event loop.
+        \li Never spend more than a couple of milliseconds per frame within
+            blocking functions to avoid skipped frames, which negatively
+            affect the user experience.
+    \endlist
+
+    For more information about previewing UIs on devices, see
+    \l{Validating with Target Hardware}.
+
+    \section1 Profiling UI Code
+
+    You can use \l{Profiling QML Applications}{QML Profiler} that is integrated
+    into \QC to find causes for typical performance problems in your UI. For
+    example, your UI might be slow, unresponsive, or stuttering. Typically, such
+    problems are caused by executing too much JavaScript in too few frames. All
+    JavaScript must return before the GUI thread can proceed, and frames are
+    delayed or dropped if the GUI thread is not ready.
+
+    In general, knowing where time is spent in a UI enables you to focus on
+    problem areas that actually exist, rather than problem areas that
+    potentially exist.
+
+    Determining which bindings are being run the most often or which functions
+    your application is spending the most time on enables you to decide whether
+    you need to optimize the problem areas, or redesign some implementation
+    details of your application so that the performance is improved. Attempting
+    to optimize code without profiling is likely to result in very minor rather
+    than significant performance improvements.
+
+    For more information, see \l{Profiling QML Applications}.
+*/

doc/qtcreator/src/qtquick/qtquick-properties.qdoc

@@ -132,7 +132,7 @@
     Changing a component's opacity does not affect whether the component
     receives user input events.
 
-    You can \l{Creating Animations}{animate} the opacity value to make a
+    You can \l{Creating Timeline Animations}{animate} the opacity value to make a
     component fade in and out.
 
     If the \uicontrol Clip check box is selected, the component and its children

doc/qtcreator/src/qtquick/qtquick-states.qdoc

@@ -147,9 +147,11 @@
     when: control.pressed || control.checked && !control.hovered
     \endcode
 
+    \if defined(qtdesignstudio)
     If you are not familiar with writing expressions, you can use preset
     \l{Logic Helpers}{logic helpers} from \l Library > \uicontrol Components
     > \uicontrol {Qt Quick Studio Logic Helper}.
+    \endif
 
     \section1 Using States
 

doc/qtcreator/src/qtquick/qtquick-timeline-view.qdoc

@@ -74,7 +74,7 @@
 
 
     For more information about creating timeline animations, see
-    \l{Creating Animations}.
+    \l{Creating Timeline Animations}.
 
     \section1 Navigating in Timeline
 

doc/qtcreator/src/qtquick/qtquick-timeline.qdoc

@@ -24,12 +24,15 @@
 ****************************************************************************/
 
 /*!
-    \previouspage qtquick-adding-dynamics.html
+    \previouspage quick-animation-overview.html
     \page studio-timeline.html
-    \nextpage qmldesigner-connections.html
+    \nextpage qtquick-editing-easing-curves.html
 
-    \title Creating Animations
+    \title Creating Timeline Animations
 
+    You can create timeline and keyframe based animations for linear
+    interpolation through intermediate values at specified keyframes
+    instead of immediately changing to the target value.
 
     \section1 Creating Timelines
 

doc/qtcreator/src/vcs/creator-vcs-git.qdoc

@@ -32,8 +32,8 @@
 /*!
     \page creator-vcs-git.html
     \if defined(qtdesignstudio)
-    \previouspage studio-projects.html
-    \nextpage studio-importing-designs.html
+    \previouspage studio-packaging.html
+    \nextpage quick-converting-ui-projects.html
     \else
     \previouspage creator-vcs-cvs.html
     \nextpage creator-vcs-mercurial.html

doc/qtcreator/src/widgets/qtdesigner-plugins.qdoc

@@ -32,7 +32,7 @@
 /*!
     \previouspage creator-using-qt-designer.html
     \page adding-plugins.html
-    \nextpage creator-ui-best-practices.html
+    \nextpage creator-usability.html
 
     \title Adding Qt Designer Plugins
 

doc/qtdesignstudio/examples/doc/coffeemachine.qdoc

@@ -141,7 +141,8 @@
     When we deselect the record button to stop recording the timeline, the
     new timeline appears in the view.
 
-    For more information about using the timeline, see \l {Creating Animations}.
+    For more information about using the timeline, see
+    \l {Creating Timeline Animations}.
 
     \section1 Using States to Move Between Screens
 

doc/qtdesignstudio/examples/doc/ebikedesign.qdoc

@@ -89,7 +89,8 @@
     to fade out the current screen when moving to another one and to make the
     speedometer grow and shrink in size depending on its current position.
 
-    For more information about using the timeline, see \l {Creating Animations}.
+    For more information about using the timeline, see
+    \l {Creating Timeline Animations}.
 
     \section1 Using States to Move Between Screens
 

doc/qtdesignstudio/examples/doc/loginui4.qdoc

@@ -40,10 +40,11 @@
     some basic UI components, such as pages, buttons, and entry fields. Part 4
     describes how to use the timeline and states to animate UI components.
 
-    In Part 3, you learned how to use states to simulate page changes in a UI
-    and connections to provide user interaction with it. In Part 4, you will now
-    learn another way of animating the UI by creating \l{Creating Animations}
-    {timeline animations} that you bind to states.
+    In Part 3, you learned how to use states to simulate page changes
+    in a UI and connections to provide user interaction with it. In
+    Part 4, you will now learn another way of animating the UI by creating
+    \l{Creating Timeline Animations}{timeline animations} that you bind
+    to states.
 
     These instructions build on:
 
@@ -128,7 +129,7 @@
 
     \section2 Adding a Timeline and Animation Settings
 
-    You are now ready to add the \l{Creating Animations}{timeline}. You will
+    You are now ready to add the \l{Creating Timeline Animations}{timeline}. You will
     need two animations, one for moving into the registration page and another
     for returning to the login page. You can use the same animation for both
     cases, by running it either from the beginning to the end or from the
@@ -314,7 +315,7 @@
     All the properties and functions of the components from this module are
     available in the \uicontrol Design mode, and therefore it is enough to
     learn how to use \uicontrol Timeline, as described in
-    \l {Creating Animations}.
+    \l {Creating Timeline Animations}.
 
     \section1 Next Steps
 

doc/qtdesignstudio/examples/doc/progressbar.qdoc

@@ -82,7 +82,8 @@
     changing color. To animate the label and indicator, we'll add timelines
     in the \l Timeline view.
 
-    For more information about using the timeline, see \l {Creating Animations}.
+    For more information about using the timeline, see
+    \l {Creating Timeline Animations}.
 
     \section2 Adding Color Animation
 

doc/qtdesignstudio/examples/doc/sidemenu.qdoc

@@ -185,7 +185,8 @@
     apply when the animation finishes. In the lower part of the
     dialog, we bind the states that don't have animations to fixed frames.
 
-    For more information about using the timeline, see \l {Creating Animations}.
+    For more information about using the timeline, see
+    \l {Creating Timeline Animations}.
 
     \section1 Connecting the Burger Menu to Actions
 

doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc

@@ -48,8 +48,9 @@
     Users select buttons to navigate between the screens.
     We use \l{Connecting Components to Signals}{connections} to determine which
     screen to open when users select a particular button and \l{Adding States}
-    {states} to show the screens. We use the \l{Creating Animations}{timeline}
-    to create progress indicators for buttons and the \e Running screen.
+    {states} to show the screens. We use the \l{Creating Timeline Animations}
+    {timeline} to create progress indicators for buttons and the \e Running
+    screen.
 
     In addition, all screens contain a small clock component that displays
     the current time. We implement a \e TimeDate JavaScript object to

doc/qtdesignstudio/examples/doc/webinardemo.qdoc

@@ -191,5 +191,6 @@
 
     \image webinardemo-timeline.png "Popup animations in the Timeline view"
 
-    For more information about using the timeline, see \l {Creating Animations}.
+    For more information about using the timeline, see
+    \l {Creating Timeline Animations}.
 */

doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc

@@ -94,7 +94,7 @@
     Yes, you can create custom components and controls by using wizard templates
     or move component instances into separate files to turn them into new
     components that you can create instances of. For more information, see
-    \l {Creating Components}.
+    \l {Components}.
 
     \section2 What are the 3D import formats for \QDS?
 

doc/qtdesignstudio/src/qtdesignstudio-packaging.qdoc

@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 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.
+**
+****************************************************************************/
+
+/*!
+    \page studio-packaging.html
+    \previouspage creator-crashpad.html
+    \nextpage creator-vcs-git.html
+
+    \title Packaging Applications
+
+    When you are ready to deliver your application to users or upload it to
+    app stores, you can use \QDS to create suitable packages that contain all
+    the necessary files, such as fonts, images, components, and modules.
+
+    \section1 Adding Resources to Packages
+
+    \QDS supports the \e{Qt Resource System} (QRC), which is a
+    platform-independent mechanism for storing files in the application's
+    executable. This is useful if your application always needs a certain
+    set of files (icons, translation files, and so on) and you don't want
+    to run the risk of losing the files.
+
+    To package your application, select \uicontrol Build >
+    \uicontrol {Generate QRC Resource File}. Then select the
+    files to package in the \uicontrol {Add Resources} dialog.
+
+    \image studio-add-resources.png "Add Resources dialog"
+
+    The dialog displays all the files listed in the project file (.qmlproject)
+    and located in the project folder. Files that are listed in the project
+    file are marked with bold text in the UI, to make it easy to identify the
+    differences between the project file and the resource collection file.
+
+    When you select \uicontrol OK, \QDS creates a resource collection file
+    (.qrc) in the project folder.
+
+    If you remove files from the project that you already added to the
+    resource collection file, you can recreate the resource collection
+    file to remove them also from there.
+
+    \section1 Embedding Resources into Applications
+
+    Alternatively, you can embedd the resources into your application by
+    selecting \uicontrol Build > \uicontrol {Generate RCC Resource File}.
+    Select the location for the .qmlrc file, and then select the files to
+    embedd in the \uicontrol {Add Resources} dialog.
+
+    When you select \uicontrol OK, \QDS creates a resource collection file
+    (.qmlrc) in the location you selected.
+*/

doc/qtdesignstudio/src/qtdesignstudio-platforms.qdoc

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Design Studio documentation.
@@ -58,7 +58,8 @@
     \QB is available for the following design tools:
 
     \list
-        \li Adobe Photoshop version 20.0.0
-        \li Sketch 55.1
+        \li Adobe Photoshop version 22.3.1
+        \li Figma version 97.x
+        \li Sketch version 72.2
     \endlist
 */

doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc

@@ -34,18 +34,28 @@
 
     \list
         \li \l{glossary-asset}{Asset}
+        \li \l{glossary-binding}{Binding}
         \li \l{glossary-component}{Component}
+        \li \l{glossary-connection}{Connection}
         \li \l{glossary-device}{Device}
-        \li \l{glossary-Project}{Project}
+        \li \l{glossary-mode}{Mode}
+        \li \l{glossary-project}{Project}
+        \li \l{glossary-property}{Property}
+        \li \l{glossary-signal}{Signal}
+        \li \l{glossary-state}{State}
+        \li \l{glossary-transition}{Transition}
     \endlist
 
     \section1 Asset
     \target glossary-asset
 
     An \e asset is an image, font file, 3D model, or other supported file that
-    you add to your \e project.
+    you add to your \l{glossary-project}{project}.
 
-    Assets are packaged with \e components for delivery to users.
+    \image qtquick-assets-tab.png "Assets in Library"
+
+    Assets are packaged with \l{glossary-component}{components} for delivery
+    to users.
 
     Read more about assets:
 
@@ -53,6 +63,34 @@
         \li \l{Assets}
     \endlist
 
+    \section1 Binding
+    \target glossary-binding
+
+    A \e binding is a declarative way of specifying the value of a
+    \l{glossary-property}{property}. Binding allows a property value
+    to be expressed as a JavaScript expression that defines the value
+    relative to other property values or data accessible in the
+    application. The property value is automatically updated if the
+    other properties or data values change.
+
+    At its simplest, a binding may be a reference to another property. For
+    example, the height of a \l{glossary-component}{component} can be bound
+    to the height of its parent, so that when the parent height changes, the
+    component height is adjusted automatically. Similarly, the opacity of a
+    component can be bound to the opacity of its parent component.
+
+    \image qtquick-connection-editor-assignment.png "Binding Editor"
+
+    Property bindings are created implicitly whenever a property is assigned a
+    JavaScript expression.
+
+    Read more about bindings:
+
+    \list
+        \li \l{Adding Bindings Between Properties}
+        \li \l{Setting Bindings}
+    \endlist
+
     \section1 Component
     \target glossary-component
 
@@ -62,14 +100,17 @@
     creating instances of them. These are similar to \e Symbols in Sketch or
     \e Prefab in Unity.
 
+    \image qtquick-components-tab.png "Preset components in Library"
+
     Some of the \l {Component Types}{preset components} represent simple shapes,
     text, or images, while others represent complex UI controls with full
     functionality, such as spin boxes or sliders. You can also add instances of
-    preset \l {Using 3D Components}{3D components} to your UIs. You can find all
+    preset \l {3D Components}{3D components} to your UIs. You can find all
     the preset components in \l Library.
 
     To build \l {Creating Component Instances}{your own components}, you can
-    modify the \e properties of the component instances and combine them.
+    modify the \l{glossary-property}{properties} of the component instances
+    and combine them.
 
     A component is specified within one file (with the file extension
     \e ui.qml or \e .qml). For example, a Button component may be defined
@@ -87,6 +128,24 @@
         \li \l {Creating Custom Components}
     \endlist
 
+    \section1 Connection
+    \target glossary-connection
+
+    A \e connection can be created between a \l{glossary-component}{component}
+    and \l{glossary-signal}{signal} to determine how the UI should react to
+    application events. Another way to create connections between components
+    is to create \l{glossary-binding}{bindings} between the values of their
+    \l{glossary-property}{properties}.
+
+    \image qmldesigner-connections.png "Connection View"
+
+    Read more about connections:
+
+    \list
+        \li \l{Connection View}
+        \li \l{Adding Connections}
+    \endlist
+
     \section1 Device
     \target glossary-device
 
@@ -98,24 +157,138 @@
         \li \l{Previewing on Devices}
     \endlist
 
+    \section1 Mode
+    \target glossary-mode
+
+    A \e mode adapts the \QDS UI to the different UI design
+    tasks at hand. Each mode has its own view that shows only the information
+    required for performing a particular task, and provides only the most
+    relevant features and functions related to it. As a result, the majority
+    of the \QDS window area is always dedicated to the actual task.
+
+    For a designer, the most important modes are \uicontrol Design for the
+    actual work, \uicontrol Welcome for opening examples and tutorials, and
+    \uicontrol Help for reading documentation. The other modes are mostly
+    needed for application development.
+
+    \image studio-design-mode.png "Design mode"
+
+    Read more about modes:
+
+    \list
+        \li \l{Selecting Modes}
+        \li \l{Design Views}
+    \endlist
+
     \section1 Project
     \target glossary-project
 
-    A project is a container for the \e components and \e assets that you
-    use in your UI. You can \e package the UI and preview or run it on
-    different operating systems on the desktop or a \l{glossary-device}{device}.
+    A project is a container for the \l{glossary-component}{components} and
+    \l{glossary-asset}{assets} that you use in your UI. You can \e package
+    the UI and preview or run it on different operating systems on the desktop
+    or a \l{glossary-device}{device}.
 
     You use templates to create different types of projects according to your
     needs. The templates add preset components to the project by default. For
     example, if you create a 3D project, preset 3D components are added to it.
     You can add more preset components in \uicontrol Library.
 
+    \image studio-project-wizards.png "New File or Project dialog"
+
     Read more about projects:
 
     \list
         \li \l{Creating Projects}
     \endlist
 
+    \section1 Property
+    \target glossary-property
+
+    A \e property is an attribute of a \l{glossary-component}{component}
+    that can be assigned a static value or bound to a dynamic expression.
+    A property's value can be read by other components. Generally, it can
+    also be modified by another component, unless a particular component
+    type has explicitly disallowed this for a specific property.
+
+    \image qtquick-item-properties-common.png "Properties view"
+
+    Read more about properties:
+
+    \list
+        \li \l{Properties}
+        \li \l{Preset Components}
+        \li \l{Specifying Component Properties}
+        \li \l{Adding Bindings Between Properties}
+        \li \l{Specifying Dynamic Properties}
+    \endlist
+
+    \section1 Signal
+    \target glossary-signal
+
+    A \e signal represents an application event, such as a user clicking a
+    button or the value of a \l{glossary-property}{property} of a
+    \l{glossary-component}{component} changing. The application needs this
+    information to perform actions or to relay it to other applications.
+
+    Components have predefined signals that are emitted when users interact with
+    the application. For example, the \l {Mouse Area} component has a \c clicked
+    signal that is emitted whenever the mouse is clicked within the area. Since
+    the signal name is \c clicked, the signal handler for receiving this signal
+    is named \c onClicked.
+
+    \image washingmachineui-connections.png "Connection View, Connections tab"
+
+    Further, a signal is automatically emitted when the value of a
+    \l{glossary-property}{property} changes.
+
+    Read more about signals:
+
+    \list
+        \li \l{Connecting Components to Signals}
+        \li \l{Mouse Area}
+    \endlist
+
+    \section1 State
+    \target glossary-state
+
+    The \e state of a particular visual \l{glossary-component}{component} is
+    the set of information that describes how and where the individual parts
+    of the component are displayed within it, and all the data associated with
+    that state. Most visual components in a UI will have a limited number of
+    states, each with well-defined \l{glossary-property}{properties}.
+
+    For example, an element in a list may be either selected or not, and if
+    selected, it may either be the currently active single selection or it may
+    be part of a selection group. Each of those states may have certain
+    associated visual appearance (neutral highlighted, expanded, and so forth).
+
+    Similarly, the appearance of a button can change to indicate a \e pressed
+    state.
+
+    \image studio-custom-button.gif "Button states"
+
+    Read more about states:
+
+    \list
+        \li \l{States}
+        \li \l{Adding States}
+    \endlist
+
+    \section1 Transition
+    \target glossary-transition
+
+    When a visual \l{glossary-component}{component} transitions from one
+    \l{glossary-state}{state} to another, its appearance changes. A
+    \e transition is an \e edge between two states. It may trigger other
+    events to occur, as other parts of the application may have behavior
+    that is triggered when a certain state is entered or left.
+
+    Read more about transitions:
+
+    \list
+        \li \l{Transition Editor}
+        \li \l{Animating Transitions Between States}
+    \endlist
     \omit
 
     ## The following terms might or might not come back, but for now, the
@@ -135,15 +308,6 @@
     Each kit consists of a set of values that define one environment, such as a
     \l{glossary-device} {device} to preview the UI on.
 
-    \section1 Mode
-    \target glossary-mode
-
-    Adapts the \QDS UI to the different UI design
-    tasks at hand. Each mode has its own view that shows only the information
-    required for performing a particular task, and provides only the most
-    relevant features and functions related to it. As a result, the majority
-    of the \QDS window area is always dedicated to the actual task.
-
    \section1 Run Configuration
     \target glossary-run-config
 

doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc

@@ -179,17 +179,16 @@
         \li \l{Motion Design}
             \list
                 \li \l{Introduction to Animation Techniques}
-                \li \l{Creating Animations}
+                \li \l{Creating Timeline Animations}
                 \li \l{Editing Easing Curves}
-                \li \l{Production Quality} (NEW)
+                \li \l{Production Quality}
+                \li \l{Optimizing Designs}
                     \list
-                        \li \l{Detailed Motion Design} (NEW)
+                        \li \l{Creating Optimized 3D Scenes}
                     \endlist
-                \li \l{Optimizing for Target Hardware} (NEW)
             \endlist
         \li \l{Implementing Applications} (NEW)
             \list
-                \li\l{Creating Optimized 3D Scenes}
                 \li Using Flows in Production (NEW)
                 \li \l{Coding}{Cross-Platform Development} (NEW)
                     \list
@@ -243,6 +242,7 @@
                         \li \l {Collecting User Feedback}
                         \li \l {Reporting Crashes}
                     \endlist
+                \li {Packaging Applications}
             \endlist
         \li \l{Developer Topics} (NEW)
             \list

doc/qtdesignstudio/src/qtdesignstudio.qdoc

@@ -74,11 +74,10 @@
         \li \b {\l{Motion Design}}
             \list
                 \li \l{Introduction to Animation Techniques}
-                \li \l{Creating Animations}
+                \li \l{Creating Timeline Animations}
                 \li \l{Editing Easing Curves}
-                \li \l{Production Quality} (NEW)
-                \li \l{Importing from Content Creation Tools}
-                \li \l{Optimizing for Target Hardware} (NEW)
+                \li \l{Production Quality}
+                \li \l{Optimizing Designs}
             \endlist
         \row
             \li \inlineimage front-preview.png
@@ -101,6 +100,7 @@
             \endlist
         \li \b {\l{Developer Topics}} (NEW)
             \list
+                \li \l{Packaging Applications}
                 \li \l{Using Git}
                 \li \l{Converting UI Projects to Applications}
                 \li \l{Using External Tools}

doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-qt3ds.qdoc

@@ -243,7 +243,7 @@
 
     \li Recreate animations in subpresentation_ADAS according to the original
         project. For more information on creating animations in \QDS, see
-        \l {Creating Animations}.
+        \l {Creating Timeline Animations}.
         \image exporting-from-qt3ds/24-recreate-animations.png "Recreate animations"
 
     \li Go to the \uicontrol Timeline View to review the timeline for the

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc

@@ -43,7 +43,7 @@
     tools, you also import a \l{Cameras}{scene camera},
     \l{Lights}{light}, \l{3D Models}{model}, and
     \l {Materials and Shaders}{materials}. If your scene did not contain
-    them, you can add the corresponding \l {Using 3D Components}{Qt Quick 3D}
+    them, you can add the corresponding \l {3D Components}{Qt Quick 3D}
     components from \l Library > \uicontrol Components > \inlineimage plus.png
     > \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}.
 
@@ -55,7 +55,10 @@
     \uicontrol Properties to transform the component around a point other than
     its local origin. A line is drawn in \uicontrol {3D Editor} from the pivot
     point to the center of the component to provide a visual connection between
-    them.
+    them. Especially when working with complex scenes, it may be useful to use
+    the \l {Showing and Hiding Components}{showing and hiding} or the
+    \l {Locking Components}{locking} features in \l Navigator to avoid
+    transforming components by mistake while editing your scene.
 
     Toggle between local and global orientation to determine whether the gizmos
     affect only the local transformations of the component or whether they
@@ -170,6 +173,12 @@
 
     To toggle the selection mode, press \key Q.
 
+    To multiselect, hold \key Ctrl and click the components you wish to select.
+
+    After selecting a component, you can apply the usual \l {Keyboard Shortcuts}
+    {keyboard shortcuts} applicable to your operating system, for example,
+    \key Ctrl+C and \key Ctrl+V on Windows to copy-paste components.
+
     \section1 Moving Components
 
     \image studio-3d-editor-move.png "3D Editor in move mode"

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc

@@ -73,7 +73,7 @@
     by any other colors specified for the material.
 
     You can animate material properties in the \uicontrol Timeline view, as
-    instructed in \l {Creating Animations}.
+    instructed in \l {Creating Timeline Animations}.
 
     \section1 Blending Colors
 

share/qtcreator/qml/qmlpuppet/editor3d_qt5.qrc

@@ -0,0 +1,55 @@
+<RCC>
+    <qresource prefix="/qtquickplugin">
+        <file>mockfiles/meshes/arrow.mesh</file>
+        <file>mockfiles/meshes/scalerod.mesh</file>
+        <file>mockfiles/meshes/ring.mesh</file>
+        <file>mockfiles/meshes/ringselect.mesh</file>
+        <file>mockfiles/meshes/axishelper.mesh</file>
+        <file>mockfiles/images/editor_camera.png</file>
+        <file>mockfiles/images/editor_camera@2x.png</file>
+        <file>mockfiles/images/area.png</file>
+        <file>mockfiles/images/area@2x.png</file>
+        <file>mockfiles/images/directional.png</file>
+        <file>mockfiles/images/directional@2x.png</file>
+        <file>mockfiles/images/point.png</file>
+        <file>mockfiles/images/point@2x.png</file>
+        <file>mockfiles/images/spot.png</file>
+        <file>mockfiles/images/spot@2x.png</file>
+        <file>mockfiles/qt5/AdjustableArrow.qml</file>
+        <file>mockfiles/qt5/AreaLightHandle.qml</file>
+        <file>mockfiles/qt5/Arrow.qml</file>
+        <file>mockfiles/qt5/AutoScaleHelper.qml</file>
+        <file>mockfiles/qt5/AxisHelper.qml</file>
+        <file>mockfiles/qt5/AxisHelperArm.qml</file>
+        <file>mockfiles/qt5/CameraFrustum.qml</file>
+        <file>mockfiles/qt5/CameraGizmo.qml</file>
+        <file>mockfiles/qt5/DirectionalDraggable.qml</file>
+        <file>mockfiles/qt5/EditCameraController.qml</file>
+        <file>mockfiles/qt5/EditView3D.qml</file>
+        <file>mockfiles/qt5/FadeHandle.qml</file>
+        <file>mockfiles/qt5/HelperGrid.qml</file>
+        <file>mockfiles/qt5/IconGizmo.qml</file>
+        <file>mockfiles/qt5/IconRenderer3D.qml</file>
+        <file>mockfiles/qt5/LightGizmo.qml</file>
+        <file>mockfiles/qt5/LightIconGizmo.qml</file>
+        <file>mockfiles/qt5/LightModel.qml</file>
+        <file>mockfiles/qt5/Line3D.qml</file>
+        <file>mockfiles/qt5/MaterialNodeView.qml</file>
+        <file>mockfiles/qt5/ModelNode2DImageView.qml</file>
+        <file>mockfiles/qt5/ModelNode3DImageView.qml</file>
+        <file>mockfiles/qt5/ModelNodeView.qml</file>
+        <file>mockfiles/qt5/MoveGizmo.qml</file>
+        <file>mockfiles/qt5/NodeNodeView.qml</file>
+        <file>mockfiles/qt5/Overlay2D.qml</file>
+        <file>mockfiles/qt5/PlanarDraggable.qml</file>
+        <file>mockfiles/qt5/PlanarMoveHandle.qml</file>
+        <file>mockfiles/qt5/PlanarScaleHandle.qml</file>
+        <file>mockfiles/qt5/RotateGizmo.qml</file>
+        <file>mockfiles/qt5/RotateRing.qml</file>
+        <file>mockfiles/qt5/ScaleGizmo.qml</file>
+        <file>mockfiles/qt5/ScaleRod.qml</file>
+        <file>mockfiles/qt5/SceneView3D.qml</file>
+        <file>mockfiles/qt5/SelectionBox.qml</file>
+        <file>mockfiles/qt5/SpotLightHandle.qml</file>
+    </qresource>
+</RCC>

share/qtcreator/qml/qmlpuppet/editor3d_qt6.qrc

@@ -0,0 +1,55 @@
+<RCC>
+    <qresource prefix="/qtquickplugin">
+        <file>mockfiles/meshes/arrow.mesh</file>
+        <file>mockfiles/meshes/scalerod.mesh</file>
+        <file>mockfiles/meshes/ring.mesh</file>
+        <file>mockfiles/meshes/ringselect.mesh</file>
+        <file>mockfiles/meshes/axishelper.mesh</file>
+        <file>mockfiles/images/editor_camera.png</file>
+        <file>mockfiles/images/editor_camera@2x.png</file>
+        <file>mockfiles/images/area.png</file>
+        <file>mockfiles/images/area@2x.png</file>
+        <file>mockfiles/images/directional.png</file>
+        <file>mockfiles/images/directional@2x.png</file>
+        <file>mockfiles/images/point.png</file>
+        <file>mockfiles/images/point@2x.png</file>
+        <file>mockfiles/images/spot.png</file>
+        <file>mockfiles/images/spot@2x.png</file>
+        <file>mockfiles/qt6/AdjustableArrow.qml</file>
+        <file>mockfiles/qt6/AreaLightHandle.qml</file>
+        <file>mockfiles/qt6/Arrow.qml</file>
+        <file>mockfiles/qt6/AutoScaleHelper.qml</file>
+        <file>mockfiles/qt6/AxisHelper.qml</file>
+        <file>mockfiles/qt6/AxisHelperArm.qml</file>
+        <file>mockfiles/qt6/CameraFrustum.qml</file>
+        <file>mockfiles/qt6/CameraGizmo.qml</file>
+        <file>mockfiles/qt6/DirectionalDraggable.qml</file>
+        <file>mockfiles/qt6/EditCameraController.qml</file>
+        <file>mockfiles/qt6/EditView3D.qml</file>
+        <file>mockfiles/qt6/FadeHandle.qml</file>
+        <file>mockfiles/qt6/HelperGrid.qml</file>
+        <file>mockfiles/qt6/IconGizmo.qml</file>
+        <file>mockfiles/qt6/IconRenderer3D.qml</file>
+        <file>mockfiles/qt6/LightGizmo.qml</file>
+        <file>mockfiles/qt6/LightIconGizmo.qml</file>
+        <file>mockfiles/qt6/LightModel.qml</file>
+        <file>mockfiles/qt6/Line3D.qml</file>
+        <file>mockfiles/qt6/MaterialNodeView.qml</file>
+        <file>mockfiles/qt6/ModelNode2DImageView.qml</file>
+        <file>mockfiles/qt6/ModelNode3DImageView.qml</file>
+        <file>mockfiles/qt6/ModelNodeView.qml</file>
+        <file>mockfiles/qt6/MoveGizmo.qml</file>
+        <file>mockfiles/qt6/NodeNodeView.qml</file>
+        <file>mockfiles/qt6/Overlay2D.qml</file>
+        <file>mockfiles/qt6/PlanarDraggable.qml</file>
+        <file>mockfiles/qt6/PlanarMoveHandle.qml</file>
+        <file>mockfiles/qt6/PlanarScaleHandle.qml</file>
+        <file>mockfiles/qt6/RotateGizmo.qml</file>
+        <file>mockfiles/qt6/RotateRing.qml</file>
+        <file>mockfiles/qt6/ScaleGizmo.qml</file>
+        <file>mockfiles/qt6/ScaleRod.qml</file>
+        <file>mockfiles/qt6/SceneView3D.qml</file>
+        <file>mockfiles/qt6/SelectionBox.qml</file>
+        <file>mockfiles/qt6/SpotLightHandle.qml</file>
+    </qresource>
+</RCC>

share/qtcreator/qml/qmlpuppet/mockfiles/qt5/Arrow.qml

@@ -28,7 +28,7 @@ import QtQuick3D 1.15
 
 DirectionalDraggable {
     id: arrow
-    source: "meshes/arrow.mesh"
+    source: "../meshes/arrow.mesh"
 
     signal positionCommit()
     signal positionMove()

share/qtcreator/qml/qmlpuppet/mockfiles/qt5/AxisHelperArm.qml

@@ -42,7 +42,7 @@ Node {
         property bool hovering: false
         property vector3d cameraRotation: armRoot.camRotPos
 
-        source: "meshes/axishelper.mesh"
+        source: "../meshes/axishelper.mesh"
         materials: DefaultMaterial {
             id: posMat
             diffuseColor: posModel.hovering ? armRoot.hoverColor : armRoot.color

share/qtcreator/qml/qmlpuppet/mockfiles/qt5/EditCameraController.qml

@@ -88,14 +88,21 @@ Item {
     }
 
 
-    function focusObject(targetObject, rotation, updateZoom, closeUp)
+    function focusObject(targetNodes, rotation, updateZoom, closeUp)
     {
         if (!camera)
             return;
 
+        // targetNodes could be a list of nodes or a single node
+        var nodes = [];
+        if (targetNodes instanceof Node)
+            nodes.push(targetNodes);
+        else
+            nodes = targetNodes
+
         camera.eulerRotation = rotation;
-        var newLookAtAndZoom = _generalHelper.focusObjectToCamera(
-                    camera, _defaultCameraLookAtDistance, targetObject, view3d, _zoomFactor,
+        var newLookAtAndZoom = _generalHelper.focusNodesToCamera(
+                    camera, _defaultCameraLookAtDistance, nodes, view3d, _zoomFactor,
                     updateZoom, closeUp);
         _lookAtPoint = newLookAtAndZoom.toVector3d();
         _zoomFactor = newLookAtAndZoom.w;

share/qtcreator/qml/qmlpuppet/mockfiles/qt5/EditView3D.qml

@@ -176,9 +176,16 @@ Item {
     function fitToView()
     {
         if (editView) {
-            var targetNode = selectionBoxes.length > 0
-                    ? selectionBoxes[0].model : null;
-            cameraControl.focusObject(targetNode, editView.camera.eulerRotation, true, false);
+            var boxModels = [];
+            if (selectedNodes.length > 1) {
+                for (var i = 0; i < selectedNodes.length; ++i) {
+                    if (selectionBoxes.length > i)
+                        boxModels.push(selectionBoxes[i].model)
+                }
+            } else if (selectedNodes.length > 0 && selectionBoxes.length > 0) {
+                boxModels.push(selectionBoxes[0].model);
+            }
+            cameraControl.focusObject(boxModels, editView.camera.eulerRotation, true, false);
         }
     }
 
@@ -857,7 +864,8 @@ Item {
             width: 100
             height: width
             editCameraCtrl: cameraControl
-            selectedNode : viewRoot.selectedNodes.length ? selectionBoxes[0].model : null
+            selectedNode: viewRoot.selectedNodes.length === 1 ? viewRoot.selectionBoxes[0].model
+                                                              : viewRoot.selectedNode
         }
 
         Text {

share/qtcreator/qml/qmlpuppet/mockfiles/qt5/RotateRing.qml

@@ -49,12 +49,12 @@ Model {
     signal rotateCommit()
     signal rotateChange()
 
-    source: "meshes/ring.mesh"
+    source: "../meshes/ring.mesh"
 
     Model {
         id: pickModel
         objectName: "PickModel for " + rotateRing.objectName
-        source: "meshes/ringselect.mesh"
+        source: "../meshes/ringselect.mesh"
         pickable: true
     }
 

share/qtcreator/qml/qmlpuppet/mockfiles/qt5/ScaleRod.qml

@@ -29,7 +29,7 @@ import MouseArea3D 1.0
 
 DirectionalDraggable {
     id: scaleRod
-    source: "meshes/scalerod.mesh"
+    source: "../meshes/scalerod.mesh"
 
     property vector3d axis