Enable the RTL UI support in the extensions_ui (chrome://extensions). While doing so, make it use the font-family and font-size (84% by default) set in locale_settings for the current UI language. The body font size used to be 87%. To make up for the difference between two, the font sizes given in percentage are adjusted (increased) accordingly in the rest of the file.

BUG=28202 TEST=1. Run Chrome with '--lang=he' or '--lang=ar' on Windows (or 'LANGUAGE=he chrome' / 'LANGUAGE=ar chrome' on Linux) and go to 'chrome://extensions'. Strings are not yet translated, but the overall UI should be RTL. 2. Run Chrome in en-US (or your favorite LTR language) and go to 'chrome://extensions'. It should look the same as before. Review URL: http://codereview.chromium.org/434024 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@33108 0039d316-1c4b-4281-b951-d872f2087c98
author: jshin@chromium.org <jshin@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> 2009-11-25 20:47:02 +0000
committer: jshin@chromium.org <jshin@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> 2009-11-25 20:47:02 +0000
commit: 2b3f0f59a6761a41e22007c2c3096e8e18517e08 (patch)
tree: 2e2c7dd3b13868042aeab4c21b72e44fbff3475b
parent: 6e5d4215eb1b7e736d6e53d9283074acfaf3bf9c (diff)
download: chromium_src-2b3f0f59a6761a41e22007c2c3096e8e18517e08.zip
chromium_src-2b3f0f59a6761a41e22007c2c3096e8e18517e08.tar.gz
chromium_src-2b3f0f59a6761a41e22007c2c3096e8e18517e08.tar.bz2
2 files changed, 88 insertions, 13 deletions
diff --git a/chrome/browser/extensions/extensions_ui.cc b/chrome/browser/extensions/extensions_ui.cc
index 857bfee..8ecf039 100644
--- a/chrome/browser/extensions/extensions_ui.cc
+++ b/chrome/browser/extensions/extensions_ui.cc
@@ -118,6 +118,8 @@ void ExtensionsUIHTMLSource::StartDataRequest(const std::string& path,
   localized_strings.SetString(L"cancelButton",
       l10n_util::GetString(IDS_CANCEL));
 
+  SetFontAndTextDirection(&localized_strings);
+
   static const base::StringPiece extensions_html(
       ResourceBundle::GetSharedInstance().GetRawDataResource(
           IDR_EXTENSIONS_UI_HTML));
diff --git a/chrome/browser/resources/extensions_ui.html b/chrome/browser/resources/extensions_ui.html
index a2098d8..88becc5 100644
--- a/chrome/browser/resources/extensions_ui.html
+++ b/chrome/browser/resources/extensions_ui.html
@@ -1,19 +1,17 @@
 <!DOCTYPE HTML>
-<html>
+<html i18n-values="dir:textdirection;">
 <head>
 <meta charset="utf-8">
 <title i18n-content="title"></title>
 <style>
 body {
-  font-size: 87%;
-  font-family: Helvetica, Arial, sans-serif;
   margin: 10px;
   min-width: 47em;
 }
 
 a {
   color: blue;
-  font-size: 100%;
+  font-size: 103%;
 }
 
 div#header {
@@ -24,6 +22,11 @@ div#header {
   padding-top: 1.5em;
   position: relative;
 }
+
+html[dir='rtl'] div#header {
+  padding-right: 0;
+}
+
 div#header h1 {
   background: url('../../app/theme/extensions_section.png') 0px 20px no-repeat;
   display: inline;
@@ -32,29 +35,39 @@ div#header h1 {
   padding-left: 75px;
   padding-top: 40px;
 }
+html[dir='rtl'] div#header h1 {
+  background: url('../../app/theme/extensions_section.png') right no-repeat;
+  padding-right: 95px;
+  padding-left: 0;
+}
 
 h1 {
-  font-size: 150%;
+  font-size: 156%;
   font-weight: bold;
   padding: 0;
   margin: 0;
 }
 
 div.content {
-  font-size: 84%;
+  font-size: 88%;
   margin-top: 5px;
 }
 
 .section-header {
   background: #ebeff9;
   border-top: 1px solid #b5c7de;
-  font-size: 95%;
+  font-size: 99%;
   padding-bottom: 2px;
   padding-left: 5px;
   padding-top: 3px;
   width: 100%;
 }
 
+html[dir='rtl'] .section-header {
+  padding-right: 5px;
+  padding-left: 0;
+}
+
 .section-header-title {
   font-weight: bold;
 }
@@ -104,20 +117,27 @@ body.showDevMode .showInDevMode {
 }
 
 .developer-mode-link {
-  font-size: 100%;
   margin-right: 3px;
   white-space: nowrap;
 }
 
