40 files changed, 2806 insertions, 674 deletions
diff --git a/documentation/addons/addons-cval.asciidoc b/documentation/addons/addons-cval.asciidoc
index 8624bed70c..09a6ff4064 100644
--- a/documentation/addons/addons-cval.asciidoc
+++ b/documentation/addons/addons-cval.asciidoc
@@ -18,20 +18,16 @@ them when deploying the application.
 You can purchase add-ons or obtain a free trial key from the Vaadin website. You
 need to register in the website to obtain a key.
 
-You can get license keys from
-link:https://vaadin.com/pro/licenses[vaadin.com/pro/licenses], where you can
-navigate by selecting in the Vaadin website "My Account > Licenses" or directly
-[menuchoice]#Licenses# if you are a Pro Tools subscriber.
-
-[[figure.addons.cval.obtaining]]
-.Obtaining CVAL License
-image::img/cval-pro-licenses-3.png[]
+You can get license keys from link:https://vaadin.com/pro/licenses[vaadin.com/pro/licenses].
 
-Click on a license key to obtain the purchased or trial key.
+. Select in the Vaadin website "My Account > Licenses" or directly
+[menuchoice]#Licenses# if you are a Pro Tools subscriber.
++
+image::img/cval-pro-licenses-3.png[width=80%, scaledwidth=100%]
 
-[[figure.addons.cval.obtaining]]
-.Obtaining CVAL License Key
-image::img/cval-pro-licenses-code.png[]
+. Click on a license key to obtain the purchased or trial key.
++
+image::img/cval-pro-licenses-code.png[width=80%, scaledwidth=100%]
 
 
 [[addons.cval.installing]]
@@ -63,8 +59,11 @@ usually with a [literal]#++-D++# option. For example, on the command-line:
 
 [subs="normal"]
 ----
-[prompt]#$# [command]#java# -D[parameter]#vaadin.[replaceable]+++#+++&lt;product&gt;+++#+++.developer.license#=[replaceable]#L1cen5e-c0de# ...
+[prompt]#$# [command]#java# -Dvaadin.[replaceable]##<product>##.developer.license=[replaceable]#L1cen5e-c0de# ...
 ----
+
+where the [literal]`<product>` is the product ID, such as `charts`, `spreadsheet`, `designer`, or `testbench`.
+
 ifdef::web[]
 See link:https://vaadin.com/directory/help/installing-cval-license[the CVAL
 license key installation instructions] for more details.
@@ -82,10 +81,7 @@ navigate to the "Java > Installed JREs" section. Select the JRE version that you
 use for the application and click [guibutton]#Edit#. In the [guilabel]#Default
 VM arguments#, give the [parameter]#-D# expression as shown above.
 
-Apache Ant:: If compiling the project with Apache Ant, you could set the key in the Ant
-script as follows:
-
-
+Apache Ant:: If compiling the project with Apache Ant, you could set the key in the Ant script as follows:
 +
 [subs="normal"]
 ----
@@ -97,8 +93,6 @@ However, you should never store license keys in a source repository, so if the
 Ant script is stored in a source repository, you should pass the license key to
 Ant as a property that you then use in the script for the value argument of the
 [literal]#++<sysproperty>++# as follows:
-
-
 +
 [subs="normal"]
 ----
@@ -109,23 +103,16 @@ Ant as a property that you then use in the script for the value argument of the
 When invoking Ant from the command-line, you can pass the property with a
 [parameter]#-D# parameter to Ant.
 
-Apache Maven:: If building the project with Apache Maven, you can pass the license key with a
-[literal]#++-D++# parameter to Maven:
-
-
+Apache Maven:: If building the project with Apache Maven, you can pass the license key with a [literal]#++-D++# parameter to Maven:
 +
 [subs="normal"]
 ----
-[prompt]#$# [command]#mvn# -D[parameter]#vaadin.[replaceable]+++#+++&lt;product&gt;+++#+++.developer.license#=[replaceable]#L1cen5e-c0de# package
+[prompt]#$# [command]#mvn# -Dvaadin.[replaceable]##&lt;product&gt;##.developer.license=[replaceable]##L1cen5e-c0de## package
 ----
++
+where the [literal]`<product>` is the product ID, such as `charts`, `spreadsheet`, `designer`, or `testbench`.
+
 Continuous Integration Systems:: In CIS systems, you can pass the license key to build runners as a system
 property in the build configuration. However, this only passes it to a runner.
 As described above, Ant does not pass it to sub-processes implicitly, so you
 need to forward it explicitly as described earlier.
-
-
-
-
-
-
-
diff --git a/documentation/addons/addons-downloading.asciidoc b/documentation/addons/addons-downloading.asciidoc
index 6ccf440420..321721b381 100644
--- a/documentation/addons/addons-downloading.asciidoc
+++ b/documentation/addons/addons-downloading.asciidoc
@@ -1,6 +1,6 @@
 ---
 title: Downloading Add-ons from Vaadin Directory
-order: 2
+order: 4
 layout: page
 ---
 
@@ -33,8 +33,7 @@ components, that is, a __widget set__. This is the case for majority of add-ons,
 except for pure server-side, theme, or data binding add-ons. Compiling the
 widget set depends on the build environment. See <<addons.downloading.ant>>, or
 later in this chapter for instructions for compiling the widget set with Eclipse
-and
-Maven.+
+and Maven.
 ////
 See &lt;xref linkend="addons.compiling"/&gt; for
 instructions.
@@ -55,7 +54,3 @@ it by running Ant in the directory.
 If you are using an IDE such as Eclipse, __always__ remember to refresh the
 project to synchronize it with the filesystem after compiling the widget set
 outside the IDE.
-
-
-
-
diff --git a/documentation/addons/addons-eclipse.asciidoc b/documentation/addons/addons-eclipse.asciidoc
index cd7508466d..4bed0d43fe 100644
--- a/documentation/addons/addons-eclipse.asciidoc
+++ b/documentation/addons/addons-eclipse.asciidoc
@@ -4,13 +4,13 @@ order: 3
 layout: page
 ---
 
+// This section is excluded from the print edition
+
 [[addons.eclipse]]
 = Installing Add-ons in Eclipse with Ivy
 
-The Vaadin Plugin for Eclipse uses Apache Ivy to resolve dependencies. The
-dependencies should be listed in the [filename]#ivy.xml# file in the project
-root. The Vaadin Directory allows dowloading add-ons from a Maven repository,
-which can be accessed also by Ivy.
+If you have a project that uses Apache Ivy to resolve dependencies, they should be listed in the [filename]#ivy.xml# file in the project root.
+Vaadin Directory allows downloading add-ons from a Maven repository, which can also be accessed by Ivy.
 
 You can also use Ivy to resolve dependencies in an Ant script.
 
@@ -84,24 +84,14 @@ dependencies correctly.
 +
 IvyIDE immediately resolves the dependencies when you save the file.
 
-. Compile the add-on widget set
-////
-, as described in &lt;xref
-linkend="addons.compiling.eclipse"/&gt;.
-////
-by clicking the [guilabel]#Compile Vaadin widgets# button in the toolbar.
-
+. Compile the add-on widget set by clicking the [guilabel]#Compile Vaadin Widgetset# button in the toolbar.
 +
 [[figure.addons.eclipse.toolbar]]
 .Compiling Widget Set in Eclipse
-image::img/widgetset-compiling-toolbar-hi.png[]
-
+image::img/widgetset-compiling-toolbar.png[width=50%, scaledwidth=60%]
 
 If you experience problems with Ivy, first check all the dependency parameters.
 IvyDE can sometimes cause unexpected problems. You can clear the Ivy dependency
 cache by right-clicking the project and selecting "Ivy > Clean all caches". To
 refresh Ivy configuration, select "Ivy > Refresh". To try resolving again Ivy,
 select "Ivy > Resolve".
-
-
-
diff --git a/documentation/addons/addons-maven.asciidoc b/documentation/addons/addons-maven.asciidoc
index 9c5ca8c25c..32c4e617d7 100644
--- a/documentation/addons/addons-maven.asciidoc
+++ b/documentation/addons/addons-maven.asciidoc
@@ -1,6 +1,6 @@
 ---
 title: Using Add-ons in a Maven Project
-order: 4
+order: 2
 layout: page
 ---
 
@@ -9,14 +9,15 @@ layout: page
 
 ((("Maven", "using add-ons", id="term.addons.maven", range="startofrange")))
 
+To use add-ons in a Maven project, you simply have to add them as dependencies in the project POM.
 
-To use add-ons in a Maven project, you simply have to add them as dependencies
-in the project POM. Most add-ons include a widget set, which are compiled to the
-project widget set.
+Most add-ons include client-side widgets, counterparts of the server-side components.
+The add-on widgets will be included and compiled into the _application widget set_.
+Compiling the widget set is handled by the Vaadin Maven Plugin.
+It is enabled in Maven projects created from the Vaadin archetypes, as described in <<DUMMY/../../getting-started/getting-started-overview#getting-started.overview, "Getting Started">>.
 
-Creating, compiling, and packaging a Vaadin project with Maven was described in
-<<dummy/../../../framework/getting-started/getting-started-maven#getting-started.maven,"Using
-Vaadin with Maven">>.
+The plugin will attempt to automatically detect if you need to compile the application widget set.
+It will generate a [filename]#target/generated-sources/gwt/AppWidgetset.gwt.xml# widget set descriptor, update it when necessary, and use it for compiling the widget set.
 
 [[addons.maven.dependency]]
 == Adding a Dependency
@@ -26,61 +27,106 @@ Directory.
 
 . Open the add-on page in Vaadin Directory.
 
-. Select the version. The latest is shown by default, but you can choose another
-the version from the dropdown menu in the header of the add-on details page.
+. Choose the version on the _left-side menu bar_.
++
+image::img/directory-version.png[width=60%, scaledwidth=80%]
++
+The latest version is selected by default, but you can choose another version from the drop-down menu.
 
-. Click the [guilabel]#Maven/Ivy# to display the Maven dependency declaration, as
-illustrated in Figure <<figure.addons.maven.pombutton>>. If the add-on is
-available with multiple licenses, you will be prompted to select a license for
-the dependency.
+. Click [guilabel]#Install# to display the dependency declarations.
++
+image::img/directory-install.png[width=50%, scaledwidth=70%]
++
+If the add-on is available with multiple licenses, you will be prompted to select a license for the dependency.
 
+. Select the [guilabel]#Maven# tab.
 +
-[[figure.addons.maven.pombutton]]
-.Maven POM Definitions
-image::img/directory-maven-pom.png[]
+image::img/directory-maven-pom.png[width=50%, scaledwidth=70%]
 
-. Copy the [literal]#++dependency++# declaration to the [filename]#pom.xml# file
-in your project, under the [literal]#++dependencies++# element.
+. Open the [filename]#pom.xml# file.
+In single-module projects, you only have one, located in the root folder of the project.
+In multi-module projects, open the one in your Vaadin application module.
 
+*Eclipse IDE*:: Right-click on the [filename]#pom.xml# file and select "Open With > XML Editor".
+You can also left-click it, which opens the Maven POM editor, but directly editing the XML code is usually easier.
+You can also use the XML editor tab of the POM editor.
 
+. Copy and paste the [literal]#dependency# declaration to under the [literal]#++dependencies++# element.
 +
-[subs="normal"]
+[source, xml, subs="normal"]
 ----
   ...
-  &lt;dependencies&gt;
+  <dependencies>
     ...
-    &lt;dependency&gt;
-      &lt;groupId&gt;**com.vaadin.addon**&lt;/groupId&gt;
-      &lt;artifactId&gt;**vaadin-charts**&lt;/artifactId&gt;
-      &lt;version&gt;**1.0.0**&lt;/version&gt;
-    &lt;/dependency&gt;
-  &lt;/dependencies&gt;
+    <dependency>
+      <groupId>[replaceable]#com.vaadin.addon#</groupId>
+      <artifactId>[replaceable]#vaadin-charts#</artifactId>
+      <version>[replaceable]#1.0.0#</version>
+    </dependency>
+  </dependencies>
 ----
 +
-You can use an exact version number, as is done in the example above, or
-[literal]#++LATEST++# to always use the latest version of the add-on.
+You can use an exact version number, as is done in the example above, or [literal]#++LATEST++# to always use the latest version of the add-on.
++
+The POM excerpt given in Directory includes also a `repository` definition, but if you have used the Vaadin archetypes to create your project, it already includes the definition.
 
+. _For commercial add-ons_, you need a license key.
++
+Click [guilabel]#Activate# to buy a license, obtain a trial license key, or get the key from your Pro Tools subscription.
++
+image::img/directory-activate.png[width=50%, scaledwidth=70%]
 +
-The POM excerpt given in Directory includes also a repository definition, but if
-you have used the [literal]#++vaadin-archetype-application++# to create your
-project, it already includes the definition.
+For official Vaadin add-ons, see <<addons-cval#addons.cval, "Installing Commercial Vaadin Add-on Licence">> for more information.
 
-. Compile the widget set as described in the following section.
+. _In Vaadin 7.6 and older_: You need to compile the widget set as described in <<addons.maven.compiling>>.
 
+[[addons.maven.compiling]]
+== Compiling the Application Widget Set
 
+[NOTE]
+====
+The widget set is automatically compiled in Vaadin 7.7 and later.
+The plugin will attempt to detect any add-ons that need the widget set to be compiled.
 
-[[addons.maven.compiling]]
-== Compiling the Project Widget Set
+Just note that it can take a bit time to compile.
+
+To speed up, instead of compiling it locally, you can also use a public cloud service to compile it for you, and use it directly from a CDN service.
+See <<addons.maven.modes>> for instructions.
+====
+
+In projects that use Vaadin 7.6 or older, you need to manually compile the widget set as follows.
+
+[[addons.maven.widgetset]]
+=== Enabling Widget Set Compilation
+
+Compiling the widget set in Maven projects requires the Vaadin Maven plugin.
+It is included in Maven projects created with a current Vaadin archetype.
+
+If all is well, you are set to go.
 
-If you have used the [literal]#++vaadin-archetype-application++# to create the
-project, the [filename]#pom.xml# includes all necessary declarations to compile
-the widget set. The widget set compilation occurs in standard Maven build phase,
-such as with [parameter]#package# or [parameter]#install# goal.
+If you have used the Vaadin archetypes to create the project, the POM should include all necessary declarations to compile the widget set.
 
+However, if your Maven project has been created otherwise, you may need to enable widget set compilation manually.
+The simplest way to do that is to copy the definitions from a POM created with the archetype.
+Specifically, you need to copy the `vaadin-maven-plugin` definition in the `plugin` section, as well as the Vaadin dependencies and any relevant settings.
+
+=== Compiling the Widget Set
+
+The widget set compilation occurs in standard Maven build phase, such as with [parameter]#package# or [parameter]#install# goal.
+
+*Eclipse IDE*::
+ Click the *Compile Vaadin Widgetset* button in the Eclipse toolbar.
++
+image::img/widgetset-compiling-toolbar.png[width=50%, scaledwidth=60%]
+
+*Command-line*::
+Simply run the `package` goal.
++
 [subs="normal"]
 ----
-[prompt]#$# [command]#mvn# [parameter]#package#
+[prompt]#$# [command]#mvn# package
 ----
++
 Then, just deploy the WAR to your application server.
 
 [[addons.maven.compiling.recompiling]]
@@ -92,14 +138,22 @@ Running the [literal]#++clean++# goal usually helps, but causes a full
 recompilation. You can compile the widget set manually by running the
 [parameter]#vaadin:compile# goal.
 
+*Eclipse IDE*::
+ Click the *Compile Vaadin Widgetset* button in the Eclipse toolbar.
+
+*Command-line*::
+Run the `vaadin:compile` goal.
++
 [subs="normal"]
 ----
-[prompt]#$# [command]#mvn# [parameter]#vaadin:compile#
+[prompt]#$# [command]#mvn# vaadin:compile
 ----
