Bug 1627477 - Convert all relevant uses of left/right to logical properties in browser/themes/shared r=dao

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

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

browser/themes/shared/UITour.inc.css

@@ -55,8 +55,7 @@
 }
 
 #UITourTooltipDescription {
-  margin-inline-start: 0;
+  margin-inline: 0;
-  margin-inline-end: 0;
   font-size: 1.15rem;
   line-height: 1.8rem;
   margin-bottom: 0; /* Override global.css */
@@ -135,16 +134,14 @@
   border: none;
   box-shadow: none;
   color: var(--panel-disabled-color);
-  padding-left: 10px;
+  padding-inline: 10px;
-  padding-right: 10px;
 }
 
 /* The primary button gets the same color as the customize button. */
 #UITourTooltipButtons > button.button-primary {
   background-color: rgb(116,191,67);
   color: white;
-  padding-left: 30px;
+  padding-inline: 30px;
-  padding-right: 30px;
 }
 
 #UITourTooltipButtons > button.button-primary:not(:active):hover {

browser/themes/shared/aboutRestartRequired.css

@@ -12,7 +12,7 @@
 }
 
 #errorPageContainer:dir(rtl) {
-  background-position: right center;
+  background-position-x: right;
 }
 
 #header {

browser/themes/shared/aboutSessionRestore.css

@@ -13,18 +13,14 @@
   min-height: 300px;
 }
 
+.description-wrapper:dir(rtl) {
+  background-position-x: right;
+}
+
 .title {
   background-image: none;
 }
 
-.description-wrapper:dir(rtl) {
-  background-position: right center;
-}
-
-#tabsToggle:dir(rtl):after {
-  background-position: left center;
-}
-
 #tabsToggle {
   cursor: pointer;
   /* Override button background-color and color from common.css */
@@ -45,13 +41,17 @@
   width: 100%;
   height: 100%;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   background-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
   background-repeat: no-repeat;
   background-size: 20px;
   background-position: right center;
 }
 
+#tabsToggle:dir(rtl):after {
+  background-position-x: left;
+}
+
 #tabsToggle:not(.show-tabs):after {
   transform: scaleY(-1);
 }
@@ -71,7 +71,7 @@
 
 treechildren::-moz-tree-image(icon),
 treechildren::-moz-tree-image(noicon) {
-  padding-right: 2px;
+  padding-inline-end: 2px;
   margin: 0 2px;
   width: 16px;
   height: 16px;

browser/themes/shared/aboutWelcomeBack.css

@@ -19,7 +19,7 @@
 
 treechildren::-moz-tree-image(icon),
 treechildren::-moz-tree-image(noicon) {
-  padding-right: 2px;
+  padding-inline-end: 2px;
   margin: 0 2px;
   width: 16px;
   height: 16px;

browser/themes/shared/autocomplete.inc.css

@@ -10,12 +10,11 @@
   min-height: 20px;
   border: 0;
   border-radius: 0;
-  padding: 0px 1px 0px 1px;
+  padding: 0 1px;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
-  margin-inline-start: 4px;
+  margin-inline: 4px 0;
-  margin-inline-end: 0;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
@@ -49,8 +48,7 @@
 
 #PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .ac-site-icon {
   display: block;
-  margin-inline-start: auto;
+  margin-inline: auto 4px;
-  margin-inline-end: 4px;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper {
@@ -126,8 +124,7 @@
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
   background-color: var(--arrowpanel-dimmed);
   border-bottom: 1px solid var(--panel-separator-color);
-  padding-bottom: 4px;
+  padding-block: 4px;
-  padding-top: 4px;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {

browser/themes/shared/blockedSite.css

@@ -44,11 +44,11 @@
 }
 
 .error-description > p:first-child {
-  padding: 3.5em 3.5em 1em 3.5em;
+  padding: 3.5em 3.5em 1em;
 }
 
 .error-description > p:last-child {
-  padding: 0 3.5em 3.5em 3.5em;
+  padding: 0 3.5em 3.5em;
 }
 
 .error-description #ignore_warning_link,

browser/themes/shared/browser.inc.css

@@ -101,8 +101,7 @@
 menupopup::part(drop-indicator-bar) {
   position: relative;
   /* these two margins must together compensate the indicator's height */
-  margin-top: -1px;
+  margin-block: -1px;
-  margin-bottom: -1px;
 }
 
 menupopup::part(drop-indicator) {
@@ -154,8 +153,7 @@ menupopup::part(drop-indicator) {
   background-position: center;
   width: 24px;
   height: 24px;
-  margin-left: 7px;
+  margin-inline: 7px;
-  margin-right: 7px;
   position: relative;
   /* Need to ensure this gets positioned on top of the position:relative #navigator-toolbox
    * in case the dark/light themes give that item a background. */
@@ -167,8 +165,7 @@ menupopup::part(drop-indicator) {
   -moz-user-focus: normal;
   /* Clear default button styling */
   -moz-appearance: none;
-  margin-top: unset;
+  margin-block: unset;
-  margin-bottom: unset;
   min-width: unset;
   color: unset;
   text-shadow: unset;
@@ -200,8 +197,7 @@ menupopup::part(drop-indicator) {
 
 #DateTimePickerPanel[side="top"],
 #DateTimePickerPanel[side="bottom"] {
-  margin-left: 0;
+  margin-inline: 0;
-  margin-right: 0;
 }
 
 #widget-overflow .webextension-popup-browser {
@@ -290,8 +286,7 @@ menupopup::part(drop-indicator) {
 #contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] description {
   font-weight: 400;
   margin: unset;
-  margin-inline-end: 12px;
+  margin-inline: 12px;
-  margin-inline-start: 12px;
   transform: translateY(50%);
 }
 
@@ -301,14 +296,10 @@ menupopup::part(drop-indicator) {
 }
 
 #contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button-container {
-  float: right;
+  float: inline-end;
   background-color: transparent;
 }
 
-#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button-container:-moz-locale-dir(rtl) {
-  float: left;
-}
-
 #contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button.popup-notification-primary-button {
   background-color: rgba(216, 216, 216, 0.2);
   border: none;
@@ -322,11 +313,10 @@ menupopup::part(drop-indicator) {
   -moz-context-properties: fill;
   fill: currentColor;
   transform: scaleX(-1) translateY(2px);
-  float: right;
+  float: inline-end;
 }
 
 #contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"]:-moz-locale-dir(rtl) .popup-notification-button.popup-notification-primary-button:after {
-  float: left;
   transform: scaleX(1) translateY(2px);
 }
 
@@ -445,8 +435,7 @@ menupopup::part(drop-indicator) {
 #cfr-notification-footer-addon-info {
   align-items: center;
   display: flex;
-  margin-top: 10px;
+  margin-block: 10px 6px;
-  margin-bottom: 6px;
 }
 
 #cfr-notification-footer-filled-stars,

browser/themes/shared/controlcenter/panel.inc.css

@@ -126,8 +126,7 @@
 }
 
 .identity-popup-security-connection > description {
-  margin-top: 0;
+  margin-block: 0;
-  margin-bottom: 0;
 }
 
 #identity-popup-permissions-header,
@@ -135,8 +134,7 @@
 #identity-popup-security-description {
   /* icon indent + 16px icon width + 6px description margin
      (total of 12px margin with the native 6px description margin) */
-  padding-inline-start: calc(2em + 22px);
+  padding-inline: calc(2em + 22px) 1em;
-  padding-inline-end: 1em;
 }
 
 #identity-popup-security-description > description {
@@ -144,14 +142,12 @@
 }
 
 #identity-popup-permissions-content {
