Doc: Use icons from source in the manual

This removes the need to take screenshots of icons.

- Add icon source directories for the .qdocconf file
- Remove screenshots of icons from doc\images (except completion
  icons)
- Copy images that do not have unique names from src or libs
  to \docs\images
- Create images that use overlays and update them in docs\images
- Fix paths and filenames in \inlineimage commands
- Fix text where one screenshot was replaced by two icons

Change-Id: Ib98206890bd15a843566de8d709e45487c70dfbd
Reviewed-by: Alessandro Portale <alessandro.portale@theqtcompany.com>

doc/config/qtcreator-project.qdocconf

@@ -4,7 +4,21 @@ url         = http://doc.qt.io/qtcreator
 
 headerdirs =
 sourcedirs = $SRCDIR/src
-imagedirs = $SRCDIR/images $SRCDIR/templates/images
+imagedirs = $SRCDIR/images \
+            $SRCDIR/templates/images \
+            $SRCDIR/../src/libs/qmleditorwidgets/images \
+            $SRCDIR/../src/plugins/android/images \
+            $SRCDIR/../src/plugins/autotest/images \
+            $SRCDIR/../src/plugins/classview/images \
+            $SRCDIR/../src/plugins/coreplugin/images \
+            $SRCDIR/../src/plugins/debugger/images \
+            $SRCDIR/../src/plugins/diffeditor/images \
+            $SRCDIR/../src/plugins/help/images \
+            $SRCDIR/../src/plugins/projectexplorer/images \
+            $SRCDIR/../src/plugins/qmldesigner/components/formeditor \
+            $SRCDIR/../src/plugins/qmldesigner/components/navigator \
+            $SRCDIR/../src/plugins/texteditor/images
+
 outputdir = $OUTDIR
 exampledirs = $SRCDIR/examples
 examples.fileextensions += *.qml *.svg

doc/src/analyze/cpu-usage-analyzer.qdoc

@@ -72,7 +72,7 @@
             CPU Usage Analyzer.
 
             \note If data collection does not start automatically, select the
-            \inlineimage qtcreator-analyzer-button.png
+            \inlineimage recordfill.png
             (\uicontrol {Collect profile data}) button.
 
     \endlist

doc/src/analyze/creator-valgrind.qdoc

@@ -63,8 +63,7 @@
 
         \li Use the application to analyze it.
 
-        \li Select the
+        \li Select the \inlineimage stop_small.png "Stop button"
-            \inlineimage qtcreator-debug-button-stop.png "Stop button"
             button to view the results of the analysis in the
             \uicontrol {Analysis} view.
 
@@ -171,8 +170,7 @@
 
         \li Use the application to analyze it.
 
-        \li Select the
+        \li Select the \inlineimage stop_small.png "Stop button"
-            \inlineimage qtcreator-debug-button-stop.png "Stop button"
             button to view the results of the analysis in the \uicontrol Profile
             view.
 

doc/src/analyze/qtquick-profiler.qdoc

@@ -92,7 +92,7 @@
             QML Profiler.
 
             \note If data collection does not start automatically, select the
-            \inlineimage qtcreator-analyzer-button.png
+            \inlineimage recordfill.png
             (\uicontrol {Enable Profiling}) button.
 
     \endlist

doc/src/android/androiddev.qdoc

@@ -140,8 +140,7 @@
         \li Select \uicontrol Tools > \uicontrol Options > \uicontrol Android to add paths to the
             Android NDK and SDK.
 
-            You can use the
+            You can use the \inlineimage download.png
-            \inlineimage qtcreator-options-android-download-button.png
             (\uicontrol Download) buttons to go to the sites where you can download
             the Android NDK and SDK.
 

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

@@ -109,12 +109,9 @@
     work correctly due to a logic error. To locate this logic error, step
     through the code using the following buttons:
     \inlineimage qtcreator-debug-button-stop.png
