Merge remote-tracking branch 'origin/4.13' into master

Change-Id: I3f2a6c553819e992da7e9f538dc44b95b482359e

dist/changes-4.13.2.md

@@ -0,0 +1,72 @@
+Qt Creator 4.13.2
+=================
+
+Qt Creator version 4.13.2 contains bug fixes.
+
+The most important changes are listed in this document. For a complete
+list of changes, see the Git log for the Qt Creator sources that
+you can check out from the public Git repository. For example:
+
+    git clone git://code.qt.io/qt-creator/qt-creator.git
+    git log --cherry-pick --pretty=oneline origin/v4.13.1..v4.13.2
+
+Editing
+-------
+
+* Fixed annotation color for dark themes (QTCREATORBUG-24644)
+
+Projects
+--------
+
+* Fixed missing removal of replacement kits (QTCREATORBUG-24589)
+* Fixed issues with newlines in output windows (QTCREATORBUG-24668)
+
+### qmake
+
+* Fixed crash when parsing projects (QTCREATORBUG-23504)
+* Fixed crash when re-parsing project (QTCREATORBUG-24683)
+
+### Python
+
+* Fixed working directory for run configurations (QTCREATORBUG-24440)
+
+Qt Quick Designer
+-----------------
+
+* Improved connection editor dialog (QDS-2498, QDS-2495, QDS-2496)
+* Fixed list model editing (QDS-2696)
+* Fixed state editor updating (QDS-2798)
+
+Test Integration
+----------------
+
+### Catch2
+
+* Fixed file information on Windows with CMake
+
+Platforms
+---------
+
+### Web Assembly
+
+* Fixed missing C toolchains
+
+Credits for these changes go to:
+--------------------------------
+Aleksei German  
+Alessandro Portale  
+Christian Kandeler  
+Christian Stenger  
+Corey Pendleton  
+David Schulz  
+Eike Ziller  
+Fawzi Mohamed  
+Henning Gruendl  
+Jacek Nijaki  
+Johanna Vanhatapio  
+Kai Köhne  
+Leena Miettinen  
+Lukasz Ornatek  
+Marco Bubke  
+Thomas Hartmann  
+Venugopal Shivashankar  

doc/qtcreator/src/qtcreator-toc.qdoc

@@ -104,6 +104,7 @@
                         \li \l{Specifying Item Properties}
                         \li \l{Using Custom Fonts}
                         \li \l{Annotating Designs}
+                        \li \l{Loading Placeholder Data}
                         \li \l{Qt Quick UI Forms}
                    \endlist
                 \li \l {Adding Dynamics}

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

@@ -26,7 +26,11 @@
 /*!
     \page qtquick-annotations.html
     \previouspage qtquick-fonts.html
+    \if defined(qtdesignstudio)
     \nextpage creator-quick-ui-forms.html
+    \else
+    \nextpage qtquick-placeholder-data.html
+    \endif
 
     \title Annotating Designs
 

doc/qtcreator/src/qtquick/qtquick-placeholder-data.qdoc

@@ -0,0 +1,123 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Creator documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \page qtquick-placeholder-data.html
+    \if defined(qtdesignstudio)
+    \previouspage studio-simulation-overview.html
+    \nextpage studio-javascript.html
+    \else
+    \previouspage qtquick-annotations.html
+    \nextpage creator-quick-ui-forms.html
+    \endif
+
+    \title Loading Placeholder Data
+
+    The Design mode supports views, models, and delegates, so that when you add
+    a Grid View, List View, or Path View item, the ListModel and the delegate
+    item are added automatically.
+
+    However, the missing context of the application presents a challenge.
+    Specific models defined in C++ are the most obvious case. Often,
+    the context is missing simple properties, which are either defined in C++,
+    or in other QML files. A typical example is an item that uses the
+    properties of its parent, such as \c parent.width.
+
+    \section1 Using Dummy Models
+
+    If you open a file in the Design mode that references a C++ model, you see
+    nothing on the canvas. If the data in the model is fetched from the
+    internet, you have no control over it. To get reliable data, \e {dummy data}
+    was introduced.
+
+    For example, the following code snippet describes the file example.qml that
+    contains a ListView that in turn specifies a C++ model:
+
+    \qml
+        ListView {
+            model: dataModel
+            delegate: ContactDelegate {
+                name: name
+            }
+        }
+    \endqml
+
+    Create a directory named \e dummydata in the root directory of the project,
+    so that it is not deployed to the device. In the \c dummydata directory,
+    create a QML file that has the same name as the value of \c model:
+
+    \code
+        qml/exampleapp/example.qml
+        dummydata/dataModel.qml
+    \endcode
+
+    Then create the dataModel.qml file that contains the dummy data:
+
+    \qml
+        import QtQuick 2.0
+
+        ListModel {
+             ListElement {
+                 name: "Ariane"
+             }
+             ListElement {
+                 name: "Bella"
+             }
+             ListElement {
+                 name: "Corinna"
+             }
+        }
+    \endqml
+
+    \section1 Creating Dummy Context
+
+    The following example presents a common pattern in QML:
+
+    \qml
+        Item {
+            width: parent.width
+            height: parent.height
+        }
+    \endqml
+
+    This works nicely for applications but the Design mode displays a zero-sized
+    item. A parent for the opened file does not exist, because the context is
+    missing. To get around the missing context, the idea of a \e {dummy
+    context} is introduced. If you place a file with the same name as the
+    application (here, example.qml) in the \c {dummydata/context} directory,
+    you can fake a parent context:
+
+    \qml
+        import QtQuick 2.0
+        import QmlDesigner 1.0
+
+        DummyContextObject {
+            parent: Item {
+                width: 640
+                height: 300
+            }
+        }
+    \endqml
+*/

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

@@ -32,27 +32,16 @@
 
     The \uicontrol Properties view displays all the properties of the selected
     item. The properties are grouped by type. The top part of the view displays
-    properties that are common to all QML types, such as type, id, position,
+    properties that are common to all QML types, such as type name, id,
-    size, and visibility.
+    position, size, and visibility.
+
+    \image qtquick-item-properties-common.png "Basic item properties"
 
     The bottom part of the view displays properties that have been defined for
     the QML type. For example, the following image displays the predefined
     properties you can set for \uicontrol Rectangle and \uicontrol Text items.
 
-    \image qmldesigner-element-properties.png
+    \image qmldesigner-element-properties.png "Rectangle and Text properties"
-
-    When you create a component using a QML type, the component has all the
-    properties of the type you used. If you realize later that another
-    QML type with another set of predefined properties would be more suitable
-    for your purposes, you can change the component type by double-clicking the
-    \uicontrol Type field in the \uicontrol Properties view. Enter the name of
-    another QML type in the field.
-
-    If you have specified values for properties that are not supported by
-    the new type, \QC offers to remove them for you. If you'd rather do
-    this yourself, you can select the \inlineimage icons/action-icon.png
-    (\uicontrol Actions) menu next to the property name, and then select
-    \uicontrol Reset to remove the property values before trying again.
 
     To modify the values of common properties of multiple items simultaneously,
     select the items in the \uicontrol Navigator or on the canvas:
@@ -149,6 +138,9 @@
     You can use either a solid color (3) or a gradient (4). You can select the
     gradient in the \uicontrol {Gradient Picker} (5).
 
+    The gradient stops (6) specify the color used at a given position in a
+    gradient. Drag them along the slider to set their values.
+
     The \uicontrol Original field displays the original color of the item,
     whereas the \uicontrol New field displays the current color. The
     \uicontrol Recent field displays the colors that you have last selected.
@@ -203,102 +195,234 @@
     You can add other languages later by editing the project file.
     \endif
 
-    \section1 Loading Placeholder Data
+    \section1 Specifying Basic Item Properties
 
-    The Design mode supports views, models, and delegates, so that when you add
+    All QML types share a set of properties that you can specify in
-    a Grid View, List View, or Path View item, the ListModel and the delegate
+    \uicontrol Properties.
-    item are added automatically.
 
-    However, the missing context of the application presents a challenge.
+    \image qtquick-item-properties-common.png "Basic item properties"
-    Specific models defined in C++ are the most obvious case. Often,
-    the context is missing simple properties, which are either defined in C++,
-    or in other QML files. A typical example is an item that uses the
-    properties of its parent, such as \c parent.width.
 
-    \section2 Using Dummy Models
+    \section2 Type
 
-    If you open a file in the Design mode that references a C++ model, you see
+    When you create a component using a QML type, the component has all the
-    nothing on
+    properties of the type you used. If you realize later that another QML
-    the canvas. If the data in the model is fetched from the internet, you have
+    type with another set of predefined properties would be more suitable for
-    no control over it. To get reliable data, \e {dummy data} was introduced.
+    your purposes, you can change the component type by double-clicking the
+    \uicontrol Type field and entering the name of another QML type in the
+    field.
 
-    For example, the following code snippet describes the file example.qml that
+    If you have specified values for properties that are not supported by
-    contains a ListView that in turn specifies a C++ model:
+    the new type, \QC offers to remove them for you. If you'd rather do
+    this yourself, you can select the \inlineimage icons/action-icon.png
+    (\uicontrol Actions) menu next to the property name, and then select
+    \uicontrol Reset to remove the property values before trying again.
 
-    \qml
+    \section2 Id
-        ListView {
-            model: dataModel
-            delegate: ContactDelegate {
-                name: name
-            }
-        }
-    \endqml
 
-    Create a directory named \e dummydata in the root directory of the project,
+    Each QML type and each instance of a QML type has an \e id that uniquely
-    so that it is not deployed to the device. In the \c dummydata directory,
+    identifies it and enables other items' properties to be bound to it.
-    create a QML file that has the same name as the value of \c model:
+    You can specify ids for items in the \uicontrol Id field.
 
-    \code
+    An id must be unique, it must begin with a lower-case letter or an
-        qml/exampleapp/example.qml
+    underscore character, and it can contain only letters, numbers, and
-        dummydata/dataModel.qml
+    underscore characters.
-    \endcode
 
-    Then create the dataModel.qml file that contains the dummy data:
+    For more information, see \l{The id Attribute}.
 
-    \qml
+    The value of the \uicontrol {Custom id} field specifies the name of an
-        import QtQuick 2.0
+    \l{Annotating Designs}{annotation}.
 
-        ListModel {
+    \section2 Geometry
-             ListElement {
-                 name: "Ariane"
-             }
-             ListElement {
-                 name: "Bella"
-             }
-             ListElement {
-                 name: "Corinna"
-             }
-        }
-    \endqml
 
-    \section2 Creating Dummy Context
+    In the \uicontrol Position group, you can set the position of an item on
+    the x and y axis.
 
-    The following example presents a common pattern in QML:
+    The z position of an item determines its position in relation to its
+    sibling items in the type hierarchy. You can set it in the \uicontrol Z
+    field in the \uicontrol Advanced tab. However, you would typically set
+    it in \uicontrol Navigator by \l{Setting the Stacking Order}
+    {setting the stacking order} of items.
 
-    \qml
+    In the \uicontrol Size group, you can set the width and height of
-        Item {
+    an item. You can also use selection handles to \l{Resizing Items}
-            width: parent.width
+    {resize items} in \uicontrol {Form Editor}. The values in the
-            height: parent.height
+    \uicontrol X and \uicontrol Y fields change accordingly.
-        }
-    \endqml
 
-    This works nicely for applications but the Design mode displays a zero-sized
+    The item size and position can also be managed automatically
-    item. A parent for the opened file does not exist, because the context is
+    when \l{Using Layouts}{using layouts}.
-    missing. To get around the missing context, the idea of a \e {dummy
-    context} is introduced. If you place a file with the same name as the
-    application (here, example.qml) in the \c {dummydata/context} directory,
-    you can fake a parent context:
 
-    \qml
+    The width and height of the root item in a QML file determine the
-        import QtQuick 2.0
+    size of a component. The component size might also be zero (0,0)
-        import QmlDesigner 1.0
+    if its final size is determined by property bindings. For more
+    information, see \l {Previewing Component Size}.
 
-        DummyContextObject {
+    \section2 Visibility
-            parent: Item {
-                width: 640
-                height: 300
-            }
-        }
-    \endqml
 
-    \section1 Building Transformations on Items
+    You can use the properties in the \uicontrol Visibility group to show and
+    hide items.
 
-    The \uicontrol Advanced tab allows you to configure advanced
+    Deselect the \uicontrol {Is visible} check box to hide an item and all its
-    transformations, such as rotation, scale, and translation. You
+    child items, unless they have explicitly been set to be visible. This might
-    can assign any number of transformations to an item. Each
+    have surprise effects when using property bindings. In such cases, it may be
-    transformation is applied in order, one at a time.
+    better to use the \uicontrol Opacity property instead.
 
