Bug 1516767 - Adjust button border, outline and box-shadow to be compatible with High-Contrast Mode and less glitchy. r=jaws, a=RyanVM
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Mon, 14 Jan 2019 13:50:34 +0000
changeset 509466 3fa15331a2201b74baefa7120a599d5d70a85643
parent 509465 76325782999f2b06123ebbff85df059f3cab0696
child 509467 161822bbdcd274f0d67aa7c1a6913caeabf80aa6
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)
reviewersjaws, RyanVM
bugs1516767
milestone65.0
Bug 1516767 - Adjust button border, outline and box-shadow to be compatible with High-Contrast Mode and less glitchy. r=jaws, a=RyanVM
toolkit/themes/shared/in-content/common.inc.css
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -166,17 +166,17 @@ html|select,
 html|input[type="color"],
 xul|menulist,
 html|*.numberbox-input::-moz-number-spin-up,
 html|*.numberbox-input::-moz-number-spin-down {
   -moz-appearance: none;
   min-height: 32px;
   /* !important overrides button.css for disabled and default XUL buttons: */
   color: inherit !important;
-  border: none;
+  border: 1px solid transparent; /* needed for high-contrast mode, where it'll show up */
   border-radius: 2px;
   background-color: var(--in-content-button-background);
   font-weight: 400;
   padding: 0 8px;
   text-decoration: none;
   margin: 4px 8px;
   /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
   font-size: 1em;
@@ -189,19 +189,23 @@ html|button {
   margin-right: 4px;
 }
 
 *|button::-moz-focus-inner {
   border: none;
 }
 
 *|button:-moz-focusring {
-  box-shadow: 0 0 0 1px var(--in-content-border-active) inset,
-    0 0 0 1px var(--in-content-border-active),
-    0 0 0 4px var(--in-content-border-active-shadow);
+  outline: 2px solid var(--in-content-border-active);
+  /* offset outline to align with 1px border-width set for buttons/menulists above. */
+  outline-offset: -1px;
+  /* Make outline-radius slightly bigger than the border-radius set above,
+   * to make the thicker outline corners look smooth */
+  -moz-outline-radius: 3px;
+  box-shadow: 0 0 0 4px var(--in-content-border-active-shadow);
 }
 
 html|select:not([size]):not([multiple]) {
   background-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
   background-position: right 3px center;
   background-repeat: no-repeat;
   background-size: auto 18px;
   font-size: inherit;