-    (\uicontrol Stop),
+    (\uicontrol {Stop Debugger}), \inlineimage debugger_stepover_small.png
-    \inlineimage qtcreator-debug-button-step-over.png
+    (\uicontrol {Step Over}), \inlineimage debugger_stepinto_small.png
-    (\uicontrol {Step Over}),
+    (\uicontrol {Step Into}), and \inlineimage debugger_stepout_small.png
-    \inlineimage qtcreator-debug-button-step-into.png
-    (\uicontrol {Step Into}),
-    and \inlineimage qtcreator-debug-button-step-out.png
     (\uicontrol {Step Out}).
 
 */

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

@@ -74,8 +74,7 @@
 
             \image qtquick-example-setting-breakpoint2.png
 
-        \li Click the
+        \li Click the \inlineimage debugger_stepinto_small.png
-            \inlineimage qtcreator-debug-button-step-into.png
             (\uicontrol {Step Into}) button 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.

doc/src/editors/creator-coding-edit-mode.qdoc

@@ -50,8 +50,8 @@
 
     Use the toolbar to navigate between open files and symbols in use. To browse
     backward or forward through your location history, click
-    \inlineimage qtcreator-back.png
+    \inlineimage prev.png
-    (\uicontrol {Go Back}) and \inlineimage qtcreator-forward.png
+    (\uicontrol {Go Back}) and \inlineimage next.png
     (\uicontrol {Go Forward}).
 
     To go to any open file, select it from the \uicontrol {Open files} drop-down
@@ -94,7 +94,7 @@
 
         \li To split the editor view into a top and bottom view, select
             \uicontrol Window > \uicontrol Split, press \key {Ctrl+E, 2}, or
-            select the \inlineimage qtcreator-split-button.png
+            select the \inlineimage splitbutton_horizontal.png
             (\uicontrol Split) button and then select \uicontrol Split.
 
             Split command creates views below the currently active editor view.
@@ -122,8 +122,7 @@
 
     To remove a split view, place the cursor within the view you want to
     remove and select \uicontrol Window > \uicontrol {Remove Current Split},
-    press \key {Ctrl+E, 0}, or select the
+    press \key {Ctrl+E, 0}, or select the \inlineimage splitbutton_closetop.png
-    \inlineimage qtcreator-remove-split-button.png
     (\uicontrol {Remove Split}) button. To remove all but the currently selected
     split view, select \uicontrol Window > \uicontrol {Remove All Splits} or
     press \key {Ctrl+E, 1}.

doc/src/editors/creator-diff-editor.qdoc

@@ -63,12 +63,11 @@
     removed text and then select \uicontrol {Apply Chunk}.
 
     To view the differences in a unified view where changed rows are placed
-    below each other, select
+    below each other, select \inlineimage unifieddiff.png
-    \inlineimage qtcreator-switchto-unified-diffeditor.png
     (\uicontrol {Switch to Unified Diff Editor}).
 
     To switch back to the side-by-side view, select
-    \inlineimage qtcreator-switchto-sidebyside-diffeditor.png
+    \inlineimage sidebysidediff.png
     (\uicontrol {Switch to Side by Side Diff Editor}).
 
     To change the default colors, select \uicontrol Tools > \uicontrol Options >
@@ -105,11 +104,10 @@
 
     By default, the horizontal scroll bars in the left and right pane are
     synchronized. To use them independently of each other, select the
-    \inlineimage qtcreator-synchronizefocus.png
+    \inlineimage linkicon.png
     (\uicontrol {Synchronize Horizontal Scroll Bars}) button.
 
-    If the files change outside \QC, select
+    If the files change outside \QC, select \inlineimage reload_gray.png
-    \inlineimage qtcreator-regenerate-index.png
     (\uicontrol {Reload Editor}) to compare them again and to show the results.
 
     To send a chunk of changes to a \l{Pasting and Fetching Code Snippets}

doc/src/editors/creator-editors.qdoc

@@ -1416,10 +1416,9 @@
 
             If the text is found, all occurrences are highlighted as you type.
 
-        \li To go to the next occurrence, click \inlineimage qtcreator-next.png
+        \li To go to the next occurrence, click \inlineimage next.png
             (\uicontrol {Find Next}), or press \key F3. To go to the previous
-            occurrence click
+            occurrence click \inlineimage prev.png
-            \inlineimage qtcreator-previous.png
             (\uicontrol {Find Previous}), or press \key {Shift+F3}.
 
     \endlist
