Bug 1594196 - Fix badge positioning in about:addons r=Gijs
authorMark Striemer <mstriemer@mozilla.com>
Wed, 13 Nov 2019 15:31:28 +0000
changeset 501751 b10b622e1917719d0437e739bbfc3982ef0701b2
parent 501750 5b224b8fe0140093a967e223c2539b3e7669ecff
child 501752 72df434c8422366872d4050e9d9ba3e3121a4fbe
push id114172
push userdluca@mozilla.com
push dateTue, 19 Nov 2019 11:31:10 +0000
treeherdermozilla-inbound@b5c5ba07d3db [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1594196
milestone72.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1594196 - Fix badge positioning in about:addons r=Gijs Differential Revision: https://phabricator.services.mozilla.com/D51924
toolkit/mozapps/extensions/content/aboutaddons.css
toolkit/mozapps/extensions/content/panel-item.css
--- a/toolkit/mozapps/extensions/content/aboutaddons.css
+++ b/toolkit/mozapps/extensions/content/aboutaddons.css
@@ -437,35 +437,29 @@ addon-details {
   width: 24px;
   height: 24px;
   margin: 0;
   -moz-context-properties: fill;
   fill: currentColor;
   background-image: url("chrome://global/skin/icons/more.svg");
   background-repeat: no-repeat;
   background-position: center center;
+  /* Get the -badged ::after element in the right spot. */
+  padding: 1px;
+  display: flex;
+  justify-content: flex-end;
 }
 
 .more-options-button-badged::after {
   content: "";
   display: block;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--blue-50);
-  position: absolute;
-  top: 0;
-}
-
-.more-options-button-badged:-moz-locale-dir(ltr)::after {
-  right: 0;
-}
-
-.more-options-button-badged:-moz-locale-dir(rtl)::after {
-  left: 0;
 }
 
 panel-item {
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 panel-item[action="remove"] {
--- a/toolkit/mozapps/extensions/content/panel-item.css
+++ b/toolkit/mozapps/extensions/content/panel-item.css
@@ -42,17 +42,17 @@ button:dir(rtl) {
   content: "";
   display: block;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--blue-50);
   position: absolute;
   top: 4px;
-  left: 28px;
+  inset-inline-start: 28px;
 }
 
 button:focus,
 button:enabled:hover {
   background-color: var(--in-content-button-background);
 }
 
 button:enabled:hover:active {