-Note that this does not update the project widget set by searching new widget
-sets from the class path. It must be updated if you add or remove add-ons, for
-example. You can do that by running the [literal]#++vaadin:update-widgetset++#
-goal in the project directory.
+
+=== Updating the Widget Set
+
+Note that the `vaadin:compile` goal does not update the project widget set by searching new widget sets from the class path.
+It must be updated when you, for example, add or remove add-ons.
+You can do that by running the [literal]#vaadin:update-widgetset# goal in the project directory.
 
 [subs="normal"]
 ----
@@ -118,53 +172,138 @@ for Maven.
 After running the update, you need to run the [literal]#++vaadin:compile++# goal
 to actually compile the widget set.
 
+[[addons.maven.modes]]
+== Widget Set Modes
 
+The application widget set is by default compiled locally.
+You can also have it compiled in a public cloud service provided by Vaadin, and either use it directly from a CDN service or download it to serve it from your development server.
 
-[[addons.maven.widgetset]]
-== Enabling Widget Set Compilation
+.Widget set modes
+image::img/widgetset-modes.png[width=80%, scaledwidth=100%]
+
+The widget set mode, defined in the project POM, determines how the widget set is compiled.
+
+`local` (default)::
+The widget set is compiled locally in your development workstation.
+
+`cdn`::
+Compilation is done in the public cloud service.
+It is served directly from the CDN (Content Delivery Network) service.
++
+Using CDN is recommended for development.
 
-If you are not using a POM created with the proper Vaadin archetype, you may
-need to enable widget set compilation manually. The simplest way to do that is
-to copy the definitions from a POM created with the archetype. Specifically, you
-need to copy the [literal]#++plugin++# definitions. You also need the Vaadin
-dependencies.
+`fetch`::
+Compilation is done in the public cloud service.
+The widget set is then downloaded and deployed with the rest of the application to the application server.
 
-You need to create an empty widget set definition file, which the widget set
-compilation will populate with widget sets found from the class path. Create a
-[filename]#src/main/java/com/example/AppWidgetSet.gwt.xml# file (in the project
-package) with an empty [literal]#++<module>++# element as follows:
+The mode is set with a `vaadin.widgetset.mode` property in the [elementname]#properties# section at the beginning of the project POM.
 
+[[addons.maven.modes.local]]
+=== Local Widget Set Compilation
 
+If add-ons are detected, an [filename]#AppWidgetset.gwt.xml# descriptor file is generated into the [filename]#generated-resources# folder, and later updated automatically.
+The compiler uses the descriptor to compile the widget set, which is included in the web application archive.
+
+.Local widget set compilation
+image::img/widgetset-mode-local.png[width=80%, scaledwidth=60%]
+
+Local compilation is needed in projects that have custom widgets or widget sets that are not available from the Maven central repository or from the Vaadin add-ons or pre-releases repositories.
+Local compilation is necessary for completely offline work.
+
+Local compilation is currently the default mode.
+It is therefore not necessary to set it explicitly, unless you have made global Maven settings and want to override them in a particular project.
+You can set the `local` parameter in the [elementname]#properties# section of your [filename]#pom.xml#:
+
+[source, xml]
 ----
-<module>
-</module>
+<properties>
+    ...
+    <vaadin.widgetset.mode>local</vaadin.widgetset.mode>
+</properties>
+...
 ----
 
-[[addons.maven.widgetset.web]]
-=== Enabling the Widget Set in the UI
 
-If you have previously used the default widget set in the project, you need to
-enable the project widget set in the [filename]#web.xml# deployment descriptor.
-Edit the [filename]#src/main/webapp/WEB-INF/web.xml# file and add or modify the
-[literal]#++widgetset++# parameter for the servlet as follows.
+[[addons.maven.modes.cdn]]
+=== Online Widget Set Compilation and CDN
 
-[subs="normal"]
+The online compilation service makes it easier to use add-on components in Vaadin applications, by avoiding compilation of widget sets locally.
+It caches the widget sets, so often one is available immediately.
+A widget set can combine widgets from multiple add-ons and if a particular combination does not already exist, the service automatically compiles it.
+
+.Online widget set compilation and CDN
+image::img/widgetset-mode-cdn.png[width=80%, scaledwidth=100%]
+
+The CDN (Content Delivery Network) is a global network of web servers that serve the cached widget sets directly when you load your application in your browser.
+Avoiding local compilation can speed up development significantly.
+In development teams, all can use the shared widget sets immediately.
+
+[TIP]
+====
+While this gives benefits, the application will not work without online connnectivity.
+When you need to avoid the demo effect, either use the `local` or `fetch` mode.
+====
+
+The cloud service compiles a widget set with a given Vaadin version and a list of add-ons installed in your project.
+The Maven plug-in receives a public URL where the widget set is available and generates an [filename]#AppWidgetset.java# file that configures your application to use the online version.
+The file is generated to the default Java package.
+
+[NOTE]
+====
+Online compilation and CDN can only be used with publicly available add-ons.
+This means that the add-on dependencies must be available in the Maven central repository or in the Vaadin add-ons or pre-releases repositories.
+If you have custom widget implementations or non-public add-ons in your sources, you cannot use the online compilation and CDN service.
+====
+
+==== Enabling Compilation
+
+To enable online compilation and delivery from the CDN, set the widget set mode to `cdn` in the [elementname]#properties# section of your [filename]#pom.xml#:
+
+[source, xml]
 ----
-&lt;servlet&gt;
-  ...
-  &lt;init-param&gt;
-    &lt;description&gt;Widget Set to Use&lt;/description&gt;
-    &lt;param-name&gt;widgetset&lt;/param-name&gt;
-    &lt;param-value&gt;**com.example.AppWidgetSet**&lt;/param-value&gt;
-  &lt;/init-param&gt;
-&lt;/servlet&gt;
+<properties>
+    ...
+    <vaadin.widgetset.mode>cdn</vaadin.widgetset.mode>
+</properties>
+...
 ----
-The parameter is the class name of the widget set, that is, without the
-[filename]#.gwt.xml# extension and with the Java dot notation for class names
-that include the package name.
 
+When using the online compilation service, a [interfacename]#WidgetsetInfo# implementation is generated for your project; this makes it possible for your application to find the widget set from the correct location.
 
+[NOTE]
+====
+*The CDN is not meant to be used in production.*
 
-(((range="endofrange", startref="term.addons.maven")))
+It is are meant for speeding up development for yourself and your team.
+It is also useful if you maintain your source code in GitHub or a similar service, so that your globally working development team can immediately use the widget sets without need to compile them.
+
+For production, especially in intranet applications, you should normally use the `local` or `fetch` modes.
+This ensures that separating the availability of the Vaadin CDN service from availability of the application server does not add an extra point of failure.
+
+_They can be be used for production_ if your application is intended as globally available, you want to gain the global delivery benefit of the Vaadin CDN, and the availability tradeoff is not significant.
+====
+
+=== Serving Remotely Compiled Widget Set Locally
+
+If you want to use online compilation, but still serve the files as part of your application, you can use the `fetch` mode.
+
+.Fetching online widget set compilation
+image::img/widgetset-mode-fetch.png[width=80%, scaledwidth=100%]
 
+The Maven plugin downloads the compiled widget set into the project as it was compiled locally.
+It generates an [classname]#AppWidgetset# class and used to provide a correct URL to the locally stored widget set.
 
+To enable the fetch mode, in the [elementname]#properties# section of your [filename]#pom.xml#:
+
+[source, xml]
+----
+<properties>
+    ...
+    <vaadin.widgetset.mode>fetch</vaadin.widgetset.mode>
+</properties>
+...
+----
+
+// TODO This is recommended during development, as it avoids slow local compilation and typically.
+
+(((range="endofrange", startref="term.addons.maven")))
diff --git a/documentation/addons/addons-overview.asciidoc b/documentation/addons/addons-overview.asciidoc
index 39d699fc08..3a66bfc0d8 100644
--- a/documentation/addons/addons-overview.asciidoc
+++ b/documentation/addons/addons-overview.asciidoc
@@ -13,15 +13,24 @@ link:http://vaadin.com/directory/[Vaadin Directory] provides a rich collection
 of add-ons for Vaadin, and you may find others from independent sources. Add-ons
 are also one way to share your own components between projects.
 
-Installation of add-ons from Vaadin Directory is simple, just adding an Ivy or
-Maven dependency, or downloading the JAR package and and dropping it in the web
-library folder of the project. Most add-ons include a widget set, which you need
-to compile, but it's usually just a click of a button or a single command.
+== Installing
 
-After trying out an add-on, you can give some feedback to the author of the
-add-on by rating the add-on with one to five stars and optionally leaving a
-comment. Most add-ons also have a discussion forum thread for user feedback and
-questions.
+Installing add-ons from Vaadin Directory is simple, just adding a Maven or an Ivy dependency, or downloading the JAR package and and dropping it in the web library folder of the project.
+
+[[figure.addons.maven.widgetset]]
+.Role of the widget set
+image::img/addon-architecture.png[width=75%, scaledwidth=80%]
+
+Most add-ons include _widgets_, client-side counterparts of the server-side components used in the Vaadin Java API, as illustrated in <<figure.addons.maven.widgetset>>.
+The _widget set_ needs to be compiled into the application widget set.
+
+Adding the dependency in Maven projects and compiling the widget set is described in <<addons-maven#addons.maven, "Using Add-ons in a Maven Project">>.
+The section also describes how to use the online compilation and CDN services during development.
+
+For Eclipse projects that use Ivy for dependency management, see <<addons-eclipse#addons.eclipse, "Installing Add-ons in Eclipse with Ivy">>.
+You can also download and install add-ons from a ZIP-package, as described in <<addons-downloading#addons.downloading, "Downloading Add-ons from Vaadin Directory">>.
+
+== Add-on Licenses
 
 Add-ons available from Vaadin Directory are distributed under different
 licenses, of which some are commercial. While the add-ons can be downloaded
@@ -30,8 +39,11 @@ offered under a dual licensing agreement so that they can be used in open source
 projects for free, and many have a trial period for closed-source development.
 Commercial Vaadin add-ons distributed under the CVAL license require installing
 a license key as instructed in
-<<dummy/../../../framework/addons/addons-cval#addons.cval,"Installing Commercial
-Vaadin Add-on Licence">>.
-
+<<dummy/../../../framework/addons/addons-cval#addons.cval, "Installing Commercial Vaadin Add-on Licence">>.
 
+== Feedback and Support
 
+After trying out an add-on, you can give some feedback to the author of the
+add-on by rating the add-on with one to five stars and optionally leaving a
+comment. Most add-ons also have a discussion forum thread for user feedback and
+questions.
diff --git a/documentation/addons/chapter-addons.asciidoc b/documentation/addons/chapter-addons.asciidoc
index 4319e43456..dd432abdcc 100644
--- a/documentation/addons/chapter-addons.asciidoc
+++ b/documentation/addons/chapter-addons.asciidoc
@@ -5,15 +5,16 @@ This chapter describes the installation of add-on components, themes,
 containers, and other tools from the Vaadin Directory and the use of commercial
 add-ons offered by Vaadin.
 
-
 include::addons-overview.asciidoc[leveloffset=+2]
 
-include::addons-downloading.asciidoc[leveloffset=+2]
-
-include::addons-eclipse.asciidoc[leveloffset=+2]
-
 include::addons-maven.asciidoc[leveloffset=+2]
 
 include::addons-cval.asciidoc[leveloffset=+2]
 
+// Outdated for the print edition
+// include::addons-eclipse.asciidoc[leveloffset=+2]
+
+// Irrelevant for the print edition
+// include::addons-downloading.asciidoc[leveloffset=+2]
+
 include::addons-troubleshooting.asciidoc[leveloffset=+2]
