Some RTL fixes for tabbed options.

- get the padding right for favicons in lists
- fix action areas
- margin => -webkit-margin

BUG=67849
TEST=manual

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

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

7 files changed, 57 insertions, 54 deletions

diff --git a/chrome/browser/resources/options/content_settings.css b/chrome/browser/resources/options/content_settings.css
index be2cc17..f788261 100644
--- a/chrome/browser/resources/options/content_settings.css
+++ b/chrome/browser/resources/options/content_settings.css
@@ -4,53 +4,59 @@ Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 */
 
-.exceptionPattern {
+.exception-pattern {
+  -webkit-box-flex: 1;
+  -webkit-margin-end: 10px;
+  -webkit-margin-start: 14px;
   display: -webkit-box;
   margin-right: 4px;
   overflow: hidden;
-  -webkit-box-flex: 1;
   white-space: nowrap;
 }
 
-.exceptionSetting {
+.exception-setting {
+  -webkit-margin-end: 20px;
   display: inline-block;
   width: 100px;
-  margin-right: 20px;
 }
 
-select.exceptionSetting {
+select.exception-setting {
   vertical-align: middle;
 }
 
 /* Hacks to make the <select> align better with the <input>. */
-html[toolkit=gtk] select.exceptionSetting {
+html[toolkit=gtk] select.exception-setting {
   height: 22px;
   margin-top: 1px;
 }
 
-#exceptionColumnHeaders {
+#exception-column-headers {
+  -webkit-margin-start: 17px;
   display: -webkit-box;
   margin-top: 17px;
-  -webkit-margin-start: 3px;
 }
 
-#exceptionColumnHeaders > div {
+#exception-column-headers > div {
   font-weight: bold;
 }
 
-#exceptionPatternColumn {
+#exception-pattern-column {
   -webkit-box-flex: 1;
 }
 
-#exceptionBehaviorColumn {
+#exception-behavior-column {
   width: 140px;
 }
 
-.otr_explanation {
+.otr-explanation {
   font-style: italic;
 }
 
-#contentSettingsExceptionsArea list {
+#content-settings-exceptions-area list {
   margin-bottom: 10px;
   margin-top: 4px;
 }
+
+#content-settings-exceptions-area input:invalid {
+  background-color: pink;
+}
diff --git a/chrome/browser/resources/options/content_settings.html b/chrome/browser/resources/options/content_settings.html
index c2693f3..f15002489 100644
--- a/chrome/browser/resources/options/content_settings.html
+++ b/chrome/browser/resources/options/content_settings.html
@@ -1,4 +1,4 @@
-<div class="page hidden" id="contentSettingsPage">
+<div class="page hidden" id="content-settings-page">
   <h1 i18n-content="contentSettingsPage"></h1>
   <!-- Cookie filter tab contents -->
   <section>
@@ -24,7 +24,7 @@
         <span i18n-content="cookies_clear_on_exit"></span>
       </label>
 
-      <button class="exceptionsListButton" contentType="cookies"
+      <button class="exceptions-list-button" contentType="cookies"
           i18n-content="manage_exceptions"></button>
       <button id="show-cookies-button"
           i18n-content="cookies_show_cookies"></button>
@@ -44,7 +44,7 @@
         <span i18n-content="images_block"></span>
       </label>
 
-      <button class="exceptionsListButton" contentType="images"
+      <button class="exceptions-list-button" contentType="images"
           i18n-content="manage_exceptions"></button>
     </div>
   </section>
@@ -62,7 +62,7 @@
         <span i18n-content="javascript_block"></span>
       </label>
 
-      <button class="exceptionsListButton" contentType="javascript"
+      <button class="exceptions-list-button" contentType="javascript"
           i18n-content="manage_exceptions"></button>
     </div>
   </section>
@@ -84,14 +84,14 @@
         <span i18n-content="plugins_block"></span>
       </label>
 
-      <button class="exceptionsListButton" contentType="plugins"
+      <button class="exceptions-list-button" contentType="plugins"
           i18n-content="manage_exceptions"></button>
     </div>
   </section>
 
   <!-- Pop-ups filter -->
   <section>
-    <h3 i18n-content="popups_tab_label" class="contentSettingsHeader"></h3>
+    <h3 i18n-content="popups_tab_label" class="content-settings-header"></h3>
     <div>
       <label class="radio">
         <input type="radio" name="popups" value="allow">
@@ -102,7 +102,7 @@
         <span i18n-content="popups_block"></span>
       </label>
 
