Bug 1512332 - Photonized focusring for menulist etc. r=dao
authormatthias <matthias@kammueller.eu>
Tue, 18 Dec 2018 14:25:15 +0000
changeset 451309 b02de5a5396bce8f2b44d32e887682a513750c4c
parent 451308 be2cd52df09960ab20bf1766d9926959cbff8a8b
child 451310 eaaa498928056968dd15586267b678321dd4ed77
push id110646
push userebalazs@mozilla.com
push dateWed, 19 Dec 2018 16:05:18 +0000
treeherdermozilla-inbound@1acd86ad823c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1512332
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 1512332 - Photonized focusring for menulist etc. r=dao Differential Revision: https://phabricator.services.mozilla.com/D14001
toolkit/themes/linux/global/in-content/common.css
toolkit/themes/osx/global/in-content/common.css
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/windows/global/in-content/common.css
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -43,17 +43,20 @@ xul|*.radio-label-box {
   -moz-appearance: none;
 }
 
 xul|*.numberbox-input-box {
   -moz-appearance: none;
   border-width: 0;
 }
 
-xul|menulist:-moz-focusring > xul|*.menulist-label-box,
+xul|menulist:-moz-focusring > xul|*.menulist-label-box {
+  outline: none;
+}
+
 html|input[type="checkbox"]:-moz-focusring + html|label:before {
   outline: 1px dotted;
 }
 
 html|button {
   /* XUL button min-width */
   min-width: 6.3em;
 }
--- a/toolkit/themes/osx/global/in-content/common.css
+++ b/toolkit/themes/osx/global/in-content/common.css
@@ -52,17 +52,16 @@ xul|*.radio-icon {
 }
 
 xul|*.text-link:-moz-focusring {
   color: var(--in-content-link-highlight);
   text-decoration: underline;
   box-shadow: none;
 }
 
-xul|menulist:-moz-focusring,
 xul|checkbox:-moz-focusring > .checkbox-check,
 html|input[type="checkbox"]:-moz-focusring + html|label:before,
 xul|radio[focused="true"] > .radio-check,
 xul|tab:-moz-focusring > .tab-middle > .tab-text {
   outline: 2px solid rgba(0,149,221,0.5);
   outline-offset: 1px;
   -moz-outline-radius: 2px;
 }
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -184,21 +184,29 @@ html|*.numberbox-input::-moz-number-spin
 
 xul|button,
 html|button {
   /* use the same margin of other elements for the alignment */
   margin-left: 4px;
   margin-right: 4px;
 }
 
-*|button::-moz-focus-inner {
+html|button::-moz-focus-inner,
+html|select::-moz-focus-inner,
+html|input[type="color"]::-moz-focus-inner {
   border: none;
 }
 
-*|button:-moz-focusring {
+*|button:-moz-focusring,
+html|select:-moz-focusring,
+html|input[type="color"]:-moz-focusring,
+xul|menulist:-moz-focusring,
+html|input[type="number"]:-moz-focusring::-moz-number-spin-up,
+html|input[type="number"]:-moz-focusring::-moz-number-spin-down {
+  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);
 }
 
 html|select:not([size]):not([multiple]) {
   background-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
   background-position: right 3px center;
--- a/toolkit/themes/windows/global/in-content/common.css
+++ b/toolkit/themes/windows/global/in-content/common.css
@@ -17,22 +17,20 @@ xul|radio {
 @media (-moz-windows-default-theme: 0) {
   xul|*.checkbox-check[checked],
   xul|*.radio-check[selected] {
     fill: -moz-fieldText;
     background-color: -moz-field;
   }
 }
 
-/* Never draw a border for the focusring, use outline instead */
-xul|*.menulist-label-box {
-  border-style: none;
+xul|menulist:-moz-focusring > xul|*.menulist-label-box {
+  outline: none !important;
 }
 
-xul|menulist:-moz-focusring > xul|*.menulist-label-box,
 html|input[type="checkbox"]:-moz-focusring + html|label:before {
   outline: 1px dotted;
 }
 
 /* Use a 2px border so that selected row highlight is still visible behind
     an existing high-contrast border that uses the background color */
 @media (-moz-windows-default-theme: 0) {
   xul|treechildren::-moz-tree-row(selected) {