Merge remote-tracking branch 'origin/4.15'

Change-Id: I44dad4bbe9ed955d35c713485720a3f36a21874d

CMakeLists.txt

@@ -22,6 +22,8 @@ set(CMAKE_CXX_STANDARD 17)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 set(CMAKE_CXX_EXTENSIONS OFF)
 
+qtc_handle_sccache_support()
+
 option(WITH_TESTS "Build Tests" OFF)
 add_feature_info("Build tests" ${WITH_TESTS} "")
 option(WITH_DEBUG_CMAKE "Enabled CMake project debugging functionality (e.g. source file disk checking)" OFF)

cmake/QtCreatorAPI.cmake

@@ -40,6 +40,7 @@ option(BUILD_PLUGINS_BY_DEFAULT "Build plugins by default. This can be used to b
 option(BUILD_EXECUTABLES_BY_DEFAULT "Build executables by default. This can be used to build all executables by default, or none." ON)
 option(BUILD_LIBRARIES_BY_DEFAULT "Build libraries by default. This can be used to build all libraries by default, or none." ON)
 option(QTC_SEPARATE_DEBUG_INFO "Extract debug information from binary files." OFF)
+option(WITH_SCCACHE_SUPPORT "Enables support for building with SCCACHE and separate debug info with MSVC, which SCCACHE normally doesn't support." OFF)
 
 # If we provide a list of plugins, executables, libraries, then the BUILD_<type>_BY_DEFAULT will be set to OFF
 # and for every element we set BUILD_<type>_<elment> to ON

cmake/QtCreatorAPIInternal.cmake

@@ -103,6 +103,25 @@ set(__QTC_LIBRARIES "" CACHE INTERNAL "*** Internal ***")
 set(__QTC_EXECUTABLES "" CACHE INTERNAL "*** Internal ***")
 set(__QTC_TESTS "" CACHE INTERNAL "*** Internal ***")
 
+# handle SCCACHE hack
+# SCCACHE does not work with the /Zi option, which makes each compilation write debug info
+# into the same .pdb file - even with /FS, which usually makes this work in the first place.
+# Replace /Zi with /Z7, which leaves the debug info in the object files until link time.
+# This increases memory usage, disk space usage and linking time, so should only be
+# enabled if necessary.
+# Must be called after project(...).
+function(qtc_handle_sccache_support)
+  if (MSVC AND WITH_SCCACHE_SUPPORT)
+    foreach(config DEBUG RELWITHDEBINFO)
+      foreach(lang C CXX)
+        set(flags_var "CMAKE_${lang}_FLAGS_${config}")
+        string(REPLACE "/Zi" "/Z7" ${flags_var} "${${flags_var}}")
+        set(${flags_var} "${${flags_var}}" PARENT_SCOPE)
+      endforeach()
+    endforeach()
+  endif()
+endfunction()
+
 function(append_extra_translations target_name)
   if(NOT ARGN)
     return()

coin/instructions/common_environment.yaml

@@ -4,13 +4,16 @@ instructions:
     instructions:
       - type: EnvironmentVariable
         variableName: QTC_BUILD_TYPE
-        variableValue: "Release"
+        variableValue: "RelWithDebInfo"
       - type: EnvironmentVariable
         variableName: QTC_QT_BASE_URL
         variableValue: "http://ci-files02-hki-infra.intra.qt.io/packages/jenkins/archive/qt/6.1/6.1.0-beta3-released"
       - type: EnvironmentVariable
         variableName: QTC_QT_MODULES
         variableValue: "qt5compat qtbase qtdeclarative qtimageformats qtquick3d qtquickcontrols2 qtquicktimeline qtserialport qtshadertools qtsvg qttools qttranslations"
+      - type: EnvironmentVariable
+        variableName: LLVM_BASE_URL
+        variableValue: http://master.qt.io/development_releases/prebuilt/libclang/libclang-release_110-based
 
   - type: Group
     enable_if:
@@ -21,13 +24,6 @@ instructions:
       - type: EnvironmentVariable
         variableName: MAKEFLAGS
         variableValue: ""
-      - type: EnvironmentVariable
-        variableName: LLVM_INSTALL_DIR
-        variableValue: "{{.Env.LLVM_DYNAMIC_LIBS_100}}"
-        enable_if:
-          condition: property
-          property: target.arch
-          equals_value: X86_64
       - type: EnvironmentVariable
         variableName: LLVM_INSTALL_DIR
         variableValue: "{{.Env.LLVM_DYNAMIC_LIBS_100}}"
@@ -75,13 +71,3 @@ instructions:
       condition: property
       property: host.os
       equals_value: Linux
-
-  - type: Group
-    instructions:
-      - type: EnvironmentVariable
-        variableName: LLVM_INSTALL_DIR
-        variableValue: "{{.Env.LLVM_DYNAMIC_LIBS_100}}"
-        enable_if:
-          condition: property
-          property: host.os
-          in_values: [Linux, MacOS]

coin/instructions/make_instructions.yaml

@@ -13,7 +13,17 @@ instructions:
         maxTimeBetweenOutput: 360
         userMessageOnFailure: "Failed to extract elfutils package, check logs."
       - type: ExecuteCommand
-        command: "python {{.AgentWorkingDir}}/qt-creator/qt-creator/scripts/build.py --build-type {{.Env.QTC_BUILD_TYPE}} --src {{.AgentWorkingDir}}/qt-creator/qt-creator --build {{.AgentWorkingDir}}/qt-creator/qt-creator_build --qt-path {{.AgentWorkingDir}}/build/qt5_install_dir --elfutils-path {{.AgentWorkingDir}}/build/qt_temp/elfutils --add-config=-DCMAKE_C_COMPILER_LAUNCHER=sccache --add-config=-DCMAKE_CXX_COMPILER_LAUNCHER=sccache"
+        command: "curl --fail -L --retry 5 --retry-delay 5 -o {{.AgentWorkingDir}}/build/qt_temp/libclang.7z {{.Env.LLVM_BASE_URL}}-linux-Rhel7.6-gcc5.3-x86_64.7z"
+        maxTimeInSeconds: 3600
+        maxTimeBetweenOutput: 360
+        userMessageOnFailure: "Failed to download LLVM package, check logs."
+      - type: ExecuteCommand
+        command: "/usr/bin/7z x -y {{.AgentWorkingDir}}/build/qt_temp/libclang.7z -o{{.AgentWorkingDir}}/build/qt_temp/"
+        maxTimeInSeconds: 3600
+        maxTimeBetweenOutput: 360
+        userMessageOnFailure: "Failed to extract LLVM package, check logs."
+      - type: ExecuteCommand
+        command: "python {{.AgentWorkingDir}}/qt-creator/qt-creator/scripts/build.py --build-type {{.Env.QTC_BUILD_TYPE}} --src {{.AgentWorkingDir}}/qt-creator/qt-creator --build {{.AgentWorkingDir}}/qt-creator/qt-creator_build --qt-path {{.AgentWorkingDir}}/build/qt5_install_dir --elfutils-path {{.AgentWorkingDir}}/build/qt_temp/elfutils --llvm-path {{.AgentWorkingDir}}/build/qt_temp/libclang --add-config=-DCMAKE_C_COMPILER_LAUNCHER=sccache --add-config=-DCMAKE_CXX_COMPILER_LAUNCHER=sccache"
         maxTimeInSeconds: 36000
         maxTimeBetweenOutput: 3600
         userMessageOnFailure: "Failed to run build.py, check logs."
@@ -30,7 +40,17 @@ instructions:
   - type: Group
     instructions:
       - type: ExecuteCommand
-        command: "python {{.AgentWorkingDir}}/qt-creator/qt-creator/scripts/build.py --build-type {{.Env.QTC_BUILD_TYPE}} --src {{.AgentWorkingDir}}/qt-creator/qt-creator --build {{.AgentWorkingDir}}/qt-creator/qt-creator_build --qt-path {{.AgentWorkingDir}}/build/qt5_install_dir --keychain-unlock-script /Users/qt/unlock-keychain.sh --add-config=-DCMAKE_C_COMPILER_LAUNCHER=sccache --add-config=-DCMAKE_CXX_COMPILER_LAUNCHER=sccache"
+        command: "curl --fail -L --retry 5 --retry-delay 5 -o {{.AgentWorkingDir}}/build/qt_temp/libclang.7z {{.Env.LLVM_BASE_URL}}-mac.7z"
+        maxTimeInSeconds: 3600
+        maxTimeBetweenOutput: 360
+        userMessageOnFailure: "Failed to download LLVM package, check logs."
+      - type: ExecuteCommand
+        command: "/usr/local/bin/7z x -y {{.AgentWorkingDir}}/build/qt_temp/libclang.7z -o{{.AgentWorkingDir}}/build/qt_temp/"
+        maxTimeInSeconds: 3600
+        maxTimeBetweenOutput: 360
+        userMessageOnFailure: "Failed to extract LLVM package, check logs."
+      - type: ExecuteCommand
+        command: "python {{.AgentWorkingDir}}/qt-creator/qt-creator/scripts/build.py --build-type {{.Env.QTC_BUILD_TYPE}} --src {{.AgentWorkingDir}}/qt-creator/qt-creator --build {{.AgentWorkingDir}}/qt-creator/qt-creator_build --qt-path {{.AgentWorkingDir}}/build/qt5_install_dir --llvm-path {{.AgentWorkingDir}}/build/qt_temp/libclang --keychain-unlock-script /Users/qt/unlock-keychain.sh --add-config=-DCMAKE_C_COMPILER_LAUNCHER=sccache --add-config=-DCMAKE_CXX_COMPILER_LAUNCHER=sccache"
         maxTimeInSeconds: 36000
         maxTimeBetweenOutput: 3600
         userMessageOnFailure: "Failed to run build.py, check logs."
@@ -62,7 +82,17 @@ instructions:
         maxTimeBetweenOutput: 360
         userMessageOnFailure: "Failed to extract python package, check logs."
       - type: ExecuteCommand
-        command: "python -u {{.AgentWorkingDir}}\\qt-creator\\qt-creator\\scripts\\build.py --build-type {{.Env.QTC_BUILD_TYPE}} --src {{.AgentWorkingDir}}\\qt-creator\\qt-creator --build {{.AgentWorkingDir}}\\qt-creator\\qt-creator_build --qt-path {{.AgentWorkingDir}}/build/qt5_install_dir --python-path {{.AgentWorkingDir}}\\build\\qt_temp\\python --elfutils-path {{.AgentWorkingDir}}\\buid\\qt_temp\\elfutils --add-config=-DCMAKE_C_COMPILER_LAUNCHER=sccache --add-config=-DCMAKE_CXX_COMPILER_LAUNCHER=sccache"
+        command: "curl --fail -L --retry 5 --retry-delay 5 -o {{.AgentWorkingDir}}\\build\\qt_temp\\libclang.7z {{.Env.LLVM_BASE_URL}}-windows-vs2019_64.7z"
+        maxTimeInSeconds: 3600
+        maxTimeBetweenOutput: 360
+        userMessageOnFailure: "Failed to download LLVM package, check logs."
+      - type: ExecuteCommand
+        command: "C:\\Utils\\sevenzip\\7z.exe x -y {{.AgentWorkingDir}}\\build\\qt_temp\\libclang.7z -o{{.AgentWorkingDir}}\\build\\qt_temp\\"
+        maxTimeInSeconds: 3600
+        maxTimeBetweenOutput: 360
+        userMessageOnFailure: "Failed to extract LLVM package, check logs."
+      - type: ExecuteCommand
+        command: "python -u {{.AgentWorkingDir}}\\qt-creator\\qt-creator\\scripts\\build.py --build-type {{.Env.QTC_BUILD_TYPE}} --src {{.AgentWorkingDir}}\\qt-creator\\qt-creator --build {{.AgentWorkingDir}}\\qt-creator\\qt-creator_build --qt-path {{.AgentWorkingDir}}/build/qt5_install_dir --python-path {{.AgentWorkingDir}}\\build\\qt_temp\\python --elfutils-path {{.AgentWorkingDir}}\\buid\\qt_temp\\elfutils --llvm-path {{.AgentWorkingDir}}\\build\\qt_temp\\libclang --add-config=-DCMAKE_C_COMPILER_LAUNCHER=sccache --add-config=-DCMAKE_CXX_COMPILER_LAUNCHER=sccache --add-config=-DWITH_SCCACHE_SUPPORT=ON"
         maxTimeInSeconds: 36000
         maxTimeBetweenOutput: 3600
         userMessageOnFailure: "Failed to run build.py, check logs."

doc/qtcreator/images/extraimages/qtdesignstudio-extraimages.qdocconf

@@ -14,4 +14,5 @@
     images/pEETxSxYazg.jpg \
     images/V3Po15bNErw.jpg \
     images/bMXeeQw6BYs.jpg \
-    images/u3kZJjlk3CY.jpg
+    images/u3kZJjlk3CY.jpg \
+    images/Z3uPoe-4UAw.jpg

doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc

@@ -71,33 +71,31 @@
     We use \e {Bluebubble.svg} in this tutorial, but you can use any other
     image or component, instead.
 
-    To create the UI in the Design mode:
+    To create the UI in \l{Form Editor}:
 
     \list 1
 
-        \li Open the \e main.qml in the Design mode.
+        \li Open the \e main.qml in \uicontrol {Form Editor}.
 
-        \li In the \uicontrol Navigator, select \uicontrol Label and press
-            \key Delete to delete it.
-
-        \li In \uicontrol Library > \uicontrol Components >
+        \li In \l Library > \uicontrol Components >
             \uicontrol {Default Components} > \uicontrol Basic, select
             \uicontrol Rectangle and drag-and-drop it to \e Window
-            in \uicontrol Navigator.
+            in \l Navigator.
 
-        \li Select the rectangle in \uicontrol Navigator to edit its properties:
+        \li Select the rectangle instance in \uicontrol Navigator to edit its
+            properties in \l Properties:
 
             \image qtquick-mobile-app-tutorial-main-view.png "Rectangle in different views"
 
             \list a
 
-                \li In the \uicontrol Id field enter \e mainWindow, to be able
+                \li In the \uicontrol ID field enter \e mainWindow, to be able
                     to reference the rectangle from other places.
 
                 \li Select the \uicontrol Layout tab, and then click
                     the \inlineimage icons/anchor-fill.png
                     (\uicontrol {Fill to Parent}) button to anchor the rectangle
-                    to the item.
+                    to the window.
 
             \endlist
 
@@ -106,9 +104,12 @@
                     to locate Bluebubble.svg (or your own image) and add it to
                     the project folder.
                 \li Drag and drop the image from \uicontrol Assets to
-                    \e mainWindow in \uicontrol Navigator.
+                    \e mainWindow in \uicontrol Navigator. \QC creates an
+                    instance of an \l{Images}{Image} component for you
+                    with the path to the image file set as the value of
+                    the \uicontrol Source field in \uicontrol Properties.
 
-        \li In the \uicontrol Properties view, \uicontrol Id field, enter
+        \li In the \uicontrol Properties view, \uicontrol ID field, enter
             \e bubble to be able to reference the image from other places.
 
             \image qtquick-mobile-app-tutorial-image.png "Image file in different views"
@@ -120,15 +121,15 @@
     \endlist
 
     We want to modify the properties of the bubble in ways that are not
-    supported in the Design mode, and therefore we create a custom QML
-    type for it:
+    supported in \uicontrol {Form Editor}, and therefore we turn it into
+    a custom component:
 
     \list 1
 
         \li Right-click the image and select
             \uicontrol {Move Component into Separate File}.
 
-            \image qtcreator-move-component-into-separate-file.png
+            \image qtquick-mobile-app-tutorial-bubble-component.png
 
         \li In the \uicontrol {Component name} field, enter \e Bubble.
 
@@ -140,7 +141,7 @@
 
     \endlist
 
-    \QC creates a reference to the Bubble type in \e main.qml.
+    \QC creates an instance of the Bubble component in \e main.qml.
 
     To check your code, you can compare your \e main.qml and
     \e {Bubble.qml} with the corresponding example files.
@@ -154,19 +155,19 @@
     and height of the main window.
 
     \list 1
-        \li Open \e Bubble.qml in Design mode.
-        \li In \uicontrol {Connections View}, \uicontrol Properties tab,
-            select click the \inlineimage plus.png
-            button to add a custom property for the Bubble type.
+        \li Open \e Bubble.qml in \uicontrol {Form Editor}.
+        \li In \l {Connection View} > \uicontrol Properties,
+            select the \inlineimage plus.png
+            button to add a custom property for the Bubble component.
             \image qtquick-mobile-app-tutorial-custom-properties.png "Connection View Properties tab"
         \li Double-click the value in the \uicontrol Property column, and enter
             \e centerY as the name of the property.
         \li Double-click the value in the \uicontrol {Property Type} column,
-            and select \e real as the type of the property. You will specify
+            and select \e real as the component of the property. You will specify
             the property value later in \uicontrol Properties.
         \li Add two more properties of the same type with the names \e centerY
             and \e bubbleCenter.
-        \li Open \e main.qml in Design mode.
+        \li Open \e main.qml in \uicontrol {Form Editor}.
         \li Select \e bubble in \uicontrol Navigator to specify values for the
             custom properties in \uicontrol Properties.
         \li In the \uicontrol X field, select \inlineimage icons/action-icon.png
@@ -202,7 +203,7 @@
             \skipto QtSensors
             \printline QtSensors
 
-        \li Add the \l{Accelerometer} type with the necessary properties:
+        \li Add the \l{Accelerometer} component with the necessary properties:
 
             \skipto Accelerometer
             \printuntil radians_to_degrees
@@ -219,7 +220,7 @@
             \printuntil }
 
         \li Add the following JavaScript code for \c onReadingChanged signal of