-  padding-inline-start: 2em;
+  padding-inline: 2em 1em;
-  padding-inline-end: 1em;
 }
 
 .identity-popup-security-content,
 #identity-popup-permissions-content {
-  padding-top: 1em;
+  padding-block: 1em;
-  padding-bottom: 1em;
 }
 
 #identity-popup-permissions-header {
@@ -177,8 +173,7 @@
   background-size: 24px auto;
   -moz-context-properties: fill;
   padding: 0.5em 0 1em;
-  padding-inline-start: calc(2em + 24px);
+  padding-inline: calc(2em + 24px) 1em;
-  padding-inline-end: 1em;
 }
 
 #protections-popup-content:-moz-locale-dir(rtl) {
@@ -417,8 +412,7 @@
 #identity-popup-securityView-body {
   /* icon indent + 16px icon width + 6px description margin
     (total of 12px margin with the native 6px description margin) */
-  margin-inline-start: calc(2em + 22px);
+  margin-inline: calc(2em + 22px) 1em;
-  margin-inline-end: 1em;
   padding-inline-end: 1em;
   padding-top: 0.5em;
 }
@@ -435,7 +429,7 @@
 description#identity-popup-content-owner-label,
 description#identity-popup-content-owner,
 description#identity-popup-content-verifier,
-#identity-popup-securityView-body > button  {
+#identity-popup-securityView-body > button {
   margin-top: 0.5em;
 }
 
@@ -542,8 +536,7 @@ description#identity-popup-content-verifier,
 
 #protections-popup-cookiesView .protections-popup-empty-label {
   margin-inline-start: 24px;
-  margin-top: 2px;
+  margin-block: 2px 4px;
-  margin-bottom: 4px;
 }
 
 .protections-popup-cookiesView-list-header {
@@ -570,17 +563,13 @@ description#identity-popup-content-verifier,
 .protections-popup-list-host-label {
   -moz-box-flex: 1;
   direction: ltr;
-}
+  text-align: match-parent;
-
-.protections-popup-list-host-label:-moz-locale-dir(rtl) {
-  text-align: right;
 }
 
 .protections-popup-list-state-label {
   -moz-box-flex: 1;
   text-align: end;
-  margin-inline-start: 5px;
+  margin-inline: 5px 2px;
-  margin-inline-end: 2px;
 }
 
 .protections-popup-socialblockView-icon,
@@ -672,7 +661,7 @@ description#identity-popup-content-verifier,
 
 #protections-popup-content {
   padding: 0;
-  margin: 0 0 var(--vertical-section-padding) 0;
+  margin: 0 0 var(--vertical-section-padding);
 }
 
 #protections-popup-blocking-section-header,