diff --git a/documentation/addons/img/addon-architecture.png b/documentation/addons/img/addon-architecture.png
new file mode 100644
index 0000000000..dc73899cb5
--- /dev/null
+++ b/documentation/addons/img/addon-architecture.png
diff --git a/documentation/addons/img/directory-activate.png b/documentation/addons/img/directory-activate.png
new file mode 100644
index 0000000000..15681d6ab7
--- /dev/null
+++ b/documentation/addons/img/directory-activate.png
diff --git a/documentation/addons/img/directory-install.png b/documentation/addons/img/directory-install.png
new file mode 100644
index 0000000000..d687e26979
--- /dev/null
+++ b/documentation/addons/img/directory-install.png
diff --git a/documentation/addons/img/directory-maven-pom.png b/documentation/addons/img/directory-maven-pom.png
index 720d4b089c..624583b43f 100644
--- a/documentation/addons/img/directory-maven-pom.png
+++ b/documentation/addons/img/directory-maven-pom.png
diff --git a/documentation/addons/img/directory-version.png b/documentation/addons/img/directory-version.png
new file mode 100644
index 0000000000..7217218a3f
--- /dev/null
+++ b/documentation/addons/img/directory-version.png
diff --git a/documentation/addons/img/online-compilation-cdn.png b/documentation/addons/img/online-compilation-cdn.png
new file mode 100644
index 0000000000..63328013ef
--- /dev/null
+++ b/documentation/addons/img/online-compilation-cdn.png
diff --git a/documentation/addons/img/widgetset-compiling-toolbar-hi.png b/documentation/addons/img/widgetset-compiling-toolbar-hi.png
deleted file mode 100644
index 79e14ec60e..0000000000
--- a/documentation/addons/img/widgetset-compiling-toolbar-hi.png
+++ /dev/null
diff --git a/documentation/addons/img/widgetset-compiling-toolbar-lo.png b/documentation/addons/img/widgetset-compiling-toolbar-lo.png
deleted file mode 100644
index 70b3e9bfb4..0000000000
--- a/documentation/addons/img/widgetset-compiling-toolbar-lo.png
+++ /dev/null
diff --git a/documentation/addons/img/widgetset-compiling-toolbar.png b/documentation/addons/img/widgetset-compiling-toolbar.png
index 853b2c457c..8a77aaaf58 100644
--- a/documentation/addons/img/widgetset-compiling-toolbar.png
+++ b/documentation/addons/img/widgetset-compiling-toolbar.png
diff --git a/documentation/addons/img/widgetset-mode-cdn.png b/documentation/addons/img/widgetset-mode-cdn.png
new file mode 100644
index 0000000000..ad6c7a4d78
--- /dev/null
+++ b/documentation/addons/img/widgetset-mode-cdn.png
diff --git a/documentation/addons/img/widgetset-mode-fetch.png b/documentation/addons/img/widgetset-mode-fetch.png
new file mode 100644
index 0000000000..9963c2ca08
--- /dev/null
+++ b/documentation/addons/img/widgetset-mode-fetch.png
diff --git a/documentation/addons/img/widgetset-mode-local.png b/documentation/addons/img/widgetset-mode-local.png
new file mode 100644
index 0000000000..be18515d35
--- /dev/null
+++ b/documentation/addons/img/widgetset-mode-local.png
diff --git a/documentation/addons/img/widgetset-modes.png b/documentation/addons/img/widgetset-modes.png
new file mode 100644
index 0000000000..768aa59e50
--- /dev/null
+++ b/documentation/addons/img/widgetset-modes.png
diff --git a/documentation/addons/original-drawings/Makefile b/documentation/addons/original-drawings/Makefile
new file mode 100644
index 0000000000..9736c8b5ea
--- /dev/null
+++ b/documentation/addons/original-drawings/Makefile
@@ -0,0 +1,13 @@
+IMAGES = widgetset-modes widgetset-mode-cdn widgetset-mode-local \
+ widgetset-mode-fetch addon-architecture
+
+SRCIMAGES := $(foreach file, $(IMAGES), $(file).svg)
+TRGIMAGES := $(foreach file, $(IMAGES), ../img/$(file).png)
+
+images: $(TRGIMAGES) FORCE
+# Just do low now $(TRGIMAGES_LO)
+
+$(TRGIMAGES): ../img/%.png: %.svg
+	inkscape --export-png $@ --export-dpi=300 --export-area-page $<
+
+FORCE:
diff --git a/documentation/addons/original-drawings/addon-architecture.svg b/documentation/addons/original-drawings/addon-architecture.svg
new file mode 100644
index 0000000000..83dd192cf7
--- /dev/null
+++ b/documentation/addons/original-drawings/addon-architecture.svg
@@ -0,0 +1,513 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="260"
+   height="130"
+   id="svg1901"
+   sodipodi:version="0.32"
+   inkscape:version="0.91 r"
+   sodipodi:docname="addon-architecture.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/original-drawings/intro/architecture.png"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300"
+   version="1.1">
+  <defs
+     id="defs1903">
+    <marker
+       id="marker18095"
+       orient="auto"
+       markerHeight="5.7450776"
+       markerWidth="4.6297302">
+      <g
+         id="g11064"
+         transform="matrix(0.5,0,0,0.5,-185.64298,-257.19655)">
+        <path
+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"
+           id="path11050"
+           d="m 370,508.65625 c -0.86067,0.0587 -1.60944,0.6213 -1.90625,1.4375 -0.26976,0.74176 -0.0577,1.53493 0.4375,2.125 l -1.75,0 c -0.0424,-0.005 -0.0824,0.002 -0.125,0 l 0,4.375 0.125,0 1.75,0 c -0.67896,0.8597 -0.69701,2.11549 0.0937,2.90625 0.85091,0.85091 2.27409,0.85091 3.125,0 l 3.34375,-3.375 c 0.033,-0.0295 0.0643,-0.0608 0.0937,-0.0937 0.0322,-0.0193 0.0635,-0.0402 0.0937,-0.0625 3.7e-4,-3.6e-4 0.21851,-0.28079 0.21875,-0.28125 5e-5,-9e-5 -0.007,-0.0447 0,-0.0625 0.001,-0.003 0.03,0.003 0.0312,0 0.0391,-0.0521 0.051,-0.0518 0.0937,-0.125 0.13699,-0.23476 0.16684,-0.37191 0.15625,-0.34375 0.0368,-0.0915 0.0185,-0.11251 0.0312,-0.15625 0.0106,-0.0102 0.021,-0.0206 0.0312,-0.0312 0.06,-0.22398 0.0881,-0.51689 0.0625,-0.78125 -0.0136,-0.20363 -0.0589,-0.29765 -0.0625,-0.3125 1.4e-4,-0.0104 1.4e-4,-0.0208 0,-0.0312 0.026,0.097 0.0153,0.016 -0.0937,-0.25 -0.0525,-0.13039 -0.0899,-0.21936 -0.125,-0.28125 -0.0524,-0.0897 -0.13346,-0.26235 -0.34375,-0.46875 L 371.75,509.3125 c -0.45645,-0.48671 -1.08509,-0.71163 -1.75,-0.65625 z"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1"
+           inkscape:connector-curvature="0" />
+        <path
+           sodipodi:nodetypes="cccscccsssssssscccsccc"
+           id="path11035"
+           d="m 366.65625,515.40625 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+           style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           inkscape:connector-curvature="0" />
+      </g>
+    </marker>
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 526.18109 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="744.09448 : 526.18109 : 1"
+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+       id="perspective110" />
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL"
+       style="overflow:visible">
+      <path
+         id="path3520"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none"
+         transform="scale(0.8,0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <linearGradient
+       id="linearGradient3503">
+      <stop
+         style="stop-color:#37ff40;stop-opacity:0.53608245;"
+         offset="0"
+         id="stop3505" />
+      <stop
+         style="stop-color:#ffe0e0;stop-opacity:1;"
+         offset="1"
+         id="stop3507" />
+    </linearGradient>
+    <marker
+       inkscape:stockid="Arrow2Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow2Lstart"
+       style="overflow:visible">
+      <path
+         id="path6743"
+         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         transform="matrix(1.1,0,0,1.1,1.1,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <linearGradient
+       id="linearGradient19816">
+      <stop
+         id="stop19818"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         id="stop19820"
+         offset="1"
+         style="stop-color:#e7e790;stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient11516">
+      <stop
+         id="stop11518"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1" />
+      <stop
+         id="stop11520"
+         offset="1"
+         style="stop-color:#a090e7;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient11508">
+      <stop
+         id="stop11510"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         id="stop11512"
+         offset="1"
+         style="stop-color:#e27979;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3286">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop3288" />
+      <stop
+         style="stop-color:#79e291;stop-opacity:1;"
+         offset="1"
+         id="stop3290" />
+    </linearGradient>
+    <marker
+       inkscape:stockid="Arrow2Lend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow2Lend"
+       style="overflow:visible">
+      <path
+         id="path16811"
+         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8"
+     inkscape:cx="164.39568"
+     inkscape:cy="59.7456"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     gridtolerance="10000"
+     inkscape:window-width="1672"
+     inkscape:window-height="1019"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:showpageshadow="false"
+     borderlayer="false"
+     showgrid="true"
+     inkscape:window-maximized="0"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-bbox="true"
+     inkscape:object-nodes="true"
+     inkscape:object-paths="true"
+     units="pt">
+    <inkscape:grid
+       type="xygrid"
+       id="grid6362"
+       visible="true"
+       enabled="true"
+       empspacing="5"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-50,130"
+       id="guide3154" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1906">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Taso 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="opacity:1"
+     transform="translate(0,-922.36211)">
+    <rect
+       style="display:inline;overflow:visible;visibility:visible;fill:#666666;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="rect6815"
+       width="85"
+       height="119.99995"
+       x="110"
+       y="927.36212"
+       ry="3.7880721" />
+    <rect
+       style="display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
+       id="rect3810"
+       width="75"
+       height="119.99995"
+       x="30"
+       y="927.36212"
+       ry="3.7880721" />
+    <rect
+       style="display:inline;overflow:visible;visibility:visible;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
+       id="rect6791"
+       width="55"
+       height="119.99995"
+       x="200"
+       y="927.36212"
+       ry="3.7880721" />
+    <flowRoot
+       transform="translate(317.36739,662.01687)"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none"
+       id="flowRoot9963-2-3-6"
+       xml:space="preserve"><flowRegion
+         id="flowRegion9965-2-7-7"><rect
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
+           y="271.51425"
+           x="-113.13708"
+           height="51.315746"
+           width="68.012077"
+           id="rect9967-3-5-6" /></flowRegion><flowPara
+         id="flowPara10992">UI Logic</flowPara></flowRoot>    <g
+       id="g6827-8"
+       transform="matrix(0.06329721,0,0,0.06329721,199.30626,995.21824)">
+      <g
+         transform="matrix(29.999985,-0.03019888,0.03019888,29.999985,-11004.945,-15375.022)"
+         id="g6829-7">
+        <g
+           id="g6831-7"
+           transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
+           style="fill:#ffffff;fill-opacity:1">
+          <path
+             id="path6833-7"
+             d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+             style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+             transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+             inkscape:connector-curvature="0" />
+          <path
+             sodipodi:nodetypes="cccscccsssssssscccsccc"
+             id="path6835-3"
+             d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+    </g>
+    <rect
+       style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#a0a0a0;fill-opacity:0.75384617;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
+       id="rect4680-4-4-7-0"
+       width="175"
+       height="35.000011"
+       x="5"
+       y="977.36212"
+       ry="3.7880721" />
+    <flowRoot
+       transform="translate(227.87246,661.85916)"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.75px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none"
+       id="flowRoot9963-2-3"
+       xml:space="preserve"><flowRegion
+         id="flowRegion9965-2-7"><rect
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.75px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
+           y="271.51425"
+           x="-113.13708"
+           height="37.315746"
+           width="95.012077"
+           id="rect9967-3-5" /></flowRegion><flowPara
+         id="flowPara4438">Server-side API</flowPara></flowRoot>    <rect
+       ry="3.7880721"
+       y="942.36218"
+       x="120"
+       height="95.000008"
+       width="70"
+       id="rect4680-4-4-7-0-9"
+       style="display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate" />
+    <g
+       transform="translate(93.189487,766.92955)"
+       id="g28403-3-5-6-2">
+      <rect
+         style="display:inline;overflow:visible;visibility:visible;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect4680-7-10-5-0"
+         width="60"
+         height="25"
+         x="21.810513"
+         y="180.43254"
+         ry="3.7880721" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot11361-6-1-8-1-4"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
+         transform="translate(-787.43047,-878.23713)"
+         inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90"><flowRegion
+           id="flowRegion11363-2-0-7-7-9"><rect
+             id="rect11365-5-4-6-4-2"
+             width="138.69197"
+             height="47.876488"
+             x="813.87988"
+             y="1064.3831"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1" /></flowRegion><flowPara
+           id="flowPara4198-9-0">Built-in</flowPara><flowPara
+           id="flowPara4300-0">Components</flowPara></flowRoot>    </g>
+    <g
+       transform="translate(93.189487,801.92955)"
+       id="g28403-3-5-6-6-7">
+      <rect
+         style="display:inline;overflow:visible;visibility:visible;fill:#4fb047;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect4680-7-10-5-5-8"
+         width="60"
+         height="25"
+         x="21.810513"
+         y="180.43254"
+         ry="3.7880721" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot11361-6-1-8-1-1-6"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
+         transform="translate(-787.52461,-878.4214)"
+         inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90"><flowRegion
+           id="flowRegion11363-2-0-7-7-5-3"><rect
+             id="rect11365-5-4-6-4-5-9"
+             width="138.69197"
+             height="47.876488"
+             x="813.87988"
+             y="1064.3831"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1" /></flowRegion><flowPara
+           id="flowPara4198-9-9-4">Add-on</flowPara><flowPara
+           id="flowPara4338-2">Components</flowPara></flowRoot>    </g>
+    <g
+       transform="translate(93.189487,836.92955)"
+       id="g28403-3-5-6-6-6-5">
+      <rect
+         style="display:inline;overflow:visible;visibility:visible;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:1.5, 1.5;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect4680-7-10-5-5-9-2"
+         width="60"
+         height="25"
+         x="21.810513"
+         y="180.43254"
+         ry="3.7880721" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot11361-6-1-8-1-1-4-4"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
+         transform="translate(-787.52461,-878.4214)"
+         inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90"><flowRegion
+           id="flowRegion11363-2-0-7-7-5-8-5"><rect
+             id="rect11365-5-4-6-4-5-7-3"
+             width="138.69197"
+             height="47.876488"
+             x="813.87988"
+             y="1064.3831"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1" /></flowRegion><flowPara
+           id="flowPara4198-9-9-0-2">Custom</flowPara><flowPara
+           id="flowPara4338-0-3">Components</flowPara></flowRoot>    </g>
+    <g
+       transform="matrix(-1.8989154,-0.0019115,-0.0019115,1.8989154,892.26083,22.007358)"
+       id="g6829-2-5">
+      <g
+         id="g6831-2-7"
+         transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
+         style="fill:#ffffff;fill-opacity:1">
+        <path
+           id="path6833-1-5"
+           d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+           style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+           transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+           inkscape:connector-curvature="0" />
+        <path
+           sodipodi:nodetypes="cccscccsssssssscccsccc"
+           id="path6835-0-9"
+           d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+    <g
+       transform="translate(28.189484,766.92954)"
+       id="g28403-3-5-6">
+      <rect
+         style="display:inline;overflow:visible;visibility:visible;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect4680-7-10-5"
+         width="50"
+         height="25"
+         x="21.810513"
+         y="180.43254"
+         ry="3.7880721" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot11361-6-1-8-1"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
+         transform="translate(-787.43047,-878.23713)"
+         inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90"><flowRegion
+           id="flowRegion11363-2-0-7-7"><rect
+             id="rect11365-5-4-6-4"
+             width="138.69197"
+             height="47.876488"
+             x="813.87988"
+             y="1064.3831"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1" /></flowRegion><flowPara
+           id="flowPara4198-9">Built-in</flowPara><flowPara
+           id="flowPara4300">Widgets</flowPara></flowRoot>    </g>
+    <g
+       transform="translate(29.189484,836.92954)"
+       id="g28403-3-5-6-6-6">
+      <rect
+         style="display:inline;overflow:visible;visibility:visible;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:1.5, 1.5;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect4680-7-10-5-5-9"
+         width="49"
+         height="24"
+         x="21.810513"
+         y="180.43254"
+         ry="3.7880721" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot11361-6-1-8-1-1-4"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
+         transform="translate(-787.52461,-878.4214)"
+         inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90"><flowRegion
+           id="flowRegion11363-2-0-7-7-5-8"><rect
+             id="rect11365-5-4-6-4-5-7"
+             width="138.69197"
+             height="47.876488"
+             x="813.87988"
+             y="1064.3831"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1" /></flowRegion><flowPara
+           id="flowPara4198-9-9-0">Custom</flowPara><flowPara
+           id="flowPara4338-0">Widgets</flowPara></flowRoot>    </g>
+    <flowRoot
+       transform="translate(148.55364,661.85916)"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.75px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none"
+       id="flowRoot9963-2-3-6-8-6-1"
+       xml:space="preserve"><flowRegion
+         id="flowRegion9965-2-7-7-1-9-6"><rect
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.75px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
+           y="271.51425"
+           x="-113.13708"
+           height="53.315746"
+           width="70.012077"
+           id="rect9967-3-5-6-4-7-9" /></flowRegion><flowPara
+         id="flowPara11082-4">Widget Set</flowPara></flowRoot>    <g
+       transform="translate(28.189487,801.92955)"
+       id="g28403-3-5-6-6">
+      <rect
+         style="display:inline;overflow:visible;visibility:visible;fill:#4fb047;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect4680-7-10-5-5"
+         width="49"
+         height="24"
+         x="21.810513"
+         y="180.43254"
+         ry="3.7880721" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot11361-6-1-8-1-1"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
+         transform="translate(-787.52461,-878.4214)"
+         inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90"><flowRegion
+           id="flowRegion11363-2-0-7-7-5"><rect
+             id="rect11365-5-4-6-4-5"
+             width="138.69197"
+             height="47.876488"
+             x="813.87988"
+             y="1064.3831"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1" /></flowRegion><flowPara
+           id="flowPara4198-9-9">Add-on</flowPara><flowPara
+           id="flowPara4338">Widgets</flowPara></flowRoot>    </g>
+    <flowRoot
+       transform="translate(123.27856,712.26946)"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.75px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;opacity:1;fill:#000000;fill-opacity:1;stroke:none"
+       id="flowRoot9963-2-3-1"
+       xml:space="preserve"><flowRegion
+         id="flowRegion9965-2-7-8"><rect
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.75px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1"
+           y="271.51425"
+           x="-113.13708"
+           height="37.315746"
+           width="95.012077"
+           id="rect9967-3-5-9" /></flowRegion><flowPara
+         id="flowPara10160-3">Add-on</flowPara></flowRoot>  </g>
+</svg>
diff --git a/documentation/addons/original-drawings/widgetset-compiling-toolbar.svg b/documentation/addons/original-drawings/widgetset-compiling-toolbar.svg
deleted file mode 100644
index 780d401457..0000000000
--- a/documentation/addons/original-drawings/widgetset-compiling-toolbar.svg
+++ /dev/null
@@ -1,176 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="210mm"
-   height="297mm"
-   id="svg1901"
-   sodipodi:version="0.32"
-   inkscape:version="0.46"
-   sodipodi:docname="widgetset-compiling-toolbar.svg"
-   sodipodi:docbase="/home/tsoots/ohj/translations/po"
-   inkscape:output_extension="org.inkscape.output.svg.inkscape">
-  <defs
-     id="defs1903">
-    <inkscape:perspective
-       sodipodi:type="inkscape:persp3d"
-       inkscape:vp_x="0 : 526.18109 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_z="744.09448 : 526.18109 : 1"
-       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
-       id="perspective7" />
-    <inkscape:perspective
-       id="perspective2499"
-       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
-       inkscape:vp_z="744.09448 : 526.18109 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_x="0 : 526.18109 : 1"
-       sodipodi:type="inkscape:persp3d" />
-    <linearGradient
-       y2="471.38400"
-       y1="45.132561"
-       xlink:href="#linearGradient7601"
-       x2="1370.5586"
-       x1="-526.86133"
-       spreadMethod="reflect"
-       inkscape:collect="always"
-       id="linearGradient10877"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(8.892150e-2,0.000000,0.000000,0.155616,635.7169,9.380527)" />
-    <linearGradient
-       y2="471.38400"
-       y1="45.132561"
-       xlink:href="#linearGradient7601"
-       x2="1370.5586"
-       x1="-526.86133"
-       spreadMethod="reflect"
-       inkscape:collect="always"
-       id="linearGradient10869"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.323979,0.000000,0.000000,0.566975,399.6324,14.15086)" />
-    <linearGradient
-       y2="471.38400"
-       y1="45.132561"
-       xlink:href="#linearGradient7601"
-       x2="1370.5586"
-       x1="-526.86133"
-       spreadMethod="reflect"
-       inkscape:collect="always"
-       id="linearGradient7607"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.755921,0,0,1.32289,-36,0)" />
-    <linearGradient
-       inkscape:collect="always"
-       id="linearGradient7601">
-      <stop
-         style="stop-color:#000000;stop-opacity:1;"
-         offset="0"
-         id="stop7603" />
-      <stop
-         style="stop-color:#000000;stop-opacity:0;"
-         offset="1"
-         id="stop7605" />
-    </linearGradient>
-    <inkscape:perspective
-       id="perspective13602"
-       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
-       inkscape:vp_z="744.09448 : 526.18109 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_x="0 : 526.18109 : 1"
-       sodipodi:type="inkscape:persp3d" />
-    <inkscape:perspective
-       id="perspective2529"
-       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
-       inkscape:vp_z="744.09448 : 526.18109 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_x="0 : 526.18109 : 1"
-       sodipodi:type="inkscape:persp3d" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="2.8"
-     inkscape:cx="295.42901"
-     inkscape:cy="873.26277"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     gridtolerance="10000"
-     inkscape:window-width="1333"
-     inkscape:window-height="739"
-     inkscape:window-x="1493"
-     inkscape:window-y="131"
-     showgrid="false" />
-  <metadata
-     id="metadata1906">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Taso 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     style="opacity:1">
-    <image
-       y="116.93364"
-       x="125.21431"
-       id="image2501"
-       height="48"
-       width="281"
-       sodipodi:absref="/home/magi/itmill/book-7/manual/img/addons/widgetset-compiling-toolbar.png"
-       xlink:href="/home/magi/itmill/book-7/manual/img/addons/widgetset-compiling-toolbar.png" />
-    <rect
-       style="opacity:1;fill:#eeeff2;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.0999999;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:1.29999998;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2535"
-       width="24.496172"
-       height="16.667501"
-       x="204.80843"
-       y="122.51678" />
-    <image
-       y="122.34544"
-       x="208.74406"
-       id="image2531"
-       height="17.262691"
-       width="17.262691"
-       sodipodi:absref="//home/magi/itmill/book-7/manual/img/addons/compile-widgetset-16.png"
-       xlink:href="/home/magi/itmill/book-7/manual/img/addons/compile-widgetset-16.png"
-       style="fill:#eeeff2;fill-opacity:1" />
-    <g
-       style="display:inline"
-       inkscape:label="Layer 1"
-       id="g13611"
-       transform="matrix(2.4577007e-2,0,0,2.4577007e-2,218.45402,137.72183)">
-      <g
-         id="g1317">
-        <path
-           style="fill:url(#linearGradient7607);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline"
-           id="path6080"
-           d="M 70.29035,24.82601 L 70.29035,627.16976 L 105.72785,627.16976 L 105.72785,591.73226 L 141.16535,591.73226 L 141.16535,556.32601 L 176.5716,556.32601 L 176.5716,520.88851 L 212.0091,520.88851 L 247.4466,520.88851 L 247.4466,591.73226 L 282.8841,591.73226 L 282.8841,662.60726 L 318.3216,662.60726 L 318.3216,733.48226 L 353.7591,733.48226 L 353.7591,768.91976 L 424.60285,768.91976 L 424.60285,733.48226 L 460.04035,733.48226 L 460.04035,662.60726 L 424.60285,662.60726 L 424.60285,591.73226 L 389.1966,591.73226 L 389.1966,520.88851 L 353.7591,520.88851 L 353.7591,450.01351 L 495.47785,450.01351 L 495.47785,414.57601 L 460.04035,414.57601 L 460.04035,379.13851 L 424.60285,379.13851 L 424.60285,343.70101 L 389.1966,343.70101 L 389.1966,308.29476 L 353.7591,308.29476 L 353.7591,272.85726 L 318.3216,272.85726 L 318.3216,237.41976 L 282.8841,237.41976 L 282.8841,201.98226 L 247.4466,201.98226 L 247.4466,166.54476 L 212.0091,166.54476 L 212.0091,131.10726 L 176.5716,131.10726 L 176.5716,95.669761 L 141.16535,95.669761 L 141.16535,60.26351 L 105.72785,60.26351 L 105.72785,24.82601 L 70.29035,24.82601 z" />
-        <path
-           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-           id="rect1430"
-           d="M 35.4375,24.8125 L 35.4375,627.15625 L 70.875,627.15625 L 70.875,591.71875 L 106.3125,591.71875 L 106.3125,556.3125 L 70.875,556.3125 L 70.875,95.65625 L 106.3125,95.65625 L 106.3125,60.25 L 70.875,60.25 L 70.875,24.8125 L 35.4375,24.8125 z M 106.3125,95.65625 L 106.3125,131.09375 L 141.71875,131.09375 L 141.71875,95.65625 L 106.3125,95.65625 z M 141.71875,131.09375 L 141.71875,166.53125 L 177.15625,166.53125 L 177.15625,131.09375 L 141.71875,131.09375 z M 177.15625,166.53125 L 177.15625,201.96875 L 212.59375,201.96875 L 212.59375,166.53125 L 177.15625,166.53125 z M 212.59375,201.96875 L 212.59375,237.40625 L 248.03125,237.40625 L 248.03125,201.96875 L 212.59375,201.96875 z M 248.03125,237.40625 L 248.03125,272.84375 L 283.46875,272.84375 L 283.46875,237.40625 L 248.03125,237.40625 z M 283.46875,272.84375 L 283.46875,308.28125 L 318.90625,308.28125 L 318.90625,272.84375 L 283.46875,272.84375 z M 318.90625,308.28125 L 318.90625,343.6875 L 354.34375,343.6875 L 354.34375,308.28125 L 318.90625,308.28125 z M 354.34375,343.6875 L 354.34375,379.125 L 389.75,379.125 L 389.75,343.6875 L 354.34375,343.6875 z M 389.75,379.125 L 389.75,414.5625 L 283.46875,414.5625 L 283.46875,450 L 283.46875,520.875 L 318.90625,520.875 L 318.90625,450 L 460.625,450 L 460.625,414.5625 L 425.1875,414.5625 L 425.1875,379.125 L 389.75,379.125 z M 318.90625,520.875 L 318.90625,591.71875 L 354.34375,591.71875 L 354.34375,520.875 L 318.90625,520.875 z M 354.34375,591.71875 L 354.34375,662.59375 L 389.75,662.59375 L 389.75,591.71875 L 354.34375,591.71875 z M 389.75,662.59375 L 389.75,733.46875 L 425.1875,733.46875 L 425.1875,662.59375 L 389.75,662.59375 z M 389.75,733.46875 L 318.90625,733.46875 L 318.90625,768.90625 L 389.75,768.90625 L 389.75,733.46875 z M 318.90625,733.46875 L 318.90625,662.59375 L 283.46875,662.59375 L 283.46875,733.46875 L 318.90625,733.46875 z M 283.46875,662.59375 L 283.46875,591.71875 L 248.03125,591.71875 L 248.03125,662.59375 L 283.46875,662.59375 z M 248.03125,591.71875 L 248.03125,520.875 L 212.59375,520.875 L 212.59375,591.71875 L 248.03125,591.71875 z M 212.59375,520.875 L 212.59375,450 L 177.15625,450 L 177.15625,485.4375 L 141.71875,485.4375 L 141.71875,520.875 L 177.15625,520.875 L 212.59375,520.875 z M 141.71875,520.875 L 106.3125,520.875 L 106.3125,556.3125 L 141.71875,556.3125 L 141.71875,520.875 z" />
-        <path
-           style="fill:#ffffff;fill-opacity:1;stroke:none"
-           id="rect3779"
-           d="M 70.875,95.65625 L 70.875,556.3125 L 106.3125,556.3125 L 106.3125,520.875 L 141.71875,520.875 L 141.71875,485.4375 L 177.15625,485.4375 L 177.15625,450 L 212.59375,450 L 212.59375,520.875 L 248.03125,520.875 L 248.03125,591.71875 L 283.46875,591.71875 L 283.46875,662.59375 L 318.90625,662.59375 L 318.90625,733.46875 L 354.34375,733.46875 L 389.75,733.46875 L 389.75,662.59375 L 354.34375,662.59375 L 354.34375,591.71875 L 318.90625,591.71875 L 318.90625,520.875 L 283.46875,520.875 L 283.46875,414.5625 L 318.90625,414.5625 L 354.34375,414.5625 L 389.75,414.5625 L 389.75,379.125 L 354.34375,379.125 L 354.34375,343.6875 L 318.90625,343.6875 L 318.90625,308.28125 L 283.46875,308.28125 L 283.46875,272.84375 L 248.03125,272.84375 L 248.03125,237.40625 L 212.59375,237.40625 L 212.59375,201.96875 L 177.15625,201.96875 L 177.15625,166.53125 L 141.71875,166.53125 L 141.71875,131.09375 L 106.3125,131.09375 L 106.3125,95.65625 L 70.875,95.65625 z" />
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/documentation/addons/original-drawings/widgetset-mode-cdn.svg b/documentation/addons/original-drawings/widgetset-mode-cdn.svg
new file mode 100644
index 0000000000..aece217d72
--- /dev/null
+++ b/documentation/addons/original-drawings/widgetset-mode-cdn.svg
@@ -0,0 +1,434 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="82mm"
+   height="38mm"
+   id="svg1901"
+   sodipodi:version="0.32"
+   inkscape:version="0.91 r"
+   sodipodi:docname="widgetset-mode-cdn.svg"
+   version="1.1">
+  <defs
+     id="defs1903">
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4560"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <font
+       horiz-adv-x="1024"
+       id="font3118"
+       inkscape:label="fontti 1"
+       horiz-origin-x="0"
+       horiz-origin-y="0"
+       vert-origin-x="45"
+       vert-origin-y="90"
+       vert-adv-y="90">
+      <font-face
+         units-per-em="1024"
+         id="font-face3120"
+         font-family="SVGFont 1" />
+      <missing-glyph
+         d="M0,0h1000v1024h-1000z"
+         id="missing-glyph3122" />
+    </font>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-6"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-1"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-5"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-0"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-0"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-03"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-0-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-03-0"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="151.15665"
+     inkscape:cy="80.517444"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:window-width="1920"
+     inkscape:window-height="1060"
+     inkscape:window-x="-2"
+     inkscape:window-y="-3"
+     showgrid="true"
+     inkscape:window-maximized="1"
+     inkscape:snap-center="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-bbox="true"
+     inkscape:object-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-object-midpoints="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     fit-margin-top="5"
+     fit-margin-left="5"
+     fit-margin-right="5"
+     fit-margin-bottom="5"
+     units="mm">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2982"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="5px"
+       spacingy="5px"
+       originx="-124.5px"
+       originy="-294.50073px" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="102.82143,174.42784"
+       id="guide3116" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="203.53571,173.53498"
+       id="guide3120" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1906">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Taso 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-124.5,-623.21581)">
+    <g
+       transform="translate(99.811386,-32.853903)"
+       id="g3868">
+      <rect
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect3806"
+         width="110"
+         height="124.99994"
+         x="30.188614"
+         y="660.21613"
+         ry="3.0304618"
+         rx="3.0304618" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot3808"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+         transform="translate(17.799604,303.91022)"><flowRegion
+           id="flowRegion3810"><rect
+             id="rect3812"
+             width="85.278"
+             height="32.083519"
+             x="16.541248"
+             y="363.14072"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+           id="flowPara3820"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Development workstation</flowPara></flowRoot>      <g
+         transform="translate(5.0000001,17.499998)"
+         id="g3868-81-40">
+        <rect
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="rect3806-2-3"
+           width="85"
+           height="19.999989"
+           x="30.188614"
+           y="672.71613"
+           ry="3.0304618"
+           rx="3.0304618" />
+        <flowRoot
+           xml:space="preserve"
+           id="flowRoot3808-6-2"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+           transform="translate(18.467279,316.68226)"><flowRegion
+             id="flowRegion3810-0-2"><rect
+               id="rect3812-4-3"
+               width="85.278"
+               height="32.083519"
+               x="16.541248"
+               y="363.14072"
+               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+             id="flowPara4337-1">Vaadin Project</flowPara></flowRoot>      </g>
+      <g
+         transform="translate(5.0000001,52.499998)"
+         id="g3868-81-40-5">
+        <rect
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="rect3806-2-3-6"
+           width="85"
+           height="19.999989"
+           x="30.188614"
+           y="672.71613"
+           ry="3.0304618"
+           rx="3.0304618" />
+        <flowRoot
+           xml:space="preserve"
+           id="flowRoot3808-6-2-1"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+           transform="translate(18.467279,316.68226)"><flowRegion
+             id="flowRegion3810-0-2-1"><rect
+               id="rect3812-4-3-5"
+               width="85.278"
+               height="32.083519"
+               x="16.541248"
+               y="363.14072"
+               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+             id="flowPara4337-1-4">Application Server</flowPara></flowRoot>      </g>
+      <g
+         transform="translate(5.0000001,87.5)"
+         id="g3868-81-40-5-8">
+        <rect
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="rect3806-2-3-6-3"
+           width="85"
+           height="19.999987"
+           x="30.188614"
+           y="672.71613"
+           ry="3.0304618"
+           rx="3.0304618" />
+        <flowRoot
+           xml:space="preserve"
+           id="flowRoot3808-6-2-1-1"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+           transform="translate(18.467279,316.68226)"><flowRegion
+             id="flowRegion3810-0-2-1-0"><rect
+               id="rect3812-4-3-5-3"
+               width="85.278"
+               height="32.083519"
+               x="16.541248"
+               y="363.14072"
+               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+             id="flowPara4337-1-4-0">Browser</flowPara></flowRoot>      </g>
+    </g>
+    <g
+       transform="translate(269.81139,-27.853905)"
+       id="g3868-81">
+      <rect
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect3806-2"
+         width="80"
+         height="35"
+         x="30.188614"
+         y="675.21613"
+         ry="3.0304618"
+         rx="3.0304618" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot3808-6"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+         transform="translate(18.369364,319.99189)"><flowRegion
+           id="flowRegion3810-0"><rect
+             id="rect3812-4"
+             width="85.278"
+             height="32.083519"
+             x="16.541248"
+             y="363.14072"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+           id="flowPara3820-5"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Compilation</flowPara><flowPara
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+           id="flowPara4337">Service</flowPara></flowRoot>    </g>
+    <g
+       transform="translate(269.81139,22.146095)"
+       id="g3868-81-4">
+      <rect
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect3806-2-6"
+         width="80"
+         height="35"
+         x="30.188614"
+         y="675.21613"
+         ry="3.0304618"
+         rx="3.0304618" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot3808-6-9"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+         transform="translate(18.369364,319.99189)"><flowRegion
+           id="flowRegion3810-0-0"><rect
+             id="rect3812-4-7"
+             width="85.278"
+             height="32.083519"
+             x="16.541248"
+             y="363.14072"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+           id="flowPara4337-6">CDN</flowPara></flowRoot>    </g>
+    <path
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 385.20177,732.76568 c -5.33249,10.013 -20.30329,4.74747 -20.30329,4.74747 0,0 -0.38727,5.44989 -9.89848,7.0203 -9.51121,1.57042 -15,-5 -15,-5 0,0 -10,5 -20,5 -10,0 -15,-5 -15,-5 0,0 -15,0 -20,-10 -5,-9.99999 0,-20 0,-20 0,0 -9.85188,-7.87601 -10,-20 -0.14811,-12.12399 10,-20 10,-20 0,0 -5.58058,-7.42386 -0.58058,-17.42386 5,-10 20.58058,-7.57614 20.58058,-7.57614 0,0 4.7343,-9.51543 15,-10 10.2657,-0.48456 16.01015,8.03046 16.01015,8.03046 0,0 4.15094,-7.78741 18.98985,-8.03046 14.83891,-0.24305 17.94497,9.99264 17.94497,9.99264 0,0 12.05503,-4.99263 17.05503,5.00736 5,10 -5,20 -5,20 0,0 8.22164,8.29922 8.283,20.25254 0.0614,11.95333 -8.283,19.74746 -8.283,19.74746 0,0 5.53426,13.21924 0.20177,23.23223 z"
+       id="path4376"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="zczczczczczczczczczcz" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL)"
+       d="m 340,682.36222 0,15"
+       id="path4394"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8)"
+       d="m 300,717.36219 -80,15.00002"
+       id="path4394-3"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8)"
+       d="m 220,667.36221 80,-2e-5"
+       id="path4394-3-2"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot3808-6-9-5-9"
+       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+       transform="translate(238.22879,363.06658)"><flowRegion
+         id="flowRegion3810-0-0-3-4"><rect
+           id="rect3812-4-7-8-5"
+           width="85.278"
+           height="32.083519"
+           x="16.541248"
+           y="363.14072"
+           style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start"
+         id="flowPara4337-6-6-7">cdn</flowPara></flowRoot>    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0)"
+       d="m 170,677.36222 0,15"
+       id="path4394-3-2-6"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0-1)"
+       d="m 170,712.36222 0,15"
+       id="path4394-3-2-6-2"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/documentation/addons/original-drawings/widgetset-mode-fetch.svg b/documentation/addons/original-drawings/widgetset-mode-fetch.svg
new file mode 100644
index 0000000000..3b9178671b
--- /dev/null
+++ b/documentation/addons/original-drawings/widgetset-mode-fetch.svg
@@ -0,0 +1,403 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="82mm"
+   height="38mm"
+   id="svg1901"
+   sodipodi:version="0.32"
+   inkscape:version="0.91 r"
+   sodipodi:docname="widgetset-mode-fetch.svg"
+   version="1.1">
+  <defs
+     id="defs1903">
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4560"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <font
+       horiz-adv-x="1024"
+       id="font3118"
+       inkscape:label="fontti 1"
+       horiz-origin-x="0"
+       horiz-origin-y="0"
+       vert-origin-x="45"
+       vert-origin-y="90"
+       vert-adv-y="90">
+      <font-face
+         units-per-em="1024"
+         id="font-face3120"
+         font-family="SVGFont 1" />
+      <missing-glyph
+         d="M0,0h1000v1024h-1000z"
+         id="missing-glyph3122" />
+    </font>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-6"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-1"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-5"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-0"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-0"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-03"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-0-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-03-0"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="170.09701"
+     inkscape:cy="58.04155"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:window-width="1920"
+     inkscape:window-height="1060"
+     inkscape:window-x="-2"
+     inkscape:window-y="-3"
+     showgrid="true"
+     inkscape:window-maximized="1"
+     inkscape:snap-center="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-bbox="true"
+     inkscape:object-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-object-midpoints="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     fit-margin-top="5"
+     fit-margin-left="5"
+     fit-margin-right="5"
+     fit-margin-bottom="5"
+     units="mm">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2982"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="5px"
+       spacingy="5px"
+       originx="-124.5px"
+       originy="-294.50073px" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="102.82143,174.42784"
+       id="guide3116" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="203.53571,173.53498"
+       id="guide3120" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1906">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Taso 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-124.5,-623.21581)">
+    <g
+       transform="translate(99.811386,-32.853903)"
+       id="g3868">
+      <rect
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect3806"
+         width="110"
+         height="124.99994"
+         x="30.188614"
+         y="660.21613"
+         ry="3.0304618"
+         rx="3.0304618" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot3808"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+         transform="translate(17.799604,303.91022)"><flowRegion
+           id="flowRegion3810"><rect
+             id="rect3812"
+             width="85.278"
+             height="32.083519"
+             x="16.541248"
+             y="363.14072"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+           id="flowPara3820"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Development workstation</flowPara></flowRoot>      <g
+         transform="translate(5.0000001,17.499998)"
+         id="g3868-81-40">
+        <rect
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="rect3806-2-3"
+           width="85"
+           height="19.999989"
+           x="30.188614"
+           y="672.71613"
+           ry="3.0304618"
+           rx="3.0304618" />
+        <flowRoot
+           xml:space="preserve"
+           id="flowRoot3808-6-2"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+           transform="translate(18.467279,316.68226)"><flowRegion
+             id="flowRegion3810-0-2"><rect
+               id="rect3812-4-3"
+               width="85.278"
+               height="32.083519"
+               x="16.541248"
+               y="363.14072"
+               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+             id="flowPara4337-1">Vaadin Project</flowPara></flowRoot>      </g>
+      <g
+         transform="translate(5.0000001,52.499998)"
+         id="g3868-81-40-5">
+        <rect
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="rect3806-2-3-6"
+           width="85"
+           height="19.999989"
+           x="30.188614"
+           y="672.71613"
+           ry="3.0304618"
+           rx="3.0304618" />
+        <flowRoot
+           xml:space="preserve"
+           id="flowRoot3808-6-2-1"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+           transform="translate(18.467279,316.68226)"><flowRegion
+             id="flowRegion3810-0-2-1"><rect
+               id="rect3812-4-3-5"
+               width="85.278"
+               height="32.083519"
+               x="16.541248"
+               y="363.14072"
+               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+             id="flowPara4337-1-4">Application Server</flowPara></flowRoot>      </g>
+      <g
+         transform="translate(5.0000001,87.5)"
+         id="g3868-81-40-5-8">
+        <rect
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="rect3806-2-3-6-3"
+           width="85"
+           height="19.999987"
+           x="30.188614"
+           y="672.71613"
+           ry="3.0304618"
+           rx="3.0304618" />
+        <flowRoot
+           xml:space="preserve"
+           id="flowRoot3808-6-2-1-1"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+           transform="translate(18.467279,316.68226)"><flowRegion
+             id="flowRegion3810-0-2-1-0"><rect
+               id="rect3812-4-3-5-3"
+               width="85.278"
+               height="32.083519"
+               x="16.541248"
+               y="363.14072"
+               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+             id="flowPara4337-1-4-0">Browser</flowPara></flowRoot>      </g>
+    </g>
+    <g
+       transform="translate(269.81139,-27.853905)"
+       id="g3868-81">
+      <rect
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect3806-2"
+         width="80"
+         height="35"
+         x="30.188614"
+         y="675.21613"
+         ry="3.0304618"
+         rx="3.0304618" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot3808-6"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+         transform="translate(18.369364,319.99189)"><flowRegion
+           id="flowRegion3810-0"><rect
+             id="rect3812-4"
+             width="85.278"
+             height="32.083519"
+             x="16.541248"
+             y="363.14072"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+           id="flowPara3820-5"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Compilation</flowPara><flowPara
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+           id="flowPara4337">Service</flowPara></flowRoot>    </g>
+    <path
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 385.20177,732.76568 c -5.33249,10.013 -20.30329,4.74747 -20.30329,4.74747 0,0 -0.38727,5.44989 -9.89848,7.0203 -9.51121,1.57042 -15,-5 -15,-5 0,0 -10,5 -20,5 -10,0 -15,-5 -15,-5 0,0 -15,0 -20,-10 -5,-9.99999 0,-20 0,-20 0,0 -9.85188,-7.87601 -10,-20 -0.14811,-12.12399 10,-20 10,-20 0,0 -5.58058,-7.42386 -0.58058,-17.42386 5,-10 20.58058,-7.57614 20.58058,-7.57614 0,0 4.7343,-9.51543 15,-10 10.2657,-0.48456 16.01015,8.03046 16.01015,8.03046 0,0 4.15094,-7.78741 18.98985,-8.03046 14.83891,-0.24305 17.94497,9.99264 17.94497,9.99264 0,0 12.05503,-4.99263 17.05503,5.00736 5,10 -5,20 -5,20 0,0 8.22164,8.29922 8.283,20.25254 0.0614,11.95333 -8.283,19.74746 -8.283,19.74746 0,0 5.53426,13.21924 0.20177,23.23223 z"
+       id="path4376"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="zczczczczczczczczczcz" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8)"
+       d="m 220,667.36221 80,-2e-5"
+       id="path4394-3-2"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-9)"
+       d="m 300,677.36222 -80,19.99999"
+       id="path4394-3-2-0"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot3808-6-9-5-9-9"
+       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+       transform="translate(232.16455,328.36412)"><flowRegion
+         id="flowRegion3810-0-0-3-4-9"><rect
+           id="rect3812-4-7-8-5-1"
+           width="85.278"
+           height="32.083519"
+           x="16.541248"
+           y="363.14072"
+           style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start"
+         id="flowPara4337-6-6-7-4">fetch</flowPara></flowRoot>    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0)"
+       d="m 170,677.36222 0,15"
+       id="path4394-3-2-6"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0-1)"
+       d="m 170,712.36222 0,15"
+       id="path4394-3-2-6-2"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/documentation/addons/original-drawings/widgetset-mode-local.svg b/documentation/addons/original-drawings/widgetset-mode-local.svg
new file mode 100644
index 0000000000..13eaa66a7f
--- /dev/null
+++ b/documentation/addons/original-drawings/widgetset-mode-local.svg
@@ -0,0 +1,357 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="82mm"
+   height="38mm"
+   id="svg1901"
+   sodipodi:version="0.32"
+   inkscape:version="0.91 r"
+   sodipodi:docname="widgetset-mode-local.svg"
+   version="1.1">
+  <defs
+     id="defs1903">
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4560"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <font
+       horiz-adv-x="1024"
+       id="font3118"
+       inkscape:label="fontti 1"
+       horiz-origin-x="0"
+       horiz-origin-y="0"
+       vert-origin-x="45"
+       vert-origin-y="90"
+       vert-adv-y="90">
+      <font-face
+         units-per-em="1024"
+         id="font-face3120"
+         font-family="SVGFont 1" />
+      <missing-glyph
+         d="M0,0h1000v1024h-1000z"
+         id="missing-glyph3122" />
+    </font>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-6"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-1"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-5"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-0"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-0"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-03"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-0-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-03-0"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8"
+     inkscape:cx="1.0961127"
+     inkscape:cy="76.167833"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:window-width="1920"
+     inkscape:window-height="1060"
+     inkscape:window-x="-2"
+     inkscape:window-y="-3"
+     showgrid="true"
+     inkscape:window-maximized="1"
+     inkscape:snap-center="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-bbox="true"
+     inkscape:object-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-object-midpoints="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     fit-margin-top="5"
+     fit-margin-left="5"
+     fit-margin-right="5"
+     fit-margin-bottom="5"
+     units="mm">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2982"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="5px"
+       spacingy="5px"
+       originx="-124.5px"
+       originy="-294.50073px" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="102.82143,174.42784"
+       id="guide3116" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="203.53571,173.53498"
+       id="guide3120" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1906">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Taso 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-124.5,-623.21581)">
+    <g
+       transform="translate(99.811386,-32.853916)"
+       id="g3868">
+      <rect
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect3806"
+         width="110"
+         height="124.99994"
+         x="30.188614"
+         y="660.21613"
+         ry="3.0304618"
+         rx="3.0304618" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot3808"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+         transform="translate(17.799604,303.91022)"><flowRegion
+           id="flowRegion3810"><rect
+             id="rect3812"
+             width="85.278"
+             height="32.083519"
+             x="16.541248"
+             y="363.14072"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+           id="flowPara3820"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Development workstation</flowPara></flowRoot>      <g
+         transform="translate(5.0000001,17.499998)"
+         id="g3868-81-40">
+        <rect
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="rect3806-2-3"
+           width="85"
+           height="19.999989"
+           x="30.188614"
+           y="672.71613"
+           ry="3.0304618"
+           rx="3.0304618" />
+        <flowRoot
+           xml:space="preserve"
+           id="flowRoot3808-6-2"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+           transform="translate(18.467279,316.68226)"><flowRegion
+             id="flowRegion3810-0-2"><rect
+               id="rect3812-4-3"
+               width="85.278"
+               height="32.083519"
+               x="16.541248"
+               y="363.14072"
+               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+             id="flowPara4337-1">Vaadin Project</flowPara></flowRoot>      </g>
+      <g
+         transform="translate(5.0000001,52.499998)"
+         id="g3868-81-40-5">
+        <rect
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="rect3806-2-3-6"
+           width="85"
+           height="19.999989"
+           x="30.188614"
+           y="672.71613"
+           ry="3.0304618"
+           rx="3.0304618" />
+        <flowRoot
+           xml:space="preserve"
+           id="flowRoot3808-6-2-1"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+           transform="translate(18.467279,316.68226)"><flowRegion
+             id="flowRegion3810-0-2-1"><rect
+               id="rect3812-4-3-5"
+               width="85.278"
+               height="32.083519"
+               x="16.541248"
+               y="363.14072"
+               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+             id="flowPara4337-1-4">Application Server</flowPara></flowRoot>      </g>
+      <g
+         transform="translate(5.0000001,87.5)"
+         id="g3868-81-40-5-8">
+        <rect
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="rect3806-2-3-6-3"
+           width="85"
+           height="19.999987"
+           x="30.188614"
+           y="672.71613"
+           ry="3.0304618"
+           rx="3.0304618" />
+        <flowRoot
+           xml:space="preserve"
+           id="flowRoot3808-6-2-1-1"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+           transform="translate(18.467279,316.68226)"><flowRegion
+             id="flowRegion3810-0-2-1-0"><rect
+               id="rect3812-4-3-5-3"
+               width="85.278"
+               height="32.083519"
+               x="16.541248"
+               y="363.14072"
+               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+             id="flowPara4337-1-4-0">Browser</flowPara></flowRoot>      </g>
+    </g>
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot3808-6-9-5"
+       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+       transform="translate(126.40097,318.57165)"><flowRegion
+         id="flowRegion3810-0-0-3"><rect
+           id="rect3812-4-7-8"
+           width="85.278"
+           height="32.083519"
+           x="16.541248"
+           y="363.14072"
+           style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start"
+         id="flowPara4337-6-6">local</flowPara></flowRoot>    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0)"
+       d="m 170,677.36221 0,15"
+       id="path4394-3-2-6"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0-1)"
+       d="m 170,712.36221 0,15"
+       id="path4394-3-2-6-2"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/documentation/addons/original-drawings/widgetset-modes.svg b/documentation/addons/original-drawings/widgetset-modes.svg
new file mode 100644
index 0000000000..aeb4e73c4b
--- /dev/null
+++ b/documentation/addons/original-drawings/widgetset-modes.svg
@@ -0,0 +1,466 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="82mm"
+   height="38mm"
+   id="svg1901"
+   sodipodi:version="0.32"
+   inkscape:version="0.91 r"
+   sodipodi:docname="widgetset-modes.svg"
+   version="1.1">
+  <defs
+     id="defs1903">
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4560"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <font
+       horiz-adv-x="1024"
+       id="font3118"
+       inkscape:label="fontti 1"
+       horiz-origin-x="0"
+       horiz-origin-y="0"
+       vert-origin-x="45"
+       vert-origin-y="90"
+       vert-adv-y="90">
+      <font-face
+         units-per-em="1024"
+         id="font-face3120"
+         font-family="SVGFont 1" />
+      <missing-glyph
+         d="M0,0h1000v1024h-1000z"
+         id="missing-glyph3122" />
+    </font>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-6"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-1"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-5"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-0"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-0"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-03"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="EmptyTriangleOutL-8-8-0-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4560-2-6-03-0"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="101.78544"
+     inkscape:cy="80.264906"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:window-width="1920"
+     inkscape:window-height="1060"
+     inkscape:window-x="-2"
+     inkscape:window-y="-3"
+     showgrid="true"
+     inkscape:window-maximized="1"
+     inkscape:snap-center="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-bbox="true"
+     inkscape:object-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-object-midpoints="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     fit-margin-top="5"
+     fit-margin-left="5"
+     fit-margin-right="5"
+     fit-margin-bottom="5"
+     units="mm">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2982"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="5px"
+       spacingy="5px"
+       originx="-124.5px"
+       originy="-294.50073px" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="102.82143,174.42784"
+       id="guide3116" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="203.53571,173.53498"
+       id="guide3120" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1906">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Taso 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-124.5,-623.21581)">
+    <g
+       transform="translate(99.811386,-32.853903)"
+       id="g3868">
+      <rect
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect3806"
+         width="110"
+         height="124.99994"
+         x="30.188614"
+         y="660.21613"
+         ry="3.0304618"
+         rx="3.0304618" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot3808"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+         transform="translate(17.799604,303.91022)"><flowRegion
+           id="flowRegion3810"><rect
+             id="rect3812"
+             width="85.278"
+             height="32.083519"
+             x="16.541248"
+             y="363.14072"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+           id="flowPara3820"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Development workstation</flowPara></flowRoot>      <g
+         transform="translate(5.0000001,17.499998)"
+         id="g3868-81-40">
+        <rect
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="rect3806-2-3"
+           width="85"
+           height="19.999989"
+           x="30.188614"
+           y="672.71613"
+           ry="3.0304618"
+           rx="3.0304618" />
+        <flowRoot
+           xml:space="preserve"
+           id="flowRoot3808-6-2"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+           transform="translate(18.467279,316.68226)"><flowRegion
+             id="flowRegion3810-0-2"><rect
+               id="rect3812-4-3"
+               width="85.278"
+               height="32.083519"
+               x="16.541248"
+               y="363.14072"
+               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+             id="flowPara4337-1">Vaadin Project</flowPara></flowRoot>      </g>
+      <g
+         transform="translate(5.0000001,52.499998)"
+         id="g3868-81-40-5">
+        <rect
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="rect3806-2-3-6"
+           width="85"
+           height="19.999989"
+           x="30.188614"
+           y="672.71613"
+           ry="3.0304618"
+           rx="3.0304618" />
+        <flowRoot
+           xml:space="preserve"
+           id="flowRoot3808-6-2-1"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+           transform="translate(18.467279,316.68226)"><flowRegion
+             id="flowRegion3810-0-2-1"><rect
+               id="rect3812-4-3-5"
+               width="85.278"
+               height="32.083519"
+               x="16.541248"
+               y="363.14072"
+               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+             id="flowPara4337-1-4">Application Server</flowPara></flowRoot>      </g>
+      <g
+         transform="translate(5.0000001,87.5)"
+         id="g3868-81-40-5-8">
+        <rect
+           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+           id="rect3806-2-3-6-3"
+           width="85"
+           height="19.999987"
+           x="30.188614"
+           y="672.71613"
+           ry="3.0304618"
+           rx="3.0304618" />
+        <flowRoot
+           xml:space="preserve"
+           id="flowRoot3808-6-2-1-1"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+           transform="translate(18.467279,316.68226)"><flowRegion
+             id="flowRegion3810-0-2-1-0"><rect
+               id="rect3812-4-3-5-3"
+               width="85.278"
+               height="32.083519"
+               x="16.541248"
+               y="363.14072"
+               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+             id="flowPara4337-1-4-0">Browser</flowPara></flowRoot>      </g>
+    </g>
+    <g
+       transform="translate(269.81139,-27.853905)"
+       id="g3868-81">
+      <rect
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect3806-2"
+         width="80"
+         height="35"
+         x="30.188614"
+         y="675.21613"
+         ry="3.0304618"
+         rx="3.0304618" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot3808-6"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+         transform="translate(18.369364,319.99189)"><flowRegion
+           id="flowRegion3810-0"><rect
+             id="rect3812-4"
+             width="85.278"
+             height="32.083519"
+             x="16.541248"
+             y="363.14072"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+           id="flowPara3820-5"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Compilation</flowPara><flowPara
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+           id="flowPara4337">Service</flowPara></flowRoot>    </g>
+    <g
+       transform="translate(269.81139,22.146095)"
+       id="g3868-81-4">
+      <rect
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect3806-2-6"
+         width="80"
+         height="35"
+         x="30.188614"
+         y="675.21613"
+         ry="3.0304618"
+         rx="3.0304618" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot3808-6-9"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+         transform="translate(18.369364,319.99189)"><flowRegion
+           id="flowRegion3810-0-0"><rect
+             id="rect3812-4-7"
+             width="85.278"
+             height="32.083519"
+             x="16.541248"
+             y="363.14072"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
+           id="flowPara4337-6">CDN</flowPara></flowRoot>    </g>
+    <path
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 385.20177,732.76568 c -5.33249,10.013 -20.30329,4.74747 -20.30329,4.74747 0,0 -0.38727,5.44989 -9.89848,7.0203 -9.51121,1.57042 -15,-5 -15,-5 0,0 -10,5 -20,5 -10,0 -15,-5 -15,-5 0,0 -15,0 -20,-10 -5,-9.99999 0,-20 0,-20 0,0 -9.85188,-7.87601 -10,-20 -0.14811,-12.12399 10,-20 10,-20 0,0 -5.58058,-7.42386 -0.58058,-17.42386 5,-10 20.58058,-7.57614 20.58058,-7.57614 0,0 4.7343,-9.51543 15,-10 10.2657,-0.48456 16.01015,8.03046 16.01015,8.03046 0,0 4.15094,-7.78741 18.98985,-8.03046 14.83891,-0.24305 17.94497,9.99264 17.94497,9.99264 0,0 12.05503,-4.99263 17.05503,5.00736 5,10 -5,20 -5,20 0,0 8.22164,8.29922 8.283,20.25254 0.0614,11.95333 -8.283,19.74746 -8.283,19.74746 0,0 5.53426,13.21924 0.20177,23.23223 z"
+       id="path4376"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="zczczczczczczczczczcz" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL)"
+       d="m 340,682.36222 0,15"
+       id="path4394"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8)"
+       d="m 300,717.36219 -80,15.00002"
+       id="path4394-3"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8)"
+       d="m 220,667.36221 80,-2e-5"
+       id="path4394-3-2"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot3808-6-9-5"
+       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+       transform="translate(126.40097,318.57166)"><flowRegion
+         id="flowRegion3810-0-0-3"><rect
+           id="rect3812-4-7-8"
+           width="85.278"
+           height="32.083519"
+           x="16.541248"
+           y="363.14072"
+           style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start"
+         id="flowPara4337-6-6">local</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot3808-6-9-5-9"
+       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+       transform="translate(238.22879,363.06658)"><flowRegion
+         id="flowRegion3810-0-0-3-4"><rect
+           id="rect3812-4-7-8-5"
+           width="85.278"
+           height="32.083519"
+           x="16.541248"
+           y="363.14072"
+           style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start"
+         id="flowPara4337-6-6-7">cdn</flowPara></flowRoot>    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-9)"
+       d="m 300,677.36222 -80,19.99999"
+       id="path4394-3-2-0"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot3808-6-9-5-9-9"
+       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+       transform="translate(232.16455,328.36412)"><flowRegion
+         id="flowRegion3810-0-0-3-4-9"><rect
+           id="rect3812-4-7-8-5-1"
+           width="85.278"
+           height="32.083519"
+           x="16.541248"
+           y="363.14072"
+           style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start"
+         id="flowPara4337-6-6-7-4">fetch</flowPara></flowRoot>    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0)"
+       d="m 170,677.36222 0,15"
+       id="path4394-3-2-6"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0-1)"
+       d="m 170,712.36222 0,15"
+       id="path4394-3-2-6-2"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/documentation/application/application-environment.asciidoc b/documentation/application/application-environment.asciidoc
index 0322c77e4a..f5933afe85 100644
--- a/documentation/application/application-environment.asciidoc
+++ b/documentation/application/application-environment.asciidoc
@@ -62,7 +62,9 @@ Your own theme files (OPTIONAL)::
 If your application uses a special theme (look and feel), you must include it in [filename]#VAADIN/themes/themename# directory.
 
 Widget sets (OPTIONAL)::
