Merge remote-tracking branch 'origin/qds/dev' into 12.0

Conflicts:
	share/qtcreator/qmldesigner/connectionseditor/SuggestionPopup.qml
	share/qtcreator/themes/dark.creatortheme
	share/qtcreator/themes/default.creatortheme
	share/qtcreator/themes/flat-dark.creatortheme
	share/qtcreator/themes/flat-light.creatortheme
	share/qtcreator/themes/flat.creatortheme
	src/libs/utils/CMakeLists.txt
	src/plugins/CMakeLists.txt
	src/plugins/qmlprojectmanager/qmlproject.cpp
	src/plugins/qmlprojectmanager/qmlprojectrunconfiguration.cpp

Change-Id: Idd87c281e1aa7b7fd2702473ad55e18563cbfb21

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

@@ -239,15 +239,22 @@
 
     \section2 Configuring Snapping
 
-    To edit snapping settings, select \inlineimage icons/snapping-3d-conf.png
-    in the \uicontrol 3D view toolbar.
+    To edit the snapping settings, select \inlineimage icons/snapping-3d-conf.png
+    in the \uicontrol 3D view toolbar to open the configure dialog.
 
     In the configure dialog, you can do the following:
     \list
-      \li Turn on and off snapping separately for the different transformations
+      \li Turn snapping on and off separately for the different transformations
       (move, rotate, scale).
-      \li Set snap intervals.
-      \li Toggle if the position snaps to absolute or relative values.
+      \li Set snap intervals for the transformations.
+      \note Changing the snap interval for the position also changes the grid line intervals.
+      \note All the grid lines might not be visible depending on the zoom level in the 3D view.
+      \li Select \uicontrol {Absolute Position} to snap to absolute values. Clear the checkbox
+       to use relative values.The absolute snapping aligns the object with the grid, while the
+       relative snapping moves the object in fixed intervals without changing its alignment.
+       For example, if you have an object that is slightly off the grid and you want to snap it
+       to the grid, use the absolute snapping. If you want to move the object by a certain
+       distance without affecting its orientation, use the relative snapping.
     \endlist
 
     \section1 Aligning Views and Cameras

doc/qtdesignstudio/src/views/qtquick-connection-editor-bindings.qdoc

@@ -25,30 +25,45 @@
 
     You can create bindings between components in \uicontrol Bindings.
 
-    \image qmldesigner-bindings.png
+    \image qmldesigner-bindings.webp
+
+    \section1 Creating Bindings Between Component Properties
 
     To bind a property of a component to the property of another component:
 
     \list 1
-        \li Go to the \uicontrol Binding tab in the \l Connections view.
+
+        \li Place two components in the \uicontrol {2D} view.
+
+        \image qmldesigner-components-before-binding.webp
+
+        \li Name the first component as \e {viewBox}.
+        \li Name the second component as \e {connectBox}.
+        \li Apply a thick \e black \uicontrol Border and a \e blue \uicontrol{Color} to the \e {viewBox} component.
+        \li Select the \e {connectBox} component.
+        \li Select \uicontrol Bindings from the \uicontrol Connections view.
         \li Select the \inlineimage icons/plus.png
-            (\uicontrol Add) button to add a binding for the currently selected
-            component. The component ID is displayed in the \uicontrol Item
-            column.
-          \li Double-click the value in the \uicontrol Property column to select
-            the property to bind to a source property.
-        \li Double-click the value in the \uicontrol {Source Item} column to
-            select the component whose property you want to use to determine the
-            behavior of the target component.
-        \li Double-click the value in the \uicontrol {Source Property} column
-            to select the property to bind the target property to.
+             (\uicontrol Add) button to add a binding to the currently selected
+            component.
+
+        \image qmldesigner-updated-bindings-editor.webp
+
+        \li From the pop-up \uicontrol {Bindings editor}, in the \uicontrol From section,
+            select \e {viewBox} as the parent component, then select its \uicontrol {border.color}
+            property.
+        \li In the \uicontrol To section you find the \e {connectBox} component already selected
+            as the target component. Select \uicontrol {color} from the \uicontrol {drop-down}
+            below to set its affected property.
+        \li You see the \uicontrol {border.color} of the \e {viewBox} component
+            instantly getting applied to the \uicontrol {color} of the \e {connectBox}
+            component.
+
+        \image qmldesigner-components-after-binding.webp
+
     \endlist
 
-    Right-click a binding and select \uicontrol {Open Binding Editor} in
-    the context menu to specify the binding as a JavaScript expression in
-    \uicontrol {Binding Editor}. For more information, see \l{Setting Bindings}.
-
-    \image qmldesigner-binding-editor.png "Binding Editor"
+    All the \uicontrol Bindings connections have automated JavaScript expression in the
+    \uicontrol {Code view}. For more information, see \l{Setting Bindings}.
 
     For examples of creating property bindings, see:
 