@@ -758,14 +747,14 @@ description#identity-popup-content-verifier,
 .tracking-protection-button {
   list-style-image: url(chrome://browser/skin/tracking-protection.svg);
   -moz-appearance: none;
-  margin: 1em 0 0;
+  margin-block: 1em 0;
+  margin-inline: 0 8px;
   display: none;
   height: 32px;
   background-color: var(--arrowpanel-dimmed);
   /* !important to override -moz-mac-buttonactivetext from applying on :active on mac
    and -moz-buttonhovertext from applying on :hover on linux. */
   color: inherit !important;
-  margin-inline-end: 8px;
 }
 
 .tracking-protection-button:hover {
@@ -861,6 +850,7 @@ description#identity-popup-content-verifier,
 .identity-popup-permission-remove-button {
   -moz-appearance: none;
   margin: 0;
+  margin-inline-start: 2px;
   border-width: 0;
   border-radius: 50%;
   min-width: 0;
@@ -869,7 +859,6 @@ description#identity-popup-content-verifier,
   /* !important overrides :hover and :active colors from button.css */
   color: inherit !important;
   opacity: 0.6;
-  margin-inline-start: 2px;
 }
 
 .identity-popup-permission-remove-button > .button-box {
@@ -957,7 +946,7 @@ description#identity-popup-content-verifier,
 }
 
 #protections-popup-siteNotWorkingView-body {
-    padding: var(--vertical-section-padding) var(--horizontal-padding);
+  padding: var(--vertical-section-padding) var(--horizontal-padding);
 }
 
 #protections-popup-siteNotWorkingView-body,
@@ -989,8 +978,7 @@ description#identity-popup-content-verifier,
   border-radius: 10px;
   background-color: var(--protections-popup-switch-off-background);
   border: 1px solid hsla(210,4%,10%,.14);
-  margin-top: 4px;
+  margin-block: 4px;
-  margin-bottom: 4px;
   margin-inline-start: 1px;
   padding: 2px;
   padding-inline-end: 0;

browser/themes/shared/customizableui/customizeMode.inc.css

@@ -96,8 +96,6 @@
 .customizationmode-button > .box-inherit {
   border-width: 0;
   padding: 3px 0;
-  padding-inline-start: 0;
-  padding-inline-end: 0;
 }
 
 /* We use a smaller padding to ensure images don't have padding.
@@ -225,14 +223,11 @@ toolbarpaletteitem[mousedown] > toolbaritem.toolbaritem-combined-buttons {
 
 /* Override the toolkit styling for items being dragged over. */
 toolbarpaletteitem[place="toolbar"] {
-  border-left-width: 0;
+  border-inline-width: 0;
-  border-right-width: 0;
+  margin-inline: 0;
-  margin-right: 0;
-  margin-left: 0;
 }
 #widget-overflow-fixed-list > toolbarpaletteitem[place="menu-panel"] {
-  border-top: 0px solid transparent;
+  border-block: 0 solid transparent;
-  border-bottom: 0px solid transparent;
 }
 
 #customization-palette:not([hidden]) {
