Fix the in-progress download status for the RTL UI.

1. Make the download progress pie chart fill up CW even in the RTL UI. 
2. Make the filename be at the right end instead of being in the middle of the download status in the RTL UI.

BUG=13215,13216 (http://crbug.com/13215, http://crbug.com/13216)
TEST=1. Launch Chrome with --lang=he or --lang=ar. 
     2. Download a large file (like chrome mini-installer or Firefox) and go to the download tab (pressing Ctrl-J would work)
     3. The progress pie-chart should be filled up clockwise.
     4. The filename should be to the right of the download status ('5 kB of 7.2 MB - 4 mins left' in Hebrew or Arabic) instead of being put in the middle of the status string.

Review URL: http://codereview.chromium.org/119318

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@18022 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 11 insertions, 5 deletions

diff --git a/chrome/browser/resources/downloads.html b/chrome/browser/resources/downloads.html
index a6cd273..881b7e8 100644
--- a/chrome/browser/resources/downloads.html
+++ b/chrome/browser/resources/downloads.html
@@ -203,6 +203,10 @@ function showInline(node, isShow) {
   node.style.display = isShow ? 'inline' : 'none';
 }
 
+function showInlineBlock(node, isShow) {
+  node.style.display = isShow ? 'inline-block' : 'none';
+}
+
 /**
  * Creates an element of a specified type with a specified class name.
  * @param {String} type The node type.
@@ -511,7 +515,11 @@ Download.prototype.update = function(download) {
     }
 
     showInline(this.nodeFileLink_, this.state_ == Download.States.COMPLETE);
-    showInline(this.nodeFileName_, this.state_ != Download.States.COMPLETE);
+    // nodeFileName_ has to be inline-block to avoid the 'interaction' with 
+    // nodeStatus_. If both are inline, it appears that their text contents
+    // are merged before the bidi algorithm is applied leading to an
+    // undesirable reordering. http://crbug.com/13216 
+    showInlineBlock(this.nodeFileName_, this.state_ != Download.States.COMPLETE);
 
     if (this.state_ == Download.States.IN_PROGRESS) {
       this.nodeProgressForeground_.style.display = 'block';
@@ -530,9 +538,8 @@ Download.prototype.update = function(download) {
                                Download.Progress.radius,
                                Download.Progress.base,
                                Download.Progress.base + Math.PI * 0.02 *
-                               Number(this.percent_) *
-                               (Download.Progress.dir ? -1 : 1),
-                               Download.Progress.dir);
+                               Number(this.percent_),
+                               false);
 
       this.canvasProgress_.lineTo(Download.Progress.centerX,
                                   Download.Progress.centerY);
@@ -657,7 +664,6 @@ var downloads, localStrings, resultsTimeout;
 
 function load() {
   localStrings = new LocalStrings($('l10n'));
-  Download.Progress.dir = document.documentElement.dir == 'rtl';
   downloads = new Downloads();
   $('term').focus();
   setSearch("");