-If your application uses a project-specific widget set, it must be compiled in the [filename]#VAADIN/widgetset/# directory.
+If your application uses add-ons or custom widgets, they must be compiled to the [filename]#VAADIN/widgetset/# directory.
+When using add-ons, this is done automatically in Maven projects.
+See <<dummy/../../../framework/addons/addons-maven#addons.maven, "Using Add-ons in a Maven Project">> for more information.
 
 [[application.environment.webservlet]]
 == Web Servlet Class
@@ -137,7 +139,7 @@ The servlet is then mapped to a URL path in a standard way for Java Servlets.
     &lt;!-- If not using the default widget set--&gt;
     &lt;init-param&gt;
       &lt;param-name&gt;widgetset&lt;/param-name&gt;
-      &lt;param-value&gt;[replaceable]##com.ex.myprj.MyWidgetSet##&lt;/param-value&gt;
+      &lt;param-value&gt;[replaceable]##com.ex.myprj.AppWidgetSet##&lt;/param-value&gt;
     &lt;/init-param&gt;
   &lt;/servlet&gt;
 
@@ -173,24 +175,36 @@ Servlet 3.0 support is useful for at least server push.
 [[application.environment.web-xml.widgetset]]
 === Widget Set
 
-If the UI uses add-on components or custom widgets, it needs a custom widget
-set, which can be specified with the [parameter]#widgetset# parameter for the
-servlet. Alternatively, you can defined it with the [classname]#@WidgetSet#
-annotation for the UI class. The parameter is a class name with the same path
-but without the [filename]#.gwt.xml# extension as the widget set definition
-file. If the parameter is not given, the
-[classname]#com.vaadin.DefaultWidgetSet# is used, which contains all the widgets
-for the built-in Vaadin components.
+The widget set is normally defined and compiled automatically in Maven projects.
+It may be necessary to define it manually in some cases, such as when developing custom widgets or if you need to include special rules in the widget set definition file ([filename]#.gwt.xml# module descriptor).
 
-Unless using the default widget set (which is included in the
-[filename]#vaadin-client-compiled# JAR), the widget set must be compiled, as
-described in
-<<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using
-Vaadin Add-ons">> or
-<<dummy/../../../framework/clientside/clientside-compiling#clientside.compiling,"Compiling
-a Client-Side Module">>, and properly deployed with the application.
+The widget set of a UI can be defined with the [classname]#@WidgetSet# annotation for the UI class.
 
+[source, Java, subs="normal"]
+----
+@WidgetSet("[replaceable]#com.example.myproject.MyWidgetSet#")
+class MyUI extends UI {
+    ...
+----
+
+You can also define it in the [filename]#web.xml# descriptor for the servlet:
+
+[source, xml, subs="normal"]
+----
+<init-param>
+  <param-name>widgetset</param-name>
+  <param-value>com.example.myproject.MyWidgetSet</param-value>
+</init-param>
+----
+
+The name of a widget set is technically a Java class name with the same path as the widget set definition file, but without the [filename]#.gwt.xml# extension.
+
+If a widget set is not specified, the default is used.
+In a project that does not use add-ons or custom widgets, the [classname]#com.vaadin.DefaultWidgetSet# is used.
+It contains all the widgets for the built-in Vaadin components.
+When using add-ons, the Vaadin Maven Plugin automatically defines an  [classname]#AppWidgetSet# that includes all the add-on widget sets.
 
+The widget set must be compiled, as described in <<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using Vaadin Add-ons">> (for add-ons) or <<dummy/../../../framework/clientside/clientside-compiling#clientside.compiling,"Compiling a Client-Side Module">> (for custom widgets and client-side modules), and properly deployed with the application.
 
 [[application.environment.servlet-mapping]]
 == Servlet Mapping with URL Patterns
diff --git a/documentation/architecture/architecture-technology.asciidoc b/documentation/architecture/architecture-technology.asciidoc
index 834bcba292..6924bba891 100644
--- a/documentation/architecture/architecture-technology.asciidoc
+++ b/documentation/architecture/architecture-technology.asciidoc
@@ -196,9 +196,6 @@ in
 a Server-Side Web Application">>. The class is given as a parameter to the
 Vaadin Servlet in the [filename]#web.xml# deployment descriptor.
 
-The Vaadin Client-Side Engine as well as client-side Vaadin applications are
-loaded to the browser as static JavaScript files. The client-side engine, or
-widget set in technical terms, needs to be located under the
-[filename]#VAADIN/widgetsets# path in the web application. The precompiled
-default widget set is served from the [filename]#vaadin-client-compiled# JAR by
-the Vaadin Servlet.
+The Vaadin Client-Side Engine as well as client-side Vaadin applications are loaded to the browser as static JavaScript files.
+The client-side engine, or widget set in technical terms, needs to be located under the [filename]#VAADIN/widgetsets# path in the web application.
+It is normally automatically compiled to include the default widget set, as well as any installed add-ons and custom widgets.
diff --git a/documentation/clientside/clientside-compiling.asciidoc b/documentation/clientside/clientside-compiling.asciidoc
index 328487d178..ac1c41bf5d 100644
--- a/documentation/clientside/clientside-compiling.asciidoc
+++ b/documentation/clientside/clientside-compiling.asciidoc
@@ -7,68 +7,172 @@ layout: page
 [[clientside.compiling]]
 = Compiling a Client-Side Module
 
-A client-side module, either a widget set or a pure client-side module, needs to
-be compiled to JavaScript using the Vaadin Client Compiler. During development,
-the Development Mode makes the compilation automatically when you reload the
-page, provided that the module has been initially compiled once with the
-compiler.
-
-As most Vaadin add-ons include widgets, widget set compilation is usually needed
-when using add-ons. In that case, the widget sets from different add-ons are
-compiled into a __project widget set__, as described in
-<<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using Vaadin Add-ons">>.
-
-////
-TODO Provide a link to a proper add-on compilation section when one is
-available.
-////
+A client-side module, either a Vaadin widget set or a pure client-side module, needs to be compiled to JavaScript using the Vaadin Client Compiler.
+
+Widget set compilation is most often needed when using add-ons.
+In that case, the widget sets from different add-ons are compiled into an _application widget set_, as described in <<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview, "Using Vaadin Add-ons">>.
+
+When doing client-side development, you need to compile the widget set every time you modify the client-side code.
 
 [[clientside.compiling.overview]]
 == Vaadin Compiler Overview
 
-The Vaadin Client Compiler compiles Java to JavaScript. It is provided as the
-[filename]#vaadin-client-compiler# JAR, which you can execute with the
-[literal]#++-jar++# parameter for the Java runtime. It requires the
-[filename]#vaadin-client# JAR, which contains the Vaadin client-side framework.
+The Vaadin Client Compiler compiles Java to JavaScript.
+It is provided as the executable [filename]#vaadin-client-compiler# JAR.
+// You can run it with the [literal]#++-jar++# parameter for the Java runtime.
+It requires the [filename]#vaadin-client# JAR, which contains the [classname]#DefaultWidgetSet#, Vaadin client-side framework.
+
+The compiler compiles a _client module_, which can either be a pure client-side module or a Vaadin widget set, that is, the Vaadin Client-Side Engine that includes the widgets used in the application.
+The client module is defined with a module descriptor, which was described in <<clientside-module#clientside.module, "Client-Side Module Descriptor">>.
+The module descriptor for application widget sets is automatically generated.
+
+While you can compile client modules individually, in Vaadin applications you normally combine them in one application widget set.
+The application widget set includes any add-on and custom widgets.
+The compiler scans the class path for any widget sets to include in the application widget set.
+
+=== Compilation Result
+
+The compiler writes the compilation result to a target folder that will include the compiled JavaScript with any static resources included in the module.
+
+[[clientside.compiling.maven]]
+== Compiling in Maven Projects
+
+The Vaadin Maven Plugin, which is enabled in all Vaadin archetypes, makes Maven to automatically compile the widget set when necessary.
+
+ifdef::web[]
+=== Plugin Configuration
+
+[source,xml]
+----
+<plugin>
+  <groupId>com.vaadin</groupId>
+  <artifactId>vaadin-maven-plugin</artifactId>
+  <version>${vaadin.plugin.version}</version>
+
+  <configuration>
+    <extraJvmArgs>-Xmx512M -Xss1024k</extraJvmArgs>
+    <webappDirectory>${basedir}/target/classes/VAADIN/widgetsets</webappDirectory>
+    <draftCompile>false</draftCompile>
+    <compileReport>false</compileReport>
+    <style>OBF</style>
+    <strict>true</strict>
+  </configuration>
+
+  <executions>
+    <execution>
+      <goals>
+        <goal>update-theme</goal>
+        <goal>update-widgetset</goal>
+        <goal>compile</goal>
+        <goal>compile-theme</goal>
+      </goals>
+    </execution>
+  </executions>
+</plugin>
+----
+endif::web[]
+
+[[clientside.compiling.maven.modes]]
+=== Compilation Modes
+
+The Vaadin Maven Plugin can compile widget sets either locally or online by using a cloud service.
+The online compilation requires that all the widget sets are available in certain public Maven repositories.
+As this is not the case when developing custom widgets, you must use the `local` mode.
+
+Local compilation is the default mode, so you only need to enable it if you have changed the mode to use the online service.
+
+See <<DUMMY/../../addons/addons-maven#addons.maven.modes, "Widget Set Modes">> for more information.
+
+[[clientside.compiling.maven.compiling]]
+=== Compiling
 
-The compiler compiles a __client module__, which can be either a pure
-client-side module or a Vaadin widget set, that is, the Vaadin Client-Side
-Engine that includes the widgets used in the application. The client module is
-defined with a module descriptor, which was described in
-<<clientside-module#clientside.module, "Client-Side Module Descriptor">>.
+You can explicitly compile the widget set with the [literal]#vaadin:compile# goal.
 
-The compiler writes the compilation result to a target folder that will include
-the compiled JavaScript with any static resources included in the module.
+On command-line:
 
+[subs="normal"]
+----
+[prompt]#$# [command]#mvn# [parameter]#vaadin:compile#
+----
+
+If there is no widget set defined, but you have add-on dependencies that need a
+custom widget set, the Vaadin Maven plugin will automatically generate a widget set definition for you.
 
 [[clientside.compiling.eclipse]]
 == Compiling in Eclipse
 
-When the Vaadin Plugin is installed in Eclipse, you can simply click the
-button in the toolbar.
+When you have the Vaadin Plugin installed in Eclipse, you can simply click the *Compile Vaadin Widgetset* button in the toolbar.
+
+.Widget set compilation button in Eclipse
+image::img/widgetset-compiling-toolbar.png[width=50%, scaledwidth=60%]
+
 It will compile the widget set it finds from the project.
 If the project has multiple widget sets, such as one for custom widgets and another one for the project, you need to select the module descriptor of the widget set to compile before clicking the button.
 
-The compilation with Vaadin Plugin for Eclipse currently requires that the
-module descriptor has suffix [filename]#Widgetset.gwt.xml#, although you can use
-it to compile also other client-side modules than widget sets. The result is
-written under [filename]#WebContent/VAADIN/widgetsets# folder.
+Compiling with the Vaadin Plugin for Eclipse currently requires that the module descriptor has suffix [filename]#Widgetset.gwt.xml#, although you can use it to compile also other client-side modules than widget sets.
 
+The result is written under [filename]#WebContent/VAADIN/widgetsets# folder.
 
+ifdef::web[]
 [[clientside.compiling.ant]]
 == Compiling with Ant
 
-You can find a script template for compiling widget sets with Ant and Ivy at the
-link:http://vaadin.com/download/[Vaadin download page].
-You can copy the build script to your project and, once configured, run it with Ant.
+Consider the following configuration:
 
-[[clientside.compiling.maven]]
-== Compiling with Maven
+[source, xml, subs="normal"]
+----
+<target name="configure">
+    <!-- Where project source files are located -->
+    <property name="sources" value="[replaceable]#src#" />
 
-You can compile the widget set with the [literal]#++vaadin:compile++# goal as
-follows:
+    <!-- Path to root of web application folder -->
+    <property name="webroot" value="[replaceable]#WebContent#" />
 
-[subs="normal"]
+    <!-- Compilation work directory -->
+    <property name="workdir" value="[replaceable]#build/work#"/>
+</target>
 ----
-[prompt]#$# [command]#mvn# [parameter]#vaadin:compile#
+
+The script assumes the Eclipse project layout with [filename]#WebContent# folder.
+
+The `compile-widgetset` target invokes the Vaadin Compiler to compile the widget set.
+The class path includes source folder in case there are custom widgets, compiled server-side classes, and the dependencies resolved with Ivy.
+
+[source, xml]
+----
+<target name="compile-widgetset" depends="init,resolve">
+    <java classname="com.google.gwt.dev.Compiler"
+          failonerror="yes" fork="yes">
+        <arg value="-war" />
+        <arg value="${webroot}/VAADIN/widgetsets" />
+        <arg value="${widgetset}" />
+        <arg value="-logLevel"/>
+        <arg value="INFO"/>
+        <!-- <arg value="-strict"/> -->
+        <jvmarg value="-Xmx1024M"/>
+        <jvmarg value="-Xss512M"/>
+        <jvmarg value="-Djava.awt.headless=true"/>
+
+        <classpath>
+            <!-- Location of source code -->
+            <pathelement path="${sources}" />
+
+            <!-- Compiled server-side classes -->
+            <pathelement path="${workdir}/WEB-INF/classes" />
+
+            <!-- Dependencies retrieved with Ivy -->
+            <path refid="ivy.deps.widgetset"/>
+        </classpath>
+        <sysproperty key="vFailIfNotSerializable" value="${failifnotserializable}" />
+    </java>
+
+    <!-- Cleanup -->
+    <delete dir="${webroot}/VAADIN/gwt-unitCache"/>
+    <delete dir="${webroot}/VAADIN/widgetsets/WEB-INF"/>
+</target>
 ----
+
+You can find the complete example build script for compiling widget sets with Ant and Ivy in the https://github.com/vaadin/book-examples/blob/master/build/build.xml[build.xml for the Book Examples].
+You can copy the build script to your project and, once configured, run it with Ant.
+You may need to do some configuration in the build targets, such as to exclude or include source or target paths.
+endif::web[]
diff --git a/documentation/clientside/img/widgetset-compiling-toolbar.png b/documentation/clientside/img/widgetset-compiling-toolbar.png
new file mode 100644
index 0000000000..8a77aaaf58
--- /dev/null
+++ b/documentation/clientside/img/widgetset-compiling-toolbar.png
diff --git a/documentation/getting-started/getting-started-first-project.asciidoc b/documentation/getting-started/getting-started-first-project.asciidoc
index 73976baeaf..bfc9ddf154 100644
--- a/documentation/getting-started/getting-started-first-project.asciidoc
+++ b/documentation/getting-started/getting-started-first-project.asciidoc
@@ -26,11 +26,11 @@ This walkthrough assumes that you have already installed the Eclipse IDE, the Va
 
 ifdef::web[]
 [[getting-started.first-project.ivy]]
-== Creating the Project
+== Creating an Ivy Project
 endif::web[]
 
 ifdef::web[]
-_The following describes the creation of an Ivy project. The upcoming version of the Eclipse plug-in creates Maven projects. For that, see <<getting-started.first-project.creation>>._
+NOTE: The following describes the creation of an Ivy project. The upcoming version of the Eclipse plug-in creates Maven projects. For that, see <<getting-started.first-project.creation>>.
 endif::web[]
 
 ifdef::web[]
@@ -162,7 +162,7 @@ project hierarchy shown in the Project Explorer is shown in
 
 [[figure.getting-started.first-project.exploring]]
 .A New Vaadin Project
-image::img/myproject-ivy-created.png[scaledwidth=60%]
+image::img/myproject-ivy-created.png[width=40%, scaledwidth=60%]
 
 The Vaadin libraries and other dependencies are managed by Ivy. Notice that the
 libraries are not stored under the project folder, even though they are listed
@@ -224,8 +224,8 @@ endif::web[]
 == Creating a Maven Project
 
 ifdef::web[]
-_The following describes project creation in the upcoming version of the Eclipse plug-in, which creates Maven rather than Ivy projects.
-To use it, you must have installed the experimental version of the plug-in._
+NOTE: The following describes project creation in the upcoming version of the Eclipse plug-in, which creates Maven rather than Ivy projects.
+To use it, you must have installed the experimental version of the plug-in.
 endif::web[]
 
 Let us create the first application project with the tools installed in the previous section.
@@ -272,12 +272,13 @@ Finally, click [guibutton]#Finish# to create the project.
 [[getting-started.first-project.exploring]]
 == Exploring the Project
 
-After the [guilabel]#New Project# wizard exits, it has done all the work for you: a UI class skeleton has been written to the [filename]#src# directory.
+After the [guilabel]#New Project# wizard exits, it has done all the work for you.
+A UI class skeleton has been written to the [filename]#src# directory.
 The project hierarchy shown in the Project Explorer is shown in <<figure.getting-started.first-project.exploring>>.
 
 [[figure.getting-started.first-project.exploring]]
-.A new Vaadin Project
-image::img/myproject-created-annotated-hi.png[width=80%, scaledwidth=90%]
+.A new Vaadin project
+image::img/myproject-created-annotated-hi.png[width=80%, scaledwidth=100%]
 
 The Vaadin libraries and other dependencies are managed by Maven.
 Notice that the libraries are not stored under the project folder, even though they are listed in the "Java Resources > Libraries > Maven Dependencies" virtual folder.
@@ -295,7 +296,6 @@ import com.vaadin.ui.UI;
 ...
 
 @Theme("mytheme")
-@Widgetset("com.example.myproject.MyAppWidgetset")
 public class MyUI extends UI {
 
     @Override
@@ -325,14 +325,14 @@ public class MyUI extends UI {
 }
 ----
 
-[[getting-started.first-project.widgetset]]
-== Compiling the Widget Set and Theme
+[[getting-started.first-project.theme]]
+== Compiling the Theme
 
-Before running the project for the first time, select [guilabel]#Compile Widgetset and Theme# from the menu shown in <<figure.getting-started.first-project.compilewidgetset>>.
+Before running the project for the first time, click the [guilabel]#Compile Vaadin Theme# button in the toolbar, as shown in <<figure.getting-started.first-project.compiletheme>>.
 
-[[figure.getting-started.first-project.compilewidgetset]]
-.Compile Widgetset and Theme Menu
-image::img/myproject-compilewidgetset.png[width=50%]
+[[figure.getting-started.first-project.compiletheme]]
+.Compile Vaadin Theme
+image::img/myproject-compiletheme.png[width=40%, scaledwidth=60%]
 
 [[getting-started.first-project.coding]]
 == Coding Tips for Eclipse
@@ -460,8 +460,9 @@ Updating the libraries can take several minutes. You can see the progress in the
 Eclipse status bar. You can get more details about the progress by clicking the
 indicator.
 
-. If you have compiled the widget set for your project, recompile it by clicking
-the [guibutton]#Compile Vaadin widgets# button in Eclipse toolbar.
+. _In Vaadin 7.6 and older_: if you have compiled the widget set for your project, recompile it by clicking the *Compile Vaadin Widgetset* button in the Eclipse toolbar.
++
+image::img/myproject-compilewidgetset.png[width=50%, scaledwidth=60%]
 
 . Stop the integrated Tomcat (or other server) in Eclipse, clear its caches by
 right-clicking the server and selecting [guilabel]#Clean# as well as
@@ -497,8 +498,9 @@ Updating the libraries can take several minutes. You can see the progress in the
 Eclipse status bar. You can get more details about the progress by clicking the
 indicator.
 
-. If you have compiled the widget set for your project, recompile it by clicking
-the [guibutton]#Compile Vaadin widgets# button in Eclipse toolbar.
+. If you have compiled the widget set for your project, recompile it by clicking the *Compile Vaadin Widgetset* button in Eclipse toolbar.
++
+image::img/myproject-compilewidgetset.png[width=50%, scaledwidth=60%]
 
 . Stop the integrated Tomcat (or other server) in Eclipse, clear its caches by
 right-clicking the server and selecting Clean as well as Clean Tomcat Work
diff --git a/documentation/getting-started/getting-started-maven.asciidoc b/documentation/getting-started/getting-started-maven.asciidoc
index 5d4618cb94..501f072912 100644
--- a/documentation/getting-started/getting-started-maven.asciidoc
+++ b/documentation/getting-started/getting-started-maven.asciidoc
@@ -11,7 +11,7 @@ layout: page
 
 In previous sections, we looked into creating a Vaadin Maven project in different IDEs.
 In this section, we look how to create such a project on command-line.
-You can then import such a project to your IDE.
+You can then import such a project in your IDE.
 
 In addition to regular Maven, you can use any Maven-compatible build or
 dependency management system, such as Ivy or Gradle. For Gradle, see the
@@ -35,7 +35,7 @@ line):
    -DarchetypeGroupId=com.vaadin \
    -DarchetypeArtifactId=[replaceable]#vaadin-archetype-application# \
    -DarchetypeVersion=[replaceable]#7.x.x# \
-   -DgroupId=[replaceable]#your.company# \
+   -DgroupId=[replaceable]#com.pany# \
    -DartifactId=[replaceable]#project-name# \
    -Dversion=[replaceable]#0.1# \
    -Dpackaging=war
@@ -96,13 +96,14 @@ WAR package. You can do this with the [literal]#++package++# goal as follows:
 The location of the resulting WAR package should be displayed in the command
 output. You can then deploy it to your favorite application server.
 
-The easiest way to run Vaadin applications with Maven is to use the light-weight
-Jetty web server. After compiling the package, all you need to do is type:
+The easiest way to run Vaadin applications with Maven is to use the light-weight Jetty web server.
+After compiling the package, all you need to do is type:
 
 [subs="normal"]
 ----
 [prompt]#$# [command]#mvn# jetty:run
 ----
+
 The special goal starts the Jetty server in port 8080 and deploys the
 application. You can then open it in a web browser at
 http://localhost:8080/project-name.
@@ -110,17 +111,16 @@ http://localhost:8080/project-name.
 (((range="endofrange", startref="term.maven.compiling")))
 
 [[getting-started.maven.addons]]
-== Using Add-ons and Custom Widget Sets
+== Using Add-ons
 
 ((("Maven", "using add-ons", id="term.maven.addons", range="startofrange")))
 
-
-If you use Vaadin add-ons that include a widget set or make your custom widgets,
-you need to enable widget set compilation in the POM. The required configuration
-is described in
-<<dummy/../../../framework/addons/addons-maven#addons.maven,"Using Add-ons in a
+If you use Vaadin add-ons from the http://vaadin.com/directory[Vaadin Directory], you need to add them as dependencies in the project POM.
+The instructions are given in <<dummy/../../../framework/addons/addons-maven#addons.maven, "Using Add-ons in a
 Maven Project">>.
 
+_In projects that use Vaadin 7.6 or older_, you need to compile the widget set manually.
+See the add-on usage instructions.
 
 (((range="endofrange", startref="term.maven.addons")))
 (((range="endofrange", startref="term.maven.creating")))
diff --git a/documentation/getting-started/img/myproject-compiletheme.png b/documentation/getting-started/img/myproject-compiletheme.png
new file mode 100644
index 0000000000..ff8ae55519
--- /dev/null
+++ b/documentation/getting-started/img/myproject-compiletheme.png
diff --git a/documentation/getting-started/img/myproject-compilewidgetset.png b/documentation/getting-started/img/myproject-compilewidgetset.png
index ae6791277b..8a77aaaf58 100644
--- a/documentation/getting-started/img/myproject-compilewidgetset.png
+++ b/documentation/getting-started/img/myproject-compilewidgetset.png
diff --git a/documentation/getting-started/img/myproject-created-annotated-hi.png b/documentation/getting-started/img/myproject-created-annotated-hi.png
index 6927b883ed..4107110829 100644
--- a/documentation/getting-started/img/myproject-created-annotated-hi.png
+++ b/documentation/getting-started/img/myproject-created-annotated-hi.png
diff --git a/documentation/getting-started/img/myproject-created.png b/documentation/getting-started/img/myproject-created.png
index c9cc605325..b995edfd5a 100644
--- a/documentation/getting-started/img/myproject-created.png
+++ b/documentation/getting-started/img/myproject-created.png
diff --git a/documentation/getting-started/img/netbeans-created-annotated-hi.png b/documentation/getting-started/img/netbeans-created-annotated-hi.png
index 5abea08c58..7d2e737406 100644
--- a/documentation/getting-started/img/netbeans-created-annotated-hi.png
+++ b/documentation/getting-started/img/netbeans-created-annotated-hi.png
diff --git a/documentation/getting-started/img/netbeans-newproject-created.png b/documentation/getting-started/img/netbeans-newproject-created.png
index 6fc0bd8978..30ad5600c3 100644
--- a/documentation/getting-started/img/netbeans-newproject-created.png
+++ b/documentation/getting-started/img/netbeans-newproject-created.png
diff --git a/documentation/getting-started/original-drawings/myproject-created-annotated.svg b/documentation/getting-started/original-drawings/myproject-created-annotated.svg
index 70fc378bdc..ca012a031a 100644
--- a/documentation/getting-started/original-drawings/myproject-created-annotated.svg
+++ b/documentation/getting-started/original-drawings/myproject-created-annotated.svg
@@ -14,7 +14,7 @@
    height="744.09448"
    id="svg1901"
    sodipodi:version="0.32"
-   inkscape:version="0.48.4 r9939"
+   inkscape:version="0.91 r"
    sodipodi:docname="myproject-created-annotated.svg"
    version="1.1">
   <defs
@@ -71,9 +71,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="1.4"
-     inkscape:cx="191.07987"
-     inkscape:cy="356.49384"
+     inkscape:zoom="1.979899"
+     inkscape:cx="544.97755"
+     inkscape:cy="286.33054"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      inkscape:window-width="1920"
@@ -122,21 +122,21 @@
      id="layer1"
      transform="translate(0,-308.2677)">
     <rect
-       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5;marker:none;enable-background:accumulate"
        id="rect29725"
-       width="480"
-       height="455"
-       x="95"
-       y="164.09448"
-       transform="translate(0,308.2677)"
-       ry="3.7880721" />
+       width="490"
+       height="435"
+       x="70"
+       y="149.09448"
+       ry="3.7880721"
+       transform="translate(0,308.2677)" />
     <image
-       y="475.67679"
-       x="97.162643"
+       y="459.67679"
+       x="73.162643"
        id="image3215"
        xlink:href="file:///home/magi/itmill/vaadin/documentation/getting-started/img/myproject-created.png"
-       height="453.37076"
-       width="305.67471" />
+       height="428.90781"
+       width="352.83734" />
     <g
        transform="translate(204.99999,-146.51524)"
        id="g3822-4">
@@ -155,7 +155,7 @@
          sodipodi:cy="419.09448"
          sodipodi:rx="9.1659365"
          sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
+         d="M 34.165936,419.09448 A 9.1659365,9.1659365 0 0 1 25,428.26042 9.1659365,9.1659365 0 0 1 15.834064,419.09448 9.1659365,9.1659365 0 0 1 25,409.92855 a 9.1659365,9.1659365 0 0 1 9.165936,9.16593 z"
          transform="matrix(0.54549827,0,0,0.54549827,36.362543,498.74687)" />
       <path
          sodipodi:type="arc"
@@ -165,12 +165,12 @@
          sodipodi:cy="419.09448"
          sodipodi:rx="9.1659365"
          sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
+         d="M 34.165936,419.09448 A 9.1659365,9.1659365 0 0 1 25,428.26042 9.1659365,9.1659365 0 0 1 15.834064,419.09448 9.1659365,9.1659365 0 0 1 25,409.92855 a 9.1659365,9.1659365 0 0 1 9.165936,9.16593 z"
          transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)" />
     </g>
     <text
        xml:space="preserve"
-       style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+       style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std, Light';"
        x="385"
        y="584.474"
        id="text13161"
@@ -180,184 +180,124 @@
          x="385"
          y="584.474">The UI class skeleton</tspan></text>
     <g
-       transform="translate(204.99999,-66.969547)"
-       id="g3822-4-7">
-      <path
-         sodipodi:nodetypes="cc"
-         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-         d="m 150.00001,419.09448 24.99999,0"
-         id="path3804-2-1"
-         inkscape:connector-curvature="0"
-         transform="translate(0,308.2677)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-         id="path3005-2-10-1"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z"
-         transform="matrix(0.54549827,0,0,0.54549827,136.36255,498.74687)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-         id="path3005-2-10-5-4"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
-         transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)" />
-    </g>
-    <g
-       transform="translate(270,77.857138)"
+       transform="translate(270,28.285711)"
        id="g3822-4-8">
       <path
          sodipodi:nodetypes="cccc"
-         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m 25,762.36218 10,-5 0,-20 10,-10"
          id="path3804-2-3-46-9"
          inkscape:connector-curvature="0" />
       <path
          sodipodi:nodetypes="cccc"
-         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m 25,692.36218 10,5 0,20 10,10"
          id="path3804-2-3-46"
          inkscape:connector-curvature="0" />
       <path
          sodipodi:nodetypes="cc"
-         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m 45,419.09448 60,1e-5"
          id="path3804-2-3"
          inkscape:connector-curvature="0"
          transform="translate(0,308.2677)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+      <circle
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
          id="path3005-2-10-8"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z"
-         transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)"
+         cx="25"
+         cy="419.09448"
+         r="9.1659365" />
+      <circle
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
          id="path3005-2-10-5-2"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
