RTL HTML/CSS clean-up with -webkit-foo-{start,end}

With -webkit-{margin,padding}-{start,end}, a lot of dir=rtl pseudo-selectors
can be removed. 

While I'm at it, I fixed one glitch in the history page where 'text-align: right' is hard-coded instead of 'text-align: end'

BUG=NONE
TEST=extension/download/plugin/history and DOM UI pages are laid out as before both in LTR CHrome and RTL Chrome.


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

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

chrome/browser/resources/about_conflicts.html

@@ -19,16 +19,12 @@ div#header {
   min-height: 67px;
   overflow: hidden;
   padding-bottom: 20px;
-  padding-left: 0;
+  -webkit-padding-start: 0;
   padding-top: 20px;
   position: relative;
   -webkit-box-sizing: border-box;
 }
 
-html[dir=rtl] #header {
-  padding-right: 0;
-}
-
 #header h1 {
   background: url('../../app/theme/about_conflicts.png') 0px 20px no-repeat;
   display: inline;
@@ -66,16 +62,11 @@ div.content {
   border-top: 1px solid #b5c7de;
   font-size: 99%;
   padding-bottom: 2px;
-  padding-left: 5px;
+  -webkit-padding-start: 5px;
   padding-top: 3px;
   width: 100%;
 }
 
-html[dir=rtl] .section-header {
-  padding-right: 5px;
-  padding-left: 0;
-}
-
 .section-header > table > tr > td:first-child {
   width: 100%;
 }
@@ -100,12 +91,7 @@ html[dir=rtl] .section-header {
 }
 
 #top {