@@ -282,8 +277,7 @@ toolbarpaletteitem[place=toolbar] > toolbarspring {
   outline: 1px solid;
   outline-offset: -2px;
   opacity: .6;
-  margin-top: 5px;
+  margin-block: 5px;
-  margin-bottom: 5px;
 }
 
 toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox {
@@ -348,10 +342,8 @@ toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox {
   -moz-appearance: none;
   border: 1px solid transparent;
   margin: 0 -5px 5px;
-  padding-top: 0;
+  padding-block: 0;
-  padding-inline-end: 5px;
+  padding-inline: 0 5px;
-  padding-bottom: 0;
-  padding-inline-start: 0;
 }
 
 .customization-uidensity-menuitem {
@@ -402,8 +394,7 @@ toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox {
 #customization-lwtheme-menu-header,
 #customization-lwtheme-menu-recommended,
 #customization-lwtheme-menu-footer {
-  margin-right: -10px;
+  margin-inline: -10px;
-  margin-left: -10px;
 }
 
 #customization-lwtheme-menu-header {
@@ -426,8 +417,7 @@ toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox {
   color: inherit;
   border-style: none;
   padding: 10px;
-  margin-left: 0;
+  margin-inline: 0;
-  margin-right: 0;
 }
 
 .customization-lwtheme-menu-footeritem:hover {
@@ -448,7 +438,6 @@ toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox {
   transform: scaleX(-1);
 }
 
-
 #customization-panelWrapper > .panel-arrowcontent {
   color: var(--arrowpanel-color);
   background: var(--arrowpanel-background);
@@ -606,8 +595,7 @@ toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox {
 #customization-pong-arena {
   width: 300px;
   height: 300px;
-  border-left: 1px solid currentColor;
+  border-inline: 1px solid currentColor;
-  border-right: 1px solid currentColor;
   margin: 16px auto 0;
   box-sizing: content-box;
 }

browser/themes/shared/customizableui/panelUI.inc.css

@@ -191,7 +191,7 @@ panelview {
   margin-top: -7px;
 }
 
-#PersonalToolbar #BMB_bookmarksPopup  {
+#PersonalToolbar #BMB_bookmarksPopup {
   margin-top: -2px
 }
 
@@ -239,7 +239,7 @@ panelview {
 
 /* Remove padding on xul:arrowscrollbox to avoid extra padding on footer */
 #BMB_bookmarksPopup menupopup::part(arrowscrollbox) {
-  padding-bottom: 0px;
+  padding-bottom: 0;
 }
 
 #BMB_bookmarksPopup menupopup[nofooterpopup=true]::part(arrowscrollbox) {
@@ -281,7 +281,7 @@ panelview {
 }
 
 /* Don't show the checkmark if there is a description */
-#confirmation-hint.with-description #confirmation-hint-checkmark-animation-container  {
+#confirmation-hint.with-description #confirmation-hint-checkmark-animation-container {
   display: none;
 }
 
@@ -325,8 +325,7 @@ panelview {
 }
 
 #confirmation-hint-message {
-  margin-inline-start: 7px;
+  margin-inline: 7px 0;
-  margin-inline-end: 0;
 }
 
 #confirmation-hint.with-description #confirmation-hint-message {
@@ -451,8 +450,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
   content: "";
   width: 16px;
   height: 16px;
-  margin-inline-start: 10px;
+  margin-inline: 10px 12px;
-  margin-inline-end: 12px;
   display: -moz-box;
 }
 
@@ -512,8 +510,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
 }
 
 .panel-banner-item {
-  border-top: 1px solid var(--panel-separator-color);
+  border-block: 1px solid var(--panel-separator-color);
-  border-bottom: 1px solid var(--panel-separator-color);
   padding-inline-start: 12px;
 }
 
@@ -608,8 +605,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
 :root[fxastatus="unverified"] .fxa-menu-header {
   background-color: @appmenuWarningBackgroundColor@;
   color: @appmenuWarningColor@;
-  border-top: 1px solid @appmenuWarningBorderColor@;
+  border-block: 1px solid @appmenuWarningBorderColor@;
-  border-bottom: 1px solid @appmenuWarningBorderColor@;
 }
 
 #appMenu-fxa-status[fxastatus="login-failed"]:hover,
@@ -754,8 +750,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
 }
 
 .fxa-menu-header {
-  padding-top: 8px;
+  padding-block: 8px 4px;
-  padding-bottom: 4px;
   /* Important is here to ensure that the proper header height is fixed
      regardless if opened from browser icon or under app menu.
   */
@@ -864,8 +859,7 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
   /* If you change the margin or padding below, the min-height of the synced tabs
      panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
      etc) may need adjusting (see bug 1248506) */
-  margin-top: 15px;
+  margin-block: 15px;
-  margin-bottom: 15px;
   padding: 8px;
   text-shadow: none;
   min-width: 200px;
@@ -893,11 +887,11 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
 .PanelUI-remotetabs-notabsforclient-label {
   color: var(--panel-disabled-color);
   /* This margin is to line this label up with the labels in toolbarbuttons. */
-  margin-left: 28px;
+  margin-inline-start: 28px;
 }
 
 #PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label {
-  margin-left: 32px;
+  margin-inline-start: 32px;
 }
 
 .fxaSyncIllustration,
@@ -1066,8 +1060,7 @@ panelview .toolbarbutton-1,
 .subviewbutton > .menu-accel-container > .menu-iconic-accel,
 .subviewbutton > .menu-iconic-left,
 .subviewbutton > .menu-iconic-text {
-  padding-bottom: 0;
+  padding-block: 0;
-  padding-top: 0;
 }
 
 .addon-banner-item > .toolbarbutton-text,
@@ -1102,8 +1095,8 @@ panelview .toolbarbutton-1,
 
 .subviewbutton.panel-subview-footer > .menu-text {
   -moz-appearance: none;
-  padding-inline-end: 6px;
   padding-inline-start: 0 !important; /* to override menu.css on Windows */
+  padding-inline-end: 6px;
   -moz-box-flex: 0;
 }
 