@@ -57,10 +72,6 @@
         \li \l{Exporting Properties}
     \endlist
 
-    For more information, watch the following video:
-
-    \youtube UfvA04CIXv0
-
     \include creator-logical-operators.qdocinc logical operators
 
 */

doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc

@@ -60,6 +60,32 @@
 
     For more information, see \l{Setting Bindings}.
 
+    \section1 Adding a Custom Property to a Component from the Connections View
+
+    You can add a custom property to a component from the \uicontrol {Connections} view.
+    Follow the process:
+
+    \list 1
+        \li Select the component you want to add a Custom property to in the
+            \uicontrol {2D} view or in the \uicontrol {Navigator} view.
+        \li Select \uicontrol {Properties} from the \uicontrol {Connections} view.
+
+            \image add-updated-local-custom-property.webp
+
+        \li Select the \inlineimage icons/plus.png
+             (\uicontrol Add) button to add a Custom property.
+        \li From the pop-up \uicontrol {Custom property editor}, select the \uicontrol {Type}
+            of the property you want to include.
+
+            \image add-updated-local-custom-property-editor.webp
+
+        \li Next, set the \uicontrol{Name} of the property.
+        \li Set a value to the Custom property in the \uicontrol {Value} field.
+    \endlist
+
+    \note Select the \inlineimage icons/minus.png
+          (\uicontrol Remove) to delete a Custom Property.
+
     \section1 Supported Property Types
 
     The following table describes the supported property types:

doc/qtdesignstudio/src/views/qtquick-connection-editor-signals.qdoc

@@ -38,88 +38,125 @@
     For more information about signals and signal handlers, see
     \l{Signal and Handler Event System}.
 
+    \section1 Connecting Components to Signals in the Connection View
+
     You can connect components to signals that are available to them in
-    \uicontrol Connections.
+    \uicontrol Connections. Then define \uicontrol Action for them. You can
+    put \b {logical conditions} on this \uicontrol Actions to control them
+    according to your needs.
 
-    \image qmldesigner-connections.png
+    \image qmldesigner-connections-advanced.webp
 
-    To connect components to signals:
+    Initiate a new connection for a component:
 
     \list 1
-        \li Go to the \uicontrol Connections tab in the \l Connections view.
+        \li Select the component you want to connect in the \uicontrol Navigator or \uicontrol 2D
+        view.
+        \li Go to the \uicontrol Connections tab in the \uicontrol Connections view.
         \li Select the \inlineimage icons/plus.png
             (\uicontrol Add) button to add a connection.
-        \li Double-click the value in the \uicontrol Target column to add the
-            component to connect to a signal.
-        \li Double-click the value in the \uicontrol {Signal Handler} column to
-            select the signal that the connection will listen to from a list of
-            all signals available for the component.
-        \li Double-click the value in the \uicontrol Actions column to specify
-            the action to perform when the signal is emitted. You use JavaScript
-            to specify the actions.
     \endlist
 
-    Right-click a connection and select \uicontrol {Open Connection Editor}
-    in the context menu to specify the connection in
-    \uicontrol {Connection Editor}.
+    \image qmldesigner-connections-editor.webp
 
-    For examples of using the \uicontrol {Connections} view, see:
-
-    \list
-        \li \l{Connecting Buttons to States} in \l{Log In UI - States}
-        \li \l{Connecting Buttons to State Changes} in \l{Washing Machine UI}
-    \endlist
-
-    \section1 Adding Signal Handlers
-
-    If a signal handler that you need is not listed in the
-    \uicontrol {Signal Handler} column, you can add it:
+    Connect component \uicontrol Signal to \uicontrol Action:
 
     \list 1
-        \li Right-click a component in the \l Navigator or \l {2D} 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
-            frequently used signals or property changes.
-        \li Select \uicontrol OK.
+        \li Select the interaction \uicontrol Signal for the \uicontrol Target component with
+            which you want to connect an \uicontrol Action.
+        \li Select an \uicontrol Action that you want to implement when the selected
+            \uicontrol Signal for the \uicontrol Target component is initiated.
+        \li You get different properties or sub-sections associated with the selected
+            \uicontrol Action. Select \uicontrol {Item/Method/State/Property/Value} from related
+            sub-sections. This way you can formulate changes in the design by manipulating
+            components.
+        \li Select \uicontrol {Add Condition} to include a logic to the selected \uicontrol Action.
+            To do this, you can first select the component you want to put logic on, and then
+            select the conditional statements \e {(i.e. AND, OR, EQUAL, NOT EQUAL, GREATER, LESS,
+            GREATER OR EQUAL, LESS OR EQUAL)} and then select another component to compare
+            between them.
+        \li Optional. You can include an \uicontrol {Else Statement} by selecting the
+            \uicontrol {Else Statement} control and adding components and conditional
+            statements in a similar way to the previous step.
+        \li Optional. To use complex conditional statements, select the \uicontrol {Manual Edit}
+            control. After you have entered your JavaScript statements, close the window to apply
+            them.
     \endlist
 
