QmlDesigner: Update image in the Live Preview documents

This patch updates the old image to include lock the views features
in the document screenshot. Also it updates the text description to match
the change.

Fixes: QDS-11565
Change-Id: I262be3392552920607725becda6e21d3e571c122
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>

4 files changed, 12 insertions, 10 deletions

diff --git a/doc/qtcreator/src/qtquick/qtquick-live-preview-desktop.qdoc b/doc/qtcreator/src/qtquick/qtquick-live-preview-desktop.qdoc
index 01706aa950..4e4e609d94 100644
--- a/doc/qtcreator/src/qtquick/qtquick-live-preview-desktop.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-live-preview-desktop.qdoc
@@ -17,33 +17,35 @@
     To preview the currently active QML file on the desktop:
 
     \list
-        \li Select \uicontrol Build > \uicontrol {QML Preview}.
-        \li Select the \inlineimage icons/live_preview.png
-            (\uicontrol {Show Live Preview}) button.
+        \li Select the \uicontrol {Live Preview} button on the top toolbar.
         \li Press \key {Alt+P}.
     \endlist
 
-    \image studio-live-preview.png
+    \image studio-live-preview.webp
     \endif
 
-    To preview any QML file that belongs to the project, right-click the
+    To preview any QML file that belongs to the project,
+    \list
+        \li Select the \uicontrol {Live Preview} button on the top toolbar.
+        \li Right-click the
     filename in the \l Projects view, and select \uicontrol {Preview File}.
+    \endlist
 
     \if defined(qtdesignstudio)
-    To preview the whole UI, select \uicontrol {Show Live Preview}
+    To preview the whole UI, select \uicontrol {Live Preview}
     when viewing the main QML file of the project.
 
     To view the UI in different sizes, select the zooming level on the toolbar.
 
-    The frames-per-second (FPS) refresh rate of animations is displayed in the
-    \uicontrol FPS field.
-
     \section1 Selecting the Preview Tool
 
     By default, the QML runtime is used for previewing. To use some
     other tool, specify it in the \uicontrol {QML viewer} field in the run
     settings of the project in the Projects mode.
 
+    \note Click \inlineimage icons/settings.png
+    to access the setting options.
+
     \image studio-run-settings.png "Run settings"
     \endif
 */
diff --git a/doc/qtcreator/src/qtquick/qtquick-live-preview.qdoc b/doc/qtcreator/src/qtquick/qtquick-live-preview.qdoc
index 01aaa637c4..554e222295 100644
--- a/doc/qtcreator/src/qtquick/qtquick-live-preview.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-live-preview.qdoc
@@ -32,7 +32,7 @@
     \if defined(qtcreator)
     \image qtcreator-live-preview.png
     \else
-    \image studio-live-preview.png
+    \image studio-live-preview.webp
     \endif
 
     \list
diff --git a/doc/qtdesignstudio/images/studio-live-preview.png b/doc/qtdesignstudio/images/studio-live-preview.png
deleted file mode 100644
index 30d5c822d0..0000000000
--- a/doc/qtdesignstudio/images/studio-live-preview.png
+++ /dev/null
diff --git a/doc/qtdesignstudio/images/studio-live-preview.webp b/doc/qtdesignstudio/images/studio-live-preview.webp
new file mode 100644
index 0000000000..0dff1a411b
--- /dev/null
+++ b/doc/qtdesignstudio/images/studio-live-preview.webp