@@ -1220,7 +1213,7 @@ panelview .toolbarbutton-1,
 panelmultiview .toolbaritem-combined-buttons > label {
   -moz-box-flex: 1;
   margin: 0;
-  padding: 4px 0px;
+  padding: 4px 0;
 }
 
 panelmultiview .toolbaritem-combined-buttons > spacer.before-label {
@@ -1360,24 +1353,20 @@ menuitem.panel-subview-footer@menuStateActive@,
 }
 
 .PanelUI-subView menuseparator {
-  margin-inline-start: -5px;
+  margin-inline: -5px -4px;
-  margin-inline-end: -4px;
 }
 
 .PanelUI-subView toolbarseparator {
-  margin-inline-start: 0;
+  margin-inline: 0;
-  margin-inline-end: 0;
 }
 
 .PanelUI-subView menuseparator.small-separator,
 .PanelUI-subView toolbarseparator.small-separator {
-  margin-left: 5px;
+  margin-inline: 5px;
-  margin-right: 5px;
 }
 
 .cui-widget-panelview menuseparator.small-separator {
-  margin-left: 10px;
+  margin-inline: 10px;
-  margin-right: 10px;
 }
 
 .PanelUI-subView toolbarseparator[orient="vertical"] {
@@ -1385,14 +1374,12 @@ menuitem.panel-subview-footer@menuStateActive@,
   border-inline-start: 1px solid var(--panel-separator-color);
   border-top: none;
   margin: 0;
-  margin-inline-start: 6px;
+  margin-inline: 6px 7px;
-  margin-inline-end: 7px;
 }
 
 .subviewbutton > .menu-accel-container {
   -moz-box-pack: end;
-  margin-inline-start: 10px;
+  margin-inline: 10px auto;
-  margin-inline-end: auto;
 }
 
 .PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"],
@@ -1426,8 +1413,7 @@ toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menu-dro
 }
 
 #search-container[cui-areatype="menu-panel"] {
-  padding-top: 6px;
+  padding-block: 6px;
-  padding-bottom: 6px;
 }
 
 toolbarpaletteitem[place="palette"] > #search-container {
@@ -1441,8 +1427,7 @@ toolbarpaletteitem[place="palette"] > #search-container {
   border: 0;
   margin: 0;
   -moz-box-flex: 1;
-  padding-top: 4px;
+  padding-block: 4px;
-  padding-bottom: 4px;
   -moz-box-orient: horizontal;
 }
 
@@ -1622,17 +1607,16 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
 }
 
 .PanelUI-panic-actionlist {
+  padding-block: 2px;
   padding-inline-start: 20px;
-  padding-top: 2px;
-  padding-bottom: 2px;
   background-size: 16px 16px;
   background-repeat: no-repeat;
   background-color: transparent;
-  background-position: center left;
+  background-position: left center;
 }
 
 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
-  background-position: center right;
+  background-position-x: right;
 }
 
 #PanelUI-panic-actionlist-cookies {
@@ -2075,13 +2059,11 @@ panelview[mainview] #PanelUI-whatsNew-content {
 #PanelUI-profiler-info label {
   font-size: 16px;
   font-weight: bold;
-  margin-block: 6px;
+  margin: 6px 15px;
-  margin-inline: 15px;
 }
 
 #PanelUI-profiler-info description {
-  margin-block: 4px;
+  margin: 4px 15px;
-  margin-inline: 15px;
 }
 
 #PanelUI-profiler-info button {
@@ -2115,8 +2097,7 @@ panelview[mainview] #PanelUI-whatsNew-content {
   padding-inline: 4px;
   text-decoration: none;
   font-size: 12px;
-  margin-inline: 15px;
+  margin: 8px 15px;
-  margin-block: 8px;
 }
 
 /* This is dark-mode specific styling. */
@@ -2197,8 +2178,7 @@ panelview[mainview] #PanelUI-whatsNew-content {
 }
 
 #PanelUI-profiler-content-description {
-  margin-inline: 15px;
+  margin: 4px 15px;
-  margin-block: 4px;
   font-size: 12px;
   opacity: 0.75;
 }
@@ -2209,8 +2189,7 @@ panelview[mainview] #PanelUI-whatsNew-content {
   border-radius: 2px;
   color: #000;
   padding: 8px;
-  margin-block: 0;
+  margin: 0 5px;
-  margin-inline: 5px;
   font-size: 13px;
 }
 

browser/themes/shared/downloads/downloads.inc.css

@@ -30,7 +30,7 @@
   margin: 0;
   border: 0;
   min-width: 0;
-  border-left: 1px solid var(--panel-separator-color);
+  border-inline-start: 1px solid var(--panel-separator-color);
   -moz-appearance: none;
 }
 
@@ -55,8 +55,7 @@
 }
 
 #downloadsHistory {
-  padding-inline-start: 14px;
+  padding-inline: 14px;
-  padding-inline-end: 14px;
 }
 
 @item@ > toolbarseparator {
@@ -244,8 +243,7 @@
 }
 
 #downloadsPanel-blockedSubview-title {
-  margin-top: 16px;
+  margin-block: 16px;
-  margin-bottom: 16px;
   font-size: calc(100% / var(--downloads-item-font-size-factor));
 }
 