-            Accelerometer type to make the bubble move when the Accelerometer
+            Accelerometer component to make the bubble move when the Accelerometer
             values change:
 
             \quotefromfile accelbubble/main.qml
@@ -250,7 +251,7 @@
     an AndroidManifest.xml that you can generate in \QC. For more information,
     see \l{Editing Manifest Files}.
 
-    On iOS, you can lock the device orientation in a Info.plist file that you
+    On iOS, you can lock the device orientation in an Info.plist file that you
     specify in the .pro file as the value of the QMAKE_INFO_PLIST variable.
 
     \section1 Adding Dependencies

doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc

@@ -48,13 +48,14 @@
     \include qtquick-tutorial-create-empty-project.qdocinc qtquick empty application
 
     \QC generates a component file, \e main.qml, and opens it in
-    \l {Text Editor}. The wizard template uses the \l Window component,
-    which does not support adding states. Because we want to use states in
-    this example, we first replace the Window component with a \l {basic-rectangle}
-    {Rectangle} component. We must also remove the line that sets the \c title
-    property, which the Rectangle component does not have. If you change the value of
-    the \uicontrol component property in the \l Properties view, \QC offers
-    to automatically remove the \c title property.
+    \l {Text Editor}. The wizard template uses an instance of the \l Window
+    control, which does not support adding states. Because we want to use states
+    in this example, we first replace the instance of the Window component with
+    an instance of the basic \l {basic-rectangle}{Rectangle} component. We must
+    also remove the line that sets the \c title property, which the Rectangle
+    component does not have. If you change the value of the \l Type property in
+    the \l Properties view, \QC offers to automatically remove the \c title
+    property.
 
     \section1 Creating the Main View
 
@@ -69,23 +70,26 @@
 
     \list 1
 
-        \li Select \uicontrol Rectangle in \l Navigator, and enter
-            \e page in the \uicontrol Id field in \uicontrol Properties.
+        \li Select the \uicontrol Rectangle instance in \l Navigator, and enter
+            \e page in the \uicontrol ID field in \l Properties.
 
         \li Select \l Library > \uicontrol Assets > \inlineimage plus.png
             to locate qt-logo.png (or your own image) and add it to the
             project folder.
 
         \li Drag and drop the image from \uicontrol Assets to \e page in
-            \uicontrol Navigator.
+            \uicontrol Navigator. \QC automatically generates an instance
+            of the \l{Images}{Image} component for you, with the image as
+            the source image.
 
             \image qmldesigner-tutorial-user-icon.png "Image properties"
 
-        \li In \uicontrol Properties, edit image properties:
+        \li In \uicontrol Properties, edit the properties of the Image
+            component instance:
 
         \list a
 
-            \li In the \uicontrol Id field, enter \e icon.
+            \li In the \uicontrol ID field, enter \e icon.
 
             \li In the \uicontrol Position field, set \uicontrol X to \e 10 and
                 \uicontrol Y to \e 20.
@@ -99,15 +103,16 @@
 
             \image qmldesigner-tutorial-topleftrect.png "Rectangle properties"
 
-        \li In \uicontrol Properties, edit rectangle properties:
+        \li In \uicontrol Properties, edit the properties of the Rectangle
+            component instance:
 
         \list a
 
-            \li In the \uicontrol Id field, enter \e topLeftRect.
+            \li In the \uicontrol ID field, enter \e topLeftRect.
 
-            \li In the \uicontrol Size field, set \uicontrol W to \e 55 and
-                \uicontrol H to \e 41, for the rectangle size to match the image
-                size.
+            \li In the \uicontrol Size field, set \uicontrol W and
+                \uicontrol H to \e 64, for the rectangle size to
+                match the image size.
 
             \li In the \uicontrol Color field, click the
                 \inlineimage icon_color_none.png
@@ -139,16 +144,16 @@
             (\uicontrol {Fill to Parent}) button to anchor the mouse area to the
             rectangle.
 