@@ -1641,17 +1640,18 @@
         \li To go directly to an instance, double-click the instance in the
             \uicontrol {Search Results} pane.
 
-        \li To move between instances, click \inlineimage qtcreator-forward.png
+        \li To move between instances, click the \inlineimage next.png
-            and \inlineimage qtcreator-back.png
+            (\uicontrol {Next Item}) button and \inlineimage prev.png
-            in the \uicontrol {Search Results} pane.
+            (\uicontrol {Previous Item}) button in the
+            \uicontrol {Search Results} pane.
 
-        \li To expand and collapse the list of all instances, click
+        \li To expand and collapse the list of all instances, click the
             \inlineimage qtcreator-expand.png
-            .
+            (\uicontrol {Expand All}) button.
 
-        \li To clear the search results, click
+        \li To clear the search results, click the
-            \inlineimage qtcreator-clear.png
+            \inlineimage clean_pane_small.png
-            .
+            (\uicontrol Clear) button.
 
     \endlist
 
@@ -2110,7 +2110,7 @@
                 edit a function signature and by applying the changes to the
                 matching code.
             \li Function signature. When this action is available, a light bulb
-                icon appears: \inlineimage qml-toolbar-indicator.png
+                icon appears: \inlineimage refactormarker.png
         \row
             \li Add #include for undeclared or forward declared identifier
             \li Adds an \c {#include} directive to the current file to make the
@@ -2558,7 +2558,7 @@
 
     \list 1
 
-        \li In the locator, click \inlineimage qtcreator-locator-magnify.png
+        \li In the locator, click \inlineimage magnifier.png
             (\uicontrol Options) and select \uicontrol Configure to open the
             \uicontrol Locator options.
 

doc/src/howto/creator-autotest.qdoc

@@ -156,7 +156,7 @@
         \li Open a project that contains tests.
 
         \li In the \uicontrol {Test Results} output pane, select
-            \inlineimage qtcreator-run.png
+            \inlineimage run_small.png
             (\uicontrol {Run All Tests}) to run all test or
             \inlineimage qtcreator-run-selected-tests.png
             (\uicontrol {Run Selected Tests}) to run the selected tests.
@@ -233,7 +233,7 @@
     \endtable
 
     To view only messages of a particular type, select
-    \inlineimage qtcreator-filter.png
+    \inlineimage filtericon.png
     (\uicontrol {Filter Test Results}), and then select the types of messages to
     show.
 

doc/src/howto/creator-help.qdoc

@@ -113,8 +113,7 @@
 
     \list 1
 
-        \li Click the
+        \li Click the \inlineimage bookmark.png
-            \inlineimage qtcreator-help-add-bookmark.png
             (\uicontrol {Add Bookmark}) button on the toolbar.
 
         \li In the \uicontrol {Add Bookmark} dialog, click \uicontrol OK to save the
@@ -166,7 +165,7 @@
 
     If you cannot find words that you know are there, indexing might not have
     been completed for some reason. To regenerate the index, click
-    \inlineimage qtcreator-regenerate-index.png
+    \inlineimage reload_gray.png
     (\uicontrol {Regenerate Index}).
 
     Punctuation is not included in indexed terms. To find terms that contain

doc/src/howto/creator-tips.qdoc

@@ -135,7 +135,7 @@
     \section1 Showing and Hiding the Sidebar
 
     To toggle the sidebar in the \uicontrol Edit and \uicontrol Debug modes, click
-    \inlineimage qtcreator-togglebutton.png
+    \inlineimage sidebaricon.png
     or press \key Alt+0 (\key Cmd+0 on OS X).
 
     For more information on using the sidebar, see

doc/src/howto/creator-ui.qdoc

@@ -155,15 +155,14 @@
 
     \list
 
-        \li To toggle the sidebar, click \inlineimage qtcreator-togglebutton.png
+        \li To toggle the sidebar, click \inlineimage sidebaricon.png
             (\uicontrol {Hide Sidebar/Show Sidebar}) or press \key Alt+0
             (\key Cmd+0 on OS X).
 
-        \li To split the sidebar, click \inlineimage qtcreator-splitbar.png
+        \li To split the sidebar, click \inlineimage splitbutton_horizontal.png
             (\uicontrol {Split}). Select new content to view in the split view.
 
-        \li To close a sidebar view, click
+        \li To close a sidebar view, click \inlineimage splitbutton_closetop.png
-            \inlineimage qtcreator-remove-split-button.png
             (\uicontrol {Close}).
 
     \endlist
@@ -199,15 +198,14 @@
             build, re-build, clean and run the project.
 
         \li To hide the categories and sort project files alphabetically, click
-            \inlineimage qtcreator-filter.png
+            \inlineimage filtericon.png
             (\uicontrol {Filter Tree}) and select \uicontrol{Simplify Tree}.
 
         \li To hide source files which are automatically generated by the build
             system, select \uicontrol {Filter Tree > Hide Generated Files}.
 
         \li To keep the position in the project tree synchronized with the file
-            currently opened in the editor, click
+            currently opened in the editor, click \inlineimage linkicon.png
-            \inlineimage qtcreator-synchronizefocus.png
             (\uicontrol {Synchronize with Editor}).
 
         \li To see the absolute path of a file, move the mouse pointer over the
@@ -307,8 +305,7 @@
     to open its source code in the code editor.
 
     The test cases are listed in alphabetic order. To list them in the order in
-    which they are defined in the source code, select
+    which they are defined in the source code, select \inlineimage leafsort.png
-    \inlineimage qtcreator-autotests-sort-naturally.png
     (\uicontrol {Sort Naturally}).
 
     To run tests, select \uicontrol {Run All Tests} or

doc/src/projects/creator-projects-build-run-tutorial.qdoc

@@ -77,8 +77,7 @@
             automatically detected the installed kit. If no kits are available,
             see \l{Adding Kits}.
 
-        \li Click
+        \li Click \inlineimage run_small.png
-            \inlineimage qtcreator-run.png
             (\uicontrol Run) to build and run the application.
 
         \li To see the compilation progress, press \key{Alt+4} to open the

doc/src/projects/creator-projects-qbs.qdoc

@@ -162,7 +162,7 @@
         \li Select \uicontrol Build > \uicontrol {Build Project} to build the application.
 
         \li Click the
-            \inlineimage qtcreator-run.png
+            \inlineimage run_small.png
             (\uicontrol Run) button to deploy and run the application.
         \endlist
 

doc/src/projects/creator-projects-settings-build.qdoc

@@ -104,8 +104,7 @@
 
     You can use \QC variables in arguments, executable paths, and working
     directories. The variables take care of quoting their expansions, so you do
-    not need to put them in quotes. Select the
+    not need to put them in quotes. Select the \inlineimage replace.png
-    \inlineimage qtcreator-variables-button.png
     (\uicontrol {Variables}) button in a field to select from a list of variables that
     are available in a particular context.
 
@@ -143,7 +142,7 @@
     Custom Process Step}.
 
     By default, custom steps are enabled. To disable a custom step, select
