Bug 1506105 - Display the clickable icons using the content property instead of as a background image so that they are visible in high contrast mode, r=felipe.
authorFlorian Quèze <florian@queze.net>
Tue, 20 Nov 2018 15:32:01 +0100
changeset 503701 f9e9cf90de3d10a55a22f9db8efc600add0d0efe
parent 503700 4700d8714486d2982443ff7d703b7b16402ec76a
child 503702 a0d45e98912fc4135ac222e540907b90a4f22eeb
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfelipe
bugs1506105
milestone65.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 1506105 - Display the clickable icons using the content property instead of as a background image so that they are visible in high contrast mode, r=felipe.
toolkit/components/aboutperformance/content/aboutPerformance.xhtml
--- a/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
@@ -161,27 +161,27 @@
        * ::after is used to display the icons as a background that can be
        * flipped using a CSS transform in RTL mode. */
       .action-icon {
         position: relative;
         opacity: 0;
       }
       /* Ensure both pseudo elements have the same size and position. */
       .action-icon::before, .action-icon::after {
-        content: "";
         height: 200%;
         position: absolute;
         top: -50%;
         left: -3px;
         padding-left: 13px;
         padding-right: 13px;
       }
 
       /* square background */
       .action-icon::before {
+        content: "";
         background-color: currentColor;
         opacity: 0;
       }
       .action-icon:hover::before {
         opacity: 0.1;
       }
       .action-icon:hover:active::before {
         opacity: 0.2;
@@ -189,27 +189,33 @@
 
       /* icons */
       .action-icon::after {
         -moz-context-properties: fill, fill-opacity;
         fill-opacity: 0;
         background-repeat: no-repeat;
         background-position: center;
         fill: currentColor;
+        line-height: 100%;
       }
       .addon-icon::after {
-        background-image: url("chrome://global/skin/icons/shortcut.svg");
-        background-size: 16px;
+        content: url("chrome://global/skin/icons/shortcut.svg");
+        top: 2px;
+        left: -11px;
+        width: 16px;
       }
       .addon-icon:dir(rtl)::after {
         transform: scaleX(-1);
       }
       .close-icon::after {
-        background-image: url("chrome://global/skin/icons/close.svg");
-        background-size: 24px;
+        content: url("chrome://global/skin/icons/close.svg");
+        height: 100%;
+        top: 0;
+        left: -13px;
+        transform: scale(1.2);
       }
 
       #dispatch-table > thead > tr > td {
         border: none;
         background-color: var(--in-content-box-background-hover);
         padding: 5px 10px;
       }
       #dispatch-table > thead > tr > td:not(:first-child) {
@@ -245,32 +251,32 @@
         margin-inline-end: 26px;
         padding-inline-end: 18px;
         padding-inline-start: 18px;
         position: relative;
       }
       /* Putting the background image in a positioned pseudo element lets us
        * use CSS transforms on the background image, which we need for rtl. */
       .twisty::before {
-        content: "";
+        content: url("chrome://global/skin/icons/twisty-collapsed.svg");
         position: absolute;
-        height: 100%;
+        display: block;
+        line-height: 50%;
+        top: 4px; /* Half the image's height */
         width: 100%;
         left: 0;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-image: url("chrome://global/skin/icons/twisty-collapsed.svg");
+        text-align: center;
         -moz-context-properties: fill;
         fill: currentColor;
       }
       .twisty:dir(rtl)::before {
         transform: scaleX(-1);
       }
       .twisty.open::before {
-        background-image: url("chrome://global/skin/icons/twisty-expanded.svg");
+        content: url("chrome://global/skin/icons/twisty-expanded.svg");
       }
       #dispatch-tbody > tr > td.indent {
         padding-inline-start: 88px;
         background-position-x: left 62px;
       }
       #dispatch-tbody > tr > td.indent:dir(rtl) {
         background-position-x: right 62px;
       }