Rescaled images in layout chapter. Various small formatting fixes. Updated history and other matters in introduction.

Change-Id: I0d5e76f7fb07f967dd04941a23e79dfb30049731

28 files changed, 139 insertions, 250 deletions

diff --git a/documentation/application/application-environment.asciidoc b/documentation/application/application-environment.asciidoc
index 3df4bcb48e..9f73508683 100644
--- a/documentation/application/application-environment.asciidoc
+++ b/documentation/application/application-environment.asciidoc
@@ -190,11 +190,11 @@ class MyUI extends UI {
 
 You can also define it in the [filename]#web.xml# descriptor for the servlet:
 
-[source, xml, subs="normal"]
+[subs="normal"]
 ----
 <init-param>
   <param-name>widgetset</param-name>
-  <param-value>com.example.myproject.MyWidgetSet</param-value>
+  <param-value>[replaceable]##com.example.myproject.MyWidgetSet##</param-value>
 </init-param>
 ----
 
diff --git a/documentation/application/application-resources.asciidoc b/documentation/application/application-resources.asciidoc
index 339d3eb340..7340030b3a 100644
--- a/documentation/application/application-resources.asciidoc
+++ b/documentation/application/application-resources.asciidoc
@@ -237,7 +237,7 @@ The resulting image is shown in <<figure.application.resource.stream>>.
 
 [[figure.application.resource.stream]]
 .A stream resource
-image::img/application_streamresource.png[width=25%, scaledwidth=35%]
+image::img/application_streamresource.png[width=25%, scaledwidth=25%]
 
 Another way to create dynamic content is a request handler, described in
 <<dummy/../../../framework/advanced/advanced-requesthandler#advanced.requesthandler,"Request
diff --git a/documentation/components/components-button.asciidoc b/documentation/components/components-button.asciidoc
index 65b991404b..9497b73d2e 100644
--- a/documentation/components/components-button.asciidoc
+++ b/documentation/components/components-button.asciidoc
@@ -58,9 +58,9 @@ A button has an overall [literal]#++v-button++# style. The caption has
 [literal]#++v-button-caption++# style. There is also an intermediate wrap
 element, which may help in styling in some cases.
 
-The button component has many style variants in the Valo theme, as illustrated in <<figure.component.button.basic>>.
+The button component has many style variants in the Valo theme, as illustrated in <<figure.component.button.valostyles>>.
 The styles are defined in the [classname]#ValoTheme# class.
 
-[[figure.component.button.basic]]
+[[figure.component.button.valostyles]]
 .Button in different styles of the Valo theme
 image::img/button-valo-styles.png[width=70%, scaledwidth=100%]
diff --git a/documentation/components/components-features.asciidoc b/documentation/components/components-features.asciidoc
index 5bcbd17902..186429afed 100644
--- a/documentation/components/components-features.asciidoc
+++ b/documentation/components/components-features.asciidoc
@@ -406,7 +406,7 @@ select.onValueChange(locale -> {
     date.setLocale(locale);
     localeCode.setValue("Locale code: " +
                         locale.getLanguage() + "_" +
-                        locale.getCountry());  
+                        locale.getCountry());
 });
 ----
 See the http://demo.vaadin.com/book-examples-vaadin7/book#component.features.locale.selection[on-line example, window="_blank"].
@@ -497,8 +497,6 @@ components appear in italic.
 }
 ----
 
-
-
 [[components.features.stylename]]
 == Style Name
 
@@ -512,7 +510,6 @@ can also add and remove individual style names with [methodname]#addStylename()#
 and [methodname]#removeStyleName()#. A style name must be a valid CSS style
 name.
 
-
 [source, java]
 ----
 Label label = new Label("This text has a lot of style");
@@ -614,9 +611,10 @@ component in absolute or relative units, or for leaving the size undefined.
 The size of a component can be set with [methodname]#setWidth()# and
 [methodname]#setHeight()# methods. The methods take the size as a floating-point
 value. You need to give the unit of the measure as the second parameter for the
-above methods. The available units are listed in
-<<components.features.sizeable.units.table>> below.
-
+above methods.
+ifdef::web[]
+The available units are listed in <<components.features.sizeable.units.table>>.
+endif::web[]
 
 [source, java]
 ----
@@ -649,6 +647,7 @@ can set the height, width, or both as undefined with the methods [methodname]#se
 Always keep in mind that _a layout with undefined size may not contain components with defined relative size_, such as "full size", except in some special cases.
 See <<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout Size">> for details.
 
+ifdef::web[]
 The <<components.features.sizeable.units.table>> table lists the available units and their codes defined in the [interfacename]#Sizeable# interface.
 
 [[components.features.sizeable.units.table]]
@@ -666,6 +665,7 @@ The <<components.features.sizeable.units.table>> table lists the available units
 |[parameter]#Unit.INCH#|in|A physical length unit, _inches_ on the surface of a display device. However, the actual size depends on the display, its metrics in the operating system, and the browser.
 |[parameter]#Unit.PERCENTAGE#|%|A relative percentage of the available size. For example, for the top-level layout [parameter]#100%# would be the full width or height of the browser window. The percentage value must be between 0 and 100.
 |===============
+endif::web[]
 
 If a component inside [classname]#HorizontalLayout# or [classname]#VerticalLayout# has full size in the namesake direction of the layout, the component will expand to take all available space not needed by the other components.
 See <<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout Size">> for details.
diff --git a/documentation/components/components-grid.asciidoc b/documentation/components/components-grid.asciidoc
index 285f2772bf..b56b762e46 100644
--- a/documentation/components/components-grid.asciidoc
+++ b/documentation/components/components-grid.asciidoc
@@ -132,7 +132,6 @@ from the grid.
 
 For example:
 