-      <button class="exceptionsListButton" contentType="popups"
+      <button class="exceptions-list-button" contentType="popups"
           i18n-content="manage_exceptions"></button>
     </div>
   </section>
@@ -124,7 +124,7 @@
         <span i18n-content="location_block"></span>
       </label>
 
-      <button class="exceptionsListButton" contentType="location"
+      <button class="exceptions-list-button" contentType="location"
           i18n-content="manage_exceptions"></button>
     </div>
   </section>
@@ -146,7 +146,7 @@
         <span i18n-content="notifications_block"></span>
       </label>
 
-      <button class="exceptionsListButton" contentType="notifications"
+      <button class="exceptions-list-button" contentType="notifications"
           i18n-content="manage_exceptions"></button>
     </div>
   </section>
diff --git a/chrome/browser/resources/options/content_settings.js b/chrome/browser/resources/options/content_settings.js
index 787386e..a9a80bb 100644
--- a/chrome/browser/resources/options/content_settings.js
+++ b/chrome/browser/resources/options/content_settings.js
@@ -16,7 +16,7 @@ cr.define('options', function() {
   function ContentSettings() {
     this.activeNavTab = null;
     OptionsPage.call(this, 'content', templateData.contentSettingsPage,
-                     'contentSettingsPage');
+                     'content-settings-page');
   }
 
   cr.addSingletonGetter(ContentSettings);
@@ -30,7 +30,7 @@ cr.define('options', function() {
       chrome.send('getContentFilterSettings');
 
       var exceptionsButtons =
-          this.pageDiv.querySelectorAll('.exceptionsListButton');
+          this.pageDiv.querySelectorAll('.exceptions-list-button');
       for (var i = 0; i < exceptionsButtons.length; i++) {
         exceptionsButtons[i].onclick = function(event) {
           ContentSettingsExceptionsArea.getInstance().showList(
diff --git a/chrome/browser/resources/options/content_settings_exceptions_area.html b/chrome/browser/resources/options/content_settings_exceptions_area.html
index d4289bb..59db53f 100644
--- a/chrome/browser/resources/options/content_settings_exceptions_area.html
+++ b/chrome/browser/resources/options/content_settings_exceptions_area.html
@@ -1,15 +1,15 @@
-<div class="page hidden" id="contentSettingsExceptionsArea">
+<div class="page hidden" id="content-settings-exceptions-area">
   <h1></h1>
 
-  <div id="exceptionColumnHeaders">
-    <div id="exceptionPatternColumn">Pattern</div>
-    <div id="exceptionBehaviorColumn">Behavior</div>
+  <div id="exception-column-headers">
+    <div id="exception-pattern-column">Pattern</div>
+    <div id="exception-behavior-column">Behavior</div>
   </div>
 
   <div contentType="cookies">
     <list mode="normal"></list>
     <div>
-      <span class="otr_explanation"
+      <span class="otr-explanation"
             i18n-content="otr_exceptions_explanation"></span>
       <list mode="otr"></list>
     </div>
@@ -20,7 +20,7 @@
   <div contentType="images">
     <list mode="normal"></list>
     <div>
-      <span class="otr_explanation"
+      <span class="otr-explanation"
             i18n-content="otr_exceptions_explanation"></span>
       <list mode="otr"></list>
     </div>
@@ -29,7 +29,7 @@
   <div contentType="javascript">
     <list mode="normal"></list>
     <div>
-      <span class="otr_explanation"
+      <span class="otr-explanation"
             i18n-content="otr_exceptions_explanation"></span>
       <list mode="otr"></list>
     </div>
@@ -38,7 +38,7 @@
   <div contentType="plugins">
     <list mode="normal"></list>
     <div>
-      <span class="otr_explanation"
+      <span class="otr-explanation"
             i18n-content="otr_exceptions_explanation"></span>
       <list mode="otr"></list>
     </div>
@@ -48,7 +48,7 @@
   <div contentType="popups">
     <list mode="normal"></list>
     <div>
-      <span class="otr_explanation"
+      <span class="otr-explanation"
             i18n-content="otr_exceptions_explanation"></span>
       <list mode="otr"></list>
     </div>
diff --git a/chrome/browser/resources/options/content_settings_exceptions_area.js b/chrome/browser/resources/options/content_settings_exceptions_area.js
index ddc85a0..cb5a06e 100644
--- a/chrome/browser/resources/options/content_settings_exceptions_area.js
+++ b/chrome/browser/resources/options/content_settings_exceptions_area.js
@@ -44,13 +44,13 @@ cr.define('options.contentSettings', function() {
       if (this.pattern) {
         var patternLabel = cr.doc.createElement('span');
         patternLabel.textContent = this.pattern;
-        patternLabel.className = 'exceptionPattern';
+        patternLabel.className = 'exception-pattern';
         this.contentElement.appendChild(patternLabel);
         this.patternLabel = patternLabel;
 
         var settingLabel = cr.doc.createElement('span');
         settingLabel.textContent = this.settingForDisplay();
-        settingLabel.className = 'exceptionSetting';
+        settingLabel.className = 'exception-setting';
         this.contentElement.appendChild(settingLabel);
         this.settingLabel = settingLabel;
       }
@@ -59,7 +59,7 @@ cr.define('options.contentSettings', function() {
       var input = cr.doc.createElement('input');
       input.type = 'text';
       this.contentElement.appendChild(input);
-      input.className = 'exceptionPattern hidden';
+      input.className = 'exception-pattern hidden';
 
       var select = cr.doc.createElement('select');
       var optionAllow = cr.doc.createElement('option');
@@ -85,7 +85,7 @@ cr.define('options.contentSettings', function() {
       select.appendChild(optionBlock);
 
       this.contentElement.appendChild(select);
-      select.className = 'exceptionSetting hidden';
+      select.className = 'exception-setting hidden';
 
       // Used to track whether the URL pattern in the input is valid.
       // This will be true if the browser process has informed us that the
@@ -547,7 +547,7 @@ cr.define('options.contentSettings', function() {
    */
   function ContentSettingsExceptionsArea() {
     OptionsPage.call(this, 'contentExceptions',
-                     '', 'contentSettingsExceptionsArea');
+                     '', 'content-settings-exceptions-area');
   }
 
   cr.addSingletonGetter(ContentSettingsExceptionsArea);
diff --git a/chrome/browser/resources/options/options.js b/chrome/browser/resources/options/options.js
index 4d77b26..b72f8b5 100644
--- a/chrome/browser/resources/options/options.js
+++ b/chrome/browser/resources/options/options.js
@@ -39,7 +39,7 @@ function load() {
   cr.ui.decorate('select[pref]', options.PrefSelect);
   cr.ui.decorate('input[pref][type=text]', options.PrefTextField);
   cr.ui.decorate('input[pref][type=url]', options.PrefTextField);
-  cr.ui.decorate('#contentSettingsPage input[type=radio]',
+  cr.ui.decorate('#content-settings-page input[type=radio]',
       options.ContentSettingsRadio);
   cr.ui.decorate('#fontSettingsMinimumSizeSelector',
       options.MinimumFontSizeSelect);
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index 684ab56..fd0694e 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -75,13 +75,17 @@ html[hide-menu=true] .close-subpage {
 }
 
 .action-area {
-  -webkit-box-orient: horizontal;
   -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
+  bottom: 0;
+  display: -webkit-box;
   padding: 12px;
   position: absolute;
-  right: 0px;
-  bottom: 0px;
-  display: -webkit-box;
+  right: 0;
+}
+
+html[dir='rtl'] .action-area {
+  left: 0;
 }
 
 .button-strip {
@@ -352,7 +356,7 @@ label.radio {
 }
 
 select {
-  margin: 0px;
+  margin: 0;
 }
 
 .link-button {
@@ -368,10 +372,6 @@ select {
   border-color: transparent;
 }
 
-#contentSettingsPage :invalid {
-  background-color: pink;
-}
-
 .settings-list {
   border: 1px solid #d9d9d9;
   border-radius: 2px;
@@ -381,7 +381,7 @@ list > * {
   -webkit-box-align: center;
   -webkit-transition: .15s background-color;
   box-sizing: border-box;
-  border-radius: 0px;
+  border-radius: 0;
   display: -webkit-box;
   height: 32px;
   border: none;
@@ -484,8 +484,8 @@ html[dir=rtl].option-name {
 }
 
 list .favicon-cell {
-  -webkit-padding-start: 33px;
-  background-position: 7px;
+  -webkit-margin-start: 7px;
+  -webkit-padding-start: 26px;
   display: block;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -493,9 +493,6 @@ list .favicon-cell {
 }
 
 html[dir=rtl] list .favicon-cell {
-  /* TODO(stuartmorgan): position this 7px from the right (and remove the
-     padding override) once the CSS support is available */
-  -webkit-padding-start: 26px;
   background-position: right;
 }