Bug 1555770 - update contrast highlighter FAIL icon to red circle with ! similar to other audit types. r=rcaliman
authorYura Zenevich <yura.zenevich@gmail.com>
Thu, 29 Aug 2019 13:45:57 +0000
changeset 554387 a284f570400baa5a56d262816b2f41c73b7f7892
parent 554386 62c8064a6be0e0aed89bbcd26ce37a7533b9e200
child 554388 3295674641649322d829ececd6df91f8ec98a7a7
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1555770
milestone70.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 1555770 - update contrast highlighter FAIL icon to red circle with ! similar to other audit types. r=rcaliman Differential Revision: https://phabricator.services.mozilla.com/D43810
devtools/server/actors/highlighters.css
devtools/server/actors/highlighters/xul-accessible.js
--- a/devtools/server/actors/highlighters.css
+++ b/devtools/server/actors/highlighters.css
@@ -738,46 +738,66 @@
   fill: #6a5acd;
 }
 
 :-moz-native-anonymous .accessible-infobar-name,
 :-moz-native-anonymous .accessible-infobar-audit {
   color: var(--highlighter-infobar-color);
 }
 
-:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:not(:empty)::before {
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:empty::before,
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:empty::after,
+:-moz-native-anonymous .accessible-infobar-name:empty {
+  display: none;
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio::before {
   content: "";
   height: 8px;
   width: 8px;
   display: inline-flex;
   background-color: var(--accessibility-highlighter-contrast-ratio-color);
   box-shadow: 0 0 0 1px var(--grey-40), 4px 3px var(--accessibility-highlighter-contrast-ratio-bg), 4px 3px 0 1px var(--grey-40);
   margin-inline-start: 3px;
   margin-inline-end: 9px;
 }
 
-:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:not(:empty)::after {
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio::after {
   margin-inline-start: 2px;
 }
 
-:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:not(:empty).AA::after,
-:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:not(:empty).AAA::after {
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio.AA::after,
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio.AAA::after {
   color: #90E274;
 }
 
-:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:not(:empty).FAIL::after {
-  color: #E57180;
-  content: "⚠️";
+:-moz-native-anonymous .accessible-infobar-audit .accessible-audit::before,
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio.FAIL::after {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  content: "";
+  vertical-align: -2px;
+  background-position: center;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
 }
 
-:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:not(:empty).AA::after {
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio.FAIL:after {
+  color: #E57180;
+  margin-inline-start: 3px;
+  background-image: url(chrome://devtools/skin/images/error-small.svg);
+  fill: var(--red-40);
+}
+
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio.AA::after {
   content: "AA\2713";
 }
 
-:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:not(:empty).AAA::after {
+:-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio.AAA::after {
   content: "AAA\2713";
 }
 
 :-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio-label,
 :-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio-separator::before {
   margin-inline-end: 3px;
 }
 
@@ -791,26 +811,18 @@
   padding-block-end: 5px;
 }
 
 :-moz-native-anonymous .accessible-infobar-audit .accessible-audit:last-child {
   padding-block-end: 0;
 }
 
 :-moz-native-anonymous .accessible-infobar-audit .accessible-audit::before {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  content: "";
   margin-inline-end: 4px;
-  vertical-align: -2px;
   background-image: none;
-  background-position: center;
-  background-repeat: no-repeat;
-  -moz-context-properties: fill;
   fill: currentColor;
 }
 
 :-moz-native-anonymous .accessible-infobar-audit .accessible-audit.FAIL::before {
   background-image: url(chrome://devtools/skin/images/error-small.svg);
   fill: var(--red-40);
 }
 
@@ -818,13 +830,13 @@
   background-image: url(chrome://devtools/skin/images/alert-small.svg);
   fill: var(--yellow-60);
 }
 
 :-moz-native-anonymous .accessible-infobar-audit .accessible-audit.BEST_PRACTICES::before {
   background-image: url(chrome://devtools/skin/images/info-small.svg);
 }
 
-:-moz-native-anonymous .accessible-infobar-name:not(:empty) {
+:-moz-native-anonymous .accessible-infobar-name {
   border-inline-start: 1px solid #5a6169;
   margin-inline-start: 6px;
   padding-inline-start: 6px;
 }
--- a/devtools/server/actors/highlighters/xul-accessible.js
+++ b/devtools/server/actors/highlighters/xul-accessible.js
@@ -97,102 +97,114 @@ const ACCESSIBLE_BOUNDS_SHEET =
     padding-bottom: 2px;
   }
 
   .accessible-infobar-name,
   .accessible-infobar-audit {
     color: hsl(210, 30%, 85%);
   }
 
-  .accessible-infobar-audit .accessible-contrast-ratio:not(:empty)::before {
+  .accessible-infobar-audit .accessible-contrast-ratio:empty::before,
+  .accessible-infobar-audit .accessible-contrast-ratio:empty::after,
+  .accessible-infobar-name:empty {
+    display: none;
+  }
+
+  .accessible-infobar-audit .accessible-contrast-ratio::before {
     content: "";
     height: 8px;
     width: 8px;
     display: inline-flex;
     background-color: var(--accessibility-highlighter-contrast-ratio-color);
     box-shadow: 0 0 0 1px var(--grey-40),
                 4px 3px var(--accessibility-highlighter-contrast-ratio-bg),
                 4px 3px 0 1px var(--grey-40);
     margin-inline-start: 3px;
     margin-inline-end: 9px;
   }
 
-  .accessible-infobar-audit .accessible-contrast-ratio:not(:empty)::after {
+  .accessible-infobar-audit .accessible-contrast-ratio::after {
     margin-inline-start: 2px;
   }
 
-  .accessible-infobar-audit .accessible-contrast-ratio:not(:empty).AA::after,
-  .accessible-infobar-audit .accessible-contrast-ratio:not(:empty).AAA::after {
+  .accessible-infobar-audit .accessible-contrast-ratio.AA::after,
+  .accessible-infobar-audit .accessible-contrast-ratio.AAA::after {
     color: #90E274;
   }
 
-  .accessible-infobar-audit .accessible-contrast-ratio:not(:empty).FAIL::after {
-    color: #E57180;
-    content: "⚠️";
+  .accessible-infobar-audit .accessible-audit::before,
+  .accessible-infobar-audit .accessible-contrast-ratio.FAIL::after {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    content: "";
+    vertical-align: -2px;
+    background-position: center;
+    background-repeat: no-repeat;
+    -moz-context-properties: fill;
   }
 
-  .accessible-infobar-audit .accessible-contrast-ratio:not(:empty).AA::after {
+  .accessible-infobar-audit .accessible-contrast-ratio.FAIL:after {
+    color: #E57180;
+    margin-inline-start: 3px;
+    background-image: url(chrome://devtools/skin/images/error-small.svg);
+    fill: var(--red-40);
+  }
+
+  .accessible-infobar-audit .accessible-contrast-ratio.AA::after {
     content: "AA\u2713";
   }
 
-  .accessible-infobar-audit .accessible-contrast-ratio:not(:empty).AAA::after {
+  .accessible-infobar-audit .accessible-contrast-ratio.AAA::after {
     content: "AAA\u2713";
   }
 
   .accessible-infobar-audit .accessible-contrast-ratio-label,
   .accessible-infobar-audit .accessible-contrast-ratio-separator::before {
     margin-inline-end: 3px;
   }
 
   .accessible-infobar-audit .accessible-contrast-ratio-separator::before {
     content: "-";
     margin-inline-start: 3px;
   }
 
-  .accessible-infobar-name:not(:empty) {
-    border-inline-start: 1px solid #5a6169;
-    margin-inline-start: 6px;
-    padding-inline-start: 6px;
-  }
-
   .accessible-infobar-audit .accessible-audit {
     display: block;
     padding-block-end: 5px;
   }
 
   .accessible-infobar-audit .accessible-audit:last-child {
     padding-block-end: 0;
   }
 
   .accessible-infobar-audit .accessible-audit::before {
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    content: "";
     margin-inline-end: 4px;
-    vertical-align: -2px;
     background-image: none;
-    background-position: center;
-    background-repeat: no-repeat;
-    -moz-context-properties: fill;
     fill: currentColor;
   }
 
   .accessible-infobar-audit .accessible-audit.FAIL::before {
     background-image: url(chrome://devtools/skin/images/error-small.svg);
     fill: var(--red-40);
   }
 
   .accessible-infobar-audit .accessible-audit.WARNING::before {
     background-image: url(chrome://devtools/skin/images/alert-small.svg);
     fill: var(--yellow-60);
   }
 
   .accessible-infobar-audit .accessible-audit.BEST_PRACTICES::before {
     background-image: url(chrome://devtools/skin/images/info-small.svg);
+  }
+
+  .accessible-infobar-name {
+    border-inline-start: 1px solid #5a6169;
+    margin-inline-start: 6px;
+    padding-inline-start: 6px;
   }`);
 
 /**
  * The XULWindowAccessibleHighlighter is a class that has the same API as the
  * AccessibleHighlighter, and by extension other highlighters that implement
  * auto-refresh highlighter, but instead of drawing in canvas frame anonymous
  * content (that is not available for chrome accessible highlighting) it adds a
  * transparrent inactionable element with the same position and bounds as the