-
 [source, java]
 ----
 grid.addSelectionListener(selectionEvent -> {
@@ -289,8 +288,9 @@ columns in their natural order.
 
 [source, java]
 ----
-grid.setColumnOrder(firstnameColumn, lastnameColumn, bornColumn,
-                    birthplaceColumn, diedColumn);
+grid.setColumnOrder(firstnameColumn, lastnameColumn,
+                    bornColumn, birthplaceColumn,
+                    diedColumn);
 ----
 
 Note that the method can not be used to hide columns. You can hide columns with
@@ -374,14 +374,11 @@ lambdas:
 [source, java]
 ----
 // Add generated full name column
-Column<String> fullNameColumn grid.addColumn(person -> {
-    return person.getFirstName() + " " + person.getLastName();
-});
+Column<String> fullNameColumn = grid.addColumn(person ->
+    person.getFirstName() + " " + person.getLastName());
 fullNameColumn.setHeaderCaption("Full name");
-
 ----
 
-
 [[components.grid.renderer]]
 == Column Renderers
 
@@ -682,8 +679,6 @@ You can set a component in a header or footer cell with
 described in <<components.grid.filtering>>, which also gives an example of the
 use.
 
-
-
 [[components.grid.filtering]]
 == Filtering
 
@@ -699,7 +694,6 @@ image::img/grid-filtering.png[width=50%, scaledwidth=80%]
 The filtering illustrated in <<figure.components.grid.filtering>> can be created
 as follows:
 
-
 [source, java]
 ----
 // Have a list of persons
@@ -726,8 +720,7 @@ for (Column<?> col: grid.getColumns()) {
 
       // Filter the list of items
       List<String> filteredList =
-        Lists.newArrayList(personList.filter(
-            persons,
+        Lists.newArrayList(personList.filter(persons,
             Predicates.containsPattern(event.getValue())));
 
         // Apply filtered data
@@ -737,11 +730,8 @@ for (Column<?> col: grid.getColumns()) {
     cell.setComponent(filterField);
 
 }
-
-
 ----
 
-
 [[components.grid.sorting]]
 == Sorting
 
@@ -907,7 +897,6 @@ public class Person implements Serializable {
 We can now use a [classname]#BeanBinder# in the [classname]#Grid# as
 follows:
 
-
 [source, java]
 ----
 Grid<Person> grid = new Grid(examplePersonList());
diff --git a/documentation/components/components-nativeselect.asciidoc b/documentation/components/components-nativeselect.asciidoc
index 2e97ccac42..feade116c9 100644
--- a/documentation/components/components-nativeselect.asciidoc
+++ b/documentation/components/components-nativeselect.asciidoc
@@ -20,7 +20,8 @@ the native selection input of web browsers, using the HTML
 [source, java]
 ----
 // Create the selection component
-NativeSelect<String> select = new NativeSelect<>("Native Selection");
+NativeSelect<String> select =
+    new NativeSelect<>("Native Selection");
 
 // Add some items
 select.setItems("Mercury", "Venus", ...);
@@ -31,7 +32,7 @@ The [methodname]#setColumns()# allows setting the width of the list as
 
 [[figure.components.nativeselect.basic]]
 .The [classname]#NativeSelect# Component
-image::img/nativeselect-basic.png[width=20%, scaledwidth=40%]
+image::img/nativeselect-basic.png[width=20%, scaledwidth=35%]
 
 Common selection component features are described in
 <<dummy/../../../framework/components/components-selection#components.selection,"Selection Components">>.
diff --git a/documentation/components/components-optiongroup.asciidoc b/documentation/components/components-optiongroup.asciidoc
index 3fd8209eb3..f25e3dfe13 100644
--- a/documentation/components/components-optiongroup.asciidoc
+++ b/documentation/components/components-optiongroup.asciidoc
@@ -29,11 +29,13 @@ enabled with [methodname]#setMultiSelect()#.
 [source, java]
 ----
 // A single-select radio button group
-OptionGroup<String> single = new OptionGroup<>("Single Selection");
+OptionGroup<String> single =
+    new OptionGroup<>("Single Selection");
 single.setItems("Single", "Sola", "Yksi");
 
 // A multi-select check box group
-OptionGroup<String> multi = new OptionGroup<>("Multiple Selection");
+OptionGroup<String> multi =
+    new OptionGroup<>("Multiple Selection");
 multi.setMultiSelect(true);
 multi.setItems("Many", "Muchos", "Monta");
 ----
diff --git a/documentation/components/components-progressbar.asciidoc b/documentation/components/components-progressbar.asciidoc
index 202a48efb8..fa443d1b47 100644
--- a/documentation/components/components-progressbar.asciidoc
+++ b/documentation/components/components-progressbar.asciidoc
@@ -35,17 +35,13 @@ described in
 
 [source, java]
 ----
-final ProgressBar bar = new ProgressBar(0.0f);
+ProgressBar bar = new ProgressBar(0.0f);
 layout.addComponent(bar);
 
-layout.addComponent(new Button("Increase",
-    new ClickListener() {
-    @Override
-    public void buttonClick(ClickEvent event) {
-        float current = bar.getValue();
-        if (current < 1.0f)
-            bar.setValue(current + 0.10f);
-    }
+layout.addComponent(new Button("Increase", click -> {
+    float current = bar.getValue();
+    if (current < 1.0f)
+        bar.setValue(current + 0.10f);
 }));
 ----
 
@@ -56,7 +52,6 @@ In the indeterminate mode, a non-progressive indicator is displayed
 continuously. The indeterminate indicator is a circular wheel in the built-in
 themes. The progress value has no meaning in the indeterminate mode.
 
-
 [source, java]
 ----
 ProgressBar bar = new ProgressBar();
diff --git a/documentation/components/components-selection.asciidoc b/documentation/components/components-selection.asciidoc
index 1b62744786..6078fd886e 100644
--- a/documentation/components/components-selection.asciidoc
+++ b/documentation/components/components-selection.asciidoc
@@ -69,7 +69,6 @@ caption, but can be any object type. We could as well have given Planet instance
 for the items and use captions generated based on them
 [methodname]#setItemCaptionProvider()# method.
 
-
 [source, java]
 ----
 // List of Planet objects
@@ -101,7 +100,6 @@ retrieved with [methodname]#toString()# method from the item. This is useful
 for simple objects like String or Integers, but also for objects that have
 human readable output for [methodname]#toString()# .
 
-+
 [source, java]
 ----
 ComboBox<Planet> select = new ComboBox<>("Inner Planets");
@@ -193,7 +191,8 @@ planets.add(new Planet(3, "Earth"));
 planets.add(new Planet(4, "Mars"));
 
 // Create a selection component
-ComboBox<Planet> select = new ComboBox<>("Planets");
+ComboBox<Planet> select =
+    new ComboBox<>("Planets");
 
 // Set the caption provider to read the
 // caption directly from the 'name'
diff --git a/documentation/components/components-twincolselect.asciidoc b/documentation/components/components-twincolselect.asciidoc
index 310b85553a..cf0ed36e37 100644
--- a/documentation/components/components-twincolselect.asciidoc
+++ b/documentation/components/components-twincolselect.asciidoc
@@ -35,7 +35,8 @@ column captions with [methodname]#setLeftColumnCaption()# and
 
 [source, java]
 ----
-TwinColSelect<String> select = new TwinColSelect<>("Select Targets");
+TwinColSelect<String> select =
+    new TwinColSelect<>("Select Targets");
 
 // Put some items in the select
 select.setItems("Mercury", "Venus", "Earth", "Mars",
@@ -49,7 +50,8 @@ select.setSelection("Venus", "Earth", "Mars");
 
 // Handle value changes
 select.onSelect(selectedItems ->
-    layout.addComponent(new Label("Selected: " + selectedItems)));
+    layout.addComponent(
+        new Label("Selected: " + selectedItems)));
 ----
 See the http://demo.vaadin.com/book-examples-vaadin7/book#component.select.twincolselect.captions[on-line example, window="_blank"].
 
diff --git a/documentation/installing/img/installation-intellij-hi.png b/documentation/installing/img/installation-intellij-hi.png
index 49fc631a04..998122ea9c 100644
--- a/documentation/installing/img/installation-intellij-hi.png
+++ b/documentation/installing/img/installation-intellij-hi.png
diff --git a/documentation/installing/installing-netbeans.asciidoc b/documentation/installing/installing-netbeans.asciidoc
index cdb6ca168c..b82a31f4fe 100644
--- a/documentation/installing/installing-netbeans.asciidoc
+++ b/documentation/installing/installing-netbeans.asciidoc
@@ -89,7 +89,7 @@ You can install the plug-in from the NetBeans Plugin Portal Update Center as fol
 . Select "Tools > Plugins" from the NetBeans main menu.
 
 . Select the [guilabel]#Available Plugins# tab.
-.. Type "Vaadin" in the [guilabel]#Search# box and press kbd:Enter[].
+.. Type "Vaadin" in the [guilabel]#Search# box and press kbd:[Enter].
 .. Select the [guilabel]#Install# check box for the [guilabel]#Vaadin Plugin for NetBeans#.
 ifdef::web[]
 +
@@ -105,7 +105,7 @@ Click [guibutton]#Install#.
 . The Vaadin Plugin is not signed, so you need to verify the certificate.
 Click [guibutton]#Continue#.
 
-. In the final step, select [guilabel]#Restart IDE now" and click [guibutton]#Finish#.
+. In the final step, select [guilabel]#Restart IDE now# and click [guibutton]#Finish#.
 
 You can now proceed to create a Vaadin project, as described in <<DUMMY/../../../framework/getting-started/getting-started-netbeans#getting-started.netbeans, "Creating a Project with the NetBeans IDE">>.
 
diff --git a/documentation/installing/original-drawings/installation-intellij.svg b/documentation/installing/original-drawings/installation-intellij.svg
index 64cdd4ffde..4b3b4d423e 100644
--- a/documentation/installing/original-drawings/installation-intellij.svg
+++ b/documentation/installing/original-drawings/installation-intellij.svg
@@ -26,9 +26,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
-     inkscape:zoom="2.8"
-     inkscape:cx="153.1089"
-     inkscape:cy="76.118195"
+     inkscape:zoom="3.959798"
+     inkscape:cx="116.03523"
+     inkscape:cy="96.122162"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      inkscape:window-width="1920"
@@ -65,7 +65,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -143,42 +143,12 @@
            id="flowPara4249">Edition</flowPara><flowPara
            id="flowPara4245" /><flowPara
            id="flowPara4247" /></flowRoot>    </g>
-    <g
-       id="g4392-4"
-       transform="translate(60.236234,180.70866)">
-      <rect
-         y="818.50391"
-         x="56.692913"
-         height="21.259813"
-         width="49.606297"
-         id="rect4347-8"
-         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
-      <flowRoot
-         transform="translate(2.6821639,0.70806943)"
-         id="flowRoot4367-1"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:125%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         xml:space="preserve"><flowRegion
-           id="flowRegion4369-1"><use
-             height="100%"
-             width="100%"
-             id="use4371-0"
-             xlink:href="#rect4347-8"
-             y="0"
-             x="0" /></flowRegion><flowPara
-           id="flowPara4373-7">Install the</flowPara><flowPara
-           id="flowPara4375-8">Vaadin Plugin</flowPara></flowRoot>    </g>
     <flowRoot
        transform="translate(-80.859256,144.73179)"
        id="flowRoot4367-1-7"
        style="font-style:normal;font-variant:normal;font-weight:200;font-stretch:normal;font-size:7.5px;line-height:100%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Ultra-Light';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#5b686b;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        xml:space="preserve"><flowRegion
-         id="flowRegion4369-1-5"><use
-           height="100%"
-           width="100%"
-           id="use4371-0-1"
-           xlink:href="#rect4347-8"
-           y="0"
-           x="0" /></flowRegion><flowPara
+         id="flowRegion4369-1-5" /><flowPara
          id="flowPara4375-8-3">START</flowPara><flowPara
          id="flowPara4462">HERE</flowPara></flowRoot>    <circle
        r="10.629871"
@@ -204,15 +174,9 @@
        id="path3003-6-5"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
-    <path
-       style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 141.73228,985.03934 0,14.17323"
-       id="path3003-6-5-3"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cc" />
     <g
        id="g4392-4-9"
-       transform="translate(60.236217,209.05512)">
+       transform="translate(60.236221,180.70867)">
       <rect
          y="818.50391"
          x="56.692913"
@@ -235,7 +199,7 @@
            id="flowPara4375-8-0">Install Vaadin Designer</flowPara></flowRoot>    </g>
     <path
        style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:0.70866144, 0.70866144;stroke-dashoffset:0;stroke-opacity:1"
-       d="m 141.7323,1020.4724 -2e-5,7.0866"
+       d="m 141.73228,985.03935 0,14.1732"
        id="path3003-6-5-3-5"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
@@ -285,30 +249,6 @@
            id="flowPara4245-2" /><flowPara
            id="flowPara4247-9" /></flowRoot>    </g>
     <g
-       id="g4392-4-0"
-       transform="translate(60.236219,102.75591)">
-      <rect
-         y="818.50391"
-         x="56.692913"
-         height="21.259813"
-         width="49.606297"
-         id="rect4347-8-6"
-         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
-      <flowRoot
-         transform="translate(2.6821639,0.70806943)"
-         id="flowRoot4367-1-2"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:125%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         xml:space="preserve"><flowRegion
-           id="flowRegion4369-1-4"><use
-             height="100%"
-             width="100%"
-             id="use4371-0-9"
-             xlink:href="#rect4347-8-6"
-             y="0"
-             x="0" /></flowRegion><flowPara
-           id="flowPara4373-7-8">Install the</flowPara><flowPara
-           id="flowPara4375-8-34">Vaadin Plugin</flowPara></flowRoot>    </g>
-    <g
        id="g4392-4-4-5"
        transform="translate(116.92913,102.75592)">
       <rect
@@ -339,19 +279,13 @@
        sodipodi:nodetypes="cc" />
     <path
        style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 141.73228,942.51965 0,14.17323"
-       id="path3003-6-5-3-55"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cc" />
-    <path
-       style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        d="m 191.33858,942.51965 0,14.17323"
        id="path3003-6-5-7-5"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
     <g
        id="g4392-4-9-3"
-       transform="translate(60.236217,74.409445)">
+       transform="translate(60.236221,102.75593)">
       <rect
          y="818.50391"
          x="56.692913"
@@ -374,7 +308,7 @@
            id="flowPara4375-8-0-4">Install Vaadin Designer</flowPara></flowRoot>    </g>
     <path
        style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:0.70866144, 0.70866144;stroke-dashoffset:0;stroke-opacity:1"
-       d="m 141.73228,914.17319 0,7.08662"
+       d="m 141.73228,942.51968 0,14.17321"
        id="path3003-6-5-3-5-1"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
diff --git a/documentation/introduction/intro-background.asciidoc b/documentation/introduction/intro-background.asciidoc
index ec70b75d9f..ef0138494f 100644
--- a/documentation/introduction/intro-background.asciidoc
+++ b/documentation/introduction/intro-background.asciidoc
@@ -19,22 +19,27 @@ international pharmaceutical company. IT Mill made the application already in
 the year 2001 and it is still in use. Since then, the company has produced
 dozens of large business applications with the library and it has proven its
 ability to solve hard problems easily.
+Millstone 3 was released as open source in 2002.
 
-The next generation of the library, IT Mill Toolkit Release 4, was released in
-2006. It introduced an entirely new AJAX-based presentation engine. This allowed
-the development of AJAX applications without the need to worry about
-communications between the client and the server.
+Progress has often required hard decisions to avoid carrying unnecessary legacy burden far into the future.
+Nevertheless, our aim has always been to keep migrations easy.
 
 [[intro.background.toolkit-5]]
-== Release 5 Into the Open
+== Release 4 with Single-Page Rendering
 
-((("IT Mill
-Toolkit")))
+The next generation of the library, IT Mill Toolkit 4, was released in 2006.
+It introduced an entirely new AJAX-based presentation engine.
+This allowed the development of AJAX applications without the need to worry about communications between the client and the server.
+
+[[intro.background.toolkit-5]]
+== Release 5 Powered by GWT
+
+((("IT Mill Toolkit")))
 ((("AJAX")))
 IT Mill Toolkit 5, released initially at the end of 2007, took a significant
 step further into AJAX. The client-side rendering of the user interface was
-completely rewritten using GWT, the Google Web Toolkit. ((("Google Web
-Toolkit")))
+completely rewritten using GWT, the Google Web Toolkit.
+((("Google Web Toolkit")))
 
 IT Mill Toolkit 5 introduced many significant improvements both in the
 server-side API and in the functionality. Rewriting the Client-Side Engine with
@@ -50,13 +55,12 @@ The Release 5 was published under the Apache License 2, an unrestrictive open
 source license, to create faster expansion of the user base and to make the
 formation of a developer community possible.
 
-
 [[intro.background.vaadin6]]
 == Birth of Vaadin Release 6
 
-IT Mill Toolkit was renamed as __Vaadin Framework__, or Vaadin in short, in
-spring 2009. Later IT Mill, the company, was also renamed as Vaadin Ltd. Vaadin
-means an adult female semi-domesticated mountain reindeer in Finnish.
+IT Mill Toolkit was renamed as _Vaadin Framework_, or Vaadin in short, in
+spring 2009. Later IT Mill, the company, was also renamed as Vaadin Ltd.
+Vaadin means an adult female semi-domesticated mountain reindeer in Finnish.
 
 With Vaadin 6, the number of developers using the framework exploded. Together
 with the release, the Vaadin Plugin for Eclipse was released, helping the
@@ -68,20 +72,16 @@ tremendous growth in the ecosystem around Vaadin. The size of the user
 community, at least if measured by forum activity, has already gone past the
 competing server-side frameworks and even GWT.
 
-
 [[intro.background.vaadin7]]
 == The Major Revision with Vaadin 7
 
 Vaadin 7 was a major revision that changed the Vaadin API much more than Vaadin
-6 did. It is certainly more web-oriented than Vaadin 6 was. We are doing
-everything we can to help Vaadin rise high in the web universe. Some of this
-work is easy and almost routine - fixing bugs and implementing features. But
-going higher also requires standing firmer. That was one of the aims of Vaadin 7
-- redesigning the product so that the new architecture enables Vaadin to reach
-over many long-standing challenges. Many of the changes required breaking API
-compatibility with Vaadin 6, especially in the client-side, but they are made
-with a strong desire to avoid carrying unnecessary legacy burden far into the
-future.
+6 did.
+It became more web-oriented than Vaadin 6 was.
+We are doing everything we can to help Vaadin rise high in the web universe.
+Some of this work is easy and almost routine - fixing bugs and implementing features.
+But going higher also requires standing firmer.
+That was one of the aims of Vaadin 7 - redesigning the product so that the new architecture enables Vaadin to reach over many long-standing challenges.
 
 Inclusion of the Google Web Toolkit in Vaadin 7 was a significant development,
 as it meant that Vaadin now provides support for GWT as well. When Google opened
@@ -89,6 +89,13 @@ the GWT development in summer 2012, Vaadin (the company) joined the new GWT
 steering committee. As a member of the committee, Vaadin can work towards the
 success of GWT as a foundation of the Java web development community.
 
+[[intro.background.vaadin8]]
+== Vaadin 8 Introduces New Data Binding API
 
-
-
+The biggest change in Vaadin 8 is the complete modernization of the data binding API.
+Binding components to data sources is one of the core features of the Vaadin Framework, as it eliminates the need to explicitly shuffle data between Vaadin components and data objects, typically beans.
+The old data model was designed in time before Java features such as generics.
+While the data model was improved over the years, it was fundamentally outdated and complex to use.
+The new data binding API works much more fluently in Java 8, especially with Java 8 features such as lambda expressions.
+Consequently, to be able to fully use the new features of Java 8, we have raised the requirements from Java 6 to 8.
+The change should make Vaadin up to date with the most current Java technologies used by developers.
diff --git a/documentation/introduction/intro-eclipse.asciidoc b/documentation/introduction/intro-eclipse.asciidoc
index ef7a642af1..e698aef3bc 100644
--- a/documentation/introduction/intro-eclipse.asciidoc
+++ b/documentation/introduction/intro-eclipse.asciidoc
@@ -5,28 +5,31 @@ layout: page
 ---
 
 [[intro.eclipse]]
-= Support for the Eclipse IDE
+= Support for IDEs
 
 While Vaadin is not bound to any specific IDE, and you can in fact easily use it
-without any IDE altogether, we provide special support for the Eclipse IDE,
-which has become the most used environment for Java development.
+without any IDE altogether, we provide special support for the Eclipse IDE, IntelliJ IDEA, and the NetBeans IDE, which have become the most used environment for Java development.
 
-*_Vaadin Plug-in for Eclipse_* helps you in:
+An official Vaadin plug-in is available for the Eclipse and NetBeans IDEs.
+It helps in:
 
 * creating new Vaadin projects,
 
 * creating custom themes,
 
-* creating custom client-side widgets, and
+* creating custom client-side widgets,
+
+* downloading add-ons from the Vaadin directory, and
 
 * easily upgrading to a newer version of the Vaadin library.
 
-Using the Vaadin plug-in for Eclipse is the recommended way of installing Vaadin for development.
-Downloading the installation package that contains the JARs or defining Vaadin as a Maven dependency is also possible.
+Availability of the features depends on the IDE.
+The ultimate edition of IntelliJ IDEA comes with built-in support for Vaadin.
 
-*_Vaadin Designer_* is a commercial Eclipse plug-in that enables visual editing of Vaadin UIs and composites.
-See <<dummy/../../../designer/designer-overview#designer.overview, "Vaadin Designer">> for its complete reference.
+*_Vaadin Designer_* is a commercial plug-in available for the Eclipse IDE and IntelliJ IDEA.
+It enables visual editing of declarative designs that you can use in your applications.
+See <<dummy/../../../designer/designer-overview#designer.overview, "Vaadin Designer">> for more information.
 
-Installation of the Eclipse IDE and the plug-in is covered in <<dummy/../../../framework/installing/installing-eclipse#installing.eclipse,"Installing the Eclipse IDE">>.
-The creation of a new Vaadin project using the plug-in is covered in <<dummy/../../../framework/getting-started/getting-started-first-project#getting-started.first-project.creation,"Creating a Project in the Eclipse IDE">>.
-See <<dummy/../../../framework/themes/themes-eclipse#themes.eclipse,"Creating a Theme in Eclipse">> and <<dummy/../../../framework/gwt/gwt-eclipse#gwt.eclipse,"Starting It Simple With Eclipse">> for instructions on using the different features of the plug-in.
+Using the Vaadin plug-in is the recommended way of installing Vaadin for development.
+Installing the IDEs and the plug-ins is covered in <<dummy/../../../framework/installing/installing-overview#installing, "Installing Development Tools">>.
+The creation of a new Vaadin project with each IDE is covered in <<dummy/../../../framework/getting-started/getting-started-first-project#getting-started.overview, "Creating a Vaadin Project">>.
diff --git a/documentation/introduction/intro-walkthrough.asciidoc b/documentation/introduction/intro-walkthrough.asciidoc
index 152817c0ed..ad3519ccd7 100644
--- a/documentation/introduction/intro-walkthrough.asciidoc
+++ b/documentation/introduction/intro-walkthrough.asciidoc
@@ -31,12 +31,7 @@ public class HelloWorld extends UI {
 
         // Have a clickable button
         content.addComponent(new Button("Push Me!",
-            new ClickListener() {
-                @Override
-                public void buttonClick(ClickEvent e) {
-                    Notification.show("Pushed!");
-                }
-            }));
+            click -> Notification.show("Pushed!")));
     }
 }
 ----
@@ -59,18 +54,8 @@ user interface component, which displays simple text, and sets the text to
 
 The example also shows how to create a button and handle button click events.
 Event handling is described in
-<<dummy/../../../framework/architecture/architecture-events#architecture.events,"Events
-and Listeners">> and on the practical side in
-<<dummy/../../../framework/application/application-events#application.events,"Handling
-Events with Listeners">>. In addition to listeners, in Java 8 you can handle
-events with lambda expressions, which simplifies the handler code significantly.
-
-
-[source, java]
-----
-content.addComponent(new Button("Push Me!",
-    event -> Notification.show("Pushed!")));
-----
+<<dummy/../../../framework/architecture/architecture-events#architecture.events,"Events and Listeners">> and on the practical side in <<dummy/../../../framework/application/application-events#application.events,"Handling Events with Listeners">>.
+In Java 8, you can implement listeners with lambda expressions, which simplifies the handler code significantly.
 
 The result of the Hello World application, when opened in a browser, is shown in
 <<figure.intro.walkthrough>>.
diff --git a/documentation/layout/layout-absolutelayout.asciidoc b/documentation/layout/layout-absolutelayout.asciidoc
index 4bf49fa001..14613ec1c2 100644
--- a/documentation/layout/layout-absolutelayout.asciidoc
+++ b/documentation/layout/layout-absolutelayout.asciidoc
@@ -32,7 +32,7 @@ text field 50 pixels from both the left and the top edge:
 AbsoluteLayout layout = new AbsoluteLayout();
 layout.setWidth("400px");
 layout.setHeight("250px");
-        
+
 // A component with coordinates for its top-left corner
 TextField text = new TextField("Somewhere someplace");
 layout.addComponent(text, "left: 50px; top: 50px;");
@@ -71,7 +71,7 @@ The result of the above code examples is shown in
 
 [[figure.layout.absolutelayout.bottomright]]
 .Components Positioned Relative to Various Edges
-image::img/absolutelayout-bottomright.png[]
+image::img/absolutelayout-bottomright.png[width=60%, scaledwidth=80%]
 
 Drag and drop is very useful for moving the components contained in an
 [classname]#AbsoluteLayout#. Check out the example in
@@ -101,7 +101,7 @@ The result is shown in <<figure.layout.absolutelayout.area>>
 
 [[figure.layout.absolutelayout.area]]
 .Component Filling an Area Specified by Coordinates
-image::img/absolutelayout-area.png[]
+image::img/absolutelayout-area.png[width=50%, scaledwidth=80%]
 
 
 [[layout.absolutelayout.proportional]]
@@ -125,7 +125,7 @@ The result is shown in <<figure.layout.absolutelayout.proportional>>
 
 [[figure.layout.absolutelayout.proportional]]
 .Specifying an Area by Proportional Coordinates
-image::img/absolutelayout-proportional.png[]
+image::img/absolutelayout-proportional.png[width=50%, scaledwidth=70%]
 
 
 [[layout.absolutelayout.css]]
@@ -143,7 +143,3 @@ root style. Each component in the layout is contained within an element that has
 the [literal]#++v-absolutelayout-wrapper++#. The component captions are outside
 the wrapper elements, in a separate element with the usual
 [literal]#++v-caption++# style.
-
-
-
-
diff --git a/documentation/layout/layout-accordion.asciidoc b/documentation/layout/layout-accordion.asciidoc
index 3523a68ab6..001c1f677e 100644
--- a/documentation/layout/layout-accordion.asciidoc
+++ b/documentation/layout/layout-accordion.asciidoc
@@ -60,7 +60,7 @@ default theme.
 
 [[figure.accordion.example1]]
 .An Accordion
-image::img/accordion-example1.png[]
+image::img/accordion-example1.png[width=40%, scaledwidth=55%]
 
 == CSS Style Rules
 
@@ -84,7 +84,3 @@ content area element.
 
 The selected item (tab) has also the [literal]#++v-accordion-open++# style. The
 content area is not shown for the closed items.
-
-
-
-
diff --git a/documentation/layout/layout-csslayout.asciidoc b/documentation/layout/layout-csslayout.asciidoc
index 10c4740705..d77f93b19d 100644
--- a/documentation/layout/layout-csslayout.asciidoc
+++ b/documentation/layout/layout-csslayout.asciidoc
@@ -49,7 +49,7 @@ nearly always needed.
 
 [[figure.layout.csslayout.basic]]
 .Basic Use of [classname]#CssLayout#
-image::img/csslayout-basic.png[]
+image::img/csslayout-basic.png[width=60%, scaledwidth=100%]
 
 The [literal]#++display++# attribute of [classname]#CssLayout# is
 [literal]#++inline-block++# by default, so the components are laid out
@@ -109,7 +109,7 @@ file:
 
 [[figure.layout.csslayout.getcss]]
 .Use of [methodname]#getCss()# and line wrap
-image::img/csslayout-getcss.png[]
+image::img/csslayout-getcss.png[width=60%, scaledwidth=100%]
 
 
 [[layout.csslayout.compatibility]]
@@ -164,7 +164,7 @@ The example would now be rendered as shown in
 
 [[figure.layout.csslayout.styling]]
 .Styling [classname]#CssLayout#
-image::img/csslayout-styling.png[]
+image::img/csslayout-styling.png[width=50%, scaledwidth=70%]
 
 Captions and icons that are managed by the layout are contained in an element
 with [literal]#++v-caption++# style. These caption elements are contained flat
diff --git a/documentation/layout/layout-customlayout.asciidoc b/documentation/layout/layout-customlayout.asciidoc
index cbf430b921..f94d3be3ae 100644
--- a/documentation/layout/layout-customlayout.asciidoc
+++ b/documentation/layout/layout-customlayout.asciidoc
@@ -67,7 +67,7 @@ CustomLayout content = new CustomLayout("layoutname");
 content.setSizeUndefined();
 loginPanel.setContent(content);
 loginPanel.setSizeUndefined();
-        
+
 // No captions for fields is they are provided in the template
 content.addComponent(new TextField(), "username");
 content.addComponent(new TextField(), "password");
@@ -78,7 +78,7 @@ The resulting layout is shown below in <<figure.layout.customlayout>>.
 
 [[figure.layout.customlayout]]
 .Example of a Custom Layout Component
-image::img/customlayout-example1.png[]
+image::img/customlayout-example1.png[width=40%, scaledwidth=70%]
 
 You can use [methodname]#addComponent()# also to replace an existing component
 in the location given in the second parameter.
@@ -100,6 +100,3 @@ or
 ----
 new CustomLayout(new FileInputStream(file));
 ----
-
-
-
diff --git a/documentation/layout/layout-formlayout.asciidoc b/documentation/layout/layout-formlayout.asciidoc
index 487d0ac9d0..c5e7360224 100644
--- a/documentation/layout/layout-formlayout.asciidoc
+++ b/documentation/layout/layout-formlayout.asciidoc
@@ -47,7 +47,7 @@ when you hover the mouse pointer over the error indicator.
 
 [[figure.layout.formlayout]]
 .A [classname]#FormLayout# Layout for Forms
-image::img/formlayout-example1.png[]
+image::img/formlayout-example1.png[width=50%, scaledwidth=70%]
 
 [[layout.formlayout.css]]
 == CSS Style Rules
diff --git a/documentation/layout/layout-gridlayout.asciidoc b/documentation/layout/layout-gridlayout.asciidoc
index 135c2706bc..c2db30c6c7 100644
--- a/documentation/layout/layout-gridlayout.asciidoc
+++ b/documentation/layout/layout-gridlayout.asciidoc
@@ -34,7 +34,8 @@ grid.addStyleName("example-gridlayout");
 // Fill out the first row using the cursor.
 grid.addComponent(new Button("R/C 1"));
 for (int i = 0; i < 3; i++) {
-    grid.addComponent(new Button("Col " + (grid.getCursorX() + 1)));
+    grid.addComponent(new Button("Col " +
+        (grid.getCursorX() + 1)));
 }
 
 // Fill out the first column using coordinates.
@@ -45,7 +46,8 @@ for (int i = 1; i < 4; i++) {
 // Add some components of various shapes.
 grid.addComponent(new Button("3x1 button"), 1, 1, 3, 1);
 grid.addComponent(new Label("1x2 cell"), 1, 2, 1, 3);
-InlineDateField date = new InlineDateField("A 2x2 date field");
+InlineDateField date =
+    new InlineDateField("A 2x2 date field");
 date.setResolution(DateField.RESOLUTION_DAY);
 grid.addComponent(date, 2, 2, 3, 3);
 ----
diff --git a/documentation/layout/layout-orderedlayout.asciidoc b/documentation/layout/layout-orderedlayout.asciidoc
index 533d0d5404..5fd70aeded 100644
--- a/documentation/layout/layout-orderedlayout.asciidoc
+++ b/documentation/layout/layout-orderedlayout.asciidoc
@@ -272,7 +272,8 @@ Button expandButton = new Button("Expanding component");
 // Use 100% of the expansion cell's width.
 expandButton.setWidth("100%");
 
-// The component must be added to layout before setting the ratio.
+// The component must be added to layout
+// before setting the ratio
 layout.addComponent(expandButton);
 
 // Set the component's cell to expand.
diff --git a/documentation/layout/layout-panel.asciidoc b/documentation/layout/layout-panel.asciidoc
index 5fcac7f384..6ee283099a 100644
--- a/documentation/layout/layout-panel.asciidoc
+++ b/documentation/layout/layout-panel.asciidoc
@@ -31,7 +31,7 @@ Panel panel = new Panel("Astronomer Panel");
 panel.addStyleName("mypanelexample");
 panel.setSizeUndefined(); // Shrink to fit content
 layout.addComponent(panel);
-        
+
 // Create the content
 FormLayout content = new FormLayout();
 content.addStyleName("mypanelcontent");
@@ -46,7 +46,7 @@ The resulting layout is shown in <<figure.layout.panel>>.
 
 [[figure.layout.panel]]
 .A [classname]#Panel#
-image::img/panel.png[]
+image::img/panel.png[width=50%, scaledwidth=70%]
 
 [[layout.panel.scrolling]]
 == Scrolling the Panel Content
@@ -71,7 +71,7 @@ In the following example, we have a 300 pixels wide and very high
 // Display an image stored in theme
 Image image = new Image(null,
     new ThemeResource("img/Ripley_Scroll-300px.jpg"));
-        
+
 // To enable scrollbars, the size of the panel content
 // must not be relative to the panel size
 image.setSizeUndefined(); // Actually the default
@@ -92,7 +92,7 @@ border and vertical scrollbar.
 
 [[figure.layout.panel.scrolling]]
 .Panel with Scroll Bars
-image::img/panel-scrolling.png[]
+image::img/panel-scrolling.png[width=50%, scaledwidth=70%]
 
 ((("[interfacename]#Scrollable#", id="term.layout.panel.scrolling.scrollable", range="startofrange")))
 
@@ -137,6 +137,3 @@ add the style to a panel. Other themes may also provide the light and other
 styles for [classname]#Panel# as well.
 
 endif::web[]
-
-
-
diff --git a/documentation/layout/layout-splitpanel.asciidoc b/documentation/layout/layout-splitpanel.asciidoc
index 73b953945f..b8b225b8ac 100644
--- a/documentation/layout/layout-splitpanel.asciidoc
+++ b/documentation/layout/layout-splitpanel.asciidoc
@@ -59,7 +59,7 @@ which can have scroll bars in both directions.
 
 [[figure.splitpanel.basic]]
 .[classname]#HorizontalSplitPanel# and [classname]#VerticalSplitPanel#
-image::img/splitpanel-example1.png[]
+image::img/splitpanel-example1.png[width=60%, scaledwidth=80%]
 
 You can set the split position with [methodname]#setSplitPosition()#. It accepts
 any units defined in the [classname]#Sizeable# interface, with percentual size
@@ -100,7 +100,7 @@ illustrated in <<figure.component.splitpanel.splitposition>>.
 
 [[figure.component.splitpanel.splitposition]]
 .A Layout With Nested SplitPanels
-image::img/splitpanel-splitposition.png[]
+image::img/splitpanel-splitposition.png[width=50%, scaledwidth=70%]
 
 Notice that the size of a split panel must not be undefined in the split
 direction.
@@ -134,5 +134,3 @@ depending on whether its position is locked or not.
 
 (((range="endofrange", startref="term.layout.splitpanel.horizontal")))
 (((range="endofrange", startref="term.layout.splitpanel.vertical")))
-
-
diff --git a/documentation/layout/layout-sub-window.asciidoc b/documentation/layout/layout-sub-window.asciidoc
index f8d8fbef17..ed75b800aa 100644
--- a/documentation/layout/layout-sub-window.asciidoc
+++ b/documentation/layout/layout-sub-window.asciidoc
@@ -19,7 +19,7 @@ and restoring sub-windows, as well as scrolling the window content.
 
 [[figure.layout.sub-window.basic]]
 .A Sub-Window
-image::img/subwindow-basic.png[]
+image::img/subwindow-basic.png[width=50%, scaledwidth=70%]
 
 Sub-windows are typically used for __Dialog Windows__ and __Multiple Document
 Interface__ applications. Sub-windows are by default not modal; you can set them
@@ -42,20 +42,20 @@ public static class SubWindowUI extends UI {
     protected void init(VaadinRequest request) {
         // Some other UI content
         setContent(new Label("Here's my UI"));
-        
+
         // Create a sub-window and set the content
         Window subWindow = new Window("Sub-window");
         VerticalLayout subContent = new VerticalLayout();
         subContent.setMargin(true);
         subWindow.setContent(subContent);
-        
+
         // Put some components in it
         subContent.addComponent(new Label("Meatball sub"));
         subContent.addComponent(new Button("Awlright"));
-        
+
         // Center it in the browser window
         subWindow.center();
-        
+
         // Open it in the UI
         addWindow(subWindow);
     }
@@ -99,7 +99,7 @@ class MySub extends Window {
         content.addComponent(new Label("Just say it's OK!"));
         content.setMargin(true);
         setContent(content);
-        
+
         // Disable the close button
         setClosable(false);
 
@@ -125,7 +125,7 @@ final Button open = new Button("Open Sub-Window");
 open.addClickListener(new ClickListener() {
     public void buttonClick(ClickEvent event) {
         MySub sub = new MySub();
-        
+
         // Add it to the root component
         UI.getCurrent().addWindow(sub);
     }
@@ -197,7 +197,7 @@ You can make a sub-window modal with [methodname]#setModal(true)#.
 
 [[figure.layout.sub-window.modal]]
 .Modal Sub-Window
-image::img/subwindow-modal.png[]
+image::img/subwindow-modal.png[width=70%, scaledwidth=100%]
 
 Depending on the theme, the parent window may be grayed when the modal window is
 open.
@@ -211,9 +211,3 @@ circumvented with client-side attack code. You should not trust in the modality
 of child windows in security-critical situations such as login windows.
 
 ====
-
-
-
-
-
-
diff --git a/documentation/layout/layout-tabsheet.asciidoc b/documentation/layout/layout-tabsheet.asciidoc
index 38e6207f36..301d2ed28b 100644
--- a/documentation/layout/layout-tabsheet.asciidoc
+++ b/documentation/layout/layout-tabsheet.asciidoc
@@ -20,7 +20,7 @@ navigation buttons will appear.
 
 [[figure.tabsheet.example1]]
 .A Simple TabSheet Layout
-image::img/tabsheet-example1.png[]
+image::img/tabsheet-example1.png[width=50%, scaledwidth=70%]
 
 [[layout.tabsheet.adding]]
 == Adding Tabs
@@ -95,11 +95,10 @@ there is only one tab.
 ifdef::web[]
 [[figure.tabsheet.example2]]
 .A TabSheet with Hidden and Disabled Tabs
-image::img/tabsheet-example2.png[]
+image::img/tabsheet-example2.png[width=50%, scaledwidth=70%]
 endif::web[]
 
 
-
 [[layout.tabsheet.events]]
 == Tab Change Events
 
@@ -135,20 +134,20 @@ tabsheet.addSelectedTabChangeListener(
     public void selectedTabChange(SelectedTabChangeEvent event) {
         // Find the tabsheet
         TabSheet tabsheet = event.getTabSheet();
-        
+
         // Find the tab (here we know it's a layout)
         Layout tab = (Layout) tabsheet.getSelectedTab();
 
         // Get the tab caption from the tab object
         String caption = tabsheet.getTab(tab).getCaption();
-        
+
         // Fill the tab content
         tab.removeAllComponents();
         tab.addComponent(new Image(null,
             new ThemeResource("img/planets/"+caption+".jpg")));
     }
 });
-        
+
 // Have some tabs
 String[] tabs = {"Mercury", "Venus", "Earth", "Mars"};
 for (String caption: tabs)
@@ -174,7 +173,7 @@ tabsheet.getTab(tabComponent).setClosable(true);
 
 [[figure.layout.tabsheet.closing]]
 .TabSheet with Closable Tabs
-image::img/tabsheet-tabclose.png[]
+image::img/tabsheet-tabclose.png[width=50%, scaledwidth=70%]
 
 [[layout.tabsheet.closing.handling]]
 === Handling Tab Close Events
@@ -194,7 +193,7 @@ tabsheet.setCloseHandler(new CloseHandler() {
                            Component tabContent) {
         Tab tab = tabsheet.getTab(tabContent);
         Notification.show("Closing " + tab.getCaption());
-        
+
         // We need to close it explicitly in the handler
         tabsheet.removeTab(tab);
     }
@@ -250,6 +249,3 @@ The content area where the tab contents are shown can be styled with
 [literal]#++v-tabsheet-deco++#.
 
 endif::web[]
-
-
-
diff --git a/documentation/themes/themes-valo.asciidoc b/documentation/themes/themes-valo.asciidoc
index 5ae5a1b37b..4ead457d62 100644
--- a/documentation/themes/themes-valo.asciidoc
+++ b/documentation/themes/themes-valo.asciidoc
@@ -245,11 +245,10 @@ $v-error-indicator-color(default:[literal]#++#ed473b++#):: Color of the componen
 <<dummy/../../../framework/application/application-errors#application.errors.error-indicator,"Error
 Indicator and Message">>.
 
-$v-required-field-indicator-color(default:[literal]#++$v-error-indicator-color++#):: Color of the required indicator in field components, as described in
-<<dummy/../../../framework/components/components-fields#components.fields.field,"Field
-Interface">>.
-
-
+$v-required-field-indicator-color(default:[literal]#++$v-error-indicator-color++#):: Color of the required indicator in field components.
+ifdef::vaadin7[]
+Field components are described in <<dummy/../../../framework/components/components-fields#components.fields.field,"Field Interface">>.
+endif::vaadin7[]
 
 Color specifications for $v-border, $v-bevel, and $v-shadow may use, in addition
 to CSS colors, the following keywords:
@@ -434,7 +433,3 @@ $v-included-components: remove($v-included-components, calendar);
 Note that in this case, you need to give the statement __after__ the
 [literal]#++@import++# statement for the Valo theme, because it overrides a
 variable by using its value that is defined in the theme.
-
-
-
-