Bug 1165973 - Use outline instead of border for focus ring. r=dao, a=sledru
--- 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;