Doc: QML Inspector was integrated in Locals and Expressions view

Some functionality was removed. Update text and screenshots accordingly.

Change-Id: Iec9057ac17ddb1c3a27244c74038553f5ab46605
Reviewed-by: Aurindam Jana <aurindam.jana@digia.com>

doc/src/debugger/creator-debugger.qdoc

@@ -68,16 +68,11 @@
         \o  \l{Debugging Qt Quick Projects}
 
             When debugging a Qt Quick application, you can inspect the state
-            of the
-            application while debugging JavaScript functions. You can set
+            of the application while debugging JavaScript functions. You can set
             breakpoints, view call stack trace, and examine locals and
-            expressions. When the application is interrupted by a breakpoint,
-            you can use the QML Script Console to execute JavaScript expressions
-            in the current context.
-
-            While the application is running, you can use the QML Inspector
-            view to explore the object structure, debug animations, and
-            inspect colors.
+            expressions. While the application is running, you can inspect QML
+            objects and user interfaces, as well as execute JavaScript
+            expressions.
 
         \o  \l{Debugging a C++ Example Application}
 

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

@@ -62,8 +62,7 @@
 
         \o  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. To view the stack, select
-            the \gui Stack tab.
+            current position as a call stack trace (1).
 
             \image qtquick-example-setting-breakpoint2.png
 
@@ -96,8 +95,8 @@
         \o  To remove a breakpoint, right-click it and select
             \gui {Delete Breakpoint}.
 
-        \o  Select the \gui {QML Inspector} tab to explore the object structure
-            at runtime:
+        \o  Select the \gui {Locals and Expressions} tab to explore the object
+            structure at runtime:
 
             \image qtquick-example-qml-inspector.png
 
@@ -114,8 +113,8 @@
 
             \image qtquick-example-property-values.png
 
-        \o  In the \gui {QML Inspector} view, double-click the value of the
-            \c text property to change it temporarily from \gui {Quit} to
+        \o  In the \gui {Locals and Expressions} view, double-click the value of
+            the \c text property to change it temporarily from \gui {Quit} to
             \gui {End Game}.
 
             When you select an element, the cursor moves to it in the code

doc/src/debugger/qtquick-debugging.qdoc

@@ -118,9 +118,7 @@
 
         \o  Change QML code and immediately see the changes at runtime
 
-        \o  Inspect QML code and change it at runtime without changing the code
-
-        \o  Debug animations
+        \o  Inspect QML code and change it temporarily at runtime
 
     \endlist
 
@@ -175,28 +173,28 @@
     \inlineimage qml-observer-bar-reload.png "Apply Changes on Save button"
     (\gui {Apply Changes on Save}) button on the toolbar.
 
-    When you change property values in the \gui {Console} or
-    \gui {QML Inspector}, they are immediately updated in the running
+    When you change property values in the \gui {Console} or in the
+    \gui {Locals and Expressions} view, they are immediately updated in the running
     application, but not in the source code.
 
-    \section1 Inspecting QML at Runtime
+    \section1 Inspecting QML Objects
 
-    While the application is running, you can use the \gui {QML Inspector} view
-    to explore the object structure, debug animations, and inspect colors.
-    To open the \gui {QML Inspector} view, choose \gui {Window > View >
-    QML Inspector}. The view shows the properties of the currently selected QML
-    element.
+    While the application is running, you can use the
+    \gui {Locals and Expressions} view to explore the QML object structure.
 
-    \image qml-observer-view.png "QML Inspector view"
+    \image qml-observer-view.png "QML object tree"
 
-    To keep the application visible while you interact with the inspector, click
+    To keep the application visible while you interact with the debugger, click
     \inlineimage qml-inspector-app-on-top.png
     (\gui {Show Application on Top}).
 
-    To display a QML element in the \gui {QML Inspector} view:
+    You can view a QML element in \gui {Locals and Expressions} in the following
+    ways:
 
     \list
 
+        \o  Expand the element in the object tree.
+
         \o  Select the element in the code editor.
 
         \o  Click
@@ -204,65 +202,34 @@
             (\gui Select) to activate selection mode and then click an element
             in the running application.
 
-        \o  Select a child element of an element in the menu in the
-            \gui {QML Inspector} view:
-
-            \image qtquick-example-children.png
-
-        \o  Select an element in the element path in the \gui {QML Inspector}
-            view.
-
     \endlist
 
     To change property values temporarily, without editing the source,
     double-click them and enter the new values. You can view the results in the
     running application.
 
-    When you select an element, the cursor moves to it in the code editor, where
-    you can change the value permanently.
+    \section1 Inspecting User Interfaces
 
-    \section1 Debugging Animations
-
-    When you debug complex applications, you can use the inspection
-    mode to jump to the position in code where an element is defined. You are
-    switched to the inspection mode, when you click the \gui Select, \gui Zoom,
-    or \gui {Color Picker} button
-    on the toolbar.
-
-    \image qml-observer-buttons.png "QML Inspector toolbar"
+    When you debug complex applications, you can jump to the position in code
+    where an element is defined or you can zoom into the user interface.
 
     When the \gui Select tool is enabled, you can click elements in the running
     application to jump to their definitions in the code. The properties of the
-    selected element are displayed in the \gui {QML Inspector} view. The element
-    hierarchy is displayed as a bread crumb path.
+    selected element are displayed in the \gui {Locals and Expressions} view.
 
     You can also right-click an element in the running application to view the
     element hierarchy as a context menu.
 
-    \image qml-observer-context-menu.png "QML Inspector"
+    \image qml-observer-context-menu.png "QML element hierarchy"
 
     To switch to the zoom mode, click the \gui Zoom button. Click in the
     running application to zoom in. Right-click to open a context menu that
     contains zoom controls.
 
-    To inspect colors, click the \gui {Color Picker} button. You can also click
-    \inlineimage qml-observer-bar-copy-color.png "Color Picker button"
-    (\gui {Color Picker}) to copy the color definition to the clipboard.
-
-    To switch out of the inspection mode, deselect the \gui Select, \gui Zoom,
-    and \gui {Color Picker} button.
+    To switch out of the selection or zoom mode, deselect the \gui Select or
+    \gui Zoom button.
 
     To move the application running in \QQV to the front, select the
     \gui {Show Application on Top} button.
 
-    To play and pause animations in the running application, select
-    \inlineimage qml-inspector-play.png
-    (\gui {Play Animations}) and
-    \inlineimage qml-inspector-pause.png
-    (\gui {Pause Animations}) on the toolbar.
-
-    To change the speed at which animations are played, click and hold down
-    \gui {Play/Pause Animations}
-    and select a value.
-
 */