[css-logical] Replace uses of webkit-prefixed logical properties with standard...

[css-logical] Replace uses of webkit-prefixed logical properties with standard ones in /chrome/common

Bug 850000 added standard logical properties and aliased prefixed ones
to them. The prefixed properties are still used in various places, but
the standard ones should be used instead. This patch replaces all the
uses in /chrome/common

Spec: https://drafts.csswg.org/css-logical/#box

BUG=862141

Change-Id: Ic8ec1308146f68a7c1bf82f850361adb3b4b63f8
Reviewed-on: https://chromium-review.googlesource.com/1150025Reviewed-by: Paul Irish <paulirish@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#577905}

chrome/common/extensions/docs/examples/api/fontSettings/css/chrome_shared.css

@@ -74,8 +74,8 @@ html[dir='rtl'] div.weakrtl input {
 }
 
 html[dir='rtl'] .favicon-cell.weakrtl {
-  -webkit-padding-end: 22px;
-  -webkit-padding-start: 0;
+  padding-inline-end: 22px;
+  padding-inline-start: 0;
 }
 
 /* weakrtl for selection drop downs needs to account for the fact that

chrome/common/extensions/docs/examples/api/fontSettings/css/overlay.css

@@ -94,7 +94,6 @@ html[dir='rtl'] .overlay .page > .close-button {
 }
 
 .overlay .page h1 {
-  -webkit-padding-end: 24px;
   -webkit-user-select: none;
   color: #333;
   /* 120% of the body's font-size of 84% is 16px. This will keep the relative
@@ -138,8 +137,8 @@ html[dir='rtl'] .overlay .page .action-area {
 }
 
 .overlay .page .button-strip > button {
-  -webkit-margin-start: 10px;
   display: block;
+  margin-inline-start: 10px;
 }
 
 /* On OSX 10.7, hidden scrollbars may prevent the user from realizing that the

chrome/common/extensions/docs/examples/api/fontSettings/css/uber_shared.css

@@ -3,8 +3,8 @@
  * found in the LICENSE file. */
 
 body.uber-frame {
-  -webkit-margin-start: 155px;
   color: rgb(48, 57, 66);
+  margin-inline-start: 155px;
 }
 
 html[dir='rtl'] body.uber-frame {
@@ -19,7 +19,7 @@ body.uber-frame #extension-settings.page,
 body.uber-frame #mainview-content .page,
 body.uber-frame .subpage-sheet-container .page,
 body.uber-frame > .page {
-  -webkit-margin-end: 24px;
+  margin-inline-end: 24px;
   min-width: 576px;
   padding-bottom: 20px;
   padding-top: 55px;
@@ -31,7 +31,7 @@ body.uber-frame header {
                                             rgba(255, 255, 255, 0.92));
   left: 155px;
   /* <section>s in options currently amount to 638px total, broken up into
-   * 600px max-width + 18px -webkit-padding-start + 20px -webkit-margin-end
+   * 600px max-width + 18px padding-inline-start + 20px margin-inline-end
    * so we mirror this value here so the headers match width and horizontal
    * alignment when scrolling sideways. */
   max-width: 738px;
@@ -78,11 +78,11 @@ body.uber-frame header > h1 {
 /* Create a border under the h1 (but before anything that gets appended
  * to the end of the header). */
 body.uber-frame header > h1::after {
-  -webkit-margin-end: 20px;
   background-color: #eee;
   content: ' ';
   display: block;
   height: 1px;
+  margin-inline-end: 20px;
   position: relative;
   top: 13px;
 }
@@ -99,10 +99,10 @@ body.uber-frame footer {
 /* Sections are used in options pages, help page and history page. This defines
  * the section metrics to match the header metrics above. */
 body.uber-frame section {
-  -webkit-padding-start: 18px;
   margin-bottom: 24px;
   margin-top: 8px;
   max-width: 600px;
+  padding-inline-start: 18px;
 }
 
 body.uber-frame section:last-of-type {
@@ -110,7 +110,7 @@ body.uber-frame section:last-of-type {
 }
 
 body.uber-frame section > h3 {
-  -webkit-margin-start: -18px;
+  margin-inline-start: -18px;
 }
 
 body.uber-frame section > div:only-of-type {

chrome/common/extensions/docs/examples/api/fontSettings/css/widgets.css

@@ -46,19 +46,19 @@ select {
 :-webkit-any(button,
              input[type='button'],
              input[type='submit']):not(.custom-appearance):not(.link-button) {
-  -webkit-padding-end: 10px;
-  -webkit-padding-start: 10px;
+  padding-inline-end: 10px;
+  padding-inline-start: 10px;
 }
 
 select {
   -webkit-appearance: none;
-  -webkit-padding-end: 20px;
-  -webkit-padding-start: 6px;
   /* OVERRIDE */
   background-image: url('../images/select.png'),
       -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
   background-position: right center;
   background-repeat: no-repeat;
+  padding-inline-end: 20px;
+  padding-inline-start: 6px;
 }
 
 html[dir='rtl'] select {
@@ -292,9 +292,9 @@ input:disabled:-webkit-any([type='password'],
 }
 
 :-webkit-any(.checkbox, .radio) label input ~ span {
-  -webkit-margin-start: 0.6em;
   /* Make sure long spans wrap at the same horizontal position they start. */
   display: block;
+  margin-inline-start: 0.6em;
 }
 
 :-webkit-any(.checkbox, .radio) label:hover {

chrome/common/extensions/docs/examples/api/fontSettings/options.html

@@ -16,8 +16,8 @@
 <link rel="stylesheet" href="slider.css">
 <style>
 body.uber-frame {
-  -webkit-margin-start: 18px;
-  -webkit-margin-end: 30px;
+  margin-inline-start: 18px;
+  margin-inline-end: 30px;
 }
 
 body.uber-frame section {
@@ -29,8 +29,8 @@ body.uber-frame section:last-of-type {
 }
 
 body.uber-frame header {
-  -webkit-padding-start: 18px;
   left: 0;
+  padding-inline-start: 18px;
   right: 0;
 }
 
@@ -65,7 +65,7 @@ section {
 }
 
 .font-settings-div {
-  -webkit-margin-end: 5px;
+  margin-inline-end: 5px;
   width: 180px;
 }
 
@@ -128,13 +128,13 @@ select {
 }
 
 #footer > button {
-  -webkit-padding-start: 9px;
-  -webkit-padding-end: 9px;
+  padding-inline-start: 9px;
+  padding-inline-end: 9px;
 }
 
 #footer > #apply-settings {
-  -webkit-padding-start: 17px;
-  -webkit-padding-end: 17px;
+  padding-inline-start: 17px;
+  padding-inline-end: 17px;
 }
 
 #apply-settings:enabled {

chrome/common/extensions/docs/examples/extensions/plugin_settings/css/plugin_list.css

-/*
-Copyright (c) 2011 The Chromium Authors. All rights reserved.
-Use of this source code is governed by a BSD-style license that can be
-found in the LICENSE file.
-*/
+/* Copyright (c) 2011 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
 
 body {
   font-family: Helvetica, sans-serif;
@@ -38,7 +36,7 @@ body {
 
 .plugin-description {
   display: inline-block;
-  -webkit-padding-start: 7px;
+  padding-inline-start: 7px;
   width: auto;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -76,8 +74,8 @@ li.plugin-show-details {
 }
 
 .column-headers {
-  -webkit-margin-start: 17px;
   display: -webkit-box;
+  margin-inline-start: 17px;
 }
 
 .column-headers > div {

chrome/common/extensions/docs/examples/extensions/plugin_settings/css/rule_list.css

-/*
-Copyright (c) 2011 The Chromium Authors. All rights reserved.
-Use of this source code is governed by a BSD-style license that can be
-found in the LICENSE file.
-*/
+/* Copyright (c) 2011 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
 
 .rule-pattern {
   -webkit-box-flex: 1;
-  -webkit-margin-end: 10px;
-  -webkit-margin-start: 14px;
+  margin-inline-end: 10px;
+  margin-inline-start: 14px;
 }
 
 .rule-behavior {

chrome/common/extensions/docs/examples/extensions/plugin_settings/domui/css/chrome_shared.css

+/* Copyright (c) 2011 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
 /* Styles common to WebUI pages that share the options pages style */
 body {
   cursor: default;
@@ -13,7 +17,6 @@ a:active {
 }
 
 #navbar-content-title {
-  -webkit-padding-end: 24px;
   -webkit-user-select: none;
   color: #53637d;
   cursor: pointer;
@@ -21,6 +24,7 @@ a:active {
   font-weight: normal;
   margin: 0;
   padding-bottom: 14px;
+  padding-inline-end: 24px;
   padding-top: 13px;
   text-align: end;
   text-shadow: white 0 1px 2px;
@@ -40,9 +44,9 @@ a:active {
 }
 
 #navbar-container {
-  -webkit-border-end: 1px solid #c6c9ce;
   background: -webkit-linear-gradient(rgba(234, 238, 243, 0.2), #eaeef3),
               -webkit-linear-gradient(left, #eaeef3, #eaeef3 97%, #d3d7db);
+  border-inline-end: 1px solid #c6c9ce;
   position: fixed;
   bottom: 0;
   /* We set both left and right for the sake of RTL. */
@@ -78,9 +82,9 @@ html.hide-menu #navbar-container {
   font-size: 105%;
   outline: none;
   padding: 7px 0;
+  padding-inline-end: 24px;
   text-align: end;
   text-shadow: white 0 1px 1px;
-  -webkit-padding-end: 24px;
 }
 
 .navbar-item:focus {
@@ -99,10 +103,10 @@ html.hide-menu #navbar-container {
 
 #mainview {
   -webkit-box-align: stretch;
-  -webkit-padding-start: 216px;
   margin: 0;
   position: absolute;
   left: 0;
+  padding-inline-start: 216px;
   right: 0;
   top: 0;
   bottom: 0;
@@ -110,7 +114,7 @@ html.hide-menu #navbar-container {
 }
 
 html.hide-menu #mainview {
-  -webkit-padding-start: 0;
+  padding-inline-start: 0;
 }
 
 #mainview-content {
@@ -216,8 +220,8 @@ html[dir='rtl'] div.weakrtl input {
 }
 
 html[dir='rtl'] .favicon-cell.weakrtl {
-  -webkit-padding-end: 22px;
-  -webkit-padding-start: 0;
+  padding-inline-end: 22px;
+  padding-inline-start: 0;
 }
 
 /* weakrtl for selection drop downs needs to account for the fact that
@@ -242,7 +246,6 @@ html[dir='rtl'] .weakrtl input::-webkit-input-placeholder {
 }
 
 .page h1 {
-  -webkit-padding-end: 24px;
   -webkit-user-select: none;
   border-bottom: 1px solid #eeeeee;
   color: #53637d;
@@ -250,6 +253,7 @@ html[dir='rtl'] .weakrtl input::-webkit-input-placeholder {
   font-weight: normal;
   margin: 0;
   padding-bottom: 4px;
+  padding-inline-end: 24px;
   padding-top: 13px;
   text-shadow: white 0 1px 2px;
 }

chrome/common/extensions/docs/examples/extensions/plugin_settings/domui/css/select.css

@@ -9,8 +9,6 @@ select {
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  -webkit-padding-end: 20px;
-  -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url("../images/select.png"),
                     -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
@@ -22,6 +20,8 @@ select {
   margin: 0;
   overflow: hidden;
   padding-top: 2px;
+  padding-inline-end: 20px;
+  padding-inline-start: 2px;
   padding-bottom: 2px;
   text-overflow: ellipsis;
   white-space: nowrap;

chrome/common/extensions/docs/examples/extensions/plugin_settings/options/css/list.css

@@ -62,8 +62,8 @@ list .deletable-item {
 list .deletable-item > :first-child {
   -webkit-box-align: center;
   -webkit-box-flex: 1;
-  -webkit-padding-end: 5px;
   display: -webkit-box;
+  padding-inline-end: 5px;
 }
 
 list .close-button {