-    For more information on Transform types, see \l{Transform}.
+    If this property is disabled, the item will no longer receive mouse events,
+    but will continue to receive key events and will retain the keyboard focus
+    if it has been set by selecting the \uicontrol Enabled check box in the
+    \uicontrol Advanced tab.
+
+    The visibility value is only affected by changes to this property or the
+    parent's visible property. It does not change, for example, if this item
+    moves off-screen, or if the opacity changes to 0.
+
+    In the \uicontrol Opacity field, specify the opacity of an item as a number
+    between 0.0 (fully transparent) and 1.0 (fully opaque). The specified
+    opacity is also applied individually to child items, sometimes with
+    surprising effects.
+
+    Changing an item's opacity does not affect whether the item receives user
+    input events.
+
+    You can \l{Creating Animations}{animate} the opacity value to make items
+    fade in and out.
+
+    If the \uicontrol Clip check box is selected, the item and its children are
+    clipped to the bounding rectangle of the item.
+
+    \section1 Managing 2D Transformations
+
+    You can assign any number of transformations, such as rotation and scaling,
+    to an item in the \uicontrol Advanced tab of the \uicontrol Properties view.
+    Each transformation is applied in order, one at a time.
+
+    \image qtquick-item-properties-advanced.png "Advanced item properties"
+
+    In the \uicontrol Origin field, select the origin point for scaling and
+    rotation.
+
+    Set the scale factor in the \uicontrol Scale field. A value of less than
+    1.0 makes the component smaller, whereas a value greater than 1.0 makes
+    it larger. A negative value causes the component to be mirrored in
+    \uicontrol {Form Editor}.
+
+    In the \uicontrol Rotation field, specify the rotation of the component
+    in degrees clockwise around the origin point.
+
+    \section1 Specifying Developer Properties
+
+    In the \uicontrol Advanced tab of the \uicontrol Properties view, you can
+    manage the more advanced properties of QML types that are based on the
+    \l Item type and are mostly used by application developers.
+
+    Select the \uicontrol Smooth check box to activate smooth sampling. Smooth
+    sampling is performed using linear interpolation, while non-smooth sampling
+    is performed using the nearest neighbor. Because smooth sampling has minimal
+    impact on performance, it is activated by default.
+
+    The value of the \uicontrol {Baseline offset} specifies the position of the
+    item's baseline in local coordinates. The baseline of a Text item is the
+    imaginary line on which the text sits. Controls containing text usually set
+    their baseline to the baseline of their text. For non-text items, a default
+    baseline offset of 0 is used.
+
+    \section2 Managing Mouse and Keyboard Events
+
+    Select the \uicontrol Enabled check box to allow the item to receive mouse
+    and keyboard events. The children of the item inherit this behavior, unless
+    you explicitly set this value for them.
+
+    You can enable the \uicontrol Focus check box to specify that the item has
+    active focus and the \uicontrol {Active focus on tab} check box to add the
+    item to the \e {tab focus chain}. The tab focus chain traverses elements by
+    first visiting the parent, and then its children in the order they are
+    defined. Pressing \key Tab on an item in the tab focus chain moves
+    keyboard focus to the next item in the chain. Pressing back tab (usually,
+    \key {Shift+Tab}) moves focus to the previous item.
+
+    \section2 Using Layers
+
+    Qt Quick 2 makes use of a dedicated scene graph that is then traversed and
+    rendered via a graphics API such as OpenGL ES, OpenGL, Vulkan, Metal, or
+    Direct 3D. Using a scene graph for graphics rather than the traditional
+    imperative painting systems, means that the scene to be rendered can be
+    retained between frames and the complete set of primitives to render is
+    known before rendering starts. This opens up for a number of optimizations,
+    such as \l{Batching}{batch rendering} to minimize state changes and
+    discarding obscured primitives.
+
+    For example, if a user-interface contains a list of ten items where each
+    item has a background color, an icon and a text. Using the traditional
+    drawing techniques, this would result in 30 draw calls and a similar
+    amount of state changes. A scene graph, on the other hand, could reorganize
+    the primitives to render such that all backgrounds are drawn in one call,
+    then all icons, then all the text, reducing the total amount of draw calls
+    to only 3. Batching and state change reduction like this can greatly
+    improve performance on some hardware.
+
+    You need a basic understanding of how items are rendered in QML
+    to be able to set layer properties. Rendering is described in
+    \l {Qt Quick Scene Graph Default Renderer}.
+
+    \image qtquick-item-properties-layer.png "Layer properties"
+
+    Items are normally rendered directly into the window they belong to.
+    However, by selecting the \uicontrol Enabled check box in the
+    \uicontrol Layer group, you can delegate the item and its entire subtree
+    into an offscreen surface. Only the offscreen surface, a texture, will
+    then be drawn into the window. For more information, see \l{Item Layers}.
+
+    When layering is enabled, you can use the item directly as a texture,
+    in combination with the item you select in the \uicontrol Effect field.
+    Typically, this item should be a shader effect with a source texture
+    specified. You can use the effects in the \uicontrol Effects section
+    of \uicontrol Library that are based on the QML types in the
+    \l {Qt Graphical Effects} module.
+
+    To enable the item to pass the layer's offscreen surface to the effect
+    correctly, the \uicontrol {Sampler name} field is set to the source
+    property of the texture.
+
+    Note that when an item's layer is enabled, the scene graph will allocate
+    memory in the GPU equal to width x height x 4. In memory constrained
+    configurations, large layers should be used with care. Also, an item
+    using a layer cannot be batched during rendering. This means that a
+    scene with many layered items may have performance problems.
+
+    By default, multisampling is enabled for the entire window if the scenegraph
+    renderer is in use and the underlying graphics API supports it. By setting
+    the value in the \uicontrol Samples field, you can request multisampling for
+    a part of the scene. This way, multisampling is applied only to a particular
+    subtree, which can lead to significant performance gain. Even then, enabling
+    multisampling can be potentially expensive regardless of the layer's size,
+    as it incurs a hardware and driver dependent performance and memory cost. If
+    support for multisample renderbuffers and framebuffer blits is not
+    available, the value is silently ignored.
+
+    The value of the \uicontrol Format field specifies the internal OpenGL
+    format of the texture. Depending on the OpenGL implementation, it might
+    allow you to save some texture memory. However, use the \uicontrol RGB
+    and \uicontrol Alpha values with caution, because the underlying hardware
+    and driver might not support them.
+
+    In the \uicontrol {Texture mirroring} field, specify whether the generated
+    OpenGL texture should be mirrored by flipping it along the x or y axis.
+    Custom mirroring can be useful if the generated texture is directly accessed
+    by custom shaders. If no effect is specified for the layered item, mirroring
+    has no effect on the UI representation of the item.
+
+    The item will use linear interpolation for scaling if the \uicontrol Smooth
+    check box is selected. To use a mipmap for downsampling, select the
+    \uicontrol Mipmap check box. Mipmapping may improve the visual quality of
+    downscaled items. For mipmapping of single Image items, select the
+    \uicontrol Mipmap check box in the image properties, instead.
+
+    To use a texture with a size different from that of the item, specify the
+    width and height of the texture in the \uicontrol {Texture size} field.
+
+    The \uicontrol {Wrap mode} defines the OpenGL wrap modes associated with
+    the texture. You can clamp the texture to edges or repeat it horizontally
+    and vertically. Note that some OpenGL ES 2 implementations do not support
+    the \uicontrol Repeat wrap mode with non-power-of-two textures.
 
     \section1 Editing Properties Inline
 

doc/qtcreator/src/qtquick/qtquick-ui-forms.qdoc

