Bug 1506105 - "Buttons and icons are not visible in High Contrast mode" r=Felipe a=jcristau
authorFlorian Quèze <florian>
Thu, 22 Nov 2018 08:13:00 +0200
changeset 501338 811d4b940b9b6589840aa30f0000c8885b6c36b0
parent 501337 ce76875904c66eb097b352296c1c72ed03a2d4b3
child 501339 4194c702938e71fa21e907e531aa2aaddaf20ffa
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersFelipe, jcristau
bugs1506105
milestone64.0
Bug 1506105 - "Buttons and icons are not visible in High Contrast mode" r=Felipe a=jcristau
toolkit/components/aboutperformance/content/aboutPerformance.xhtml
--- a/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
@@ -171,46 +171,51 @@
         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;
       }
 
       /* icons */
       .action-icon::after {
-        content: ""; /* The ::after pseudo element isn't generated without
-                        specifying a value for this attribute. */
         -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) {
@@ -246,31 +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: 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;
       }