Doc: Update info about Qt Quick debugging

Update, add, and remove screenshots.

Change-Id: Id5e77b1ebba4306f28e2d6d20e6ed5ffac0d2e52
Reviewed-by: Ulf Hermann <ulf.hermann@qt.io>

doc/src/debugger/qtquick-debugger-example.qdoc

@@ -63,8 +63,10 @@
         \li Select \uicontrol {Debug > Start Debugging > Start Debugging} or press
             \key{F5}.
 
-        \li Once the Same Game application starts, click the \uicontrol {New Game}
+        \li Once the Same Game application starts, select \uicontrol {1 Player}
-            button to start a new game.
+            to start a new game.
+
+            \image samegame.png
 
         \li When the debugger hits the breakpoint, it interrupts the
             application. \QC displays the nested function calls leading to the
@@ -93,10 +95,7 @@
         \li To execute JavaScript commands in the current context, open the
             \uicontrol {Debugger Console} output pane.
 
-        \li To change the score to 1000, enter \c{gameCanvas.score = 1000}
+            \image qml-script-console.png
-            in the console.
-
-            \image qtquick-example-script-console.png
 
         \li To remove a breakpoint, right-click it and select
             \uicontrol {Delete Breakpoint}.
@@ -106,25 +105,16 @@
 
             \image qtquick-example-qml-inspector.png
 
-        \li Click
+        \li Select \uicontrol Debug > \uicontrol {Show Application on Top} to
-            \inlineimage qml-inspector-app-on-top.png
+            keep the application visible while you interact with the debugger.
-            (\uicontrol {Show Application on Top}) to keep the application visible
-            while you interact with the debugger.
 
-        \li Click
+        \li Select \uicontrol Debug > \uicontrol Select to activate selection
-            \inlineimage qml-inspector-select-button.png
+            mode and then click the \uicontrol Menu button to move into the
-            (\uicontrol Select) to activate selection mode and then click the
+            \uicontrol menuButton component in the
-            \uicontrol {Quit} button to move into the \uicontrol ButtonLabel component
+            \uicontrol {Locals and Expressions} view and the code editor.
-            in the \uicontrol {Locals and Expressions} and the code editor.
 
-        \li In the \uicontrol {Locals and Expressions} view, double-click the value of
+        \li In the \uicontrol {Locals and Expressions} view, double-click the
-            the \c text property to change it temporarily from \uicontrol {Quit} to
+            value of a property to change it.
-            \uicontrol {End Game}.
-
-            \image qtquick-example-property-values.png
-
-            When you select an element, the cursor moves to it in the code
-            editor, where you can change the value permanently.
 
     \endlist
 

doc/src/debugger/qtquick-debugging.qdoc

@@ -186,9 +186,8 @@
 
     \image qml-observer-view.png "QML item tree"
 
-    To keep the application visible while you interact with the debugger, click
+    To keep the application visible while you interact with the debugger, select
-    \inlineimage qml-inspector-app-on-top.png
+    \uicontrol Debug > \uicontrol {Show Application on Top}.
-    (\uicontrol {Show Application on Top}).
 
     You can view a QML item in \uicontrol {Locals and Expressions} in the following
     ways:
@@ -199,10 +198,8 @@
 
         \li Select the item in the code editor.
 
-        \li Click
+        \li Select \uicontrol Debug > \uicontrol Select to activate selection
-            \inlineimage qml-inspector-select-button.png
+            mode and then click an item in the running application.
-            (\uicontrol Select) to activate selection mode and then click an item
-            in the running application.
 
     \endlist
 
@@ -215,7 +212,7 @@
     When you debug complex applications, you can jump to the position in code
     where an item is defined or you can zoom into the user interface.
 
-    When the \uicontrol Select tool is enabled, you can click items in the running
+    In the selection mode, you can click items in the running
     application to jump to their definitions in the code. The properties of the
     selected item are displayed in the \uicontrol {Locals and Expressions} view.
 
@@ -234,14 +231,9 @@
 
     \endlist
 
-    To switch to the zoom mode, click the \uicontrol Zoom button. Click in the
+    To switch out of the selection mode, toggle the \uicontrol Select menu item.
-    running application to zoom in. Right-click to open a context menu that
-    contains zoom controls.
 
-    To switch out of the selection or zoom mode, deselect the \uicontrol Select or
+    To move the application running in \QQV to the front, select
-    \uicontrol Zoom button.
+    \uicontrol Debug > \uicontrol {Show Application on Top}.
-
-    To move the application running in \QQV to the front, select the
-    \uicontrol {Show Application on Top} button.
 
 */