Issue #766170 by aspilicious, casey, tsi, xjm: Fixed Overlay lacks rtl styling.

modules/overlay/overlay-child.css

@@ -17,7 +17,7 @@ html.js body {
   min-width: 700px;
   position: relative;
   padding: .2em;
-  padding-right: 26px;
+  padding-right: 26px; /* LTR */
   width: 88%;
 }
 #overlay-titlebar {
@@ -39,7 +39,7 @@ html.js body {
 }
 #overlay-title {
   color: #fff;
-  float: left;
+  float: left; /* LTR */
   font-size: 20px;
   margin: 0;
   padding: 0.3em 0;
@@ -58,14 +58,14 @@ html.js body {
 
 #overlay-close-wrapper {
   position: absolute;
-  right: 0;
+  right: 0; /* LTR */
 }
 #overlay-close,
 #overlay-close:hover {
-  background: transparent url(images/close.png) no-repeat;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
+  background: transparent url(images/close.png) no-repeat; /* LTR */
+  -moz-border-radius-topleft: 0; /* LTR */
+  -webkit-border-top-left-radius: 0; /* LTR */
+  border-top-left-radius: 0; /* LTR */
   display: block;
   height: 26px;
   margin: 0;
@@ -82,13 +82,13 @@ html.js body {
   line-height: 27px;
   margin: -28px 0 0 0;
   position: absolute;
-  right: 20px;
+  right: 20px; /* LTR */
   text-transform: uppercase;
 }
 #overlay-tabs li {
   display: inline;
   list-style: none;
-  margin: 0 0 0 -3px;
+  margin: 0 0 0 -3px; /* LTR */
   padding: 0;
 }
 #overlay-tabs li a,

modules/overlay/overlay-parent.js

@@ -431,6 +431,27 @@ Drupal.overlay.eventhandlerAlterDisplacedElements = function (event) {
   // IE6 doesn't support maxWidth, use width instead.
   var maxWidthName = (typeof document.body.style.maxWidth == 'string') ? 'maxWidth' : 'width';
 
+  if (Drupal.overlay.leftSidedScrollbarOffset === undefined && $(document.documentElement).attr('dir') === 'rtl') {
+    // We can't use element.clientLeft to detect whether scrollbars are placed
+    // on the left side of the element when direction is set to "rtl" as most
+    // browsers dont't support it correctly.
+    // http://www.gtalbot.org/BugzillaSection/DocumentAllDHTMLproperties.html
+    // There seems to be absolutely no way to detect whether the scrollbar
+    // is on the left side in Opera; always expect scrollbar to be on the left.
+    if ($.browser.opera) {
+      Drupal.overlay.leftSidedScrollbarOffset = document.documentElement.clientWidth - this.iframeWindow.document.documentElement.clientWidth + this.iframeWindow.document.documentElement.clientLeft;
+    }
+    else if (this.iframeWindow.document.documentElement.clientLeft) {
+      Drupal.overlay.leftSidedScrollbarOffset = this.iframeWindow.document.documentElement.clientLeft;
+    }
+    else {
+      var el1 = $('<div style="direction: rtl; overflow: scroll;"></div>').appendTo(document.body);
+      var el2 = $('<div></div>').appendTo(el1);
+      Drupal.overlay.leftSidedScrollbarOffset = parseInt(el2[0].offsetLeft - el1[0].offsetLeft);
+      el1.remove();
+    }
+  }
+
   // Consider any element that should be visible above the overlay (such as
   // a toolbar).
   $('.overlay-displace-top, .overlay-displace-bottom').each(function () {
@@ -441,6 +462,10 @@ Drupal.overlay.eventhandlerAlterDisplacedElements = function (event) {
       maxWidth -= 1;
     }
 
+    if (Drupal.overlay.leftSidedScrollbarOffset) {
+      $(this).css('left', Drupal.overlay.leftSidedScrollbarOffset);
+    }
+
     // Prevent displaced elements overlapping window's scrollbar.
     var currentMaxWidth = parseInt($(this).css(maxWidthName));
     if ((data.drupalOverlay && data.drupalOverlay.maxWidth) || isNaN(currentMaxWidth) || currentMaxWidth > maxWidth || currentMaxWidth <= 0) {
@@ -453,7 +478,12 @@ Drupal.overlay.eventhandlerAlterDisplacedElements = function (event) {
     var offset = $(this).offset();
     var offsetRight = offset.left + $(this).outerWidth();
     if ((data.drupalOverlay && data.drupalOverlay.clip) || offsetRight > maxWidth) {
-      $(this).css('clip', 'rect(auto, ' + (maxWidth - offset.left) + 'px, ' + (documentHeight - offset.top) + 'px, auto)');
+      if (Drupal.overlay.leftSidedScrollbarOffset) {
+        $(this).css('clip', 'rect(auto, auto, ' + (documentHeight - offset.top) + 'px, ' + (Drupal.overlay.leftSidedScrollbarOffset + 2) + 'px)');
+      }
+      else {
+        $(this).css('clip', 'rect(auto, ' + (maxWidth - offset.left) + 'px, ' + (documentHeight - offset.top) + 'px, auto)');
+      }
       (data.drupalOverlay = data.drupalOverlay || {}).clip = true;
     }
   });