-    the \inlineimage qtcreator-disable-steps.png
+    the \inlineimage buildstepdisable.png
     (\uicontrol Disable) button.
 
     \image qtcreator-build-steps-custom.png "Custom Process Step"
@@ -174,9 +173,9 @@
 
         \li To remove a clean step, click \uicontrol{Remove Item}.
 
-        \li To change the order of steps, click
+        \li To change the order of steps, click \inlineimage arrowup.png
-            \inlineimage qtcreator-movestep.png
+            (\uicontrol {Move Up}) and \inlineimage arrowdown.png
-            (\uicontrol {Move Up} and \uicontrol {Move Down}).
+            (\uicontrol {Move Down}).
     \endlist
 
     \note For more information about the cleaning steps when using Qbs, see

doc/src/qtquick/creator-mobile-app-tutorial.qdoc

@@ -98,7 +98,7 @@
                     to reference the rectangle from other places.
 
                 \li Select the \uicontrol Layout tab, and then click
-                    the \inlineimage qmldesigner-anchor-fill-screen.png
+                    the \inlineimage anchor-fill-normal.png
                     (\uicontrol {Fill to Parent}) button to anchor the rectangle
                     to the item.
 
@@ -110,7 +110,7 @@
         \li In the \uicontrol Properties pane, \uicontrol Id field, enter
             \e bubble to be able to reference the image from other places.
 
