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

Change-Id: I0d5e76f7fb07f967dd04941a23e79dfb30049731

11 files changed, 38 insertions, 61 deletions

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[]
-
-
-