@@ -259,8 +257,7 @@
 #downloadsPanel-blockedSubview-title,
 #downloadsPanel-blockedSubview-details1,
 #downloadsPanel-blockedSubview-details2 {
-  -moz-margin-start: 64px;
+  margin-inline: 64px 16px;
-  -moz-margin-end: 16px;
 }
 
 /*** Progressmeter ***/

browser/themes/shared/downloads/indicator.inc.css

@@ -35,7 +35,7 @@
 
 #downloads-indicator-progress-inner {
   background: url("chrome://browser/skin/downloads/download-icons.svg#progress-bar-fg") left no-repeat;
-  margin-right: 16px;
+  margin-inline-end: 16px;
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill-attention);
   background-size: 16px;
@@ -51,10 +51,8 @@
 }
 
 #downloads-indicator-progress-inner:-moz-locale-dir(rtl) {
-  background-position: right;
+  background-position-x: right;
   animation-name: indicatorArrowProgressRTL;
-  margin-left: 16px;
-  margin-right: 0;
 }
 
 @keyframes indicatorArrowProgress {
@@ -86,7 +84,7 @@
   border-radius: 50%;
   /* "!important" is necessary to override the rule in toolbarbutton.css */
   margin-top: -1px !important;
-  margin-right: -2px !important;
+  margin-inline-end: -2px !important;
 }
 
 #downloads-button[cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {

browser/themes/shared/error-pages.css

@@ -30,10 +30,12 @@ body {
   display: flex;
   flex-direction: column;
   background-position: left center;
+  background-repeat: no-repeat;
+  background-size: 38%;
 }
 
-.illustrated[dir="rtl"] #errorPageContainer {
+.illustrated #errorPageContainer:dir(rtl) {
-  background-position: right center;
+  background-position-x: right;
 }
 
 .illustrated .title {
@@ -47,11 +49,6 @@ body {
   padding-inline-start: 38%;
 }
 
-.illustrated #errorPageContainer {
-  background-repeat: no-repeat;
-  background-size: 38%;
-}
-
 @media only screen and (max-width: 959px) {
   body {
     padding: 0 75px;

browser/themes/shared/newInstall.css

@@ -14,7 +14,7 @@ window {
 }
 
 description {
-  margin: 0 0 20px 0;
+  margin: 0 0 20px;
   padding: 0;
 }
 

browser/themes/shared/newInstallPage.css

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 h1 {
-  margin: 0 0 40px 0;
+  margin: 0 0 40px;
 }
 
 h3 {
@@ -12,12 +12,12 @@ h3 {
 }
 
 p {
-  margin: 0 0 20px 0;
+  margin: 0 0 20px;
 }
 
 #main {
   max-width: 830px;
-  margin: 40px auto 0 auto;
+  margin: 40px auto 0;
   padding: 0 5px;
 }
 
@@ -100,6 +100,6 @@ p {
   font-size: 87%;
   color: var(--in-content-deemphasized-text);
   margin-bottom: 0;
-  text-align: start;
   margin-inline: 4px; /* Align with input and button */
+  text-align: start;
 }

browser/themes/shared/notification-icons.inc.css

@@ -12,8 +12,8 @@
 }
 
 #notification-popup-box {
-  padding: 5px 0px;
+  padding: 5px 0;
-  margin: -5px 0px;
+  margin: -5px 0;
   margin-inline-end: -5px;
   padding-inline-end: 5px;
 }

browser/themes/shared/places/editBookmarkPanel.inc.css

@@ -10,7 +10,7 @@
 
 .panel-info-button {
   border-radius: var(--toolbarbutton-border-radius);
-  margin-right: 4px;
+  margin-inline-end: 4px;
 }
 
 .panel-info-button[disabled=true] {
@@ -41,7 +41,7 @@
 #editBookmarkPanelInfoArea {
   overflow: hidden;
   position: relative;
-  margin: 6px 8px 0 8px;
+  margin: 6px 8px 0;
 }
 
 #editBookmarkPanelRecommendation {
@@ -107,8 +107,7 @@
   display: flex;
   justify-content: space-between;
   align-items: start;
-  margin-bottom: 6px;
+  margin-block: 10px 6px;
-  margin-top: 10px;
   padding-top: 2px;
 }
 

browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css

