Bug 1506510 - add keyboard focus styling for toolbar/urlbar buttons. r=dao
☠☠ backed out by 6bb6c4d3a048 ☠ ☠
authorYura Zenevich <yura.zenevich@gmail.com>
Wed, 13 Mar 2019 14:31:37 +0000
changeset 521712 fffb4b5030da
parent 521711 add69e4bd9af
child 521713 492c2ba4953f
push id10867
push userdvarga@mozilla.com
push dateThu, 14 Mar 2019 15:20:45 +0000
treeherdermozilla-beta@abad13547875 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1506510
milestone67.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 1506510 - add keyboard focus styling for toolbar/urlbar buttons. r=dao Differential Revision: https://phabricator.services.mozilla.com/D19958
browser/app/profile/firefox.js
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/identity-block/identity-block.inc.css
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/shared/urlbar-searchbar.inc.css
browser/themes/windows/browser.css
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1834,9 +1834,9 @@ pref("prio.enabled", true);
 pref("browser.discovery.enabled", true);
 pref("browser.discovery.containers.enabled", true);
 pref("browser.discovery.sites", "addons.mozilla.org");
 
 pref("browser.engagement.recent_visited_origins.expiry", 86400); // 24 * 60 * 60 (24 hours in seconds)
 
 pref("browser.aboutConfig.showWarning", true);
 
-pref("browser.toolbars.keyboard_navigation", false);
+pref("browser.toolbars.keyboard_navigation", true);
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -257,21 +257,16 @@ menuitem.bookmark-item {
 %include ../shared/urlbarSearchSuggestionsNotification.inc.css
 
 #search-container {
   min-width: calc(54px + 11ch);
 }
 
 /* identity box */
 
-#identity-box:not(:active):-moz-focusring {
-  outline: 1px dotted;
-  outline-offset: -3px;
-}
-
 %include ../shared/identity-block/identity-block.inc.css
 
 %include ../shared/notification-icons.inc.css
 %include ../shared/addon-notification.inc.css
 
 /* Notification icon box */
 
 .notification-anchor-icon:-moz-focusring {
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -262,19 +262,17 @@ html|input.urlbar-input {
 .searchbar-textbox[focused="true"] {
   box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
               0 0 0 1px var(--toolbar-field-focus-border-color);
 }
 
 %include ../shared/identity-block/identity-block.inc.css
 
 #identity-box:not(:active):-moz-focusring {
-  box-shadow: var(--focus-ring-box-shadow);
   border-inline-end-style: none;
-  padding-inline-end: 5px;
 }
 
 /* ::::: URL Bar Zoom Reset Button ::::: */
 @keyframes urlbar-zoom-reset-pulse {
   0% {
     transform: scale(0);
   }
   75% {
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -33,16 +33,22 @@
 }
 
 #identity-box:hover:active:not(.no-hover),
 #identity-box[open=true] {
   background-color: hsla(0,0%,70%,.3);
   fill-opacity: .8;
 }
 
+#identity-box:not(:active):-moz-focusring {
+  outline: var(--toolbarbutton-focus-outline);
+  outline-offset: -2px;
+  -moz-outline-radius: var(--toolbarbutton-border-radius);
+}
+
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
   color: #058B00;
 }
 
 :root[lwt-toolbar-field-brighttext] #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
   color: #30e60b;
 }
 
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -3,16 +3,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
   --toolbarbutton-hover-transition-duration: 150ms;
 
   --toolbarbutton-outer-padding: 2px;
   --toolbarbutton-inner-padding: 6px;
 
+  --toolbarbutton-focus-outline: 2px solid currentColor;
+
   /* These hover and active colors should work on both light and dark
      backgrounds. We'll later set colors that cater for light and dark
      backgrounds specifically when we can detect them. */
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0,0%,70%,.4));
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0,0%,70%,.6));
 
   --backbutton-background: hsla(0,100%,100%,.8);
   --backbutton-hover-background: var(--backbutton-background);
@@ -192,16 +194,47 @@ toolbar .toolbarbutton-1:not([disabled=t
   color: inherit;
 }
 
 toolbar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
   background-color: var(--toolbarbutton-hover-background);
   transition: background-color .4s;
 }
 
