From 35f95048db766a1be4133d47c87422f25fe0b934 Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@sitepen.com>
Date: Mon, 31 Mar 2014 00:08:38 -0400
Subject: [PATCH] Add RTL feature-detect to fix behavior in recent Chrome
 versions

WebKit used to universally keep scrollbars on the right side in RTL mode,
but Chrome now swaps the scrollbar to the left side like other browsers.
Safari (6, at least) still leaves it on the right.
---
 List.js           | 41 +++++++++++++++++++++++++++++------------
 css/dgrid_rtl.css | 10 +++++-----
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/List.js b/List.js
index fca505cd9..ece43c033 100644
--- a/List.js
+++ b/List.js
@@ -11,17 +11,16 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put
 		return document.getElementById(id);
 	}
 	
-	function getScrollbarSize(node, dimension){
+	function cleanupTestElement(element){
+		element.className = "";
+		document.body.removeChild(element);
+	}
+	
+	function getScrollbarSize(element, dimension){
 		// Used by has tests for scrollbar width/height
-		var body = document.body,
-			size;
-		
-		put(body, node, ".dgrid-scrollbar-measure");
-		size = node["offset" + dimension] - node["client" + dimension];
-		
-		put(node, "!dgrid-scrollbar-measure");
-		body.removeChild(node);
-		
+		put(document.body, element, ".dgrid-scrollbar-measure");
+		var size = element["offset" + dimension] - element["client" + dimension];
+		cleanupTestElement(element);
 		return size;
 	}
 	has.add("dom-scrollbar-width", function(global, doc, element){
@@ -31,6 +30,23 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put
 		return getScrollbarSize(element, "Height");
 	});
 	
+	has.add("dom-rtl-scrollbar-left", function(global, doc, element){
+		var div = put("div"),
+			isLeft;
+		
+		put(document.body, element, ".dgrid-scrollbar-measure[dir=rtl]");
+		put(element, div);
+		
+		// position: absolute makes IE always report child's offsetLeft as 0,
+		// but it conveniently makes other browsers reset to 0 as base, and all
+		// versions of IE are known to move the scrollbar to the left side for rtl
+		isLeft = !!has("ie") || div.offsetLeft >= has("dom-scrollbar-width");
+		cleanupTestElement(element);
+		put(div, "!");
+		element.removeAttribute("dir");
+		return isLeft;
+	});
+	
 	// var and function for autogenerating ID when one isn't provided
 	var autogen = 0;
 	function generateId(){
@@ -249,7 +265,8 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put
 			put(domNode, footerNode);
 			
 			if(isRTL){
-				domNode.className += " dgrid-rtl" + (has("webkit") ? "" : " dgrid-rtl-nonwebkit");
+				domNode.className += " dgrid-rtl" +
+					(has("dom-rtl-scrollbar-left") ? " dgrid-rtl-swap" : "");
 			}
 			
 			listen(bodyNode, "scroll", function(event){
@@ -340,7 +357,7 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put
 					// a rule to account for scrollbar width in all grid headers.
 					miscUtil.addCssRule(".dgrid-header-row", "right: " + scrollbarWidth + "px");
 					// add another for RTL grids
-					miscUtil.addCssRule(".dgrid-rtl-nonwebkit .dgrid-header-row", "left: " + scrollbarWidth + "px");
+					miscUtil.addCssRule(".dgrid-rtl-swap .dgrid-header-row", "left: " + scrollbarWidth + "px");
 				}
 			}
 			
diff --git a/css/dgrid_rtl.css b/css/dgrid_rtl.css
index b6df98dcc..b02bf45b1 100644
--- a/css/dgrid_rtl.css
+++ b/css/dgrid_rtl.css
@@ -1,17 +1,17 @@
 /* rtl support 
 
 	IMPORTANT:
-	WebKit places the scrollbars on the RIGHT, even when in RTL mode :(
+	Safari places the scrollbars on the right even when in RTL mode.
 	.dgrid-rtl is added to the domNode if the grid's isRTL is true
-	.dgrid-rtl-nonwebkit is also added to the domNode if
-		the grid's isRTL is true AND the client isn't WebKit
+	.dgrid-rtl-swap is also added to the domNode if isRTL is true and the
+		client swaps the vertical scrollbar to the left side
 */
-.dgrid-rtl-nonwebkit .dgrid-header-row {
+.dgrid-rtl-swap .dgrid-header-row {
 	right: 0;
 	left: 17px;
 }
 
-.dgrid-rtl-nonwebkit .dgrid-header-scroll {
+.dgrid-rtl-swap .dgrid-header-scroll {
 	left: 0px;
 	right: auto;
 }