Doc: Fix terms used for Design mode views

The "canvas"/"scene"/"stage"/"working area" is called "Form Editor view".
Library, Navigator, Projects, Properties, States, Text Editor,
and Timeline are also their own views that can be organized as
workspaces and open from the Windows menu.

There are "tabs" only within views, and "panes" refers to
output panes.

Change-Id: I55898eef99b87245e4ab9b0163943725a90615a3
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

12 files changed, 65 insertions, 59 deletions

diff --git a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc
index 198949974b..2200f8fae2 100644
--- a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc
@@ -52,9 +52,10 @@
 
     While it is useful to learn the basics of Qt Quick, you can also rely on
     \QMLD to write the code for you when you drag-and-drop the ready-made
-    components to the working area and change them to your liking by modifying
-    their properties in the Design mode. You can always check up details in
-    the extensive Qt Quick documentation by pressing \key F1.
+    components to the \uicontrol {Form Editor} view and change them to your
+    liking by modifying their properties in the \uicontrol Properties view in
+    the Design mode. You can always check up details in the extensive Qt Quick
+    documentation by pressing \key F1.
 
     \list
 
diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc
index 3be68658aa..a33f986200 100644
--- a/doc/qtdesignstudio/examples/doc/loginui1.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc
@@ -78,9 +78,8 @@
     \section2 Learn Qt Quick - Projects and Files
 
     \QDS creates a set of boilerplate files and folders that you need to create
-    a UI using Qt Quick and QML. The files are listed in the \uicontrol Project
-    tab in the \uicontrol Navigator and in the \uicontrol Projects view. For
-    more information, see \l {Viewing Project Files}.
+    a UI using Qt Quick and QML. The files are listed in the \uicontrol Projects
+    view. For more information, see \l {Viewing Project Files}.
 
     \image loginui1-project-files.png
 
@@ -108,9 +107,8 @@
     QML files define a hierarchy of objects with a highly-readable, structured
     layout. Every QML file consists of two parts: an imports section and an
     object declaration section. The QML types and functionality most common to
-    UIs are provided in the QtQuick import. Select the \uicontrol {Text Editor}
-    tab in the Design mode or press \key F4 to view the QML code of an ui.qml
-    file.
+    UIs are provided in the QtQuick import. You can view the QML code of an
+    ui.qml file in the \uicontrol {Text Editor} view.
 
     For more information about creating a QML file from scratch, see
     \l{First Steps with QML}.
@@ -127,17 +125,21 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the canvas toolbar
-    or press \key {Alt+P}.
+    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    view toolbar or press \key {Alt+P}.
 
     The \e Screen01.ui.qml file that the wizard created for you should be
     open in the Design mode. If it is not, you can double-click it in the
-    \uicontrol Project sidebar view to open it.
+    \uicontrol Projects view to open it.
 
-    To modify \e Screen01.ui.qml in the \uicontrol {Form Editor} tab:
+    \note The visibility of views depends on the selected workspace. To open
+    hidden views, select \uicontrol Window > \uicontrol Views in the Design
+    mode. For more information, see \l {Managing Workspaces}.
+
+    To modify \e Screen01.ui.qml in the \uicontrol {Form Editor}:
 
     \list 1
-       \li Select \e Rectangle in the \uicontrol Navigator to display its
+       \li Select \e Rectangle in the \uicontrol Navigator view to display its
             properties in the \uicontrol Properties view.
         \li In the \uicontrol Color field, select the
             \inlineimage icons/action-icon-binding.png
@@ -182,7 +184,7 @@
     \skipto import
     \printuntil loginui1 1.0
 
-    The \uicontrol Library lists the QML types in each Qt module that are
+    The \uicontrol Library view lists the QML types in each Qt module that are
     supported by \QDS. You can use the basic types to create your own QML
     types, and they will be listed in the \uicontrol {My QML Components} tab.
     The tab is only visible if you have created custom QML components.
@@ -196,8 +198,8 @@
     You can use another wizard to create a push button and to add it to the
     project. The wizard creates a reusable button component that appears in
     the \uicontrol {My QML Components} tab in the \uicontrol Library. You can