-        \li Select the \inlineimage qmldesigner-export-item-button.png
+        \li Select the \inlineimage export_unchecked.png
             (\uicontrol Export) button in the navigator to export the
             \e mainWindow and \e bubble as properties.
 

doc/src/qtquick/qtquick-app-tutorial.qdoc

@@ -109,7 +109,7 @@
                 size.
 
             \li In the \uicontrol Color field, click the
-                \inlineimage qmldesigner-transparent-button.png
+                \inlineimage button_color_none_normal.png
                 (\uicontrol Transparent) button to make the rectangle
                 transparent.
 
@@ -131,7 +131,7 @@
             \uicontrol Library to \e topLeftRect in the navigator.
 
         \li Click \uicontrol {Layout}, and then click the
-            \inlineimage qmldesigner-anchor-fill-screen.png
+            \inlineimage anchor-fill-normal.png
             (\uicontrol {Fill to Parent}) button to anchor the mouse area to the
             rectangle.
 
@@ -170,7 +170,7 @@
         \endlist
 
         \li In the \uicontrol Navigator, select the
-            \inlineimage qmldesigner-export-item-button.png
+            \inlineimage export_unchecked.png
             (\uicontrol Export) button for each type to export all types as
             properties. This enables you to use the properties in the
             \e main.qml file.
@@ -270,7 +270,7 @@
         \list a
 
             \li Click \uicontrol NumberAnimation in the code editor to display the
-                \inlineimage qml-toolbar-indicator.png
+                \inlineimage refactormarker.png
                 icon, and then click the icon to open the toolbar:
 
                 \image qmldesigner-tutorial-quick-toolbar.png "Qt Quick toolbar for animation"

doc/src/qtquick/qtquick-buttons.qdoc

@@ -71,7 +71,7 @@
                 the rectangle and produce rounded corners for the button.
 
             \li Select \uicontrol {Layout}, and then select the
-                \inlineimage qmldesigner-anchor-fill-screen.png
+                \inlineimage anchor-fill-normal.png
                 (\uicontrol {Fill to Parent}) button to anchor the rectangle to
                 the item.
 
@@ -198,7 +198,7 @@
                 for example button_up.png.
 
             \li  Click \uicontrol {Layout}, and then click the
-                \inlineimage qmldesigner-anchor-fill-screen.png
+                \inlineimage anchor-fill-normal.png
                 (\uicontrol {Fill to Parent}) button to anchor the border image to the
                 \uicontrol Item.
 
@@ -248,8 +248,10 @@
                 \endlist
 
             \li Click \uicontrol {Layout}, and then click the
-                \inlineimage qmldesigner-center-in.png "Anchor buttons"
+                \inlineimage anchor-vertical-normal.png
-                (\uicontrol {Set Vertical Anchor} and \uicontrol {Set Horizontal Anchor})
+                (\uicontrol {Set Vertical Anchor}) and
+                \inlineimage anchor-horizontal-normal.png
+                (\uicontrol {Set Horizontal Anchor})
                 buttons to inherit the vertical and horizontal centering from
                 the parent.
 

doc/src/qtquick/qtquick-designer.qdoc

@@ -113,9 +113,9 @@
     you remove an item, the child items are also removed.
 
     You can show and hide items to focus on specific parts of the application.
-    Click the
+    Click the \inlineimage button_color_none_normal.png
-    \inlineimage qmldesigner-show-hide-icon.png
+    (\uicontrol Transparent) button to change the visibility of an item on the
-    icon to change the visibility of an item on the canvas. To change the
+    canvas. To change the
     visibility of an item in the application, select the \uicontrol Visibility
     check box in the \uicontrol Properties pane or select \uicontrol Edit >
     \uicontrol Visibility in the context menu.