@@ -22,12 +22,12 @@ html.private {
  * spread across the full page width.
  */
 body.showBanner {
-  padding: 0px 0px 40px;
+  padding: 0 0 40px;
   min-height: 0;
 }
 
 .showBanner > .showPrivate {
-  padding: 40px 48px 0px;
+  padding: 40px 48px 0;
 }
 
 a:link {
@@ -82,7 +82,7 @@ p {
 
 .search-handoff-button,
 .search-handoff-button:active,
-.search-handoff-button:enabled:hover:active  {
+.search-handoff-button:enabled:hover:active {
   background: #fff var(--newtab-search-icon) 12px center no-repeat;
   background-size: 24px;
   border: solid 1px rgba(249, 249, 250, 0.2);
@@ -91,9 +91,8 @@ p {
   cursor: text;
   font-size: 15px;
   margin: 0;
-  padding: 0;
+  padding-block: 0;
-  padding-inline-end: 48px;
+  padding-inline: 46px 48px;
-  padding-inline-start: 46px;
   position: relative;
   opacity: 1;
   transition: opacity 500ms;
@@ -132,11 +131,11 @@ p {
 .fake-editable {
   border: 0;
   height: 100%;
-  left: 0;
+  top: 0;
+  inset-inline-start: 0;
   opacity: 0;
   padding: 0;
   position: absolute;
-  top: 0;
   width: 100%;
 }
 
@@ -212,7 +211,7 @@ p {
 }
 
 .info:dir(rtl) {
-  background-position: right 32px top 20px;
+  background-position-x: right 32px;
 }
 
 .info h1 {

browser/themes/shared/sidebar.inc.css

@@ -35,10 +35,8 @@
 }
 
 #sidebar-box[positionend] + .sidebar-splitter {
-  border-inline-end-width: 0;
+  border-inline-width: 1px 0;
-  border-inline-start-width: 1px;
+  margin-inline-start: 0 -4px;
-  margin-inline-start: 0;
-  margin-inline-end: -4px;
 }
 %endif
 
@@ -56,8 +54,7 @@
 #sidebar-title {
   margin: 0;
   padding: 0;
-  padding-inline-start: 8px;
+  padding-inline: 8px 4px;
-  padding-inline-end: 4px;
 }
 
 #sidebar-switcher-arrow {
@@ -117,21 +114,21 @@ toolbarseparator + #sidebar-extensions-separator {
 %ifdef XP_MACOSX
 
 #sidebarMenu-popup > .subviewbutton[checked="true"] {
-  background-position: top 7px left 4px;
+  background-position: left 4px top 7px;
 }
 
 #sidebarMenu-popup > .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
-  background-position: top 7px right 4px;
+  background-position-x: right 4px;
 }
 
 %else
 
 #sidebarMenu-popup > .subviewbutton[checked="true"] {
-  background-position: center left 7px;
+  background-position: left 7px center;
 }
 
 #sidebarMenu-popup > .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
-  background-position: center right 7px;
+  background-position-x: right 7px;
 }
 
 /* Allow room for the checkbox drawn as a background image at the start of the toolbarbutton */

browser/themes/shared/syncedtabs/sidebar.inc.css

@@ -142,8 +142,7 @@ body {
   max-width: 16px;
   min-height: 16px;
   max-height: 16px;
-  margin-right: 5px;
+  margin-inline: 5px;
-  margin-left: 5px;
   background-size: 16px 16px;
   background-size: contain;
   background-repeat: no-repeat;
@@ -163,7 +162,7 @@ body {
   flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin: 0px;
+  margin: 0;
   line-height: 1.3;
   cursor: default;
 }
@@ -183,8 +182,7 @@ body {
 }
 
 .sync-state > p {
-  padding-inline-end: 10px;
+  padding-inline: 10px;
-  padding-inline-start: 10px;
 }
 
 .text-link {
@@ -198,9 +196,9 @@ body {
 
 .text-link,
 .text-link:focus {
-  margin: 0px;
+  margin: 0;
-  padding: 0px;
+  padding: 0;
-  border: 0px;
+  border: 0;
 }
 
 .deck .sync-state {
@@ -211,7 +209,7 @@ body {
 }
 
 .deck .sync-state.tabs-container {
-  border-top: 0px;
+  border-top: 0;
 }
 
 .deck .sync-state.selected {

browser/themes/shared/tabs.inc.css

@@ -290,14 +290,12 @@
   width: 16px;
   height: 16px;
   margin-top: -8px;
-  margin-inline-start: -15px;
+  margin-inline: -15px -1px;
-  margin-inline-end: -1px;
   position: relative;
 }
 
 .tab-icon-overlay[pinned] {
-  margin-inline-start: -6px;
+  margin-inline: -6px -10px;
-  margin-inline-end: -10px;
 }
 
 .tab-icon-overlay[crashed] {
@@ -358,8 +356,7 @@
 }
 
 .tab-label {
-  margin-inline-end: 0;
+  margin-inline: 0;
-  margin-inline-start: 0;
   /* Maintain consistent alignment in case of font fallback for non-Latin characters. */
   line-height: 1.7em;
 }
@@ -458,13 +455,11 @@
 }
 
 #tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator) {
-  margin-inline-start: -1px;
+  margin-inline: -1px -17px;
-  margin-inline-end: -17px;
 }
 
 #tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) {
-  margin-inline-start: -17px;
+  margin-inline: -17px -1px;
-  margin-inline-end: -1px;
 }
 
 #tabbrowser-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator),
@@ -587,8 +582,7 @@
 #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned]::after {
   display: block;
   position: absolute;
-  top: 0;
+  inset-block: 0;
-  bottom: 0;
   inset-inline-end: 0;
 }
 
@@ -650,8 +644,7 @@
 .tabbrowser-tab::after,
 .tabbrowser-tab::before {
   border-left: 1px solid var(--lwt-background-tab-separator-color, currentColor);
-  margin-top: 5px;
+  margin-block: 5px 4px;
-  margin-bottom: 4px;
   opacity: 0.3;
 }
 

browser/themes/shared/toolbarbuttons.inc.css

@@ -148,13 +148,11 @@ toolbar .toolbarbutton-1 > .toolbarbutton-text {
 }
 
 toolbar .toolbaritem-combined-buttons {
-  margin-left: 2px;
+  margin-inline: 2px;
-  margin-right: 2px;
 }
 
 toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
-  padding-left: 0;
+  padding-inline: 0;
-  padding-right: 0;
 }
 
 toolbar .toolbaritem-combined-buttons:not(:hover) > separator {
@@ -234,10 +232,8 @@ toolbar .toolbarbutton-1:-moz-focusring {
 }
 
 :root:not([uidensity=compact]) #back-button {
-  padding-top: 3px;
+  padding-block: 3px;
-  padding-bottom: 3px;
+  padding-inline: 3px 0;
-  padding-inline-start: 3px;
-  padding-inline-end: 0;
   position: relative !important;
   z-index: 1 !important;
   border-radius: 0 10000px 10000px 0;
@@ -273,8 +269,7 @@ toolbar .toolbarbutton-1:-moz-focusring {
 }
 
 :root[uidensity=touch] #back-button {
-  padding-top: 1px;
+  padding-block: 1px;
-  padding-bottom: 1px;
   padding-inline-start: 1px;
 }
 
