Bug 1513557 - Switch from flexbox to grid for a11y highlighter inforbar to support multi-row. r=pbro, a=RyanVM, l10n=flod DEVEDITION_65_0b5_BUILD1 DEVEDITION_65_0b5_RELEASE FENNEC_65_0b5_BUILD1 FENNEC_65_0b5_RELEASE FIREFOX_65_0b5_BUILD1 FIREFOX_65_0b5_RELEASE
authorYura Zenevich <yura.zenevich@gmail.com>
Sun, 16 Dec 2018 13:21:46 +0000
changeset 509049 dfe78db5e4ae6de6052b22e0e2d7ced375a0110c
parent 509048 627384d9dfe3a620a8632a30bec4f1a8ab04722f
child 509050 5cff1d50596b66e886b77e41373fcd802edfccd6
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro, RyanVM
bugs1513557
milestone65.0
Bug 1513557 - Switch from flexbox to grid for a11y highlighter inforbar to support multi-row. r=pbro, a=RyanVM, l10n=flod MozReview-Commit-ID: 7AAiOIbCfSF Differential Revision: https://phabricator.services.mozilla.com/D14430
devtools/server/actors/highlighters.css
devtools/server/actors/highlighters/xul-accessible.js
--- a/devtools/server/actors/highlighters.css
+++ b/devtools/server/actors/highlighters.css
@@ -639,25 +639,51 @@
 }
 
 :-moz-native-anonymous .shapes-marker-hover {
   fill: var(--highlighter-guide-color);
 }
 
 /* Accessible highlighter */
 
+:-moz-native-anonymous .accessible-infobar {
+  min-width: unset;
+}
+
+:-moz-native-anonymous .accessible-infobar-text {
+  display: grid;
+  grid-template-areas:
+    "role name"
+    "audit audit";
+  grid-template-columns: min-content 1fr;
+}
+
+:-moz-native-anonymous .accessible-infobar-role {
+  grid-area: role;
+  color: #9CDCFE;
+}
+
+:-moz-native-anonymous .accessible-infobar-name {
+  grid-area: name;
+}
+
+:-moz-native-anonymous .accessible-infobar-audit {
+  grid-area: audit;
+  padding-top: 5px;
+  padding-bottom: 2px;
+}
+
 :-moz-native-anonymous .accessible-bounds {
   opacity: 0.6;
   fill: #6a5acd;
 }
 
 :-moz-native-anonymous .accessible-infobar-name,
 :-moz-native-anonymous .accessible-infobar-audit {
   color: var(--highlighter-infobar-color);
-  max-width: 90%;
 }
 
 :-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio:not(:empty):before {
   content: "";
   height: 8px;
   width: 8px;
   display: inline-flex;
   background-color: var(--accessibility-highlighter-contrast-ratio-color);
@@ -693,18 +719,13 @@
   margin-inline-end: 3px;
 }
 
 :-moz-native-anonymous .accessible-infobar-audit .accessible-contrast-ratio-separator:before {
   content: "-";
   margin-inline-start: 3px;
 }
 
-:-moz-native-anonymous .accessible-infobar-name:not(:empty),
-:-moz-native-anonymous .accessible-infobar-audit:not(:empty) {
+:-moz-native-anonymous .accessible-infobar-name:not(:empty) {
   border-inline-start: 1px solid #5a6169;
   margin-inline-start: 6px;
   padding-inline-start: 6px;
 }
-
-:-moz-native-anonymous .accessible-infobar-role {
-  color: #9CDCFE;
-}
--- a/devtools/server/actors/highlighters/xul-accessible.js
+++ b/devtools/server/actors/highlighters/xul-accessible.js
@@ -36,17 +36,16 @@ const ACCESSIBLE_BOUNDS_SHEET = "data:te
     max-width: 90%;
     z-index: 11;
   }
 
   .accessible-infobar {
     position: relative;
     left: -50%;
     background-color: var(--highlighter-bubble-background-color);
-    min-width: 75px;
     border: 1px solid var(--highlighter-bubble-border-color);
     border-radius: 3px;
     padding: 5px;
   }
 
   .accessible-arrow {
     position: absolute;
     width: 0;
@@ -64,26 +63,44 @@ const ACCESSIBLE_BOUNDS_SHEET = "data:te
 
   .bottom {
     border-top: var(--highlighter-bubble-arrow-size) solid
       var(--highlighter-bubble-background-color);
     bottom: calc(-1 * var(--highlighter-bubble-arrow-size));
   }
 
   .accessible-infobar-text {
+    display: grid;
+    grid-template-areas:
+      "role name"
+      "audit audit";
+    grid-template-columns: min-content 1fr;
     overflow: hidden;
     white-space: nowrap;
-    display: flex;
     justify-content: center;
   }
 
+  .accessible-infobar-role {
+    color: #9CDCFE;
+    grid-area: role;
+  }
+
+  .accessible-infobar-name {
+    grid-area: name;
+  }
+
+  .accessible-infobar-audit {
+    grid-area: audit;
+    padding-top: 5px;
+    padding-bottom: 2px;
+  }
+
   .accessible-infobar-name,
   .accessible-infobar-audit {
     color: hsl(210, 30%, 85%);
-    max-width: 90%;
   }
 
   .accessible-infobar-audit .accessible-contrast-ratio:not(:empty):before {
     content: "";
     height: 8px;
     width: 8px;
     display: inline-flex;
     background-color: var(--accessibility-highlighter-contrast-ratio-color);
@@ -121,25 +138,20 @@ const ACCESSIBLE_BOUNDS_SHEET = "data:te
     margin-inline-end: 3px;
   }
 
   .accessible-infobar-audit .accessible-contrast-ratio-separator:before {
     content: "-";
     margin-inline-start: 3px;
   }
 
-  .accessible-infobar-name:not(:empty),
-  .accessible-infobar-audit:not(:empty) {
+  .accessible-infobar-name:not(:empty) {
     border-inline-start: 1px solid #5a6169;
     margin-inline-start: 6px;
     padding-inline-start: 6px;
-  }
-
-  .accessible-infobar-role {
-    color: #9CDCFE;
   }`);
 
 /**
  * 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