Bug 1627477 - Convert all relevant uses of left/right to logical properties in browser/extensions r=webcompat-reviewers,twisniewski

Differential Revision: https://phabricator.services.mozilla.com/D69725

--HG--
extra : moz-landing-system : lando

browser/extensions/formautofill/content/manageDialog.css

@@ -12,8 +12,7 @@ div {
 }
 
 button {
-  padding-right: 10px;
-  padding-left: 10px;
+  padding-inline: 10px;
 }
 
 fieldset {
@@ -61,8 +60,7 @@ option:nth-child(even) {
 }
 
 #remove {
-  margin-inline-start: 0;
-  margin-inline-end: auto;
+  margin-inline: 0 auto;
 }
 
 #edit {

browser/extensions/formautofill/skin/shared/autocomplete-item-shared.css

@@ -62,8 +62,7 @@ xul|richlistitem[originaltype="autofill-insecureWarning"] {
   margin: 0;
   border-bottom: 1px solid rgba(38,38,38,.15);
   padding: var(--item-padding-vertical) 0;
-  padding-inline-start: var(--item-padding-horizontal);
-  padding-inline-end: var(--item-padding-horizontal);
+  padding-inline: var(--item-padding-horizontal);
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -89,7 +88,7 @@ xul|richlistitem[originaltype="autofill-insecureWarning"] {
 }
 
 .autofill-item-box:not([ac-image=""]) > .profile-label-col::before {
-  margin-right: 5px;
+  margin-inline-end: 5px;
   float: inline-start;
   content: "";
   width: 16px;
@@ -175,8 +174,7 @@ xul|richlistitem[originaltype="autofill-insecureWarning"] {
 
 .autofill-insecure-item::before {
   display: block;
-  margin-inline-start: 4px;
-  margin-inline-end: 8px;
+  margin-inline: 4px 8px;
   content: "";
   width: 16px;
   height: 16px;

browser/extensions/formautofill/skin/shared/editAddress.css

@@ -10,15 +10,13 @@
 }
 
 dialog:not([subdialog]) .editAddressForm {
-  margin-inline-start: calc(var(--grid-column-row-gap) / -2);
-  margin-inline-end: calc(var(--grid-column-row-gap) / -2);
+  margin-inline: calc(var(--grid-column-row-gap) / -2);
 }
 
 .editAddressForm .container {
   /* !important is needed to override preferences.css's generic label rule. */
   margin-top: var(--grid-column-row-gap) !important;
-  margin-inline-start: calc(var(--grid-column-row-gap) / 2);
-  margin-inline-end: calc(var(--grid-column-row-gap) / 2);
+  margin-inline: calc(var(--grid-column-row-gap) / 2);
   flex-grow: 1;
 }
 
@@ -63,8 +61,7 @@ dialog:not([subdialog]) .editAddressForm {
   /* Remove the bottom margin from the name containers so that the outer
      #name-container provides the margin on the outside */
   margin-bottom: 0 !important;
-  margin-left: 0;
-  margin-right: 0;
+  margin-inline: 0;
 }
 
 /* The name fields are placed adjacent to each other.
@@ -87,8 +84,7 @@ dialog:not([subdialog]) .editAddressForm {
   border-radius: 0;
   /* This provides the inner separators between the fields and should never
    * change to the focused color. */
-  border-left-color: var(--in-content-box-border-color) !important;
-  border-right-color: var(--in-content-box-border-color) !important;
+  border-inline-color: var(--in-content-box-border-color) !important;
 }
 
 /* Since the name fields are adjacent, there isn't room for the -moz-ui-invalid

browser/extensions/webcompat/about-compat/aboutCompat.css

@@ -28,8 +28,7 @@
   .wide-button {
     display: block;
     min-height: 32px;
-    padding-left: 30px;
-    padding-right: 30px;
+    padding-inline: 30px;
   }
 
   .submitting {
@@ -69,12 +68,8 @@
     font-weight: lighter;
   }
 
-  html[dir="ltr"] th {
-    text-align: left;
-  }
-
-  html[dir="rtl"] th {
-    text-align: right;
+  th {
+    text-align: start;
   }
 }
 
@@ -152,12 +147,7 @@
   td {
     display: block;
     position: relative;
-  }
-  td:dir(ltr) {
-    padding-right: 6.5em;
-  }
-  td:dir(rtl) {
-    padding-left: 6.5em;
+    padding-inline-end: 6.5em;
   }
 
   td[colspan="4"] {
@@ -183,18 +173,13 @@
     position: absolute;
     top: 0;
     bottom: 0;
+    inset-inline-end: 0;
     width: 6em;
     border: 0;
-    border-left: 1px solid #d7d9db;
+    border-inline-start: 1px solid #d7d9db;
     -moz-appearance: none;
     color: #000;
   }
-  button:dir(ltr) {
-    right: 0;
-  }
-  button:dir(rtl) {
-    left: 0;
-  }
 
   button::-moz-focus-inner {
     border: 0;