@@ -31,7 +31,11 @@
 
 /*!
     \page creator-quick-ui-forms.html
+    \if defined(qtdesignstudio)
     \previouspage qtquick-annotations.html
+    \else
+    \previouspage qtquick-placeholder-data.html
+    \endif
     \nextpage qtquick-adding-dynamics.html
 
     \title Qt Quick UI Forms

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

@@ -101,6 +101,15 @@
             You can annotate your designs to provide reviewers or developers
             with additional information about them.
 
+        \if defined(qtcreator)
+        \li \l {Loading Placeholder Data}
+
+            You can create QML files that contain placeholder data, so that
+            you can test grid, list, or path views, even though you don't
+            have access to real data.
+
+        \endif
+
     \if defined(qtdesignstudio)
     \endlist
 

doc/qtdesignstudio/examples/doc/loginui1.qdoc

@@ -58,12 +58,18 @@
         \li Select \uicontrol File > \uicontrol {New File or Project} >
             \uicontrol General > \uicontrol {Qt Quick Application - Empty} >
             \uicontrol Choose.
-        \li In the \uicontrol Name field, enter \e {loginui1}.
+        \li In the \uicontrol Name field, enter the project name: \e {loginui1}.
-        \li In the \uicontrol {Create in} field, enter the path for the project
+            When naming your own projects, keep in mind that they cannot be
-            files
+            easily renamed later.
+        \li In the \uicontrol {Create in} field, enter the path to the folder
+            where you want to store the project files. You can move project
+            folders later without problems.
         \li Select \uicontrol Next (or \uicontrol Continue on \macos) to
             continue to the \uicontrol {Define Project Details} page.
-        \li In the \uicontrol {Screen resolution} field, select \e {640 x 480}.
+        \li In the \uicontrol {Screen resolution} field, select the initial
+            size of the UI. In this example, we use the smallest predefined
+            size, \e {640 x 480}. You can easily change the screen size later
+            in \uicontrol Properties.
         \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
             the project.
     \endlist
@@ -113,15 +119,22 @@
     For more information about creating a QML file from scratch, see
     \l{First Steps with QML}.
 
-    Next, you will edit the properties of the UI elements to create the main
+    Next, you will edit the values of the properties of the UI elements to
-    page of the UI.
+    create the main page of the UI.
 
     \section1 Creating the Main Page
 
-    You will now change the properties of the \l Rectangle type to turn the UI
+    You will now change the values of the properties of the \l Rectangle
-    background white and those of the \l Text type to change the text and to use
+    component to add a gradient to the UI background and those of the
-    a larger font size. In addition, you will use the \l Image type to add the
+    \l Text component to set the title text in a larger strong font. In
-    Qt logo to the page.
+    addition, you will import an image as an asset and add it to the page.
+
+    To be able to use an image in the UI, you must add it to your project
+    in the \uicontrol Assets tab of \uicontrol Library. 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. The image is only used for decoration, so you can also use
+    any other image or just leave it out.
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
@@ -142,25 +155,35 @@
        \li Select \e Rectangle in the \uicontrol Navigator view to display its
             properties in \uicontrol Properties.
         \li In the \uicontrol Color field, select the
-            \inlineimage icons/action-icon-binding.png
+            \inlineimage icon_color_gradient.png
-            (\uicontrol Actions) menu, and then select \uicontrol Reset to
+            (\uicontrol Gradient) button to add a linear gradient to the
-            reset the rectangle background to the default color, white.
+            screen background. In this example, the color changes from
-        \li Select \e Text in \uicontrol Navigator.
+            white to green (#41cd52), with a stop point set at position 0.5.
-        \li In the \uicontrol id field, enter the id \e pageTitle.
+            You can use your favorite colors or select a predefined gradient
-        \li In the \uicontrol Text field, enter \e {Qt Account}.
+            in the \uicontrol {Gradient Picker}.
-        \li In the \uicontrol Font group, \uicontrol Size field, set the font
+            \image loginui1-background-gradient.png "Rectangle color properties"
-            size to \e 24 pixels.
+        \li Select \e Text in \uicontrol Navigator to display its properties in
-        \li Drag and drop an \l Image type from \uicontrol Library >
+            \uicontrol Properties.
-            \uicontrol {QML Types} > \uicontrol {Qt Quick Basic} to the
+            \image loginui1-text-properties.png "Text properties"
-            top-left corner of the rectangle.
+            \list a
+                \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.
+                \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.
+                \li In the \uicontrol {Font style} field, select the
+                    \uicontrol B button to use a strong font.
+            \endlist
+        \li Drag and drop the Qt logo from the \uicontrol Assets tab of
+            \uicontrol Library to the top-left corner of the rectangle.
+            \image loginui1-library-assets.png "Library view Assets tab"
+            \QDS automatically creates a component of the \l Image type
+            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 Source field, select the \inlineimage browse-button.png
-            (\uicontrol Browse) button to locate the Qt logo image file. 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 in the
-            folder where you created the project. The image is only used for
-            decoration, so you can also use any other image or just leave it
-            out.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
@@ -189,9 +212,53 @@
     types, and they will be listed under \uicontrol {My QML Components}.
     This section is only visible if you have created custom QML components.
 
-    For more information about the \l Rectangle and \l Image types used in this
+    The \l [QtQuick] {Rectangle}, \l Text, and \l Image types used in this example are
-    example, see \l{Use Case - Visual Elements In QML}. For descriptions of all
+    based on the \l Item type. It is the base type for all visual elements,
-    QML types, see \l{All QML Types} in the Qt reference documentation.
+    with implementation of basic functions and properties, such as type
+    name, ID, position, size, and visibility.
+
+    For more information, see \l{Use Case - Visual Elements In QML}. For
+    descriptions of all QML types, see \l{All QML Types} in the Qt reference
+    documentation.
+
+    \section3 Regtangle Properties
+
+    The basic \l [QtQuick] {Rectangle} QML type is used for drawing shapes
+    with 4 sides and 4 corners. You can fill rectangles either with a solid
+    fill color or a gradient. You can specify the border color separately.
+    By setting the value of the radius property, you can create shapes with
+    rounded corners.
+
+    If you want to specify the radius of each corner separately, you can
+    use the \l Rectangle type from the Qt Quick Studio Components module
+    instead of the basic rectangle type. It is available in the
+    \uicontrol {Studio Components} tab of \uicontrol Library.
+
+    \section3 Text Properties
+
+    The \l Text type is used for adding static text to the UI, such as titles
+    and labels. You can select the font to use and specify extensive properties
+    for each text item, such as size in points or pixels, weight, style, and
+    spacing.
+
+    To display custom fonts in the list of available fonts in
+    \uicontrol Properties, add them in the \uicontrol Assets
+    tab of \uicontrol Library.
+
+    If you want to create a label with a background, use the \l Label type
+    from the Qt Quick Controls module instead of the Text type.
+
+    \section3 Image Properties
+
+    The \l Image type is used for adding images to the UI in several supported
+    formats, including bitmap formats such as PNG and JPEG and vector graphics
+    formats such as SVG. You must add the images to your project in the
+    \uicontrol Assets tab of \uicontrol Library to be able to use them in
+    designs.
+
+    If you need to display animated images, use the \l {AnimatedImage}
+    {Animated Image} type, also available in the \uicontrol {Qt Quick - Basic}
+    tab of \uicontrol Library.
 
     \section1 Creating a Push Button
 
@@ -201,9 +268,11 @@
     drag and drop it to \uicontrol {Form Editor} and modify its properties
     in \uicontrol Properties to change its appearance and functionality.
 
-    If you find that you cannot use the wizard template to create the kind of
+    If you find that you cannot use the wizard template nor the ready-made
-    push button that you want, you can create your button from scratch using
+    button controls available in the \uicontrol {Qt Quick Controls 2} tab
-    basic QML types. For more information, see \l {Creating Buttons} and
+    in \uicontrol Library to create the kind of push button that you want,
+    you can create your button from scratch using basic QML types. For more
+    information, see \l {Creating Buttons} and
     \l {Creating Scalable Buttons and Borders}.
 
     To create a push button:
@@ -212,7 +281,8 @@
         \li Select \uicontrol File > \uicontrol {New File or Project} >
             \uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls} >
             \uicontrol {Custom Button} > \uicontrol Choose.
-        \li In the \uicontrol {Component name} field, enter \e {PushButton}.
+        \li In the \uicontrol {Component name} field, enter a name for your
+            button type: \e {PushButton}.
         \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
             the button.
     \endlist
@@ -269,24 +339,22 @@
             properties in the \uicontrol Properties view.
         \li In the \uicontrol Color field, select
             \inlineimage icons/action-icon.png
-            (\uicontrol Actions) > \uicontrol {Set Binding} and set the
+            (\uicontrol Actions) > \uicontrol Reset to reset the button
-            button background color to \e #41cd52.
+            background color to the default color, white.
-        \li Press \key Enter or select \uicontrol OK to save the new value.
+        \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.
             \image loginui1-binding-editor.png "Binding Editor"
-        \omit
+        \li Press \key Enter or select \uicontrol OK to save the new value.
-        \li In the \uicontrol {Border Color} field, set the button
+        \li In the \uicontrol Radius field, enter 20 to give the button
-            border color to \e #21be2b. You could also use the color picker
-            to change the button color.
-        \li In the \uicontrol Radius field, enter 6 to give the button
             rounded corners.
-        \endomit
         \li Select the text item in \uicontrol Navigator to display its
             properties in \uicontrol Properties.
-        \li In the \uicontrol {Text color} field, set the button text
+        \li In the \uicontrol {Font style} field, select the \uicontrol B button
-            color to white (\e #ffffff).
+            to use the strong font.
         \li In the \uicontrol States view, select the \e down state to set the
-            button text color to white and the background color to a darker
+            button text color to the same green as the border.
-            shade of green (\e #21be2b).
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
@@ -327,7 +395,7 @@
             to open it in \uicontrol {Form Editor}.
         \li Drag and drop two instances of the PushButton type from
             \uicontrol Library to \uicontrol {Form Editor}.
-            \image loginui1-library.png "Library view"
+            \image loginui1-library.png "My QML 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.

doc/qtdesignstudio/examples/doc/loginui2.qdoc

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Design Studio documentation.
@@ -53,11 +53,9 @@
 
     \section1 Anchoring UI Components
 
-    First, you will add a new rectangle to \uicontrol {Form Editor} and move
+    First, you will \l {Setting Anchors and Margins}{anchor} the static page
-    all the current UI components to it to create a new page. Then, you will
+    elements, logo image (\e logo) and page title (\e pageTitle), to the page.
-    \l {Setting Anchors and Margins}{anchor} the static elements on the
+    When you created the project using the new project wizard template
-    page, that is the logo image (\e logo) and page title (\e pageTitle), to the
-    page. When you created the project using the new project wizard template
     in Part 1 of this example, the wizard template anchored \e pageTitle to the
     vertical and horizontal center of the page. Therefore, you will only
     need to replace the vertical anchor of \e pageTitle with a top anchor
@@ -73,23 +71,11 @@
     \list 1
         \li Open \e {Screen01.ui.qml} for editing in the
             \uicontrol {Form Editor} view.
-        \li Select the rectangle that forms the UI background in the
-            \uicontrol Navigator view, and change its id to \e root in the
-            \uicontrol Properties view.
-        \li Drag and drop a \uicontrol Rectangle from the \uicontrol Library
-            view to \e root in \uicontrol Navigator, and change its id to
-            \e loginPage in \uicontrol Properties.
-        \li Under \uicontrol Layout, select the \inlineimage anchor-fill.png
-            (\uicontrol {Fill Parent Item}) button to anchor the page to the root
-            item on all sides.
-        \li Select all the other UI elements below \e root in
-            \uicontrol Navigator (press the \key Shift key for multiple
-            selection) and drag them to \e loginPage.
         \li Select \e logo in \uicontrol Navigator.
         \li Select the \inlineimage anchor-top.png
             (\uicontrol Top) and \inlineimage anchor-left.png
             (\uicontrol Left) anchor buttons to anchor \e logo to the top left
-            corner of its parent (\e loginPage) with 10-pixel margins.
+            corner of its parent with 10-pixel margins.
         \li Select \e pageTitle in \uicontrol Navigator.
         \li Deselect the \inlineimage anchor-vertical-center.png
             (\uicontrol {Vertical Center}) button to remove the
@@ -132,26 +118,33 @@
             \uicontrol {+ \QtQuick.Controls} button to display the
             \l {Qt Quick Controls 2} types in the tab:
             \image loginui2-imports.png
-        \li Drag and drop two instances of the \uicontrol {Text Field} type
+        \li Drag and drop two instances of the \uicontrol {Text Field}
-            to \uicontrol {Form Editor}.
+            type from the \uicontrol {Qt Quick Controls 2} tab to
+            \uicontrol {Form Editor}.
         \li Select one of the text fields in \uicontrol Navigator, and
             change its id to \e usernameField in \uicontrol Properties.
-        \li In the \uicontrol Geometry group, \uicontrol Size field, set the
+        \li In the \uicontrol Geometry group, \uicontrol Size field,
-            width of the field to \e 300 pixels.
+            make the field wide enough to accommodate long user names
-        \li In the \uicontrol Placeholder field, enter \e Username and select
+            by setting its width to \e 300 pixels.
-            \uicontrol tr to mark the text translatable.
+        \li In the \uicontrol Placeholder field, set the text to display
+            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
             \e passwordField, placeholder text to \e Password,
             and width to \e 300 pixels.
     \endlist
 
+    The Text Field type has additional properties that you can use to change
+    its appearance. For example, you can change the color, font, alignment, or
+    word and letter spacing of the placeholder text.
+
     You will now position the fields and buttons as columns:
 
     \list 1
-        \li Select \e usernameField and \e passwordField in
+        \li Select \e usernameField and \e passwordField in \uicontrol Navigator
-            \uicontrol Navigator, and right-click on either item
+            (press the \key Shift key for multiple selection), and right-click
-            to open a context menu.
+            either of them to open a context menu.
         \li Select \uicontrol Position > \uicontrol {Position in Column}
             to position the fields on top of each other in
             \uicontrol {Form Editor}.
@@ -173,7 +166,7 @@
         \li Select \e fieldColumn in \uicontrol Navigator.
         \li In \uicontrol Properties > \uicontrol Layout, select the
             \uicontrol Top button to anchor the top of the button column to
-            the top of its parent (the \e loginPage) with a 200-pixel margin.
+            the top of its parent with a 200-pixel margin.
         \li Select the \inlineimage anchor-horizontal-center.png
             (\uicontrol {Horizontal Center}) button to center the field
             column horizontally on the page.
@@ -181,8 +174,7 @@
         \li In \uicontrol Properties > \uicontrol Layout, select the
             \inlineimage anchor-bottom.png
             (\uicontrol Bottom) button to anchor the bottom of the button
-            column to the bottom of its parent (the \e loginPage) with a
+            column to the bottom of its parent with a 50-pixel margin.
-            50-pixel margin.
         \li Select the \uicontrol {Horizontal Center} button to center
             the button column horizontally on the page.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}

doc/qtdesignstudio/examples/doc/loginui3.qdoc

@@ -38,7 +38,9 @@
     \e{Log In UI - Part 3} is the third in a series of examples that build
     on each other to illustrate how to use \QDS to create a simple UI with
     some basic UI components, such as pages, buttons, and entry fields. Part 3
-    describes how to use states to add a second page to the UI.
+    describes how to use \e states to add a second page to the UI. On the
+    first page, users can enter a username and password to log in. On the
+    second page, they can register if they do not already have an account.
 
     Because the second page will contain most of the same UI elements as the
     login page, you will use \e states to show and hide UI elements as necessary
@@ -59,7 +61,7 @@
     You will add another text field for verifying the password that users
     enter to create an account and a back button for returning to the login
     page. You are already familiar with the tasks in this section from Part 1
-    of this example.
+    and Part 2 of this example.
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
@@ -76,11 +78,12 @@
         \li In \uicontrol Properties, change the id of the text field to
             \e verifyPasswordField.
         \li In the \uicontrol Geometry group, \uicontrol Size field, set the
-            width of the field to \e 300 pixels.
+            width of the field to \e 300 pixels to match the size of the
+            existing fields.
         \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 type from \uicontrol Library >
-            \uicontrol {My QML Components} to \e loginPage in
+            \uicontrol {My QML Components} to their parent rectangle in
             \uicontrol Navigator.
         \li Select the button in \uicontrol Navigator and change its id to
             \e backButton in \uicontrol Properties.
@@ -92,8 +95,8 @@
         \li Under \uicontrol Layout, select the \inlineimage anchor-top.png
             (\uicontrol Top) and \inlineimage anchor-right.png
             (\uicontrol Right) anchor buttons to anchor \e backButton to
-            the top right corner of its parent (the \e loginPage) with 20-
+            the top right corner of its parent with 20- and 10-pixel margins,
-            and 10-pixel margins, respectively.
+            respectively.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
@@ -111,7 +114,7 @@
     \section1 Using States to Simulate Page Changes
 
     You will now add \l{Adding States}{states} to the UI to show and hide UI
-    components in the \uicontrol {Form Editor}:
+    components in the \uicontrol {Form Editor}, depending on the current page:
 
     \list 1
         \li In the \uicontrol States view, select \uicontrol {Create New State}.
@@ -122,7 +125,7 @@
             \uicontrol Properties to hide the verify password field in
             the login state.
             \image loginui3-visibility.png
-        \li Repeat the above step for \e backButton.
+        \li Repeat the above step for \e backButton to hide it, too.
         \li In \uicontrol States, select \inlineimage icons/action-icon.png
             for \e loginState to open the \uicontrol Actions menu, and then
             select \uicontrol {Set as Default} to determine that \e loginState
@@ -217,8 +220,8 @@
     \section2 Learn Qt Quick - Signal and Event Handlers
 
     UI components need to communicate with each other. For example, a button
-    needs to know that the user has clicked on it. The button may change color
+    needs to know that the user has clicked on it. In response, the button may
-    to indicate its state and perform an action.
+    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

doc/qtdesignstudio/examples/doc/loginui4.qdoc

@@ -86,15 +86,16 @@
             (\uicontrol Close) button in \e loginState and \e registerState
             to remove the states.
         \li Select the fields in \e fieldColumn in \uicontrol Navigator
-            and drag and drop them to \e loginPage.
+            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
             \inlineimage anchor-top.png
             (\uicontrol Top) button to anchor the top of the field to the top
-            of its parent (\e loginPage). \QDS will suggest an appropriate
+            of its parent. \QDS will suggest an appropriate margin based on
-            margin based on the current Y-position of the field.
+            the current position of the field on the y axis, 200 pixels.
         \li Select the \inlineimage anchor-horizontal-center.png
             (\uicontrol {Horizontal Center}) button to anchor
             the horizontal center of the field to that of its parent.
@@ -112,7 +113,7 @@
             to save your changes.
     \endlist
 
-    You could also animate the Y-position property of the verify password
+    You could also animate the y-position property of the verify password
     field for a similar effect. In that case, you would need to use absolute
     positioning for the field. This is less flexible if you export your
     design from a design tool, such as Adobe Photoshop, and decide to change
@@ -168,15 +169,20 @@
         \li In \uicontrol Properties > \uicontrol Opacity > \uicontrol Settings,
             select \uicontrol {Insert Keyframe} to insert a keyframe for the
             opacity property of the button.
-        \li Check that the playhead is in frame 0, and select the
+        \li In \uicontrol Timeline, check that the playhead is in
-            \inlineimage recordfill.png
+            frame 0, and select the \inlineimage recordfill.png
-            (Per Property Recording) button for the \uicontrol opacity property
+            (\uicontrol {Per Property Recording}) button for the
-            of \e backButton to start recording property changes.
+            \uicontrol opacity property of \e backButton to start
+            recording property changes.
             \image loginui4-timeline-opacity.png "Record button for the opacity property"
         \li In the field next to the opacity property name on that same line,
             type 0 to hide the button, and press \key Enter to save the value.
         \li Move the playhead to frame 1000 and change the opacity value to 1
             to show the button.
+
+            To fine-tune the value of a keyframe, you can also right-click the
+            keyframe marker \inlineimage keyframe_linear_inactive.png
+            , and select \uicontrol {Edit Keyframe}.
         \li Select the record button again to stop recording property changes.
             If you forget this, all the following changes will be recorded, and
             the results will be unpredictable.
@@ -213,9 +219,10 @@
         \li In the field next to the property, set a negative value for the
             top anchor margin, -40, to place \e verifyPasswordField on top of
             \e passwordField.
-        \li Move the playhead to frame 1000 and change the top anchor margin to
+        \li Move the playhead to frame 1000 and change the top anchor margin
-            5, so that \e verifyPasswordField appears to slide down and settle
+            to 5, so that, combined with the change in the opacity value,
-            below \e passwordField.
+            \e verifyPasswordField appears to slide down and settle below
+            \e passwordField.
         \li Select the record button again to stop recording property changes.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
@@ -247,8 +254,8 @@
 
     \image loginui4-timeline.png "Timeline view with the recorded property changes"
 
-    Next, you create states for the login and registration pages and bind them
+    Next, you'll create states for the login and registration pages and bind
-    to the animation settings.
+    them to the animation settings.
 
     \section1 Binding Animation to States
 

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

@@ -1,33 +1,75 @@
-import QtQuick 2.10
+
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.15
 import QtQuick.Templates 2.1 as T
 import loginui1 1.0
 
 T.Button {
     id: control
+    width: 100
+    height: 40
 
     font: Constants.font
     implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
+                       buttonBackground ? buttonBackground.implicitWidth : 0,
-                       contentItem.implicitWidth + leftPadding + rightPadding)
+                       textItem.implicitWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0,
+                        buttonBackground ? buttonBackground.implicitHeight : 0,
-                        contentItem.implicitHeight + topPadding + bottomPadding)
+                        textItem.implicitHeight + topPadding + bottomPadding)
     leftPadding: 4
     rightPadding: 4
 
     text: "My Button"
 
     background: buttonBackground
-    Rectangle {
-        id: buttonBackground
-        color: "#41cd52"
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        border.color: "gray"
-        border.width: 1
-        radius: 2
-    }
 
     contentItem: textItem
     Text {
@@ -35,12 +77,24 @@ T.Button {
         text: control.text
 
         opacity: enabled ? 1.0 : 0.3
-        color: "#fdfdfd"
+        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"
@@ -54,12 +108,12 @@ T.Button {
             when: control.down
             PropertyChanges {
                 target: textItem
-                color: "#fdfdfd"
+                color: "#41cd52"
             }
             PropertyChanges {
                 target: buttonBackground
-                color: "#21be2b"
+                color: "#ffffff"
-                border.color: "black"
+                border.color: "#41cd52"
             }
         }
     ]

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

@@ -1,46 +1,109 @@
-import QtQuick 2.12
+
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.15
 import loginui1 1.0
+import QtQuick.Studio.Components 1.0
+import QtQuick.Controls 2.15
 
 Rectangle {
-    width: Constants.width
+    color: "#ffffff"
-    height: Constants.height
+    gradient: Gradient {
-    color: "#fdfdfd"
+        GradientStop {
+            position: 0.5
+            color: "#ffffff"
+        }
+
+        GradientStop {
+            position: 1
+            color: "#41cd52"
+        }
+    }
 
     Text {
         id: pageTitle
+        x: 273
+        y: 33
         text: qsTr("Qt Account")
         font.pixelSize: 24
-        anchors.verticalCenterOffset: -153
+        font.bold: true
-        anchors.horizontalCenterOffset: 1
+        font.weight: Font.ExtraBold
+        anchors.verticalCenterOffset: -180
+        anchors.horizontalCenterOffset: 0
         anchors.centerIn: parent
         font.family: Constants.font.family
     }
 
     Image {
         id: logo
-        x: 13
+        x: 8
-        y: 0
+        y: 19
-        width: 100
-        height: 100
         source: "qt_logo_green_64x64px.png"
         fillMode: Image.PreserveAspectFit
     }
 
     PushButton {
         id: loginButton
-        x: 262
+        x: 260
-        y: 343
+        y: 352
         width: 120
         height: 40
-        text: qsTr("Log In")
+        text: "Log In"
     }
 
     PushButton {
         id: registerButton
-        x: 262
+        x: 260
-        y: 389
+        y: 398
         width: 120
         height: 40
-        text: qsTr("Create Account")
+        text: "Create Account"
     }
 }

doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml

@@ -2,8 +2,8 @@ pragma Singleton
 import QtQuick 2.10
 
 QtObject {
-    readonly property int width: 640
+    readonly property int width: 1280
-    readonly property int height: 480
+    readonly property int height: 720
 
     readonly property FontLoader mySystemFont: FontLoader { name: "Arial" }
 

doc/qtdesignstudio/examples/loginui1/loginui1.qml

@@ -1,3 +1,53 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
 import QtQuick 2.12
 import loginui1 1.0
 

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

@@ -1,33 +1,75 @@
-import QtQuick 2.10
+
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.15
 import QtQuick.Templates 2.1 as T
 import loginui2 1.0
 
 T.Button {
     id: control
+    width: 100
+    height: 40
 
     font: Constants.font
     implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
+                       buttonBackground ? buttonBackground.implicitWidth : 0,
-                       contentItem.implicitWidth + leftPadding + rightPadding)
+                       textItem.implicitWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0,
+                        buttonBackground ? buttonBackground.implicitHeight : 0,
-                        contentItem.implicitHeight + topPadding + bottomPadding)
+                        textItem.implicitHeight + topPadding + bottomPadding)
     leftPadding: 4
     rightPadding: 4
 
     text: "My Button"
 
     background: buttonBackground
-    Rectangle {
-        id: buttonBackground
-        color: "#41cd52"
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        border.color: "gray"
-        border.width: 1
-        radius: 2
-    }
 
     contentItem: textItem
     Text {
@@ -35,12 +77,24 @@ T.Button {
         text: control.text
 
         opacity: enabled ? 1.0 : 0.3
-        color: "#fdfdfd"
+        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"
@@ -54,19 +108,13 @@ T.Button {
             when: control.down
             PropertyChanges {
                 target: textItem
-                color: "#fdfdfd"
+                color: "#41cd52"
             }
             PropertyChanges {
                 target: buttonBackground
-                color: "#21be2b"
+                color: "#ffffff"
-                border.color: "black"
+                border.color: "#41cd52"
             }
         }
     ]
 }
-
-/*##^##
-Designer {
-    D{i:0;autoSize:true;height:480;width:640}
-}
-##^##*/

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

