Adds a themeable background element for horizontal scrollbar (#13334)

Change-Id: I95622de533497b3d89bcdd2a782c6271aec0764f

WebContent/VAADIN/themes/base/escalator/escalator.scss

@@ -41,6 +41,12 @@ $border-color: #aaa;
 	width: inherit; /* a decent default fallback */
 }
 
+.#{$primaryStyleName}-horizontalscrollbarbackground {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+}
+
 .#{$primaryStyleName}-header,
 .#{$primaryStyleName}-body,
 .#{$primaryStyleName}-footer {

client/src/com/vaadin/client/ui/grid/Escalator.java

@@ -800,6 +800,17 @@ public class Escalator extends Widget implements RequiresResize, DeferredWorker
             horizontalScrollbar.getElement().getStyle()
                     .setLeft(frozenPixels, Unit.PX);
             horizontalScrollbar.setScrollPos(prevScrollPos);
+
+            /*
+             * only show the scrollbar wrapper if the scrollbar itself is
+             * visible.
+             */
+            if (horizontalScrollbar.showsScrollHandle()) {
+                horizontalScrollbarBackground.getStyle().clearDisplay();
+            } else {
+                horizontalScrollbarBackground.getStyle().setDisplay(
+                        Display.NONE);
+            }
         }
 
         /**
@@ -4039,6 +4050,9 @@ public class Escalator extends Widget implements RequiresResize, DeferredWorker
     private final ColumnConfigurationImpl columnConfiguration = new ColumnConfigurationImpl();
     private final DivElement tableWrapper;
 
+    private final DivElement horizontalScrollbarBackground = DivElement.as(DOM
+            .createDiv());
+
     private PositionFunction position;
 
     /** The cached width of the escalator, in pixels. */
@@ -4138,6 +4152,11 @@ public class Escalator extends Widget implements RequiresResize, DeferredWorker
         table.appendChild(bodyElem);
         table.appendChild(footElem);
 
+        Style hWrapperStyle = horizontalScrollbarBackground.getStyle();
+        hWrapperStyle.setDisplay(Display.NONE);
+        hWrapperStyle.setHeight(Util.getNativeScrollbarSize(), Unit.PX);
+        root.appendChild(horizontalScrollbarBackground);
+
         setStylePrimaryName("v-escalator");
 
         // init default dimensions
@@ -4655,6 +4674,8 @@ public class Escalator extends Widget implements RequiresResize, DeferredWorker
         horizontalScrollbar.setStylePrimaryName(style);
 
         UIObject.setStylePrimaryName(tableWrapper, style + "-tablewrapper");
+        UIObject.setStylePrimaryName(horizontalScrollbarBackground, style
+                + "-horizontalscrollbarbackground");
 
         header.setStylePrimaryName(style);
         body.setStylePrimaryName(style);