Doc: Update more screenshots

- Use the new numbers.
- Make the screenshots in the Qt Quick debugging tutorial
  sharper. The Debugger views also look a bit different now.
- Use "select" instead of "click".

Change-Id: I6248a6497725462229c1d1386aa00ccda39162e8
Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io>
Reviewed-by: David Schulz <david.schulz@qt.io>

11 files changed, 14 insertions, 14 deletions

diff --git a/doc/qtcreator/images/qtcreator-new-project.webp b/doc/qtcreator/images/qtcreator-new-project.webp
index 1c0570b8b6..d073622419 100644
--- a/doc/qtcreator/images/qtcreator-new-project.webp
+++ b/doc/qtcreator/images/qtcreator-new-project.webp
diff --git a/doc/qtcreator/images/qtcreator-preferences-build-run-general.webp b/doc/qtcreator/images/qtcreator-preferences-build-run-general.webp
index c763689496..4826e22fc6 100644
--- a/doc/qtcreator/images/qtcreator-preferences-build-run-general.webp
+++ b/doc/qtcreator/images/qtcreator-preferences-build-run-general.webp
diff --git a/doc/qtcreator/images/qtquick-example-setting-breakpoint1.png b/doc/qtcreator/images/qtquick-example-setting-breakpoint1.png
deleted file mode 100644
index 67da2556c7..0000000000
--- a/doc/qtcreator/images/qtquick-example-setting-breakpoint1.png
+++ /dev/null
diff --git a/doc/qtcreator/images/qtquick-example-setting-breakpoint1.webp b/doc/qtcreator/images/qtquick-example-setting-breakpoint1.webp
new file mode 100644
index 0000000000..0962179a6e
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-example-setting-breakpoint1.webp
diff --git a/doc/qtcreator/images/qtquick-example-setting-breakpoint2.png b/doc/qtcreator/images/qtquick-example-setting-breakpoint2.png
deleted file mode 100644
index 788cacaf65..0000000000
--- a/doc/qtcreator/images/qtquick-example-setting-breakpoint2.png
+++ /dev/null
diff --git a/doc/qtcreator/images/qtquick-example-setting-breakpoint2.webp b/doc/qtcreator/images/qtquick-example-setting-breakpoint2.webp
new file mode 100644
index 0000000000..ab4b1c3cdf
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-example-setting-breakpoint2.webp
diff --git a/doc/qtcreator/images/qtquick-example-setting-breakpoint3.png b/doc/qtcreator/images/qtquick-example-setting-breakpoint3.png
deleted file mode 100644
index 5d197ff92c..0000000000
--- a/doc/qtcreator/images/qtquick-example-setting-breakpoint3.png
+++ /dev/null
diff --git a/doc/qtcreator/images/qtquick-example-setting-breakpoint3.webp b/doc/qtcreator/images/qtquick-example-setting-breakpoint3.webp
new file mode 100644
index 0000000000..dfee8bc7cc
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-example-setting-breakpoint3.webp
diff --git a/doc/qtcreator/images/qtquick-example-stack.png b/doc/qtcreator/images/qtquick-example-stack.png
deleted file mode 100644
index 943b0af3d7..0000000000
--- a/doc/qtcreator/images/qtquick-example-stack.png
+++ /dev/null
diff --git a/doc/qtcreator/images/qtquick-example-stack.webp b/doc/qtcreator/images/qtquick-example-stack.webp
new file mode 100644
index 0000000000..2bf986d004
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-example-stack.webp
diff --git a/doc/qtcreator/src/debugger/qtquick-debugger-example.qdoc b/doc/qtcreator/src/debugger/qtquick-debugger-example.qdoc
index 614219ce63..30aa5c1358 100644
--- a/doc/qtcreator/src/debugger/qtquick-debugger-example.qdoc
+++ b/doc/qtcreator/src/debugger/qtquick-debugger-example.qdoc
@@ -1,4 +1,4 @@
-// Copyright (C) 2018 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 // **********************************************************************
@@ -47,13 +47,13 @@
             border on the line where the \c startNewGame() function is
             called (1).
 
-            \image qtquick-example-setting-breakpoint1.png
+            \image qtquick-example-setting-breakpoint1.webp {Breakpoint in the code editor}
 
             The red circle indicates that a breakpoint is now set on that line
             number.
 
-        \li Select \uicontrol Debug > \uicontrol {Start Debugging} >
-            \uicontrol {Start Debugging of Startup Project} or press
+        \li Go to \uicontrol Debug > \uicontrol {Start Debugging} >
+            \uicontrol {Start Debugging of Startup Project}, or press
             \key{F5}.
 
         \li Once the Same Game application starts, select \uicontrol {Puzzle}
@@ -63,26 +63,26 @@
 
         \li When the debugger hits the breakpoint, it interrupts the
             application. \QC displays the nested function calls leading to the
-            current position as a call stack trace (1).
+            current position as a call stack trace.
 
-            \image qtquick-example-setting-breakpoint2.png
+            \image qtquick-example-setting-breakpoint2.webp {Debugger view}
 
-        \li Click the \inlineimage icons/debugger_stepinto_small.png
-            (\uicontrol {Step Into}) button on the toolbar or press \key F11 to step
+        \li Select \inlineimage icons/debugger_stepinto_small.png
+            (\uicontrol {Step Into}) on the toolbar or press \key F11 to step
             into the code in the stack. The samegame.js file opens in the code
             editor at the function that starts a new game.
 
-            \image qtquick-example-stack.png
+            \image qtquick-example-stack.webp {Stack view}
 
         \li Examine the local variables in the \uicontrol Locals
             view. Step through the code to see how the information changes in
             the view.
 
         \li Add a breakpoint at the end of the \c {startNewGame()} function, and
-            click \inlineimage icons/qtcreator-debugging-continue.png
+            select \inlineimage icons/qtcreator-debugging-continue.png
             (\uicontrol Continue) to hit the breakpoint.
 
-            \image qtquick-example-setting-breakpoint3.png
+            \image qtquick-example-setting-breakpoint3.webp {Second breakpoint in the Breakpoints view}
 
         \li To execute JavaScript commands in the current context, open the
             \uicontrol {QML Debugger Console}.
@@ -97,11 +97,11 @@
 
             \image qtquick-example-qml-inspector.png
 
-        \li Select \uicontrol Debug > \uicontrol {Show Application on Top} to
+        \li Go to \uicontrol Debug > \uicontrol {Show Application on Top} to
             keep the application visible while you interact with the debugger.
 
-        \li Select \uicontrol Debug > \uicontrol Select to activate selection
-            mode and then click the \uicontrol Menu button to move into the
+        \li Go to \uicontrol Debug > \uicontrol Select to activate selection
+            mode, and then select \uicontrol Menu to move into the
             \uicontrol menuButton component in the \uicontrol Locals view and
             the code editor.