+/* Keyboard focus styling */
+#PersonalToolbar .toolbarbutton-1:-moz-focusring,
+.findbar-button:-moz-focusring,
+findbar toolbarbutton.tabbable:-moz-focusring,
+toolbarbutton.bookmark-item:not(.subviewbutton):-moz-focusring,
+toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-icon,
+toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-text,
+toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-badge-stack {
+  color: inherit;
+  outline: var(--toolbarbutton-focus-outline);
+  -moz-outline-radius: var(--toolbarbutton-border-radius);
+  outline-offset: unset;
+}
+
+:root[uidensity=compact] .findbar-button:-moz-focusring,
+:root[uidensity=compact] findbar toolbarbutton.tabbable:-moz-focusring,
+:root[uidensity=compact] toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-icon,
+:root[uidensity=compact] toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-text,
+:root[uidensity=compact] toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-badge-stack {
+  outline-offset: -1px;
+}
+
+#PersonalToolbar .toolbarbutton-1:-moz-focusring,
+toolbarbutton.bookmark-item:not(.subviewbutton):-moz-focusring {
+  outline-offset: -2px;
+}
+
+toolbar .toolbarbutton-1:-moz-focusring {
+  outline: none;
+}
+
 :root:not([uidensity=compact]) #back-button {
   padding-top: 3px;
   padding-bottom: 3px;
   padding-inline-start: 3px;
   padding-inline-end: 0;
   position: relative !important;
   z-index: 1 !important;
   border-radius: 0 10000px 10000px 0;
@@ -223,16 +256,24 @@ toolbar .toolbarbutton-1[checked]:not(:a
   border-radius: 10000px;
   width: 34px;
   height: 34px;
   padding: 8px;
   transition-property: box-shadow;
   transition-duration: var(--toolbarbutton-hover-transition-duration);
 }
 
+:root:not([uidensity=compact]) #back-button:-moz-focusring > .toolbarbutton-icon {
+  -moz-outline-radius: 10000px;
+}
+
+:root[uidensity=touch] #back-button:-moz-focusring > .toolbarbutton-icon {
+  outline-offset: -2px;
+}
+
 :root[uidensity=touch] #back-button {
   padding-top: 1px;
   padding-bottom: 1px;
   padding-inline-start: 1px;
 }
 
 :root[uidensity=touch] #back-button > .toolbarbutton-icon {
   width: 38px;
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -314,16 +314,23 @@
 }
 
 .urlbar-icon-wrapper[open] > .urlbar-icon,
 .urlbar-icon-wrapper > .urlbar-icon:hover,
 .urlbar-icon-wrapper > .urlbar-icon:hover:active {
   background-color: transparent;
 }
 
+.urlbar-icon:-moz-focusring,
+.urlbar-icon-wrapper:-moz-focusring {
+  outline: var(--toolbarbutton-focus-outline);
+  outline-offset: -2px;
+  -moz-outline-radius: var(--toolbarbutton-border-radius);
+}
+
 .urlbar-go-button,
 .search-go-button {
   list-style-image: url("chrome://browser/skin/forward.svg");
 }
 
 .urlbar-go-button:-moz-locale-dir(rtl),
 .search-go-button:-moz-locale-dir(rtl) {
   transform: scaleX(-1);
@@ -693,16 +700,22 @@
 :root[lwt-toolbar-field-brighttext] #urlbar-zoom-button:hover {
   background-color: rgba(255,255,255,.2);
 }
 
 :root[lwt-toolbar-field-brighttext] #urlbar-zoom-button:hover:active {
   background-color: rgba(255,255,255,.3);
 }
 
+#urlbar-zoom-button:-moz-focusring {
+  outline: var(--toolbarbutton-focus-outline);
+  outline-offset: unset;
+  -moz-outline-radius: 1em;
+}
+
 #urlbar-zoom-button > .toolbarbutton-text {
   display: -moz-box;
 }
 
 #urlbar-zoom-button > .toolbarbutton-icon {
   display: none;
 }
 
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -622,21 +622,16 @@ html|*.urlbar-input:-moz-lwtheme::placeh
 %include ../shared/urlbarSearchSuggestionsNotification.inc.css
 
 #search-container {
   min-width: calc(54px + 11ch);
 }
 
 /* identity box */
 
-#identity-box:not(:active):-moz-focusring {
-  outline: 1px dotted;
-  outline-offset: -3px;
-}
-
 %include ../shared/identity-block/identity-block.inc.css
 
 /* autocomplete */
 
 %include ../shared/autocomplete.inc.css
 %include ../shared/urlbar-autocomplete.inc.css
 
 #urlbarView-results {