Add basic AppWidgetset documentation

Change-Id: Iaea8b5267c7ccb2a6bc667cc89078bd3c4bf2435

26 files changed, 2456 insertions, 322 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]+++#+++<product>+++#+++.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>