Bug 1516767 - adjust button border, outline and box-shadow to be compatible with High-Contrast Mode and less glitchy, r=jaws
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Fri, 11 Jan 2019 23:24:43 +0000
changeset 453589 fbc1cb5a84a9
parent 453588 d5da954d4dd2
child 453590 3a5956b8ebdf
push id35360
push usernbeleuzu@mozilla.com
push dateSat, 12 Jan 2019 09:39:47 +0000
treeherdermozilla-central@cb35977ae7a4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1516767
milestone66.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 1516767 - adjust button border, outline and box-shadow to be compatible with High-Contrast Mode and less glitchy, r=jaws Differential Revision: https://phabricator.services.mozilla.com/D16328
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
@@ -165,17 +165,17 @@ html|button {
 *|button,
 html|select,
 html|input[type="color"],
 xul|menulist {
   -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;
@@ -193,20 +193,23 @@ html|select::-moz-focus-inner,
 html|input[type="color"]::-moz-focus-inner {
   border: none;
 }
 
 *|button:-moz-focusring,
 html|select:-moz-focusring,
 html|input[type="color"]:-moz-focusring,
 xul|menulist:-moz-focusring {
-  outline: none;
-  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;