-  padding-right: 5px;
-}
-
-html[dir=rtl] #top {
-  padding-left: 5px;
-  padding-right: 0;
+  -webkit-padding-end: 5px;
 }
 
 .module-loaded > td {

chrome/browser/resources/about_sys.html

@@ -139,19 +139,11 @@ html[dir='rtl'] .number_expanded, html[dir='rtl'] .number_collapsed  {
   text-align: right;
 }
 
-tr:not(.firstRow) > *:nth-child(1,
+tr:not(.firstRow) > *:nth-child(1),
 tr:not(.firstRow) > *:nth-child(2),
 tr.firstRow th:nth-child(1),
 tr.firstRow th:nth-child(2) {
-  border-right: 1px solid #b5c6de;
-}
-
-html[dir='rtl'] tr:not(.firstRow) > *:nth-child(1),
-html[dir='rtl'] tr:not(.firstRow) > *:nth-child(2),
-html[dir='rtl'] tr.firstRow th:nth-child(1),
-html[dir='rtl'] tr.firstRow th:nth-child(2) {
-  border-right: auto;
-  border-left: 1px solid #b5c6de;
+  -webkit-border-end: 1px solid #b5c6de;
 }
 
 .name {

chrome/browser/resources/dom_ui.css

@@ -16,7 +16,7 @@ body {
 .header .form {
   float:left;
   margin-top:22px;
-  margin-left:12px;
+  -webkit-margin-start:12px;
 }
 
 html[dir='rtl'] .logo {
@@ -25,13 +25,12 @@ html[dir='rtl'] .logo {
 
 html[dir='rtl'] .form {
   float:right;
-  margin-right:12px;
 }
 
 .page-navigation {
   padding:8px;
   background-color:#ebeff9;
-  margin-right:4px;
+  -webkit-margin-end:4px;
 }
 
 .footer {

chrome/browser/resources/dom_ui2.css

@@ -13,14 +13,13 @@ body {
 .header .form {
   float:left;
   margin-top:22px;
-  margin-left:12px;
+  -webkit-margin-start:12px;
 }
 html[dir='rtl'] .logo {
   float:right;
 }
 html[dir='rtl'] .form {
   float:right;
-  margin-right:12px;
 }
 .page-navigation {
   padding:8px;
@@ -29,4 +28,4 @@ html[dir='rtl'] .form {
 }
 .footer {
   height:24px;
-}
\ No newline at end of file
+}

chrome/browser/resources/downloads.html

@@ -23,18 +23,13 @@ body {
 .header .form {
   float: left;
   margin-top: 22px;
-  margin-left: 12px;
+  -webkit-margin-start: 12px;
 }
 
-html[dir=rtl] .logo {
+html[dir=rtl] .logo, html[dir=rtl] .form {
   float: right;
 }
 
-html[dir=rtl] .form {
-  float: right;
-  margin-right: 12px;
-}
-
 #downloads-summary {
   margin-top: 12px;
   border-top: 1px solid #9cc2ef;
@@ -62,18 +57,11 @@ html[dir=rtl] #downloads-summary > a {
 .download {
   position: relative;
   margin-top: 6px;
-  margin-left: 114px;
-  padding-left: 56px;
+  -webkit-margin-start: 114px;
+  -webkit-padding-start: 56px;
   margin-bottom: 15px;
 }
 
-html[dir=rtl] .download {
-  padding-left: 0px;
-  margin-left: 0px;
-  margin-right: 114px;
-  padding-right: 56px;
-}
-
 .date-container {
   position: absolute;
   left: -110px;
@@ -146,16 +134,11 @@ html[dir=rtl] .progress {
 
 .name {
   display: none;
-  padding-right: 16px;
+  -webkit-padding-end: 16px;
   max-width: 450px;
   word-break: break-all;
 }
 
-html[dir=rtl] .name {
-  padding-right: 0px;
-  padding-left: 16px;
-}
-
 .download .status {
   display: inline;
   color: #999;

chrome/browser/resources/extensions_ui.html

@@ -20,16 +20,12 @@ div#header {
   min-height: 67px;
   overflow: hidden;
   padding-bottom: 20px;
-  padding-left: 0;
+  -webkit-padding-start: 0;
   padding-top: 20px;
   position: relative;
   -webkit-box-sizing: border-box;
 }
 
-html[dir=rtl] #header {
-  padding-right: 0;
-}
-
 #header h1 {
   background: url('../../app/theme/extensions_section.png') 0px 20px no-repeat;
   display: inline;
@@ -62,16 +58,11 @@ div.content {
   border-top: 1px solid #b5c7de;
   font-size: 99%;
   padding-bottom: 2px;
-  padding-left: 5px;
+  -webkit-padding-start: 5px;
   padding-top: 3px;
   width: 100%;
 }
 
-html[dir=rtl] .section-header {
-  padding-right: 5px;
-  padding-left: 0;
-}
-
 .section-header-title {
   font-weight: bold;
 }
@@ -134,14 +125,10 @@ body.showDevMode .showInDevMode {
   border-bottom: 1px solid #edeff5;
   font-size: 89%;
   padding-bottom: 0.8em;
-  padding-left: 10px;
+  -webkit-padding-start: 10px;
   padding-top: 0.8em;
   width: 100%;
 }
-html[dir=rtl] .developer-mode {
-  padding-right: 10px;
-  padding-left: 0;
-}
 
 .extension_disabled td {
   background-color: #f0f0f0;
@@ -298,32 +285,22 @@ html[dir=rtl] #dialogHeader {
 }
 
 .dialogBrowseRow {
-  margin-left: -24px;
+  -webkit-margin-start: -24px;
   width: 100%;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
 }
 
-html[dir=rtl] .dialogBrowseRow {
-  margin-right: -24px;
-  /* margin-left: 0px; */
-}
-
 .dialogBrowseRow>* {
   margin: 2px
 }
 
 #dialogContentFooter {
   margin-bottom: 6px;
-  margin-left: -12px;
+  -webkit-margin-start: -12px;
   margin-top: 20px;
 }
 
-html[dir=rtl] #dialogContentFooter {
-  margin-right: -12px;
-  margin-left: 0px;
-}
-
 .inspectPopupNote {
   color: grey;
 }

chrome/browser/resources/history.html

@@ -1068,7 +1068,7 @@ function historyDeleted() {
   width: 50%;
 }
 #edit-button {
-  text-align: right;
+  text-align: end;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1116,13 +1116,11 @@ table.results {
   color:#888;
   float:left;
   min-width:56px;
-  margin-right:5px;
+  -webkit-margin-end:5px;
   padding-top:1px;
   white-space:nowrap;
 }
 html[dir='rtl'] .time {
-  margin-right:0px;
-  margin-left:5px;
   float:right;
 }
 .entry .title {
@@ -1138,15 +1136,11 @@ html[dir='rtl'] .time {
   background:url('shared/images/star_small.png');
   background-repeat:no-repeat;
   display:inline-block;
-  margin-left:12px;
-  margin-right:0;
+  -webkit-margin-start:12px;
+  -webkit-margin-end:0;
   width:11px;
   height:11px;
 }
-html[dir='rtl'] .title > .starred {
-  margin-left:0;
-  margin-right:12px;
-}
 .entry .title > a {
   -webkit-box-sizing: border-box;
   background-repeat:no-repeat;
@@ -1164,7 +1158,7 @@ html[dir='rtl'] .entry .title > a {
 }
 #results-pagination {
   padding-top:24px;
-  margin-left:18px;
+  -webkit-margin-start:18px;
 }
 
 </style>

chrome/browser/resources/imageburner.html

@@ -125,14 +125,12 @@ h1.title {
   left: 0;
   bottom: 0;
   right: 600px;
-  border-right: 1px solid #7289E2;
+  -webkit-border-end: 1px solid #7289E2;
 }
 
 html[dir='rtl'] .fullcontainer {
   left: 600px;
   right: 0;
-  border-right: auto;
-  border-left: 1px solid #7289E2;
 }
 
 progress {

chrome/browser/resources/plugins.html

@@ -20,16 +20,12 @@ div#header {
   min-height: 67px;
   overflow: hidden;
   padding-bottom: 20px;
-  padding-left: 0;
+  -webkit-padding-start: 0;
   padding-top: 20px;
   position: relative;
   -webkit-box-sizing: border-box;
 }
 
-html[dir=rtl] #header {
-  padding-right: 0;
-}
-
 #header h1 {
   background: url('../../app/theme/extensions_section.png') 0px 20px no-repeat;
   display: inline;
@@ -62,16 +58,11 @@ div.content {
   border-top: 1px solid #b5c7de;
   font-size: 99%;
   padding-bottom: 2px;
-  padding-left: 5px;
+  -webkit-padding-start: 5px;
   padding-top: 3px;
   width: 100%;
 }
 
-html[dir=rtl] .section-header {
-  padding-right: 5px;
-  padding-left: 0;
-}
-
 .section-header > table tr td:first-child {
   width: 100%;
 }
@@ -96,12 +87,7 @@ html[dir=rtl] .section-header {
 }
 
 #top {
-  padding-right: 5px;
-}
-
-html[dir=rtl] #top {
-  padding-left: 5px;
-  padding-right: 0;
+  -webkit-padding-end: 5px;
 }
 
 .showInTmiMode {
@@ -153,16 +139,11 @@ body.showTmiMode .showInTmiMode {
   border-bottom: 1px solid #edeff5;
   font-size: 89%;
   padding-bottom: 0.8em;
-  padding-left: 10px;
+  -webkit-padding-start: 10px;
   padding-top: 0.8em;
   width: 100%;
 }
 
-html[dir=rtl] .tmi-mode {
-  padding-right: 10px;
-  padding-left: 0;
-}
-
 .plugin-disabled > td {
   background-color: #f0f0f0;
   color: #a0a0a0;
@@ -197,12 +178,7 @@ html[dir=rtl] .tmi-mode {
 
 /* Indent the text related to each plug-in. */
 .plugin-text {
-  padding-left: 5px;
-}
-
-html[dir=rtl] .plugin-text {
-  padding-right: 5px;
-  padding-left: 0;
+  -webkit-padding-start: 5px;
 }
 
 .plugin-name {
@@ -237,12 +213,7 @@ html[dir=rtl] .plugin-text {
 
 /* Separate columns by 1em for the most part. */
 .plugin-details td+td {
-  padding-left: 1em;
-}
-
-html[dir=rtl] .plugin-details td+td {
-  padding-right: 1em;
-  padding-left: 0;
+  -webkit-padding-start: 1em;
 }
 
 /* Make the MIME Types tables smaller. */
@@ -258,26 +229,16 @@ html[dir=rtl] .plugin-details td+td {
 
 /* Separate the columns for tables used for horizontal listings only a bit. */
 .hlisting td+td {
-  padding-left: 0.4em;
-}
-
-html[dir=rtl] .hlisting td+td {
-  padding-right: 0.4em;
-  padding-left: 0;
+  -webkit-padding-start: 0.4em;
 }
 
 /* Match the indentation of .plugin-text. */
 .plugin-actions {
-  padding-left: 5px;
+  -webkit-padding-start: 5px;
   margin-top: 0.2em;
   margin-bottom: 0.2em;
 }
 
-html[dir=rtl] .plugin-actions {
-  padding-right: 5px;
-  padding-left: 0;
-}
-
 button {
   font-size: 104%;
 }