-    drag and drop it to the canvas and modify its properties to change its
-    appearance and functionality.
+    drag and drop it to the \uicontrol {Form Editor} and modify its properties
+    in the \uicontrol Properties view to change its appearance and functionality.
 
     If you find that you cannot use the wizard to create the kind of push
     button that you want, you can create your button from scratch using basic
@@ -269,8 +271,8 @@
         \li On the toolbar, select \uicontrol Master >
             \uicontrol buttonBackground to move into the button background
             component.
-        \li Select the button background on the canvas or in the
-            \uicontrol Navigator to display its properties in the
+        \li Select the button background in the \uicontrol {Form Editor} or
+            in the \uicontrol Navigator to display its properties in the
             \uicontrol Properties view.
         \li In the \uicontrol Color field, select
             \inlineimage icons/action-icon.png
@@ -290,14 +292,15 @@
             to save your changes.
     \endlist
 
-    To move back to the top level PushButton type on the canvas, select
+    To move back to the top level PushButton type in the
+    \uicontrol {Form Editor}, select
     \uicontrol PushButton.ui.qml on the breadcrumb bar (1):
 
     \image loginui1-breadcrumb-bar.png "Breadcrumb bar in the Design mode."
 
     Your button should now look something like this:
 
-    \image loginui1-button-styled.png "Modified button in the Design mode."
+    \image loginui1-button-styled.png "Modified button in the Form Editor"
 
     \section2 Learn Qt Quick - Property Bindings
 
@@ -327,11 +330,11 @@
     You will now add two button instances to the UI and modify their labels.
 
     \list 1
-        \li Double-click \e Screen01.ui.qml in the \uicontrol Project sidebar
-            view to open it on the canvas.
+        \li Double-click \e Screen01.ui.qml in the \uicontrol Projects
+            view to open it in the \uicontrol {Form Editor}.
         \li Drag and drop two instances of the PushButton type from the
-            \uicontrol Library to the canvas.
-            \image loginui1-library.png "Library sidebar view"
+            \uicontrol Library to the \uicontrol {Form Editor}.
+            \image loginui1-library.png "Library view"
         \li Select one of the buttons in the \uicontrol Navigator to modify
             its id and text label in the \uicontrol Properties view.
         \li In the \uicontrol Id field, enter \e loginButton.
@@ -347,9 +350,9 @@
             buttons so that the text fits comfortably on the button background.
             In this example, the button width is set to 120 pixels.
         \li Move the cursor on the selected button to make the selection icon
-            appear. You can now drag the button to another position on the
-            canvas. Use the guidelines to align the buttons below the page
-            title:
+            appear. You can now drag the button to another position in the
+            \uicontrol {Form Editor}. Use the guidelines to align the buttons
+            below the page title:
             \image loginui1-align-buttons.png
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
diff --git a/doc/qtdesignstudio/examples/doc/loginui2.qdoc b/doc/qtdesignstudio/examples/doc/loginui2.qdoc
index 908c50ee51..cbc66af9de 100644
--- a/doc/qtdesignstudio/examples/doc/loginui2.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui2.qdoc
@@ -53,8 +53,8 @@
 
     \section1 Anchoring UI Components
 
-    First, you will add a new rectangle to the canvas and move all the
-    current UI components to it to create a new page. Then, you will
+    First, you will add a new rectangle to the \uicontrol {Form Editor} and move
+    all the current UI components to it to create a new page. Then, you will
     \l {Setting Anchors and Margins}{anchor} the static elements on the
     page, that is the logo image (\e logo) and page title (\e pageTitle),
     to the page. When you created the project using the new project wizard
@@ -65,20 +65,20 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the canvas toolbar
-    or press \key {Alt+P}.
+    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    toolbar or press \key {Alt+P}.
 
     To anchor components on a page:
 
     \list 1
         \li Open \e {Screen01.ui.qml} for editing in the Design mode
-            \uicontrol {Form Editor} tab.
+            \uicontrol {Form Editor}.
         \li Select the rectangle that forms the UI background in the
             \uicontrol Navigator, and change its id to \e root in the
             \uicontrol Properties view.
         \li Drag and drop a \uicontrol Rectangle from the \uicontrol Library
             to \e root, and change its id to \e loginPage.
