Bug 1165973 - Use outline instead of border for focus ring. r=dao, a=sledru
authorRichard Marti <richard.marti@gmail.com>
Thu, 28 May 2015 19:33:30 +0200
changeset 274979 b407b0f366757b426c6594d8e73d230961531dee
parent 274978 0f82f1286aa7e833d82f1728c1b526b6320cc913
child 274980 ed62f1d19c122d59e9d85f735350a1e3ef9b266e
push id863
push userraliiev@mozilla.com
push dateMon, 03 Aug 2015 13:22:43 +0000
treeherdermozilla-release@f6321b14228d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, sledru
bugs1165973
milestone40.0a2
Bug 1165973 - Use outline instead of border for focus ring. r=dao, a=sledru
browser/themes/shared/incontentprefs/preferences.inc.css
toolkit/themes/linux/global/global.css
toolkit/themes/shared/extensions/extensions.inc.css
toolkit/themes/windows/global/global.css
toolkit/themes/windows/global/in-content/common.css
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -238,18 +238,18 @@ description > html|a {
   margin: 0;
 }
 
 #weavePrefsDeck > vbox > label,
 #weavePrefsDeck > vbox > groupbox,
 #weavePrefsDeck > vbox > description,
 #weavePrefsDeck > vbox > #pairDevice > label,
 #weavePrefsDeck > #needsUpdate > hbox > #loginError,
-#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label,
-#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-small) > label {
+#weavePrefsDeck > #hasFxaAccount > vbox > label,
+#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label {
   /* no margin-start for elements at the begin of a line */
   -moz-margin-start: 0;
 }
 
 #tabsElement {
   -moz-margin-end: 4px; /* add the 4px end-margin of other elements */
 }
 
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -259,26 +259,25 @@ label[disabled="true"] {
 }
 
 .wizard-box {
   padding: 20px 44px 10px;
 }
 
 .text-link {
   color: -moz-nativehyperlinktext;
-  border: 1px solid transparent;
   cursor: pointer;
 }
 
 .text-link:hover {
   text-decoration: underline;
 }
-  
-.text-link:focus {
-  border: 1px dotted -moz-DialogText;
+
+.text-link:-moz-focusring {
+  outline: 1px dotted;
 }
 
 notification > button {
   margin-top: 0;
   margin-bottom: 0;
 }
 
 popupnotificationcontent {
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -1016,16 +1016,17 @@ button.button-link:not([disabled="true"]
 /*** info UI for add-ons that have been disabled for being unsigned ***/
 
 #show-disabled-unsigned-extensions:not(:hover) {
   background-color: #fcf8ed;
 }
 
 #disabled-unsigned-addons-info {
   margin-bottom: 2em;
+  -moz-margin-end: 48px;
 }
 
 #disabled-unsigned-addons-heading {
   font-size: 1.4em;
   font-weight: bold;
   margin-bottom: .5em;
 }
 
--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@@ -269,26 +269,25 @@ label[disabled="true"]:-moz-system-metri
 }
 
 .wizard-box {
   padding: 20px 44px 10px;
 }
 
 .text-link {
   color: -moz-nativehyperlinktext;
-  border: 1px solid transparent;
   cursor: pointer;
 }
 
 .text-link:hover {
   text-decoration: underline;
 }
 
 .text-link:-moz-focusring {
-  border: 1px dotted -moz-DialogText;
+  outline: 1px dotted;
 }
 
 popupnotificationcontent {
   margin-top: .5em;
 }
 
 /* :::::: autoscroll popup ::::: */
 
--- a/toolkit/themes/windows/global/in-content/common.css
+++ b/toolkit/themes/windows/global/in-content/common.css
@@ -51,46 +51,30 @@ xul|radio {
   }
 }
 
 xul|*.radio-icon,
 xul|*.checkbox-icon {
   -moz-margin-end: 0;
 }
 
-xul|*.text-link:-moz-focusring,
-xul|*.inline-link:-moz-focusring {
-  border: 1px dotted -moz-DialogText;
+/* Never draw a border for the focusring, use outline instead */
+xul|*.button-box,
+xul|*.menulist-label-box,
+xul|*.radio-label-box,
+xul|*.checkbox-label-box {
+  border-style: none;
 }
 
-/* Don't draw a transparent border for the focusring because when page
-   colors are disabled, the border is drawn in -moz-DialogText */
-xul|*.text-link:not(:-moz-focusring),
-xul|button:not(:-moz-focusring) > xul|*.button-box,
-xul|menulist:not(:-moz-focusring) > xul|*.menulist-label-box,
-xul|radio:not([focused="true"]) > xul|*.radio-label-box,
-xul|checkbox:not(:-moz-focusring) > xul|*.checkbox-label-box {
-  border-width: 0;
-  margin: 1px;
-}
-
-xul|*.text-link:not(:-moz-focusring) {
-  margin-top: 2px;
-  margin-right: 1px !important;
-  margin-left: 1px !important;
-  margin-bottom: 3px;
-}
-
-xul|menulist:not(:-moz-focusring) > xul|*.menulist-label-box {
-  margin: 2px;
-}
-
-xul|radio:not([focused="true"]) > xul|*.radio-label-box,
-xul|checkbox:not(:-moz-focusring) > xul|*.checkbox-label-box {
-  -moz-margin-start: 0;
+xul|*.inline-link:-moz-focusring,
+xul|button:-moz-focusring > xul|*.button-box,
+xul|menulist:-moz-focusring > xul|*.menulist-label-box,
+xul|radio[focused="true"] > xul|*.radio-label-box,
+xul|checkbox:-moz-focusring > xul|*.checkbox-label-box {
+  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 not all and (-moz-windows-default-theme) {
   xul|treechildren::-moz-tree-row(selected),
   xul|listbox xul|listitem[selected="true"] {
      border: 2px dotted Highlight;