Makes Escalator show scrollbars on some OSX settings (#16852)

If the OSX is configured to show scrollbars only while scrolling, Escalator
would previously have its scrollbars hidden underneath the DOM structure.

Change-Id: I6c1a05ba23f6555d9f7f4c484c066c5f7ae63ac3

1 files changed, 54 insertions, 34 deletions

diff --git a/client/src/com/vaadin/client/widgets/Escalator.java b/client/src/com/vaadin/client/widgets/Escalator.java
index ca54b97ca5..a81d0f3e18 100644
--- a/client/src/com/vaadin/client/widgets/Escalator.java
+++ b/client/src/com/vaadin/client/widgets/Escalator.java
@@ -4359,6 +4359,46 @@ public class Escalator extends Widget implements RequiresResize, DeferredWorker
         final Element root = DOM.createDiv();
         setElement(root);
 
+        setupScrollbars(root);
+
+        tableWrapper = DivElement.as(DOM.createDiv());
+
+        root.appendChild(tableWrapper);
+
+        final Element table = DOM.createTable();
+        tableWrapper.appendChild(table);
+
+        table.appendChild(headElem);
+        table.appendChild(bodyElem);
+        table.appendChild(footElem);
+
+        Style hCornerStyle = headerDeco.getStyle();
+        hCornerStyle.setWidth(verticalScrollbar.getScrollbarThickness(),
+                Unit.PX);
+        hCornerStyle.setDisplay(Display.NONE);
+        root.appendChild(headerDeco);
+
+        Style fCornerStyle = footerDeco.getStyle();
+        fCornerStyle.setWidth(verticalScrollbar.getScrollbarThickness(),
+                Unit.PX);
+        fCornerStyle.setDisplay(Display.NONE);
+        root.appendChild(footerDeco);
+
+        Style hWrapperStyle = horizontalScrollbarDeco.getStyle();
+        hWrapperStyle.setDisplay(Display.NONE);
+        hWrapperStyle.setHeight(horizontalScrollbar.getScrollbarThickness(),
+                Unit.PX);
+        root.appendChild(horizontalScrollbarDeco);
+
+        setStylePrimaryName("v-escalator");
+
+        // init default dimensions
+        setHeight(null);
+        setWidth(null);
+    }
+
+    private void setupScrollbars(final Element root) {
+
         ScrollHandler scrollHandler = new ScrollHandler() {
             @Override
             public void onScroll(ScrollEvent event) {
@@ -4413,40 +4453,20 @@ public class Escalator extends Widget implements RequiresResize, DeferredWorker
                     }
                 });
 
-        tableWrapper = DivElement.as(DOM.createDiv());
-
-        root.appendChild(tableWrapper);
-
-        final Element table = DOM.createTable();
-        tableWrapper.appendChild(table);
-
-        table.appendChild(headElem);
-        table.appendChild(bodyElem);
-        table.appendChild(footElem);
-
-        Style hCornerStyle = headerDeco.getStyle();
-        hCornerStyle.setWidth(verticalScrollbar.getScrollbarThickness(),
-                Unit.PX);
-        hCornerStyle.setDisplay(Display.NONE);
-        root.appendChild(headerDeco);
-
-        Style fCornerStyle = footerDeco.getStyle();
-        fCornerStyle.setWidth(verticalScrollbar.getScrollbarThickness(),
-                Unit.PX);
-        fCornerStyle.setDisplay(Display.NONE);
-        root.appendChild(footerDeco);
-
-        Style hWrapperStyle = horizontalScrollbarDeco.getStyle();
-        hWrapperStyle.setDisplay(Display.NONE);
-        hWrapperStyle.setHeight(horizontalScrollbar.getScrollbarThickness(),
-                Unit.PX);
-        root.appendChild(horizontalScrollbarDeco);
-
-        setStylePrimaryName("v-escalator");
-
-        // init default dimensions
-        setHeight(null);
-        setWidth(null);
+        /*
+         * Because of all the IE hacks we've done above, we now have scrollbars
+         * hiding underneath a lot of DOM elements.
+         * 
+         * This leads to problems with OSX (and many touch-only devices) when
+         * scrollbars are only shown when scrolling, as the scrollbar elements
+         * are hidden underneath everything. We trust that the scrollbars behave
+         * properly in these situations and simply pop them out with a bit of
+         * z-indexing.
+         */
+        if (WidgetUtil.getNativeScrollbarSize() == 0) {
+            verticalScrollbar.getElement().getStyle().setZIndex(90);
+            horizontalScrollbar.getElement().getStyle().setZIndex(90);
+        }
     }
 
     @Override