-         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" />
+         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)"
+         cx="25"
+         cy="419.09448"
+         r="9.1659365" />
     </g>
     <g
-       transform="translate(270,169.99999)"
+       transform="translate(270,128.42856)"
        id="g3822-4-8-5">
       <path
          sodipodi:nodetypes="cc"
-         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m -70,419.09449 175,0"
          id="path3804-2-3-4"
          inkscape:connector-curvature="0"
          transform="translate(0,308.2677)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+      <circle
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
          id="path3005-2-10-8-2"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z"
-         transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)"
+         cx="25"
+         cy="419.09448"
+         r="9.1659365" />
+      <circle
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
          id="path3005-2-10-5-2-3"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
-         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" />
+         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)"
+         cx="25"
+         cy="419.09448"
+         r="9.1659365" />
     </g>
     <g
-       transform="translate(270,187.3214)"
+       transform="translate(270,145.74997)"
        id="g3822-4-8-5-4">
       <path
          sodipodi:nodetypes="cc"
-         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m -45,419.09448 150,1e-5"
          id="path3804-2-3-4-5"
          inkscape:connector-curvature="0"
          transform="translate(0,308.2677)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+      <circle
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
          id="path3005-2-10-8-2-3"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
-         transform="matrix(0.54549827,0,0,0.54549827,-58.637457,498.74688)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         transform="matrix(0.54549827,0,0,0.54549827,-58.637457,498.74688)"
+         cx="25"
+         cy="419.09448"
+         r="9.1659365" />
+      <circle
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
          id="path3005-2-10-5-2-3-8"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