-    The added signal handler is automatically \l{Adding Property Aliases}
-    {exported as a property}.
+    \note Select a connection to re-open the \uicontrol {Connection Editor} for any
+        previously created \uicontrol Connection.
+    \note Select \inlineimage icons/minus.png
+          (\uicontrol Remove) to delete a connection.
 
-    \section1 Adding Actions and Assignments
+
+    \section1 Actions and Conditions
 
     You use the \uicontrol {Connection Editor} to create the JavaScript
-    expressions for \e actions and \e assignments. An \e action connects
-    an component to a signal, whereas an \e assignment fetches property values
-    from another component.
+    expressions for \e actions with \e conditions. An \e action connects
+    a component to a signal, whereas \e conditions fetch property values
+    from other components and compare them to each other. Based on that, you can later change
+    the components with JavaScript expressions.
 
     For more information about the logical operators that you can use to
     construct conditional expressions, see \l {Summary of Logical Operators}.
 
-    To create JavaScript expressions for actions:
+    \section2 Creating JavaScript Expressions
 
-    \list 1
-        \li Select \uicontrol {Open Connection Editor} in the context menu
-            in \uicontrol {Connections}.
-            \image qtquick-connection-editor-action.png
-        \li Select \uicontrol Action as the type of the connections component.
-        \li Select the component to connect to a signal.
-        \li Select the action to perform when the signal is emitted.
+    There are two ways to create JavaScript expressions for actions:
+
+    \list
+      \li Follow the steps described above in Connect component \uicontrol Signal to
+          \uicontrol Action. For a list of \uicontrol Actions and their properties, see
+          \l {Action Properties}.
+          \image qmldesigner-connections-ConditionalAction-Autometic.webp
+      \li Open the \uicontrol {Manual Code Edit} window from the
+          \uicontrol {Connections} view and write JavaScript expressions with components
+          and logical expressions manually.
     \endlist
 
-    To create JavaScript expressions for assignments:
+    \section2 Action Properties
+
+    \table
+        \header
+            \li Action
+            \li 1st Property
+            \li 2nd Property
+        \row
+            \li \uicontrol {Call Function}
+            \li \uicontrol {Item}: [Sets the component that is affected by the action of the
+                \b Target component's \b Signal.]
+            \li \uicontrol {Method}: [Sets the item component's method that is affected by the
+                \b Target component's \b Signal.]
+        \row
+            \li \uicontrol {Assign}
+            \li \uicontrol {From}: [Sets the component and its property from which the value
+                is copied when the \b Target component initiates the \b Signal.]
+            \li \uicontrol {To}: [Sets the component and its property to which the copied value
+                is assigned when the \b Target component initiates the \b Signal.]
+        \row
+            \li \uicontrol {Change State}
+            \li \uicontrol {State Group}: [Sets a \b {State Group} that is accessed when the
+                \b Target component initiates the \b Signal.]
+            \li \uicontrol {State}: [Sets a \b State within the assigned \b {State Group}
+                that is accessed when the \b Target component initiates the \b Signal.]
+        \row
+            \li \uicontrol {Set Property}
+            \li \uicontrol {Item}: [Sets the component that is affected by the action
+                of the \b Target component's \b Signal.]
+            \li \uicontrol {Property}: [Sets the property of the component that is
+                affected by the action of the \b Target component's \b Signal.]
+        \row
+            \li \uicontrol {Print Message}
+            \li \uicontrol {Message}: [Sets a text that is printed when the \b Signal
+                of the \b Target component initiates.]
+            \li N/A
+    \endtable
+
+    \note If you create a conditional expression by selecting options from drop-down menus in
+            the \uicontrol {Connection} view, you can only create a single
+            level {if-else} expression. For nested level \e {if-elseif-else} expressions,
+            you have to use the \uicontrol {Manual Code Edit}.
+
+    \image qmldesigner-connections-ConditionalAction-Manual.webp
 
-    \list 1
-        \li Select \uicontrol {Open Connection Editor} in the context menu
-            in \uicontrol {Connections}.
-            \image qtquick-connection-editor-assignment.png
-        \li Select \uicontrol Assignment as the type of the connections
-            component.
-        \li Select the target component for the property assignment.
-        \li Select the property of the target component to assign a value to.
-        \li Select the source component for the property assignment.
-        \li Select the property of the source component to fetch the value from.
-    \endlist
 */

doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc

@@ -12,7 +12,7 @@
     to create connections between components and the application, to bind
     component properties together, and to add custom properties for components.
 
-    \image qmldesigner-connections.png "The Connections view"
+    \image qmldesigner-connections.webp "The Connections view"
 
     The \l{glossary-component}{components} of the application UI and the
     application logic need to communicate with each other. For example, a