-        \li In the \uicontrol Layout tab, select the \inlineimage anchor-fill.png
+        \li In the \uicontrol Layout view, select the \inlineimage anchor-fill.png
             (\uicontrol {Fill Parent Item}) button to anchor the page to the root
             item on all sides.
         \li Select all the other UI elements below \e root in the
@@ -132,7 +132,7 @@
             \l {Qt Quick Controls 2} types in the tab:
             \image loginui2-imports.png
         \li Drag and drop two instances of the \uicontrol {Text Field} type
-            to the canvas.
+            to the \uicontrol {Form Editor}.
         \li Select one of the text fields in the \uicontrol Navigator, and
             change its id to \e usernameField in the \uicontrol Properties view.
         \li In the \uicontrol Geometry group, \uicontrol Size field, set the
@@ -141,8 +141,8 @@
             \uicontrol tr to mark the text translatable.
             \image loginui2-field-properties.png "Text field properties"
         \li In the \uicontrol Text field, delete the default text to make the
-            placeholder text visible on the canvas. The text value always takes
-            precedence over the placeholder text value.
+            placeholder text visible on the \uicontrol {Form Editor}. The text
+            value always takes precedence over the placeholder text value.
         \li Select the other text field, and change its id to
             \e passwordField, placeholder text to \e Password,
             and width to \e 300 pixels. Also remove the default text.
@@ -155,7 +155,8 @@
             \uicontrol Navigator, and right-click on either item
             to open a context menu.
         \li Select \uicontrol Position > \uicontrol {Position in Column}
-            to position the fields on top of each other on the canvas.
+            to position the fields on top of each other in the
+            \uicontrol {Form Editor}.
         \li Select the column in the \uicontrol Navigator and change its id
             to \e fieldColumn in \uicontrol Properties.
         \li In the \uicontrol Spacing field, set the spacing between the
diff --git a/doc/qtdesignstudio/examples/doc/loginui3.qdoc b/doc/qtdesignstudio/examples/doc/loginui3.qdoc
index e4b143a7a6..b09e9d9a0a 100644
--- a/doc/qtdesignstudio/examples/doc/loginui3.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui3.qdoc
@@ -63,8 +63,8 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the canvas toolbar
-    or press \key {Alt+P}.
+    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    toolbar or press \key {Alt+P}.
 
     To add the text field and a back button needed on the registration page:
 
@@ -81,7 +81,7 @@
         \li In the \uicontrol Placeholder field, set the placeholder text to
             \e {Verify password}.
         \li In the \uicontrol Text field, delete the default text to make the
-            placeholder text visible on the canvas.
+            placeholder text visible in the \uicontrol {Form Editor}.
         \li Drag and drop a PushButton type from the \uicontrol Library,
             \uicontrol {My QML Components} tab, to \e loginPage in the
             \uicontrol Navigator.
@@ -114,7 +114,7 @@
     \section1 Using States to Simulate Page Changes
 
     You will now add \l{Adding States}{states} to the UI to show and hide UI
-    components on the canvas:
+    components in the \uicontrol {Form Editor}:
 
     \list 1
         \li In the \uicontrol States view, select the \inlineimage plus.png
@@ -250,7 +250,7 @@
         \li Right-click \e loginButton in the \uicontrol Navigator and select
             \uicontrol {Go into Component} to open \e PushButton.ui.qml for
             editing in the Design mode.
-        \li Open the \uicontrol {Text Editor} tab.
+        \li Open the \uicontrol {Text Editor}.
         \li Edit the property values for the \e down state, to set the button
             text color to white and the background and border colors to
             darker shades of green by using the \c {Qt.darker()} function:
diff --git a/doc/qtdesignstudio/examples/doc/loginui4.qdoc b/doc/qtdesignstudio/examples/doc/loginui4.qdoc
index 93204d05f3..e9e19eaeb9 100644
--- a/doc/qtdesignstudio/examples/doc/loginui4.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui4.qdoc
@@ -76,8 +76,8 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the canvas toolbar
-    or press \key {Alt+P}.
+    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    toolbar or press \key {Alt+P}.
 
     \section2 Replacing Columns with Anchors
 
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc
index 754a73f635..9ef4b1f949 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc
@@ -81,8 +81,8 @@
 
     Place different parts of the UI, such as menus and pop-ups, on separate
     artboards to be able to export them as components or children and to