-         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" />
+         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)"
+         cx="25"
+         cy="419.09448"
+         r="9.1659365" />
     </g>
     <text
        xml:space="preserve"
-       style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
-       x="385"
-       y="664.25208"
-       id="text13161-0"
-       sodipodi:linespacing="125%"><tspan
-         sodipodi:role="line"
-         id="tspan13163-0"
-         x="385"
-         y="664.25208">The widget set</tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+       style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:12.5px;line-height:125%;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std, Light';text-align:start;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;"
        x="385"
-       y="808.74548"
+       y="759.17407"
        id="text13161-0-4"
        sodipodi:linespacing="125%"><tspan
          sodipodi:role="line"
          id="tspan13163-0-8"
          x="385"
-         y="808.74548">The theme</tspan></text>
+         y="759.17407">The theme</tspan></text>
     <text
        xml:space="preserve"
-       style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+       style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:12.5px;line-height:125%;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std, Light';text-align:start;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;"
        x="385"
-       y="901.34863"
+       y="859.77722"
        id="text13161-0-4-1"
        sodipodi:linespacing="125%"><tspan
          sodipodi:role="line"
          id="tspan13163-0-8-3"
          x="385"
-         y="901.34863">Maven project configuration</tspan></text>
+         y="859.77722">Maven project configuration</tspan></text>
     <text
        xml:space="preserve"