+.developer-mode-link a {
+  font-size: 97%;
+}
+
 .developer-mode {
   background: #f4f6fc;
   border-bottom: 1px solid #edeff5;
-  font-size: 85%;
+  font-size: 89%;
   padding-bottom: 0.8em;
   padding-left: 10px;
   padding-top: 0.8em;
   width: 100%;
 }
+html[dir='rtl'] .developer-mode {
+  padding-right: 10px;
+  padding-left: 0;
+}
 
 .extension_disabled td {
   background: url('gray.png') 0px 0px;
@@ -156,6 +176,10 @@ body.showDevMode .showInDevMode {
   font-weight: bold;
 }
 
+html[dir='rtl'] #get-moar-extensions {
+   text-align: left;
+}
+
 .extension-description {
   margin-top: 0.4em;
 }
@@ -168,6 +192,26 @@ body.showDevMode .showInDevMode {
   float: right;
 }
 
+html[dir='rtl'] .extension-actions {
+  float: left;
+}
+
+.extension-actions-div {
+  text-align: right;
+}
+
+html[dir='rtl'] .extension-actions-div {
+  text-align: left;
+}
+
+.extension-options-cell {
+  text-align: right;
+}
+
+html[dir='rtl'] .extension-options-cell {
+  text-align: left;
+}
+
 .extension-views {
   margin: 0 0 0;
   margin-left: 2ex;
@@ -175,8 +219,12 @@ body.showDevMode .showInDevMode {
   list-style-type: none;
 }
 
+html[dir='rtl'] .extension-views {
+  margin: 0 2ex 0 0;
+}
+
 button {
-  font-size: 100%;
+  font-size: 104%;
 }
 
 #dialogBackground, #dialogBackground div {
@@ -209,11 +257,17 @@ button {
   -webkit-user-select:none;
 }
 
+html[dir='rtl'] #dialogBackground {
+  right: 0;
+  left: auto;
+}
+
 #dialogHBackground {
   height: 100%;
   -webkit-box-orient: horizontal;
 }
 
+
 #dialog {
   background-color: #5296DE;
   border: 1px solid #3A75BD;
@@ -223,6 +277,10 @@ button {
   -webkit-box-orient: vertical;
 }
 
+html[dir='rtl'] #dialog {
+  font-size: 13px;
+}
+
 #dialogHeader {
   background-color: rgba(0,0,0,0);
   color: white;
@@ -230,6 +288,10 @@ button {
   width: 100%;
 }
 
+html[dir='rtl'] #dialogHeader {
+  margin-left: -20px;
+}
+
 #dialogBody {
   background-color: rgb(240, 240, 240);
   border: 1px solid #3A75BD;
@@ -250,6 +312,11 @@ button {
   -webkit-box-pack: end;
 }
 
+html[dir='rtl'] .dialogBrowseRow {
+  margin-right: -24px;
+  /* margin-left: 0px; */
+}
+
 .dialogBrowseRow>* {
   margin: 2px
 }
@@ -260,6 +327,11 @@ button {
   margin-top: 20px;
 }
 
+html[dir='rtl'] #dialogContentFooter {
+  margin-right: -12px;
+  margin-left: 0px;
+}
+
 </style>
 <script>
 /**
@@ -579,7 +651,8 @@ function autoUpdate() {
 
 </script>
 </head>
-<body onload="requestExtensionsData();">
+<body onload="requestExtensionsData();"
+      i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
   <div id="dialogBackground">
     <div id="dialogHBackground">
       <div id="dialog">
@@ -729,7 +802,7 @@ function autoUpdate() {
             </div>
           </td>
           <td width="300">
-            <div align="right">
+            <div class="extension-actions-div">
               <span class="extension-actions">
                 <a
                   jsvalues=".extensionId:id"
@@ -762,7 +835,7 @@ function autoUpdate() {
               </span>
             </div>
           </td>
-          <td align="right" valign="center" width="90">
+          <td class="extension-options-cell" valign="center" width="90">
                 <button
                   jsdisplay="options_url && enabled"
                   jsvalues=".extensionId:id"
author	jshin@chromium.org <jshin@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>	2009-11-25 20:47:02 +0000
committer	jshin@chromium.org <jshin@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>	2009-11-25 20:47:02 +0000
commit	2b3f0f59a6761a41e22007c2c3096e8e18517e08 (patch)
tree	2e2c7dd3b13868042aeab4c21b72e44fbff3475b
parent	6e5d4215eb1b7e736d6e53d9283074acfaf3bf9c (diff)
download	chromium_src-2b3f0f59a6761a41e22007c2c3096e8e18517e08.zip chromium_src-2b3f0f59a6761a41e22007c2c3096e8e18517e08.tar.gz chromium_src-2b3f0f59a6761a41e22007c2c3096e8e18517e08.tar.bz2