-    import them as QML and PNG files that you can drag and drop to the working
-    area in \QDS Design mode while creating a UI.
+    import them as QML and PNG files that you can drag and drop to the
+    \uicontrol {Form Editor} in \QDS Design mode while creating a UI.
 
     \QDS offers predefined sets of UI controls that you can modify according
     to your needs. You can export your own controls as QML types, Qt Quick
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc
index 412c20fca2..bf937d64e2 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc
@@ -93,7 +93,7 @@
     Place different parts of the UI, such as menus and pop-ups, on separate
     artboards to be able to export them as components or children and to
     import them as QML files and images that you can drag and drop to the
-    working area in \QDS Design mode while creating a UI.
+    \uicontrol {Form Editor} in \QDS Design mode while creating a UI.
 
     \section2 Using Layers and Groups
 
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc
index 808872eef0..ad072db594 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc
@@ -35,7 +35,8 @@
     \l {Qt Quick Shapes QML Types}, with some additional properties.
 
     You can drag-and-drop the following studio components from the
-    \uicontrol Library to the canvas or the \uicontrol Navigator:
+    \uicontrol Library to the \uicontrol {Form Editor} or the
+    \uicontrol Navigator:
 
     \list
         \li \l Arc adds an arc that begins and ends at given positions.
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-importing-2d.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-importing-2d.qdoc
index 65335c3a5c..b41485e83e 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-importing-2d.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-importing-2d.qdoc
@@ -87,12 +87,11 @@
     The imported assets are displayed in the \uicontrol Assets tab in the
     \uicontrol Library as PNG images. The components that you specified in
     the design tool are displayed in the \uicontrol {My QML Components} tab,
-    as well as in the \uicontrol Project tab of the \uicontrol Navigator as
-    separate QML files.
+    as well as in the \uicontrol Projects view as separate QML files.
 
     \note The layer that was the bottom layer in the design tool becames the top
     layer in the \uicontrol Navigator to reflect the QML code model. You
-    can view the QML code in the \uicontrol {Text Editor} tab.
+    can view the QML code in the \uicontrol {Text Editor}.
 
     If asset importer conflicts, warnings, and errors are displayed in the
     \uicontrol {Asset Import} dialog while importing, fix the issues in
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc
index a182ba7951..4cb8a13d2b 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc
@@ -93,7 +93,7 @@
             \code
             singleton Values 1.0 Values.qml
             \endcode
-        \li Open \e Values.qml in the \uicontrol {Text Editor} tab for editing.
+        \li Open \e Values.qml in the \uicontrol {Text Editor} for editing.
         \li Add the following code to the top of the file to register the
             QObject-derived class that you will use to expose the global
             properties as a singleton type:
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc
index e373dc80a8..8683539cac 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc
@@ -31,9 +31,10 @@
     \QDS provides a set of Qt Quick Studio effects that inherit the types in the
     \l {Qt Graphical Effects} module. To apply a visual effect to a component,
     you must place the component inside the effect. First drag-and-drop an
-    effect from \uicontrol Library > \uicontrol Effects to the the canvas or
-    the \uicontrol Navigator, and then drag-and-drop the component to the
-    effect. For some effects, you need two source components.
+    effect from \uicontrol Library > \uicontrol Effects to the the
+    \uicontrol {Form Editor} or the \uicontrol Navigator, and then drag-and-drop
+    the component to the effect. For some effects, you need two source
+    components.
 
     The following table summarizes the available effects and contains links to
     the documentation of the inherited QML type.
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc
index 6fb8ed4feb..c0bec2cc69 100644
--- a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Design Studio documentation.
@@ -54,8 +54,8 @@
     \endcode
 
     To select an icon in the \uicontrol {ISO Icon Browser} in \QDS, select
-    the ISO icon in the \uicontrol Navigator or on the canvas, and then
-    select \uicontrol {Choose Icon} in the context menu.
+    the ISO icon in the \uicontrol Navigator or \uicontrol {Form Editor},
+    and then select \uicontrol {Choose Icon} in the context menu.
 
     \image iso-icon-browser.png
 */