-       style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+       style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:12.5px;line-height:125%;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std, Light';text-align:start;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;"
        x="385"
-       y="918.85156"
+       y="877.28015"
        id="text13161-0-4-4"
        sodipodi:linespacing="125%"><tspan
          sodipodi:role="line"
          id="tspan13163-0-8-2"
          x="385"
-         y="918.85156">Project README skeleton</tspan></text>
+         y="877.28015">Project README skeleton</tspan></text>
   </g>
 </svg>
diff --git a/documentation/getting-started/original-drawings/netbeans-created-annotated.svg b/documentation/getting-started/original-drawings/netbeans-created-annotated.svg
index ae0176f25b..b61f1549c8 100644
--- a/documentation/getting-started/original-drawings/netbeans-created-annotated.svg
+++ b/documentation/getting-started/original-drawings/netbeans-created-annotated.svg
@@ -14,7 +14,7 @@
    height="744.09448"
    id="svg1901"
    sodipodi:version="0.32"
-   inkscape:version="0.48.4 r9939"
+   inkscape:version="0.91 r"
    sodipodi:docname="netbeans-created-annotated.svg"
    version="1.1">
   <defs
@@ -80,11 +80,11 @@
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
-     inkscape:pageopacity="0.0"
+     inkscape:pageopacity="1"
      inkscape:pageshadow="2"
