Bug 1627036 - Convert all relevant uses of left/right to logical properties in the remaining files in toolkit/ r=Gijs

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

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

toolkit/components/aboutcheckerboard/content/aboutCheckerboard.css

@@ -3,49 +3,48 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 table.listing {
-    width: 100%;
+  width: 100%;
 }
 
 table th, table td {
-    padding: 5px;
-    border: inset 2px black;
-    margin: 0px;
-    width: 50%;
-    vertical-align: top;
+  padding: 5px;
+  border: inset 2px black;
+  margin: 0;
+  width: 50%;
+  vertical-align: top;
 }
 
 hr {
-    clear: both;
-    margin: 10px;
+  clear: both;
+  margin: 10px;
 }
 
 iframe {
-    width: 100%;
-    height: 900px;
+  width: 100%;
+  height: 900px;
 }
 
 #player, #raw {
-    width: 800px;
-    margin-left: auto;
-    margin-right: auto;
+  width: 800px;
+  margin-inline: auto;
 }
 
 #controls {
-    text-align: center;
+  text-align: center;
 }
 
 #canvas {
-    border: solid 1px black;
+  border: solid 1px black;
 }
 
 #active {
-    width: 100%;
-    border: solid 1px black;
-    margin-top: 0;
+  width: 100%;
+  border: solid 1px black;
+  margin-top: 0;
 }
 
 #trace {
-    width: 100%;
+  width: 100%;
 }
 
 #enabled {

toolkit/components/prompts/content/tabprompts.css

@@ -47,10 +47,10 @@ tabmodalprompt label[value=""] {
   align-self: center;
   box-sizing: border-box;
   height: 500px;
-  /* By setting `left` & `right` to `auto` with `position: absolute`, the
+  /* By setting `inset-inline` to `auto` with `position: absolute`, the
    * horizontal position from the `align-self: center` is used.
    * See https://developer.mozilla.org/en-US/docs/Web/CSS/right#Values. */
-  left: auto;
+  inset-inline: auto;
   /* Shrink the height for small browser window sizes so the dialog footer
      remains visible.
      Ideally this would be 100vh minus the #navigator-toolbox height. */
@@ -60,7 +60,6 @@ tabmodalprompt label[value=""] {
    * (with content showing beside) instead of a full-width overlay. */
   max-width: calc(100vw - 16px - 16px);
   position: absolute;
-  right: auto;
   /* Vertically overlap the browser chrome. */
   top: -3px;
   width: 600px;

toolkit/content/plugins.css

@@ -15,8 +15,7 @@ body {
 div#outside {
  text-align: justify;
  width: 90%;
- margin-left: 5%;
- margin-right: 5%;
+ margin-inline: 5%;
 }
 
 #plugs {
@@ -31,15 +30,14 @@ div#outside {
 }
 
 .plugname {
-  margin-top: 2em;
-  margin-bottom: 1em;
+  margin-block: 2em 1em;
   font-size: large;
   text-align: start;
   font-weight: bold;
 }
 
 dl {
-  margin: 0px 0px 3px 0px;
+  margin: 0 0 3px;
 }
 
 table {
@@ -49,7 +47,7 @@ table {
   text-align: start;
   width: 100%;
   border: 1px solid ThreeDShadow;
-  border-spacing: 0px;
+  border-spacing: 0;
 }
 
 th, td {

toolkit/content/widgets/datetimebox.css

@@ -41,7 +41,7 @@
 }
 
 .datetime-edit-field[disabled="true"],
-.datetime-edit-field[readonly="true"]  {
+.datetime-edit-field[readonly="true"] {
   user-select: none;
 }
 
@@ -52,8 +52,7 @@
   border: none;
   align-self: center;
   flex: none;
-  padding-left: 2px;
-  padding-right: 2px;
+  padding-inline: 2px;
 }
 
 svg|svg.datetime-reset-button-svg {

toolkit/mozapps/extensions/content/panel-item.css

@@ -39,7 +39,7 @@ button {
 }
 
 button:dir(rtl) {
-  background-position: right 16px center;
+  background-position-x: right 16px;
 }
 
 :host([badged]) button::after {