-        \li In the \uicontrol Navigator, copy topLeftRect (by pressing
+        \li In the \uicontrol Navigator, copy \e topLeftRect (by pressing
             \key {Ctrl+C}) and paste it to \e page in \uicontrol Navigator
             twice (by pressing \key {Ctrl+V}). \QC renames the new instances
-            of the component topLeftRect1 and topLeftRect2.
+            of the component \e topLeftRect1 and \e topLeftRect2.
 
-        \li  Select topLeftRect1 and edit its properties:
+        \li  Select \e topLeftRect1 and edit its properties:
 
         \list a
 
-            \li In the \uicontrol Id field, enter \e middleRightRect.
+            \li In the \uicontrol ID field, enter \e middleRightRect.
 
             \li In \uicontrol {Layout}, select the
                 \inlineimage icons/anchor-center-vertical.png
@@ -162,11 +167,11 @@
 
         \endlist
 
-        \li Select topLeftRect2 and edit its properties:
+        \li Select \e topLeftRect2 and edit its properties:
 
         \list a
 
-            \li In the \uicontrol Id field, enter \e bottomLeftRect.
+            \li In the \uicontrol ID field, enter \e bottomLeftRect.
 
             \li In \uicontrol {Layout}, select the
                 \inlineimage icons/anchor-bottom.png
@@ -229,7 +234,8 @@
             \image qmldesigner-tutorial-states.png "States view"
         \li Select \e State3 in \uicontrol States, and drag \e icon on top of
             the bottom left rectangle in \uicontrol {Form Editor}.
-        \li In the \uicontrol Connections view, click the \inlineimage plus.png
+        \li In \l {Connection View} > \uicontrol Connections, click the
+            \inlineimage plus.png
             button to create a new connection.
             \image qmldesigner-tutorial-connections.png "Connections tab"
         \li Double-click the value in the \uicontrol Target column, and select

doc/qtcreator/src/qtquick/creator-only/qtquick-connection-editor-backend.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.
@@ -57,14 +57,14 @@
 
     \list 1
 
-        \li In the \uicontrol {Connections} view, select the
-            \uicontrol Backends tab to view accessible backend objects.
-            \image qmldesigner-backends.png
+        \li Select \uicontrol {Connection View} > \uicontrol Backends to view
+            accessible backend objects.
+            \image qmldesigner-backends.png "Connection View, Backends tab"
         \li Select the \inlineimage plus.png
             (\uicontrol Add) button to add a backend object in the
             \uicontrol {Add New C++ Backend} dialog.
-        \li In the \uicontrol Type field, select the type of the backend QObject
-            to add.
+            \image qmldesigner-backends-add.png "Add New C++ Backend dialog"
+        \li In the \uicontrol Type field, select the backend QObject to add.
         \li Select the \uicontrol {Define object locally} check box if the
             QObject is not registered as a singleton.
         \li Select \uicontrol OK to add the required import and to create the

doc/qtcreator/src/qtquick/creator-only/qtquick-states-scxml.qdocinc

@@ -29,9 +29,8 @@
     \section1 Using SCXML State Machines
 
     To use QML together with an SCXML state machine, add states and
-    bind them to the state machine in the \uicontrol Backends tab
-    of the \uicontrol Connections view, as
-    described in \l {Managing C++ Backend Objects}.
+    bind them to the state machine in \l {Connection View} >
+    \uicontrol Backends, as described in \l {Managing C++ Backend Objects}.
 
     In the \uicontrol States view, you can select \uicontrol Actions >
     \uicontrol {Set when Condition} to edit the \c when condition of states

doc/qtcreator/src/qtquick/creator-only/qtquick-tutorial-create-empty-project.qdocinc

@@ -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.
@@ -38,9 +38,11 @@
             \uicontrol {Project Location} dialog.
 
         \li In the \uicontrol Name field, enter a name for the application.
+            When naming your own projects, keep in mind that they cannot be
+            easily renamed later.
 
         \li In the \uicontrol {Create in} field, enter the path for the project
-            files.
+            files. You can move project folders later without problems.
 
         \li Select \uicontrol Next (or \uicontrol Continue on \macos) to open
             the \uicontrol {Define Build System} dialog.
@@ -52,8 +54,12 @@
         \li Select \uicontrol Next to open the
             \uicontrol {Define Project Details} dialog.
 
-        \li Select \uicontrol Next to use the default settings and to open
-            the \uicontrol {Translation File} dialog.
+        \li In the \uicontrol {Screen resolution} field, select the initial
+            size of the UI. You can easily change the screen size later
+            in \l Properties.
+
+        \li Select \uicontrol Next to open the \uicontrol {Translation File}
+            dialog.
 
         \li Select \uicontrol Next to use the default settings and to open
             the \uicontrol {Kit Selection} dialog.

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

@@ -83,17 +83,16 @@
 
     \list 1
         \li Drag-and-drop components from \uicontrol Library (1) to
-            \uicontrol Navigator (2), \uicontrol {Form Editor} (3), or
-            \l {3D Editor} (4). This creates instances of the components in the
-            current component file.
+            \l Navigator (2), \l {Form Editor} (3), or \l {3D Editor} (4).
+            This creates instances of the components in the current
+            component file.
         \li Select component instances in \uicontrol Navigator to edit the
             values of their properties in \uicontrol Properties.
             \image qmldesigner-properties-view.png "Properties view"
             For more information, see \l {Specifying Component Properties}.
         \li To change the appearance and behavior of the component instances
             in ways that are not supported in \QDS by default, you can define
-            custom properties in \uicontrol {Connection View} >
-            \uicontrol {Properties}.
+            custom properties in \l {Connection View} > \uicontrol {Properties}.
             \image qmldesigner-dynamicprops.png "Connection View Properties tab"
             For more information, see \l{Specifying Dynamic Properties}.
         \li To enable users to interact with the component instances, connect

doc/qtcreator/src/qtquick/qtquick-connection-editor-bindings.qdoc

@@ -53,7 +53,7 @@
 
     \list 1
         \li Select \uicontrol View > \uicontrol Views >
-             \uicontrol {Connection view} > \uicontrol {Bindings}.
+             \l {Connection View} > \uicontrol {Bindings}.
         \li Select the \inlineimage plus.png
             (\uicontrol Add) button to add a binding for the currently selected
             component. The component ID is displayed in the \uicontrol Item

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

@@ -50,7 +50,7 @@
     Similarly, you can add custom properties for your own components that are
     based on preset components.
 
-    You can add properties for components in \uicontrol {Connections View} >
+    You can add properties for components in \l {Connection View} >
     \uicontrol Properties.
 
     \image qmldesigner-dynamicprops.png "Custom properties in Connection View Custom Properties tab"
@@ -59,7 +59,7 @@
 
     \list 1
         \li Select \uicontrol View > \uicontrol Views >
-            \uicontrol {Connections View} > \uicontrol {Properties}.
+            \uicontrol {Connection View} > \uicontrol {Properties}.
         \li Select the \inlineimage plus.png
             (\uicontrol Add) button to add a dynamic property for the currently
             selected component. The component ID is displayed in the \uicontrol Item

doc/qtcreator/src/qtquick/qtquick-connection-editor-signals.qdoc

@@ -69,7 +69,7 @@
 
     \list 1
         \li Select \uicontrol View > \uicontrol Views >
-            \uicontrol {Connection View} > \uicontrol {Connections}.
+            \l {Connection View} > \uicontrol {Connections}.
         \li Select the \inlineimage plus.png
             (\uicontrol Add) button to add a connection.
         \li Double-click the value in the \uicontrol Target column to add the
@@ -104,9 +104,8 @@
     \uicontrol {Signal Handler} column, you can add it:
 
     \list 1
-        \li Right-click a component in the \uicontrol Navigator or
-            \uicontrol {Form Editor} view and select
-            \uicontrol {Add New Signal Handler} in the context menu.
+        \li Right-click a component in the \l Navigator or \l {Form Editor} view
+            and select \uicontrol {Add New Signal Handler} in the context menu.
         \li In the \uicontrol Signal field, select the signal to handle.
             \image qmldesigner-implement-signal-handler.png "Implement Signal Handler dialog"
         \li Select the radio buttons to filter the list to only display

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

@@ -30,11 +30,11 @@
 
     \title Connection View
 
-    The \uicontrol {Connection View} is a collection of views that enable you
+    \uicontrol {Connection View} is a collection of views that enable you
     to create connections between components and the application, to bind
     component properties together, and to add custom properties for components.
 
-    \image qmldesigner-connections.png "Connections View"
+    \image qmldesigner-connections.png "Connection View"
 
     The \l{glossary-component}{components} of the application UI and the
     application logic need to communicate with each other. For example, a

doc/qtcreator/src/qtquick/qtquick-form-editor.qdoc

@@ -30,20 +30,21 @@
 
     \title Form Editor
 
-    You design applications in the \uicontrol {Form Editor} view by placing
-    \l{Component Types}{2D components} and \l{Assets}{assets} into it.
+    You design applications in the \uicontrol {Form Editor} view by opening
+    component files and placing instances of \l{Component Types}{2D components}
+    and \l{Assets}{assets} into them.
 
     \image qmldesigner-form-editor.png "Form Editor view"
 
-    When you select components in \uicontrol {Form Editor}, markers appear
-    around their edges and in their corners. Depending on the shape of the
-    cursor, you can apply the following actions on the components by dragging
-    them:
+    When you select component instances in \uicontrol {Form Editor}, markers
+    appear around their edges and in their corners. Depending on the shape of
+    the cursor, you can apply the following actions to the component instances
+    by dragging them:
 
     \list
-        \li \l{Moving Components}{Move components}
-        \li \l{Resizing 2D Components}{Resize components}
-        \li \l{Rotating 2D Components}{Rotate components}
+        \li \l{Moving Components}{Move}
+        \li \l{Resizing 2D Components}{Resize}
+        \li \l{Rotating 2D Components}{Rotate}
     \endlist
 
     \section1 Summary of Form Editor Buttons
@@ -62,16 +63,17 @@
         \li \l{Snapping to Parent and Sibling Components}
     \row
         \li \inlineimage snapping_and_anchoring.png
-        \li Anchors the component to the components that it is snapped to.
+        \li Anchors the component instance to the component instances that it
+            is snapped to.
         \li \l{Snapping to Parent and Sibling Components}
     \row
         \li \inlineimage snapping.png
-        \li Snaps components to their parent or sibling components when you
+        \li Snaps component instances to their parent or siblings when you
             align them.
         \li \l{Snapping to Parent and Sibling Components}
     \row
         \li \inlineimage boundingrect.png
-        \li Hides and shows component boundaries.
+        \li Hides and shows component instance boundaries.
         \li \l{Hiding Component Boundaries}
     \row
         \li \uicontrol {Override Width}
@@ -113,49 +115,48 @@
 
     \section1 Moving Components
 
-    When the move cursor is displayed, you can move the selected component to
-    any position in \uicontrol {Form Editor}.
+    When the move cursor is displayed, you can move the selected component
+    instance to any position in \uicontrol {Form Editor}.
 
     \image qmldesigner-form-editor-move-cursor.png "Move cursor in Form Editor view"
 
-    For more information about alternative ways of positioning components in
-    UIs, see \l{Positioning Components}.
+    For more information about alternative ways of positioning component
+    instances in UIs, see \l{Positioning Components}.
 
     \section1 Resizing 2D Components
 
     When the resize cursor is displayed, you can drag the markers to resize
-    components.
+    component instances.
 
     \image qtquick-designer-scaling-items.png "Form Editor view"
 
-    To have the resizing done from the center of the selected component rather
-    than from its edges, press \key Alt (or the option key on \macos).
+    To have the resizing done from the center of the selected component instance
+    rather than from its edges, press \key Alt (or \key Opt on \macos).
 
     To preserve the image aspect ratio while resizing when using the corner
-    markers, press \key Shift. This also works on components that are anchored
-    using left, right, top, or bottom anchors.
+    markers, press \key Shift. This also works on component instances that
+    are anchored using left, right, top, or bottom anchors.
 
-    To both resize from the center of the component and preserve the aspect
-    ratio, press \key Alt+Shift (or the option key + \key Shift on \macos).
+    To both resize from the center of the component instance and preserve the
+    aspect ratio, press \key Alt+Shift (or \key {Opt+Shift} on \macos).
 
     For more information about alternative ways to specify the size of a
-    component in a UI, see \l{2D Geometry}.
+    component or component instance in a UI, see \l{2D Geometry}.
 
     \section1 Rotating 2D Components
 
     When the rotation cursor \inlineimage icons/rotation-cursor.png
-    is displayed in one of the corners of a component, you can drag
-    clockwise or counter-clockwise to freely rotate the component around
-    its origin.
+    is displayed in one of the corners of a component instance, you can drag
+    clockwise or counter-clockwise to freely rotate the component instance
+    around its origin.
 
     \image qtquick-designer-rotating-items.png "2D rotation tool"
 
-    Additionally, press \key Shift or \key Alt (or the option key on \macos)
-    to rotate components in steps of 5 or 45 degrees, respectively.
+    Additionally, press \key Shift or \key Alt (or \key Opt on \macos)
+    to rotate component instances in steps of 5 or 45 degrees, respectively.
 
-    You can set the \l{Managing 2D Transformations}{origin} in the
-    \uicontrol Origin field in the \uicontrol Advanced tab in the
-    \l Properties view. There, you can also enter the value
+    You can set the \l{Managing 2D Transformations}{origin} in \l Properties >
+    \uicontrol Advanced > \uicontrol Origin. There, you can also enter the value
     of the \uicontrol Rotation property in degrees.
 
     \section1 Zooming
@@ -163,27 +164,27 @@
     You can use the zoom buttons on the toolbar to zoom into and out of
     \uicontrol {Form Editor} or select the zoom level as a percentage
     from a list. More buttons are availabe for zooming to fit all content
-    in the view or zooming to fit the currently selected components.
+    in the view or zooming to fit the currently selected component instances.
 
     \image qmldesigner-zooming.gif "Zooming in Form Editor"
 
     \section1 Snapping to Parent and Sibling Components
 
-    You can use snapping to align components in \uicontrol {Form Editor}.
-    Click the \inlineimage snapping.png
-    button to have the components snap to their parent or sibling components.
-    Snapping lines automatically appear to help you position the components.
-    Click the \inlineimage snapping_and_anchoring.png
-    button to anchor the component to the components that you snap to.
+    You can use snapping to align component instances in
+    \uicontrol {Form Editor}. Select the \inlineimage snapping.png
+    button to have the component instances snap to their parent or siblings.
+    Snapping lines automatically appear to help you position the component
+    instances. Click the \inlineimage snapping_and_anchoring.png
+    button to anchor the selected component instance to those that you snap to.
     Only one snapping button can be selected at the time. Selecting
     one snapping button automatically deselects the others.
 
     Choose \uicontrol Tools > \uicontrol Options > \uicontrol {Qt Quick} >
     \uicontrol {Qt Quick Designer} to specify settings for snapping. In the
-    \uicontrol {Parent component padding} field, specify the
-    distance in pixels between the parent component and the snapping lines. In
-    the \uicontrol {Sibling component spacing} field, specify the distance in
-    pixels between sibling components and the snapping lines.
+    \uicontrol {Parent component padding} field, specify the distance in
+    pixels between the parent and the snapping lines. In the
+    \uicontrol {Sibling component spacing} field, specify the
+    distance in pixels between siblings and the snapping lines.
 
     \image qtquick-designer-options.png "Qt Quick Designer options"
 
@@ -192,12 +193,12 @@
 
     \image qmldesigner-snap-margins.png "Snapping lines on canvas"
 
-    For alternative ways of aligning and distributing components by using the
-    \l Properties view, see \l{Aligning and Distributing Components}.
+    For alternative ways of aligning and distributing component instances by
+    using the \l Properties view, see \l{Aligning and Distributing Components}.
 
     \section1 Hiding Component Boundaries
 
-    \uicontrol {Form Editor} displays the boundaries of components.
+    \uicontrol {Form Editor} displays the boundaries of component instances.
     To hide them, select the \inlineimage boundingrect.png
     button.
 
@@ -233,22 +234,24 @@
     \section1 Setting Canvas Color
 
     If you set the background of the root component transparent, the color of
-    the working area can make it difficult to see the component you are working
-    on. To make components more visible, you can select the canvas color in
-    the \inlineimage icons/canvas-color.png
+    the working area can make it difficult to see the component instance you
+    are working on. To make component instances more visible, you can select
+    the canvas color in the \inlineimage icons/canvas-color.png
     list. By default, the color is transparent. Setting the canvas color does
-    not affect the background color of your UI or components in any way.
+    not affect the background color of your root component or component
+    instances in any way.
 
-    \image qmldesigner-canvas-color.png "Transparent canvas color for a transparent component"
+    \image qmldesigner-canvas-color.png "Transparent canvas color for a transparent component instance"
 
     \section1 Refreshing Form Editor Contents
 
-    When you open a UI file, the components in the file are drawn in
-    \uicontrol {Form Editor}. When you edit component properties in
-    \l Properties, the code and its representation in \uicontrol {Form Editor}
-    might get out of sync. For example, when you change the position of a
-    component within a column or a row, the new position might not be displayed
-    correctly in \uicontrol {Form Editor}.
+    When you open a UI file, the component defined in the file and the component
+    instances it contains are drawn in \uicontrol {Form Editor}. When you
+    edit component instance properties in \l Properties, the code and its
+    representation in \uicontrol {Form Editor} might get out of sync. For
+    example, when you change the position of a component instance within a
+    column or a row, the new position might not be displayed correctly in
+    \uicontrol {Form Editor}.
 
     To refresh the contents of \uicontrol {Form Editor}, press \key R or
     select the \inlineimage reset.png

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

@@ -78,8 +78,8 @@
 
     When you \l{Creating Projects}{create projects}, modules typically needed in
     them are added by default. For example, an empty application project
-    contains only basic components, while a 3D application project contains
-    additional 3D components.
+    contains basic components and UI controls, while a 3D application project
+    contains additional 3D components.
 
     To view the list of available modules, select \inlineimage plus.png
     . Most commonly used modules are placed at the top of the list in
@@ -101,16 +101,16 @@
 
     \section1 Assets
 
-    \uicontrol {Assets} displays the images and other files that you add to
-    the project folder by selecting \inlineimage plus.png
+    \uicontrol Library > \uicontrol {Assets} displays the images and other files
+    that you add to the project folder by selecting \inlineimage plus.png
     .
 
     \image qtquick-assets-tab.png "Library view Assets tab"
 
-    When you drag and drop assets from the tab to \uicontrol Navigator
-    or \uicontrol {Form Editor}, components with a suitable type are
-    automatically created for you. For example, components of the
-    \l{Images}{Image} type will be created for graphics files.
+    When you drag-and-drop assets from \uicontrol Assets to \l Navigator
+    or \l {Form Editor}, component instances with a suitable type are
+    automatically created for you. For example, instances of the
+    \l{Images}{Image} component will be created for graphics files.
 
     \section1 Context Menu Commands
 

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

@@ -178,18 +178,18 @@
 
     \image qtquick-designer-navigator-arrange.gif "Reversing component order"
 
-    You can also drag and drop the component to another position in the tree or
+    You can also drag-and-drop the component to another position in the tree or
     use the arrow buttons to move the component in the tree. You can use the
     left and right arrow buttons to change the parent of the component.
 
     \image qmldesigner-navigator-arrows.png "Navigator buttons"
 
-    When you drag and drop instances of components to \uicontrol {Form Editor},
+    When you drag-and-drop instances of components to \uicontrol {Form Editor},
     the new component is added as a child of the component
     beneath it. When you move the components, it is not possible to determine
     whether you want to adjust their position or attach them to a new parent component.
     Therefore, the parent component is not automatically changed. To change the
-    parent of the component, press down the \key Shift key before you drag and drop
+    parent of the component, press down the \key Shift key before you drag-and-drop
     the component into a new position. The topmost component under the cursor becomes the
     new parent of the component.
 

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

@@ -83,8 +83,8 @@
     \inlineimage icons/action-icon-binding
     . To remove bindings, select \uicontrol Actions > \uicontrol Reset.
 
-    You can set bindings also in the \l Connections view. For more
-    information, see \l {Adding Bindings Between Properties}.
+    You can set bindings also in \l {Connection View} > \uicontrol Bindings.
+    For more information, see \l {Adding Bindings Between Properties}.
 
     For more information on the JavaScript environment provided, see
     \l{Integrating QML and JavaScript}.
@@ -142,9 +142,9 @@
     Rectangle {
         id: rectangle2
         anchors.left: rectangle1.right
-        anchors.leftMargin: 10
+        anchors.leftMargin: 78
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: 10
+        anchors.bottomMargin: 200
         //
     }
     \endqml
@@ -391,8 +391,9 @@
     (\uicontrol Previous) and \inlineimage next.png
     (\uicontrol Next) buttons.
 
-    To add a tab bar to a stack layout, select \uicontrol {Stacked Container} >
-    \uicontrol {Add Tab Bar}.
+    To add a tab bar to a stack layout, right-click on the
+    \uicontrol {Stack Layout} in \l Navigator to access the context menu, and
+    select \uicontrol {Stacked Container} > \uicontrol {Add Tab Bar}.
 
     To raise or lower the stacking order of a component, select
     \uicontrol {Stacked Container} > \uicontrol {Increase Index} or

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

@@ -43,8 +43,8 @@
 
     Sometimes you don't want linear movement but would rather like the rectangle
     to move faster at the beginning and slower at the end of the animation.
-    To achieve this effect, you could insert a lot keyframes between the start
-    frame and the end frame. To avoid this effort, you can use the
+    To achieve this effect, you could insert a lot of keyframes between the
+    start frame and the end frame. To avoid this effort, you can use the
     \l{Editing Easing Curves}{Easing Curve Editor} to specify \e {easing curves}
     for nonlinear interpolation between keyframes. The easing curves can make
     components appear to pick up speed, slow down, or bounce back at the end of
@@ -88,7 +88,9 @@
     \section1 Creating Timelines
 
     You specify settings for the timeline and for running the animation in the
-    \uicontrol {Timeline Settings} dialog.
+    \uicontrol {Timeline Settings} dialog. The \uicontrol Animation radio button
+    is selected for a timeline animation and the \uicontrol {Expression binding}
+    radio button for a \l{Setting Bindings}{property animation}.
 
     \image studio-timeline-settings.png "Timeline Settings dialog"
 
@@ -105,12 +107,6 @@
             timeline. Negative values are allowed.
         \li In the \uicontrol {End frame} field, set the last frame of the
             timeline.
-        \li To use bindings to specify the properties, select the
-            \uicontrol {Expression binding} radio button and enter the binding
-            in the \uicontrol {Expression binding} field. For more information
-            about property binding, see \l{Setting Bindings}.
-        \li To create a timeline animation, select the \uicontrol Animation
-            radio button.
         \li In the \uicontrol {Animation ID} field, enter an ID for the
             animation.
         \li Select the \uicontrol {Running in Base State} check box to run the

doc/qtcreator/src/user-interface/creator-views.qdoc

@@ -47,25 +47,28 @@
         \li \l{File System} shows all files in the currently selected
              directory.
         \li \l{Open Documents} shows currently open files.
-        \li \uicontrol Bookmarks shows all bookmarks for the current session.
-        \li \uicontrol {Git Branches} shows the local and remote brances for the
-            project in the Git version control system. For more information, see
-            \l{Working with Branches}.
-        \li \uicontrol Outline shows an overview of defined types and other
-            symbols, as well as their properties and hierarchy in a source file.
+        \li \l{Using Bookmarks}{Bookmarks} shows all bookmarks for the current
+            session.
+        \li \l{Working with Branches}{Git Branches} shows the local and remote
+            brances for the project in the Git version control system.
+        \li \l{Viewing Defined Types and Symbols}{Outline} shows an overview of
+            defined types and other symbols, as well as their properties and
+            hierarchy in a source file.
           \endlist
 
     \if defined(qtcreator)
     The following views display additional information about C++ code:
 
     \list
-        \li \uicontrol {Class View} shows the class hierarchy of the currently
-            open projects.
-        \li \uicontrol Tests lists autotests and Qt Quick tests in the project.
-            For more information, see \l {Running Autotests}.
-        \li \uicontrol {Type Hierarchy} shows the base classes of a class.
-        \li \uicontrol {Include Hierarchy} shows which files are included in
-            the current file and which files include the current file.
+        \li \l{Viewing the Class Hierarchy}{Class View} shows the class
+            hierarchy of the currently open projects.
+        \li \l{Running Autotests}{Tests} lists autotests and Qt Quick
+            tests in the project.
+        \li \l{Viewing Type Hierarchy}{Type Hierarchy} shows the base
+            classes of a class.
+        \li \l{Viewing Include Hierarchy}{Include Hierarchy} shows which
+            files are included in the current file and which files include
+            the current file.
     \endlist
     \endif
 

doc/qtdesignstudio/examples/doc/coffeemachine.qdoc

@@ -127,14 +127,14 @@
     We use the default values for all other fields.
 
     To start recording the transition from the startup screen to the coffee
-    selection screen on the timeline, we select \e choosingCoffee in the
-    \uicontrol Navigator. We check that the playhead is at frame 0, and then
+    selection screen on the timeline, we select \e choosingCoffee in
+    \l Navigator. We check that the playhead is at frame 0, and then
     select the \inlineimage recordfill.png
     (\uicontrol {Auto Key (K)}) button (or press \key k).
 
-    At frame 0, we set the X coordinate to 0 in \uicontrol Properties >
-    \uicontrol Geometry > \uicontrol Position. We then move the playhead
-    to 400 frames and set the X coordinate to a negative value.
+    At frame 0, we set the X coordinate to 0 in \l Properties > \uicontrol
+    Geometry > \uicontrol Position. We then move the playhead to 400 frames and
+    set the X coordinate to a negative value.
 
     \image coffee-machine-properties.png
 

doc/qtdesignstudio/examples/doc/ebikedesign.qdoc

@@ -60,13 +60,13 @@
 
     To start recording the transitions between the Standard screen and the
     Trip and Navigator screens on the timeline, we select \e screenCanvas in
-    the Design mode \uicontrol Navigator view. We check that the playhead is at
-    frame 0, and then select the \inlineimage recordfill.png
+    the \l Navigator view. We check that the playhead is at frame 0, and then
+    select the \inlineimage recordfill.png
     (\uicontrol {Auto Key (K)}) button (or press \key k).
 
     \image ebikedesign-timeline.png "Timeline view"
 
-    At frame 0, we set the X coordinate to 0 in \uicontrol Properties >
+    At frame 0, we set the X coordinate to 0 in \l Properties >
     \uicontrol Geometry > \uicontrol Position to display the Trip screen.
     We then move the playhead to frame 1000 and set the X coordinate to
     -1286 to display the Standard screen. We continue by moving the playhead

doc/qtdesignstudio/examples/doc/loginui1.qdoc

@@ -79,14 +79,15 @@
 
     \image loginui1-project.png "Log In UI project in the Design mode"
 
-    The UI is built using a \l{basic-rectangle}{Rectangle} component that forms
+    The wizard constructs the \e Screen01 \l{glossary-component}{component}
+    using instances of a \l{basic-rectangle}{Rectangle} component that forms
     the background and a \l Text component that displays some text.
 
     \note The visibility of views depends on the selected workspace,
     so your \QDS might look somewhat different from the above image.
     To open hidden views, select \uicontrol View > \uicontrol Views
-    in the Design mode. For more information about moving views around,
-    see \l {Managing Workspaces}.
+    in the \uicontrol Design mode. For more information about moving
+    views around, see \l {Managing Workspaces}.
 
     \section2 Learn More - Projects and Files
 
@@ -102,18 +103,17 @@
             files when you add them to the project.
         \li The \e {loginui1.qml} file defines the functionality of
             the UI. For the time being, it does not do anything.
-        \li The \e {Screen01.ui.qml} file defines the appearance of the
-            UI. For more information, see \l {UI Files}.
+        \li The \e {Screen01.ui.qml} file is a custom component created by
+            the wizard template. For more information, see \l {UI Files}.
         \li The \e {qtquickcontrols2.conf} file specifies the selected
             \l {Styling Qt Quick Controls}{UI style} and some style-specific
             arguments.
         \li The \e imports folder contains a \e {Constants.qml} file that
             specifies a font loader for the Arial font and a \e qmldir module
             definition file that declares the Constant component. For more
-            information, see \l {Module Definition qmldir Files}. In addition,
-            the \e QtQuick subfolder contains the Studio components and effects
-            components. You can ignore the subfolder for now, because it is not
-            used in this tutorial.
+            information, see \l {Module Definition qmldir Files}. The
+            \e EventListModel.qml and \e EventListSimulator.qml files are
+            not used in this example, so you can ignore them for now.
     \endlist
 
     UI files define a hierarchy of components with a highly-readable, structured
@@ -122,23 +122,21 @@
     UIs are provided in the QtQuick import. You can view the code of an
     .ui.qml file in the \l{Text Editor} view.
 
-    For more information about creating a component file from scratch, see
-    \l{First Steps with QML}.
-
-    Next, you will edit the values of the properties of the UI components to
-    create the main page of the UI.
+    Next, you will edit the values of the properties of the component instances
+    to create the main page of the UI.
 
     \section1 Creating the Main Page
 
     You will now change the values of the properties of the \l{basic-rectangle}
-    {Rectangle} component to add a gradient to the UI background and those of
-    the \l Text component to set the title text in a larger strong font. In
-    addition, you will import an image as an asset and add it to the page.
+    {Rectangle} component instance to add a gradient to the UI background and
+    those of the \l Text component instance to set the title text in a larger
+    strong font. In addition, you will import an image as an asset and add it
+    to the page.
 
     To add an image to your UI, you should first click
     \l {https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/qt_logo_green_64x64px.png}
     {here} to open the Qt logo in a browser and save it as a file on your
-    computer.  Next, you need to add the image to \l Library:
+    computer. Next, you need to add the image to \l Library:
     \list 1
         \li Select \uicontrol Library > \uicontrol Assets
             > \inlineimage plus.png
@@ -155,14 +153,14 @@
     view toolbar or press \key {Alt+P}.
 
     The \e Screen01.ui.qml file that the wizard template created for you should
-    be open in the Design mode. If it is not, you can double-click it in the
-    \uicontrol Projects view to open it.
+    be open in the \uicontrol Design mode. If it is not, you can double-click it
+    in the \uicontrol Projects view to open it.
 
-    To modify \e Screen01.ui.qml in \uicontrol {Form Editor}:
+    To modify the \e Screen01 component in \uicontrol {Form Editor}:
 
     \list 1
-       \li Select \e Rectangle in the \uicontrol Navigator view to display its
-            properties in the \uicontrol Properties view.
+        \li Select the \e Rectangle instance in the \l Navigator view to display
+            its properties in the \l Properties view.
         \li In the \uicontrol Color field, select the
             \inlineimage icon_color_gradient.png
             (\uicontrol {Linear Gradient}) button to add a linear gradient to
@@ -176,15 +174,16 @@
             \image loginui1-background-gradient.png "Rectangle color properties"
         \li Select \e Text in \uicontrol Navigator to display its properties in
             \uicontrol Properties.
-            \image loginui1-text-properties.png "Text properties"
             \list a
-                \li In the \uicontrol id field, enter the id \e pageTitle,
+                \li In the \uicontrol ID field, enter the ID \e pageTitle,
                     so that you can easily find the title component in
                     \uicontrol Navigator and other \QDS views.
+                    \image loginui1-text-properties.png "Text properties"
                 \li In the \uicontrol Text field, enter the page title:
                     \e {Qt Account}.
                 \li In the \uicontrol Font group, \uicontrol Size field,
                     set the font size of the title: \e 24 pixels.
+                    \image loginui1-text-font-properties.png "Font properties"
                 \li In the \uicontrol {Font style} field, select the
                     \uicontrol B button to use a strong font.
             \endlist
@@ -195,13 +194,13 @@
             component for you with the path to the image file set as the value of
             the \uicontrol Source field in \uicontrol Properties.
             \image loginui1-image-properties.png "Image properties"
-        \li In the \uicontrol id field, change the id of the image to \e logo.
+        \li In the \uicontrol ID field, change the ID of the image to \e logo.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
 
-    Your UI should now look something like this in the Design mode and live
-    preview:
+    Your UI should now look something like this in \uicontrol {Form Editor}
+    and live preview:
 
     \image loginui1-main-page.png "Modified UI in the Design mode"
 
@@ -217,7 +216,7 @@
 
     \quotefromfile loginui1/Screen01.ui.qml
     \skipto import
-    \printuntil loginui1 1.0
+    \printuntil Controls
 
     You can view the import statements in the \uicontrol {Text Editor} view.
 
@@ -292,11 +291,11 @@
     You can use another wizard template to create a push button and to add it to
     the project. The wizard template creates a reusable button component that
     appears in \uicontrol Library > \uicontrol Components >
-    \uicontrol {My Components}. You can drag-and-drop it to \l {Form Editor} and
-    modify its properties in the \uicontrol Properties view to change its
-    appearance and functionality.
+    \uicontrol {My Components}. You can drag-and-drop it to \l {Form Editor}
+    to create button instances and modify their properties in the
+    \uicontrol Properties view to change their appearance and functionality.
 
-    If you find that you cannot use the wizard template nor the ready-made
+    If you find that you cannot use the wizard template nor the preset
     button controls available in \uicontrol Library > \uicontrol Components >
     \uicontrol {Qt Quick Controls} to create the kind of push button that you
     want, you can create your button from scratch using default components. For
@@ -315,54 +314,43 @@
             the button.
     \endlist
 
-    Your button should now look something like this in the Design mode:
+    Your button should now look something like this in the \uicontrol Design
+    mode:
 
     \image loginui1-button.png "Button in the Design mode."
 
     \section2 Learn More - UI Controls
 
-    The \e {Custom Button} wizard template creates a \l {Button}
-    component that belongs to the \l {Qt Quick Controls} module. It is a
-    push-button control that can be pushed or clicked by the user. Buttons
-    are normally used to perform an action or to answer a question. The Button
-    component inherits properties and functionality from another component. These
-    enable you to set text, display an icon, react to mouse clicks, and so on.
+    The \e {Custom Button} wizard template creates a button component
+    based on the \l {Button} control in the \l {Qt Quick Controls} module. It
+    is a push-button control that can be pushed or clicked by the user. Buttons
+    are normally used to perform an action or to answer a question. The
+    properties and functionality inherited from the Button component enable
+    you to set text, display an icon, react to mouse clicks, and so on.
 
-    To be able to use the functionality of the Button component, the wizard template
+    To be able to use the functionality of the Button control, the wizard template
     adds the following \e import statements to the \e PushButton.ui.qml file:
 
     \quotefromfile loginui1/PushButton.ui.qml
     \skipto import
-    \printuntil loginui1
+    \printuntil Controls
 
-    The \l {Qt Quick Templates 2} module provides the functionality of the
-    Button component. The module is imported as \e T, and the alias is added to
-    the Button component definition to indicate that the Button component from the
-    \uicontrol {Qt Quick Controls} module is used, instead of some other
-    component with the same name.
-
-    \printuntil text
-    \dots
-    \skipto Rectangle {
-    \printuntil }
-    \dots
-
-    Next, you will change the appearance of the button by modifying its
-    properties.
+    Next, you will change the appearance of the PushButton component by
+    modifying its properties.
 
     \section1 Styling the Button
 
-    You can now modify the properties of the PushButton component to your liking. To
-    make the changes apply to all the button instances, you must make them in
-    the \e PushButton.ui.qml file.
+    You can now modify the properties of the PushButton component to your
+    liking. To make the changes apply to all the PushButton instances, you
+    must make them in the \e PushButton.ui.qml file.
 
     The Custom Button wizard template adds a \e normal state and a \e down state
     to change the button background and text color when the button is clicked.
     You will now change the colors in all states. When you make changes to the
     button in the \e base state, they are automatically applied to the other
     states. However, the property values that have been explicitly changed in
-    the \e down state are not changed automatically and you have to change them
-    separately in that state.
+    the \e normal or \e down state are not changed automatically and you have
+    to change them separately in that state.
 
     To change the button property values:
 
@@ -370,19 +358,20 @@
         \li Select the button background in \uicontrol Navigator to display its
             properties in \uicontrol Properties.
         \li In the \uicontrol Color field, select
+            \inlineimage icon_color_none.png
+            to use a solid background color (white) instead of transparent.
+        \li In the \uicontrol {Border Color} field, select
             \inlineimage icons/action-icon.png
-            (\uicontrol Actions) > \uicontrol Reset to reset the button
-            background color to the default color, white.
-        \li In the \uicontrol {Border Color} field, select \uicontrol Actions >
-            \uicontrol {Set Binding} to use the gradient color (\e #41cd52) as
-            the border color. You can also use the color picker to change the
-            color.
+            (\uicontrol Actions) > \uicontrol {Set Binding} to use the
+            gradient color (\e #41cd52) as the border color. You can also
+            use the color picker to change the color.
             \image loginui1-binding-editor.png "Binding Editor"
         \li Press \key Enter or select \uicontrol OK to save the new value.
         \li In the \uicontrol Radius field, enter 20 to give the button
             rounded corners.
-        \li In the \uicontrol States view, select the \e normal state and modify
-            the background color as above.
+        \li In the \uicontrol States view, select the \e normal state and set
+            the background color to white and the border color to green, as
+            instructed above. Repeat for the \e down state.
         \li Select the \e base state, and then select the text component
             in \uicontrol Navigator to display its properties in
             \uicontrol Properties.
@@ -419,13 +408,12 @@
 
     For more information, see \l {Property Binding}.
 
-    Next, you will use the \e PushButton component in the main UI file,
-    \e Screen01.ui.qml to add two instances of the button to the UI
-    and to modify their text labels.
+    Next, you will add two instances of the \e PushButton component to the
+    \e Screen01 component and modify their text labels.
 
     \section1 Adding Buttons to the UI
 
-    You will now add two button instances to the UI and modify their labels.
+    You will now add two PushButton instances to the UI and modify their labels.
 
     \list 1
         \li Double-click \e Screen01.ui.qml in \uicontrol Projects
@@ -434,41 +422,42 @@
             \uicontrol Library > \uicontrol Components > \uicontrol {My Components}
             to \uicontrol {Form Editor}.
             \image loginui1-library.png "My Components tab of Library view"
-        \li Select one of the buttons in \uicontrol Navigator to modify
-            its ID and text label in \uicontrol Properties.
-        \li In the \uicontrol Id field, enter \e loginButton.
+        \li Select one of the PushButton instances in \uicontrol Navigator
+            to modify its ID and text label in \uicontrol Properties.
+        \li In the \uicontrol ID field, enter \e loginButton.
         \li In the \uicontrol Text field, enter \e {Log In} and select
             \uicontrol tr to mark the text
             \l {Internationalization and Localization with Qt Quick}
             {translatable}.
-        \li Select the other button, and change its id to \e registerButton
-            and text label to \e {Create Account}. Again, mark the text
-            translatable.
-        \li When a component is selected, selection handles are displayed in its
-            corners and on its sides. Use the selection handles to resize the
-            buttons so that the text fits comfortably on the button background.
+        \li Select the other PushButton instance, and change its ID to
+            \e registerButton and text label to \e {Create Account}.
+            Again, mark the text translatable.
+        \li When a component instance is selected, selection handles are
+            displayed in its corners and on its sides. Use the selection
+            handles to resize the button instances so that the text fits
+            comfortably on the button background.
             In this tutorial, the button width is set to 120 pixels.
-        \li Move the cursor on the selected button to make the selection icon
-            appear. You can now drag the button to another position in
-            \uicontrol {Form Editor}. Use the guidelines to align the buttons
-            below the page title:
+        \li Move the cursor on the selected button instance to make the
+            selection icon appear. You can now drag the button instance
+            to another position in \uicontrol {Form Editor}. Use the
+            guidelines to align the button instances below the page title:
             \image loginui1-align-buttons.png
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
 
     The first iteration of your UI is now ready and should now look something
-    like this in the Design mode and live preview:
+    like this in \uicontrol {Form Editor} and live preview:
 
-    \image loginui1-ready.png "The finished UI in the Design mode"
+    \image loginui1-ready.png "The finished UI in Form Editor"
 
     \section2 Learn More - Component IDs
 
-    Each component and each instance of a component has an \e id that uniquely
-    identifies it and enables other components' properties to be bound to it. An
-    id must be unique, it must begin with a lower-case letter or an underscore
-    character, and it can contain only letters, numbers, and underscore
-    characters.
+    Each component and each instance of a component has an \e ID that uniquely
+    identifies it and enables other components' properties to be bound to it.
+    An ID must be unique, it must begin with a lower-case letter or an
+    underscore character, and it can contain only letters, numbers, and
+    underscore characters.
 
     For more information, see \l{The id Attribute}.
 

doc/qtdesignstudio/examples/doc/loginui2.qdoc

@@ -42,7 +42,7 @@
     describes how to position the UI components on pages to create a scalable
     UI.
 
-    To ensure that the layout is responsive and all the UI elements stay in
+    To ensure that the layout is responsive and all the UI components stay in
     their proper places when you resize the UI on the desktop or on devices
     with different screen sizes, you will use anchors and positioners.
 
@@ -63,16 +63,16 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    (\uicontrol {Show Live Preview}) button on the \l {Form Editor}
     toolbar or press \key {Alt+P}.
 
-    To anchor components on a page:
+    To anchor component instances on a page:
 
     \list 1
         \li Open \e {Screen01.ui.qml} for editing in the
             \uicontrol {Form Editor} view.
-        \li Select \e logo in the \uicontrol Navigator view.
-        \li In the \uicontrol Properties view, \uicontrol Layout tab,
+        \li Select \e logo in the \l Navigator view.
+        \li In the \l Properties view, \uicontrol Layout tab,
             select the \inlineimage icons/anchor-top.png
             (\uicontrol Top) and \inlineimage icons/anchor-left.png
             (\uicontrol Left) anchor buttons to anchor \e logo to the top left
@@ -86,21 +86,22 @@
             to save your changes.
     \endlist
 
-    Your page now should look something like this in the Design mode and live
-    preview:
+    Your page now should look something like this in the \uicontrol Design mode
+    and live preview:
 
     \image loginui2-loginpage.png "Login page in the Design mode"
 
     \section2 Learn More - Anchors
 
-    In an anchor-based layout, each component can be thought of as having a set
-    of invisible \e anchor lines: top, bottom, left, right, fill, horizontal
-    center, vertical center, and baseline.
+    In an anchor-based layout, each component instance can be thought of as
+    having a set of invisible \e anchor lines: top, bottom, left, right, fill,
+    horizontal center, vertical center, and baseline.
 
-    Anchors enable placing a component either adjacent to or inside of another
-    component, by attaching one or more of the component's anchor lines to the
-    anchor lines of the other component. If a component changes, the components
-    that are anchored to it will adjust automatically to maintain the anchoring.
+    Anchors enable placing a component instance either adjacent to or inside of
+    another component instance, by attaching one or more of the instance's
+    anchor lines to the anchor lines of the other component instance. If a
+    component instance changes, the instances that are anchored to it will
+    adjust automatically to maintain the anchoring.
 
     For more information, see \l{Positioning with Anchors}.
 
@@ -115,15 +116,11 @@
     To add entry fields to the page:
 
     \list 1
-        \li In \l Library > \uicontrol Components, select the
-            \inlineimage plus.png
-            button to add the \l {Qt Quick Controls} module to the project:
-            \image loginui2-imports.png
         \li Drag-and-drop two instances of the \uicontrol {Text Field}
-            component from the \uicontrol {Qt Quick Controls} tab to
-            \l {Form Editor}.
+            component from \l Library > \uicontrol Components >
+            \uicontrol {Qt Quick Controls} to \l {Form Editor}.
         \li Select one of the text fields in \l Navigator, and
-            change its id to \e usernameField in \l Properties.
+            change its ID to \e usernameField in \l Properties.
         \li In the \uicontrol Geometry group, \uicontrol Size field,
             make the field wide enough to accommodate long user names
             by setting its width to \e 300 pixels.
@@ -131,7 +128,7 @@
             inside the field before users type in it to \e Username
         \li Select \uicontrol tr to mark the text translatable.
             \image loginui2-field-properties.png "Text field properties"
-        \li Select the other text field, and change its id to
+        \li Select the other text field, and change its ID to
             \e passwordField, placeholder text to \e Password,
             and width to \e 300 pixels.
     \endlist
@@ -149,7 +146,7 @@
         \li Select \uicontrol Position > \uicontrol {Position in Column}
             to position the fields on top of each other in
             \uicontrol {Form Editor}.
-        \li Select the column in \uicontrol Navigator and change its id
+        \li Select the column in \uicontrol Navigator and change its ID
             to \e fieldColumn in \uicontrol Properties.
         \li In the \uicontrol Spacing field, set the spacing between the
             fields to 5 pixels.
@@ -157,7 +154,7 @@
         \li Select \e loginButton and \e registerButton, and then select
             \uicontrol Position > \uicontrol {Position in Column} to position
             them in a column.
-        \li Select the button column, change its id to \e buttonColumn, and
+        \li Select the button column, change its ID to \e buttonColumn, and
             set the spacing between the buttons to 5 pixels, as above.
     \endlist
 
@@ -183,7 +180,7 @@
     \endlist
 
     The second iteration of your UI is now ready and should look something like
-    this in the Design mode and live preview:
+    this in the \uicontrol Design mode and live preview:
 
     \image loginui2-loginpage-ready.png "Login page in the Design mode"
 

doc/qtdesignstudio/examples/doc/loginui3.qdoc

@@ -65,13 +65,14 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    (\uicontrol {Show Live Preview}) button on the \l {Form Editor}
     toolbar or press \key {Alt+P}.
 
-    To add the text field and a back button needed on the registration page:
+    To add the text field and a back button needed on the registration page
+    to the \e Screen01 component:
 
     \list 1
-        \li Open \e {Screen01.ui.qml} in \l {Form Editor} for editing.
+        \li Open \e {Screen01.ui.qml} in \uicontrol {Form Editor} for editing.
         \li Drag-and-drop a \uicontrol {Text Field} from \l Library
             > \uicontrol Components > \uicontrol {Qt Quick Controls} to
             \e fieldColumn in \l Navigator.
@@ -83,12 +84,12 @@
         \li In the \uicontrol Placeholder field, set the placeholder text to
             \e {Verify password} and mark the text translatable.
         \li Drag-and-drop a PushButton component from \uicontrol Library >
-            \uicontrol Components > \uicontrol {My Components} to its parent
+            \uicontrol Components > \uicontrol {My Components} to the root
             rectangle in \uicontrol Navigator.
-        \li Select the button in \uicontrol Navigator and change its id to
+        \li Select the button in \uicontrol Navigator and change its ID to
             \e backButton in \uicontrol Properties.
         \li In the \uicontrol Geometry group, \uicontrol Size field, set the
-            button width to \e 40 pixels.
+            button width to \e 40 pixels to create a small round button.
         \li In the \uicontrol Text field, enter \e <.
         \li In the \uicontrol Font group, \uicontrol Size field, set the font
             size to \e 24 pixels.
@@ -101,8 +102,8 @@
             to save your changes.
     \endlist
 
-    Your page now should look something like this in the Design mode and live
-    preview:
+    \e Screen01 should now look something like this in the \uicontrol Design
+    mode and live preview:
 
     \image loginui3-base-state.png "Login page with new UI components"
 
@@ -117,7 +118,7 @@
     components in the \uicontrol {Form Editor}, depending on the current page:
 
     \list 1
-        \li In the \uicontrol States view, select \uicontrol {Create New State}.
+        \li In the \l States view, select \uicontrol {Create New State}.
             \image loginui3-login-state.png "States view"
         \li Enter \e loginState as the state name.
         \li Select \e verifyPasswordField in the \uicontrol Navigator,
@@ -134,8 +135,8 @@
             \e registerState. This state should now look identical to the base
             state.
         \li Select \e loginButton in the \uicontrol Navigator, and deselect
-            the \uicontrol Visibility check box to hide the login button in
-            the registration state.
+            the \uicontrol Visibility check box in \uicontrol Properties to
+            hide the login button in the registration state.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
@@ -181,16 +182,16 @@
     that has a \e clicked signal. The signal is emitted whenever the mouse
     is clicked within the area.
 
-    You will now use the \l Connections view to
+    You will now use \l {Connection View} to
     \l{Connecting Components to Signals}{connect} the clicked signal of
     \e registerButton to \e registerState and that of \e backButton
     to \e loginState:
 
     \list 1
         \li Select \uicontrol View > \uicontrol Views >
-            \uicontrol {Connection View} to open the \uicontrol Connection view.
+            \uicontrol {Connection View} to open the \uicontrol Connections tab.
         \li Select \e registerButton in the \uicontrol Navigator.
-        \li In the \uicontrol Connection view, select the \inlineimage plus.png
+        \li In the \uicontrol Connections tab, select the \inlineimage plus.png
             button to add the action that the \c onClicked signal handler of
             \e registerButton should apply.
         \li Double-click the value \uicontrol Action column and select
@@ -202,9 +203,9 @@
             to save your changes.
     \endlist
 
-    You can now see the following connections in the Design mode:
+    You can now see the following connections in the \uicontrol Design mode:
 
-    \image loginui3-connections.png "Connections view"
+    \image loginui3-connections.png "Connections tab"
 
     In the live preview, you can now click the \uicontrol {Create Account}
     button to go to the registration page and the back button to return to
@@ -219,19 +220,20 @@
     needs to know that the user has clicked on it. In response, the button may
     change color to indicate its state and perform an action.
 
-    QML has a signal and handler mechanism, where the signal is the event that
-    is responded to through a signal handler. When a signal is emitted, the
-    corresponding signal handler is invoked. Placing logic such as a script or
-    other operations in the handler allows the component to respond to the
-    event.
+    A \e {signal-and-handler} mechanism is used, where the \e signal is the
+    event that is responded to through a \e {signal handler}. When a signal is
+    emitted, the corresponding signal handler is invoked. Placing logic, such
+    as a script or other operations, in the handler allows the component to
+    respond to the event.
 
     For more information, see \l{Signal and Handler Event System}.
 
     \section1 Next Steps
 
     For a more complicated UI, you would typically use components that specify
-    a view of components provided by a model, such as a \l ListView or \l StackView.
-    For more information, see \l{Using Data Models}.
+    a view of items provided by a model, such as a \l{List and Grid Views}
+    {List View} or \l StackView. For more information, see
+    \l{Lists and Other Data Models}.
 
     To learn how to use a timeline to animate the transition between the login
     and registration pages, see the next tutorial in the series,

doc/qtdesignstudio/examples/doc/loginui4.qdoc

@@ -42,8 +42,8 @@
 
     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 using timeline animations that you
-    bind to states.
+    learn another way of animating the UI by creating \l{Creating Animations}
+    {timeline animations} that you bind to states.
 
     These instructions build on:
 
@@ -73,25 +73,25 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
-    toolbar or press \key {Alt+P}.
+    (\uicontrol {Show Live Preview}) button on the \uicontrol Design
+    mode \l {Summary of Main Toolbar Actions}{toolbar} or press \key {Alt+P}.
 
     \section2 Replacing Columns with Anchors
 
-    First, you will prepare the page for adding animation:
+    First, you will prepare the \e Screen01 component for adding animation:
 
     \list 1
-        \li Open \e {Screen01.ui.qml} in \uicontrol {Form Editor} for editing.
-        \li In the \uicontrol States view, select the \inlineimage close.png
+        \li Open \e {Screen01.ui.qml} in \l {Form Editor} for editing.
+        \li In the \l States view, select the \inlineimage close.png
             (\uicontrol Close) button in \e loginState and \e registerState
             to remove the states.
-        \li Select the fields in \e fieldColumn in \uicontrol Navigator
+        \li Select the fields in \e fieldColumn in \l Navigator
             and drag and drop them to their parent rectangle to prepare for
             deleting the column component.
         \li Select \e fieldColumn in \uicontrol Navigator and press
             \key Delete to delete it.
         \li Select \e usernameField in \uicontrol Navigator.
-        \li In \uicontrol Properties > \uicontrol Layout, select the
+        \li In \l Properties > \uicontrol Layout, select the
             \inlineimage icons/anchor-top.png
             (\uicontrol Top) button to anchor the top of the field to the top
             of its parent. \QDS will suggest an appropriate margin based on
@@ -121,7 +121,8 @@
     would probably stay the same, even if the positions of the fields on the
     page would change.
 
-    Your page now should look something like this in the Design mode and live preview:
+    \e Screen01 should now look something like this in the \uicontrol Design
+    mode and live preview:
 
     \image loginui4-page.png "UI with all the buttons and fields in the Design mode"
 
@@ -137,7 +138,7 @@
 
     \list 1
             \li Select \uicontrol View > \uicontrol Views >
-            \uicontrol Timeline to open the \uicontrol Timeline view.
+            \uicontrol Timeline to open the \l Timeline view.
         \li In \uicontrol Timeline, select \inlineimage plus.png
             to add a 1000-frame timeline and settings for running the animation.
             \image loginui4-timeline-settings.png
@@ -311,14 +312,15 @@
     \printuntil 1.0
 
     All the properties and functions of the components from this module are
-    available in the Design mode, and therefore it is enough to learn how to
-    use \uicontrol Timeline, as described in \l {Creating Animations}.
+    available in the \uicontrol Design mode, and therefore it is enough to
+    learn how to use \uicontrol Timeline, as described in
+    \l {Creating Animations}.
 
     \section1 Next Steps
 
     For more examples about using timelines, see \l{Examples and Tutorials}.
 
-    To watch a video tutorial about creating timelines and adding keyframes,
-    select \e {Learn to use Qt Design Studio Part 2} in the \uicontrol Tutorials
-    tab in the \uicontrol Welcome mode.
+    Watch a video tutorial about creating timelines and adding keyframes:
+
+    \youtube Z3uPoe-4UAw
 */

doc/qtdesignstudio/examples/doc/progressbar.qdoc

@@ -167,11 +167,10 @@
     \image progressbar-root-export-property.png "Export keyframe group as a property"
 
     When we select \e root in \uicontrol Navigator, we can see the
-    \e timelineCurrentFrame property in \uicontrol {Connections View}
-    > \uicontrol Bindings. We double-click it to change its name
-    to \e progress.
+    \e timelineCurrentFrame property in \l {Connection View} >
+    \uicontrol Bindings. We double-click it to change its name to \e progress.
 
-    \image progressbar-bindings-progress.png "Connections View Bindings tab"
+    \image progressbar-bindings-progress.png "Connection View Bindings tab"
 
     We will bind some JavaScript to the value of the text label to turn
     it into a running number that reflects the number of the keyframe on the

doc/qtdesignstudio/examples/doc/sidemenu.qdoc

@@ -101,8 +101,9 @@
     We construct the menu bar in the \e {MainFile.ui.qml} file using the
     \l {Form Editor}. The CustomButton component is listed in
     \l Library > \uicontrol Components > \uicontrol {My Components}.
-    We drag and drop several instances of the component to the \l {Form Editor}
-    and enclose them in a RowLayout component to lay them out as a menu bar.
+    We drag-and-drop several instances of the component to the
+    \uicontrol {Form Editor} and enclose them in a RowLayout component instance
+    to lay them out as a menu bar.
 
     \image sidemenu-menubar.png
 
@@ -191,7 +192,7 @@
     In \e {SideMenu.qml}, we use connections to bind the action of clicking
     the burger menu to the signal handler for triggering the opening or
     closing animation, depending on the current state. We create the connections
-    in the \l Connections view.
+    in \l{Connection View}.
 
     \image sidemenu-connections.png
 

doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc

@@ -140,7 +140,7 @@
     \image washingmachineui-timeline-settings.png "Timeline settings"
 
     First, we select the initial arc segment, \e arcSegment1, in
-    \uicontrol Navigator to display its properties in \uicontrol Properties.
+    \l Navigator to display its properties in \uicontrol Properties.
     In the \uicontrol Layout tab, \uicontrol Rotation field, we select
     \inlineimage icons/action-icon.png
     , and then select \uicontrol {Insert Keyframe} to insert a keyframe
@@ -167,7 +167,7 @@
     and 1000 (\e arcSegment4).
 
     When we move the playhead in \uicontrol Timeline, we can see the rotation
-    animation in \uicontrol {Form Editor}.
+    animation in \l {Form Editor}.
 
     \image washingmachineui-multsegmentarc.gif "Rotation animation in Form Editor"
 
@@ -212,12 +212,12 @@
     \printuntil startClicked
 
     Then, we select the mouse area for the start button, \e startMA,
-    in \uicontrol Navigator. In the \uicontrol {Connection View} >
-    \uicontrol Connections tab, we select the \inlineimage plus.png
+    in \uicontrol Navigator. In \l {Connection View} > \uicontrol Connections,
+    we select the \inlineimage plus.png
     (\uicontrol Add) button to connect the \c onClicked() signal handler
     of the button to the \c startClicked() signal.
 
-    \image washingmachineui-connections.png "Connections view"
+    \image washingmachineui-connections.png "Connection View"
 
     Then, in \e ApplicationView.qml, we specify that the \c startClicked()
     signal changes the application state to \e presets:

doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml

@@ -1,7 +1,7 @@
 
 /****************************************************************************
 **
-** 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 examples of the Qt Design Studio.
@@ -49,15 +49,11 @@
 **
 ****************************************************************************/
 import QtQuick 2.15
-import QtQuick.Templates 2.1 as T
-import loginui1 1.0
+import QtQuick.Controls 2.12
 
-T.Button {
+Button {
     id: control
-    width: 100
-    height: 40
 
-    font: Constants.font
     implicitWidth: Math.max(
                        buttonBackground ? buttonBackground.implicitWidth : 0,
                        textItem.implicitWidth + leftPadding + rightPadding)
@@ -70,6 +66,14 @@ T.Button {
     text: "My Button"
 
     background: buttonBackground
+    Rectangle {
+        id: buttonBackground
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        radius: 20
+        border.color: "#41cd52"
+    }
 
     contentItem: textItem
     Text {
@@ -77,30 +81,19 @@ T.Button {
         text: control.text
 
         opacity: enabled ? 1.0 : 0.3
-        color: "#020202"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         font.bold: true
-        elide: Text.ElideRight
-    }
-
-    Rectangle {
-        id: buttonBackground
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        border.color: "#41cd52"
-        border.width: 1
-        anchors.fill: parent
-        radius: 20
     }
 
     states: [
         State {
             name: "normal"
             when: !control.down
+
             PropertyChanges {
                 target: buttonBackground
+                border.color: "#41cd52"
             }
         },
         State {
@@ -110,9 +103,9 @@ T.Button {
                 target: textItem
                 color: "#41cd52"
             }
+
             PropertyChanges {
                 target: buttonBackground
-                color: "#ffffff"
                 border.color: "#41cd52"
             }
         }

doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml

@@ -49,9 +49,9 @@
 **
 ****************************************************************************/
 import QtQuick 2.15
-import loginui1 1.0
 import QtQuick.Studio.Components 1.0
 import QtQuick.Controls 2.15
+import loginui1 1.0
 
 Rectangle {
     color: "#ffffff"
@@ -104,6 +104,13 @@ Rectangle {
         y: 398
         width: 120
         height: 40
-        text: "Create Account"
+        text: qsTr("Create Account")
     }
 }
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;formeditorZoom:0.5;height:480;width:640}
+}
+##^##*/
+

doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml

@@ -1,7 +1,7 @@
 
 /****************************************************************************
 **
-** 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 examples of the Qt Design Studio.
@@ -49,15 +49,11 @@
 **
 ****************************************************************************/
 import QtQuick 2.15
-import QtQuick.Templates 2.1 as T
-import loginui2 1.0
+import QtQuick.Controls 2.12
 
-T.Button {
+Button {
     id: control
-    width: 100
-    height: 40
 
-    font: Constants.font
     implicitWidth: Math.max(
                        buttonBackground ? buttonBackground.implicitWidth : 0,
                        textItem.implicitWidth + leftPadding + rightPadding)
@@ -70,6 +66,14 @@ T.Button {
     text: "My Button"
 
     background: buttonBackground
+    Rectangle {
+        id: buttonBackground
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        radius: 20
+        border.color: "#41cd52"
+    }
 
     contentItem: textItem
     Text {
@@ -77,30 +81,19 @@ T.Button {
         text: control.text
 
         opacity: enabled ? 1.0 : 0.3
-        color: "#020202"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         font.bold: true
-        elide: Text.ElideRight
-    }
-
-    Rectangle {
-        id: buttonBackground
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        border.color: "#41cd52"
-        border.width: 1
-        anchors.fill: parent
-        radius: 20
     }
 
     states: [
         State {
             name: "normal"
             when: !control.down
+
             PropertyChanges {
                 target: buttonBackground
+                border.color: "#41cd52"
             }
         },
         State {
@@ -110,9 +103,9 @@ T.Button {
                 target: textItem
                 color: "#41cd52"
             }
+
             PropertyChanges {
                 target: buttonBackground
-                color: "#ffffff"
                 border.color: "#41cd52"
             }
         }

doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml

@@ -1,7 +1,7 @@
 
 /****************************************************************************
 **
-** 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 examples of the Qt Design Studio.
@@ -49,15 +49,11 @@
 **
 ****************************************************************************/
 import QtQuick 2.15
-import QtQuick.Templates 2.1 as T
-import loginui3 1.0
+import QtQuick.Controls 2.12
 
-T.Button {
+Button {
     id: control
-    width: 100
-    height: 40
 
-    font: Constants.font
     implicitWidth: Math.max(
                        buttonBackground ? buttonBackground.implicitWidth : 0,
                        textItem.implicitWidth + leftPadding + rightPadding)
@@ -70,6 +66,14 @@ T.Button {
     text: "My Button"
 
     background: buttonBackground
+    Rectangle {
+        id: buttonBackground
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        radius: 20
+        border.color: "#41cd52"
+    }
 
     contentItem: textItem
     Text {
@@ -77,30 +81,19 @@ T.Button {
         text: control.text
 
         opacity: enabled ? 1.0 : 0.3
-        color: "#020202"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         font.bold: true
-        elide: Text.ElideRight
-    }
-
-    Rectangle {
-        id: buttonBackground
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        border.color: "#41cd52"
-        border.width: 1
-        anchors.fill: parent
-        radius: 20
     }
 
     states: [
         State {
             name: "normal"
             when: !control.down
+
             PropertyChanges {
                 target: buttonBackground
+                border.color: "#41cd52"
             }
         },
         State {
@@ -110,9 +103,9 @@ T.Button {
                 target: textItem
                 color: "#41cd52"
             }
+
             PropertyChanges {
                 target: buttonBackground
-                color: "#ffffff"
                 border.color: "#41cd52"
             }
         }

doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml

@@ -1,7 +1,7 @@
 
 /****************************************************************************
 **
-** 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 examples of the Qt Design Studio.
@@ -49,15 +49,11 @@
 **
 ****************************************************************************/
 import QtQuick 2.15
-import QtQuick.Templates 2.1 as T
-import loginui4 1.0
+import QtQuick.Controls 2.12
 
-T.Button {
+Button {
     id: control
-    width: 100
-    height: 40
 
-    font: Constants.font
     implicitWidth: Math.max(
                        buttonBackground ? buttonBackground.implicitWidth : 0,
                        textItem.implicitWidth + leftPadding + rightPadding)
@@ -70,6 +66,14 @@ T.Button {
     text: "My Button"
 
     background: buttonBackground
+    Rectangle {
+        id: buttonBackground
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        radius: 20
+        border.color: "#41cd52"
+    }
 
     contentItem: textItem
     Text {
@@ -77,30 +81,19 @@ T.Button {
         text: control.text
 
         opacity: enabled ? 1.0 : 0.3
-        color: "#020202"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         font.bold: true
-        elide: Text.ElideRight
-    }
-
-    Rectangle {
-        id: buttonBackground
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        border.color: "#41cd52"
-        border.width: 1
-        anchors.fill: parent
-        radius: 20
     }
 
     states: [
         State {
             name: "normal"
             when: !control.down
+
             PropertyChanges {
                 target: buttonBackground
+                border.color: "#41cd52"
             }
         },
         State {
@@ -110,9 +103,9 @@ T.Button {
                 target: textItem
                 color: "#41cd52"
             }
+
             PropertyChanges {
                 target: buttonBackground
-                color: "#ffffff"
                 border.color: "#41cd52"
             }
         }

doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc

@@ -213,6 +213,12 @@
     You can now create a project in \QDS and import the assets to it, as
     described in \l {Creating Projects} and \l{Importing Designs}.
 
+    \note
+    Exporting your design using \QBPS can be slow for documents with large number
+    of layers. Closing Photoshop's Info, Layers, and Properties windows can improve
+    the time it takes to export.
+
+
 
     \section1 Customizing IDs
 

doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc

@@ -252,7 +252,7 @@
     \title Adding Action Areas and Transitions
 
     \e {Action areas} can act as clickable areas that initiate transitions
-    between flow items or they can \l{Connecting Components to Signals}
+    between flow items or they can \l{Connecting and Releasing Signals}
     {create connections} to any signal from any component in a
     \l{Adding Flow Items}{flow item}. For example, you could connect an
     action to the \c onPressed signal of a button in your flow item to
@@ -260,6 +260,12 @@
 
     \image studio-flow-action-area.png "Flow Action Area in Form Editor"
 
+    \note To connect components to \l{Connecting and Releasing Signals}
+    {signals}, you must first export the components as
+    \l{Adding Property Aliases}{aliases} in \l Navigator.
+    To create and release connections, select
+    \uicontrol {Open Signal Dialog} in the context menu.
+
     You can select the type of the mouse or touch input to use for triggering
     events, such as click, double-click, flick, pinch, or press.
 
@@ -381,6 +387,18 @@
             \uicontrol Question value to the opposite side of the transition
             line.
     \endlist
+
+    \section1 Connecting and Releasing Signals
+
+    To connect a component to a \l{Connecting Components to Signals}{signal},
+    select \uicontrol {Open Signal Dialog} in the context menu. The
+    \uicontrol {Signal List} dialog displays the signals for all components
+    that you export as \l{Adding Property Aliases}{aliases} in \l Navigator.
+
+    \image studio-flow-signal-list.png "Signal List dialog"
+
+    To connect a component to a signal, select \uicontrol Connect next to one
+    in the list. To release a connected signal, select \uicontrol Release.
 */
 
 /*!
@@ -458,7 +476,7 @@
 
     While \l{Adding Action Areas and Transitions}{transition lines}
     are useful for prototyping, in production you need to use the real
-    \l{Connecting Components to Signals}{signals} from UI
+    \l{Connecting and Releasing Signals}{signals} from UI
     \l{glossary-component}{components} to control the flow of the application.
     For this purpose, you can use action areas in a more advanced way, by
     having them listen to signals from flow items or the controls in them and
@@ -652,7 +670,7 @@
 
     You can use the \uicontrol {Flow Wildcard} component to model this type of
     screens in your \l{Adding Flow Views}{flow view} using real or simulated
-    \l{Connecting Components to Signals}{signals} and \l{Simulating Conditions}
+    \l{Connecting and Releasing Signals}{signals} and \l{Simulating Conditions}
     {conditions}. You can add \l{Adding Flow Items}{flow items} to a positive
     list to prioritize them or to a negative list to stop some screens from
     appearing on others. For example, you could block the incoming call screen

doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc

@@ -61,7 +61,7 @@
 
             The available properties depend on the component type. You can
             \l{Specifying Dynamic Properties}{add properties for components} in
-            the \uicontrol Properties tab of the \uicontrol {Connection View}.
+            \l {Connection View} > \uicontrol Properties.
     \endlist
 
     For an example of using the \uicontrol Button template to create a button

doc/qtdesignstudio/src/qtdesignstudio-importing-2d.qdoc

@@ -91,7 +91,7 @@
     displayed in \uicontrol Library > \uicontrol Components >
     \uicontrol {My Components} as well as in the \uicontrol Projects view as
     separate QML files. To start using them, drag-and-drop them from
-    \uicontrol Library to \uicontrol {Form Editor} or \uicontrol Navigator.
+    \uicontrol Library to \uicontrol {Form Editor} or \l Navigator.
 
     \note The layer that was the bottom layer in the design tool becames the top
     layer in \uicontrol Navigator to reflect the QML code model. You

doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc

@@ -34,7 +34,8 @@
 
     \list
         \li Group files together
-        \li Include forms and assets files
+        \li Include \l{UI Files}{UI files} (.ui.qml), component files (.qml),
+            and assets files
         \li Specify settings for previewing UIs
     \endlist
 
@@ -67,16 +68,17 @@
             uses a subset of preset components (as supported by Qt for MCUs)
             that you can deploy, run, and debug on MCU boards.
         \li \uicontrol {Qt Quick Application - Empty} creates a project that
-            uses default components and can be run on all target platforms.
+            uses default components and preset UI controls and can be run on
+            all target platforms.
         \li \uicontrol {Qt Quick 3D Application} creates a project that uses
-            default and 3D components.
+            default components, UI controls, and 3D components.
         \li \uicontrol {Qt Quick Application - Scroll} and
             \uicontrol {Qt Quick Application - Stack} create an application
-            that uses preset UI controls to implement a scrollable
-            list or a set of pages with a stack-based navigation model.
+            that uses UI controls to implement a scrollable list or a set of
+            pages with a stack-based navigation model.
         \li \uicontrol {Qt Quick Application - Launcher} creates a
-            project that uses default components and defines a launcher
-            application.
+            project that uses default components and UI controls and
+            defines a launcher application.
     \endlist
 
     For an example of creating a \uicontrol {Qt Quick 3D Application} project,
@@ -90,11 +92,14 @@
         \li Select \uicontrol File > \uicontrol {New File or Project}.
         \li Select the type of your project, and then select \uicontrol Choose.
         \li In the \uicontrol Name field, enter a name for the project.
+            When naming your own projects, keep in mind that they cannot be
+            easily renamed later.
         \li In the \uicontrol {Create in} field, enter the path for the project
             files, and then select \uicontrol Next (or \uicontrol Continue on
-            \macos).
+            \macos). You can move project folders later without problems.
         \li In the \uicontrol {Screen resolution} field, select the screen
             resolution for previewing the UI on the desktop or on a device.
+            You can easily change the screen size later in \l Properties.
         \li In the \uicontrol {Qt Quick Controls Style} field, select one of
             the predefined \l{Styling Qt Quick Controls}{UI styles} to use,
             and then select \uicontrol Finish (or \uicontrol Done on \macos).
@@ -107,7 +112,7 @@
             image files in the project folder belong to the project. Therefore,
             you do not need to individually list all the files in the project.
         \li .qml file defines the functionality and appearance of a component.
-        \li ui.qml file defines a visual component that you can edit in
+        \li .ui.qml file defines a visual component that you can edit in
             \l{Form Editor}.
         \li qtquickcontrols2.conf file specifies the preferred style and some
             style-specific arguments.
@@ -123,7 +128,8 @@
     \endlist
 
     To use JavaScript and image files in the UI, select \uicontrol Library >
-    \uicontrol Assets > \inlineimage plus.png.
+    \uicontrol Assets > \inlineimage plus.png
+    .
 
     \section1 Adding Files to Projects
 

doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc

@@ -153,8 +153,8 @@
     \image studio-qml-imports-slconnector.png "Simulink Connector in the list of available modules."
 
     If you need to change the IP address and/or port, you need to select the
-    \uicontrol SimulinkConnector item in \uicontrol Navigator and set the IP
-    address and/or port in the \uicontrol Properties view. If you cannot see
+    \uicontrol SimulinkConnector item in \l Navigator and set the IP address
+    and/or port in the \l Properties view. If you cannot see
     \uicontrol SimulinkConnector in \uicontrol Navigator, you need to click
     \inlineimage filtericon.png
     (\uicontrol {Filter Tree}) and unselect \uicontrol {Show only visible items}.
@@ -162,7 +162,7 @@
     To communicate with a specific model in Simulink, you need to create
     properties matching the send and receive properties in the root of the
     application you are building. Select the root item in \uicontrol
-    Navigator to add the properties in \uicontrol {Connection View} >
+    Navigator to add the properties in \l {Connection View} >
     \uicontrol Properties.
 
     See \l {Specifying Dynamic Properties} for a detailed description of how

doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc

@@ -58,27 +58,31 @@
 
     A \e component is a reusable building block for a UI.
 
-    \QDS comes with \e {preset components} that you can use in your project.
-    These are similar to \e Symbols in Sketch or \e Prefab in Unity.
+    \QDS comes with \e {preset components} that you can use in your UI by
+    creating instances of them. These are similar to \e Symbols in Sketch or
+    \e Prefab in Unity.
 
-    Some of the preset components represent simple shapes, text, or images,
-    while others represent complex UI controls with full functionality, such
-    as spin boxes or sliders.
+    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
+    the preset components in \l Library.
 
-    You can modify the \e properties of the preset components and combine them
-    to build your own components.
+    To build \l {Creating Component Instances}{your own components}, you can
+    modify the \e 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
     in Button.ui.qml. Typically, the visual appearance of a component is
-    defined in a \e {UI file}.
+    defined in a \e {UI file}. To create component files, you can use
+    \l{Creating Components from Scratch}{wizard templates}, or
+    \l{Moving Component Instances into Separate Files}
+    {move component instances into separate component files}.
 
     Read more about components:
 
     \list
-        \li \l{Creating Components}{Library}
-        \li \l{Component Types}{Preset Components}
-        \li \l{Creating Component Instances}{My Components}
+        \li \l{Creating Components}
     \endlist
 
     \section1 Device

doc/qtdesignstudio/src/qtdesignstudio-tutorials.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 Design Studio documentation.
@@ -33,17 +33,14 @@
     \image loginui4.gif "Log In UI"
 
     You can follow a set of hands-on tutorials that build on each other to
-    illustrate how to use the features of \QDS. In addition, the tutorials
-    provide additional information about the features of QML and Qt Quick
-    that are relevant to the task at hand. Even if you plan to export your
+    illustrate how to use the features of \QDS. Even if you plan to export your
     designs from a design tool, it is useful to first create a small UI from
-    scratch to learn the basic concepts of \QDS. In particular, Part 1
-    describes the terms and concepts that you will run into when exporting
-    designs with \QB.
+    scratch to learn to use \QDS. In particular, Part 1 describes the terms
+    and concepts that you will run into when exporting designs with \QB.
 
     Before you start, take a look at the following topics to familiarize
-    yourself with the parts of \QDS in general, and the Design mode in
-    particular: \l{User Interface} and \l{Design Views}.
+    yourself with the parts of \QDS in general, and the \uicontrol Design
+    mode in particular: \l{User Interface} and \l{Design Views}.
 
     In addition to these entry-level tutorials, \QDS comes with examples
     and video tutorials that you can open from the \uicontrol Examples and

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

@@ -81,25 +81,25 @@
     To create a custom effect:
 
     \list 1
-        \li Drag and drop an \uicontrol {Effect} component from the
+        \li Drag-and-drop an \uicontrol {Effect} component from the
             \uicontrol {Qt Quick 3D Custom Shader Utils} tab of
-            \uicontrol Library to a Model component in \uicontrol Navigator.
+            \uicontrol Library to a Model component in \l Navigator.
         \li Select the custom effect component in \uicontrol Navigator to edit
-            the values of its properties in the \uicontrol Properties view.
+            the values of its properties in the \l Properties view.
             \image studio-qtquick-3d-custom-effect.png "Custom effect properties"
         \li In the \uicontrol Passes field, select the pass components for
             the effect.
         \li Select the pass component in \uicontrol Navigator to specify values
             for its properties in \uicontrol Properties.
             \image studio-qtquick-3d-pass.png "Pass properties"
-        \li To execute commands during the pass, drag and drop the following
+        \li To execute commands during the pass, drag-and-drop the following
             command components from \uicontrol Library to the custom material in
             \uicontrol Navigator: \uicontrol Blending, \uicontrol {Buffer Blit},
             \uicontrol {Buffer Input}, \uicontrol {Cull Mode},
             \uicontrol {Depth Input}, \uicontrol {Render State}, and
             \uicontrol {Set Uniform Value}. Then select the commands in the
             \uicontrol Commands field.
-        \li To allocate a buffer for the pass, drag and drop a \uicontrol Buffer
+        \li To allocate a buffer for the pass, drag-and-drop a \uicontrol Buffer
             component to the custom material. Then select the buffer in the
             \uicontrol Buffer field.
         \li Select the shader component in \uicontrol Navigator to set the path
@@ -133,7 +133,7 @@
     To create a custom material:
 
     \list 1
-        \li Drag and drop a \uicontrol {Custom Material} component from the
+        \li Drag-and-drop a \uicontrol {Custom Material} component from the
             \uicontrol {Qt Quick 3D Custom Shader Utils} tab of
             \uicontrol Library to a Model component in \uicontrol Navigator.
         \li Select the custom material component in \uicontrol Navigator to
@@ -159,7 +159,7 @@
         \li Select the pass component in \uicontrol Navigator to specify values
             for its properties in \uicontrol Properties.
             \image studio-qtquick-3d-pass.png "Pass properties"
-        \li To execute commands during the pass, drag and drop the following
+        \li To execute commands during the pass, drag-and-drop the following
             command components from \uicontrol Library to the pass component in
             \uicontrol Navigator: \uicontrol Blending, \uicontrol {Buffer Blit},
             \uicontrol {Buffer Input}, \uicontrol {Cull Mode},
@@ -167,10 +167,10 @@
             \uicontrol {Set Uniform Value}. The command components are created
             at the same level as the pass component and automatically added to
             the \uicontrol Commands field.
-        \li To allocate a buffer for the pass, drag and drop a \uicontrol Buffer
+        \li To allocate a buffer for the pass, drag-and-drop a \uicontrol Buffer
             component to the custom material. Then select the buffer in the
             \uicontrol Buffer field.
-        \li To add a shader to the pass, drag and drop the \uicontrol Shader
+        \li To add a shader to the pass, drag-and-drop the \uicontrol Shader
             component from the \uicontrol Library to the pass component in
             \uicontrol Navigator. The shader components are created at the same
             level as the pass component and automatically added to the
@@ -211,8 +211,7 @@
 
     To use the above fragment shader in a custom effect or material component,
     you must remove the uniforms from the shader code and define them as
-    properties for the component in \uicontrol {Connection View} >
-    \uicontrol Properties.
+    properties for the component in \l {Connection View} > \uicontrol Properties.
 
     \image studio-custom-material-uniform-properties.png "Uniforms as properties in Connection View Properties tab"
 

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

@@ -38,7 +38,7 @@
 
     To add light components to your UI, drag-and-drop them from \l Library
     > \uicontrol Components > \uicontrol {Qt Quick 3D} to \l {3D Editor} or to
-    \l Navigator > \uicontrol Scene Environment > \uicontrol Scene.
+    \l Navigator > \uicontrol {Scene Environment} > \uicontrol Scene.
 
     If you cannot find the light components in \uicontrol Library, add the
     \uicontrol {Qt Quick 3D} module to your project as instructed in

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

@@ -36,13 +36,13 @@
     the \l Properties view simultaneously. To add a \uicontrol Group component
     to your scene, drag-and-drop it from \l Library > \uicontrol Components >
     \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to the \l {3D Editor}
-    view or to \l Navigator > \uicontrol {Scene Environment} > \uicontrol Scene.
-    If the \uicontrol Group component is not displayed in \uicontrol Library,
-    you should add the \uicontrol {Qt Quick 3D} module to your project, as
-    described in \l {Adding and Removing Modules}.
+    view or to \l Navigator > \uicontrol View3D > \uicontrol {Scene Environment}
+    > \uicontrol Scene. If the \uicontrol Group component is not displayed in
+    \uicontrol Library, you should add the \uicontrol {Qt Quick 3D} module to
+    your project, as described in \l {Adding and Removing Modules}.
 
     Select the \uicontrol Group component in \uicontrol Navigator to modify its
-    properties in the \l Properties view.
+    properties in the \uicontrol Properties view.
 
     \section1 Setting Node Opacity and Visibility
 

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

@@ -133,8 +133,8 @@
     \image studio-qtquick-3d-material-texture.png "Material properties"
 
     To change the source file for the texture, select the \uicontrol Texture
-    component in \uicontrol Navigator, go to the \uicontrol Properties view, and
-    specify a new image to use in the \uicontrol Source field.
+    component in \uicontrol Navigator, go to the \l Properties view, and specify
+    a new image to use in the \uicontrol Source field.
 
     \image studio-qtquick-3d-texture-properties.png "Texture properties"
 */

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

@@ -55,8 +55,8 @@
     scene created by using the wizard template mentioned above. To use other
     light and camera types, select the component in \uicontrol {3D Editor} or
     \uicontrol Navigator and change the type of the component in the \uicontrol
-    Type field in \uicontrol Properties. For example, to use a point light,
-    enter \e {PointLight}.
+    Type field in \l Properties. For example, to use a point light, enter
+    \e {PointLight}.
 
     \image studio-3d-properties-type.png "Type field in Properties view"
 

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

@@ -35,7 +35,7 @@
 
     \title Editing 3D Scenes
 
-    You can use \l{3D Editor} in the Design mode to edit files you
+    You can use \l{3D Editor} in the \uicontrol Design mode to edit files you
     created using 3D graphics applications and stored in one of the supported
     formats. You cannot create 3D models or other assets in the editor, but you
     can \l{Importing 3D Assets}{import} the assets you need and work with them
@@ -64,9 +64,9 @@
         \endif
         \li \l{Adding 3D Views}
 
-            You can drag and drop 3D components from \uicontrol Library
-            to the scene or to \uicontrol Navigator. You must add all 3D
-            components into a 3D view.
+            You can drag-and-drop 3D components from \l Library >
+            \uicontrol Components to \uicontrol {3D Editor} or to \l Navigator.
+            You must add all 3D components into a 3D view.
         \li \l {Using 3D Components}
 
             You can speficy properties for 3D components, such as cameras,

doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-logic-helpers.qdoc

@@ -67,7 +67,7 @@
     the checked state of a third one. First we drag-and-drop three
     \uicontrol {Check Box} component and an \uicontrol {And Operator} to
     \uicontrol Navigator (1). Then we select the \uicontrol {And Operator}
-    component (2) and set its properties in \uicontrol Properties (3).
+    component (2) and set its properties in \l Properties (3).
 
     We select \inlineimage icons/action-icon.png
     next to the \uicontrol {Input 01} field to display the \uicontrol Actions

scripts/build.py

@@ -108,6 +108,9 @@ def get_arguments():
                         action='append', dest='config_args', default=[])
     parser.add_argument('--zip-infix', help='Adds an infix to generated zip files, use e.g. for a build number.',
                         default='')
+    parser.add_argument('--zip-threads', help='Sets number of threads to use for 7z. Use "+" for turning threads on '
+                        'without a specific number of threads. This is directly passed to the "-mmt" option of 7z.',
+                        default='2')
     args = parser.parse_args()
     args.with_debug_info = args.build_type == 'RelWithDebInfo'
 
@@ -247,26 +250,26 @@ def build_qtcreatorcdbext(args, paths):
 def package_qtcreator(args, paths):
     if not args.no_zip:
         if not args.no_qtcreator:
-            common.check_print_call(['7z', 'a', '-mmt2',
+            common.check_print_call(['7z', 'a', '-mmt' + args.zip_threads,
                                      os.path.join(paths.result, 'qtcreator' + args.zip_infix + '.7z'),
                                      '*'],
                                     paths.install)
-            common.check_print_call(['7z', 'a', '-mmt2',
+            common.check_print_call(['7z', 'a', '-mmt' + args.zip_threads,
                                      os.path.join(paths.result, 'qtcreator' + args.zip_infix + '_dev.7z'),
                                      '*'],
                                     paths.dev_install)
             if args.with_debug_info:
-                common.check_print_call(['7z', 'a', '-mmt2',
+                common.check_print_call(['7z', 'a', '-mmt' + args.zip_threads,
                                          os.path.join(paths.result, 'qtcreator' + args.zip_infix + '-debug.7z'),
                                          '*'],
                                         paths.debug_install)
         if common.is_windows_platform():
-            common.check_print_call(['7z', 'a', '-mmt2',
+            common.check_print_call(['7z', 'a', '-mmt' + args.zip_threads,
                                      os.path.join(paths.result, 'wininterrupt' + args.zip_infix + '.7z'),
                                      '*'],
                                     paths.wininterrupt_install)
             if not args.no_cdb:
-                common.check_print_call(['7z', 'a', '-mmt2',
+                common.check_print_call(['7z', 'a', '-mmt' + args.zip_threads,
                                          os.path.join(paths.result, 'qtcreatorcdbext' + args.zip_infix + '.7z'),
                                          '*'],
                                         paths.qtcreatorcdbext_install)

share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml

@@ -89,6 +89,13 @@ ScrollView {
         itemContextMenu.close()
     }
 
+    function showImportCategories()
+    {
+        currentImport.importCatVisibleState = true
+        if (!itemLibraryModel.getIsAnyCategoryHidden())
+            itemLibraryModel.isAnyCategoryHidden = false
+    }
+
     onContentHeightChanged: {
         var maxPosition = Math.max(contentHeight - height, 0)
         if (contentY > maxPosition)
@@ -117,7 +124,10 @@ ScrollView {
                 visible: currentCategory === null
                 height: visible ? implicitHeight : 0
                 enabled: importToRemove !== ""
-                onTriggered: rootView.removeImport(importToRemove)
+                onTriggered: {
+                    showImportCategories()
+                    rootView.removeImport(importToRemove)
+                }
             }
 
             StudioControls.MenuSeparator {
@@ -162,11 +172,7 @@ ScrollView {
             StudioControls.MenuItem {
                 text: qsTr("Show Module Hidden Categories")
                 enabled: currentImport && !currentImport.importCatVisibleState
-                onTriggered: {
-                    currentImport.importCatVisibleState = true
-                    if (!itemLibraryModel.getIsAnyCategoryHidden())
-                        itemLibraryModel.isAnyCategoryHidden = false
-                }
+                onTriggered: showImportCategories()
             }
 
             StudioControls.MenuItem {

src/plugins/autotest/testtreemodel.cpp

@@ -685,6 +685,8 @@ void Autotest::TestTreeModel::onDataChanged(const QModelIndex &topLeft,
     if (!roles.isEmpty() && !roles.contains(Qt::CheckStateRole))
         return;
 
+    if (!m_checkStateCache) // dataChanged() may be triggered by closing a project
+        return;
     for (int row = topLeft.row(), endRow = bottomRight.row(); row <= endRow; ++row) {
         if (auto item = static_cast<ITestTreeItem *>(itemForIndex(index(row, 0, parent))))
             m_checkStateCache->insert(item, item->checked());

src/plugins/languageclient/languageclientfunctionhint.cpp

@@ -108,7 +108,12 @@ void FunctionHintProcessor::handleSignatureResponse(const SignatureHelpRequest::
     if (auto error = response.error())
         m_client->log(error.value());
     m_client->removeAssistProcessor(this);
-    const SignatureHelp &signatureHelp = response.result().value().value();
+    auto result = response.result().value_or(LanguageClientValue<SignatureHelp>());
+    if (result.isNull()) {
+        setAsyncProposalAvailable(nullptr);
+        return;
+    }
+    const SignatureHelp &signatureHelp = result.value();
     if (signatureHelp.signatures().isEmpty()) {
         setAsyncProposalAvailable(nullptr);
     } else {