@@ -133,8 +133,8 @@
     To view lists of files or projects, instead, select \uicontrol {File System},
     \uicontrol {Open Documents}, or \uicontrol Projects in the menu.
     To view several types of content at a time, split the sidebar by clicking
-    \inlineimage qtcreator-splitbar.png
+    the \inlineimage splitbutton_horizontal.png
-    .
+    (\uicontrol Split) button.
 
     \section2 Setting the Stacking Order
 
@@ -445,11 +445,10 @@
     \section2 Snapping to Parent and Sibling Items
 
     When you are working on a design, you can use snapping to align
-    items on the canvas. Click the
+    items on the canvas. Click the \inlineimage snapping.png
-    \inlineimage qmldesigner-snap-to-guides-button.png
     button to have the items snap to their parent or sibling items. Snapping
     lines automatically appear to help you position the items.
-    Click the \inlineimage qmldesigner-snap-to-anchors-button.png
+    Click the \inlineimage snapping_and_anchoring.png
     button to anchor the item to the items that you snap to.
 
     Choose \uicontrol {Tools > Options > Qt Quick > Qt Quick Designer} to specify
@@ -466,8 +465,7 @@
     \section2 Hiding Item Boundaries
 
     \QMLD displays the boundaries of items on the canvas. To hide
-    the boundaries, click the
+    the boundaries, click the \inlineimage boundingrect.png
-    \inlineimage qmldesigner-show-bounding-rectangles-button.png
     button.
 
     \section2 Selecting Items
@@ -511,8 +509,8 @@
     the position of an item within a column or a row, the new position might
     not be displayed correctly on the canvas.
 
-    To refresh the image on the canvas, press \key R or select
+    To refresh the image on the canvas, press \key R or select the
     \inlineimage qmldesigner-reset-view.png
-    (\uicontrol {Reset View}).
+    (\uicontrol {Reset View}) button.
 
 */

doc/src/qtquick/qtquick-screens.qdoc

@@ -307,7 +307,7 @@
         \li In the base state, add all items you will need in the
             application (1).
             While you work on one screen, you can click the
-            \inlineimage qmldesigner-show-hide-icon.png
+            \inlineimage eye_open.png
             icon to hide items on the canvas that are not part of a screen.
 
         \li In the \uicontrol States pane, click the empty slot to create a new state

doc/src/qtquick/qtquick-toolbars.qdoc

@@ -38,8 +38,7 @@
     \title Using Qt Quick Toolbars
 
     When you select a QML type in the code and a toolbar is available,
-     a light bulb icon appears:
+    a light bulb icon appears: \inlineimage refactormarker.png
-    \inlineimage qml-toolbar-indicator.png
     . Select the icon to open the toolbar.
 
     To open toolbars immediately when you select a QML type, select

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

@@ -91,7 +91,7 @@
 
     The property alias exports the button to the QML code that uses the form.
     You can use the
-    \inlineimage qmldesigner-export-item-button.png
+    \inlineimage export_checked.png
     (\uicontrol Export) button in the \uicontrol Navigator to export an item as
     a property:
 

doc/src/qtquick/qtquick-uiforms-tutorial.qdoc

@@ -73,14 +73,14 @@
 
         \li Select the split view in the navigator, then select the
             \uicontrol Layout tab in \uicontrol Properties (4), and then click
-            the \inlineimage qmldesigner-anchor-fill-screen.png
+            the \inlineimage anchor-fill-normal.png
             (\uicontrol {Fill to Parent}) button to anchor the split view to the
             item.
 
         \li Drag and drop a \uicontrol TableView and a \uicontrol {Tab View}
             from the library to the split view in the navigator.
 
-        \li Select the \inlineimage qmldesigner-export-item-button.png
+        \li Select the \inlineimage export_unchecked.png
             (\uicontrol Export) button in the navigator to export the table view
             as a property.
 

doc/src/widgets/qtdesigner-app-tutorial.qdoc

@@ -319,7 +319,7 @@
     \section1 Compiling and Running Your Program
 
     Now that you have all the necessary files, click the
-    \inlineimage qtcreator-run.png
+    \inlineimage run_small.png
     button to compile and run your program.
 
 */