@@ -300,14 +295,12 @@ toolbar .toolbarbutton-1:-moz-focusring {
 
 #BMB_bookmarksPopup[side="top"],
 #BMB_bookmarksPopup[side="bottom"] {
-  margin-left: -20px;
+  margin-inline: -20px;
-  margin-right: -20px;
 }
 
 #BMB_bookmarksPopup[side="left"],
 #BMB_bookmarksPopup[side="right"] {
-  margin-top: -20px;
+  margin-block: -20px;
-  margin-bottom: -20px;
 }
 
 /* ::::: bookmark buttons ::::: */

browser/themes/shared/urlbar-autocomplete.inc.css

@@ -71,8 +71,7 @@
 .urlbarView:not(.megabar) {
   position: fixed;
   z-index: 3;
-  left: 0;
+  inset-inline: 0;
-  right: 0;
   background: var(--autocomplete-popup-background);
   color: var(--autocomplete-popup-color);
   border-block: 1px solid var(--chrome-content-separator-color);
@@ -502,8 +501,7 @@
 #urlbar .search-panel-one-offs-header-label {
   white-space: nowrap;
   margin: 0;
-  padding-inline-start: 8px;
+  padding-inline: 8px 16px;
-  padding-inline-end: 16px;
 }
 
 #urlbar .searchbar-engine-one-off-item {

browser/themes/shared/urlbar-searchbar.inc.css

@@ -434,14 +434,12 @@
   /* Show the separator between the page actions and other elements when at
      least one of the latter is shown. */
   visibility: visible;
-  margin-left: 6px;
+  margin-inline: 6px;
-  margin-right: 6px;
 }
 
 #userContext-icons,
 #urlbar-zoom-button {
-  margin-left: 6px;
+  margin-inline: 6px;
-  margin-right: 6px;
 }
 
 .urlbar-icon {
@@ -908,8 +906,7 @@
   list-style-image: url(chrome://browser/skin/search-glass.svg);
   -moz-context-properties: fill, fill-opacity;
   pointer-events: none;
-  margin-inline-start: 8px;
+  margin-inline: 8px 6px;
-  margin-inline-end: 6px;
   width: 16px;
   fill-opacity: .4;
 }
@@ -928,28 +925,24 @@
 
 .searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay {
   list-style-image: url(chrome://browser/skin/search-indicator-badge-add.svg);
-  margin-inline-start: -15px;
+  margin-inline: -15px 4px;
-  margin-inline-end: 4px;
   margin-top: -10px;
   width: 11px;
   height: 11px;
 }
 
 .searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) {
-  margin-inline-start: -25px;
+  margin-inline: -25px 14px;
-  margin-inline-end: 14px;
 }
 
 .searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay {
   list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
   -moz-context-properties: fill;
-  margin-inline-start: -8px;
+  margin-inline: -8px 2px;
-  margin-inline-end: 2px;
   width: 6px;
   height: 6px;
 }
 
 .searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) {
-  margin-inline-start: -26px;
+  margin-inline: -26px 20px;
-  margin-inline-end: 20px;
 }