-     inkscape:zoom="1.4"
-     inkscape:cx="325.14306"
-     inkscape:cy="308.11666"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="427.53838"
+     inkscape:cy="397.85985"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      inkscape:window-width="1920"
@@ -123,7 +123,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -137,188 +137,129 @@
        x="-12.462494"
        id="image3215"
        xlink:href="file:///home/magi/itmill/vaadin/documentation/getting-started/img/netbeans-newproject-created.png"
-       width="587.46252"
-       height="487.08057"
-       mask="url(#mask3028)" />
+       width="312"
+       height="354"
+       mask="url(#mask3028)"
+       transform="matrix(1.1875352,0,0,1.1875352,2.3371561,-91.708359)" />
     <g
-       transform="translate(164.99999,24.999997)"
+       transform="translate(200,37.020301)"
        id="g3822-4">
       <path
          sodipodi:nodetypes="cc"
-         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="M 20.00001,419.09449 175,419.09448"
          id="path3804-2"
          inkscape:connector-curvature="0"
          transform="translate(0,308.2677)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+      <circle
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
          id="path3005-2-10"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z"
-         transform="matrix(0.54549827,0,0,0.54549827,6.3625532,498.74687)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         transform="matrix(0.54549827,0,0,0.54549827,6.3625532,498.74687)"
+         cx="25"
+         cy="419.09448"
+         r="9.1659365" />
+      <circle
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
          id="path3005-2-10-5"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
-         transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)" />
+         transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)"
+         cx="25"
+         cy="419.09448"
+         r="9.1659365" />
     </g>
     <text
        xml:space="preserve"
-       style="font-size:16px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
-       x="354.74399"
-       y="756.59644"
+       style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:16px;line-height:125%;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std Light';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+       x="389.74399"
+       y="768.6167"
        id="text13161"
        sodipodi:linespacing="125%"><tspan
          sodipodi:role="line"
          id="tspan13163"
-         x="354.74399"
-         y="756.59644">The UI class skeleton</tspan></text>
-    <g
-       transform="translate(159.99999,107.5254)"
-       id="g3822-4-7">
-      <path
-         sodipodi:nodetypes="cc"
-         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-         d="m 145.00001,419.09448 29.99999,0"
-         id="path3804-2-1"
-         inkscape:connector-curvature="0"
-         transform="translate(0,308.2677)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-         id="path3005-2-10-1"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z"
-         transform="matrix(0.54549827,0,0,0.54549827,131.36255,498.74687)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-         id="path3005-2-10-5-4"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z"
-         transform="matrix(0.54549827,0,0,0.54549827,161.36255,498.74687)" />
-    </g>
+         x="389.74399"
+         y="768.6167">The UI class skeleton</tspan></text>
     <g
-       transform="translate(235,-75.000003)"
+       transform="translate(270.00001,-67)"
        id="g3822-4-8">
       <path
          sodipodi:nodetypes="cccc"
-         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m 25,777.36219 10,-10 0,-30.00001 10,-10"
          id="path3804-2-3-46-9"
          inkscape:connector-curvature="0" />
       <path
          sodipodi:nodetypes="cccc"
-         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m 25,677.36219 10,10 0,29.99999 10,10"
          id="path3804-2-3-46"
          inkscape:connector-curvature="0" />
       <path
          sodipodi:nodetypes="cc"
-         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m 45,419.09448 55,1e-5"
          id="path3804-2-3"
          inkscape:connector-curvature="0"
          transform="translate(0,308.2677)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+      <circle
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
          id="path3005-2-10-8"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
-         transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)"
+         cx="25"
+         cy="419.09448"
+         r="9.1659365" />
+      <circle
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
          id="path3005-2-10-5-2"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z"
-         transform="matrix(0.54549827,0,0,0.54549827,86.362543,498.74687)" />
+         transform="matrix(0.54549827,0,0,0.54549827,86.362543,498.74687)"
+         cx="25"
+         cy="419.09448"
+         r="9.1659365" />
     </g>
     <g
-       transform="translate(230,170)"
+       transform="translate(265.00001,98.00001)"
        id="g3822-4-8-5">
       <path
          sodipodi:nodetypes="cc"
-         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m -70,419.09449 175,0"
          id="path3804-2-3-4"
          inkscape:connector-curvature="0"
          transform="translate(0,308.2677)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+      <circle
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
          id="path3005-2-10-8-2"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
-         transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)" />
-      <path
-         sodipodi:type="arc"
-         style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)"
+         cx="25"
+         cy="419.09448"
+         r="9.1659365" />
+      <circle
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
          id="path3005-2-10-5-2-3"
-         sodipodi:cx="25"
-         sodipodi:cy="419.09448"
-         sodipodi:rx="9.1659365"
-         sodipodi:ry="9.1659365"
-         d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
-         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" />
+         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)"
+         cx="25"
+         cy="419.09448"
+         r="9.1659365" />
     </g>
     <text
        xml:space="preserve"
-       style="font-size:16px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
-       x="354.74399"
-       y="839.23932"
-       id="text13161-0"
-       sodipodi:linespacing="125%"><tspan
-         sodipodi:role="line"
-         id="tspan13163-0"
-         x="354.74399"
-         y="839.23932">The widget set definition</tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-size:16px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
-       x="354.74399"
-       y="656.86194"
+       style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:16px;line-height:125%;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std Light';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+       x="389.74399"
+       y="664.86194"
        id="text13161-0-4"
        sodipodi:linespacing="125%"><tspan
          sodipodi:role="line"
          id="tspan13163-0-8"
-         x="354.74399"
-         y="656.86194">The theme</tspan></text>
+         x="389.74399"
+         y="664.86194">The application theme</tspan></text>
     <text
        xml:space="preserve"
-       style="font-size:16px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
-       x="353.75201"
-       y="901.60632"
+       style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:16px;line-height:125%;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std Light';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+       x="388.75201"
+       y="829.60632"
        id="text13161-0-4-1"
        sodipodi:linespacing="125%"><tspan
          sodipodi:role="line"
          id="tspan13163-0-8-3"
-         x="353.75201"
-         y="901.60632">Maven project configuration</tspan></text>
+         x="388.75201"
+         y="829.60632">Maven project configuration</tspan></text>
   </g>
 </svg>