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

Change-Id: I0d5e76f7fb07f967dd04941a23e79dfb30049731

8 files changed, 33 insertions, 45 deletions

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"].