Bug 1627477 - Convert all relevant uses of left/right to logical properties in browser/components r=Gijs,dao

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

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

browser/components/aboutconfig/content/aboutconfig.css

@@ -19,8 +19,7 @@
 .config-background {
   background: url("chrome://browser/content/aboutconfig/background.svg") no-repeat;
   height: 182px;
-  margin-block: 32px;
-  margin-inline: auto;
+  margin: 32px auto;
   width: 235px;
 }
 
@@ -235,8 +234,7 @@ td.cell-value > form > input[type="number"] {
   position: absolute;
   top: 0;
   /* Make it wider by the border width so the border-inline is hidden. */
-  left: calc(var(--prefs-table-border-width) * -1);
-  right: calc(var(--prefs-table-border-width) * -1);
+  inset-inline: calc(var(--prefs-table-border-width) * -1);
   height: 12px;
   background-color: var(--in-content-page-background);
   /* This is visually the top border on the add row. */

browser/components/aboutlogins/content/components/confirmation-dialog.css

@@ -5,10 +5,7 @@
  .overlay {
   position: fixed;
   z-index: 1;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   /* TODO: this color is used in the about:preferences overlay, but
            why isn't it declared as a variable? */
   background-color: rgba(0,0,0,0.5);

browser/components/aboutlogins/content/components/login-item.css

@@ -103,8 +103,7 @@ input[type="url"][readOnly] {
 }
 
 .title {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
   flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -224,8 +223,7 @@ input[type="url"][readOnly]:hover:active {
   font-size: smaller;
   font-weight: 300;
   color: var(--in-content-deemphasized-text);
-  margin-top: 0;
-  margin-bottom: 8px;
+  margin-block: 0 8px;
 }
 
 .meta-info:first-of-type::before {
@@ -306,8 +304,7 @@ input[name="password"] {
   font-weight: 300;
   line-height: 1.4;
   padding-block: 12px;
-  padding-inline-start: 64px;
-  padding-inline-end: 32px;
+  padding-inline: 64px 32px;
   margin-block-end: 40px;
   position: relative;
 }
@@ -326,8 +323,7 @@ input[name="password"] {
   font-size: 22px;
   font-weight: normal;
   line-height: 1em;
-  margin-top: 0;
-  margin-bottom: 12px;
+  margin-block: 0 12px;
 }
 
 .alert-date {
@@ -375,8 +371,7 @@ input[name="password"] {
   border: 1px solid transparent;
   padding-block: 6px;
   display: inline-block;
-  padding-inline-start: 32px;
-  padding-inline-end: 16px;
+  padding-inline: 32px 16px;
   background-image: url("chrome://global/skin/icons/warning.svg");
   background-repeat: no-repeat;
   background-position: left 10px center;

browser/components/aboutlogins/content/components/menu-button.css

@@ -14,8 +14,7 @@
   fill: currentColor;
   width: 30px;
   min-width: 30px;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
+  margin-inline: 0;
 }
 
 .menu {
@@ -54,7 +53,7 @@
 }
 
 .menuitem-button:dir(rtl) {
-  background-position: right 8px center;
+  background-position-x: right 8px;
 }
 
 .menuitem-separator {

browser/components/extensions/extension.css

@@ -394,8 +394,7 @@ textarea.browser-style:invalid:not(:focus) {
 
 .panel-list-item:not(.disabled):hover {
   background-color: rgba(0, 0, 0, 0.06);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-block: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .panel-list-item:not(.disabled):hover:active {