@@ -2,7 +2,7 @@
 
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the examples of the Qt Toolkit.
@@ -54,80 +54,93 @@ import loginui2 1.0
 import QtQuick.Controls 2.3
 
 Rectangle {
-    id: root
     width: Constants.width
     height: Constants.height
-
+    gradient: Gradient {
-    Rectangle {
+        GradientStop {
-        id: loginPage
+            position: 0.50157
-        color: "#ffffff"
+            color: "#ffffff"
-        anchors.fill: parent
-
-        Image {
-            id: logo
-            width: 100
-            height: 100
-            anchors.topMargin: 10
-            anchors.left: parent.left
-            anchors.leftMargin: 10
-            anchors.top: parent.top
-            source: "qt_logo_green_64x64px.png"
-            fillMode: Image.PreserveAspectFit
         }
 
-        Text {
+        GradientStop {
-            id: pageTitle
+            position: 1
-            width: 123
+            color: "#41cd52"
-            height: 40
-            text: qsTr("Qt Account")
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.top: parent.top
-            anchors.topMargin: 70
-            font.pixelSize: 24
         }
+    }
 
-        Column {
+    Text {
-            id: fieldColumn
+        id: pageTitle
+        x: 258
+        y: 70
+        width: 135
+        height: 40
+        text: qsTr("Qt Account")
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: 70
+        font.pixelSize: 24
+        font.bold: true
+    }
+
+    Image {
+        id: logo
+        x: 10
+        y: 10
+        width: 100
+        height: 100
+        anchors.topMargin: 10
+        anchors.left: parent.left
+        anchors.leftMargin: 10
+        anchors.top: parent.top
+        source: "qt_logo_green_64x64px.png"
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Column {
+        id: fieldColumn
+        x: 170
+        y: 200
+        width: 300
+        height: 85
+        spacing: 5
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: 200
+
+        TextField {
+            id: usernameField
             width: 300
-            height: 85
+            placeholderText: qsTr("Username")
-            spacing: 5
+            font.pointSize: 10
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.top: parent.top
-            anchors.topMargin: 200
-
-            TextField {
-                id: usernameField
-                width: 300
-                placeholderText: qsTr("Username")
-                font.pointSize: 10
-            }
-
-            TextField {
-                id: passwordField
-                width: 300
-                placeholderText: qsTr("Password")
-                font.pointSize: 10
-            }
         }
 
-        Column {
+        TextField {
-            id: buttonColumn
+            id: passwordField
-            anchors.bottom: parent.bottom
+            width: 300
-            anchors.bottomMargin: 50
+            placeholderText: qsTr("Password")
-            spacing: 5
+            font.pointSize: 10
-            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
 
-            PushButton {
+    Column {
-                id: loginButton
+        id: buttonColumn
-                width: 120
+        x: 260
-                text: qsTr("Log In")
+        y: 345
-            }
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 50
+        spacing: 5
+        anchors.horizontalCenter: parent.horizontalCenter
 
-            PushButton {
+        PushButton {
-                id: registerButton
+            id: loginButton
-                width: 120
+            width: 120
-                text: qsTr("Create Account")
+            text: qsTr("Log In")
-            }
+        }
+
+        PushButton {
+            id: registerButton
+            width: 120
+            text: qsTr("Create Account")
         }
     }
 }

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

@@ -1,33 +1,75 @@
-import QtQuick 2.10
+
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.15
 import QtQuick.Templates 2.1 as T
 import loginui3 1.0
 
 T.Button {
     id: control
+    width: 100
+    height: 40
 
     font: Constants.font
     implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
+                       buttonBackground ? buttonBackground.implicitWidth : 0,
-                       contentItem.implicitWidth + leftPadding + rightPadding)
+                       textItem.implicitWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0,
+                        buttonBackground ? buttonBackground.implicitHeight : 0,
-                        contentItem.implicitHeight + topPadding + bottomPadding)
+                        textItem.implicitHeight + topPadding + bottomPadding)
     leftPadding: 4
     rightPadding: 4
 
     text: "My Button"
 
     background: buttonBackground
-    Rectangle {
-        id: buttonBackground
-        color: "#41cd52"
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        border.color: "gray"
-        border.width: 1
-        radius: 2
-    }
 
     contentItem: textItem
     Text {
@@ -35,12 +77,24 @@ T.Button {
         text: control.text
 
         opacity: enabled ? 1.0 : 0.3
-        color: "#fdfdfd"
+        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"
@@ -54,19 +108,13 @@ T.Button {
             when: control.down
             PropertyChanges {
                 target: textItem
-                color: "#fdfdfd"
+                color: "#41cd52"
             }
             PropertyChanges {
                 target: buttonBackground
-                color: "#21be2b"
+                color: "#ffffff"
-                border.color: "black"
+                border.color: "#41cd52"
             }
         }
     ]
 }
-
-/*##^##
-Designer {
-    D{i:0;autoSize:true;height:480;width:640}
-}
-##^##*/

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

@@ -57,97 +57,57 @@ Rectangle {
     state: "loginState"
     width: Constants.width
     height: Constants.height
-
+    gradient: Gradient {
-    Rectangle {
+        GradientStop {
-        id: loginPage
+            position: 0.5
-        color: "#ffffff"
+            color: "#ffffff"
-        anchors.fill: parent
-
-        Image {
-            id: logo
-            width: 100
-            height: 100
-            anchors.topMargin: 10
-            anchors.left: parent.left
-            anchors.leftMargin: 10
-            anchors.top: parent.top
-            source: "qt_logo_green_64x64px.png"
-            fillMode: Image.PreserveAspectFit
         }
 
-        Text {
+        GradientStop {
-            id: pageTitle
+            position: 1
-            width: 123
+            color: "#41cd52"
-            height: 40
-            text: qsTr("Qt Account")
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.top: parent.top
-            anchors.topMargin: 70
-            font.pixelSize: 24
         }
+    }
 
-        PushButton {
+    PushButton {
-            id: backButton
+        id: backButton
-            width: 40
+        x: 590
-            text: "<"
+        y: 20
-            font.pixelSize: 24
+        width: 40
-            anchors.right: parent.right
+        text: "<"
-            anchors.rightMargin: 10
+        font.pixelSize: 24
-            anchors.top: parent.top
+        anchors.right: parent.right
-            anchors.topMargin: 20
+        anchors.rightMargin: 10
-        }
+        anchors.top: parent.top
+        anchors.topMargin: 20
+    }
 
-        Column {
+    Text {
-            id: fieldColumn
+        id: pageTitle
-            width: 300
+        x: 258
-            height: 130
+        y: 70
-            spacing: 5
+        width: 123
-            anchors.horizontalCenter: parent.horizontalCenter
+        height: 40
-            anchors.top: parent.top
+        text: qsTr("Qt Account")
-            anchors.topMargin: 200
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: 70
+        font.pixelSize: 24
+        font.bold: true
+    }
 
-            TextField {
+    Image {
-                id: usernameField
+        id: logo
-                width: 300
+        x: 10
-                placeholderText: qsTr("Username")
+        y: 10
-                font.pointSize: 10
+        width: 100
-            }
+        height: 100
-
+        anchors.topMargin: 10
-            TextField {
+        anchors.left: parent.left
-                id: passwordField
+        anchors.leftMargin: 10
-                width: 300
+        anchors.top: parent.top
-                placeholderText: qsTr("Password")
+        source: "qt_logo_green_64x64px.png"
-                font.pointSize: 10
+        fillMode: Image.PreserveAspectFit
-            }
-
-            TextField {
-                id: verifyPasswordField
-                width: 300
-                visible: true
-                font.pointSize: 10
-                placeholderText: qsTr("Verify password")
-            }
-        }
-
-        Column {
-            id: buttonColumn
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 50
-            spacing: 5
-            anchors.horizontalCenter: parent.horizontalCenter
-
-            PushButton {
-                id: loginButton
-                width: 120
-                text: qsTr("Log In")
-            }
-
-            PushButton {
-                id: registerButton
-                width: 120
-                text: qsTr("Create Account")
-            }
-        }
     }
 
     Connections {
@@ -163,6 +123,7 @@ Rectangle {
             root.state = "loginState"
         }
     }
+
     states: [
         State {
             name: "loginState"
@@ -179,10 +140,6 @@ Rectangle {
         },
         State {
             name: "registerState"
-            PropertyChanges {
-                target: verifyPasswordField
-                visible: true
-            }
 
             PropertyChanges {
                 target: loginButton
@@ -190,4 +147,66 @@ Rectangle {
             }
         }
     ]
+    Column {
+        id: fieldColumn
+        x: 170
+        y: 200
+        width: 300
+        height: 130
+        spacing: 5
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: 200
+
+        TextField {
+            id: usernameField
+            width: 300
+            placeholderText: qsTr("Username")
+            font.pointSize: 10
+        }
+
+        TextField {
+            id: passwordField
+            width: 300
+            placeholderText: qsTr("Password")
+            font.pointSize: 10
+        }
+
+        TextField {
+            id: verifyPasswordField
+            width: 300
+            visible: true
+            font.pointSize: 10
+            placeholderText: qsTr("Verify password")
+        }
+    }
+
+    Column {
+        id: buttonColumn
+        x: 260
+        y: 345
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 50
+        spacing: 5
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        PushButton {
+            id: loginButton
+            width: 120
+            text: qsTr("Log In")
+        }
+
+        PushButton {
+            id: registerButton
+            width: 120
+            text: qsTr("Create Account")
+        }
+    }
 }
+
+/*##^##
+Designer {
+    D{i:0;formeditorZoom:0.5}
+}
+##^##*/
+

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

@@ -1,33 +1,75 @@
-import QtQuick 2.10
+
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.15
 import QtQuick.Templates 2.1 as T
 import loginui4 1.0
 
 T.Button {
     id: control
+    width: 100
+    height: 40
 
     font: Constants.font
     implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
+                       buttonBackground ? buttonBackground.implicitWidth : 0,
-                       contentItem.implicitWidth + leftPadding + rightPadding)
+                       textItem.implicitWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0,
+                        buttonBackground ? buttonBackground.implicitHeight : 0,
-                        contentItem.implicitHeight + topPadding + bottomPadding)
+                        textItem.implicitHeight + topPadding + bottomPadding)
     leftPadding: 4
     rightPadding: 4
 
     text: "My Button"
 
     background: buttonBackground
-    Rectangle {
-        id: buttonBackground
-        color: "#41cd52"
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        border.color: "gray"
-        border.width: 1
-        radius: 2
-    }
 
     contentItem: textItem
     Text {
@@ -35,12 +77,24 @@ T.Button {
         text: control.text
 
         opacity: enabled ? 1.0 : 0.3
-        color: "#fdfdfd"
+        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"
@@ -54,19 +108,13 @@ T.Button {
             when: control.down
             PropertyChanges {
                 target: textItem
-                color: "#fdfdfd"
+                color: "#41cd52"
             }
             PropertyChanges {
                 target: buttonBackground
-                color: "#21be2b"
+                color: "#ffffff"
-                border.color: "black"
+                border.color: "#41cd52"
             }
         }
     ]
 }
-
-/*##^##
-Designer {
-    D{i:0;autoSize:true;height:480;width:640}
-}
-##^##*/

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

@@ -48,176 +48,151 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-import QtQuick 2.10
+import QtQuick 2.12
 import loginui4 1.0
-import QtQuick.Controls 2.3
+import QtQuick.Controls 2.15
 import QtQuick.Timeline 1.0
 
 Rectangle {
-    id: root
+    id: rectangle
     width: Constants.width
     height: Constants.height
-
+    color: "#ffffff"
-    Rectangle {
+    gradient: Gradient {
-        id: loginPage
+        GradientStop {
-        color: "#ffffff"
+            position: 0.50125
-        anchors.fill: parent
+            color: "#ffffff"
-
-        Image {
-            id: logo
-            width: 100
-            height: 100
-            anchors.topMargin: 10
-            anchors.left: parent.left
-            anchors.leftMargin: 10
-            anchors.top: parent.top
-            source: "qt_logo_green_64x64px.png"
-            fillMode: Image.PreserveAspectFit
         }
 
-        Text {
+        GradientStop {
-            id: pageTitle
+            position: 1
-            width: 123
+            color: "#41cd52"
-            height: 40
+        }
-            text: qsTr("Qt Account")
+    }
-            anchors.horizontalCenter: parent.horizontalCenter
+
-            anchors.top: parent.top
+    Text {
-            anchors.topMargin: 70
+        id: pageTitle
-            font.pixelSize: 24
+        text: qsTr("Qt Account")
+        anchors.top: parent.top
+        font.pixelSize: 24
+        anchors.topMargin: 70
+        anchors.horizontalCenter: parent.horizontalCenter
+        font.bold: true
+        font.family: Constants.font.family
+    }
+
+    Image {
+        id: logo
+        anchors.left: parent.left
+        anchors.top: parent.top
+        source: "qt_logo_green_64x64px.png"
+        anchors.topMargin: 10
+        anchors.leftMargin: 10
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Column {
+        id: buttonColumn
+        anchors.bottom: parent.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottomMargin: 50
+        spacing: 5
+
+        PushButton {
+            id: loginButton
+            width: 120
+            opacity: 1
+            text: qsTr("Log In")
         }
 
         PushButton {
-            id: backButton
+            id: registerButton
-            x: 507
+            width: 120
-            width: 40
+            text: qsTr("Create Account")
-            text: "<"
+            font.bold: true
-            opacity: 1
-            anchors.right: parent.right
-            anchors.rightMargin: 10
-            anchors.top: parent.top
-            anchors.topMargin: 20
-            font.pixelSize: 24
-        }
 
-        Column {
+            Connections {
-            id: buttonColumn
+                target: registerButton
-            anchors.bottom: parent.bottom
+                onClicked: rectangle.state = "registerState"
-            anchors.bottomMargin: 50
-            spacing: 5
-            anchors.horizontalCenter: parent.horizontalCenter
-
-            PushButton {
-                id: loginButton
-                width: 120
-                text: qsTr("Log In")
-            }
-
-            PushButton {
-                id: registerButton
-                width: 120
-                text: qsTr("Create Account")
             }
         }
+    }
 
-        TextField {
+    PushButton {
-            id: usernameField
+        id: backButton
-            width: 300
+        width: 40
-            anchors.horizontalCenter: parent.horizontalCenter
+        opacity: 1.2
-            anchors.top: parent.top
+        text: "<"
-            anchors.topMargin: 200
+        anchors.right: parent.right
-            placeholderText: qsTr("Username")
+        anchors.top: parent.top
-            font.pointSize: 10
+        font.pixelSize: 24
-        }
+        anchors.rightMargin: 10
+        anchors.topMargin: 10
+        font.bold: true
+        checked: true
 
-        TextField {
+        Connections {
-            id: passwordField
+            target: backButton
-            width: 300
+            onClicked: rectangle.state = "loginState"
-            anchors.horizontalCenter: usernameField.horizontalCenter
-            anchors.top: usernameField.bottom
-            anchors.topMargin: 5
-            placeholderText: qsTr("Password")
-            font.pointSize: 10
         }
+    }
 
-        TextField {
+    TextField {
-            id: verifyPasswordField
+        id: verifyPasswordField
-            width: 300
+        x: 170
-            anchors.horizontalCenter: passwordField.horizontalCenter
+        width: 300
-            anchors.top: passwordField.bottom
+        opacity: 1
-            anchors.topMargin: 5
+        anchors.top: passwordField.bottom
-            visible: true
+        anchors.horizontalCenter: passwordField.horizontalCenter
-            font.pointSize: 10
+        anchors.topMargin: 5
-            placeholderText: qsTr("Verify password")
+        placeholderText: qsTr("Verify password")
-        }
+    }
+
+    TextField {
+        id: passwordField
+        x: 170
+        width: 300
+        anchors.top: usernameField.bottom
+        anchors.horizontalCenter: usernameField.horizontalCenter
+        anchors.topMargin: 5
+        placeholderText: qsTr("Password")
+    }
+
+    TextField {
+        id: usernameField
+        x: 170
+        width: 300
+        text: ""
+        anchors.top: parent.top
+        horizontalAlignment: Text.AlignLeft
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.topMargin: 200
+        placeholderText: qsTr("Username")
     }
 
     Timeline {
         id: timeline
         animations: [
             TimelineAnimation {
-                id: toRegisterState
+                id: toLoginState
-                running: false
                 loops: 1
                 duration: 1000
+                running: false
                 to: 1000
                 from: 0
             },
             TimelineAnimation {
-                id: toLoginState
+                id: toRegisterState
                 loops: 1
-                from: 1000
+                duration: 1000
                 running: false
                 to: 0
-                duration: 1000
+                from: 1000
             }
         ]
         enabled: true
-        startFrame: 0
         endFrame: 1000
-
+        startFrame: 0
-        KeyframeGroup {
-            target: verifyPasswordField
-            property: "opacity"
-            Keyframe {
-                frame: 0
-                value: 0
-            }
-
-            Keyframe {
-                value: 1
-                frame: 1001
-            }
-        }
-
-        KeyframeGroup {
-            target: loginButton
-            property: "opacity"
-            Keyframe {
-                frame: 0
-                value: 1
-            }
-
-            Keyframe {
-                frame: 1000
-                value: "0"
-            }
-        }
-
-        KeyframeGroup {
-            target: verifyPasswordField
-            property: "anchors.topMargin"
-
-            Keyframe {
-                easing.bezierCurve: [0.39, 0.575, 0.565, 1, 1, 1]
-                value: 5
-                frame: 1001
-            }
-
-            Keyframe {
-                value: "-40"
-                frame: 0
-            }
-        }
 
         KeyframeGroup {
             target: backButton
@@ -232,37 +207,72 @@ Rectangle {
                 value: 1
             }
         }
-    }
 
-    Connections {
+        KeyframeGroup {
-        target: registerButton
+            target: verifyPasswordField
-        onClicked: {
+            property: "opacity"
-            root.state = "registerState"
+
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+            }
         }
-    }
 
-    Connections {
+        KeyframeGroup {
-        target: backButton
+            target: loginButton
-        onClicked: {
+            property: "opacity"
-            root.state = "loginState"
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+            }
+        }
+
+        KeyframeGroup {
+            target: verifyPasswordField
+            property: "anchors.topMargin"
+            Keyframe {
+                frame: 0
+                value: -40
+            }
+
+            Keyframe {
+                easing.bezierCurve: [0.39,0.575,0.565,1,1,1]
+                frame: 1000
+                value: 5
+            }
         }
     }
     states: [
         State {
-            name: "registerState"
+            name: "loginState"
 
             PropertyChanges {
                 target: timeline
+                currentFrame: 0
                 enabled: true
             }
 
+            PropertyChanges {
+                target: toLoginState
+            }
+
             PropertyChanges {
                 target: toRegisterState
                 running: true
             }
         },
         State {
-            name: "loginState"
+            name: "registerState"
 
             PropertyChanges {
                 target: timeline
@@ -277,11 +287,9 @@ Rectangle {
     ]
 }
 
-
+/*##^##
-
+Designer {
-
+    D{i:0;formeditorZoom:0.5}D{i:5}D{i:7}D{i:10}D{i:12}D{i:13}D{i:14}D{i:15}
-/*##^## Designer {
-    D{i:4;anchors_y:28;timeline_expanded:true}D{i:6;timeline_expanded:true}D{i:7;timeline_expanded:true}
-D{i:8;anchors_y:200;timeline_expanded:true}D{i:9;anchors_x:170;anchors_y:245}D{i:10;anchors_y:245;timeline_expanded:true}
 }
- ##^##*/
+##^##*/
+

doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc

@@ -61,10 +61,12 @@
             just as plain text. This enables it to provide you with useful
             features, such as semantic highlighting, checking code syntax,
             code completion, and refactoring actions.
-        \li \l{Simulating Application Logic}
+        \li \l{Simulating Data Input}
 
-            You can use JavaScript to simulate application logic to bring your
+            \QDS enables you to connect UIs to different forms of data from various
-            UI to life.
+            sources, such as QML-based data models, JavaScript files, and backend
+            services. You can also connect your UI to Simulink to load live data from a
+            Simulink simulation.
         \li \l{Debugging and Profiling}
 
             \QDS comes with a JavaScript debugger. In the Debug mode, you

doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc

@@ -24,7 +24,7 @@
 ****************************************************************************/
 
 /*!
-    \previouspage studio-javascript.html
+    \previouspage studio-simulink.html
     \page studio-debugging.html
     \nextpage creator-debugging-qml.html
 

doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc

@@ -24,9 +24,9 @@
 ****************************************************************************/
 
 /*!
-    \previouspage creator-editor-options-text.html
+    \previouspage qtquick-placeholder-data.html
     \page studio-javascript.html
-    \nextpage studio-debugging.html
+    \nextpage studio-simulink.html
 
     \title Simulating Application Logic
 
@@ -45,10 +45,9 @@
             \l {Module Definition qmldir Files}.
     \endlist
 
-    Here, you will need to write some C++ code. Namely, the Qt Quick file will
+    Here, you will create a QML type based on the QObject class that will
-    contain a QObject-derived class that is registered with the QML type system
+    be registered as a singleton type. This enables the use of global
-    as a \e singleton type. This enables the use of global property values in
+    property values in the UI.
-    the UI.
 
     You can find a video tutorial about creating JavaScript for generating mock
     data for a UI
@@ -58,14 +57,17 @@
     To create the necessary files:
 
     \list 1
-        \li In the File Explorer, create a folder for the JavaScript files
+        \li In the File Explorer, create a new folder for the mock data
-            (for example, \e backend) and another one for the mock data
+            inside the \e imports folder in your project folder (for example, \e Data).
-            (for example, \e Data) in your project folder.
+            \note Make sure to capitalize the \e Data folder name, because you
-            \note Make sure to capitalize the data folder name, because you
             will need to import it as a QML type later, and QML type names must
             be capitalized.
-        \li In \QDS, open the project file (.qmlproject) to add the backend
+            \note If you place this folder somewhere else in the project, you will
-            folder to the list of plugin directories passed to the QML runtime:
+            need to add the path to the list of imports. To do this, in \QDS, open
+            the project file (.qmlproject) to add the path to the list of plugin
+            directories passed to the QML runtime. For example, if you placed the
+            \e Data folder inside another folder called \e backend in the root of
+            your project, you would add the following:
             \code
             importPaths: [ "imports", "backend" ]
             \endcode
@@ -83,7 +85,7 @@
             \uicontrol {JavaScript File} > \uicontrol Choose to create a
             JavaScript file that generates mock data for the UI.
         \li Follow the instructions of the wizard to create the JavaScript file
-            in the data folder. In these instructions, the file is called
+            in the Data folder. In these instructions, the file is called
             \e {simulation.js}.
         \li Delete the template text in JavaScript file and save the file.
         \li In a text editor such as Notepad, create a module definition file
@@ -102,29 +104,22 @@
         \li Add the following import statement to import the \e {simulation.js}
             file to use the functionality that it provides:
             \code
-            #import simulation.js as JS
+            import "simulation.js" as JS
             \endcode
-        \li Add the following code to create a QObject-derived class that will
+        \li Replace the default Item declaration with the following code to
-            list the global properties you want to simulate and their default
+            create a QObject-derived class that will list the global
-            values:
+            properties you want to simulate and their default values:
             \code
-            QObject {
+            QtObject {
                 id: values
 
                 // property values to simulate
-                property int name1: default1
+                property int name1: 5
-                property string name2: default2
+                property string name2: "foo"
-                property real name3: default3
+                property real name3: 2.5
 
             }
             \endcode
-            \note You must export the properties as aliases by selecting
-            \uicontrol {Export Property as Alias} in the
-            \inlineimage icons/action-icon.png
-            (\uicontrol Actions) menu of the property in the
-            \uicontrol Properties view. Exported properties are listed in
-            \uicontrol Connections > \uicontrol Properties, where you can
-            change their names.
         \li Add the following code to use a \l Timer type to specify a range of
             values for the property:
             \code
@@ -133,19 +128,28 @@
                 repeat: true
                 onTriggered: JS.name1Timer()
                 interval: 10
+            }
             \endcode
-            \note You must add the JavaScript method to the JavaScript file.
+            This will execute the function defined for \c onTriggered every 10 ms.
-        \li Open the main UI file of the project and add the following code to
+            Within your javascript functions you can perform the necessary
-            import the data folder as a QML module:
+            actions to simulate the behavior you need. Review
+            \l {Importing JavaScript Resources in QML} for more details.
+            \note You must add the JavaScript method \c name1Timer()
+            to the JavaScript file. You have the option of adding this JavaScript
+            code directly within the \c onTriggered handler as well.
+        \li Open the .ui.qml file of the Component that will use the simulated data
+            and add the following code to the top of the file in order to import
+            the Data folder as a QML module:
             \code
-            #import Data 1.0 as Data
+            import Data 1.0
             \endcode
-        \li Select \uicontrol {Set Binding} in the \uicontrol Settings menu of the
+        \li Returning to the \uicontrol {Form Editor}, locate the property that
-            property to bind the property value to the value defined in the
+            should be bound to the simulated values. Select \inlineimage icons/action-icon.png
-            values file. For example, you would set the following expression for
+            and \uicontrol {Set Binding} for the property and enter the
-            \e name1:
+            simulated Value property. For example, you would set the following
+            expression to bind to the example \c name1 property:
             \code
-            Data.Values.name1
+            Values.name1
             \endcode
     \endlist
 */

doc/qtdesignstudio/src/qtdesignstudio-simulation-overview.qdoc

@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \page studio-simulation-overview.html
+    \previouspage creator-editor-options-text.html
+    \nextpage qtquick-placeholder-data.html
+
+    \title Simulating Data Input
+
+
+    \QDS enables you to connect UIs to different forms of data from various
+    sources, such as QML-based data models, JavaScript files, and backend
+    services. You can also connect your UI to Simulink to load live data from a
+    Simulink simulation.
+
+    \list
+        \li \l{Loading Placeholder Data}
+
+            You can create QML files that contain placeholder data, so that
+            you can test grid, list, or path views, even though you don't
+            have access to real data.
+
+        \li \l{Simulating Application Logic}
+
+        You can use JavaScript to generate mock data for your UI.
+
+        \li \l{Simulating Dynamic Systems}
+
+        Use the Simulink connector to connect a Simulink Simulation Model to
+        your UI. Simulink is a MATLAB-based graphical programming environment
+        for modeling, simulating, and analyzing multi-domain dynamic systems.
+    \endlist
+*/

doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc

@@ -0,0 +1,197 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \previouspage studio-javascript.html
+    \page studio-simulink.html
+    \nextpage studio-debugging.html
+
+    \title Simulating Dynamic Systems
+
+    Use the Simulink connector to connect simulation to your UI. Simulink is a
+    MATLAB-based graphical programming environment for modeling, simulating,
+    and analyzing multi-domain dynamic systems. On Windows, \QDS provides
+    built-in support for connectivity to Simulink models, which allows them to
+    send and receive data with applications developed using \QDS. Install
+    Simulink on your computer and run it simultaneously with \QDS to enable
+    communication between the applications.
+
+    The information given here is mainly focused on the integration of the
+    Simulink connector in \QDS. For information on how to use the Simulink
+    environment, see the \l {https://se.mathworks.com/help/simulink/}
+    {documentation} provided by MathWorks.
+
+    \section1 The Qt Blockset for Simulink
+
+    Install the Simulink \l {https://git.qt.io/qt-design-studio/simulink-plugin-dependencies}
+    {Qt Blockset} to your computer in order to connect a Simulink model to your
+    application. The Qt Blockset installer adds the Simulink blocks needed to
+    establish connectivity to your application. After installation, the
+    \uicontrol SLQTLibrary blockset will be added to the Simulink blocks
+    library. The blocks allow sending and receiving of \uicontrol Property,
+    \uicontrol Signal, and \uicontrol Slot updates with your application. The
+    Qt Blockset includes the \uicontrol {Simulink-Qt Client}, \uicontrol
+    Address, \uicontrol {Qt/QML Send}, and \uicontrol {Qt/QML Receive} blocks.
+
+    \image simulink-qt-blockset-receive.png "The Qt Blockset in a Simulink Model"
+
+    \section2 Simulink-Qt Client
+
+    A \uicontrol {Simulink-Qt Client} block establishes the TCP/IP Client
+    connection with your application. The block has two inputs and two outputs:
+
+    \list
+        \li The \uicontrol Address input specifies the machine IP address
+            of the server to the client block. To ensure the address is
+            formatted correctly, use the \uicontrol Address block.
+        \li The \uicontrol Port input specifies the port value for the IP
+            address, which can be determined by using the \uicontrol Port block
+            or a valid Simulink integer value.
+        \li The \uicontrol IsConnected output is a Boolean signal. When true,
+            specifies the connection to the server has been established.
+        \li The \uicontrol Socket output sends a signal that presents the
+            socket ID of the connection. This signal needs to be delivered to
+            corresponding \uicontrol {Qt/QML Receive} and \uicontrol
+            {Qt/QML Send} blocks.
+    \endlist
+
+    \section2 Address and Port
+
+    An \uicontrol Address block delivers the IP address of a server to the
+    \uicontrol {Simulink-Qt Client} block as a typical IP address string.
+    A \uicontrol Port block determines the port value for the IP address. For
+    simulations where the Simulink model and your application are run on the
+    same machine, use the IP address 127.0.0.1 and any port available.
+
+    \section2 Qt/QML Send
+
+    \image simulink-qt-send-block.png "A Qt/QML Send Block"
+
+    A \uicontrol {Qt/QML Send} block sends a \uicontrol Signal or \uicontrol
+    Property value change from Simulink. It is used for each property that
+    Simulink needs to send to your application. The property name of the block
+    needs to correspond to the name of the property or slot in your application.
+
+    The block has two inputs and one output:
+    \list
+        \li The \uicontrol Socket input receives the socket signal from the
+            \uicontrol {Simulink-Qt Client} block.
+        \li The \uicontrol Data input receives the data to be sent as a
+            \uicontrol Signal or \uicontrol Property update.
+        \li The \uicontrol {Data Out} output outputs the passed-through data
+            to connect it to other Simulink blocks if needed.
+    \endlist
+
+    \section2 Qt/QML Receive
+
+    \image simulink-qt-receive-block.png "A Qt/QML Receive Block"
+
+    A \uicontrol {Qt/QML Receive} block receives \uicontrol Signal or
+    \uicontrol Property value changes from your application. It is used for
+    each property that Simulink needs to receive from your application.
+    The property name of the block needs to correspond to the name of the
+    property or slot in your application.
+
+   The block has one input and two outputs:
+
+    \list
+        \li The \uicontrol Socket input receives the socket signal from the
+            \uicontrol {Simulink-Qt Client} block.
+        \li The \uicontrol Fcn_Call output sends the function-call, which can
+            either be terminated if idle, or connected to a valid function call
+            subsystem.
+        \li The \uicontrol isReceived output emits a scalar Boolean signal
+            suggesting that a valid \uicontrol Signal or \uicontrol Property
+            update was acquired from the connection.
+        \li The \uicontrol Data output signals data payload from a \uicontrol
+            Signal or \uicontrol Property value.
+    \endlist
+
+    \section2 Specifying Property Names in Simulink
+
+    Double-click the \uicontrol {Qt/SML Send} or \uicontrol {Qt/QML Receive}
+    block in Simulink to specify a property name. A pop-up for \uicontrol
+    {Block Parameters} appears. Type the name of the property in the \uicontrol
+    {Qt Signal/Property Name} field and click \uicontrol OK. The name, for
+    example speedProp, needs to match a \uicontrol signal or a \uicontrol
+    property in \QDS.
+
+    \image simulink-qt-send-example-property.png "Example property of the Qt Send block"
+
+    \section1 Integrating the Simulink Model to \QDS
+
+    \section2 Importing the Simulink Connector
+
+    To integrate the Simulink model into \QDS, you first need to import the
+    Simulink connector in \uicontrol Library. Click the \uicontrol {QML Imports
+    Tab}, select the \uicontrol {<Add Import>} drop-down menu, and then select
+    \uicontrol SimulinkConnector. \QDS is now ready to communicate with the
+    Simulink model.
+
+    \image studio-qml-imports-slconnector.png "Simulink Connector in the QML Imports list"
+
+    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 in \uicontrol Navigator, you need to click
+    \inlineimage filtericon.png
+    (\uicontrol {Filter Tree}) and unselect \uicontrol {Show only visible items}.
+
+    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 the \uicontrol Properties tab in
+    \uicontrol {Connection View}.
+
+    See \l {Specifying Dynamic Properties} for a detailed description of how
+    to add a custom property. The name of the property and the data type
+    need to match those of the send or receive property of the Simulink model.
+
+    \image studio-connection-view-properties.png "The Properties tab in Connection View"
+
+    \section2 Creating Bindings
+
+    Next, you need to bind the value of the property you just created to the
+    desired properties of UI components.
+
+    By binding the root item property to a component property you can use it,
+    for example, to rotate an component. Binding a root item property of speed
+    to a component property of rotation would result in the item rotating in the
+    screen when the simulation is run.
+
+    To bind the root item property to a component property, select the component
+    either by clicking on it on the canvas or in \uicontrol Navigator. In the
+    \uicontrol Properties view, find the component property to which you want to
+    bind the root item property. Select the \inlineimage icons/action-icon.png
+    (\uicontrol Actions) menu next to a property, and then select
+    \uicontrol {Set Binding}. In the \uicontrol {Binding Editor}, select the
+    text field and type in \c {<id>.<property name>}, for example
+    \c rectangle.speedProp. For more information, see \l {Setting Bindings}.
+
+    \image studio-binding-editor.png "The Binding Editor window"
+
+    Run the simulation by first clicking the \uicontrol Run icon in \QDS and
+    then the \uicontrol Run icon in Simulink.
+*/

doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc

@@ -157,7 +157,12 @@
                         \li \l{Specifying Text Editor Settings}
                     \endlist
                 \endlist
-            \li \l{Simulating Application Logic}
+            \li \l{Simulating Data Input}
+            \list
+                \li \l{Loading Placeholder Data}
+                \li \l{Simulating Application Logic}
+                \li \l{Simulating Dynamic Systems}
+            \endlist
             \li \l{Debugging and Profiling}
                 \list
                     \li \l{Debugging Qt Quick Projects}

doc/qtdesignstudio/src/qtdesignstudio.qdoc

@@ -41,7 +41,7 @@
             \li \inlineimage front-ui.png
             \li \inlineimage studio-animation.png
         \row
-        \li \l{Getting Started}
+        \li \b {\l{Getting Started}}
             \list
                 \li \l{Exporting Artwork from Design Tools}
                 \li \l{User Interface}
@@ -96,7 +96,7 @@
                     \li \l{Supported Platforms}
                     \li \l{Keyboard Shortcuts}
                     \li \l{Coding}
-                    \li \l{Simulating Application Logic}
+                    \li \l{Simulating Data Input}
                     \li \l{Debugging and Profiling}
                 \endlist
             \li \b {\l{Help}}

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

@@ -48,7 +48,7 @@
     You can use the toolbar buttons to \e transform 3D objects and manipulate
     the 3D scene. Transformation refers to moving, rotating, or scaling of an
     object. The \e pivot of the component is used as the origin for
-    transformations. You can set a \l{Setting Transform Properties}{local pivot
+    transformations. You can set a \l{Managing 3D Transformations}{local pivot
     offset} for an item in \uicontrol Properties to transform the component
     around a point other than its local origin. A line is drawn in \uicontrol
     {3D Editor} from the pivot point to the center of the component to provide

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

@@ -50,7 +50,7 @@
     show components. It is useful when you want to show a component in a
     particular state, but hide it in another state, for example.
 
-    \section1 Setting Transform Properties
+    \section1 Managing 3D Transformations
 
     The value of the \uicontrol Translation property contains the position
     translation of the component in the local coordinate space established by

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

@@ -108,7 +108,7 @@
     rotation.
 
     For more information about rotating and pivoting components in the local
-    coordinate space, see \l {Setting Transform Properties}.
+    coordinate space, see \l {Managing 3D Transformations}.
 
     \section1 Applying Textures to Materials
 

src/libs/languageserverprotocol/lsptypes.cpp

@@ -403,13 +403,11 @@ Utils::Link Location::toLink() const
     if (!isValid(nullptr))
         return Utils::Link();
 
-    // QUrl::FullyDecoded is not supported by QUrl::toString.
     // Ensure %xx like %20 are really decoded using fromPercentEncoding
     // Else, a path with spaces would keep its %20 which would cause failure
     // to open the file by the text editor. This is the cases with compilers in
     // C:\Programs Files on Windows.
-    auto file = uri().toString(QUrl::FullyDecoded | QUrl::PreferLocalFile);
+    auto file = uri().toString(QUrl::PrettyDecoded | QUrl::PreferLocalFile);
-
     // fromPercentEncoding convert %xx encoding to raw values and then interpret
     // the result as utf-8, so toUtf8() must be used here.
     file = QUrl::fromPercentEncoding(file.toUtf8());

src/libs/qmljs/parser/qmljsast_p.h

@@ -3394,14 +3394,17 @@ public:
 
     SourceLocation firstSourceLocation() const override
     {
-      if (defaultToken.isValid())
+        if (requiredToken.isValid()) {
-        return defaultToken;
+            if (defaultToken.isValid() && defaultToken.offset < requiredToken.offset)
-      else if (readonlyToken.isValid())
+                return defaultToken;
-          return readonlyToken;
+            return requiredToken;
-      else if (requiredToken.isValid())
+        }
-          return requiredToken;
+        if (defaultToken.isValid())
+            return defaultToken;
+        if (readonlyToken.isValid())
+            return readonlyToken;
 
-      return propertyToken;
+        return propertyToken;
     }
 
     SourceLocation lastSourceLocation() const override

src/libs/qmljs/qmljsbind.cpp

@@ -29,6 +29,9 @@
 #include "qmljsdocument.h"
 #include "qmljsmodelmanagerinterface.h"
 
+#include <QtCore/QVersionNumber>
+#include <QtCore/QLibraryInfo>
+
 #include <utils/algorithm.h>
 
 using namespace LanguageUtils;
@@ -203,7 +206,12 @@ bool Bind::visit(UiImport *ast)
         version = ComponentVersion(ast->version->majorVersion, ast->version->minorVersion);
 
     if (ast->importUri) {
-        if (!version.isValid()) {
+        QVersionNumber qtVersion = QLibraryInfo::version();
+        if (ModelManagerInterface *model = ModelManagerInterface::instance()) {
+            ModelManagerInterface::ProjectInfo pInfo = model->projectInfoForPath(_doc->fileName());
+            qtVersion = QVersionNumber::fromString(pInfo.qtVersionString);
+        }
+        if (!version.isValid() && qtVersion.majorVersion() < 6) {
             _diagnosticMessages->append(
                         errorMessage(ast, tr("package import requires a version number")));
         }

src/libs/qmljs/qmljsmodelmanagerinterface.cpp

@@ -129,6 +129,7 @@ ModelManagerInterface::ModelManagerInterface(QObject *parent)
 
     m_defaultProjectInfo.qtQmlPath = QFileInfo(
                 QLibraryInfo::location(QLibraryInfo::Qml2ImportsPath)).canonicalFilePath();
+    m_defaultProjectInfo.qtVersionString = QLibraryInfo::version().toString();
 
     updateImportPaths();
 
@@ -607,8 +608,10 @@ ModelManagerInterface::ProjectInfo ModelManagerInterface::projectInfoForPath(
     ProjectInfo res;
     const auto allProjectInfos = allProjectInfosForPath(path);
     for (const ProjectInfo &pInfo : allProjectInfos) {
-        if (res.qtQmlPath.isEmpty())
+        if (res.qtQmlPath.isEmpty()) {
             res.qtQmlPath = pInfo.qtQmlPath;
+            res.qtVersionString = pInfo.qtVersionString;
+        }
         res.applicationDirectories.append(pInfo.applicationDirectories);
         for (const auto &importPath : pInfo.importPaths)
             res.importPaths.maybeInsert(importPath);
@@ -1429,8 +1432,10 @@ ViewerContext ModelManagerInterface::getVContext(const ViewerContext &vCtx,
         info = projectInfoForPath(doc->fileName());
     ViewerContext defaultVCtx = defaultVContext(res.language, Document::Ptr(nullptr), false);
     ProjectInfo defaultInfo = defaultProjectInfo();
-    if (info.qtQmlPath.isEmpty())
+    if (info.qtQmlPath.isEmpty()) {
         info.qtQmlPath = defaultInfo.qtQmlPath;
+        info.qtVersionString = defaultInfo.qtVersionString;
+    }
     info.applicationDirectories = Utils::filteredUnique(info.applicationDirectories
                                                         + defaultInfo.applicationDirectories);
     switch (res.flags) {

src/libs/qmljs/qmljsreformatter.cpp

@@ -632,6 +632,8 @@ protected:
     bool visit(UiPublicMember *ast) override
     {
         if (ast->type == UiPublicMember::Property) {
+            if (ast->isRequired)
+                out("required ", ast->requiredToken);
             if (ast->isDefaultMember)
                 out("default ", ast->defaultToken);
             else if (ast->isReadonlyMember)

src/libs/utils/outputformatter.cpp

@@ -287,6 +287,7 @@ void OutputFormatter::overridePostPrintAction(const PostPrintAction &postPrintAc
 void OutputFormatter::doAppendMessage(const QString &text, OutputFormat format)
 {
     QTextCharFormat charFmt = charFormat(format);
+
     QList<FormattedText> formattedText = parseAnsi(text, charFmt);
     const QString cleanLine = std::accumulate(formattedText.begin(), formattedText.end(), QString(),
             [](const FormattedText &t1, const FormattedText &t2) { return t1.text + t2.text; });
@@ -308,8 +309,13 @@ void OutputFormatter::doAppendMessage(const QString &text, OutputFormat format)
         append(res.newContent.value(), charFmt);
         return;
     }
-    for (const FormattedText &output : linkifiedText(formattedText, res.linkSpecs))
+
+    const QList<FormattedText> linkified = linkifiedText(formattedText, res.linkSpecs);
+    for (const FormattedText &output : linkified)
         append(output.text, output.format);
+    if (linkified.isEmpty())
+        append({}, charFmt); // This might cause insertion of a newline character.
+
     for (OutputLineParser * const p : qAsConst(involvedParsers)) {
         if (d->postPrintAction)
             d->postPrintAction(p);

src/plugins/autotest/boost/boosttestoutputreader.cpp

@@ -144,6 +144,7 @@ void BoostTestOutputReader::handleMessageMatch(const QRegularExpressionMatch &ma
         if (m_currentTest.isEmpty() || m_logLevel > LogLevel::UnitScope)
             m_currentTest = caseFromContent(content);
         m_result = ResultType::MessageFatal;
+        ++m_summary[ResultType::MessageFatal];
         m_description = content;
     } else if (content.startsWith("last checkpoint:")) {
         if (m_currentTest.isEmpty() || m_logLevel > LogLevel::UnitScope)
@@ -355,8 +356,9 @@ void BoostTestOutputReader::processOutputLine(const QByteArray &outputLine)
             sendCompleteInformation();
         BoostTestResult *result = new BoostTestResult(id(), m_projectFile, QString());
         int failed = match.captured(1).toInt();
+        int fatals = m_summary.value(ResultType::MessageFatal);
         QString txt = tr("%1 failures detected in %2.").arg(failed).arg(match.captured(3));
-        int passed = (m_testCaseCount != -1) ? m_testCaseCount - failed : -1;
+        int passed = qMax(0, m_testCaseCount - failed);
         if (m_testCaseCount != -1)
             txt.append(' ').append(tr("%1 tests passed.").arg(passed));
         result->setDescription(txt);
@@ -364,7 +366,7 @@ void BoostTestOutputReader::processOutputLine(const QByteArray &outputLine)
         reportResult(TestResultPtr(result));
         if (m_reportLevel == ReportLevel::Confirm) { // for the final summary
             m_summary[ResultType::Pass] += passed;
-            m_summary[ResultType::Fail] += failed;
+            m_summary[ResultType::Fail] += failed - fatals;
         }
         m_testCaseCount = -1;
         return;

src/plugins/autotest/quick/quicktesttreeitem.cpp

@@ -400,6 +400,7 @@ QSet<QString> QuickTestTreeItem::internalTargets() const
 
 void QuickTestTreeItem::markForRemovalRecursively(const QString &filePath)
 {
+    TestTreeItem::markForRemovalRecursively(filePath);
     auto parser = dynamic_cast<QuickTestParser *>(framework()->testParser());
     const QString proFile = parser->projectFileForMainCppFile(filePath);
     if (!proFile.isEmpty()) {

src/plugins/autotest/testresultmodel.cpp

@@ -395,13 +395,10 @@ int TestResultModel::resultTypeCount(ResultType type) const
 {
     int result = 0;
 
-    for (const auto &resultsForId : m_testResultCount.values())
-        result += resultsForId.value(type, 0);
-
     for (const auto &id : m_reportedSummary.keys()) {
-        if (int counted = m_testResultCount.value(id).value(type))
+        // if we got a result count from the framework prefer that over our counted results
-            result -= counted;
+        int reported = m_reportedSummary[id].value(type);
-        result += m_reportedSummary[id].value(type);
+        result += reported != 0 ? reported : m_testResultCount.value(id).value(type);
     }
     return result;
 }

src/plugins/beautifier/beautifierplugin.cpp

@@ -218,6 +218,12 @@ QString BeautifierPlugin::msgFormatAtCursor()
     return tr("&Format at Cursor");
 }
 
+QString BeautifierPlugin::msgFormatLines()
+{
+    //: Menu entry
+    return tr("Format &Line(s)");
+}
+
 QString BeautifierPlugin::msgDisableFormattingSelectedText()
 {
     //: Menu entry

src/plugins/beautifier/beautifierplugin.h

@@ -41,6 +41,7 @@ public:
     static QString msgFormatCurrentFile();
     static QString msgFormatSelectedText();
     static QString msgFormatAtCursor();
+    static QString msgFormatLines();
     static QString msgDisableFormattingSelectedText();
     static QString msgCommandPromptDialogTitle(const QString &command);
     static void showError(const QString &error);

src/plugins/beautifier/clangformat/clangformat.cpp

@@ -65,6 +65,11 @@ ClangFormat::ClangFormat()
     menu->addAction(cmd);
     connect(m_formatFile, &QAction::triggered, this, &ClangFormat::formatFile);
 
+    m_formatLines = new QAction(BeautifierPlugin::msgFormatLines(), this);
+    cmd = Core::ActionManager::registerAction(m_formatLines, "ClangFormat.FormatLines");
+    menu->addAction(cmd);
+    connect(m_formatLines, &QAction::triggered, this, &ClangFormat::formatLines);
+
     m_formatRange = new QAction(BeautifierPlugin::msgFormatAtCursor(), this);
     cmd = Core::ActionManager::registerAction(m_formatRange, "ClangFormat.FormatAtCursor");
     menu->addAction(cmd);
@@ -123,6 +128,31 @@ void ClangFormat::formatAtCursor()
     }
 }
 
+void ClangFormat::formatLines()
+{
+    const TextEditorWidget *widget = TextEditorWidget::currentTextEditorWidget();
+    if (!widget)
+        return;
+
+    const QTextCursor tc = widget->textCursor();
+    // Current line by default
+    int lineStart = tc.blockNumber() + 1;
+    int lineEnd = lineStart;
+
+    // Note that clang-format will extend the range to the next bigger
+    // syntactic construct if needed.
+    if (tc.hasSelection()) {
+        const QTextBlock start = tc.document()->findBlock(tc.selectionStart());
+        const QTextBlock end = tc.document()->findBlock(tc.selectionEnd());
+        lineStart = start.blockNumber() + 1;
+        lineEnd = end.blockNumber() + 1;
+    }
+
+    auto cmd = command();
+    cmd.addOption(QString("-lines=%1:%2").arg(QString::number(lineStart)).arg(QString::number(lineEnd)));
+    formatCurrentFile(cmd);
+}
+
 void ClangFormat::disableFormattingSelectedText()
 {
     TextEditorWidget *widget = TextEditorWidget::currentTextEditorWidget();

src/plugins/beautifier/clangformat/clangformat.h

@@ -48,10 +48,12 @@ public:
 private:
     void formatFile();
     void formatAtCursor();
+    void formatLines();
     void disableFormattingSelectedText();
     TextEditor::Command command(int offset, int length) const;
 
     QAction *m_formatFile = nullptr;
+    QAction *m_formatLines = nullptr;
     QAction *m_formatRange = nullptr;
     QAction *m_disableFormattingSelectedText = nullptr;
     ClangFormatSettings m_settings;

src/plugins/coreplugin/outputwindow.cpp

@@ -624,7 +624,7 @@ void Internal::CorePlugin::testOutputFormatter()
 {
     const QString input =
             "B to be handled by B\r\n"
-            "not to be handled\n"
+            "not to be handled\n\n\n\n"
             "A to be handled by A\n"
             "continuation for A\r\n"
             "B looks like B, but still continuation for A\r\n"
@@ -636,7 +636,7 @@ void Internal::CorePlugin::testOutputFormatter()
             "B to be handled by B\n";
     const QString output =
             "handled by B\n"
-            "not to be handled\n"
+            "not to be handled\n\n\n\n"
             "handled by A\n"
             "handled by A\n"
             "handled by A\n"

src/plugins/projectexplorer/project.cpp

@@ -357,7 +357,8 @@ void Project::setNeedsInitialExpansion(bool needsExpansion)
 }
 
 void Project::setExtraProjectFiles(const QSet<Utils::FilePath> &projectDocumentPaths,
-                                   const DocGenerator docGenerator)
+                                   const DocGenerator &docGenerator,
+                                   const DocUpdater &docUpdater)
 {
     QSet<Utils::FilePath> uniqueNewFiles = projectDocumentPaths;
     uniqueNewFiles.remove(projectFilePath()); // Make sure to never add the main project file!
@@ -371,6 +372,10 @@ void Project::setExtraProjectFiles(const QSet<Utils::FilePath> &projectDocumentP
     Utils::erase(d->m_extraProjectDocuments, [&toRemove](const std::unique_ptr<Core::IDocument> &d) {
         return toRemove.contains(d->filePath());
     });
+    if (docUpdater) {
+        for (const auto &doc : qAsConst(d->m_extraProjectDocuments))
+            docUpdater(doc.get());
+    }
     for (const Utils::FilePath &p : toAdd) {
         if (docGenerator) {
             std::unique_ptr<Core::IDocument> doc = docGenerator(p);
@@ -779,6 +784,7 @@ void Project::createTargetFromMap(const QVariantMap &map, int index)
                 kit->makeReplacementKit();
                 kit->setup();
         }, id);
+        QTC_ASSERT(k, return);
         TaskHub::addTask(BuildSystemTask(Task::Warning, tr("Project \"%1\" was configured for "
             "kit \"%2\" with id %3, which does not exist anymore. The new kit \"%4\" was "
             "created in its place, in an attempt not to lose custom project settings.")

src/plugins/projectexplorer/project.h

@@ -165,8 +165,10 @@ public:
     // Set project files that will be watched and by default trigger the same callback
     // as the main project file.
     using DocGenerator = std::function<std::unique_ptr<Core::IDocument>(const Utils::FilePath &)>;
+    using DocUpdater = std::function<void(Core::IDocument *)>;
     void setExtraProjectFiles(const QSet<Utils::FilePath> &projectDocumentPaths,
-                              const DocGenerator docGenerator = {});
+                              const DocGenerator &docGenerator = {},
+                              const DocUpdater &docUpdater = {});
 
     void setDisplayName(const QString &name);
     void setProjectLanguage(Utils::Id id, bool enabled);

src/plugins/qmakeprojectmanager/qmakeproject.cpp

@@ -126,6 +126,8 @@ public:
         return true;
     }
 
+    void setPriFile(QmakePriFile *priFile) { m_priFile = priFile; }
+
 private:
     QmakePriFile *m_priFile;
 };
@@ -301,15 +303,24 @@ void QmakeBuildSystem::updateDocuments()
         projectDocuments.insert(n->filePath());
 
     });
-    project()->setExtraProjectFiles(projectDocuments, [p = project()](const FilePath &fp)
+    const auto priFileForPath = [p = project()](const FilePath &fp) -> QmakePriFile * {
-            -> std::unique_ptr<Core::IDocument> {
         const Node * const n = p->nodeForFilePath(fp, [](const Node *n) {
             return dynamic_cast<const QmakePriFileNode *>(n); });
-        QTC_ASSERT(n, return std::make_unique<Core::IDocument>());
+        QTC_ASSERT(n, return nullptr);
-        QmakePriFile * const priFile = static_cast<const QmakePriFileNode *>(n)->priFile();
+        return static_cast<const QmakePriFileNode *>(n)->priFile();
+    };
+    const auto docGenerator = [&](const FilePath &fp)
+            -> std::unique_ptr<Core::IDocument> {
+        QmakePriFile * const priFile = priFileForPath(fp);
         QTC_ASSERT(priFile, return std::make_unique<Core::IDocument>());
         return std::make_unique<QmakePriFileDocument>(priFile, fp);
-    });
+    };
+    const auto docUpdater = [&](Core::IDocument *doc) {
+        QmakePriFile * const priFile = priFileForPath(doc->filePath());
+        QTC_ASSERT(priFile, return);
+        static_cast<QmakePriFileDocument *>(doc)->setPriFile(priFile);
+    };
+    project()->setExtraProjectFiles(projectDocuments, docGenerator, docUpdater);
 }
 
 void QmakeBuildSystem::updateCppCodeModel()

src/plugins/qtsupport/qtcreator_tutorials.xml

@@ -195,5 +195,9 @@
       <description><![CDATA[Building your first application for the NXP IMXRT1050 device.]]></description>
       <tags>qtformcus,mcus,qt,video,NXP IMXRT1050-EVKB,2020</tags>
     </tutorial>
+    <tutorial imageUrl=":qtsupport/images/icons/videotutorialicon.png" difficulty="" projectPath="" name="Online: Creating dynamic UIs for a 'Qt for MCUs' application using Qt Design Studio and Photoshop" isVideo="true" videoUrl="https://youtu.be/USrLl6tRc00" videoLength="1:00:19">
+      <description><![CDATA[A step-by-step walkthrough showcasing how to create dynamic UIs using Qt Design Studio and Photoshop on MCUs.]]></description>
+      <tags>qtformcus,mcus,qt,video,2020</tags>
+    </tutorial>
     </tutorials>
 </instructionals>

src/plugins/updateinfo/updateinfoplugin.cpp

@@ -32,6 +32,7 @@
 #include <coreplugin/icore.h>
 #include <coreplugin/settingsdatabase.h>
 #include <coreplugin/shellcommand.h>
+#include <utils/algorithm.h>
 #include <utils/fileutils.h>
 #include <utils/infobar.h>
 #include <utils/synchronousprocess.h>
@@ -159,18 +160,24 @@ void UpdateInfoPlugin::collectCheckForUpdatesOutput(const QString &contents)
     d->m_collectedOutput += contents;
 }
 
-static QStringList availableUpdates(const QDomDocument &document)
+struct Update
+{
+    QString name;
+    QString version;
+};
+
+static QList<Update> availableUpdates(const QDomDocument &document)
 {
     if (document.isNull() || !document.firstChildElement().hasChildNodes())
         return {};
-    QStringList result;
+    QList<Update> result;
     const QDomNodeList updates = document.firstChildElement().elementsByTagName("update");
     for (int i = 0; i < updates.size(); ++i) {
         const QDomNode node = updates.item(i);
         if (node.isElement()) {
             const QDomElement element = node.toElement();
             if (element.hasAttribute("name"))
-                result.append(element.attribute("name"));
+                result.append({element.attribute("name"), element.attribute("version")});
         }
     }
     return result;
@@ -197,9 +204,14 @@ void UpdateInfoPlugin::checkForUpdatesFinished()
             Core::ICore::infoBar()->removeInfo(InstallUpdates);
             startUpdater();
         });
-        const QStringList updates = availableUpdates(document);
+        const QList<Update> updates = availableUpdates(document);
         info.setDetailsWidgetCreator([updates]() -> QWidget * {
-            const QString updateText = updates.join("</li><li>");
+            const QString updateText = Utils::transform(updates, [](const Update &u) {
+                                           return u.version.isEmpty()
+                                                      ? u.name
+                                                      : tr("%1 (%2)", "Package name and version")
+                                                            .arg(u.name, u.version);
+                                       }).join("</li><li>");
             auto label = new QLabel;
             label->setText("<qt><p>" + tr("Available updates:") + "<ul><li>" + updateText
                            + "</li></ul></p></qt>");

src/plugins/webassembly/webassemblytoolchain.cpp

@@ -138,7 +138,6 @@ WebAssemblyToolChain::WebAssemblyToolChain() :
     const CompilerConfiguration configuration = compilerConfiguration();
     const QString command = configuration.llvmRoot.toString()
             + Utils::HostOsInfo::withExecutableSuffix("/clang");
-    setLanguage(ProjectExplorer::Constants::CXX_LANGUAGE_ID);
     setCompilerCommand(Utils::FilePath::fromString(command));
     setSupportedAbis({toolChainAbi()});
     setTargetAbi(toolChainAbi());

src/shared/proparser/qmakebuiltins.cpp

@@ -459,8 +459,18 @@ void QMakeEvaluator::runProcess(QProcess *proc, const QString &command) const
 {
     proc->setWorkingDirectory(currentDirectory());
 # ifdef PROEVALUATOR_SETENV
-    if (!m_option->environment.isEmpty())
+    if (!m_option->environment.isEmpty()) {
-        proc->setProcessEnvironment(m_option->environment);
+        QProcessEnvironment env = m_option->environment;
+        static const QString dummyVar = "__qtc_dummy";
+        static const QString notSetValue = "not set";
+        const QString oldValue = env.value(dummyVar, notSetValue); // Just in case.
+        env.insert(dummyVar, "QTCREATORBUG-23504"); // Force detach.
+        if (oldValue == notSetValue)
+            env.remove(dummyVar);
+        else
+            env.insert(dummyVar, oldValue);
+        proc->setProcessEnvironment(env);
+    }
 # endif
 # ifdef Q_OS_WIN
     proc->setNativeArguments(QLatin1String("/v:off /s /c \"") + command + QLatin1Char('"'));